/* ──────────────────────────────────────────────────────────────
   SETFOLIO — MARKETING HOMEPAGE · "Cover Light" v2
   Accent-agnostic: hard-coded hot orange (NOT per-tenant theming).
   Self-hosted Unbounded / Archivo / IBM Plex Mono (no Google Fonts).
   Loaded ONLY by _LayoutV2 (Index.cshtml). Legacy home.css is untouched
   and still serves Auth / Privacy / Error.
   ────────────────────────────────────────────────────────────── */

@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/unbounded-500.woff2') format('woff2');}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/unbounded-700.woff2') format('woff2');}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/unbounded-900.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root{
  --room:#0B0907;
  --ink:#F4EFE7;
  --ink-dim:#9B948A;
  --accent:#FF5A36;            /* hard-coded marketing accent (Changsta hot orange) */
  --accent-rgb:255,90,54;
  --frame:#0E0C09;
  --line:244,239,231;          /* hairlines: rgba(var(--line), .09–.22) */
  --display:'Unbounded', sans-serif;
  --text:'Archivo', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --maxw:1160px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:dark;scroll-padding-top:80px;}
body{background:var(--room);color:var(--ink);font-family:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button,input{font-family:inherit;}
img{display:block;max-width:100%;}
::selection{background:var(--ink);color:var(--room);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ════════ NAV ════════ */
/* scoped to the layout's top-level nav — the _ShowcaseStage deep-link rail is
   also a <nav> (nested), and a bare `nav` selector would fix it to the top too. */
body > nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:34px;padding:20px clamp(20px,4vw,44px);
  /* mid-stop keeps a ≥.5 backdrop under the link text through the fade, not just at the very top */
  background:linear-gradient(to bottom, rgba(11,9,7,0.95) 0%, rgba(11,9,7,0.5) 60%, rgba(11,9,7,0) 100%);
}
.wordmark{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:0.03em;}
.wordmark i{font-style:normal;color:var(--ink-dim);font-weight:500;}
.nav-links{margin-left:auto;display:flex;gap:30px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--ink-dim);}
.nav-links a{transition:color .18s;}
.nav-links a:not(.btn):hover{color:var(--ink);}

/* ════════ BUTTONS ════════ */
.btn{
  font-family:var(--text);font-weight:700;font-size:14px;letter-spacing:0.03em;
  background:var(--ink);color:var(--room);border:none;border-radius:99px;
  padding:13px 26px;cursor:pointer;display:inline-block;text-align:center;
  transition:box-shadow .35s ease, transform .25s ease;
}
.btn:hover{box-shadow:0 0 36px rgba(var(--line),0.35);transform:translateY(-2px);}
.btn--lg{padding:17px 36px;font-size:15px;}
.btn--ghost{
  font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-dim);
  background:none;border:1px solid rgba(var(--line),0.22);border-radius:99px;
  padding:15px 28px;display:inline-block;transition:color .2s, border-color .2s;
}
.btn--ghost:hover{color:var(--ink);border-color:rgba(var(--line),0.55);}
.btn--ghost.btn--lg{padding:16px 30px;}

/* ════════ HERO — THE WALL ════════ */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
.cover-wall{
  position:absolute;inset:-16% -10%;z-index:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:22px;
  transform:perspective(1200px) rotateX(14deg) scale(1.12);
  transform-origin:50% 20%;
  /* Lit, not scrimmed: the wall stays bright enough that cover art reads (feature 03's claim);
     text legibility comes from the bottom-weighted veil, not from dimming the artwork. */
  filter:brightness(0.86) saturate(1.08);
}
.cover-wall .cw{
  aspect-ratio:1;border-radius:6px;overflow:hidden;position:relative;
  background-size:cover;background-position:center;
  animation:drift 9s ease-in-out infinite;
}
.cover-wall .cw:nth-child(3n){animation-delay:-3s;}
.cover-wall .cw:nth-child(3n+1){animation-delay:-6s;}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 110% 85% at 50% 100%, rgba(11,9,7,0.97) 38%, rgba(11,9,7,0.68) 68%, rgba(11,9,7,0.22) 100%),
    linear-gradient(to bottom, rgba(11,9,7,0.42), rgba(11,9,7,0.06) 40%);
}
/* top padding clears the fixed nav when the content stack is taller than the viewport
   (short/narrow screens) — with align-end + min-height the hero grows instead of sliding
   the kicker under the nav. */
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:92px clamp(20px,4vw,44px) clamp(72px,9vw,96px);text-align:center;}
.hero-kicker{font-family:var(--mono);font-size:12px;letter-spacing:0.24em;color:var(--ink-dim);margin-bottom:26px;}
.hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(44px,6.4vw,92px);line-height:1.0;letter-spacing:-0.01em;margin-bottom:26px;}
.hero__sub{font-size:18px;line-height:1.6;color:#B8B1A6;max-width:560px;margin:0 auto 40px;text-shadow:0 1px 14px rgba(11,9,7,0.9);text-wrap:pretty;}
.hero__sub strong{color:var(--ink);font-weight:600;}

/* beta-full state notice — calm, not an error, not a headline; sits above the waitlist form */
.hero__cap{display:flex;align-items:flex-start;gap:10px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--ink);max-width:520px;margin:0 auto 22px;text-align:left;}
.hero__cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px;}

/* hero CTA row + email field */
.feedrow{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;}
.wl-field{display:flex;align-items:center;background:rgba(14,12,9,0.85);border:1px solid rgba(var(--line),0.22);border-radius:99px;overflow:hidden;transition:border-color .18s;min-width:240px;}
.wl-field:focus-within{border-color:rgba(var(--accent-rgb),0.6);}
.wl-field input{flex:1;background:transparent;border:0;color:var(--ink);font-family:var(--mono);font-size:16px;padding:14px 20px;outline:none;min-width:0;}
.wl-field input::placeholder{color:var(--ink-dim);}
.hero-err{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:#E58A72;}
.hero-note{margin-top:28px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.06em;color:var(--ink-dim);display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;}
.hero-note span{display:inline-flex;align-items:center;gap:8px;}
.hero-note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}

/* waitlist confirmed state */
.waitlist-ok{margin:0 auto;max-width:480px;display:flex;align-items:flex-start;gap:16px;border:1px solid rgba(var(--line),0.16);background:rgba(var(--line),0.03);border-radius:14px;padding:18px 20px;text-align:left;}
.waitlist-ok__icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;margin-top:2px;}
.waitlist-ok__icon::after{content:"";display:block;width:10px;height:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-46deg) translate(1px,-1px);}
.waitlist-ok__head{font-family:var(--text);font-weight:600;font-size:15px;}
.waitlist-ok__sub{margin-top:4px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-dim);}
.waitlist-ok__go{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--ink-dim);display:inline-block;margin-top:10px;transition:color .18s;}
.waitlist-ok__go:hover,.waitlist-ok__go:focus-visible{color:var(--accent);}

/* ════════ TICKER ════════ */
.ticker{border-top:1px solid rgba(var(--line),0.14);border-bottom:1px solid rgba(var(--line),0.14);overflow:hidden;white-space:nowrap;padding:14px 0;position:relative;z-index:2;background:var(--room);}
.ticker__track{display:inline-flex;animation:tick 46s linear infinite;will-change:transform;}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker .lead{font-family:var(--mono);font-size:12.5px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(var(--line),0.25);padding:0 52px;}
.ticker .it{font-family:var(--mono);font-size:12.5px;letter-spacing:0.18em;color:var(--ink-dim);padding:0 26px;}
@keyframes tick{to{transform:translateX(-50%);}}

/* ════════ SECTION scaffold ════════ */
section{padding:clamp(80px,12vw,130px) clamp(20px,4vw,44px);position:relative;}
.sec-inner{max-width:var(--maxw);margin:0 auto;}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:0.22em;color:var(--ink-dim);display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.kicker::before{content:"";width:34px;height:1px;background:currentColor;}
.mlabel{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
.mlabel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,50px);line-height:1.1;letter-spacing:-0.005em;max-width:640px;margin-bottom:18px;}
.lede{font-size:17px;line-height:1.65;color:var(--ink-dim);max-width:540px;text-wrap:pretty;}
.sec__head{margin-bottom:clamp(28px,4vw,40px);}
.sec__head h2{max-width:18ch;}
.sec__head p{margin-top:14px;font-size:16px;line-height:1.65;color:var(--ink-dim);max-width:56ch;text-wrap:pretty;}

/* ════════ LIVE (showcase section) ════════ */
.live-sec{background:radial-gradient(ellipse 70% 60% at 72% 38%, rgba(var(--accent-rgb),0.09), rgba(11,9,7,0) 70%);}

/* ════════ FEATURES ════════ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(var(--line),0.12);margin-top:56px;}
.feat{padding:44px 34px 12px;border-left:1px solid rgba(var(--line),0.12);}
.feat:first-child{border-left:none;padding-left:0;}
.feat .idx{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;color:var(--ink-dim);display:block;margin-bottom:20px;}
.feat h3{font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:14px;line-height:1.3;}
.feat p{font-size:15px;line-height:1.65;color:var(--ink-dim);text-wrap:pretty;}

/* ════════ LIVE SHOWCASE — "Now / Next" (_ShowcaseStage partial) ════════ */
.showcase-now{margin-bottom:clamp(40px,6vw,64px);}
.showcase-stage{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(20px,3vw,40px);align-items:start;border:1px solid rgba(var(--line),0.12);background:rgba(var(--line),0.015);border-radius:14px;padding:clamp(18px,2.5vw,28px);}
.showcase-player{position:relative;border-radius:10px;overflow:hidden;background:var(--frame);}
.showcase-cover{position:relative;}
.showcase-cover > img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.showcase-player--noart .showcase-cover{min-height:220px;}
.showcase-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:0;background:rgba(11,9,7,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s, transform .15s;}
.showcase-play:hover{background:var(--accent);transform:scale(1.06);}
.showcase-play__g{width:0;height:0;border-left:18px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px;}
.showcase-play:hover .showcase-play__g{border-left-color:var(--room);}
/* injected SoundCloud iframe — dark display filter (mirrors public-v2 .sc-frame), ADR-003-clean */
.showcase-sc{display:none;width:100%;height:120px;border:0;filter:invert(0.93) hue-rotate(180deg);}
.showcase-player.is-live .showcase-play{display:none;}
.showcase-player.is-live .showcase-sc{display:block;}

/* activation states — the gap between the tap and the widget's READY, and the honest dead end when
   SoundCloud never answers. Both overlay the cover (absolute) so appearing costs zero layout shift.
   The dim pill keeps mono microcopy legible over bright artwork; the failure link is full --ink
   because it is the only remaining way to hear the mix. */
.showcase-status{position:absolute;left:0;right:0;top:calc(50% + 44px);display:none;justify-content:center;padding:0 14px;text-align:center;z-index:2;}
.showcase-player.is-loading .showcase-status,.showcase-player.is-failed .showcase-status{display:flex;}
.showcase-status__load,.showcase-status__fail{display:none;max-width:100%;font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;line-height:1.5;text-transform:uppercase;border-radius:99px;padding:7px 13px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.showcase-player.is-loading .showcase-status__load{display:inline-block;color:var(--ink-dim);background:rgba(11,9,7,0.5);}
.showcase-player.is-failed .showcase-status__fail{display:inline-block;color:var(--ink);background:rgba(11,9,7,0.78);border:1px solid rgba(var(--line),0.18);transition:background .18s, border-color .18s;}
.showcase-status__fail:hover{background:rgba(11,9,7,0.9);border-color:rgba(var(--accent-rgb),0.6);}
.showcase-player.is-loading .showcase-play{cursor:progress;}
.showcase-player.is-loading .showcase-play__g{animation:scglyph 1.2s ease-in-out infinite;}
@keyframes scglyph{0%,100%{opacity:1;}50%{opacity:0.32;}}

/* cue-line ruler over the facade player, driven by home.js */
.cue-line{display:flex;align-items:center;gap:12px;padding:16px 8px 10px;background:var(--frame);}
.cue-line[hidden]{display:none;}
.cue-line__t{flex-shrink:0;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-dim);font-variant-numeric:tabular-nums;}
.cue-line__t--cur{color:var(--accent);}
.cue-line__rail{position:relative;flex:1;height:20px;cursor:pointer;}
.cue-line__rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:2px;background:rgba(var(--line),0.16);}
/* invisible hit-area expansion for taps that land on the bare rail (not a tick) — rail is visually 20px
   tall, this gives it ~32px within the padding the cue-line container already reserves above/below it. */
.cue-line__rail::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;}
.cue-line__fill{position:absolute;left:0;top:50%;height:3px;width:0;transform:translateY(-50%);border-radius:2px;background:rgba(var(--accent-rgb),0.6);}
.cue-line__head{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:2px;height:15px;border-radius:1px;background:var(--ink);box-shadow:0 0 0 1px rgba(11,9,7,0.6);pointer-events:none;z-index:4;}
.cue-line__tick{position:absolute;top:0;bottom:0;transform:translateX(-50%);width:18px;background:transparent;border:0;padding:0;cursor:pointer;z-index:3;}
.cue-line__tick::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:11px;border-radius:1px;background:rgba(var(--line),0.22);transition:background .14s, height .14s;}
/* invisible hit-area expansion — ticks sit ~4px apart at typical cue density, so widening by 2px each
   side closes that gap (~18px → ~22px wide) without reaching into a neighbour; vertically it matches the
   rail's own expanded 32px so a tap just above/below a tick still lands on it, not the bare rail. Ticks
   already paint above the rail (z-index:3), so this overlay wins over .cue-line__rail::after on overlap.
   Dense cue sets can still put two ticks closer than 4px apart — that's a real ceiling, not fixable
   without changing the rail's visual density, so this is as close to 44px as the layout allows. */
.cue-line__tick::after{content:"";position:absolute;left:-2px;right:-2px;top:-6px;bottom:-6px;}
.cue-line__tick .lab{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:0.04em;color:var(--ink-dim);font-variant-numeric:tabular-nums;transition:color .14s;}
.cue-line__tick:hover::before{background:rgba(var(--accent-rgb),0.5);}
.cue-line__tick:hover .lab{color:var(--ink);}
.cue-line__tick.passed::before{background:rgba(var(--accent-rgb),0.45);}
.cue-line__tick.is-current::before{background:var(--accent);height:16px;box-shadow:0 0 8px rgba(var(--accent-rgb),0.5);}
.cue-line__tick.is-current .lab{color:var(--accent);}
.cue-line--bare .cue-line__tick .lab{display:none;}

/* deep-link rail into the live tenant */
.showcase-rail{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(20px,3vw,30px) 0 clamp(36px,5vw,54px);}
.showcase-rail a{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-dim);border:1px solid rgba(var(--line),0.16);border-radius:99px;padding:9px 16px;transition:color .18s, border-color .18s, background .18s;}
.showcase-rail a:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),0.6);background:rgba(var(--accent-rgb),0.06);}

/* showcase tracklist */
.showcase-tl{list-style:none;min-width:0;}
.showcase-tl .tl-row{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid rgba(var(--line),0.09);transition:background .12s;}
.showcase-tl .tl-row:first-child{border-top:1px solid rgba(var(--line),0.09);}
.showcase-tl .tl-row:hover{background:rgba(var(--line),0.03);}
.showcase-tl .pos{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-dim);text-align:right;}
.showcase-tl .tl-text{font-size:15px;line-height:1.35;min-width:0;display:flex;flex-direction:column;gap:2px;}
.showcase-tl .ar{color:var(--ink);font-weight:600;transition:color .15s;}
.showcase-tl a.ar:hover{color:var(--accent);}
.showcase-tl .tl-sub{font-family:var(--mono);font-size:12px;color:var(--ink-dim);}
.showcase-tl .ti{color:inherit;}
.showcase-tl .lab{color:var(--ink-dim);}
.showcase-tl .tl-row.has-cue{grid-template-columns:34px 1fr auto;}
.showcase-tl .tl-act{display:flex;align-items:center;justify-self:end;}
.showcase-tl .tl-cue{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:0.02em;color:var(--ink-dim);background:transparent;border:1px solid rgba(var(--line),0.16);border-radius:99px;padding:5px 10px 5px 8px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:border-color .14s, color .14s;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* invisible hit-area expansion — visual pill stays ~26px tall. The row itself isn't a link/button (only
   the pill and the artist name inside it are interactive), so the vertical reach can use most of the
   space between this row's pill and the next row's without touching it; horizontal reach is kept modest
   so it doesn't eat into the artist/title text to its left. ~26px visual → ~46px effective tap height. */
.showcase-tl .tl-cue::after{content:"";position:absolute;top:-10px;right:-6px;bottom:-10px;left:-6px;}
.showcase-tl .tl-cue .g{width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;opacity:.8;}
/* .js-scoped: without scripts the cue is a dead button rendered as plain text below, and lighting it
   up on hover would put the affordance straight back. */
html.js .showcase-tl .tl-row:hover .tl-cue,html.js .showcase-tl .tl-cue:focus-visible{border-color:rgba(var(--accent-rgb),0.6);color:var(--ink);}
.showcase-tl .tl-row.is-current{background:rgba(var(--accent-rgb),0.08);box-shadow:inset 2px 0 0 var(--accent);}
.showcase-tl .tl-row.is-current .pos{color:var(--accent);}
.showcase-tl .tl-row.is-current .ti{color:var(--ink);}
.showcase-tl .tl-row.is-current .tl-cue{background:var(--accent);color:var(--room);border-color:var(--accent);}
.showcase-tl .tl-row.is-current .tl-cue .g{opacity:1;}

/* no-JS: tl-cue is a <button data-seek> wired only by home.js — with scripts off it must not
   look like a control. Timestamp text itself stays visible; only the affordance is stripped. */
html:not(.js) .showcase-tl .tl-cue{background:transparent;border:0;padding:0;cursor:default;color:var(--ink-dim);}
html:not(.js) .showcase-tl .tl-cue .g{display:none;}
html:not(.js) .showcase-tl .tl-cue::after{content:none;}

/* tracklist cap toggle — server-rendered whenever the mix has >10 rows; hidden by default and
   surfaced (JS-only) by whichever clamp is in force: the ≤980px block below, or has-more-lg. */
.tl-more{display:none;width:100%;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-dim);background:none;border:1px solid rgba(var(--line),0.22);border-radius:99px;padding:12px 20px;cursor:pointer;transition:color .18s, border-color .18s;}
.tl-more:hover,.tl-more:focus-visible{color:var(--ink);border-color:rgba(var(--accent-rgb),0.6);}

/* desktop tracklist clamp — server also emits has-more-lg (>12 rows) alongside has-more (>10 rows);
   has-more-lg always implies has-more, so the ≤980px block's tighter clamp (first 8 rows) wins where
   both apply — these rules are a union of display:none, not an override. */
.js .showcase-tl.has-more-lg{position:relative;}
.js .showcase-tl.has-more-lg .tl-row:nth-child(n+13){display:none;}
.js .showcase-tl.has-more-lg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom, rgba(11,9,7,0), var(--room));pointer-events:none;}
.js .showcase-tl.has-more-lg.is-expanded .tl-row:nth-child(n+13){display:grid;}
.js .showcase-tl.has-more-lg.is-expanded::after{display:none;}
.js .showcase-tl.has-more-lg ~ .tl-more{display:block;}

/* ════════ HOW IT WORKS ════════ */
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(var(--line),0.12);border-bottom:1px solid rgba(var(--line),0.12);margin-top:48px;}
.step{padding:44px 36px;border-left:1px solid rgba(var(--line),0.12);}
.step:first-child{border-left:none;padding-left:0;}
.step .num{font-family:var(--display);font-weight:900;font-size:46px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--ink-dim);display:block;margin-bottom:22px;}
.step h3{font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:10px;}
.step p{font-size:15px;line-height:1.6;color:var(--ink-dim);text-wrap:pretty;}
.step .pf{color:var(--accent);}

/* ════════ FINAL CTA ════════ */
.final{text-align:center;overflow:hidden;padding:clamp(120px,16vw,170px) clamp(20px,4vw,44px);}
.final .glowfield{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 45% at 22% 75%, rgba(var(--accent-rgb),0.14), transparent 70%),radial-gradient(ellipse 40% 45% at 78% 70%, rgba(80,140,255,0.12), transparent 70%),radial-gradient(ellipse 35% 40% at 55% 90%, rgba(240,210,60,0.08), transparent 70%);animation:fieldbreathe 8s ease-in-out infinite;}
@keyframes fieldbreathe{0%,100%{opacity:0.6;}50%{opacity:1;}}
.final .sec-inner{position:relative;z-index:1;}
.final h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.6vw,66px);line-height:1.0;max-width:none;margin:0 auto 20px;}
.final .lede{margin:0 auto 40px;text-align:center;max-width:56ch;}
.final-cta{display:flex;justify-content:center;}
/* text-wrap:balance keeps the four claims from leaving an orphan word when they wrap on phones. */
.final .fine{font-family:var(--mono);font-size:12.5px;letter-spacing:0.08em;line-height:1.9;color:#B8B1A6;margin-top:30px;text-wrap:balance;}

/* ════════ FOOTER ════════ */
footer{display:flex;align-items:center;gap:30px;padding:56px clamp(20px,4vw,44px);border-top:1px solid rgba(var(--line),0.1);font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;color:var(--ink-dim);}
footer .links{margin-left:auto;display:flex;gap:26px;}
footer .links a:hover{color:var(--ink);}

/* reveal-on-scroll — only hides when JS is active (no-JS shows everything) */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.js .rv.in{opacity:1;transform:none;}

/* ════════ RESPONSIVE ════════ */
@media (max-width:980px){
  .cover-wall{grid-template-columns:repeat(4,1fr);}
  .feat-grid,.steps-row{grid-template-columns:1fr;}
  .feat,.step{border-left:none;padding-left:0;border-top:1px solid rgba(var(--line),0.12);}
  .feat:first-child,.step:first-child{border-top:none;}
  .showcase-stage{grid-template-columns:1fr;}
  .nav-links a.hide-sm{display:none;}
  .nav-links{gap:20px;}
  footer{flex-direction:column;align-items:flex-start;gap:18px;}
  footer .links{margin-left:0;}

  /* Mobile tracklist cap (JS-only — no-JS keeps the full list, matching the .rv reveal convention).
     Server renders .has-more only when the mix has >10 rows, so the clamp only ever applies there. */
  .js .showcase-tl.has-more{position:relative;}
  .js .showcase-tl.has-more .tl-row:nth-child(n+9){display:none;}
  .js .showcase-tl.has-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom, rgba(11,9,7,0), var(--room));pointer-events:none;}
  .js .showcase-tl.has-more.is-expanded .tl-row:nth-child(n+9){display:grid;}
  .js .showcase-tl.has-more.is-expanded::after{display:none;}
  .js .tl-more{display:block;}
}

/* Sign in stays visible on phones (returning DJs need a way back in), so the
   remaining three nav items are tightened to fit a ~360px viewport. */
@media (max-width:560px){
  body > nav{gap:14px;padding-inline:16px;}
  .wordmark{font-size:16px;}
  .nav-links{gap:15px;font-size:11.5px;}
  .nav-links .btn{padding:11px 17px;font-size:13px;}
}

/* Sub-360px hero: the display h1's clamp() floor (44px) is untested that small — give it a lower floor
   here. The kicker line is long enough to wrap onto multiple lines regardless (no white-space:nowrap),
   which is fine; tightening its letter-spacing just keeps each line a little more compact. */
@media (max-width:380px){
  .hero h1{font-size:clamp(34px,9vw,36px);}
  .hero-kicker{letter-spacing:0.18em;font-size:11px;margin-bottom:18px;}
  .hero__sub{font-size:16px;margin-bottom:30px;}
  /* three nav items must fit 320px without "Sign in" wrapping */
  body > nav{gap:10px;padding-inline:12px;}
  .nav-links{gap:11px;font-size:11px;}
  .nav-links a{white-space:nowrap;}
  .nav-links .btn{padding:10px 13px;font-size:12.5px;}
  .wordmark{font-size:15px;}
}

/* ════════ REDUCED MOTION — every always-on animation off ════════ */
@media (prefers-reduced-motion:reduce){
  /* the showcase loading pulse goes too — the mono label alone carries the state */
  .cover-wall .cw,.ticker__track,.final .glowfield,.showcase-player.is-loading .showcase-play__g{animation:none;}
  html{scroll-behavior:auto;}
  .btn:hover{transform:none;}
  *{transition:none !important;}
  .js .rv{opacity:1;transform:none;}
}