/* ==========================================================================
   Melaira — melaira.com
   Direction "Nightdrive": near-black ground, condensed display type, one warm
   accent and one cool. Built for photographic covers that already carry their
   own burned-in titles — the artwork is never covered, only framed.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --ink:    #0e0d0c;
  --panel:  #161413;
  --raised: #1b1817;

  --text:   #f2ede7;
  --bright: #f7f3ee;
  --text-2: #cdc4bc;
  --muted:  #9a9089;
  /* Was #6f665f: 3.46:1 on the page and 3.27:1 on panels, under the 4.5:1 that
     small text needs - and it is the colour of every small label on the site,
     from durations to the footer. #8b8179 passes on all three grounds (5.10
     black, 4.82 panel, 4.64 raised) and still sits below --muted, so the
     step between "secondary" and "quiet" survives. */
  --dim:    #8b8179;

  --line:   #221f1d;
  --line-2: #2c2825;
  --line-3: #3a342f;

  --warm:   #e08150;
  --warm-b: #f0a077;
  --cool:   #3fa2b5;

  --display: 'Bebas Neue', Impact, 'Haettenschweiler', sans-serif;
  --sans:    'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --pad:  clamp(20px, 5vw, 72px);
  --wrap: 1440px;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
picture { display: block; }
img { height: auto; }

a { color: var(--warm); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--warm-b); }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: 12px 18px; background: var(--warm); color: var(--ink);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--warm);
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--warm); flex-shrink: 0; }
.sep { color: var(--line-3); margin-inline: 2px; }

/* ------------------------------------------------------------------ header */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in {
  max-width: var(--wrap); margin: 0 auto; padding: 22px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* The wordmark is deliberately NOT the display face. The hero headline is
   Bebas, so a Bebas wordmark just reads as the same words twice; a small,
   wide-tracked sans with an equaliser mark reads as a logo instead. */
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { color: var(--bright); }
.brand:hover .brand__eq i { background: var(--warm-b); }

.brand__name {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  letter-spacing: .30em; text-transform: uppercase; white-space: nowrap;
}

.brand__eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex-shrink: 0; }
.brand__eq i {
  width: 2px; background: var(--warm); border-radius: 1px;
  transition: background .2s ease;
  animation: eq 1.1s ease-in-out infinite alternate;
}
.brand__eq i:nth-child(1) { height: 40%;  animation-delay: 0ms; }
.brand__eq i:nth-child(2) { height: 90%;  animation-delay: 140ms; }
.brand__eq i:nth-child(3) { height: 60%;  animation-delay: 280ms; }
.brand__eq i:nth-child(4) { height: 100%; animation-delay: 90ms; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 32px; flex: 0 0 auto; }
.nav__link {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.nav__link:hover { color: var(--text); }
.nav__link.is-active { color: var(--warm); }

/* Two groups, and the difference between them is the point: Listen is the
   primary action and carries the border, Follow is secondary and stays
   borderless until hovered. Six identical buttons would read as a toolbar and
   ask the visitor to choose between six equal things. */
.hdr__streams {
  display: flex; align-items: center; gap: 6px;
  padding-left: 16px; border-left: 1px solid var(--line-2);
}
.hdr__streams__label {
  margin-right: 2px; white-space: nowrap;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
}
.hdr__stream {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--text-2); border: 1px solid var(--line-2); border-radius: 3px;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.hdr__stream svg { width: 19px; height: 19px; }
.hdr__stream:hover { color: var(--warm); border-color: var(--warm); background: var(--panel); }

/* Bare 17px glyphs read as decoration and get missed. A word and a larger
   glyph make them findable without competing with Listen. */
.hdr__social {
  display: flex; align-items: center; gap: 7px;
  padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--line);
}
.hdr__social__label {
  margin-right: 1px; white-space: nowrap;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}
.hdr__social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--dim); border: 1px solid transparent; border-radius: 3px;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.hdr__social a:hover { color: var(--warm); border-color: var(--warm); background: var(--panel); }
.hdr__social svg { width: 18px; height: 18px; }

.burger {
  display: none; width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: 3px;
  color: var(--text); cursor: pointer;
}
.menu { display: none; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; min-height: 600px; display: grid; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
/* The <img> is wrapped in a <picture> for the webp source, so its height:100%
   resolves against the <picture> - not against .hero__bg. Without a height
   here the percentage never resolves, object-fit has no box to cover, and the
   image falls back to its intrinsic size. On a wide screen that happened to
   overflow the hero and looked correct; at phone width it left a gap. */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 18%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 4%, rgba(14,13,12,.78) 42%, rgba(14,13,12,.10) 78%),
    linear-gradient(0deg, rgba(14,13,12,.45) 0%, rgba(14,13,12,0) 45%);
}
.hero__in {
  position: relative;
  /* width:100% matters. This is a grid item, and `margin: 0 auto` cancels the
     default stretch: without an explicit width it shrinks to its content and
     the auto margins then centre it - which put the copy in the middle of the
     frame, on top of her face. */
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 84px var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 22px;
}
.hero__copy { max-width: 40rem; display: flex; flex-direction: column; gap: 22px; }
.hero__name {
  font-family: var(--display);
  font-size: clamp(72px, 11vw, 148px);
  line-height: .84; letter-spacing: .01em; color: var(--bright);
}
.hero__tag { font-size: 19px; line-height: 1.65; color: var(--text-2); max-width: 34rem; text-wrap: pretty; }

.genres { display: flex; flex-wrap: wrap; gap: 10px; }
/* On a song page the pills follow the description, and a paragraph has no
   bottom margin - without this they sit directly against the last line. */
.genres--song { margin-top: 18px; }
.genres li {
  padding: 7px 15px; border: 1px solid var(--line-3); border-radius: 100px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #b8ada4;
}

/* --------------------------------------------------------- follow / socials */
.follow { background: var(--panel); border-bottom: 1px solid var(--line); }
.follow__in {
  max-width: var(--wrap); margin: 0 auto; padding: 34px var(--pad);
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
}
.fcard {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; background: var(--ink);
  border: 1px solid var(--line-2); border-radius: 4px;
  transition: border-color .25s ease, background .25s ease;
}
.fcard:hover { border-color: #4a423c; background: var(--raised); }
.fcard__icon { flex-shrink: 0; color: var(--cool); }
.fcard__icon svg { width: 26px; height: 26px; }
.fcard__body { flex-grow: 1; min-width: 0; }
.fcard__name { font-size: 16px; color: var(--text); }
.fcard__meta { margin-top: 3px; font-size: 13px; color: #8d847c; }
.fcard__go { flex-shrink: 0; color: #4a423c; }
.fcard__go svg { width: 16px; height: 16px; }

/* the lead channel — bigger number, filled mark, a button */
.fcard--lead .fcard__icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 4px; background: var(--warm); color: var(--ink);
}
.fcard--lead .fcard__icon svg { width: 28px; height: 28px; }
.fcard__count { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.fcard__count b {
  font-family: var(--display); font-weight: 400; font-size: 42px; line-height: 1;
  letter-spacing: .02em; color: var(--bright);
}
.fcard__count span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #b8ada4; }
.fcard__cta {
  flex-shrink: 0; padding: 11px 20px; border-radius: 3px;
  background: var(--warm); color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.fcard--lead:hover .fcard__cta { background: var(--warm-b); }

/* ---------------------------------------------------------------- sections */
.sec { max-width: var(--wrap); margin: 0 auto; padding: 84px var(--pad) 0; }
.sec--last { padding-bottom: 90px; }

.sec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 34px;
}
.sec__h {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--display); font-size: clamp(34px, 4.4vw, 46px);
  letter-spacing: .06em; color: var(--text);
}
.sec__n { font-size: 20px; letter-spacing: .1em; color: var(--warm); }
.sec__n--cool { color: var(--cool); }
.sec__more { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.sec__note { font-size: 13px; color: var(--dim); white-space: nowrap; }

/* ------------------------------------------------------------------ videos */
/* The card art already carries the wordmark, the song title and a Watch on
   YouTube mark, so nothing is ever drawn on top of it. The whole image is the
   link; captions sit underneath where they cover nothing. */
.vid { display: block; }
.vid__label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.badge--new {
  padding: 6px 13px; border-radius: 2px; background: var(--warm); color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.vid__out { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.vid__art {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 3px; background: var(--panel);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.vid:hover .vid__art { transform: scale(1.012); box-shadow: 0 14px 44px rgba(0,0,0,.5); }

.vid__cap {
  margin-top: 16px; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.vid__desc { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 54rem; text-wrap: pretty; }
.vid__desc + .vid__desc { margin-top: .85em; }
.vid__side { text-align: right; flex-shrink: 0; }
.vid__from { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.vid__song { margin-top: 5px; font-size: 13px; color: var(--text-2); }

.vidgrid { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.vidgrid .vid__desc { font-size: 15px; }
.vidgrid .vid__cap { margin-top: 13px; gap: 20px; }

/* Earlier videos past the first batch. The button reveals them; without
   JavaScript a <noscript> rule on the page shows them and hides the button. */
.vidcard--more { display: none; }
.morewrap { margin-top: 44px; display: flex; justify-content: center; }
.more { min-width: 200px; justify-content: center; }

/* ------------------------------------------------------------- song cards */
.songgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.songgrid--small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.songcard__art { position: relative; display: block; border-radius: 2px; overflow: hidden; }
.songcard__art img,
.songcard__art .cover__ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  transition: transform .35s ease, filter .35s ease;
}
.songcard__art:hover img { transform: translateY(-4px) scale(1.02); filter: brightness(1.08); }
.songcard__title { margin-top: 14px; font-size: 17px; }
.songcard__title a { color: var(--text); }
.songcard__title a:hover { color: var(--warm); }
.songcard__meta { margin-top: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  background: var(--panel); border: 1px solid var(--line-3);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.badge--ac { border-color: var(--cool); color: var(--cool); }

/* --------------------------------------------------------------- listen band */
.band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 84px; }
.band__in {
  max-width: var(--wrap); margin: 0 auto; padding: 24px var(--pad);
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.band__h { font-family: var(--display); font-size: 22px; letter-spacing: .2em; color: var(--dim); }

.streams { display: flex; flex-wrap: wrap; gap: 12px; }
.stream {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 22px; background: var(--ink);
  border: 1px solid var(--line-2); border-radius: 3px;
  font-size: 13px; letter-spacing: .06em; color: var(--text);
  transition: border-color .2s ease;
}
.stream:hover { border-color: var(--warm); color: var(--text); }
.stream svg { width: 15px; height: 15px; color: var(--warm); flex-shrink: 0; }
.streams--block .stream { padding: 13px 26px; font-size: 14px; }

/* ------------------------------------------------------------- discography */
.albgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.albgrid a { display: block; border-radius: 2px; overflow: hidden; }
.albgrid img,
.albgrid .cover__ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  transition: transform .35s ease, filter .35s ease;
}
.albgrid a:hover img { transform: translateY(-5px) scale(1.02); filter: brightness(1.08); }
/* Albums past the first batch. Two classes deep on purpose: `.albgrid a` sets
   display:block, so a single class would lose to it and the cover would stay
   visible. */
.albgrid a.albcard--more { display: none; }
.albgrid__all {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  border: 1px dashed #34302c; border-radius: 2px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); text-align: center; line-height: 1.5;
}
.albgrid__all:hover { border-color: var(--warm); color: var(--warm); }

/* the albums page proper: fewer, larger, with titles */
.albums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.albcard__art { position: relative; display: block; border-radius: 2px; overflow: hidden; }

/* Shown on hover over the cover, not printed under it. Without this rule the
   span renders as ordinary text and sits below every album, permanently. */
.albcard__hover {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(14, 13, 12, .58);
  opacity: 0; transition: opacity .25s ease;
}
.albcard__hover span {
  padding: 9px 18px; border: 1px solid var(--bright); border-radius: 100px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bright);
}
.albcard__art:hover .albcard__hover,
.albcard__art:focus-visible .albcard__hover { opacity: 1; }
.albcard__art img,
.albcard__art .cover__ph { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .35s ease; }
.albcard__art:hover img { transform: scale(1.03); }
.albcard__kicker { margin-top: 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
/* Bebas is a condensed display face and would otherwise inherit the body's
   1.6 line-height, which leaves a gap the height of a line between wrapped
   lines of a title. */
.albcard__title {
  margin-top: 6px; font-family: var(--display); font-size: 28px;
  letter-spacing: .04em; line-height: 1.04; text-wrap: balance;
}
.albcard__title a { color: var(--text); }
.albcard__title a:hover { color: var(--warm); }

/* --------------------------------------------------------- page header band */
.phead { background: var(--panel); border-bottom: 1px solid var(--line); }
.phead__in {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(44px, 6vw, 62px) var(--pad) clamp(34px, 4vw, 48px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.phead__h {
  margin-top: 16px; font-family: var(--display);
  font-size: clamp(56px, 9vw, 96px); line-height: .9; letter-spacing: .04em; color: var(--bright);
}
.phead__sub { margin-top: 14px; font-size: 17px; color: var(--muted); max-width: 46ch; text-wrap: pretty; }

.subcard {
  display: flex; align-items: center; gap: 13px; flex-shrink: 0;
  padding: 14px 24px; background: var(--ink);
  border: 1px solid var(--line-2); border-radius: 3px;
}
.subcard:hover { border-color: var(--warm); }
.subcard svg { width: 20px; height: 20px; color: var(--warm); flex-shrink: 0; }
.subcard__t { font-size: 14px; color: var(--text); }
.subcard__s { margin-top: 2px; font-size: 12px; color: var(--dim); }

.crumbs {
  max-width: var(--wrap); margin: 0 auto; padding: 22px var(--pad) 0;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--warm); }

/* --------------------------------------------------------- release / song */
.release {
  max-width: var(--wrap); margin: 0 auto; padding: 44px var(--pad) 0;
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.release__art { border-radius: 3px; overflow: hidden; }
.release__art img, .release__art .cover__ph { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.release__h { font-family: var(--display); font-size: clamp(44px, 6vw, 76px); line-height: .95; letter-spacing: .03em; color: var(--bright); margin: 14px 0 0; }
.release__desc {
  margin-top: 20px; font-size: 18px; line-height: 1.62; color: var(--text-2);
  /* 54ch measures about 74 characters in Barlow, the top of the comfortable
     range - so when this block looks lost in a wide column the answer is
     bigger type, not longer lines. */
  max-width: 54ch; text-wrap: pretty;
}
/* A description is split into one of these per paragraph, so the gap between
   two of them is a paragraph break - smaller than the 20px that separates the
   first from the heading above it. */
.release__desc + .release__desc { margin-top: .85em; }
.release__count { margin-top: 16px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.release__variant { margin-top: 14px; }
.release__video { margin-top: 26px; }
.release__alt {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 48ch;
}
.release__alt a { white-space: nowrap; }
.release .streams { margin-top: 26px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 3px;
  /* For the <button> versions. A link has no background or font of its own,
     but a button carries the browser's grey face and system font, and the
     ghost style never overrode either - "Load more" rendered as light text
     on a light-grey box. */
  background: none; font-family: inherit; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.btn--ghost { border: 1px solid var(--line-3); color: var(--text-2); }
.btn--ghost:hover { border-color: var(--warm); color: var(--warm); }
.btn--solid { background: var(--warm); color: var(--ink); }
.btn--solid:hover { background: var(--warm-b); color: var(--ink); }

/* ------------------------------------------------------------ track list */
.tracks { counter-reset: t; }
.track {
  display: grid; grid-template-columns: 44px 64px minmax(0, 1fr) 70px auto;
  align-items: center; gap: 18px;
  padding: 12px 10px; border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.track:hover { background: var(--panel); }
.track__no { font-size: 13px; color: var(--muted); }
.track__art { display: block; border-radius: 2px; overflow: hidden; }
.track__art img, .track__art .cover__ph { width: 64px; height: 64px; object-fit: cover; display: block; }
.track__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.track__title { font-size: 17px; color: var(--text); }
.track__title:hover { color: var(--warm); }
.track__dur { font-size: 13px; color: var(--muted); text-align: right; }
.track__streams { display: flex; gap: 12px; }
.iconlink { color: var(--muted); }
.iconlink:hover { color: var(--warm); }
.iconlink svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- previews --
   A 30-second cut of the song, on the song page as a player and on the album
   page as one button per row.

   Both share the icon swap: each button holds a play triangle and a pause bar
   and .is-playing decides which is shown, so nothing has to be drawn or
   injected when the state changes. */
.prev__icon--pause { display: none; }
.is-playing .prev__icon--play { display: none; }
.is-playing .prev__icon--pause { display: inline; }

/* The album row's extra column. Added to the whole list or none of it - see
   album.php - so the grid stays in step across rows. */
.tracks--play .track { grid-template-columns: 44px 64px minmax(0, 1fr) 34px 70px auto; }

.track__play {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: none;
  border: 1px solid var(--dim); border-radius: 50%;
  cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.track:hover .track__play { color: var(--text-2); }
.track__play:hover, .track__play.is-playing { color: var(--warm); border-color: var(--warm); }

/* The song page player. */
.prev {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 0; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 3px;
}
.prev__btn {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); background: none;
  border: 1px solid var(--line-2); border-radius: 50%;
  cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.prev__btn:hover, .prev__btn.is-playing { color: var(--warm); border-color: var(--warm); }
.prev__body { flex: 1 1 auto; min-width: 0; }
.prev__label {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.prev__time { float: right; letter-spacing: 0; text-transform: none; }
.prev__bar { height: 3px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.prev__fill { display: block; width: 0; height: 100%; background: var(--warm); }

/* Shown when the 30 seconds run out. */
.prevcta {
  margin-top: 16px; padding: 18px 16px;
  background: var(--panel); border: 1px solid var(--warm); border-radius: 3px;
}
.prevcta__h { margin: 0 0 14px; font-size: 15px; color: var(--text); }
.prevcta__row { display: flex; flex-wrap: wrap; gap: 10px; }
.prevcta__row .btn { display: inline-flex; align-items: center; gap: 8px; }
.prevcta__row .btn svg { width: 16px; height: 16px; }
.prevcta__again {
  margin-top: 14px; padding: 0;
  font: inherit; font-size: 13px; color: var(--dim);
  background: none; border: 0; border-bottom: 1px solid var(--line-2);
  cursor: pointer;
}
.prevcta__again:hover { color: var(--warm); border-bottom-color: var(--warm); }

/* -------------------------------------------------------------------- about */
/* The about page answers questions in sentences, because that is what a search
   engine or an assistant can quote. Set as a reading column, not a grid. */
.faq { margin-top: 40px; max-width: 62ch; }
.faq__item { padding: 26px 0; border-top: 1px solid var(--line); }
.faq__item:first-child { border-top: 0; padding-top: 0; }
.faq__q {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: .02em; color: var(--text); margin-bottom: 10px;
}
.faq__a { font-size: 16px; line-height: 1.68; color: var(--text-2); text-wrap: pretty; }

.about__streams { margin-top: 44px; }
.about__contact { margin-top: 34px; }

/* ----------------------------------------------------------------- lyrics */
/* .sec.lyrics-sec, not .lyrics-sec: the 960px media query further down sets
   .sec { padding-top: 62px }, which has the same specificity and comes later,
   so a single class here would be overridden on tablets and phones only. */
.sec.lyrics-sec {
  background: var(--panel); border-top: 1px solid var(--line); margin-top: 48px;
  /* .sec ends in padding-bottom: 0, which is fine for a section on the page
     ground but not for a tinted one - the panel edge landed hard against the
     last line of the lyric. The old rule here was .lyrics-sec .sec, a
     descendant selector for two classes that sit on the SAME element, so it
     never matched anything. */
  padding-top: 40px; padding-bottom: 82px;
}
.lyrics {
  font-size: 17px; line-height: 1.5; color: var(--text-2);
  white-space: pre-line; max-width: 46ch;
}
.empty { font-size: 15px; color: var(--dim); }

/* ---------------------------------------------------------------- contact */
.contact__form { max-width: 640px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 3px;
  color: var(--text); font-family: inherit; font-size: 16px; font-weight: 300;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--warm); }
.field textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.hp { position: absolute; left: -9999px; }

.alert { padding: 15px 18px; border-radius: 3px; margin-bottom: 26px; font-size: 15px; }
.alert--ok  { background: #14201f; border: 1px solid var(--cool); color: #bfe3ea; }
.alert--bad { background: #201513; border: 1px solid var(--warm); color: #f0cdbc; }

/* ----------------------------------------------------------------- footer */
.ftr { background: var(--panel); border-top: 1px solid var(--line); margin-top: 84px; }
.ftr__in {
  max-width: var(--wrap); margin: 0 auto; padding: 46px var(--pad);
  display: flex; justify-content: space-between; gap: 46px; flex-wrap: wrap;
}
/* Same lockup as the header, one size up: a logo should be one thing. */
.ftr__brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.ftr__brand .brand__name { font-size: 17px; }
.ftr__brand .brand__eq { height: 16px; }
.ftr__copy { margin-top: 8px; font-size: 12px; color: var(--dim); }
.ftr__social { margin-top: 20px; display: flex; gap: 9px; }
.ftr__social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 3px;
  color: var(--text-2);
}
.ftr__social a:hover { border-color: var(--warm); color: var(--warm); }
.ftr__social svg { width: 16px; height: 16px; }
.ftr__social .is-lead { color: var(--warm); }

.ftr__cols { display: flex; gap: clamp(30px, 5vw, 70px); flex-wrap: wrap; }
.ftr__col { display: flex; flex-direction: column; gap: 9px; }
.ftr__t { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.ftr__col a { font-size: 13px; color: var(--text-2); }
.ftr__col a:hover { color: var(--warm); }
.ftr__col a.is-lead { color: var(--warm); }

/* ------------------------------------------------------------ placeholders */
/* Artwork that does not exist yet. The inline style carries a hue derived
   from the slug, so a missing cover still looks deliberate and two of them
   side by side do not look like the same broken image twice. */
.cover__ph {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--line-2);
  background-color: var(--panel);
}
.cover__ph-disc {
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(14,13,12,.85) 0 12%, rgba(255,255,255,.22) 12% 46%, rgba(14,13,12,.35) 46% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* The play mark over artwork, on hover. Ported from the French site without
   its rules, so the little triangle was rendering inline underneath the
   picture, in the link colour - a stray orange arrow. */
.track__hover,
.songcard__hover,
.nowcard__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(14, 13, 12, .5);
  color: var(--bright);
  opacity: 0; transition: opacity .25s ease;
}
.track__art, .songcard__art { position: relative; }
.track__art:hover .track__hover,
.songcard__art:hover .songcard__hover { opacity: 1; }

/* Contact form validation, per field. */
.field__err { margin-top: 7px; font-size: 13px; color: var(--warm-b); }

/* The 404 page: a taller band, and its two buttons in a row. */
.phead--tall .phead__in { padding-block: clamp(64px, 9vw, 120px); }
.phead__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .albgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .albums  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .songgrid--small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .nav, .hdr__social { display: none; }
  .burger { display: grid; place-items: center; }
  .menu.is-open {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px var(--pad) 22px; background: var(--panel); border-bottom: 1px solid var(--line);
  }
  .menu__link {
    padding: 13px 0; border-bottom: 1px solid var(--line);
    font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2);
  }
  .menu__link.is-active { color: var(--warm); }

  /* Tablets still get the wide banner, just a shorter one. */
  .hero { min-height: 520px; }

  .follow__in { grid-template-columns: 1fr; }
  .release { grid-template-columns: 1fr; }
  .release__art { max-width: 380px; }
  .vidgrid { grid-template-columns: 1fr; }
  .songgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .albgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .albums  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding-top: 62px; }
  .band { margin-top: 62px; }
  .ftr { margin-top: 62px; }
}

@media (max-width: 620px) {
  .track { grid-template-columns: 30px 52px minmax(0, 1fr); row-gap: 6px; }
  .track__art img, .track__art .cover__ph { width: 52px; height: 52px; }
  .track__dur, .track__streams { grid-column: 3; justify-self: start; }

  /* The row drops to three columns on a phone, so the play button cannot keep
     a column of its own. Left in the grid it became a fourth stacked line
     under the title and added 46px to every row - 550px down a twelve-track
     album, on the pages most of the audience reads on a phone.

     So it comes out of the flow and sits against the right edge instead, which
     is where a play control belongs on a phone anyway. The row reserves the
     width it needs, and the empty placeholder cell on a track with no preview
     is taken out so it cannot claim a line of its own. */
  .tracks--play .track {
    grid-template-columns: 30px 52px minmax(0, 1fr);
    position: relative;
    padding-right: 46px;
  }
  .tracks--play .track > span[aria-hidden]:empty { display: none; }
  .track__play { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
  .songgrid, .songgrid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .albgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .albums { grid-template-columns: 1fr; }
  .vid__cap { flex-direction: column; gap: 10px; }
  .vid__side { text-align: left; }
  .fcard { flex-wrap: wrap; }
  .fcard__cta { width: 100%; text-align: center; }
}

/* ------------------------------------------------- phones: stack the hero */
/* Text over a photograph only works while there is somewhere for it to go.
   On a phone the banner is already cropped hard, and the copy is long enough
   to cover her face whatever the scrim does - so the image and the words stop
   sharing space. Image on top at a fixed height, words beneath it on the flat
   background. Nothing can overlap, however long the bio gets. */
@media (max-width: 700px) {
  .hero { display: block; min-height: 0; }

  .hero__bg { position: relative; height: 420px; }
  .hero__bg img { object-position: 50% 8%; }

  /* Only over the photograph now, fading it into the section below. */
  .hero__scrim {
    background: linear-gradient(0deg,
      var(--ink) 0%, rgba(14,13,12,.35) 42%, rgba(14,13,12,0) 78%);
  }

  .hero__in { padding: 4px var(--pad) 52px; }
  .hero__name { font-size: clamp(56px, 16vw, 84px); }
  .hero__tag { font-size: 17px; }
}

/* ------------------------------------------------------------ preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .hdr { background: #0e0d0c; }
}

@media print {
  body { background: #fff; color: #000; }
  .hdr, .ftr, .band, .follow, .streams, .crumbs, .sec__more { display: none; }
  .lyrics { font-size: 12pt; color: #000; }
}

/* ------------------------------------------------------------------ search */
.searchform { max-width: 640px; margin-bottom: 34px; }
.searchform__label {
  display: block; margin-bottom: 9px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.searchform__row {
  display: flex; align-items: stretch; gap: 8px;
}
.searchform__icon {
  display: grid; place-items: center; width: 46px; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--line-2); border-right: 0;
  border-radius: 3px 0 0 3px; color: var(--dim);
}
.searchform input {
  flex-grow: 1; min-width: 0; padding: 13px 15px 13px 0;
  background: var(--panel); border: 1px solid var(--line-2); border-left: 0;
  border-radius: 0 3px 3px 0;
  color: var(--text); font-family: inherit; font-size: 16px; font-weight: 300;
}
.searchform input:focus { outline: none; }
.searchform__row:focus-within .searchform__icon,
.searchform__row:focus-within input { border-color: var(--warm); }
.searchform__row:focus-within .searchform__icon { color: var(--warm); }
.searchform button {
  flex-shrink: 0; padding: 0 24px;
  background: var(--warm); border: 0; border-radius: 3px; color: var(--ink);
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.searchform button:hover { background: var(--warm-b); }

.searchcount { margin-bottom: 22px; font-size: 14px; color: var(--muted); }

.results { display: flex; flex-direction: column; }
.result {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: 20px; align-items: start;
  padding: 20px 10px; border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.result:first-child { border-top: 1px solid var(--line); }
.result:hover { background: var(--panel); }
.result__art { display: block; border-radius: 2px; overflow: hidden; }
.result__art img, .result__art .cover__ph { width: 84px; height: 84px; object-fit: cover; display: block; }
.result__kind { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.result__title { margin-top: 6px; font-family: var(--display); font-size: 30px; letter-spacing: .03em; line-height: 1; }
.result__title a { color: var(--text); }
.result__title a:hover { color: var(--warm); }
.result__snippet { margin-top: 9px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 68ch; }
.result__from {
  display: inline-block; margin-right: 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}

/* The one place a highlight belongs: it marks why a result matched. */
mark { background: none; color: var(--warm-b); font-weight: 500; }

/* the compact box in the header */
.hdr__search { position: relative; display: flex; align-items: center; }
.hdr__search input {
  width: 150px; padding: 8px 12px 8px 32px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 100px;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 300;
  transition: width .25s ease, border-color .2s ease;
}
.hdr__search input:focus { outline: none; width: 210px; border-color: var(--warm); }
.hdr__search input::placeholder { color: var(--dim); }
.hdr__search svg {
  position: absolute; left: 11px; width: 14px; height: 14px;
  color: var(--dim); pointer-events: none;
}

@media (max-width: 1180px) { .hdr__search { display: none; } }

@media (max-width: 620px) {
  .result { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
  .result__art img, .result__art .cover__ph { width: 58px; height: 58px; }
  .result__title { font-size: 24px; }
  .searchform button { padding: 0 16px; }
}

/* ------------------------------------------------------------- versions */
/* A version is not a title. These sit beside a name, deliberately small, so
   "Reimagined" never competes with the words it qualifies. */
.versions { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.release__h + .versions { display: flex; margin-top: 12px; }
.albcard__kicker + .versions { display: flex; margin-top: 8px; }
.badge--ver { border-color: var(--warm); color: var(--warm); }

/* ------------------------------------------------- header on a small phone
   Appended at the END of the file on purpose. Several base rules in this
   stylesheet sit BELOW the @media blocks that are supposed to override them,
   and with equal specificity the later rule wins - three changes on the
   sister site were silently lost to exactly that. From here nothing can
   outrank these.

   The nav and the follow row collapse into the burger; the Listen buttons
   stay, because most traffic is a phone and a visitor who has to open a menu
   to find where to listen mostly does not. The label is what does not fit -
   at this size the icons are the whole message. */
@media (max-width: 620px) {
  .hdr__in { gap: 12px; }
  .hdr__streams {
    margin-left: auto; gap: 3px;
    padding-left: 0; border-left: 0;
  }
  .hdr__streams__label { display: none; }
  .hdr__stream { width: 36px; height: 36px; }
  .hdr__stream svg { width: 19px; height: 19px; }
}


/* ------------------------------------------------------------- prose --
   A page that is mostly sentences: the privacy page. Narrow measure on
   purpose - long lines of body text are hard to track back to the start,
   and this page is read rather than scanned. */
.prose__in { max-width: 62ch; margin: 0 auto; }
.prose h2 {
  margin: 44px 0 14px; font-family: var(--display, inherit);
  font-size: 22px; letter-spacing: .04em; color: var(--text);
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  margin: 0 0 16px; font-size: 16px; line-height: 1.75;
  color: var(--text-2); text-wrap: pretty;
}
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--warm); border-bottom: 1px solid var(--line-2); }
.prose a:hover { border-bottom-color: var(--warm); }

/* --------------------------------------------------------- video button --
   The "watch the video" link used to be .btn--ghost, identical to the three
   streaming buttons above it, so nothing on it said it played a video rather
   than opening another audio service. It now carries a filled play badge, a
   warm border that separates it from the row above, and says out loud where
   it goes. */
.btn--video {
  border: 1px solid var(--warm);
  color: var(--text);
  background: color-mix(in srgb, var(--warm) 10%, transparent);
  padding-left: 14px;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn--video:hover {
  background: color-mix(in srgb, var(--warm) 20%, transparent);
  border-color: var(--warm-b);
  color: var(--text);
}
.btn__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  color: var(--ink); background: var(--warm); border-radius: 50%;
}
.btn--video:hover .btn__play { background: var(--warm-b); }

/* The destination, said plainly rather than left to the icon. Quieter than
   the label so it reads as a note on the button, not a second instruction. */
.btn__out {
  font-size: 11px; letter-spacing: .08em;
  color: var(--muted); text-transform: none;
}
.btn--video:hover .btn__out { color: var(--text-2); }

/* ----------------------------------------------------- album video card --
   The whole record in one video, words on screen. It sits with the album's
   other calls to action, but it is not one of them: the streaming buttons
   send a listener away to a service, this one offers something that exists
   nowhere else, so it is a card rather than a fourth button in the row. */
.albumvid {
  margin-top: 26px; padding: 20px 22px;
  background: color-mix(in srgb, var(--warm) 7%, var(--panel));
  border: 1px solid var(--warm); border-radius: 3px;
  max-width: 46rem;
}
.albumvid__eyebrow {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--warm);
}
.albumvid__h { margin: 0 0 8px; font-size: 19px; line-height: 1.3; color: var(--text); }
.albumvid__t {
  margin: 0 0 16px; font-size: 15px; line-height: 1.65;
  color: var(--text-2); text-wrap: pretty;
}

/* ---------------------------------------- track rows: legible and tappable --
   Track number, duration and the store icons were --dim, 3.46:1 against the
   black - under the 4.5:1 that small text needs - and the play button's
   outline was --line-2 at 1.33:1, close to invisible. Those now sit on
   --muted (6.22:1) and --dim (3.46:1, which does pass for a control).

   The store icons were also 16px with no padding, so the thing a thumb had to
   hit was 16px square against the 44px a touch target wants. On a phone each
   now gets a full 44px box, with the icon drawn larger inside it.

   Appended at the end of the file on purpose: the phone rules earlier in this
   stylesheet come before some of the base rules they need to beat. */
@media (max-width: 620px) {
  .track__streams { gap: 0; margin-left: -12px; }
  .track__streams .iconlink {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
  }
  .track__streams .iconlink svg { width: 20px; height: 20px; }

  /* No hover on a phone, so the button is drawn at its "on" brightness. */
  .track__play { width: 44px; height: 44px; color: var(--text-2); border-color: var(--muted); }
  .tracks--play .track { padding-right: 58px; }
}

/* ------------------------------------------------- small labels: legible --
   The site is set in Barlow Light (body { font-weight: 300 }), and every
   small label inherits it. At 11-12px, in capitals, with .14-.2em of letter
   spacing, a Light stroke is thinner than a screen pixel - so it is drawn as
   a blend into the black and comes out far dimmer than its colour. Measured
   off a phone screenshot, "Opens on YouTube" peaked at rgb(91,81,69): darker
   than even the colour it was assigned, which is why raising that colour on
   its own changed almost nothing you could see.

   So these get a solid weight, which thickens the strokes enough to reach
   full colour, and the brighter secondary tone on top. Contrast ratios
   measure the colour, not the stroke; this is the part they cannot see.

   Appended at the end so it outranks the individual rules above. */
.vid__out, .vid__from,
.songcard__meta, .sec__note, .albcard__kicker, .release__count,
.subcard__s, .empty,
.ftr__t, .ftr__copy,
.result__kind, .result__from,
.prev__label, .prev__time,
.track__no, .track__dur {
  font-weight: 500;
  color: var(--muted);
}

/* The rest of the small Light-weight text, found by searching every page for
   the cause itself - 14px or under, weight 300, not near-white - rather than
   by fixing screenshots one at a time. A contrast checker passes all of
   these, because it reads the colour, not the stroke.

   The orange accent text (eyebrows, "All videos", badges) is left Light: a
   bright saturated colour holds up at that weight where a grey does not. */
.fcard__meta, .fcard__count span,
.genres li,
.crumbs a, .crumbs span,
.field label, .searchform__label, .searchcount {
  font-weight: 500;
}

/* Two of them were also dimmer than the secondary grey. */
.fcard__meta, .crumbs span { color: var(--muted); }

/* The "go" arrows on the Instagram and YouTube cards were rgb(74,66,60):
   about 2:1 on black, under the 3:1 that even an icon needs. Neither text
   check could see them, being an icon and not text. */
.fcard__go { color: var(--muted); }