/* ============================================================
   HERE MUSIC DIRECTOR
   The record owns the stage. Product UI supports it.
   Derived from the HERE brand thesis and same-category interaction
   research. No third-party assets, code, copy, or visual identity.
   ============================================================ */

:root {
  --music-stage: #0a0807;
  --music-paper: #f4efe6;
  --music-ruby: #e5383b;
  --music-ruby-deep: #9d121a;
  --music-rule: rgba(244, 239, 230, 0.2);
  --music-quiet: rgba(244, 239, 230, 0.66);
  /* a wash for hover/hairline surfaces, so the four places that used to
     hardcode a cream tint flip with the theme like everything else */
  --music-wash: rgba(244, 239, 230, 0.055);
  --music-wash-soft: rgba(244, 239, 230, 0.035);
  --music-edge: rgba(244, 239, 230, 0.16);
  --music-hair: rgba(244, 239, 230, 0.08);
  --music-measure: 86rem;
}

/* ============================================================
   DAYLIGHT.

   This stylesheet paints `.music-room { background: var(--music-stage);
   color: var(--music-paper) }` onto <body>, and it defined those tokens
   once, dark, with no daylight values. The rest of the house DOES flip:
   css/style.css redefines --ink and --cream under html[data-theme="light"],
   and album.html even repaints its own body gradient in bone.

   The result was a page torn in half. The background went bone, --cream
   went to ink (#1a140d) so the track rows read correctly — but body colour
   stayed pinned to --music-paper, which is cream. So "I AM HERE", the
   display line the whole screen is built around, rendered cream on bone
   and vanished completely.

   Flipping the tokens fixes every rule in this file at once, instead of
   chasing individual selectors and missing some.

   The ruby moves too. #e5383b is 3.63:1 on the bone ground — fine for the
   display sizes, under the 4.5:1 floor for the labels and links that also
   use it. #a4101a is the same red taken down until it clears, and it is
   the value --ruby-text already carries in css/style.css. Track 05 keeps
   its own brighter red, because it paints itself midnight blue and never
   sees this ground.
   ============================================================ */
html[data-theme="light"] {
  --music-ruby: #a4101a;
  --music-stage: #f2ede4;
  --music-paper: #1a140d;
  --music-rule: rgba(26, 20, 13, 0.22);
  --music-quiet: rgba(26, 20, 13, 0.66);
  --music-wash: rgba(26, 20, 13, 0.055);
  --music-wash-soft: rgba(26, 20, 13, 0.04);
  --music-edge: rgba(26, 20, 13, 0.18);
  --music-hair: rgba(26, 20, 13, 0.12);
}

.music-room {
  background: var(--music-stage);
  color: var(--music-paper);
}

.music-room :focus-visible {
  outline: 2px solid var(--music-ruby);
  outline-offset: 4px;
}

/* ALBUM: release first, discovery second. */
.music-room--album.songpage {
  background:
    radial-gradient(80% 62% at 72% 12%, rgba(229, 56, 59, 0.13), transparent 62%),
    var(--music-stage);
}

.music-room--album .hr {
  display: flex;
  flex-direction: column;
  max-width: var(--music-measure);
  min-height:100vh;min-height: 100svh;
  margin: 0 auto;
  /* NOT 12rem. This is a flex column and the comments block is a sibling
     AFTER </main>, so bottom padding here is not bar clearance — it is a
     hole between the footer and the comments. body.has-appbar clears the
     bar; [data-comments] clears the deck. */
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3.5rem) 3rem;
}

.music-room--album .top { order: 0; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.music-room--album .alb { order: 1; }
.music-room--album #album { order: 2; }
.music-room--album .greet { order: 3; }
.music-room--album .greet__sub { order: 4; }
.music-room--album .chips { order: 5; }
.music-room--album #featWrap { order: 6; }
.music-room--album #plWrap { order: 7; }
.music-room--album .hr__foot { order: 8; }

.music-room--album .top__ava {
  width: 2.45rem;
  height: 2.45rem;
  object-fit: contain;
}

.music-room--album .top__circle {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--music-rule);
}

.music-room--album .alb {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);min-height: 0;
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--music-rule);
}

.music-room--album .alb__art {
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  border-radius: 2px;
  box-shadow: 0 40px 100px -42px #000;
  max-height: 68vh;max-height:68svh;
  object-fit: cover;
}

.music-room--album .alb__k {
  color: var(--music-ruby);
  letter-spacing: 0.34em;
}

.music-room--album .alb h1 {
  max-width: 7ch;
  margin: 0.35rem 0 1rem;
  font-size: clamp(4.4rem, 24vw, 8rem);
  /* 0.77 set two lines of Anton caps on top of each other. max-width is 7ch,
     so every album whose name does not fit one line wrapped and collided —
     EQUITY UPRISE did it long before CIA MIND CONTROL did. 0.88 still reads
     as tight monument type on one line and clears the caps on two. */
  line-height: 0.88;
  letter-spacing: -0.035em;
}

.music-room--album .alb__by {
  max-width: 34rem;
  color: var(--music-quiet);
  font-size: clamp(0.92rem, 1.4vw, 1.08rem);
}

.music-room--album .alb__play {
  min-width: 9.5rem;
  justify-content: center;
  border-radius: 0.7rem;
}

.music-room--album #album {
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--music-rule);
}

.music-room--album .tr {
  margin-top: 0;
  counter-reset: record;
}

.music-room--album .tr li {
  min-height: 4.6rem;
  margin: 0;
  padding: 0.85rem 0.25rem;
  border-radius: 0;
  border-top: 1px solid var(--music-rule);
  background: transparent;
  box-shadow: none;
}

.music-room--album .tr li:last-child { border-bottom: 1px solid var(--music-rule); }
.music-room--album .tr li:hover { background: var(--music-wash-soft); }
.music-room--album .tr li.on::before {
  inset: 0;
  background: linear-gradient(90deg, rgba(229, 56, 59, 0.18), transparent 72%);
}
.music-room--album .tr li.on { box-shadow: inset 3px 0 0 var(--music-ruby); }

/* THE PLAYING ROW, IN DAYLIGHT.

   album.html paints the active row's label #fff, and on the dark coat that
   is right: white over an 18% ruby wash on a near-black page. But the wash
   above is translucent in BOTH coats — it is a tint on the page, not a solid
   chip — so on bone the same white landed at 1.17:1 and the track you are
   actually listening to became the one row you could not read.

   This only ever appears once something is playing, which is why it survived
   a contrast audit of the whole site: the audit never pressed play. */
html[data-theme="light"] .music-room--album .tr li.on .t,
html[data-theme="light"] .music-room--album .tr li.on .n { color: var(--music-paper); }
html[data-theme="light"] .music-room--album .tr li.on .t small,
html[data-theme="light"] .music-room--album .tr li.on .d { color: var(--music-quiet); }
/* the little equaliser dancing on the playing row is white bars for the same
   reason, and goes the same way */
html[data-theme="light"] .music-room--album .tr .eq i { background: var(--music-ruby); }
.music-room--album .tr .th { width: 3.2rem; height: 3.2rem; border-radius: 2px; }
.music-room--album .tr .hrt { border-radius: 2px; background: transparent; box-shadow: none; }

.music-room--album .greet {
  margin-top: clamp(4rem, 8vw, 8rem);
  font-family: var(--sig);
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.82;
}
.music-room--album .greet__sub { max-width: 40rem; margin: 0.8rem 0 1.8rem; }
.music-room--album .chips { align-self: flex-start; }
.music-room--album .chips button,
.music-room--album .mode button { border-radius: 2px; }

.music-room--album .feat {
  gap: 1px;
  background: var(--music-rule);
  border: 1px solid var(--music-rule);
}
.music-room--album .feat > * { border-radius: 0 !important; }

.music-room--album .lib { margin-top: clamp(3rem, 6vw, 6rem); }
.music-room--album .hr__foot { padding-top: 5rem; }

/* TRACK ROOMS: one transport grammar, six authored stages. */
.music-room--track.songpage {
  background:
    radial-gradient(70% 90% at 80% 20%, rgba(229, 56, 59, 0.1), transparent 68%),
    var(--music-stage);
}

.music-room--track .tk {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-areas:
    "k"
      "title"
      "line"
      "film"
      "player"
      "actions"
      "story"
      "meta";
  align-items: start;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1rem;
  max-width: var(--music-measure);
  min-height:100vh;min-height: 100svh;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4.5rem) clamp(1rem, 4vw, 3.5rem) 11rem;
}

.music-room--track .tk__k { grid-area: k; align-self: end; margin: 0; }
.music-room--track .tk h1 {
  grid-area: title;
  align-self: end;
  margin: 0.2rem 0 0;
  font-size: clamp(3.8rem, 18vw, 6.4rem);
  line-height: 0.78;
  letter-spacing: -0.025em;
}
.music-room--track .tk__line {
  grid-area: line;
  align-self: start;
  margin: 0.5rem 0 0;
  color: var(--music-quiet);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}
.music-room--track .tk__film {
  grid-area: film;
  align-self: stretch;min-height: 48vh;min-height:48svh;
  margin: 0;
  border-radius: 2px;
  box-shadow: 0 42px 110px -46px #000;
}
.music-room--track .tk__film::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--music-edge);
}
.music-room--track .tk__player {
  grid-area: player;
  border-radius: 2px;
  background: var(--music-wash);
  box-shadow: inset 0 0 0 1px var(--music-rule);
}
.music-room--track .tk__play { border-radius: 2px; }
.music-room--track .tk__bar,
.music-room--track .tk__bar i { border-radius: 0; }
.music-room--track .tk__row { grid-area: actions; align-self: stretch; margin: 0; }
.music-room--track .tk__row a,
.music-room--track .tk__row button { flex: 1; text-align: center; border-radius: 2px; }
.music-room--track .tk__story {
  grid-area: story;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  margin-top: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--music-rule);
  border-bottom: 1px solid var(--music-rule);
}
.music-room--track .tk__story article {
  min-height: 0;
  padding: 1.35rem 1.25rem 1.7rem;
  border-right: 0;
  border-bottom: 1px solid var(--music-rule);
}
.music-room--track .tk__story article:last-child { border-right: 0; border-bottom: 0; }
.music-room--track .tk__story span {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--music-ruby);
  font-weight: 800;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.music-room--track .tk__story b {
  display: block;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.2;
}
.music-room--track .tk__meta {
  grid-area: meta;
  max-width: 72rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  color: var(--music-quiet);
  border-top: 1px solid var(--music-hair);
}

/* Track 02 owns the runway as a wide cinematic field. */
.music-room--runway .tk {
  grid-template-columns: minmax(0,1fr);
  grid-template-areas:
    "k"
      "title"
      "line"
      "film"
      "player"
      "actions"
      "story"
      "meta";
  align-items: start;
}
.music-room--runway .tk h1 { max-width: none; font-size: clamp(5rem, 12vw, 12rem); }
.music-room--runway .tk__film {min-height: 48vh;min-height:48svh; }
.music-room--runway .tk__line { margin-bottom: 1rem; }

/* Track 03 reads like a session sheet. */
.music-room--write { --story-columns: 4; }
.music-room--write .tk__story article { min-height: 11rem; }
.music-room--write .tk__story b { font-family: var(--body); font-weight: 800; }

/* Track 04 is the manifesto in the middle of the record. */
.music-room--here .tk {
  grid-template-columns: minmax(0,1fr);
  grid-template-areas: "k"
      "title"
      "line"
      "film"
      "player"
      "actions"
      "story"
      "meta";
  align-items: start;
}
.music-room--here .tk h1 {
  font-size: clamp(8rem, 42vw, 15rem);
  color: var(--music-paper);
}
.music-room--here .tk__story {
  grid-template-columns: minmax(0,1fr);
  border: 0;
}
.music-room--here .tk__story article {
  min-height: 0;
  padding: clamp(2rem, 6vw, 5rem) 0;
  border: 0;
}
.music-room--here .tk__story b {
  max-width: 14ch;
  font-family: var(--sig);
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.82;
  text-transform: uppercase;
}

/* Track 05 turns the red house into a midnight blue exception.

   That blue is painted here, unconditionally — it is the track's identity,
   not a coat, so it stays blue in daylight. Which means the daylight tokens
   must not reach inside it: with the ground fixed at #030d19 and --music-paper
   flipped to ink, the whole page rendered near-black on midnight blue at
   1.07:1 and Antisocial simply disappeared in light mode. Everything that
   carries text in here is pinned back to the dark coat's values, because the
   surface underneath it never changes. */
.music-room--antisocial.songpage {
  --music-ruby: #ef3b42;
  --music-paper: #f4efe6;
  --music-quiet: rgba(244, 239, 230, 0.66);
  --music-rule: rgba(244, 239, 230, 0.2);
  --music-edge: rgba(244, 239, 230, 0.16);
  --music-hair: rgba(244, 239, 230, 0.08);
  --music-wash: rgba(244, 239, 230, 0.055);
  --music-wash-soft: rgba(244, 239, 230, 0.035);
  --cream: #f4efe6;
  --cream-dim: rgba(244, 239, 230, 0.88);
  /* the daylight reds are taken down to clear a bone ground; against midnight
     blue they go the wrong way, so the house's dark-coat reds hold here */
  --ruby-hot: #e5383b;
  --ruby-text: #e5383b;
  background:
    linear-gradient(180deg, rgba(3, 13, 25, 0.12), rgba(3, 13, 25, 0.88)),
    #030d19;
}
.music-room--antisocial .tk {
  grid-template-columns: minmax(0,1fr);
  grid-template-areas: "k"
      "title"
      "line"
      "film"
      "player"
      "actions"
      "story"
      "meta";
  align-items: start;
}
.music-room--antisocial .tk__film {min-height: 48vh;min-height:48svh; }
.music-room--antisocial .tk__story { border-color: rgba(142, 185, 219, 0.25); }

/* Track 06 closes in the edit bay. */
.music-room--lightroom { --story-columns: 4; }
.music-room--lightroom .tk__story article { min-height: 8rem; }
.music-room--lightroom .tk__story b {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* FILMS: the first film remains visible while the visitor arms sound. */
.music-room--music-videos .fa {
  inset: auto clamp(1rem, 4vw, 3rem)
    calc(var(--appbar-h, 4.6rem) + 2.1rem + env(safe-area-inset-bottom));
  display: block;
  max-width: 31rem;
  padding: 1rem 1.15rem;
  background: rgba(5, 4, 3, 0.84);
  border-left: 3px solid var(--music-ruby);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.music-room--music-videos .fa div { text-align: left; }
.music-room--music-videos .fa b { font-size: clamp(1.8rem, 5vw, 3.8rem); }
.music-room--music-videos .fa small { display: block; margin-top: 0.25rem; color: var(--music-paper); }
.music-room--music-videos .fc video { opacity: 0.98; }
.music-room--music-videos .fc__scrim {
  background: linear-gradient(180deg, rgba(5,4,3,0.46), transparent 36%, rgba(5,4,3,0.92));
}
.music-room--music-videos .fc__meta b {
  max-width: 12ch;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.82;
}
.music-room--music-videos .fc__meta small { display: block; margin-top: 0.65rem; }
.music-room--music-videos .fc__rail button,
.music-room--music-videos .fc__rail a { border-radius: 2px; }

/* CATALOGUE: cover and registration data are one ledger. */
.music-room--catalogue .cg {
  max-width: var(--music-measure);
  padding-top: clamp(3rem, 8vw, 7rem);
}
.music-room--catalogue .cg h1 {
  max-width: 8ch;
  font-size: clamp(5rem, 12vw, 12rem);
  line-height: 0.78;
}
.music-room--catalogue .cg__sub { max-width: 52rem; font-size: clamp(1rem, 1.8vw, 1.25rem); }
.music-room--catalogue .shelf {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  background: var(--music-rule);
  border: 1px solid var(--music-rule);
}
.music-room--catalogue .shelf a {
  min-width: 0;
  padding: 0 0 1rem;
  background: var(--music-stage);
}
.music-room--catalogue .shelf .cov {
  border-radius: 0;
  box-shadow: none;
}
.music-room--catalogue .shelf b,
.music-room--catalogue .shelf small { padding-inline: 0.85rem; }
.music-room--catalogue .reg li {
  min-height: 4.8rem;
  border-radius: 0;
  border-top: 1px solid var(--music-rule);
  background: transparent;
}
.music-room--catalogue .reg li:last-child { border-bottom: 1px solid var(--music-rule); }

/* LICENSING: a numbered desk, not a generic dark form. */
.music-room--license .lc {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-areas:
    "k"
      "title"
      "sub"
      "promise"
      "form"
      "done";
  align-items: start;
  column-gap: clamp(2.5rem, 7vw, 7rem);
  max-width: 78rem;
  padding-top: clamp(3rem, 8vw, 7rem);
}
.music-room--license .lc__k { grid-area: k; margin: 0; }
.music-room--license .lc h1 {
  grid-area: title;
  margin-top: 0.6rem;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 0.78;
}
.music-room--license .lc__sub { grid-area: sub; font-size: 1rem; }
.music-room--license .lc__briefbar {
  grid-area: promise;
  margin-top: 2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--music-rule);
  border-bottom: 1px solid var(--music-rule);
}
.music-room--license .lc__briefbar span {
  color: var(--music-ruby);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.music-room--license .lc__briefbar b { display: block; margin-top: 0.65rem; font-size: 1.3rem; }
.music-room--license .lc__briefbar p { margin: 0.45rem 0 0; color: var(--music-quiet); line-height: 1.6; }
.music-room--license .lc form {
  grid-area: form;
  counter-reset: brief;
  margin: 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--music-rule);
  margin-top: 2.5rem;
}
.music-room--license .lc label {
  counter-increment: brief;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.music-room--license .lc form > label::before {
  content: counter(brief, decimal-leading-zero);
  color: var(--music-ruby);
  font-variant-numeric: tabular-nums;
}
.music-room--license .lc input,
.music-room--license .lc select,
.music-room--license .lc textarea {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--music-rule);
  padding-inline: 0;
}
.music-room--license .lc input:focus,
.music-room--license .lc select:focus,
.music-room--license .lc textarea:focus {
  border-bottom-color: var(--music-ruby);
  outline: none;
}
.music-room--license .lc__go { border-radius: 2px; }
.music-room--license .lc__done { grid-area: done; }

/* RESPONSIVE */
@media (min-width: 52.001rem) {
  .music-room--album .alb { grid-template-columns: minmax(18rem, 0.88fr) minmax(23rem, 1.12fr); min-height: min(68rem, 68vh);min-height:min(68rem, 68svh); }
  .music-room--album .alb__art { max-height: none; }
  .music-room--album .alb h1 { font-size: clamp(5rem, 11vw, 10.5rem); }
  .music-room--track .tk { grid-template-columns: minmax(17rem, 0.76fr) minmax(28rem, 1.24fr); grid-template-areas: "k film"
    "title film"
    "line film"
    "actions player"
    "story story"
    "meta meta"; align-items: end; }
  .music-room--track .tk h1 { font-size: clamp(4.2rem, 8vw, 8.8rem); }
  .music-room--track .tk__film { min-height: clamp(25rem, 62vh, 45rem);min-height:clamp(25rem, 62svh, 45rem); }
  .music-room--track .tk__story { grid-template-columns: repeat(var(--story-columns, 3), minmax(0, 1fr)); }
  .music-room--track .tk__story article { min-height: 9rem; border-right: 1px solid var(--music-rule); border-bottom: 0; }
  .music-room--runway .tk { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "k k"
    "title title"
    "line line"
    "film film"
    "player actions"
    "story story"
    "meta meta"; }
  .music-room--runway .tk__film { min-height: min(64rem, 62vh);min-height:min(64rem, 62svh); }
  .music-room--here .tk { grid-template-columns: minmax(0,0.62fr) minmax(0,1.38fr); grid-template-areas: none; align-items: normal; }
  .music-room--here .tk h1 { font-size: clamp(8rem, 18vw, 18rem); }
  .music-room--antisocial .tk { grid-template-columns: minmax(0,0.72fr) minmax(0,1.28fr); grid-template-areas: none; align-items: normal; }
  .music-room--antisocial .tk__film { min-height: min(62rem, 72vh);min-height:min(62rem, 72svh); }
  .music-room--license .lc { grid-template-columns: minmax(16rem, 0.7fr) minmax(30rem, 1.3fr); grid-template-areas: "k form"
    "title form"
    "sub form"
    "promise form"
    ". form"
    "done done"; }
  .music-room--license .lc form { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .music-room *,
  .music-room *::before,
  .music-room *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}
/* the customer door on the licensing desk: a way out for people who
   already have what this page sells, set above the form so they never
   start filling one in */
.lc__already { margin: 1.6rem 0 0; padding: 1.2rem 1.3rem 1.3rem; border-radius: 18px;
  background: rgba(232,200,119,0.08); box-shadow: inset 0 0 0 1px rgba(232,200,119,0.4); }
.lc__already-k { margin: 0; font: 800 0.62rem var(--body); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--music-gold, #e8c877); }
.lc__already p { margin: 0.6rem 0 0; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.7; }
.lc__already-go { display: inline-block; margin-top: 0.9rem; font-weight: 800; font-size: 0.84rem;
  color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.lc__already-go:hover { color: var(--music-gold, #e8c877); }

/* ============================================================
   THE LISTENING ROOM.

   Same art direction as the album room, different job. The album
   room opens on one record and its film; this one opens on the
   whole shelf and has to answer "what should I put on" before it
   answers anything else.

   So it borrows the album's headline treatment — Anton, uppercase,
   filling the width — and keeps the pill chips rather than the
   album's squared ones, because here they are a live filter the
   listener taps repeatedly rather than a mode switch they set once.
   ============================================================ */
.music-room--listen .greet {
  margin-top: clamp(1.4rem, 4vw, 2.6rem);
  font-family: var(--sig);
  text-transform: uppercase;
  font-size: clamp(2.8rem, 13vw, 5rem);
  line-height: 0.88;
}
.music-room--listen .greet__sub { max-width: 34rem; margin: 0.7rem 0 0; }

/* THE ART IS THE PRODUCT HERE, SO IT STAYS LEGIBLE. The album room blurs
   its curated cards hard, which is right there: they sit under a record
   that is already on screen and the blur keeps them from competing with
   it. In the listening room the cards ARE the offer — eight covers doing
   the work of persuading somebody to press play — and a five-pixel blur
   turns them into mush. Less blur, and the scrim does the legibility work
   instead: transparent where the art is, opaque under the type. */
.music-room--listen .feat__smoke {
  backdrop-filter: blur(1px) saturate(1.1);
  -webkit-backdrop-filter: blur(1px) saturate(1.1);
  background: linear-gradient(170deg,
    rgba(9,7,5,0.62) 0%,
    rgba(9,7,5,0.30) 34%,
    rgba(9,7,5,0.52) 62%,
    rgba(9,7,5,0.88) 100%);
}
.music-room--listen .feat__card { padding: 1.05rem 1.1rem 0.95rem; }
.music-room--listen .feat__card > b { font-size: 1.22rem; text-shadow: 0 2px 18px rgba(0,0,0,0.85); }
.music-room--listen .feat__card > small { min-height: 0; margin-top: 0.28rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
/* a taller card, so the cover has room to be a cover */
.music-room--listen .feat__card { min-height: 12.5rem; display: flex; flex-direction: column; }
.music-room--listen .feat__acts { margin-top: auto; }