/* ================= NOSMAS BEATS design tokens =================
   Core palette from the migration brief, plus semantic tokens. The older
   names (--panel, --panel2, --grad) stay as aliases because the pitch pages
   and a few inline styles still read them. */
:root{
  --bg:#08080c; --surface:#101018; --surface-raised:#14141f; --line:#22222e;
  --ink:#f4f4f8; --muted:#a3a3b4; --cyan:#25d0e6; --magenta:#e83fa0; --gold:#e9b949; --danger-red:#d93445;
  --gradient-brand:linear-gradient(90deg,var(--cyan),var(--magenta));

  --panel:var(--surface); --panel2:var(--surface-raised); --grad:var(--gradient-brand);
  --grad-135:linear-gradient(135deg,var(--cyan),var(--magenta));
  --grad-soft:linear-gradient(135deg,rgba(37,208,230,.14),rgba(232,63,160,.14));

  --overlay-strong:rgba(6,6,10,.92); --overlay-mid:rgba(6,6,10,.62); --overlay-soft:rgba(6,6,10,.28);
  --line-soft:rgba(255,255,255,.08); --glass:rgba(16,16,24,.82);
  --focus:0 0 0 3px var(--bg),0 0 0 5px var(--cyan);
  --shadow:0 20px 60px rgba(0,0,0,.55); --shadow-card:0 14px 38px rgba(0,0,0,.55);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --w-content:1240px; --w-read:720px; --gutter:clamp(16px,3.4vw,56px);
  --font-display:"Bebas Neue","Arial Narrow","Impact",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --touch:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--cyan-ink);text-decoration:none;transition:.15s}
a:hover{color:var(--magenta-ink)}
img{max-width:100%;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brandmark{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:1.5px;color:var(--ink);font-size:15px}
.brandmark img{height:36px;width:36px}
.nav nav{display:flex;gap:24px;font-size:14px;font-weight:600}
.nav nav a{color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
/* Mobile nav. The links used to be display:none under 620px with nothing
   to replace them, so on a phone in portrait there was no navigation at
   all and it only reappeared in landscape. Now the header stacks and the
   links become a thumb-scrollable strip. No JS, so it works on all 22
   pages including the ones that do not load player.js. */
@media(max-width:620px){
  .nav .wrap{height:auto;flex-direction:column;align-items:stretch;padding-top:10px;padding-bottom:0}
  .brandmark{justify-content:flex-start}
  .nav nav{
    display:flex;gap:20px;font-size:14px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:8px -22px 0;padding:2px 22px 12px;
    scroll-padding-left:22px;
  }
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{white-space:nowrap;flex:0 0 auto;padding:4px 0}
}
/* Landscape phones are short, so keep the header shallow. */
@media(max-height:480px) and (orientation:landscape){
  .nav .wrap{height:52px}
  .brandmark img{height:28px;width:28px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--grad);color:#08080c;font-weight:800;border:0;border-radius:11px;padding:14px 28px;font-size:15px;cursor:pointer;transition:.18s;box-shadow:0 8px 26px rgba(232,63,160,.28)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#08080c}
.btn-ghost{display:inline-block;border:1px solid #33333f;border-radius:11px;padding:13px 24px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--cyan-ink);color:var(--cyan-ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 22px 70px;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05);z-index:0}
.hero .veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(120% 90% at 50% 0%,rgba(8,8,12,.35),rgba(8,8,12,.86) 62%,var(--bg) 100%),
  linear-gradient(180deg,rgba(37,208,230,.10),transparent 30%,rgba(232,63,160,.10))}
.hero>*{position:relative;z-index:2}
.hero img.logo{height:118px;width:118px;margin-bottom:22px;filter:drop-shadow(0 10px 30px rgba(37,208,230,.35))}
.brand{font-family:"Impact","Arial Narrow Bold","Arial Black",sans-serif;font-weight:900;letter-spacing:3px;font-size:clamp(46px,11vw,104px);line-height:.92;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.grad-text{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{color:var(--ink-soft);margin-top:16px;font-size:clamp(13px,3.2vw,17px);letter-spacing:3px;text-transform:uppercase;font-weight:600}
.cta-row{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.scroll-hint{margin-top:44px;color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase}

/* ---------- sections ---------- */
section.block{padding:78px 0;position:relative}
section.block+section.block{border-top:1px solid var(--line)}
.eyebrow{text-align:center;color:var(--magenta-ink);font-weight:800;letter-spacing:3px;text-transform:uppercase;font-size:12px}
h2.sec{font-size:clamp(26px,6vw,40px);text-align:center;margin-top:8px;letter-spacing:.5px}
.sub{color:var(--muted);text-align:center;margin-top:10px;max-width:600px;margin-left:auto;margin-right:auto}

/* ---------- album feature ---------- */
.album{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center;margin-top:40px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
.album .cover{width:100%;border-radius:14px;box-shadow:var(--shadow);aspect-ratio:1;object-fit:cover}
.album h3{font-size:clamp(30px,7vw,46px);letter-spacing:1px;line-height:1}
.album .meta{color:var(--muted);font-size:14px;margin:10px 0 16px;letter-spacing:1px;text-transform:uppercase}
.tracklist{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.tracklist span{font-size:13px;color:#c8c8d4;background:var(--wash-weak);border:1px solid var(--line);border-radius:20px;padding:6px 13px}
@media(max-width:720px){.album{grid-template-columns:1fr;text-align:center}.album .cover{max-width:260px;margin:0 auto}.tracklist{justify-content:center}.album .links-row{justify-content:center}}

/* ---------- story tiles (image cards) ---------- */
.stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:40px}
.tile{position:relative;display:block;height:280px;border-radius:16px;overflow:hidden;border:1px solid var(--line);isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:.4s ease}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,12,.05) 0%,rgba(8,8,12,.35) 45%,rgba(8,8,12,.94) 100%)}
.tile:hover img{transform:scale(1.06)}
.tile .txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px}
.tile .kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan-ink);font-weight:800}
.tile h3{color:#fff;font-size:22px;margin:4px 0 5px;letter-spacing:.5px}
.tile p{color:#c4c4d0;font-size:13.5px;line-height:1.5}
.tile .go{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- signup ---------- */
.signup{background:
  radial-gradient(700px 300px at 20% 0%,rgba(37,208,230,.12),transparent 60%),
  radial-gradient(700px 300px at 80% 100%,rgba(232,63,160,.12),transparent 60%),var(--panel)}
form.sub-form{margin:30px auto 0;max-width:490px;display:flex;gap:10px;flex-wrap:wrap}
input[type=email]{flex:1;min-width:210px;background:var(--field-bg);border:1px solid var(--field-line);border-radius:11px;padding:15px 17px;color:var(--ink);font-size:16px}
input[type=email]:focus{outline:none;border-color:var(--cyan-ink);box-shadow:0 0 0 3px rgba(37,208,230,.15)}
.msg{text-align:center;margin-top:18px;min-height:22px;font-size:14px}
.msg.ok{color:#7fd48a}.msg.err{color:#e88}
.fine{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}

/* ---------- perks row ---------- */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:38px}
.perk{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.perk .ico{font-size:24px}
.perk h4{margin:10px 0 6px;font-size:17px}
.perk p{color:var(--muted);font-size:14px}

/* ---------- links row ---------- */
.links-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.soon{opacity:.4;pointer-events:none;position:relative}
.soon::after{content:"soon";position:absolute;top:-8px;right:-6px;font-size:9px;letter-spacing:1px;background:var(--grad);color:#08080c;font-weight:800;padding:1px 5px;border-radius:8px}

/* ---------- article ---------- */
.post-hero{position:relative;height:clamp(240px,42vw,420px);overflow:hidden;border-bottom:1px solid var(--line)}
.post-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.post-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,12,.2),rgba(8,8,12,.55) 55%,var(--bg))}
.post-hero .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:760px;margin:0 auto;padding:0 22px 26px}
.post-hero .kicker{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan-ink);font-weight:800}
.post-hero h1{font-size:clamp(30px,7vw,52px);line-height:1.05;margin-top:8px;text-shadow:0 4px 24px rgba(0,0,0,.6)}
article.post{max-width:760px;margin:0 auto;padding:34px 22px 20px}
article.post .byline{color:var(--muted);font-size:13px;margin-bottom:24px;letter-spacing:.5px}
article.post p{margin:18px 0;font-size:17.5px;color:var(--ink-body)}
article.post h2{margin:34px 0 8px;font-size:23px}
article.post blockquote{border-left:3px solid;border-image:var(--grad) 1;padding:8px 0 8px 20px;margin:26px 0;color:var(--ink-strong);font-style:italic;font-size:19px}
.post-cta{margin:40px 0;padding:26px;background:var(--grad-soft);border:1px solid var(--line);border-radius:16px;text-align:center}
/* support note: content warning and helplines on a story page */
.support{margin:34px 0;padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px}
.support h2{margin:0 0 10px;font-size:18px;letter-spacing:.4px}
.support p{margin:0 0 10px;font-size:15.5px;color:var(--muted)}
.support ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.support li{font-size:15.5px;color:var(--ink-body)}
.support li b{color:var(--gold-ink);letter-spacing:.3px}
/* gem blocks (annotated lyrics) */
.gem{margin:22px 0;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--magenta);border-radius:12px}
.gem .bar{color:var(--ink-strong);font-style:italic;font-size:17px;line-height:1.5}
.gem .kind{display:inline-block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;padding:2px 9px;border-radius:20px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.kind.myth{background:rgba(37,208,230,.16);color:var(--cyan-ink)}
.kind.history{background:rgba(233,185,73,.2);color:var(--gold-ink)}
.kind.fiction{background:rgba(232,63,160,.16);color:var(--magenta-ink)}
.gem p{margin:12px 0 0;font-size:15.5px;color:var(--ink-soft)}
.gem a{font-weight:600}
.legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:22px 0}
.legend span{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;padding:3px 11px;border-radius:20px}
.lyric-full{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:24px 0;font-size:15px;color:var(--ink-quiet);white-space:pre-wrap;line-height:1.8}
/* longform story / audiobook */
.chapter{margin:44px 0 0}
.chapter .cnum{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--magenta-ink);font-weight:800}
.chapter h2{margin:6px 0 14px;font-size:26px;border:0}
article.post .chapter p{font-size:18px;color:var(--ink-body);margin:16px 0}
.chapter p.first::first-letter{float:left;font-size:52px;line-height:.8;font-weight:900;padding:4px 10px 0 0;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.story-quote{text-align:center;font-style:italic;color:var(--ink-strong);font-size:20px;margin:30px auto;max-width:560px}
.audiobook{margin:36px 0;padding:26px;background:var(--grad-soft);border:1px solid var(--line);border-radius:16px;text-align:center}
.audiobook h3{font-size:22px;margin-bottom:6px}
.audiobook p{color:var(--muted);font-size:14px;margin-bottom:14px}
.audiobook audio{width:100%;max-width:520px}
.ab-soon{display:inline-block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;background:var(--grad);color:#08080c;padding:5px 14px;border-radius:20px}
.cont-note{margin:40px 0 0;padding:20px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted);font-size:15px}

/* ---------- legal pages ---------- */
.legal{max-width:780px;margin:0 auto;padding:52px 22px}
.legal h1{font-size:34px;margin-bottom:8px}
.legal h2{font-size:20px;margin:28px 0 8px;color:var(--ink)}
.legal p,.legal li{color:var(--ink-quiet);font-size:15px;margin:10px 0}
.legal ul{padding-left:22px}
.legal .updated{color:var(--muted);font-size:13px}
.notice{background:var(--grad-soft);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:14px;color:var(--notice-ink);margin:18px 0}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:48px 22px 64px;text-align:center;color:var(--muted);font-size:13px;background:var(--panel)}
footer.site .fbrand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;letter-spacing:1.5px;color:var(--ink);margin-bottom:18px}
footer.site .fbrand img{height:30px;width:30px}
footer.site .flinks{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
footer.site .flinks a{color:var(--muted)}
footer.site .flinks a:hover{color:var(--ink)}


/* ================= catalogue ================= */
.cwrap{max-width:1680px;margin:0 auto;padding:0 clamp(18px,3.4vw,56px)}

/* hero */
.chero{position:relative;min-height:clamp(420px,62vh,660px);display:flex;align-items:flex-end;
  margin-bottom:clamp(28px,4vw,56px);overflow:hidden}
.chero .bg{position:absolute;inset:0;background-size:cover;background-position:center 32%;z-index:0}
.chero .veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(6,6,10,.96) 0%,rgba(6,6,10,.80) 38%,rgba(6,6,10,.18) 72%,rgba(6,6,10,.55) 100%),
  linear-gradient(0deg,var(--bg) 2%,rgba(6,6,10,0) 46%)}
.chero .inner{position:relative;z-index:2;padding:0 clamp(18px,3.4vw,56px) clamp(30px,4vw,56px);
  max-width:640px;margin:0 auto 0 0;width:100%}
.chero .eyebrow{color:var(--gold-ink);font-weight:800;letter-spacing:2.4px;font-size:12px;margin-bottom:10px}
.chero h1{font-size:clamp(38px,5.4vw,76px);line-height:.98;font-weight:800;letter-spacing:-1.5px;margin-bottom:14px}
.chero p{color:var(--ink-soft);font-size:clamp(14px,1.15vw,17px);margin-bottom:22px;max-width:520px}
.chero .row{display:flex;gap:12px;flex-wrap:wrap}
.btn-play{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#08080c;font-weight:800;
  border:0;border-radius:8px;padding:13px 28px;font-size:15px;cursor:pointer;transition:.15s}
.btn-play:hover{background:#e2e2ea;color:#08080c}
.btn-info{display:inline-flex;align-items:center;gap:10px;background:var(--info-bg);color:var(--info-ink);
  font-weight:700;border:0;border-radius:8px;padding:13px 26px;font-size:15px;cursor:pointer;transition:.15s}
.btn-info:hover{background:var(--info-bg-hover);color:var(--info-ink)}

/* rows */
.crow{margin:0 0 clamp(26px,3vw,46px)}
.crow h2{font-size:clamp(17px,1.5vw,23px);font-weight:800;letter-spacing:-.2px;margin:0 0 3px}
.crow .sub{font-size:13px;color:var(--muted);margin:0 0 14px}
.crail{display:grid;grid-auto-flow:column;align-items:start;grid-auto-rows:min-content;grid-auto-columns:clamp(150px,17.5vw,268px);gap:clamp(10px,.9vw,16px);
  overflow-x:auto;overflow-y:hidden;padding:4px 2px 20px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.crail::-webkit-scrollbar{height:8px}
.crail::-webkit-scrollbar-thumb{background:#2b2b3a;border-radius:8px}
.crail::-webkit-scrollbar-track{background:transparent}

.ctile{scroll-snap-align:start;height:auto;min-width:0;cursor:pointer;border:0;background:none;padding:0;text-align:left;
  color:inherit;transition:transform .2s cubic-bezier(.2,.7,.3,1);display:block}
.ctile:hover,.ctile:focus-visible{transform:scale(1.045);outline:none;z-index:3;position:relative}
.ctile .thumb{position:relative;width:100%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;
  background:#0d0d14;box-shadow:0 12px 34px rgba(0,0,0,.62)}
.ctile .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ctile:hover .thumb{box-shadow:0 18px 46px rgba(0,0,0,.8),0 0 0 2px var(--gold)}
.ctile .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.6));opacity:0;transition:.18s}
.ctile:hover .play,.ctile:focus-visible .play{opacity:1}
.ctile .play span{width:clamp(40px,3.6vw,58px);height:clamp(40px,3.6vw,58px);border-radius:50%;
  background:rgba(255,255,255,.95);color:#08080c;display:flex;align-items:center;justify-content:center;
  font-size:clamp(15px,1.4vw,21px);padding-left:3px}
.ctile .num{position:absolute;left:9px;top:9px;background:rgba(8,8,12,.82);color:var(--gold);
  font-size:11px;font-weight:800;letter-spacing:1.1px;padding:4px 8px;border-radius:5px}
.ctile .tname{font-size:clamp(12.5px,1.02vw,15px);font-weight:700;margin:10px 1px 2px;line-height:1.3}
.ctile .tsub{font-size:clamp(11px,.86vw,12.5px);color:var(--muted);margin:0 1px}

.badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;vertical-align:middle;margin-left:10px}
.badge.soon{background:rgba(233,185,73,.15);color:var(--gold-ink);border:1px solid rgba(233,185,73,.42)}

/* player */
.vmodal{position:fixed;inset:0;z-index:300;background:rgba(3,3,6,.95);backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,40px)}
.vmodal.on{display:flex}
.vmodal .box{display:flex;flex-direction:column;gap:14px;align-items:center}
.vmodal video{width:auto;height:min(82vh,900px);max-width:94vw;border-radius:14px;background:#000;
  box-shadow:0 40px 120px rgba(0,0,0,.9)}
.vmodal .cap{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;max-width:520px}
.vmodal .cap b{font-size:16px}
.vmodal .cap small{color:var(--muted);font-size:12.5px;display:block;font-weight:400;margin-top:2px}
.vclose{background:rgba(255,255,255,.12);border:1px solid #3a3a48;color:var(--ink);border-radius:8px;
  padding:10px 18px;font-weight:700;cursor:pointer;font-size:13.5px}
.vclose:hover{border-color:var(--gold);color:var(--gold)}

/* hover preview sits over the poster */
.ctile .thumb video.hoverprev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:2;background:#000;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ctile .thumb video.hoverprev+.play,.ctile .thumb video.hoverprev~.play{opacity:0}
video::-webkit-media-controls-enclosure{overflow:hidden}

/* player prev/next */
.vmodal .vnav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  background:rgba(255,255,255,.1);border:1px solid #3a3a48;color:#fff;border-radius:50%;
  width:clamp(40px,4vw,54px);height:clamp(40px,4vw,54px);font-size:clamp(15px,1.5vw,20px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.vmodal .vnav:hover{background:rgba(255,255,255,.22);border-color:var(--gold);color:var(--gold)}
.vmodal .vprev{left:clamp(10px,3vw,42px)} .vmodal .vnext{right:clamp(10px,3vw,42px)}
.vmodal .capbtns{display:flex;align-items:center;gap:14px}
.vmodal #vpos{color:var(--muted);font-size:12.5px;white-space:nowrap}
@media(max-width:640px){.vmodal .vnav{top:auto;bottom:14px;transform:none}}

/* ---------- background hero player ---------- */
#herostage{position:absolute;inset:0;z-index:0;overflow:hidden}
#herostage .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02)}
.heroctl{position:absolute;right:clamp(14px,3vw,44px);bottom:clamp(16px,3vw,44px);z-index:4;
  display:flex;align-items:center;gap:8px;background:rgba(8,8,12,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 12px}
.hbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.hbtn:hover{background:rgba(255,255,255,.25);border-color:var(--gold);color:var(--gold)}
.hbtn.small{width:28px;height:28px;font-size:15px;font-weight:700}
.hnow{color:var(--ink-soft);font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding-left:4px}
@media(max-width:620px){.hnow{display:none}.heroctl{gap:6px;padding:6px 9px}}

/* ---------- projects grid ---------- */
.pgrid{display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.pcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;color:inherit;transition:.2s cubic-bezier(.2,.7,.3,1)}
.pcard:hover{transform:translateY(-4px);border-color:var(--gold-ink);color:inherit;
  box-shadow:0 20px 50px rgba(0,0,0,.6)}
.pthumb{aspect-ratio:16/10;overflow:hidden;background:#0d0d14}
.pthumb img{width:100%;height:100%;object-fit:cover;transition:.35s}
.pcard:hover .pthumb img{transform:scale(1.05)}
.pmeta{padding:20px 22px 22px}
.ptag{color:var(--gold-ink);font-size:11px;font-weight:800;letter-spacing:1.4px;margin-bottom:8px}
.pmeta h2{font-size:clamp(20px,1.7vw,26px);font-weight:800;letter-spacing:-.3px;margin-bottom:7px}
.pmeta p{color:var(--muted);font-size:14px;margin-bottom:14px}
.plinks{display:flex;flex-wrap:wrap;gap:8px}
.plinks span{font-size:11.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px}

/* ---------- OUT NOW banner (release day, 4 Sept 2026) ----------
   Sits directly under the hero on the homepage. This is the first thing
   anyone arriving from the TikTok link in bio sees, so it has to say what
   is out and where to get it inside about three seconds.

   The pulse is a slow 1.8s glow, roughly 0.55Hz. Deliberately nowhere near
   the 3-flashes-per-second threshold in WCAG 2.3.1, because a real strobe
   is a photosensitive-seizure risk. It also switches itself off entirely
   for anyone who has reduced motion turned on. */

.outnow{
  position:relative;
  background:linear-gradient(135deg,rgba(37,208,230,.16),rgba(232,63,160,.16));
  border-top:1px solid rgba(37,208,230,.45);
  border-bottom:1px solid rgba(232,63,160,.45);
  overflow:hidden;
}
.outnow .wrap{padding-top:26px;padding-bottom:26px}

.outnow .badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:3.5px;text-transform:uppercase;font-weight:800;
  color:#08080c;background:var(--grad);
  padding:7px 15px;border-radius:999px;margin-bottom:14px;
  animation:outnow-pulse 1.8s ease-in-out infinite;
}
.outnow .badge .dot{
  width:8px;height:8px;border-radius:50%;background:#08080c;
  animation:outnow-dot 1.8s ease-in-out infinite;
}
@keyframes outnow-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(37,208,230,.55),0 0 18px 0 rgba(232,63,160,.35)}
  50%    {box-shadow:0 0 0 9px rgba(37,208,230,0),0 0 30px 4px rgba(232,63,160,.6)}
}
@keyframes outnow-dot{
  0%,100%{opacity:1}
  50%    {opacity:.25}
}

.outnow h2{
  font-size:clamp(24px,4.6vw,38px);font-weight:800;letter-spacing:-.5px;
  line-height:1.2;margin-bottom:6px;
}
.outnow .strap{color:var(--muted);font-size:15px;margin-bottom:20px;max-width:640px}

/* the three release cards */
.outnow .drops{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.outnow .drop{
  display:flex;flex-direction:column;gap:10px;
  background:rgba(8,8,12,.55);
  border:1px solid var(--line);border-radius:14px;padding:18px;
  transition:.18s;
}
.outnow .drop:hover{border-color:var(--cyan-ink);transform:translateY(-2px)}
.outnow .drop .t{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.outnow .drop .d{font-size:13px;color:var(--muted);flex:1}
.outnow .drop .btn,
.outnow .drop .btn-ghost{width:100%;text-align:center;white-space:nowrap}

.outnow .also{
  margin-top:18px;font-size:13px;color:var(--muted);
}
.outnow .also b{color:var(--ink)}

@media(max-width:620px){
  .outnow .wrap{padding-top:22px;padding-bottom:22px}
  .outnow .drops{grid-template-columns:1fr}
  .outnow .drop{padding:15px}
}

/* Anyone who has asked their device for less motion gets a static badge.
   Nothing else about the banner changes. */
@media(prefers-reduced-motion:reduce){
  .outnow .badge,
  .outnow .badge .dot{animation:none}
  .outnow .badge{box-shadow:0 0 18px 0 rgba(232,63,160,.45)}
  .outnow .drop{transition:none}
  .outnow .drop:hover{transform:none}
}

/* release rows: square release artwork, smartlink under each video */
.rtile{min-width:0}
.ctile .thumb.sq{aspect-ratio:1/1;height:auto}
.ctile .thumb.sq img{object-fit:contain;background:#0b0b10}
@media (max-width:640px){#october .crail{grid-auto-columns:minmax(64vw,1fr)}}
@media (orientation:landscape) and (max-height:500px){#october .crail{grid-auto-columns:clamp(150px,26vw,230px)}}
.smart{display:inline-block;margin:8px 1px 0;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--gold-ink);text-decoration:none;border-bottom:1px solid transparent}
.smart:hover,.smart:focus-visible{border-bottom-color:var(--gold-ink);outline:none}
.rel{min-width:0}
.rel .smart{margin-top:10px}
/* every tile square so the cover art is never cut, on any screen */
.pthumb{aspect-ratio:1/1}
@media (max-width:640px){.crail{grid-auto-columns:minmax(58vw,1fr)}}
@media (orientation:landscape) and (max-height:500px){.crail{grid-auto-columns:clamp(150px,26vw,230px)}}


/* =====================================================================
   REDESIGN 2026. Cinematic shell. Everything below consumes the tokens
   at the top of this file and deliberately wins over the older rules
   above it, which stay in place for compatibility.
   ===================================================================== */

/* ---------- base ---------- */
body{font-family:var(--font-body);font-size:16px;line-height:1.6}
h1,h2,h3{text-wrap:balance}
.display,.cine-hero h1,.sec-head h2,.rp-title,.post-hero h1,.chero h1,h2.sec{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;line-height:.95}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus)}
.skip{position:absolute;left:-999px;top:8px;z-index:500;background:var(--gold);color:#08080c;font-weight:800;padding:10px 16px;border-radius:var(--r-sm)}
.skip:focus{left:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{max-width:var(--w-content);margin:0 auto;padding:0 var(--gutter)}
.cwrap{max-width:var(--w-content)}
main{display:block}

/* ---------- buttons ---------- */
.btn,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--touch);
  background:var(--gold);color:#08080c;font-weight:800;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;
  border:0;border-radius:var(--r-md);padding:12px 26px;cursor:pointer;box-shadow:0 10px 30px rgba(233,185,73,.22);
  transition:transform .18s,filter .18s}
.btn:hover,.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);color:#08080c}
.btn-ghost,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--touch);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-md);padding:11px 22px;font-weight:700;font-size:14px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);background:rgba(8,8,12,.35)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.btn-play,.btn-info{min-height:var(--touch)}
.icon{width:18px;height:18px;flex:0 0 auto;fill:currentColor}

/* ---------- header ---------- */
header.nav{background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav .wrap{max-width:var(--w-content);padding:0 var(--gutter);height:64px}
.brandmark{font-size:15px;letter-spacing:2px;gap:12px}
.brandmark img{height:34px;width:34px}
.nav nav{gap:6px}
.nav nav a{color:var(--nav-ink);font-weight:600;font-size:14px;padding:10px 12px;border-radius:var(--r-sm);min-height:var(--touch);display:inline-flex;align-items:center}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink);background:var(--hover-wash)}
.nav nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}
.nav-toggle{display:none;margin-left:auto;width:48px;height:48px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--wash-weak);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:24px;height:24px}
@media(max-width:860px){
  .js .nav .wrap{flex-direction:row;height:60px;padding-top:0}
  .js .nav nav{display:none}
  .js .nav-toggle{display:inline-flex}
}
/* without JS the old swipeable link strip stays, so nothing is ever unreachable */

/* ---------- discovery drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;z-index:400;background:rgba(3,3,6,.7);opacity:0;visibility:hidden;transition:opacity .25s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:401;width:min(440px,100%);background:var(--drawer-bg);
  border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),visibility 0s .28s;overflow-y:auto;overscroll-behavior:contain}
.drawer.open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.drawer.open+.drawer-backdrop,.drawer-backdrop.on{opacity:1;visibility:visible}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px 20px;border-bottom:1px solid var(--line-soft)}
.drawer .dclose{width:48px;height:48px;border-radius:var(--r-md);border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.drawer .dclose svg{width:22px;height:22px}
.drawer nav{padding:8px 12px}
.dlink{display:flex;align-items:center;gap:16px;padding:14px 12px;border-radius:var(--r-md);color:var(--ink)}
.dlink:hover{background:var(--wash-weak);color:var(--ink)}
.dlink .di{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--hover-wash);flex:0 0 auto}
.dlink .di svg{width:22px;height:22px}
.dlink b{display:block;font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:.8px;line-height:1}
.dlink small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.dlink .chev{margin-left:auto;color:var(--muted)}
.dsec{padding:16px 20px;border-top:1px solid var(--line-soft)}
.dsec h3{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:12px}
.dfeat{position:relative;display:flex;align-items:center;gap:14px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-raised);border:1px solid var(--line);padding:12px;color:var(--ink);text-align:left;width:100%;cursor:pointer}
.dfeat img{width:92px;height:92px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.dfeat .k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-ink);font-weight:800}
.dfeat .t{font-family:var(--font-display);font-size:30px;line-height:1;margin:4px 0 2px}
.dfeat .s{font-size:13px;color:var(--muted)}
.dfeat .pbtn{margin-left:auto;width:48px;height:48px;border-radius:50%;border:2px solid var(--gold);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dfeat .pbtn svg{width:18px;height:18px;margin-left:3px}
.dmini{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dmini .dfeat{padding:8px;gap:10px}
.dmini .dfeat img{width:48px;height:48px}
.dmini .dfeat .t{font-size:20px}
.dsocial{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dsocial a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-weight:700;min-height:var(--touch)}
.dsocial a small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.dfoot{display:flex;flex-wrap:wrap;gap:4px 16px;padding:16px 20px 28px;border-top:1px solid var(--line-soft)}
.dfoot a{color:var(--muted);font-size:14px;padding:8px 0;min-height:var(--touch);display:inline-flex;align-items:center}
.no-scroll{overflow:hidden}

/* ---------- cinematic hero ---------- */
.cine-hero{position:relative;min-height:clamp(560px,82vh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.cine-hero .art{position:absolute;inset:0;z-index:-2}
.cine-hero .art img,.cine-hero .art video{width:100%;height:100%;object-fit:cover;object-position:var(--pos,70% 30%)}
.cine-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,var(--overlay-strong) 0%,rgba(6,6,10,.72) 30%,rgba(6,6,10,.08) 64%),
  linear-gradient(0deg,var(--bg) 0%,rgba(6,6,10,0) 42%)}
.cine-hero .inner{width:100%;max-width:var(--w-content);margin:0 auto;padding:0 var(--gutter) clamp(96px,11vw,140px)}
.cine-hero .film{font-size:11px;letter-spacing:6px;text-transform:uppercase;color:#cfcfda;margin-bottom:14px}
.cine-hero .label{display:inline-block;font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--cyan);font-weight:800;margin-bottom:6px}
.cine-hero h1{font-size:clamp(68px,11vw,164px);margin:0 0 8px;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.cine-hero h1 .red{color:var(--danger-red)}
.cine-hero h1 .small{font-size:.55em;vertical-align:.1em;margin:0 .08em}
.cine-hero .tagline{font-size:clamp(20px,2.4vw,32px);font-weight:300;letter-spacing:.3px;margin-bottom:26px;color:#ececf4}
.cine-hero .row{display:flex;flex-wrap:wrap;gap:12px}
.cine-hero .meta{margin-top:22px;font-size:11px;letter-spacing:5px;text-transform:uppercase;color:#bdbdca}
.nextdrop{position:absolute;right:var(--gutter);top:clamp(20px,4vw,40px);z-index:2;background:var(--glass);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 18px;text-align:center;min-width:220px}
.nextdrop .k{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
.nextdrop .d{font-family:var(--font-display);font-size:34px;color:var(--cyan-ink);line-height:1.05;margin:2px 0 6px}
.nextdrop .cd{display:flex;justify-content:center;gap:14px}
.nextdrop .cd div{min-width:34px}
.nextdrop .cd b{display:block;font-size:20px;font-weight:800}
.nextdrop .cd span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){
  .cine-hero{min-height:88svh}
  .cine-hero::before{background:linear-gradient(0deg,var(--bg) 6%,rgba(6,6,10,.72) 42%,rgba(6,6,10,.12) 72%)}
  .cine-hero .inner{padding-bottom:40px}
  .cine-hero .row .btn,.cine-hero .row .btn-ghost{flex:1 1 140px}
  .nextdrop{top:14px;left:var(--gutter);right:auto;min-width:0;padding:8px 14px;display:flex;align-items:center;gap:10px;border-radius:var(--r-pill);border-color:rgba(37,208,230,.5)}
  .nextdrop .d{font-size:18px;margin:0}
  .nextdrop .cd{display:none}
}
@media(orientation:landscape) and (max-height:500px){
  .cine-hero{min-height:100svh}
  .cine-hero h1{font-size:clamp(48px,9vw,90px)}
  .cine-hero .inner{padding-bottom:24px}
  .nextdrop .cd{display:none}
}

/* ---------- now playing bar (the entry to the player on the homepage) ---------- */
.nowbar{position:relative;z-index:3;max-width:var(--w-content);margin:-58px auto 0;padding:0 var(--gutter)}
.nowbar .in{display:flex;align-items:center;gap:16px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--shadow)}
.nowbar img{width:58px;height:58px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.nowbar .t b{display:block;font-size:16px}
.nowbar .t small{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.nowbar .acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.nowbar .round{width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);background:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.nowbar .round:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.nowbar .round svg{width:20px;height:20px;margin-left:3px}
.nowbar .len{font-size:13px;color:var(--muted);white-space:nowrap}
@media(max-width:560px){.nowbar{margin-top:-24px}.nowbar .len,.nowbar .smart{display:none}}

/* ---------- sections ---------- */
.band{padding:clamp(40px,6vw,80px) 0}
.band.tight{padding-top:clamp(28px,4vw,48px)}
.sec-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.sec-head h2{font-size:clamp(28px,3.2vw,40px);margin:0;white-space:nowrap}
.sec-head::after{content:"";flex:1;height:1px;background:var(--line);order:1}
.sec-head .all{order:2;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap;padding:10px 0;min-height:var(--touch);display:inline-flex;align-items:center;gap:6px}
.sec-head .all:hover{color:var(--gold-ink)}
.sec-sub{color:var(--muted);margin:-8px 0 18px;max-width:640px}
.eyebrow{letter-spacing:4px}

/* ---------- rails and tiles ---------- */
.crail{scroll-snap-type:x mandatory;scroll-padding-left:2px;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:40px}
.crow h2{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,2.6vw,34px);letter-spacing:.6px}
.ctile .thumb{border-radius:var(--r-md);border:1px solid var(--line-soft)}
.ctile:focus-visible{box-shadow:none}
.ctile:focus-visible .thumb{box-shadow:var(--focus)}
.ctile .play{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
.ctile .play span{position:absolute;right:10px;bottom:10px;width:42px;height:42px;font-size:15px}
.ctile:hover .play span,.ctile:focus-visible .play span{background:var(--gold)}
.ctile .tname{font-size:15px}
.ctile .tsub{font-size:12.5px}
.smart{display:inline-flex;align-items:center;min-height:36px;margin-top:6px;color:var(--gold-ink)}
/* wide film tiles for the homepage rail */
.ctile .thumb.wide{aspect-ratio:16/9}
.ctile .thumb .cap-in{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 16px 14px;background:linear-gradient(0deg,rgba(6,6,10,.92),rgba(6,6,10,0))}
.ctile .thumb .cap-in .k{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);font-weight:800}
.ctile .thumb .cap-in .t{font-family:var(--font-display);font-size:clamp(26px,2.6vw,40px);line-height:1;color:#fff}
.ctile .thumb .cap-in .w{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:800;margin-top:6px}
.crail.films{grid-auto-columns:clamp(250px,24vw,340px)}
.crail.films>.rtile:first-child{grid-column:span 2}
.crail.films>.rtile:first-child .cap-in .t{font-size:clamp(34px,4vw,60px)}
.crail.films .play span{display:none}
@media(max-width:760px){.crail.films{grid-auto-columns:minmax(78vw,1fr)}.crail.films>.rtile:first-child{grid-column:auto}}

/* ---------- listen / watch gateways ---------- */
.gateways{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gate{position:relative;display:flex;align-items:center;gap:18px;min-height:120px;padding:24px 26px;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line);color:var(--ink);isolation:isolate}
.gate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.gate::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,12,.94) 20%,rgba(8,8,12,.4))}
.gate:hover img{transform:scale(1.05)}
.gate:hover{color:var(--ink);border-color:rgba(255,255,255,.25)}
.gate .gi{width:52px;height:52px;flex:0 0 auto}
.gate.listen .gi{color:var(--cyan-ink)} .gate.watch .gi{color:var(--magenta-ink)}
.gate b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(40px,4.6vw,60px);line-height:.95}
.gate small{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--ink-soft)}
.gate .go{margin-left:auto;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
@media(max-width:700px){.gateways{grid-template-columns:1fr}}

/* ---------- stories (editorial) ---------- */
.stories{gap:16px}
.stories.editorial{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px}
.stories.editorial .tile{height:auto}
.stories.editorial .tile:first-child{grid-column:span 2;grid-row:span 2}
.stories.editorial .tile:first-child h3{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,4vw,62px);line-height:.95}
.stories.editorial .tile:nth-child(2){grid-column:span 2}
@media(max-width:900px){.stories.editorial{grid-template-columns:1fr 1fr;grid-auto-rows:200px}}
@media(max-width:560px){.stories.editorial{grid-template-columns:1fr;grid-auto-rows:240px}.stories.editorial .tile:first-child,.stories.editorial .tile:nth-child(2){grid-column:auto;grid-row:auto}}
.tile{border-radius:var(--r-lg)}
.tile h3{font-size:22px}
.tile:focus-visible{box-shadow:var(--focus)}

/* ---------- early access ---------- */
.ea{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(233,185,73,.35);isolation:isolate;
  padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;
  background:radial-gradient(600px 260px at 10% 0%,rgba(233,185,73,.16),transparent 60%),radial-gradient(600px 260px at 90% 100%,rgba(232,63,160,.14),transparent 60%),var(--surface)}
.ea h2{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,5vw,68px);line-height:.95;margin-bottom:10px}
.ea h2 .g{color:var(--gold-ink)}
.ea p.lead{color:var(--ink-soft);max-width:460px}
.ea ul.perks2{list-style:none;display:grid;gap:10px;margin-top:18px}
.ea ul.perks2 li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:15px}
.ea ul.perks2 li b{color:var(--ink)}
.ea ul.perks2 .tick{color:var(--gold-ink);font-weight:800}
.ea form.sub-form{margin:0;max-width:none}
.ea form.sub-form input[type=email]{min-height:52px}
.ea form.sub-form .btn{min-height:52px}
.ea .msg{text-align:left}
.ea .fine{text-align:left}
@media(max-width:820px){.ea{grid-template-columns:1fr}}
.msg[data-state="loading"]{color:var(--muted)}

/* ---------- follow ---------- */
.follow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.follow a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-weight:700;min-height:56px}
.follow a small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.follow a:hover{border-color:var(--gold-ink);color:var(--ink)}

/* ---------- footer ---------- */
footer.site{background:var(--footer-bg);text-align:left;padding:40px var(--gutter) 110px;border-top:1px solid var(--line-soft)}
footer.site .fin{max-width:var(--w-content);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:start}
footer.site .fbrand{justify-content:flex-start;margin-bottom:10px}
footer.site .flinks{justify-content:flex-start;gap:6px 18px}
footer.site .flinks a{padding:8px 0;min-height:var(--touch);display:inline-flex;align-items:center}
footer.site .fmail a{color:var(--ink);font-weight:700}
footer.site .fcopy{max-width:var(--w-content);margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line-soft);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fcopy-ink)}
@media(max-width:760px){footer.site .fin{grid-template-columns:1fr}}

/* ---------- player: full screen and mini dock (one player, two states) ---------- */
.vmodal .vtools{display:flex;gap:10px;align-items:center}
.vmin{background:rgba(255,255,255,.12);border:1px solid #3a3a48;color:var(--ink);border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer;font-size:13.5px;min-height:var(--touch)}
.vmin:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.vclose{min-height:var(--touch)}
.vdock{display:none}
.vmodal.mini{inset:auto 12px 12px 12px;height:auto;padding:10px 12px;background:rgba(16,16,24,.96);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-start}
.vmodal.mini .vnav,.vmodal.mini .cap{display:none}
.vmodal.mini .box{flex-direction:row;align-items:center;gap:14px;width:100%}
.vmodal.mini video{width:96px;height:54px;max-width:none;border-radius:8px;box-shadow:none;object-fit:cover;flex:0 0 auto}
.vmodal.mini .vdock{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.vdock .dt{min-width:0;flex:0 1 220px}
.vdock .dt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vdock .dt small{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.vdock .dctl{display:flex;align-items:center;gap:6px}
.vdock button{width:var(--touch);height:var(--touch);border-radius:50%;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.vdock button:hover{color:var(--gold-ink)}
.vdock button.pp{border-color:var(--ink)}
.vdock svg{width:18px;height:18px}
.vdock .prog{flex:1;display:flex;align-items:center;gap:10px;min-width:80px;font-size:12px;color:var(--muted)}
.vdock input[type=range]{flex:1;accent-color:var(--cyan-ink);height:28px;min-width:60px}
@media(max-width:700px){
  .vmodal.mini{inset:auto 8px 8px 8px;padding:8px}
  .vmodal.mini video{width:64px;height:40px}
  .vdock .prog,.vdock .vol,.vdock .prev{display:none}
  .vdock .dt{flex:1}
}
body.has-dock footer.site{padding-bottom:120px}

/* ---------- release pages ---------- */
.rp-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(40px,7vw,90px) 0 clamp(28px,4vw,48px)}
.rp-hero .art{position:absolute;inset:0;z-index:-2}
.rp-hero .art img{width:100%;height:100%;object-fit:cover;filter:blur(28px) saturate(1.1);transform:scale(1.2);opacity:.45}
.rp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg),rgba(8,8,12,.55))}
.rp-grid{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(20px,4vw,48px);align-items:end}
.rp-cover{width:100%;aspect-ratio:1;border-radius:var(--r-lg);object-fit:cover;box-shadow:var(--shadow)}
.rp-kicker{color:var(--gold-ink);font-weight:800;letter-spacing:2.5px;font-size:12px;text-transform:uppercase;margin-bottom:8px}
.rp-title{font-size:clamp(56px,8vw,112px);margin-bottom:12px}
.rp-lede{color:var(--ink-soft);max-width:620px;margin-bottom:22px;font-size:17px}
.rp-actions{display:flex;flex-wrap:wrap;gap:12px}
.release-page{padding-top:clamp(20px,3vw,40px);padding-bottom:40px}
.rp-panel{max-width:var(--w-read);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);margin-bottom:18px}
.rp-panel h2{font-family:var(--font-display);font-weight:400;font-size:30px;letter-spacing:.5px;margin-bottom:10px}
.rp-panel p{color:var(--ink-soft)}
.rp-watch{margin:10px 0 30px}
.rp-watch .crail{grid-auto-columns:clamp(220px,26vw,320px);mask-image:none;-webkit-mask-image:none}
@media(max-width:720px){.rp-grid{grid-template-columns:1fr}.rp-cover{max-width:280px}}

/* ---------- stories index and posts ---------- */
.post-hero{height:clamp(320px,52vw,560px);border-bottom:0}
.post-hero h1{font-size:clamp(52px,8vw,110px);line-height:.95}
.post-hero .cap{max-width:var(--w-read)}
article.post{max-width:var(--w-read)}
article.post p{font-size:18px;line-height:1.75;color:var(--ink-body)}
article.post h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3vw,38px);letter-spacing:.5px;margin-top:40px}
article.post blockquote{font-size:22px;font-style:normal;font-weight:600}
.post-cta{background:var(--surface);border-color:rgba(233,185,73,.35);text-align:left}
.post-cta .btn,.post-cta .btn-ghost{margin:6px 8px 0 0}

/* ---------- projects (editorial) ---------- */
.pgrid{grid-template-columns:repeat(3,1fr)}
.pgrid .pcard:first-child{grid-column:span 2;display:grid;grid-template-columns:1.1fr 1fr}
.pgrid .pcard:first-child .pmeta{display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,3vw,40px)}
.pgrid .pcard:first-child h2{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,4vw,64px);line-height:.95}
.pcard{border-radius:var(--r-lg)}
.pcard:focus-visible{box-shadow:var(--focus)}
.pmeta h2{font-size:clamp(20px,1.7vw,24px)}
@media(max-width:980px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}.pgrid .pcard:first-child{grid-column:auto;display:flex}}

/* ---------- private delivery, pitch and test pages (unlisted) ---------- */
.private-note{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ctile:hover,.ctile:focus-visible,.pcard:hover,.gate:hover img,.tile:hover img{transform:none}
}
/* documented !important: the reduced motion override has to beat every component transition above */

/* ---------- no horizontal page overflow, only rails scroll ---------- */
html,body{max-width:100%;overflow-x:clip}
/* release rail on single pages */
.rp-rail{margin:10px 0 30px;mask-image:none;-webkit-mask-image:none;grid-auto-columns:clamp(220px,26vw,320px)}
.release-page .ea{margin-top:10px}
/* buttons never break their label across lines */
.btn,.btn-primary,.btn-ghost,.btn-outline,.btn-play,.btn-info{white-space:nowrap}
@media(max-width:380px){.cine-hero .row .btn,.cine-hero .row .btn-ghost{padding-left:16px;padding-right:16px;letter-spacing:1px}}
/* buttons and drawer cards that are also player triggers keep their own hover, not the tile zoom */
.btn.ctile:hover,.btn-play.ctile:hover{transform:translateY(-1px)}
.dfeat.ctile:hover,.dfeat.ctile:focus-visible,.round.ctile:hover{transform:none}
.dfeat.ctile:focus-visible{box-shadow:var(--focus)}

/* ================= LIGHT MODE =================================
   The site is dark by design and stays that way unless the visitor asks
   otherwise. Light mode exists for people who need it, so it is a warm
   paper tone rather than stark white - album art and video thumbnails are
   all dark and moody, and they sit badly on pure #fff.

   Order matters:
     1. prefers-color-scheme supplies the default, in CSS, so there is no
        flash of the wrong theme before JavaScript runs.
     2. [data-theme] overrides it when the visitor has explicitly chosen.
   ============================================================== */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f6f5f1; --surface:#ffffff; --surface-raised:#ffffff; --line:#e3e1da;
    --ink:#14141b; --muted:#5b5b6a;
    --overlay-strong:rgba(255,255,255,.94); --overlay-mid:rgba(255,255,255,.72); --overlay-soft:rgba(255,255,255,.35);
    --line-soft:rgba(0,0,0,.10); --glass:rgba(255,255,255,.86);
    --shadow:0 14px 40px rgba(20,20,30,.14); --shadow-card:0 10px 26px rgba(20,20,30,.12);
    /* the brand cyan is 1.9:1 on white, so links get a darker teal that
       clears AA. The gradient keeps the bright cyan: it sits on colour,
       not on paper. */
    --link:#0b6f7d; --link-hover:#b02878;
    --on-bright:#08080c; --chip:#f0efe9; --play-bg:#14141b; --play-ink:#ffffff;
    --nav-bg:rgba(246,245,241,.88); --nav-ink:#4a4a58; --drawer-bg:#ffffff; --footer-bg:#edece6;
    --field-bg:#ffffff; --field-line:#d4d2c9;
    --ink-body:#2a2a33; --ink-strong:#0d0d14; --ink-soft:#44444f; --ink-quiet:#3c3c46; --hover-wash:rgba(0,0,0,.05);
    --wash-weak:rgba(0,0,0,.04); --fcopy-ink:#6a6a77; --notice-ink:#20323c;
    --cyan-ink:#0a6b7a; --gold-ink:#7d5705; --magenta-ink:#b02878;
    --grad-ink:linear-gradient(90deg,#0a6b7a,#b02878);
    --info-bg:rgba(20,20,27,.80); --info-bg-hover:rgba(20,20,27,.92); --info-ink:#ffffff;
  }
}
:root[data-theme="light"]{
  --bg:#f6f5f1; --surface:#ffffff; --surface-raised:#ffffff; --line:#e3e1da;
  --ink:#14141b; --muted:#5b5b6a;
  --overlay-strong:rgba(255,255,255,.94); --overlay-mid:rgba(255,255,255,.72); --overlay-soft:rgba(255,255,255,.35);
  --line-soft:rgba(0,0,0,.10); --glass:rgba(255,255,255,.86);
  --shadow:0 14px 40px rgba(20,20,30,.14); --shadow-card:0 10px 26px rgba(20,20,30,.12);
  --link:#0b6f7d; --link-hover:#b02878;
  --on-bright:#08080c; --chip:#f0efe9; --play-bg:#14141b; --play-ink:#ffffff;
    --nav-bg:rgba(246,245,241,.88); --nav-ink:#4a4a58; --drawer-bg:#ffffff; --footer-bg:#edece6;
    --field-bg:#ffffff; --field-line:#d4d2c9;
    --ink-body:#2a2a33; --ink-strong:#0d0d14; --ink-soft:#44444f; --ink-quiet:#3c3c46; --hover-wash:rgba(0,0,0,.05);
    --wash-weak:rgba(0,0,0,.04); --fcopy-ink:#6a6a77; --notice-ink:#20323c;
    --cyan-ink:#0a6b7a; --gold-ink:#7d5705; --magenta-ink:#b02878;
    --grad-ink:linear-gradient(90deg,#0a6b7a,#b02878);
    --info-bg:rgba(20,20,27,.80); --info-bg-hover:rgba(20,20,27,.92); --info-ink:#ffffff;
}
/* dark defaults for the tokens light mode introduces */
:root{ --link:var(--cyan); --link-hover:var(--magenta);
  --on-bright:#08080c; --chip:var(--surface-raised); --play-bg:#ffffff; --play-ink:#08080c;
  --nav-bg:rgba(8,8,12,.86); --nav-ink:#c9c9d6; --drawer-bg:#0b0b11; --footer-bg:#07070b;
  --field-bg:#0a0a10; --field-line:#2b2b39;
  --ink-body:#e4e4ec; --ink-strong:#ffffff; --ink-soft:#d6d6e0; --ink-quiet:#cdcdd8; --hover-wash:rgba(255,255,255,.05);
  --wash-weak:rgba(255,255,255,.04); --fcopy-ink:#7c7c8c; --notice-ink:#ddffee;
  --cyan-ink:var(--cyan); --gold-ink:var(--gold); --magenta-ink:var(--magenta);
  --grad-ink:var(--grad);
  --info-bg:rgba(120,120,140,.42); --info-bg-hover:rgba(140,140,160,.55); --info-ink:#ffffff; }

a{color:var(--link)}
a:hover{color:var(--link-hover)}
.btn-play{background:var(--play-bg);color:var(--play-ink)}
.btn-play:hover{background:var(--play-bg);color:var(--play-ink);filter:brightness(1.12)}

/* the theme toggle, injected into the header by site.js */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:var(--touch);height:var(--touch);margin-left:auto;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink);cursor:pointer;transition:.18s;flex:0 0 auto}
.theme-toggle:hover{border-color:var(--link);color:var(--link)}
.theme-toggle:focus-visible{outline:0;box-shadow:var(--focus)}
.theme-toggle svg{width:19px;height:19px;display:block}
.theme-toggle .ico-sun{display:none}
:root[data-theme="light"] .theme-toggle .ico-sun{display:block}
:root[data-theme="light"] .theme-toggle .ico-moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .ico-sun{display:block}
  :root:not([data-theme="dark"]) .theme-toggle .ico-moon{display:none}
}
.theme-toggle+.nav-toggle{margin-left:8px}

/* ---------- permanently dark islands ----------------------------
   These containers lay artwork, or their own dark veil, UNDER their text.
   They look the same in both themes, so the text on them must keep the
   dark-theme ink whatever the page around them is doing. Custom properties
   inherit, so re-declaring them on the container re-points every descendant
   in one place rather than per rule.

   Found by walking every page for containers that layer absolutely
   positioned artwork or a dark gradient beneath their own text, which is
   how .chero was missed the first time: its artwork is a sibling <div>
   with a CSS background-image, not an <img>.
   ---------------------------------------------------------------- */
.cine-hero, .chero, .rp-hero, .hero, .vmodal,
.ctile .thumb, .tile, .pthumb, .gate{
  --ink:#f4f4f8; --muted:#a3a3b4;
  --ink-body:#e4e4ec; --ink-strong:#ffffff; --ink-soft:#d6d6e0;
  --cyan-ink:var(--cyan); --gold-ink:var(--gold); --magenta-ink:var(--magenta);
  --grad-ink:var(--grad);
  --link:var(--cyan); --link-hover:var(--magenta);
  --hover-wash:rgba(255,255,255,.05);
  /* colour is INHERITED, so body's already-resolved value would win over a
     token redeclared here. Re-declaring colour on the island itself is what
     actually re-points the text; the tokens above only take effect where a
     rule resolves them. */
  color:var(--ink);
}