/* ============================================================
   FIVE RIVER FLOW — multi-tone pitch deck
   POSTER palette, broadened: red kept, joined by forest / ocean
   / teal / dusk / amber. Per-section + per-photo colour grade.
   graphichunters scroll mechanics · micro-interactions throughout
   ============================================================ */

:root{
  --ink:#0a0807;          /* near-black */
  --ink-2:#060504;
  --bone:#ece7df;         /* off-white text on dark */
  --bone-dim:#9c968d;
  --paper:#e8e2d7;        /* off-white page ground */
  --red:#9a2440;          /* burgundy — the single accent */
  --g-red:#6e1a30;        /* burgundy photo grade */
  --cyan:var(--red);      /* accent token (kept name; overridden per theme) */

  --disp:"OwnersWide", "Archivo", system-ui, sans-serif;   /* section/episode headings = Owners Wide Bold */
  --mark:"Owners", "Archivo", system-ui, sans-serif;       /* main + last 5RF = Owners XXWide Black */
  --body:"Inter", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;

  --ease:cubic-bezier(0.425, 0, 0, 1);
  --d:.8s; --df:.42s;

  --pad:clamp(1.1rem, 4vw, 3.4rem);
  --line:rgba(242,231,227,.16);
  --maxw:1640px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
html,body{ width:100%; overflow-x:clip; }
/* protect the work: no text selection, no image drag/long-press save (deterrent) */
html{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
input,textarea,[contenteditable]{ -webkit-user-select:text; user-select:text; }
img,svg,video{ -webkit-user-drag:none; }
body{
  background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:16px; line-height:1.45; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overscroll-behavior:none;
}
body.no-scroll{ overflow:hidden; height:100vh; }
::selection{ background:var(--cyan); color:var(--ink); }
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ol,ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
body::-webkit-scrollbar,html::-webkit-scrollbar{ width:0; display:none; }

/* ---- three themes: red overlay · black & white · off-white ---- */
[data-ground]{ --tinton:0; --cyan:var(--red); background:var(--ink); color:var(--bone); }
[data-ground="bw"]{ --tinton:0; --cyan:var(--red); background:var(--ink); }
[data-ground="ink"]{ --tinton:0; --cyan:var(--red); background:var(--ink); }
[data-ground="red"]{ --tinton:1; --cyan:var(--bone); }
[data-ground="offwhite"]{ --tinton:0; --cyan:var(--red); background:var(--paper); color:var(--ink); }
/* coloured radial only for the red theme on non-photo sections */
section[data-ground="red"]:not(.epp):not(.statement):not(.keyart):not(.cover),
.marquee[data-ground="red"]{ background:radial-gradient(140% 130% at 50% 22%, #2c0c18, var(--ink) 74%); }

/* off-white (light) section overrides */
[data-ground="offwhite"]{ --line:rgba(10,8,7,.16); --bone-dim:#6f6960; }
[data-ground="offwhite"] b{ color:var(--ink); }
[data-ground="offwhite"] .tonecard,[data-ground="offwhite"] .pcard,[data-ground="offwhite"] .cstat{ background:var(--paper); }
[data-ground="offwhite"] .tonecard:hover,[data-ground="offwhite"] .pcard:hover,[data-ground="offwhite"] .cstat:hover{ background:#ded6c8; }
[data-ground="offwhite"] .budget__big .cstat__n{ color:var(--ink); }

.section{ padding:clamp(5.5rem,13vh,12rem) var(--pad); position:relative; z-index:1; }
.wrap{ max-width:var(--maxw); margin-inline:auto; }

/* type helpers */
.label,.eyebrow{ font-family:var(--mono); font-size:clamp(.62rem,.76vw,.76rem); letter-spacing:.16em; text-transform:uppercase; font-weight:400; }
.eyebrow{ display:inline-flex; align-items:center; gap:.6em; }
.eyebrow .tick{ width:.5em; height:.5em; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:tickPulse 2.4s var(--ease) infinite; }
@keyframes tickPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.6; } }
.label .num{ color:var(--cyan); margin-right:.6em; }
.witness{ color:var(--cyan); letter-spacing:.22em; }
em{ font-style:normal; color:var(--cyan); }
.cyan{ color:var(--cyan); }
b{ font-weight:700; color:var(--bone); }

/* wide 5RF mark */
.mark5rf{ font-family:var(--mark); font-weight:900; text-transform:uppercase; letter-spacing:-.085em; line-height:.8; }
[data-pop]{ animation:pop 6.5s ease-in-out infinite; }
@keyframes pop{ 0%,100%{ opacity:.22; } 50%{ opacity:1; } }

/* ============================================================
   GRAIN + PHOTO DUOTONE (per-grade)
   ============================================================ */
.grain{ position:fixed; inset:0; z-index:7000; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.shot{ position:absolute; inset:0; overflow:hidden; background:var(--ink); isolation:isolate; }
.shot img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.03) brightness(.94) saturate(1.02); transition:transform 1.1s var(--ease), filter .6s var(--ease); }
/* photos stay in colour — no tint overlay */
.shot::after{ display:none; }
/* edge-blur focus — JS inserts a blurred clone (.shot__blur) behind a radial-masked sharp img */
.shot .shot__blur{ position:absolute; inset:-6%; width:112%; height:112%; filter:contrast(1.03) brightness(.88) blur(20px); z-index:0; transition:none; }
.shot .shot__sharp{ position:relative; z-index:1;
  -webkit-mask:radial-gradient(125% 108% at 50% 46%, #000 24%, transparent 82%);
          mask:radial-gradient(125% 108% at 50% 46%, #000 24%, transparent 82%); }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; mix-blend-mode:difference; transform:translate3d(-50%,-50%,0); will-change:transform; }
.cursor__dot{ display:block; width:11px; height:11px; border-radius:50%; background:#fff; transition:width .35s var(--ease), height .35s var(--ease); }
.cursor__label{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; white-space:nowrap; opacity:0; transition:opacity .25s var(--ease); }
.cursor.is-link .cursor__dot{ width:60px; height:60px; }
.cursor.is-link .cursor__label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ============================================================
   LOADER — instruments only
   ============================================================ */
.loader{ position:fixed; inset:0; z-index:8000; background:radial-gradient(120% 120% at 50% 45%, #2a0a16 0%, #150810 55%, #0a0807 100%); color:var(--bone); display:flex; flex-direction:column; padding:var(--pad); transition:transform 1s var(--ease); }
.loader.is-gone{ transform:translateY(-101%); pointer-events:none; }
html.skip-intro .loader{ display:none; }
.loader__top,.loader__bottom{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.loader__stage{ flex:1; display:flex; align-items:center; justify-content:center; }
.loader__inst{ display:flex; gap:clamp(1.6rem,5vw,4rem); align-items:flex-end; height:clamp(90px,18vh,180px); }
.loader__inst figure{ height:100%; opacity:0; transform:translateY(14px); animation:instIn .8s var(--ease) forwards; }
.loader__inst figure:nth-child(1){ animation-delay:.1s; } .loader__inst figure:nth-child(2){ animation-delay:.3s; }
.loader__inst figure:nth-child(3){ animation-delay:.5s; } .loader__inst figure:nth-child(4){ animation-delay:.7s; }
@keyframes instIn{ to{ opacity:1; transform:none; } }
.inst{ height:100%; width:auto; overflow:visible; }
.inst line,.inst circle,.inst path,.inst rect,.inst ellipse{ fill:none; stroke:var(--bone); stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; }
.loader.draw .inst line,.loader.draw .inst circle,.loader.draw .inst path,.loader.draw .inst rect,.loader.draw .inst ellipse{ animation:drawStroke 1.5s var(--ease) forwards; }
.loader__inst figure:nth-child(4) .inst *{ stroke:var(--cyan); }
@keyframes drawStroke{ to{ stroke-dashoffset:0; } }
.loader__cue{ display:inline-flex; gap:.5em; opacity:0; transition:opacity .6s ease; }
.loader.can-enter .loader__cue{ opacity:.85; }
.loader__cue i{ animation:nudge 1.6s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(.3em); } }

/* ============================================================
   HEADER / PROGRESS / MENU
   ============================================================ */
.header{ position:fixed; top:0; left:0; right:0; z-index:600; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.15rem var(--pad); color:var(--bone); transition:color .5s var(--ease); }
body[data-headtheme="light"] .header{ color:var(--ink); }
.header__brand{ display:inline-flex; align-items:baseline; gap:.6rem; }
.header__mark{ font-family:var(--disp); font-weight:900; font-size:1.05rem; letter-spacing:-.02em; color:var(--cyan); transition:letter-spacing .4s var(--ease); }
.header__brand:hover .header__mark{ letter-spacing:.06em; }
.header__name{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.header__meta{ justify-self:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; font-variant-numeric:tabular-nums; }
.header__right{ justify-self:end; display:flex; align-items:center; gap:clamp(1rem,1.6vw,1.5rem); }
.header__nav{ display:flex; align-items:center; gap:1.5rem; font-size:.84rem; }
/* sound toggle — equalizer bars animate while playing, flat when off */
.snd{ display:inline-flex; align-items:flex-end; justify-content:center; width:22px; height:15px; cursor:pointer; color:currentColor; opacity:.85; transition:opacity .3s var(--ease); }
.snd:hover{ opacity:1; }
.snd__bars{ display:flex; align-items:flex-end; gap:2px; width:100%; height:100%; }
.snd__bars i{ flex:1; height:100%; background:currentColor; transform-origin:bottom; transform:scaleY(.28); }
.snd.is-on .snd__bars i{ animation:eq .9s ease-in-out infinite; }
.snd.is-on .snd__bars i:nth-child(1){ animation-delay:-.20s; }
.snd.is-on .snd__bars i:nth-child(2){ animation-delay:-.55s; }
.snd.is-on .snd__bars i:nth-child(3){ animation-delay:-.10s; }
.snd.is-on .snd__bars i:nth-child(4){ animation-delay:-.70s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.22); } 50%{ transform:scaleY(1); } }
.header__nav a{ position:relative; }
.header__nav a:not(.header__cta)::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--cyan); transform:scaleX(0); transform-origin:right; transition:transform var(--df) var(--ease); }
.header__nav a:not(.header__cta):hover::after{ transform:scaleX(1); transform-origin:left; }
.header__nav a:not(.header__cta):hover{ color:var(--cyan); }
.header__cta{ border:1px solid currentColor; border-radius:2em; padding:.5em 1.1em; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; transition:background-color var(--df) var(--ease), color var(--df) var(--ease), border-color var(--df); will-change:transform; }
.header__cta:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--ink); }
.header__burger{ display:none; justify-self:end; width:34px; height:24px; position:relative; }
.header__burger i{ position:absolute; left:0; width:100%; height:2px; background:currentColor; transition:transform .4s var(--ease); }
.header__burger i:nth-child(1){ top:5px; } .header__burger i:nth-child(2){ bottom:5px; }
body.menu-open .header__burger i:nth-child(1){ top:11px; transform:rotate(45deg); }
body.menu-open .header__burger i:nth-child(2){ bottom:11px; transform:rotate(-45deg); }

.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:650; }
.progress span{ display:block; height:100%; width:0; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }

.menu{ position:fixed; inset:0; z-index:580; background:radial-gradient(120% 120% at 50% 50%, #2a0a16, #0a0807 70%); color:var(--bone); display:flex; flex-direction:column; justify-content:center; padding:var(--pad); clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease); pointer-events:none; }
body.menu-open .menu{ clip-path:inset(0 0 0% 0); pointer-events:auto; }
.menu__list{ display:flex; flex-direction:column; gap:.2rem; }
.menu__list a{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.7rem,7vw,5rem); line-height:1.04; position:relative; width:max-content; transition:color .4s var(--ease), padding-left .4s var(--ease); }
.menu__list a::before{ content:attr(data-i); font-family:var(--mono); font-size:.8rem; vertical-align:super; margin-right:.6em; color:var(--cyan); }
.menu__list a:hover{ color:var(--cyan); padding-left:.4em; }
.menu__foot{ position:absolute; bottom:var(--pad); left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }

/* ============================================================
   REVEAL + stagger
   ============================================================ */
.line{ display:inline-block; overflow:hidden; vertical-align:top; }
.line__in{ display:inline-block; }
html.fx [data-lines] .line__in{ transform:translateY(110%); transition:transform 1s var(--ease); }
html.fx [data-lines].in .line__in{ transform:none; transition-delay:calc(var(--li,0) * .07s); }
html.fx [data-rise]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
html.fx [data-rise].in,html.fx .in [data-rise]{ opacity:1; transform:none; transition-delay:calc(var(--ri,0) * .06s); }

/* ============================================================
   1 · COVER — central pulsing 5RF
   ============================================================ */
.cover{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(3.4rem,8vh,5.6rem) var(--pad) clamp(1.6rem,4vh,3rem); overflow:hidden; }
.cover > :not(.cover__bg):not(.cover__grad):not(.cover__fg):not(.cover__logline){ position:relative; }
.cover__bg{ z-index:0; }
.cover__fg{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.cover__fg img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.03) brightness(.94) saturate(1.02); }
.cover__grad{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,5,6,.5) 0%,rgba(10,5,6,.08) 42%,rgba(10,5,6,.82) 100%); }
.cover__fg{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.cover__fg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.12) brightness(.82); }
.cover__top{ display:flex; justify-content:space-between; align-items:center; z-index:4; }
.eyebrow--r{ opacity:.6; }
.cover__mid{ flex:1; display:flex; align-items:center; justify-content:center; z-index:2; will-change:transform; }
.cover .mark5rf{ font-size:clamp(4.5rem,22vw,20rem); line-height:.7; color:#070605; text-align:center; }
.cover__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; flex-wrap:wrap; z-index:4; }
.cover__logline{ max-width:40ch; font-family:var(--disp); font-weight:500; font-size:clamp(1rem,1.7vw,1.45rem); line-height:1.3; }
.cover__meta{ display:flex; flex-direction:column; gap:.5rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; opacity:.85; text-align:right; }
.cover__meta b{ color:var(--cyan); font-weight:400; margin-right:.6em; }
.scrollcue{ position:absolute; left:50%; bottom:clamp(1.4rem,4vh,2.6rem); transform:translateX(-50%); z-index:4; display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; will-change:transform; }
.scrollcue i{ animation:nudge 1.8s var(--ease) infinite; font-size:1rem; }

/* ============================================================
   KEY-ART STICKY SCALE
   ============================================================ */
.keyart{ position:relative; height:240vh; background:var(--ink); }
.keyart__pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.keyart__frame{ position:relative; width:40vw; aspect-ratio:16/10; max-height:78vh; inset:auto; border-radius:12px; overflow:hidden; will-change:transform; box-shadow:0 40px 120px rgba(0,0,0,.6); }
.keyart__head{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,8vw,7rem); line-height:.86; letter-spacing:-.02em; color:#fff; mix-blend-mode:exclusion; z-index:4; transition:opacity .5s; }
.keyart__head span{ display:block; }

/* ============================================================
   2 · SYNOPSIS
   ============================================================ */
.synopsis .label{ display:block; margin-bottom:clamp(1.4rem,3vh,2.4rem); }
.synopsis__lead{ font-family:var(--disp); font-weight:600; letter-spacing:-.02em; line-height:1.08; font-size:clamp(1.7rem,4.4vw,4rem); max-width:22ch; margin-bottom:clamp(2.4rem,5vh,4rem); }
.synopsis__lead .lk{ color:var(--ink); font-weight:800; }                 /* prominent phrases — full from the start */
.synopsis__lead .rw{ color:var(--ink); opacity:.14; }                     /* connective words — dim until scrolled in (JS scrub) */
@media (prefers-reduced-motion: reduce){ .synopsis__lead .rw{ opacity:1; } }
.synopsis__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); }
.synopsis__cols p{ font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.65; opacity:.9; transition:opacity .4s var(--ease); }
.synopsis__cols:hover p{ opacity:.6; }
.synopsis__cols p:hover{ opacity:1; }
.synopsis__cols i{ font-style:italic; }
.whynow{ margin-top:clamp(2.4rem,5vh,4rem); border-top:1px solid var(--line); padding-top:clamp(1.6rem,3vh,2.4rem); display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:start; position:relative; }
.whynow::before{ content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--cyan); transition:width 1.1s var(--ease) .2s; }
.whynow.in::before,.section.in .whynow::before{ width:38%; }
.whynow p{ max-width:60ch; font-size:1.05rem; line-height:1.6; }

/* scale: how big Panjabi music has become */
.scale .label{ display:block; margin-bottom:clamp(1.4rem,3vh,2.4rem); }
.scale__lead{ font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.04; font-size:clamp(1.7rem,4.6vw,3.9rem); max-width:20ch; margin:0 auto clamp(1.1rem,2.6vh,1.9rem); }
.scale__sub{ max-width:62ch; margin:0 auto clamp(2.4rem,5vh,4rem); font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6; opacity:.9; }
.scale__hero{ position:relative; max-width:1000px; margin:0 auto clamp(2.4rem,5vh,4rem); aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.scale__hero img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.scale__hero figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; text-align:left; color:var(--bone); padding:2em 1.3em .8em; background:linear-gradient(transparent,rgba(10,5,6,.85)); }
.scale__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.9rem); }
.sstat{ border-top:2px solid var(--cyan); padding-top:1.05rem; text-align:left; }
.sstat__n{ display:block; font-family:var(--mark); font-weight:900; letter-spacing:-.03em; line-height:.9; font-size:clamp(2.6rem,5vw,4.6rem); }
.sstat figcaption{ margin-top:.7rem; font-size:clamp(.84rem,1vw,.98rem); line-height:1.42; opacity:.84; max-width:26ch; }
.scale__band{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:clamp(2.4rem,5vh,4rem); border-top:1px solid var(--line); padding-top:1.4rem; }
.scale__band li{ text-align:left; }
.scale__band b{ display:block; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.1rem,1.9vw,1.7rem); }
.scale__band span{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; opacity:.55; }
@media (max-width:860px){ .scale__grid,.scale__band{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .scale__grid{ grid-template-columns:1fr; } }

/* world clocks in the header */
.header__meta{ display:flex; gap:clamp(.55rem,1.3vw,1.3rem); align-items:center; }
.wclock{ display:inline-flex; align-items:baseline; gap:.42em; white-space:nowrap; font-size:.66rem; }
.wclock i{ font-style:normal; opacity:.5; letter-spacing:.12em; }
.wclock b{ font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
@media (max-width:1080px){ .header__meta .wclock:nth-child(n+3){ display:none; } }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{ position:relative; min-height:96svh; display:flex; align-items:center; padding:var(--pad); overflow:hidden; background:var(--ink); }
.statement__bg{ inset:-8%; width:116%; height:116%; }
.statement__bg::before{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(10,8,7,.48),rgba(10,8,7,.8)); }
.statement .wrap{ position:relative; max-width:1400px; }
.statement__t{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.02; font-size:clamp(2rem,6vw,6rem); max-width:18ch; color:#fff; mix-blend-mode:exclusion; }

/* ============================================================
   3 · TONE
   ============================================================ */
.tone .label{ display:block; margin-bottom:clamp(1.4rem,3vh,2.4rem); }
.tone__xy{ font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1; font-size:clamp(1.9rem,5.5vw,5rem); }
.tone__sub{ max-width:54ch; margin:1.4rem 0 clamp(2.4rem,5vh,4rem); font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.5; opacity:.88; }
.tone__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:clamp(2rem,4vh,3rem); }
.tonecard{ background:var(--ink); padding:clamp(1.6rem,2.6vw,2.4rem); display:flex; flex-direction:column; gap:1rem; min-height:280px; position:relative; transition:background .45s var(--ease); }
.tonecard::before{ content:""; position:absolute; left:0; top:0; height:0; width:2px; background:var(--cyan); transition:height .5s var(--ease); }
.tonecard:hover{ background:#140a0c; }
.tonecard:hover::before{ height:100%; }
.tonecard__k{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); transition:letter-spacing .4s var(--ease); }
.tonecard:hover .tonecard__k{ letter-spacing:.18em; }
.tonecard p{ font-size:.98rem; line-height:1.55; opacity:.9; margin-top:auto; }
.swatches{ display:flex; gap:.5rem; margin-top:1rem; }
.swatches i{ width:2.2rem; height:2.2rem; border-radius:50%; background:var(--c); border:1px solid var(--line); transition:transform .4s var(--ease); }
.swatches i:hover{ transform:scale(1.18); }
.lookbook{ display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; }
.lookbook figure{ display:flex; flex-direction:column; gap:.6rem; }
.lookbook .lbk__img{ position:relative; display:block; aspect-ratio:3/4; border-radius:6px; overflow:hidden; }
.lookbook .lbk__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s; }
.lookbook figure:hover .lbk__img img{ filter:contrast(1.08) brightness(1.08) saturate(1.08); }
.lookbook figcaption{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; text-align:center; color:var(--bone); opacity:.82; }

/* ============================================================
   4 · VOICES / CAST
   ============================================================ */
.voices .label{ display:block; margin-bottom:1rem; }
.voices__title{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(2.2rem,6.5vw,6rem); }
.voices__sub{ max-width:52ch; margin:1.2rem 0 clamp(2.4rem,5vh,4rem); font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.5; opacity:.88; }
.cast{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem); }
.castcard{ display:flex; flex-direction:column; transition:transform .5s var(--ease); transform-style:preserve-3d; will-change:transform; }
.castcard__img{ position:relative; inset:auto; aspect-ratio:3/4; border-radius:10px; }
.castcard__img img{ transition:transform .9s var(--ease), filter .5s; }
.castcard:hover .castcard__img img{ filter:contrast(1.08) brightness(1.09) saturate(1.06); }
.castcard__body{ padding-top:1.2rem; }
.castcard__n{ font-family:var(--mono); font-size:.74rem; color:var(--cyan); }
.castcard h3{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1; margin:.3rem 0; transition:color .3s; }
.castcard:hover h3{ color:var(--cyan); }
.castcard__role{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bone-dim); }
.castcard p{ margin-top:.9rem; font-size:.95rem; line-height:1.5; opacity:.85; }
.voices__ens{ margin-top:clamp(2.4rem,5vh,4rem); border-top:1px solid var(--line); padding-top:1.6rem; font-size:1rem; line-height:1.7; opacity:.82; }
.voices__ens b{ color:var(--cyan); }

/* ============================================================
   5 · EPISODE BREAKDOWN — alternating layouts
   ============================================================ */
.episodes__intro .label{ display:block; margin-bottom:1.2rem; }
.episodes__t{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(2.2rem,6.5vw,6rem); }
.episodes__sub{ max-width:58ch; margin-top:1.4rem; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.55; opacity:.88; }

/* episode-breakdown title slide (Coachella) before the horizontal scroll */
.epslide{ position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.epslide__bg{ z-index:0; }
.epslide::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,8,7,.55),rgba(10,8,7,.8)); }
.epslide__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(.7rem,1.6vh,1.1rem); padding:var(--pad); }
.epslide__k{ font-family:var(--mono); font-size:clamp(.62rem,.76vw,.76rem); letter-spacing:.16em; text-transform:uppercase; }
.epslide__k .num{ color:var(--cyan); margin-right:.6em; }
.epslide__t{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; line-height:.9; font-size:clamp(2.6rem,9vw,8rem); }
.epslide__sub{ font-family:var(--mono); font-size:clamp(.72rem,.95vw,.86rem); text-transform:uppercase; letter-spacing:.18em; opacity:.8; }

/* episodes horizontal scroll track (default vertical-safe; .h-on = horizontal) */
.ephoriz{ position:relative; background:var(--ink); }
.eptrack-h{ display:block; }
.ephoriz.h-on{ overflow:hidden; }
.ephoriz.h-on .eptrack-h{ display:flex; flex-wrap:nowrap; width:max-content; height:100vh; will-change:transform; }
.ephoriz.h-on .epp{ flex:0 0 100vw; width:100vw; height:100vh; min-height:0; }
.ephoriz.h-on .epp__bg{ left:-7%; right:auto; width:114%; }

.epp{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:flex-start; padding:clamp(3.4rem,8vh,5.5rem) var(--pad) clamp(2.2rem,5vh,3.6rem); overflow:hidden; }
.epp--r{ justify-content:flex-end; }
.epp__bg{ z-index:0; }
.epp__bg img{ object-position:72% 26%; }
.epp--r .epp__bg img{ object-position:28% 26%; }
/* darkening baked inside the photo unit so the title can blend over it */
.epp__bg::before{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,rgba(10,8,7,.95) 4%,rgba(10,8,7,.56) 44%,rgba(10,8,7,.08) 90%); }
.epp--r .epp__bg::before{ background:linear-gradient(270deg,rgba(10,8,7,.95) 4%,rgba(10,8,7,.56) 44%,rgba(10,8,7,.08) 90%); }
.epp__num{ position:absolute; right:var(--pad); top:7%; z-index:0; font-family:var(--disp); font-weight:900; font-stretch:125%; font-variation-settings:"wght" 900,"wdth" 125; font-size:clamp(9rem,30vw,30rem); line-height:.7; color:transparent; -webkit-text-stroke:1.5px rgba(236,231,223,.14); pointer-events:none; }
.epp--r .epp__num{ right:auto; left:var(--pad); }
.epp__inner{ position:relative; max-width:min(45rem,92vw); }
.epp__eyebrow{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cyan); }
.epp__river{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.86; font-size:clamp(2.8rem,8.5vw,8rem); margin:.35rem 0 .3rem; color:#fff; mix-blend-mode:exclusion; }
/* exclusion over red reads cyan — keep red-panel titles solid off-white */
[data-ground="red"] .epp__river{ mix-blend-mode:normal; color:var(--bone); }
.epp__era{ display:block; font-family:var(--disp); font-weight:500; font-size:clamp(1rem,1.6vw,1.4rem); color:var(--bone-dim); margin-bottom:1rem; }
.epp__log{ max-width:52ch; font-size:clamp(.98rem,1.2vw,1.12rem); line-height:1.55; opacity:.92; }
.epp__log i{ font-style:italic; }
.epp__figs{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.2rem 0 1rem; }
.epp__face{ position:relative; inset:auto; width:clamp(54px,5vw,78px); aspect-ratio:1; border-radius:8px; overflow:hidden; transition:transform .4s var(--ease); }
.epp__face img{ transition:transform .7s var(--ease); }
.epp__face:hover{ transform:translateY(-4px); }
.epp__face:hover img{ transform:scale(1.12); }
.epp__face figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; font-family:var(--mono); font-size:.5rem; text-transform:uppercase; letter-spacing:.03em; text-align:center; padding:.3em .2em; background:linear-gradient(transparent,rgba(10,5,6,.92)); }
.epp__fig{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--line); border-radius:2em; padding:.5em 1em; opacity:.85; transition:border-color .3s,color .3s; }
.epp__fig:hover{ border-color:var(--cyan); color:var(--cyan); }
.epp__track{ font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; opacity:.85; margin-bottom:1.1rem; }
.epp__track .cyan{ text-transform:uppercase; letter-spacing:.1em; margin-right:.6em; font-size:.74rem; }
.epp__link{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--cyan); padding-bottom:.3em; color:var(--cyan); transition:gap .3s var(--ease); will-change:transform; }
.epp__link:hover{ gap:1.1em; }

/* ============================================================
   CASE
   ============================================================ */
.case .label{ display:block; margin-bottom:1rem; }
.case__t{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(2.2rem,7vw,6.5rem); margin-bottom:clamp(2.4rem,5vh,4rem); }
.case__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cstat{ background:var(--ink); padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; gap:1rem; transition:background .45s var(--ease); }
.cstat:hover{ background:#140a0c; }
.cstat__n{ font-family:var(--disp); font-weight:900; letter-spacing:-.04em; line-height:.85; font-size:clamp(3rem,7vw,6rem); color:var(--cyan); transition:transform .5s var(--ease), text-shadow .5s; }
.cstat:hover .cstat__n{ transform:scale(1.06); text-shadow:0 0 40px rgba(63,217,212,.3); }
.cstat figcaption{ font-size:.92rem; line-height:1.35; opacity:.8; max-width:22ch; }

/* ============================================================
   6 · CREATIVE TEAM
   ============================================================ */
.crew .label{ display:block; margin-bottom:1rem; }
.crew__t{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(2.2rem,6.5vw,6rem); margin-bottom:1rem; }
.crew__sub{ max-width:52ch; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.5; opacity:.88; margin-bottom:clamp(2.4rem,5vh,4rem); }
.crew__sub b{ color:var(--cyan); }
.crew__roll{ border-top:1px solid var(--line); }
.crewrow{ display:grid; grid-template-columns:minmax(0,20rem) 1fr auto; align-items:baseline; gap:1rem 1.8rem; padding:clamp(1.1rem,2.8vh,2.2rem) 0; border-bottom:1px solid var(--line); position:relative; transition:padding-left .5s var(--ease); }
.crewrow::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,rgba(63,217,212,.1),transparent); transition:width .5s var(--ease); }
.crewrow:hover{ padding-left:1.4rem; }
.crewrow:hover::before{ width:100%; }
.crewrow__role{ font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cyan); }
.crewrow__name{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.4rem,3.6vw,3rem); line-height:1; transition:color .3s,transform .4s var(--ease); }
.crewrow:hover .crewrow__name{ color:var(--cyan); transform:translateX(6px); }
.crewrow__i{ font-family:var(--mono); font-size:.78rem; opacity:.4; }

/* ============================================================
   PRODUCTION
   ============================================================ */
.team .label{ display:block; margin-bottom:1rem; }
.team__t{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(2.2rem,6.5vw,6rem); margin-bottom:clamp(2rem,4vh,3rem); }
.toneStatement{ border-left:2px solid var(--cyan); padding:.4rem 0 .4rem clamp(1.4rem,3vw,2.6rem); margin-bottom:clamp(2.4rem,5vh,4rem); }
.toneStatement .label{ display:block; margin-bottom:1rem; }
.toneStatement__p{ font-family:var(--disp); font-weight:500; font-size:clamp(1.3rem,2.6vw,2.2rem); line-height:1.3; letter-spacing:-.01em; max-width:32ch; }
.toneStatement cite{ display:block; margin-top:1.2rem; font-family:var(--mono); font-style:normal; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bone-dim); }
.plan{ margin-bottom:clamp(2.4rem,5vh,4rem); }
.plan .label{ display:block; margin-bottom:1.2rem; color:var(--cyan); }
.plan__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.pcard{ background:var(--ink); padding:clamp(1.4rem,2.4vw,2.2rem); display:flex; flex-direction:column; gap:.7rem; min-height:200px; transition:background .45s var(--ease); }
.pcard:hover{ background:#140a0c; }
.pcard__n{ font-family:var(--mono); font-size:.74rem; color:var(--cyan); }
.pcard h4{ font-family:var(--disp); font-weight:700; font-size:1.4rem; margin-top:auto; transition:transform .4s var(--ease); }
.pcard:hover h4{ transform:translateX(5px); }
.pcard p{ font-size:.9rem; line-height:1.45; opacity:.8; }
.budget{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:start; border-top:1px solid var(--line); padding-top:clamp(2rem,4vh,3.4rem); }
.budget__figure .label{ display:block; color:var(--cyan); }
.budget__big{ display:flex; align-items:flex-start; gap:.1em; font-family:var(--disp); font-weight:900; letter-spacing:-.04em; line-height:.85; font-size:clamp(3.6rem,10vw,8rem); margin:.4rem 0 1rem; }
.budget__cur{ font-size:.45em; margin-top:.2em; color:var(--cyan); }
.budget__big .cstat__n{ color:var(--bone); }
.budget__figure p{ max-width:38ch; font-size:.98rem; line-height:1.5; opacity:.85; }
.alloc__seg{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem 1.4rem; padding:.95rem 0; border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease); }
.alloc__seg:hover{ padding-left:.6rem; }
.alloc__k{ font-size:.94rem; } .alloc__v{ font-family:var(--mono); font-size:.86rem; grid-column:2; grid-row:1; }
.alloc__bar{ grid-column:1 / -1; height:3px; background:var(--line); overflow:hidden; }
.alloc__bar i{ display:block; height:100%; width:0; background:var(--cyan); transition:width 1.2s var(--ease); }
.alloc__seg.in .alloc__bar i{ width:calc(var(--p) * 1%); }

/* ============================================================
   MARQUEE + END
   ============================================================ */
.marquee{ padding:clamp(1.4rem,4vh,3rem) 0; overflow:hidden; border-block:1px solid var(--line); }
.marquee__track{ display:flex; align-items:center; gap:2.5rem; width:max-content; white-space:nowrap; animation:marq 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(2rem,6vw,5rem); }
.marquee__track i{ color:var(--cyan); font-style:normal; font-size:clamp(1rem,2.5vw,2rem); }
@keyframes marq{ to{ transform:translateX(-50%); } }

.end{ padding:var(--pad); padding-top:clamp(4rem,9vh,7rem); padding-bottom:clamp(1.6rem,4vh,2.6rem); min-height:100svh; display:flex; flex-direction:column; }
.end__top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:1.2rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.end__mail{ font-family:var(--disp); font-weight:600; font-size:clamp(1.4rem,4vw,3.4rem); letter-spacing:-.02em; margin:clamp(2.4rem,7vh,5rem) 0 auto; display:inline-block; width:max-content; position:relative; will-change:transform; }
.end__mail::after{ content:""; position:absolute; left:0; bottom:-.1em; width:100%; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.end__mail:hover::after{ transform:scaleX(1); transform-origin:left; }
.end__mark{ margin-top:auto; }
.end .mark5rf{ font-size:clamp(5rem,28vw,26rem); color:var(--bone); line-height:.78; }
.end__cmark{ font-family:var(--mono); font-weight:400; font-size:.12em; letter-spacing:normal; vertical-align:super; opacity:.6; margin-left:.05em; }
.end__foot{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(1.4rem,3vh,2.4rem); padding-top:1.2rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; opacity:.75; }
.totop{ will-change:transform; } .totop:hover{ color:var(--cyan); }

/* ---- crew: above/below the line + attached talent ---- */
.crew__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); margin-bottom:clamp(2.4rem,5vh,4rem); }
.crew__bl{ display:block; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cyan); margin-bottom:.2rem; }
.crew__band .crew__roll{ border-top:1px solid var(--line); }
.crew__cols .crewrow{ grid-template-columns:minmax(0,11rem) 1fr; }
.crewrow__open{ opacity:.5; font-style:italic; }
.crew__talent{ border-top:1px solid var(--line); padding-top:clamp(1.6rem,3vh,2.4rem); }
.talent{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem); margin-top:1.1rem; }
.talentcard{ display:flex; flex-direction:column; transition:transform .5s var(--ease); will-change:transform; }
.talentcard__img{ position:relative; inset:auto; aspect-ratio:4/5; border-radius:10px; }
.talentcard__img img{ transition:transform .9s var(--ease); }
.talentcard:hover .talentcard__img img{ transform:scale(1.05); }
.talentcard__b{ padding-top:.9rem; }
.talentcard h3{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.2rem,2.2vw,1.9rem); line-height:1; }
.talentcard span{ display:block; margin-top:.4rem; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }

/* ---- market intro ---- */
.market__intro .label{ display:block; margin-bottom:1rem; }
.market__t{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(2.2rem,6.5vw,6rem); }
.market__sub{ max-width:54ch; margin-top:1.4rem; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.55; opacity:.88; }

/* ---- artist hype pages ---- */
.hype{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:clamp(4rem,10vh,7rem) var(--pad) clamp(3rem,7vh,5rem); overflow:hidden; }
.hype__bg{ z-index:0; }
.hype::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,8,7,.5) 0%,rgba(10,8,7,.32) 38%,rgba(10,8,7,.92) 100%); }
.hype__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; }
.hype__eyebrow{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cyan); }
.hype__name{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.04em; line-height:.9; font-size:clamp(2.8rem,9vw,8rem); color:var(--bone); margin:.5rem 0 clamp(1.6rem,4vh,2.6rem); }
.hype__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.hype__stats figure{ background:rgba(10,8,7,.42); backdrop-filter:blur(3px); padding:clamp(1.2rem,2.4vw,2rem); display:flex; flex-direction:column; gap:.7rem; }
.hype__n{ font-family:var(--disp); font-weight:900; letter-spacing:-.04em; line-height:.85; font-size:clamp(2.2rem,5.2vw,4.4rem); color:var(--bone); }
.hype__stats figcaption{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; opacity:.8; line-height:1.35; }

/* ---- production details ---- */
.proddetails{ display:flex; flex-wrap:wrap; gap:.8rem 2.4rem; margin:1.4rem 0 clamp(2rem,4vh,3rem); font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.proddetails li{ display:flex; gap:.6em; }
.proddetails b{ color:var(--cyan); font-weight:400; }

/* ---- crew: long hyped roster ---- */
/* crew: one page, split screen (above the line | below the line) */
.crewsplit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3.5vw,3.2rem); margin-top:clamp(1.4rem,3vh,2.4rem); }
.crewcol{ display:flex; flex-direction:column; text-align:left; }
.crewcol + .crewcol{ border-left:1px solid var(--line); padding-left:clamp(1.4rem,3.5vw,3.2rem); }
.crew__bl{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--cyan); opacity:.85; padding-bottom:.5rem; }
.crewrows{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.crewrow{ display:grid; grid-template-columns:auto 1fr; gap:clamp(.9rem,1.4vw,1.3rem); align-items:center; padding:clamp(.8rem,1.6vh,1.2rem) 0; border-bottom:1px solid var(--line); text-align:left; transition:background-color .35s var(--ease); }
.crewrow:hover{ background:rgba(154,36,64,.05); }
.crewrow__img{ position:relative; width:clamp(58px,5vw,82px); aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:var(--ink); flex:none; }
.crewrow__img img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.03) brightness(.97) saturate(1.02); }
.crewrow__img--ph{ display:grid; place-items:center; background:linear-gradient(155deg,#1c1614,#0c0a09); }
.crewrow__img--ph span{ font-family:var(--mark); font-weight:900; font-size:1.7rem; color:rgba(245,240,232,.14); }
.crewrow__role{ display:block; font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; opacity:.55; }
.crewrow__name{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.02rem,1.7vw,1.5rem); line-height:1.05; margin:.14rem 0 .4rem; transition:color .3s var(--ease); }
.crewrow:hover .crewrow__name{ color:var(--cyan); }
.crewrow__tags{ display:flex; flex-wrap:wrap; gap:.34rem; }
.crewrow__tags li{ font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; border:1px solid var(--line); border-radius:2em; padding:.3em .65em; opacity:.66; }
.crewrow--open .crewrow__name{ opacity:.5; font-style:italic; }
/* production company credit */
.crew__prodco{ display:inline-flex; flex-direction:column; align-items:center; gap:.45rem; margin:clamp(1.4rem,3.4vh,2.4rem) auto 0; padding:clamp(1.2rem,2.8vh,1.9rem) clamp(2rem,5vw,3.4rem); border:1px solid var(--line); border-radius:14px; transition:border-color .4s var(--ease), background-color .4s var(--ease); }
.crew__prodco:hover{ border-color:var(--cyan); background:rgba(154,36,64,.05); }
.crew__prodco-k{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.22em; color:var(--cyan); }
.crew__prodco-n{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1; }
.crew__prodco-l{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; opacity:.6; }
@media (max-width:720px){
  .crewsplit{ grid-template-columns:1fr; gap:0; }
  .crewcol + .crewcol{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:1.2rem; margin-top:1rem; }
}
/* inner-image parallax (scroll depth) for all standalone photo frames */
[data-par-img]{ overflow:hidden; }
[data-par-img] img{ will-change:transform; transition:filter .5s var(--ease); }
.crew__foot{ margin-top:clamp(1.6rem,4vh,2.4rem); font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6; }

/* ============================================================
   CENTRED COMPOSITION — all pages except the episode panels
   ============================================================ */
.cover__foot{ flex-direction:column; align-items:center; text-align:center; gap:1.2rem; }
.cover__meta{ align-items:center; text-align:center; }
.cover__logline{ margin-inline:auto; }

.scale,.synopsis,.statement .wrap,.tone,.voices,.case,.market__intro,.crew,.team,.proof__intro{ text-align:center; }
.synopsis__lead{ margin-inline:auto; }
.synopsis__cols{ grid-template-columns:1fr; max-width:64ch; margin-inline:auto; }
.synopsis__cols:hover p{ opacity:.9; }
.whynow{ grid-template-columns:1fr; gap:.8rem; justify-items:center; }
.whynow::before{ left:50%; transform:translateX(-50%); }
.whynow p{ margin-inline:auto; }
.statement__t{ margin-inline:auto; }
.tone__sub,.voices__sub,.case__lede,.market__sub,.crew__sub{ margin-inline:auto; }
.tonecard,.cstat,.pcard{ align-items:center; text-align:center; }
.tonecard::before{ display:none; }
.tonecard p,.cstat figcaption,.pcard p{ margin-inline:auto; }
.swatches{ justify-content:center; }
.castcard,.talentcard{ align-items:center; }
.castcard__body,.talentcard__b{ text-align:center; }
.crew__bl{ text-align:center; }
.toneStatement{ border-left:none; padding-left:0; text-align:center; }
.toneStatement__p{ margin-inline:auto; }
.plan .label{ display:block; }
.proddetails{ justify-content:center; }
.budget{ grid-template-columns:1fr; text-align:center; gap:2rem; }
.budget__big{ justify-content:center; }
.budget__figure p{ margin-inline:auto; }
.alloc{ max-width:660px; margin:0 auto; text-align:left; }
.hype__inner{ text-align:center; }
.hype__stats{ margin-inline:auto; }
.hype__stats figure{ align-items:center; text-align:center; }
.end{ text-align:center; align-items:center; }
.end__top,.end__foot{ width:100%; }
.end__foot{ justify-content:center; }
.end__mail{ margin-inline:auto; }

/* ---- cover logline: centred under the 5RF, above the figure ---- */
@font-face{ font-family:"Owners"; src:url("fonts/OwnersXXWide-Black.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"OwnersWide"; src:url("fonts/OwnersWide-Bold.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
/* logline: in-flow under the 5RF, readable (NOT the wide Owners) */
.cover__mid{ flex-direction:column; gap:clamp(.8rem,2.6vh,1.7rem); }
.cover__logline{ position:static; left:auto; right:auto; bottom:auto; transform:none; margin:0 auto; width:auto; max-width:min(46ch,88vw); z-index:auto; text-align:center; color:var(--bone); text-shadow:0 2px 24px rgba(0,0,0,.6); font-family:"Archivo", system-ui, sans-serif; }
/* declutter the cover bottom (meta + scroll cue stacked, no clash) */
.cover__foot{ flex-direction:column; align-items:center; gap:clamp(.9rem,2.2vh,1.5rem); }
.cover__meta{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:.35rem 1.6rem; }
.cover__foot .scrollcue{ position:static; transform:none; left:auto; bottom:auto; }
/* OAKLAND cover frame: keep the spotlit figure in view */
.cover__bg img,.cover__fg img{ object-position:50% 80%; }
/* production company on the last page */
.end__prod{ font-family:var(--disp); font-weight:600; font-size:clamp(1rem,1.7vw,1.45rem); letter-spacing:.01em; margin-top:clamp(1.2rem,3vh,2rem); }
.end__prod b,.end__co{ color:var(--cyan); font-weight:700; }
.end__co{ transition:opacity .3s var(--ease); } .end__co:hover{ text-decoration:underline; text-underline-offset:.18em; }
.end__site:hover{ color:var(--cyan); }

/* ---- key-art: play button + Teaser under "the future" ---- */
.keyart__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(.9rem,2.4vh,1.7rem); transition:opacity .5s; }
.keyart__head{ position:static; transform:none; text-align:center; }
.keyart__play{ position:relative; width:clamp(62px,6vw,92px); aspect-ratio:1; border:1.5px solid rgba(255,255,255,.85); border-radius:50%; display:grid; place-items:center; transition:transform .5s var(--ease), background-color .4s var(--ease), border-color .4s; }
.keyart__play:hover{ transform:scale(1.1); background:var(--red); border-color:transparent; }
.keyart__tri{ width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; margin-left:4px; }
.keyart__teaser{ font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.34em; color:var(--bone); opacity:.9; }

/* ---- proof of concept ---- */
.proof__intro .label{ display:block; margin-bottom:1rem; }
.proof__lead{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.95; font-size:clamp(2rem,5.5vw,4.6rem); margin-inline:auto; max-width:20ch; }
.proof__sub2{ max-width:54ch; margin:1.2rem auto 0; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.55; opacity:.88; }
.proof__sub2 b{ color:var(--cyan); }
.proof{ position:relative; min-height:100svh; display:grid; grid-template-columns:1fr 1fr; }
/* flipped: film left, artist+title right (breaks up the rhythm) */
.proof--r .proof__media{ order:1; }
.proof--r .proof__side{ order:2; }
.proof__side{ position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:clamp(1.8rem,4vw,3.4rem); min-height:50vh; }
.proof__bg{ z-index:0; }
.proof__side::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,8,7,.25) 30%,rgba(10,8,7,.82) 100%); }
.proof__cap{ position:relative; z-index:2; }
.proof__eyebrow{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--cyan); }
.proof__title{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(2rem,4.2vw,4.4rem); color:var(--bone); margin:.5rem 0 .6rem; }
.proof__sub{ font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.proof__media{ position:relative; background:#000; min-height:50vh; overflow:hidden; }
.proof__embed{ position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* make the YouTube/Vimeo iframe COVER the half (crop, no letterbox bars) */
.proof__embed iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto; height:auto; min-width:100%; min-height:100%; aspect-ratio:16/9; border:0; }
.proof__ph{ font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); }

/* key-art carries the logline (moved from cover) — Owners Wide, CAPS display, kept narrow so it never overflows */
.keyart__head{ font-family:var(--disp); font-weight:700; text-transform:uppercase; mix-blend-mode:normal; color:var(--bone); font-size:clamp(.95rem,2.1vw,1.9rem); line-height:1.12; letter-spacing:-.01em; max-width:92vw; margin:0 auto; text-shadow:0 2px 28px rgba(0,0,0,.65); }
.keyart__head span{ display:block; }
.keyart__head span + span{ margin-top:.5em; }

/* ---- password gate: the film plays inside a small, centred 5RF (black everywhere else); pill at the bottom ---- */
.gate{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
/* the film, full-frame behind the cut-out */
.gate__film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; filter:grayscale(1) contrast(1.05); z-index:0; }
/* a black sheet covering everything except a 5RF-shaped hole, so the film only shows inside the letters */
.gate__cut{ position:absolute; inset:0; width:100%; height:100%; z-index:1; transition:opacity 1s var(--ease); }
.gate__cut text{ font-family:var(--mark); font-weight:900; font-size:min(15vw,30vh); letter-spacing:-.04em; }
.gate__edge{ fill:none; stroke:rgba(245,242,236,.22); stroke-width:1.4px; }
/* film grain over the whole gate */
.gate__grain{ position:absolute; inset:-50%; width:200%; height:200%; z-index:2; opacity:.26; mix-blend-mode:overlay; background-size:170px 170px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift .42s steps(2) infinite; }
@keyframes grainShift{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-2%)} 60%{transform:translate(-2%,3%)} 80%{transform:translate(3%,-1%)} 100%{transform:translate(-1%,-3%)} }
.gate__inner{ position:absolute; left:0; right:0; bottom:clamp(6vh,9vh,12vh); margin:0 auto; z-index:3; display:flex; flex-direction:column; align-items:center; gap:clamp(.9rem,2.4vh,1.5rem); text-align:center; padding:0 var(--pad); transition:opacity .35s var(--ease); }
.gate__hint{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.24em; color:rgba(245,242,236,.78); text-shadow:0 2px 18px rgba(0,0,0,.85); }
.gate__form{ display:flex; gap:.55rem; align-items:stretch; flex-wrap:wrap; justify-content:center; }
.gate__input{ font-family:var(--mono); font-size:.9rem; letter-spacing:.22em; text-transform:uppercase; text-align:center; color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.5); border-radius:2em; padding:.85em 1.4em; outline:none; width:min(64vw,240px); transition:border-color .3s; backdrop-filter:blur(3px); }
.gate__input:focus{ border-color:#fff; }
.gate__input::placeholder{ color:rgba(255,255,255,.55); letter-spacing:.22em; }
.gate__btn{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:#000; background:#fff; border-radius:2em; padding:.85em 1.5em; transition:transform .3s var(--ease), opacity .3s; }
.gate__btn:hover{ transform:translateY(-2px); opacity:.85; }
.gate__err{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:#fff; min-height:1em; text-shadow:0 2px 16px rgba(0,0,0,.95); }
.gate.shake .gate__inner{ animation:gshake .45s; }
@keyframes gshake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-11px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }

/* unlock: 5RF opens out (the cut sheet fades) → whole film plays → fades to black → cover intro */
.gate.exit .gate__inner{ opacity:0; }
.gate.exit .gate__cut{ opacity:0; }
.gate__black{ position:absolute; inset:0; z-index:5; background:#000; opacity:0; pointer-events:none; }
.gate.toblack .gate__black{ opacity:1; transition:opacity 1.5s ease; }     /* slow fade to black */
.gate.gone{ opacity:0; pointer-events:none; transition:opacity .7s var(--ease); }

/* cover intro after unlock: 5RF outline on black → background fades in → settles into the fade-pulse */
html.intro-armed .cover, html.intro-go .cover{ background:#000; }
.cover__bg, .cover__fg, .cover__grad, .cover__top, .cover__foot, .header, .progress{ transition:opacity 1.3s var(--ease); }
html.intro-armed .cover__bg, html.intro-armed .cover__fg, html.intro-armed .cover__grad,
html.intro-armed .cover__top, html.intro-armed .cover__foot,
html.intro-armed .header, html.intro-armed .progress{ opacity:0; }
html.intro-go .cover__bg, html.intro-go .cover__fg, html.intro-go .cover__grad{ opacity:1; }
html.intro-go .cover__top, html.intro-go .cover__foot, html.intro-go .header, html.intro-go .progress{ opacity:1; transition:opacity 1s ease .55s; }
html.intro-armed .cover .mark5rf, html.intro-go .cover .mark5rf{ animation:none; }
/* 5RF filled with the cover photo, then the fill fades out as the bg fades in, leaving the black 5RF pulsing */
.cover .mark5rf{ position:relative; }
.cover .mark5rf::after{ content:"5RF"; position:absolute; inset:0; background:url("assets/photo/arena.webp") center center / cover fixed; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; opacity:0; pointer-events:none; transition:opacity 1.1s var(--ease); }
html.intro-armed .cover .mark5rf::after{ opacity:1; }
html.intro-go .cover .mark5rf::after{ opacity:0; }
html.intro-done .cover .mark5rf{ animation:pop 6.5s ease-in-out -3.25s infinite; }

[data-par]{ will-change:transform; }
[data-magnet]{ will-change:transform; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991px){
  .header__meta{ display:none; }
  .keyart__frame{ width:62vw; }
  .synopsis__cols,.whynow{ grid-template-columns:1fr; gap:1.6rem; }
  .tone__grid{ grid-template-columns:1fr; }
  .case__stats,.plan__row,.hype__stats{ grid-template-columns:repeat(2,1fr); }
  .cast{ grid-template-columns:1fr; max-width:520px; }
  .lookbook{ grid-template-columns:repeat(3,1fr); }
  .budget{ grid-template-columns:1fr; gap:2.4rem; }
  .crew__cols{ grid-template-columns:1fr; gap:1.8rem; }
  .crewrow{ grid-template-columns:minmax(0,11rem) 1fr; }
}
@media (max-width:760px){
  .header{ grid-template-columns:1fr auto; }
  .header__nav{ display:none; }
  .header__burger{ display:block; }
  .cover__foot{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .cover__meta{ text-align:left; }
  .keyart__frame{ width:84vw; }
  .case__stats,.plan__row,.lookbook,.hype__stats,.talent{ grid-template-columns:1fr; }
  .lookbook{ grid-template-columns:repeat(2,1fr); }
  .talent{ max-width:420px; }
  .crew__cols .crewrow{ grid-template-columns:minmax(0,9rem) 1fr; }
  .epp,.epp--r{ justify-content:flex-start; }
  .epp--r .epp__bg img{ object-position:72% 26%; }
  .proof{ grid-template-columns:1fr; min-height:0; }
  .proof__side{ min-height:48vh; }
  .proof__media{ min-height:0; aspect-ratio:16/9; }
  .proof--r .proof__side,.proof--r .proof__media{ order:0; }
}

/* short viewports — episodes are fixed-height, keep content inside the panel */
@media (max-height:820px){
  .epp__river{ font-size:clamp(2.6rem,7vw,6.4rem); }
  .epp__era{ font-size:1rem; margin-bottom:.7rem; }
  .epp__log{ font-size:.95rem; line-height:1.5; max-width:50ch; }
  .epp__figs{ margin:.9rem 0 .8rem; gap:.7rem; }
  .epp__face{ width:clamp(48px,4.6vw,66px); }
  .epp__track{ margin-bottom:.8rem; font-size:.78rem; }
  .epp__eyebrow{ font-size:.68rem; }
  .epp{ padding-top:clamp(3rem,7vh,4.4rem); padding-bottom:clamp(1.8rem,4vh,3rem); }
  .cover .mark5rf{ font-size:clamp(4rem,18vh,12rem); }
}
@media (max-height:620px){
  .epp__river{ font-size:clamp(1.9rem,5.5vw,3.6rem); }
  .epp__log{ font-size:.88rem; }
  .epp__figs{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html.fx [data-lines] .line__in,html.fx [data-rise]{ transform:none !important; opacity:1 !important; }
  [data-pop]{ animation:none !important; }
  .keyart{ height:auto; } .keyart__pin{ position:relative; height:auto; padding:16vh 0; }
}

/* ============================================================
   ════════════  STANDALONE EPISODE PAGES  ════════════
   ============================================================ */
.epbar{ position:fixed; top:0; left:0; right:0; z-index:600; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem var(--pad); font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bone); }
.epbar__brand{ font-family:var(--disp); font-weight:800; letter-spacing:-.01em; font-size:.92rem; }
.epbar__where{ opacity:.6; }
.epbar__back:hover{ color:var(--cyan); }

.ep__hero{ position:relative; min-height:92svh; display:flex; align-items:flex-end; padding:var(--pad); padding-bottom:clamp(3rem,8vh,6rem); background:radial-gradient(130% 130% at 70% 30%, #2a060a 0%, #160709 55%, #0a0506 100%); overflow:hidden; }
.ep__hero .wave{ position:absolute; left:0; right:0; bottom:14%; opacity:.2; z-index:1; }
.ep__hero .wave svg{ width:100%; height:60px; }
.ep__hero .wave path{ fill:none; stroke:var(--cyan); stroke-width:1.4; }
.ep__roman{ position:absolute; top:8%; right:var(--pad); font-family:var(--disp); font-weight:900; font-size:clamp(8rem,28vw,26rem); line-height:.7; color:transparent; -webkit-text-stroke:1.6px rgba(242,231,227,.14); z-index:0; }
.ep__inner{ position:relative; z-index:2; max-width:1200px; }
.ep__eyebrow{ font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--cyan); }
.ep__title{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.9; font-size:clamp(3rem,11vw,10rem); margin:1rem 0; }
.ep__sub{ max-width:46ch; font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1.4; opacity:.92; }
.ep__herometa{ display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; margin-top:2.4rem; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; opacity:.72; }
.ep__herometa b{ color:var(--cyan); font-weight:700; }
.ep__lead .ep__leadgrid{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.ep__leadtext{ font-family:var(--disp); font-weight:500; font-size:clamp(1.3rem,2.4vw,2.1rem); line-height:1.32; letter-spacing:-.01em; }
.ep__contextbox{ border-left:2px solid var(--cyan); padding-left:clamp(1.2rem,2vw,2rem); display:flex; flex-direction:column; gap:1rem; }
.ep__stat{ display:flex; flex-direction:column; gap:.4rem; }
.ep__statn{ font-family:var(--disp); font-weight:900; font-size:clamp(2.6rem,5vw,4rem); color:var(--cyan); line-height:.85; }
.ep__statl{ font-size:.92rem; line-height:1.4; opacity:.82; }
.ep__context{ font-size:.96rem; line-height:1.6; opacity:.84; }
.ep__story .ep__cols{ columns:2; column-gap:clamp(2.4rem,5vw,5.5rem); max-width:1400px; }
.ep__cols p{ break-inside:avoid; margin-bottom:1.4rem; font-size:1.02rem; line-height:1.72; }
.ep__cols p:first-child::first-letter{ font-family:var(--disp); font-weight:900; float:left; font-size:3.6em; line-height:.74; padding:.05em .12em 0 0; color:var(--cyan); }
.ep__pq{ padding:clamp(4rem,9vh,8rem) var(--pad); background:var(--ink-2); }
.ep__pq .wrap{ max-width:1100px; }
.ep__pq p{ font-family:var(--disp); font-weight:600; letter-spacing:-.02em; line-height:1.1; font-size:clamp(1.8rem,4.5vw,4rem); }
.ep__pq cite{ display:block; margin-top:1.6rem; font-family:var(--mono); font-style:normal; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); }
.ep-h{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.8rem,5vw,3.6rem); margin-bottom:clamp(1.6rem,4vh,3rem); }
.ep__figs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.epfig{ background:var(--ink); padding:clamp(1.4rem,2.4vw,2.2rem); display:flex; flex-direction:column; gap:.6rem; transition:background .4s; }
.epfig:hover{ background:#140a0c; }
.epfig__name{ font-family:var(--disp); font-weight:700; font-size:1.3rem; letter-spacing:-.01em; }
.epfig__role{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cyan); }
.epfig__note{ font-size:.92rem; line-height:1.5; opacity:.82; }
.eptrack{ display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:start; padding:1.4rem 0; border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease); }
.eptrack:hover{ padding-left:.6rem; }
.eptrack__n{ font-family:var(--mono); font-size:.8rem; opacity:.5; }
.eptrack__t{ font-family:var(--disp); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; }
.eptrack__by{ font-size:.9rem; opacity:.7; margin-top:.2rem; }
.eptrack__note{ font-size:.9rem; line-height:1.45; opacity:.72; margin-top:.4rem; max-width:60ch; }
.eptrack__y{ font-family:var(--mono); font-size:.82rem; color:var(--cyan); }
.ep__turn{ background:var(--ink-2); padding:clamp(4rem,9vh,8rem) var(--pad); }
.ep__turn .wrap{ display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; max-width:1300px; }
.ep__turn .yr{ font-family:var(--disp); font-weight:900; font-size:clamp(4rem,12vw,10rem); line-height:.8; color:var(--cyan); }
.ep__turn .label{ color:var(--cyan); }
.ep__turn .ev{ font-family:var(--disp); font-weight:600; font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.2; margin:.6rem 0 1rem; }
.ep__turn .dt{ font-size:1rem; line-height:1.6; opacity:.84; max-width:60ch; }
.ep__trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,3rem); }
.ep__trio .label{ color:var(--cyan); display:block; margin-bottom:.8rem; }
.ep__trio p{ font-size:.96rem; line-height:1.6; opacity:.86; }
.ep__pn{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.ep__pn a{ padding:clamp(2rem,5vh,4rem) var(--pad); display:flex; flex-direction:column; gap:.5rem; transition:background-color .4s var(--ease); }
.ep__pn a:hover{ background:var(--cyan); color:var(--ink); }
.ep__pn .next{ text-align:right; align-items:flex-end; border-left:1px solid var(--line); }
.ep__pn .dir{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6; }
.ep__pn .nm{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.6rem,4vw,3rem); }
.footer{ background:var(--ink-2); padding:var(--pad); padding-top:clamp(3rem,7vh,5rem); }
.footer .rule{ height:1px; background:var(--line); margin:1.4rem 0; }
.footer__labels,.footer__meta{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; opacity:.72; }
.footer__cta{ display:flex; flex-direction:column; gap:.6rem; padding:clamp(1.4rem,4vh,3rem) 0; }
.footer__cta .label{ color:var(--cyan); }
.footer__cta a{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(2rem,7vw,5rem); }
.footer__cta a:hover{ color:var(--cyan); }
.footer__nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.4rem 0; border-top:1px solid var(--line); }
.footer__social,.footer__pages{ display:flex; gap:1.4rem; }
.footer__social a:hover,.footer__pages a:hover{ color:var(--cyan); }
.footer__meta{ margin-top:1rem; }
@media (max-width:760px){
  .ep__lead .ep__leadgrid{ grid-template-columns:1fr; }
  .ep__story .ep__cols{ columns:1; }
  .ep__figs,.ep__trio{ grid-template-columns:1fr; }
  .ep__turn .wrap{ grid-template-columns:1fr; }
  .ep__pn{ grid-template-columns:1fr; }
  .ep__pn .next{ border-left:none; border-top:1px solid var(--line); }
}