/* ============================================================
   DJ WIZ HOFFA — MUSIC / DISCOGRAPHY page layout
   css/pages/music.css?v=4 — loads AFTER tokens.css + site.css.
   Page-scoped classes only. Never restyles the shared shell;
   the only shell names touched are contextual descendants of a
   page-owned ancestor (contrast on the crimson band), never a
   bare redefinition. No :root, no token overrides.

   Editorial rhythm (alternating depth, top → bottom):
     hero  black + haze  ·  01 stream  black
     02 single  bg-2 band ·  03 production  black
     statement  black, hairlined full-bleed
     04 mixtape  bg-2 band ·  05 range  CRIMSON full-bleed
     catalog status  black  ·  close  black
   ============================================================ */

/* Crimson punctuation accent — decorative only, never body text */
.tint { color: var(--crimson-hot); }

/* ============================================================
   HERO — "Hear the Taste."
   ============================================================ */
.music-hero {
  position: relative;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6.5rem));
  padding-bottom: var(--sect-pad);
  border-bottom: 1px solid var(--line);
}

/* Oversized ghost letterform — depth, never read */
.hero-ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.17em;
  z-index: var(--z-base);
  font-family: var(--font-display);
  font-size: clamp(7rem, 26vw, 21rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(242, 239, 228, 0.035);
  pointer-events: none;
  user-select: none;
}

.music-hero-grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.music-hero-copy .eyebrow { margin-bottom: var(--sp-5); }

.music-h1 {
  font-size: clamp(3.4rem, 10.5vw, 8.25rem);
  line-height: 0.94;
  text-wrap: balance;
}

/* At 0.4em "HEAR THE" was 52.8px against "TASTE." at 132px — a 2.5x drop
   that read as a mistake rather than emphasis. 0.62em sets the two lines
   to near-identical ink width (~310px vs ~315px at 1440), so the stack
   reads as a deliberate two-beat lockup. Verified down to 360, where
   "HEAR THE" measures ~128px inside a 320px column. */
.music-h1 .l1 {
  display: block;
  font-size: 0.62em;
  letter-spacing: 0.04em;
  color: var(--ivory-80);
  margin-bottom: 0.08em;
}

.music-h1 .l2 { display: block; }

.music-hero-copy .lead { margin-top: var(--sp-5); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* Fact rail — three quiet anchors under the fold line */
.hero-meta {
  display: grid;
  gap: 0;
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
}

.hero-meta li {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.hero-meta .m-k {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
  margin-bottom: var(--sp-1);
}

.hero-meta .m-v {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ivory);
  line-height: 1.25;
}

@media (min-width: 560px) {
  .hero-meta {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--sp-5);
  }
  .hero-meta li { border-bottom: 0; }
}

/* The role line used to sit sp-5 below the CTAs and sp-7 above the fact
   rail — closer to the buttons than to the band it belongs to, so it read
   as an orphan floating in the middle of the hero. Flipping the gaps binds
   it to the rail as that band's opening label. */
.hero-role {
  margin-top: var(--sp-7);
  color: var(--smoke);
}

.hero-role + .hero-meta { margin-top: var(--sp-3); }

/* Framed hero photograph — archival object treatment */
.hero-frame {
  justify-self: center;
  width: min(100%, 420px);
  background: var(--flyer-ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  box-shadow: var(--shadow-2), var(--glow-crimson-soft);
}

.hero-frame img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

.frame-tag {
  padding-top: var(--sp-3);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
}

@media (min-width: 980px) {
  .music-hero-grid {
    grid-template-columns: 1.12fr 0.88fr;
    gap: var(--sp-8);
  }

  .hero-frame {
    justify-self: end;
    width: min(100%, 460px);
  }
}

/* ============================================================
   01 — STREAMING PLATFORM GRID
   ============================================================ */
.stream-grid { gap: var(--sp-5); }

@media (min-width: 768px)  { .stream-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .stream-grid { grid-template-columns: repeat(4, 1fr); } }

.stream-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(210px, 25vw, 290px);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  isolation: isolate;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* Crimson rule that draws across the card head on hover/focus */
.stream-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--crimson-hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}

/* Soft crimson bloom from the lower-left, revealed on hover/focus */
.stream-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(85% 70% at 8% 100%, rgba(158, 27, 50, 0.34), transparent 68%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.stream-card:hover,
.stream-card:focus-visible {
  background: var(--panel-2);
  border-color: var(--line-crimson);
  box-shadow: var(--glow-crimson-soft);
  transform: translateY(-4px);
}

.stream-card:hover::before,
.stream-card:focus-visible::before { transform: scaleX(1); }

.stream-card:hover::after,
.stream-card:focus-visible::after { opacity: 1; }

.stream-idx {
  font-family: var(--font-logo);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--smoke);
}

.stream-label {
  margin-top: auto;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
}

.stream-name {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ivory);
}

.stream-note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-60);
}

.stream-go {
  position: absolute;
  top: clamp(1rem, 2vw, 1.45rem);
  right: clamp(1rem, 2vw, 1.45rem);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--smoke);
  transition: transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}

.stream-card:hover .stream-go,
.stream-card:focus-visible .stream-go {
  color: var(--crimson-hot);
  transform: translate(4px, -4px);
}

/* ============================================================
   SHARED SPLIT LAYOUT (02 single / 03 production)
   ============================================================ */
.split {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

@media (min-width: 980px) {
  .split { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-9); }
  .split--flip { grid-template-columns: 0.9fr 1.1fr; }
}

/* Texture photography — framed, restrained */
.texture-frame {
  justify-self: center;
  width: min(100%, 400px);
  background: var(--flyer-ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  box-shadow: var(--shadow-2);
}

.texture-frame img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

@media (max-width: 979.98px) {
  /* Mobile: copy first, imagery after, regardless of source order */
  .split .texture-frame { order: 2; }
  .split .split-copy    { order: 1; }
}

/* Cindy §09 rail alignment. The hero already establishes the pattern
   (justify-self:end at >=980); the other three media frames never
   inherited it, so at 1440 §02's frame ended 66px short of the right
   rail, §03's started 66px inside the left rail (visibly stepping in
   from the eyebrow/title above it), and the mix video ended 103px
   short — leaving a dark strip beside/behind the vinyl frame that read
   as a stray rectangle. Mobile is untouched. */
@media (min-width: 980px) {
  .idky-sect .texture-frame { justify-self: end; }
  .prod-sect .texture-frame { justify-self: start; }
}

.split-copy .eyebrow { margin-bottom: var(--sp-4); }

/* ============================================================
   02 — FEATURED SINGLE: I.D.K.Y.
   ============================================================ */
.idky-chip {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-crimson);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--crimson) 8%, transparent);
  color: var(--ivory-80);
  margin-bottom: var(--sp-4);
}

.idky-title {
  font-size: clamp(3rem, 10.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-5);
}

.idky-actions { margin-top: var(--sp-6); }

/* The honesty gate, rendered as a designed detail rather than a gap */
.honest-note {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line-strong);
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 46ch;
}

.chip-row { margin-top: var(--sp-6); }

.chip-row-label {
  color: var(--smoke);
  margin-bottom: var(--sp-3);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
  text-decoration: none;
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--crimson-hot);
  color: var(--ivory);
  background: rgba(158, 27, 50, 0.12);
}

/* ============================================================
   03 — PRODUCTION & SONGWRITING
   ============================================================ */
.prod-sect .sect-title { margin-bottom: var(--sp-4); }

.cred-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.cred {
  border-left: 2px solid var(--crimson);
  padding-left: var(--sp-5);
}

.cred-label {
  color: var(--smoke);
  margin-bottom: var(--sp-2);
}

.cred-names {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ivory);
  line-height: 1.35;
}

.cred-names + .cred-names { margin-top: var(--sp-3); }

.cred-note {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ivory-60);
}

.prod-actions {
  margin-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.prod-mail {
  font-size: var(--fs-small);
  color: var(--smoke);
}

/* ============================================================
   STATEMENT — full-bleed typographic breath (no second haze)
   ============================================================ */
.statement {
  position: relative;
  border-block: 1px solid var(--line-crimson);
  background:
    radial-gradient(70% 100% at 50% 50%, rgba(242, 239, 228, 0.035), transparent 70%),
    var(--bg);
  text-align: center;
}

.statement-quote {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5.4vw, 4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}

.statement-quote .s1 { display: block; color: var(--ivory-60); }
.statement-quote .s2 { display: block; color: var(--ivory); }

.statement-src {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--smoke);
}

/* ============================================================
   04 — MIXTAPE LEGACY
   ============================================================ */
.mix-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 980px) {
  .mix-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-9); }
}

.roster-label {
  color: var(--smoke);
  margin-bottom: var(--sp-4);
}

.roster-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.roster-list li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: clamp(0.7rem, 1.6vw, 1rem);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ivory);
  line-height: 1.15;
  transition: color var(--dur-1) var(--ease);
}

/* Crimson tick that grows out of the rule under the hovered row */
.roster-list li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--crimson-hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}

.roster-list li:hover::after,
.roster-list li:focus-within::after { transform: scaleX(1); }

/* Numeral warms with the crimson tick — one gesture, not two */
.roster-list li:hover .r-idx,
.roster-list li:focus-within .r-idx { color: var(--crimson-line); }

.r-idx {
  flex: none;
  font-family: var(--font-logo);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--smoke);
  transition: color var(--dur-2) var(--ease);
}

.mix-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.mix-side .vslot {
  background: var(--flyer-ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  box-shadow: var(--shadow-2);
  max-width: 400px;
  margin-inline: auto;   /* centre like .texture-frame below the 2-col tier */
}

/* Inner media picks up the archival radius like .texture-frame img.
   The <video> is inset:0 in site.css (fills the padding box), so it must
   be inset by the frame padding here or it would paint over the ground. */
.mix-side .vslot .vslot-poster { border-radius: var(--r-xs); }

.mix-side .vslot video {
  inset: var(--sp-3);
  width: auto;
  height: auto;
  border-radius: var(--r-xs);
}

/* Cindy §09: right-align the whole stack so the proof list stays flush
   with the video's left edge and no dead column is left inside the rail.
   Do NOT drop the vslot's max-width — widening it to the full column
   makes it 753px tall at 1440 and unbalances the grid against the
   9-item roster. */
@media (min-width: 980px) {
  .mix-side {
    justify-self: end;
    width: min(100%, 400px);
  }
}

.proof-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.proof {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border-left: 2px solid var(--crimson);
  padding-left: var(--sp-4);
}

.proof-num {
  font-family: var(--font-logo);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ivory);
}

.proof-text {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ivory-80);
  max-width: 26ch;
}

/* ============================================================
   05 — THE RANGE: crimson full-bleed typographic band
   Contrast law: everything on this surface is ivory.
   ============================================================ */
/* Cindy §12 leak: the page's largest painted surface hardcoded --crimson,
   --crimson-deep and --crimson-hot as raw values, so a retune of the brand
   red in tokens.css would move every other crimson on the site and leave
   this band behind. Zero-pixel swap — color-mix(--crimson 29%, --crimson-deep)
   resolves to rgb(124,21,39) = #7C1526, within 1/255 per channel. */
.genre-band {
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--crimson-hot) 50%, transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--crimson) 29%, var(--crimson-deep)),
      var(--crimson) 44%,
      var(--crimson-deep));
  border-block: 1px solid var(--line);
}

/* Contextual contrast fixes on the crimson surface only */
.genre-band .eyebrow { color: rgba(242, 239, 228, 0.86); }
.genre-band .eyebrow::before { background: var(--bg); }
.genre-band .sect-title { color: var(--ivory); }
.genre-band .sect-lead { color: rgba(242, 239, 228, 0.82); }

/* Inline typographic flow — reads as set display copy, not a chip list.
   Cindy §10: the middot pseudo used to live inside each li's nowrap unit,
   glued to the word BEFORE it, so every wrapped line ended on a dangling
   separator (after AFROBEATS, HOUSE and THROWBACKS at 1440) and the trailing
   dot's advance biased text-align:center ~15px left of true centre.
   DEVIATION from the finding's fix: it proposed dropping the dots and using
   word-spacing on the <ul>. Verified in the browser and rejected — three of
   these terms are TWO words ("TOP 40", "JERSEY CLUB", "LATIN VIBES"), and
   word-spacing widens the intra-term space by the same amount as the
   inter-term one, so the band rendered as fourteen genres instead of eleven.
   Separating by symmetric inline-block margins instead: the gap between
   terms becomes ~4x the space inside a term (so the pairs still read as
   pairs), no separator can dangle because there is none, and because every
   li carries the SAME margin on both sides the first and last box on each
   line cancel out — text-align:center lands exact. */
.genre-stack {
  display: block;
  max-width: 1120px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.4vw, 4.2rem);
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--ivory);
  text-wrap: balance;
}

.genre-stack li {
  display: inline-block;
  margin-inline: 0.42em;
  white-space: nowrap;
}

.genre-stack li:not(:last-child)::after { content: none; }

.genre-stack .genre-more {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: var(--ls-label);
  color: rgba(242, 239, 228, 0.82);
}

/* ============================================================
   CATALOG STATUS — clearly labeled placeholder, never a fake record
   ============================================================ */
.catalog-slab {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 4.5vw, 3rem);
  background: linear-gradient(180deg, var(--panel), rgba(18, 18, 20, 0));
}

@media (min-width: 768px) {
  .catalog-slab {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--sp-7);
  }
}

.catalog-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
  white-space: nowrap;
}

.status-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: var(--glow-crimson);
  animation: catalog-pulse 2.6s var(--ease-io) infinite;
}

@keyframes catalog-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.catalog-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--ivory);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}

.catalog-slab p { max-width: 52ch; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
/* Cindy §11: the page peaks on the crimson band and then died into three
   stacked near-blacks — the last ~40% of the scroll was one undifferentiated
   dark mass and .close-sect, the conversion moment, was its flattest slab.
   .statement on this page already proves the lift pattern. Ivory on the
   lifted ground still measures >16:1, so there is no contrast cost. */
.close-sect {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 50% 100%,
      color-mix(in srgb, var(--ivory) 6%, transparent), transparent 72%),
    var(--bg);
}

.close-sect .eyebrow--center { margin-bottom: var(--sp-4); }

.close-title {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  max-width: 16ch;
  margin-inline: auto;
  text-wrap: balance;
}

.close-lead {
  margin: var(--sp-4) auto 0;
  max-width: 44ch;
}

.close-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.close-kicker {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-60);
  max-width: 34ch;
  margin-inline: auto;
}

/* ============================================================
   SMALL-SCREEN GUARDS (360px design floor)
   ============================================================ */
@media (max-width: 420px) {
  .hero-actions .btn,
  .close-actions .btn,
  .idky-actions .btn { width: 100%; }

  .stream-card { min-height: 180px; }

  .proof-text { max-width: none; }
}