/* ==========================================================================
   White and Black Entertainment · whiteandblackentmt.in
   Brand system: BRAND-SYSTEMS.md §2 (shared) + §5 (WBE) + §6 (family).
   Dark-first "screen" bands, "paper" bands for long reading, one accent:
   Molten Amber, used only where light would be.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, @fontsource 5.3.0, OFL-1.1) ---------- */
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:1 1000;font-display:swap;
  src:url("/assets/fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:1 1000;font-display:swap;
  src:url("/assets/fonts/sofia-sans-extra-condensed-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metric-matched fallbacks (BRAND §5.6, §2.4): no layout shift when the web fonts swap in */
@font-face{font-family:"Sofia Sans XC Fallback";src:local("Impact");size-adjust:81.67%;ascent-override:110.19%;descent-override:36.73%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";src:local("Arial");size-adjust:103.58%;ascent-override:97.03%;descent-override:28.48%;line-gap-override:0%}
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New");size-adjust:99.98%;ascent-override:100.52%;descent-override:29.5%;line-gap-override:0%}

/* ---------- 2. Tokens ---------- */
:root{
  /* WBE raw palette (BRAND §5.2) */
  --wb-black:#0A0A0A; --wb-surface:#141414; --wb-raised:#1E1E1E; --wb-charcoal:#2A2A2A;
  --wb-paper:#F4F1EA; --wb-white:#FFFFFF;
  --wb-amber:#E8833A; --wb-amber-300:#F29A55; --wb-amber-600:#C9651F; --wb-ember:#A84A12;
  --wb-ash:#A39E95; --wb-smoke:#6B675F; --wb-graphite:#5E5A53; --wb-bone:#D9D3C7; --wb-taupe:#857F72;
  --wb-letterbox:#000000;
  --wb-wash-shiva:#0C241D;
  --wb-ok-d:#5BC08A; --wb-warn-d:#F2C14E; --wb-err-d:#FF6B6B; --wb-info-d:#8AB4F8;
  --wb-ok:#1E7A46; --wb-warn:#8F5A00; --wb-err:#B42318; --wb-info:#1F5FA8;

  /* Spacing, layout (BRAND §2.2) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(1rem, 0.5rem + 2.2222vw, 2.5rem);
  --col-gap:clamp(16px, 2vw, 24px);
  --container:1320px; --container-narrow:680px;
  --section-y:clamp(5rem, 3rem + 8.8889vw, 11rem);
  --header-h:64px;

  /* Type (BRAND §5.6) */
  --font-display:"Sofia Sans Extra Condensed","Sofia Sans XC Fallback",Impact,"Arial Narrow",sans-serif;
  --font-text:"Geist","Geist Fallback",Arial,system-ui,sans-serif;
  --font-mono:"Geist Mono","Geist Mono Fallback","Courier New",monospace;
  --fs-hero:   clamp(3.5rem, 1rem + 11.1111vw, 11rem);
  --fs-title:  clamp(3rem, 1.3333rem + 7.4074vw, 8rem);
  --fs-h2:     clamp(2.5rem, 1.3333rem + 5.1852vw, 6rem);
  --fs-h3:     clamp(1.625rem, 1.3333rem + 1.2963vw, 2.5rem);
  --fs-quote:  clamp(1.75rem, 1.3333rem + 1.8519vw, 3rem);
  --fs-billing:clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
  --fs-h4:     clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);
  --fs-lead:   clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
  --fs-body:   clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --fs-small:  clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
  --fs-credit: clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);

  /* Motion (BRAND §2.5, §5.8) */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-shutter:cubic-bezier(.77,0,.18,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --dur-reveal:720ms; --reveal-y:0px;
  --still-cycle:8.2s;
}
@media (min-width:900px){ :root{ --header-h:72px; } }
/* Large monitors: the grid widens with the screen (1320px at 1600, 1600px at 1920) so the hero screen and the
   work panels read wide (BRAND §5.7) and every band stays on one shared grid. Text measures stay capped in ch. */
@media (min-width:1600px){ :root{ --container:max(1320px, min(1600px, 100vw - 320px)); } }

/* ---------- 3. Themes (BRAND §5.2): every band declares one ---------- */
.t-screen{ color-scheme:dark;
  --bg:var(--wb-black); --surface:var(--wb-surface); --surface-2:var(--wb-raised);
  --text:var(--wb-paper); --heading:var(--wb-white); --muted:var(--wb-ash);
  --line:var(--wb-charcoal); --line-strong:var(--wb-smoke); --rule:var(--wb-amber);
  --accent:var(--wb-amber); --eyebrow:var(--wb-amber);
  --link:var(--wb-paper); --link-hover:var(--wb-amber-300);
  --btn-bg:var(--wb-amber); --btn-fg:var(--wb-black); --btn-bg-hover:var(--wb-amber-300); --btn-bg-active:var(--wb-amber-600);
  --btn2-fg:var(--wb-paper); --btn2-border:var(--wb-paper); --btn2-bg-hover:var(--wb-paper); --btn2-fg-hover:var(--wb-black);
  --field-bg:var(--wb-surface); --field-border:var(--wb-smoke); --placeholder:var(--wb-ash);
  --focus:var(--wb-amber);
  --ok:var(--wb-ok-d); --warn:var(--wb-warn-d); --err:var(--wb-err-d); --info:var(--wb-info-d);
  background:var(--bg); color:var(--text);
}
.t-paper{ color-scheme:light;
  --bg:var(--wb-paper); --surface:var(--wb-white); --surface-2:var(--wb-white);
  --text:var(--wb-black); --heading:var(--wb-black); --muted:var(--wb-graphite);
  --line:var(--wb-bone); --line-strong:var(--wb-taupe); --rule:var(--wb-ember);
  --accent:var(--wb-ember); --eyebrow:var(--wb-ember);
  --link:var(--wb-ember); --link-hover:var(--wb-black);
  --btn-bg:var(--wb-black); --btn-fg:var(--wb-paper); --btn-bg-hover:var(--wb-charcoal); --btn-bg-active:var(--wb-raised);
  --btn2-fg:var(--wb-black); --btn2-border:var(--wb-black); --btn2-bg-hover:var(--wb-black); --btn2-fg-hover:var(--wb-paper);
  --field-bg:var(--wb-white); --field-border:var(--wb-taupe); --placeholder:var(--wb-graphite);
  --focus:var(--wb-ember);
  --ok:var(--wb-ok); --warn:var(--wb-warn); --err:var(--wb-err); --info:var(--wb-info);
  background:var(--bg); color:var(--text);
}
/* Shiva Phonk feature panel only (art-direction wash, BRAND §5.3). Smoke fails 3:1 here, so UI edges use Ash. */
.t-screen.wash-shiva{ --bg:var(--wb-wash-shiva); --line:color-mix(in srgb, var(--wb-paper) 14%, var(--wb-wash-shiva)); --line-strong:var(--wb-ash); }

/* ---------- 4. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--wb-black);font-synthesis:none;font-kerning:normal;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font:400 var(--fs-body)/1.65 var(--font-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body.menu-open{overflow:hidden}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
h1,h2,h3,h4{color:var(--heading);text-wrap:balance}
p,li,dd{text-wrap:pretty}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--link-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Sections that receive focus after an in-page jump (main.js) are landmarks, not controls */
section[tabindex="-1"]:focus{outline:none}
::selection{background:var(--wb-amber);color:var(--wb-black)}
[hidden]{display:none!important}
time,.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- 5. Utilities ---------- */
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:18px;height:18px}
.icon--xs{width:16px;height:16px}
.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
/* Separator lists ("A · B · C"): each item draws its own dot before it. The list is pulled left by one
   separator and that strip is clipped, so the first dot on every line is hidden: no line ever starts
   or ends with a dot, whatever the width. */
.seps{--sep:2.2em;display:flex;flex-wrap:wrap;margin-left:calc(-1 * var(--sep));clip-path:inset(-.75em -.75em -.75em var(--sep))}
.seps > *{position:relative;padding-left:var(--sep);min-width:0}
.seps > *::before{content:"·";content:"·" / "";position:absolute;left:0;top:0;width:var(--sep);text-align:center;letter-spacing:0;font-weight:400}
/* ℗ (U+2117) is in none of the brand fonts: a drawn mark keeps it crisp and consistent; the character stays in the text for copy and screen readers */
.pmark{display:inline-block;line-height:1;vertical-align:-.1em}
.pmark svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:var(--pm-w, 2);stroke-linecap:round;stroke-linejoin:round}
.band{padding-block:var(--section-y)}
/* Two screen bands in a row: one shared rhythm and a hairline, not a double gap */
.band.t-screen:has(+ .band.t-screen){padding-bottom:calc(var(--section-y) * .5)}
.band.t-screen + .band.t-screen{padding-top:calc(var(--section-y) * .5);border-top:1px solid var(--line)}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;display:inline-flex;align-items:center;min-height:52px;padding:0 24px;
  background:var(--wb-amber);color:var(--wb-black);font:500 13px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:8px}
.skip-link:hover{color:var(--wb-black)}

/* Eyebrow (BRAND §6.5): timecode style */
.eyebrow{display:flex;align-items:center;gap:12px;font:500 var(--fs-credit)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--eyebrow);margin:0 0 var(--s-5)}
.eyebrow__rule{width:24px;height:1px;flex:none;background:var(--rule);transform-origin:left}
.mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-credit);line-height:1.5}

/* Headings */
.h2{font:750 var(--fs-h2)/.92 var(--font-display);text-transform:uppercase;letter-spacing:0}
.h3{font:700 var(--fs-h3)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.mini-title{font:500 var(--fs-credit)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-5)}
.lead{font-size:var(--fs-lead);line-height:1.55;max-width:60ch}
.lead--gap{margin-top:var(--s-6)}
.section-head{max-width:62rem;margin-bottom:clamp(3rem, 2rem + 4vw, 6rem)}
.section-head .lead{margin-top:var(--s-6)}
.section-head--split{max-width:none}
@media (min-width:900px){
  .section-head--split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .section-head--split > .section-head__main{grid-column:1/8}
  .section-head--split > .lead{grid-column:9/13;margin-top:0}
  /* A long one-line title: stacked on narrow desktops, 8 columns from 1200px, so it never breaks as "HOW A / PRODUCTION RUNS." */
  .section-head--wide > .section-head__main{grid-column:1/-1}
  .section-head--wide > .lead{grid-column:1/8;margin-top:var(--s-6)}
}
@media (min-width:1200px){
  .section-head--wide > .section-head__main{grid-column:1/9}
  .section-head--wide > .lead{grid-column:9/13;margin-top:0}
}

/* Text links with an arrow */
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 13px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--link);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.45em}
.tlink:hover{color:var(--link-hover);text-decoration-color:currentColor}
.tlink .icon{transition:transform var(--dur-2) var(--ease-standard)}
.tlink:hover .icon{transform:translate(2px,-2px)}
.tlink--next:hover .icon{transform:translateX(4px)}

/* ---------- 6. Buttons (BRAND §5.7: 52px, 0 radius) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 calc(28px - .12em) 0 28px;
  font:500 13px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;border-radius:0;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard)}
.btn .icon{width:18px;height:18px}
.btn .icon--fill{fill:currentColor;stroke:none;width:14px;height:14px}
.btn--accent{background:var(--btn-bg);color:var(--btn-fg)}
.btn--accent:hover{background:var(--btn-bg-hover);color:var(--btn-fg)}
.btn--accent:active{background:var(--btn-bg-active)}
.btn--ghost{background:transparent;color:var(--btn2-fg);border-color:var(--btn2-border)}
.btn--ghost:hover{background:var(--btn2-bg-hover);color:var(--btn2-fg-hover)}
.btn--ghost:active{background:var(--btn2-bg-hover);color:var(--btn2-fg-hover);opacity:.9}
.btn .icon--go{transition:transform var(--dur-2) var(--ease-standard)}
.btn:hover .icon--go{transform:translateX(4px)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:progress;opacity:.7}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
/* Phones: every call to action is a full-width, thumb-sized bar */
@media (max-width:479.98px){
  .btn-row .btn{flex:1 1 100%}
  main .btn{width:100%}
}

/* ---------- 7. Header (BRAND §6.3) ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);margin-bottom:calc(-1 * var(--header-h));
  border-bottom:1px solid var(--line);transition:background-color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard)}
.js .site-header:not(.is-solid):not(.is-open){background:transparent;border-bottom-color:transparent}
.site-header__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--heading);text-decoration:none}
.brand:hover{color:var(--heading)}
.brand__mark{width:36px;height:36px;flex:none}
.brand__text{display:flex;flex-direction:column;gap:4px}
.brand__name{font:800 22px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--heading);white-space:nowrap}
.brand__sub{font:500 11px/1 var(--font-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
@media (max-width:399.98px){ .brand__sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }

.nav-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 14px;background:transparent;
  border:1px solid var(--line-strong);color:var(--text);font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.nav-toggle:hover{border-color:var(--text)}
.nav-toggle .i-close,.nav-toggle .lbl-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open,.nav-toggle[aria-expanded="true"] .lbl-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
.nav-toggle[aria-expanded="true"] .lbl-close{display:inline}

.site-nav__list{list-style:none;margin:0}
.site-nav__list a{text-decoration:none;color:var(--text)}
.site-nav__list a:hover{color:var(--link-hover)}
.site-nav__list a.is-active{color:var(--accent)}

/* Mobile panel (below 900px) */
@media (max-width:899.98px){
  .site-nav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;background:var(--bg);border-top:1px solid var(--line);
    display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-7);padding:var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-12px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
  .site-nav.is-open{visibility:visible;opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  .site-nav__list li{border-bottom:1px solid var(--line)}
  .site-nav__list a{display:flex;align-items:center;justify-content:space-between;min-height:64px;
    font:800 clamp(2.25rem, 1.5rem + 4vw, 3.5rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;color:var(--heading)}
  .site-nav__list a::after{content:attr(data-tc);font:500 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--muted)}
  .site-nav__foot{display:grid;gap:var(--s-5)}
  .site-nav__extra{display:grid;gap:var(--s-1)}
  .site-nav__extra a{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none}
  .site-nav__extra > a{justify-self:start;font:500 1.125rem/1.2 var(--font-text);color:var(--heading)}
  .site-nav__extra ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
  .site-nav__extra ul a{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .site-nav__extra a:hover{color:var(--link-hover)}
  .site-nav__cta{width:100%}
  /* No JS: the menu button cannot work, so the nav sits in the header as a plain row of links */
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .site-header{height:auto;margin-bottom:0;position:relative}
  html:not(.js) .site-header__in{flex-wrap:wrap;padding-block:10px}
  html:not(.js) .site-nav{position:static;visibility:visible;opacity:1;transform:none;padding:0 0 8px;border:0;background:none;flex-direction:row;flex-wrap:wrap;gap:4px 16px}
  html:not(.js) .site-nav__list{display:flex;flex-wrap:wrap;gap:0 16px}
  html:not(.js) .site-nav__list li{border:0}
  html:not(.js) .site-nav__list a{min-height:44px;font:500 13px/1 var(--font-mono);letter-spacing:.12em}
  html:not(.js) .site-nav__list a::after{content:none}
  html:not(.js) .site-nav__foot{display:contents}
  html:not(.js) .site-nav__extra{display:none}
  html:not(.js) .site-nav__cta{width:auto}
  html:not(.js) .hero{padding-top:clamp(2rem, 1rem + 4vw, 4.5rem)}
}
@media (min-width:900px){
  .nav-toggle{display:none}
  .site-nav{display:flex;align-items:center;gap:clamp(16px, 2.4vw, 40px)}
  .site-nav__foot{display:contents}
  .site-nav__extra{display:none}
  .site-nav__list{display:flex;gap:clamp(6px, 2vw - 8px, 24px)}
  .site-nav__list a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px;
    font:500 13px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
  .site-nav__list a::after{content:"";position:absolute;left:4px;right:calc(4px + .12em);bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur-2) var(--ease-standard)}
  .site-nav__list a:hover::after,.site-nav__list a.is-active::after{transform:scaleX(1)}
}
/* Narrow desktops: keep the lockup on one line beside the full nav */
@media (min-width:900px) and (max-width:1079.98px){
  .site-nav__list a{letter-spacing:.08em}
  .site-nav__list a::after{right:calc(4px + .08em)}
  .site-nav__cta{padding-inline:16px calc(16px - .12em)}
}

/* ---------- 8. Grain, beam (BRAND §5.7, §5.8) ---------- */
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.beam{position:relative}
.beam::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--wb-amber);transform-origin:left;pointer-events:none}

/* ---------- 9. Hero ---------- */
.hero{padding-top:calc(var(--header-h) + clamp(2rem, 1rem + 3.5vw, 4rem));overflow:hidden}
.hero__spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 600ms var(--ease-out);
  background:radial-gradient(560px circle at var(--x, 70%) var(--y, 40%), color-mix(in srgb, var(--wb-paper) 7%, transparent), transparent 70%)}
.hero__spot::after{content:"";position:absolute;inset:0;opacity:.08;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(420px circle at var(--x, 70%) var(--y, 40%), var(--wb-letterbox), transparent 70%);mask-image:radial-gradient(420px circle at var(--x, 70%) var(--y, 40%), var(--wb-letterbox), transparent 70%)}
.hero.is-lit .hero__spot{opacity:1}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
.hero__title{font:800 var(--fs-hero)/.88 var(--font-display);letter-spacing:-.005em;text-transform:uppercase;color:var(--heading);margin-top:var(--s-2)}
.hero__lead{font-size:var(--fs-lead);line-height:1.55;max-width:38ch;color:var(--text)}
.hero__ctas{margin-top:var(--s-6)}
.hero__ctas .btn{flex:1 1 auto}
@media (min-width:480px){ .hero__ctas .btn{flex:0 0 auto} }

.programme{display:none}
.screen-wrap{position:relative;min-width:0}
.screen{position:relative}
.screen__frame{position:relative;aspect-ratio:16/9;background:var(--wb-letterbox);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.screen__still{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease-in-out)}
.screen__still.is-current{opacity:1}
.screen__still img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.screen__corners{position:absolute;inset:-10px;pointer-events:none}
.screen__corners span{position:absolute;width:14px;height:14px;border:0 solid var(--wb-ash)}
.screen__corners span:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.screen__corners span:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.screen__corners span:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.screen__corners span:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.screen__bar{display:flex;align-items:center;min-height:44px;margin-top:var(--s-4);font:500 var(--fs-credit)/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.screen__caps{display:grid}
.screen__cap{grid-area:1/1}
.screen__cap b{font-weight:500;color:var(--text)}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;margin-top:var(--s-3);background:transparent;
  border:1px solid var(--line-strong);color:var(--text);font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:border-color var(--dur-2) var(--ease-standard),background-color var(--dur-2) var(--ease-standard)}
.motion-toggle:hover{border-color:var(--text)}
.motion-toggle .icon{width:14px;height:14px;fill:currentColor;stroke:none}
.motion-toggle .i-play{display:none}
.motion-toggle[aria-pressed="true"] .i-play{display:block}
.motion-toggle[aria-pressed="true"] .i-pause{display:none}
@media (min-width:600px){
  .screen__bar{padding-right:180px}
  .motion-toggle{position:absolute;right:0;bottom:0;margin:0}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(2.5rem, 1rem + 2.5vw, 3.5rem)}
  .hero__head{grid-column:1/-1}
  .hero__copy{grid-column:1/6;display:flex;flex-direction:column}
  .screen-wrap{grid-column:6/-1}
  .hero__ctas{margin-top:var(--s-6)}
  .programme{display:block;margin-top:auto;padding-top:var(--s-7)}
}
@media (min-width:900px) and (max-width:1199.98px){ .hero__ctas .btn{padding-inline:20px calc(20px - .12em)} }
@media (min-width:1200px){
  .hero{padding-top:calc(var(--header-h) + 2.5rem)}
  .hero__grid{row-gap:2.5rem}
  .hero__head{position:relative}
  .hero__title{margin-top:0}
  .hero__eyebrow{position:absolute;right:0;bottom:1.4rem;margin:0}
  .hero__copy{grid-column:1/6}
  .screen-wrap{grid-column:6/-1}
}
/* Programme: the "now showing" index beside the screen (≥900px) */
.programme__label{margin-bottom:var(--s-3);color:var(--muted)}
.programme__list{list-style:none;border-top:1px solid var(--line)}
.programme__item{position:relative;border-bottom:1px solid var(--line)}
.programme__item a{display:grid;grid-template-columns:2.5rem 1fr auto;align-items:center;min-height:56px;gap:12px;text-decoration:none;color:var(--muted);
  transition:color var(--dur-2) var(--ease-standard)}
.programme__item a:hover,.programme__item.is-current a{color:var(--heading)}
.programme__no,.programme__year{font:500 var(--fs-credit)/1 var(--font-mono);letter-spacing:.14em}
.programme__title{font:700 1.625rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.programme__bar{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--wb-paper);transform:scaleX(0);transform-origin:left}
.programme__item.is-current .programme__bar{transform:scaleX(1)}
.anim .programme__item.is-current .programme__bar{transform:scaleX(0);animation:progress var(--still-cycle) linear forwards}
.anim .hero.is-held .programme__bar,.anim .hero.is-held .screen__still img{animation-play-state:paused!important}
.anim .screen__still.is-pushing img{animation:push var(--still-cycle) linear forwards}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Marquee (BRAND §5.8): static wrapped line unless motion is allowed */
.marquee{margin-top:clamp(3rem, 2rem + 4vw, 6rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding-block:clamp(14px, 1.5vw, 22px)}
.marquee__track{display:flex;width:max-content;max-width:none}
.marquee__seq{list-style:none;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
  font:300 clamp(1.75rem, 1rem + 3.4vw, 4.25rem)/1.1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.marquee__seq li{display:inline-flex;align-items:center}
.marquee__seq li::after{content:"";width:.16em;height:.16em;margin-inline:.55em;border-radius:50%;background:var(--wb-smoke)}
.marquee__seq[aria-hidden="true"]{display:none}
/* Static line (reduced motion, no JS): set on the grid like a title card. Each item carries its dot in front and the
   first dot of every line is clipped (see .seps), so a wrapped line never starts or ends with a dot. */
.marquee__track:not(.is-running){display:block;width:auto;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.marquee__track:not(.is-running) .marquee__seq{--sep:1.26em;justify-content:flex-start;font-size:clamp(1.75rem, 0.9rem + 2.5vw, 3.25rem);row-gap:.15em;
  margin-left:calc(-1 * var(--sep));clip-path:inset(-.5em -.5em -.5em var(--sep))}
.marquee__track:not(.is-running) .marquee__seq li::after{content:none}
.marquee__track:not(.is-running) .marquee__seq li::before{content:"";flex:none;width:.16em;height:.16em;margin-inline:.55em;border-radius:50%;background:var(--wb-smoke)}
.anim .marquee__track.is-running .marquee__seq{flex-wrap:nowrap}
.anim .marquee__track.is-running .marquee__seq[aria-hidden="true"]{display:flex}
.anim .marquee__track.is-running{animation:marquee 40s linear infinite}
.anim .marquee:hover .marquee__track.is-running,.anim .marquee:focus-within .marquee__track.is-running,.anim.motion-off .marquee__track.is-running{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 10. Proof strip ---------- */
.proof{border-bottom:1px solid var(--line)}
.proof__list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.proof__item{display:flex;flex-direction:column;gap:10px;padding:clamp(28px, 2rem + 1vw, 48px) clamp(14px, 2vw, 32px)}
.proof__item:nth-child(even){border-left:1px solid var(--line)}
.proof__item:nth-child(n+3){border-top:1px solid var(--line)}
.proof__item:nth-child(odd){padding-left:0}
.proof__fig{font:800 clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem)/.88 var(--font-display);letter-spacing:0;text-transform:uppercase;color:var(--heading)}
.proof__fig--accent{color:var(--accent)}
.proof__label{font-size:var(--fs-small);line-height:1.45;color:var(--text);max-width:22ch}
.proof__meta{margin-top:auto;padding-top:6px;color:var(--muted)}
@media (min-width:900px){
  .proof__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .proof__item:nth-child(n){border-top:0;border-left:1px solid var(--line);padding-left:clamp(20px, 2vw, 32px)}
  .proof__item:first-child{border-left:0;padding-left:0}
}

/* ---------- 11. Work ---------- */
.feature__main{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
.feature__timeline,.feature__credits{margin-top:clamp(3.5rem, 2rem + 5vw, 7rem)}
.feature__index{color:var(--muted);margin-bottom:var(--s-4)}
.feature__title{font:800 var(--fs-title)/.9 var(--font-display);text-transform:uppercase;letter-spacing:0;color:var(--heading)}
.feature__billing{margin-top:var(--s-4);font:400 var(--fs-billing)/1.2 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);max-width:40ch}
.feature__story{max-width:60ch}
.feature__body > * + *{margin-top:var(--s-5)}
.feature__credit{margin-top:var(--s-3);color:var(--muted)}
.feature__links{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px}
.stat{display:flex;align-items:center;gap:var(--s-4);padding-block:var(--s-5);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat__num{font:800 clamp(3rem, 2.4rem + 2.4vw, 4.5rem)/.85 var(--font-display);color:var(--accent);flex:none}
.stat__label{display:flex;flex-direction:column;gap:2px;color:var(--muted)}
@media (min-width:900px){
  .feature__main{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:0}
  .feature__media{grid-column:1/8;grid-row:1/3;align-self:start;position:sticky;top:calc(var(--header-h) + 32px)}
  .feature__head{grid-column:9/13;grid-row:1}
  .feature__body{grid-column:9/13;grid-row:2;margin-top:var(--s-6)}
  .feature--flip .feature__media{grid-column:6/13}
  .feature--flip .feature__head,.feature--flip .feature__body{grid-column:1/5}
}
/* Narrow desktops: an even 6/6 split so the text column is never cramped beside the sticky player */
@media (min-width:900px) and (max-width:1199.98px){
  .feature__media{grid-column:1/7}
  .feature__head,.feature__body{grid-column:7/13;padding-left:var(--s-4)}
  .feature--flip .feature__media{grid-column:7/13}
  .feature--flip .feature__head,.feature--flip .feature__body{grid-column:1/7;padding-left:0;padding-right:var(--s-4)}
}
@media (min-width:1200px){
  .feature__head,.feature__body{grid-column:8/13;padding-left:clamp(0px, 2vw, 32px)}
  .feature--flip .feature__head,.feature--flip .feature__body{grid-column:1/6;padding-left:0;padding-right:clamp(0px, 2vw, 32px)}
}

/* lite-youtube (vendor CSS folded in here, so the site loads one stylesheet), re-skinned: our own poster
   (no third-party request before a click), amber play disc */
lite-youtube{position:relative;display:block;contain:content;cursor:pointer;background-color:var(--wb-letterbox);box-shadow:0 0 0 1px var(--line)}
lite-youtube::after{content:"";display:block;padding-bottom:56.25%}
lite-youtube > iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
lite-youtube > .lyt-poster{position:absolute;inset:0}
lite-youtube > .lyt-poster img{width:100%;height:100%;object-fit:cover}
lite-youtube > .lyt-playbtn{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:100%;height:100%;border:0;cursor:pointer;text-decoration:none;color:var(--wb-black)}
lite-youtube > .lyt-playbtn:focus-visible{outline:2px solid var(--focus);outline-offset:-6px}
/* Two-tone ring on the disc: visible on any part of any artwork */
lite-youtube > .lyt-playbtn:focus-visible .play-disc{box-shadow:0 0 0 3px var(--wb-black),0 0 0 5px var(--wb-paper)}
lite-youtube.lyt-activated{cursor:unset}
lite-youtube.lyt-activated > .lyt-playbtn{display:none}
.lyt-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.play-disc{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--wb-amber);color:var(--wb-black);
  transition:transform 160ms var(--ease-standard),background-color 160ms var(--ease-standard)}
.play-disc svg{width:22px;height:22px;fill:currentColor;stroke:none;margin-left:3px}
lite-youtube:hover .play-disc,lite-youtube .lyt-playbtn:focus-visible .play-disc{transform:scale(1.04);background:var(--wb-amber-300)}
@media (min-width:900px){ .play-disc{width:76px;height:76px} .play-disc svg{width:26px;height:26px} }

/* Release timeline: an edit-suite ruler */
.timeline{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);border-left:1px solid var(--line-strong);margin-left:4px}
.timeline li{position:relative;display:grid;gap:4px;padding:0 0 var(--s-5) var(--s-5)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-5px;top:4px;width:9px;height:9px;background:var(--bg);border:1px solid var(--text)}
.timeline li:last-child::before{background:var(--text)}
.timeline time{font:500 var(--fs-credit)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.timeline span{font:700 1.375rem/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--heading)}
@media (min-width:900px){
  .timeline{grid-template-columns:repeat(5,minmax(0,1fr));border-left:0;border-top:1px solid var(--line-strong);margin-left:0;column-gap:var(--col-gap)}
  .timeline li{padding:var(--s-5) 0 0}
  .timeline li::before{left:0;top:-5px}
  .timeline span{font-size:1.625rem}
}

/* Billing block: poster-style credits */
.billing{border-top:1px solid var(--line);padding-top:clamp(2.5rem, 2rem + 2vw, 4rem);text-align:center}
.billing .mini-title{margin-bottom:var(--s-6)}
.billing__list{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px, 1vw + 8px, 22px) clamp(24px, 3vw, 48px);max-width:72rem;margin-inline:auto}
.billing__list > div{display:flex;flex-direction:column;align-items:center;gap:6px}
.billing dt{font:400 clamp(.875rem, .8rem + .3vw, 1.0625rem)/1.1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.billing dd{font:700 clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem)/1 var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--heading)}
.billing__foot{margin-top:var(--s-6);color:var(--muted)}
@media (min-width:600px){ .billing__list > div{flex-direction:row;align-items:baseline;gap:.6em} }

/* Shiva Phonk panel */
.wash-band{padding-block:clamp(4rem, 2.5rem + 6vw, 8.5rem);margin-top:clamp(5rem, 3rem + 8vw, 10rem)}
.quote{border-left:1px solid var(--wb-amber);padding-left:var(--s-5)}
.quote p{font:300 var(--fs-quote)/1.05 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:var(--heading)}
.quote figcaption{margin-top:var(--s-4);color:var(--muted)}
.credits-mini{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.credits-mini > div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
@media (min-width:600px) and (max-width:899.98px), (min-width:1200px){ .credits-mini > div{grid-template-columns:minmax(0,16.5rem) minmax(0,1fr);gap:var(--s-4)} }
.credits-mini dt{font:500 var(--fs-credit)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.credits-mini dd{--pm-w:2.6;font:700 1.25rem/1.15 var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--heading)}

/* Next on the slate */
.slate-wrap{padding-top:clamp(4rem, 2.5rem + 6vw, 8.5rem)}
.slate{position:relative;display:grid;gap:var(--s-6);padding:clamp(28px, 1rem + 4vw, 72px);background:var(--surface);border:1px solid var(--line)}
.slate::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--wb-amber)}
.slate__title{font:800 var(--fs-h2)/.92 var(--font-display);text-transform:uppercase;color:var(--heading)}
.slate__line{font-size:var(--fs-lead);line-height:1.5;margin-bottom:var(--s-5)}
.slate .feature__index{margin-bottom:var(--s-4)}
@media (min-width:900px){
  .slate{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .slate__main{grid-column:1/9}
  .slate__aside{grid-column:9/13}
}

/* ---------- 12. Services: numbered rows (BRAND §5.7) ---------- */
.svc{list-style:none;border-top:1px solid var(--line)}
.svc__row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-4);row-gap:var(--s-2);padding:var(--s-5) 0;border-bottom:1px solid var(--line);align-items:center}
.svc__no{font:500 var(--fs-credit)/1 var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.svc__icon{color:var(--muted);justify-self:end;grid-column:2;grid-row:1}
.svc__no{grid-column:1;grid-row:1}
.svc__title{grid-column:1/-1;font:700 var(--fs-h3)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin-top:var(--s-2)}
.svc__line{grid-column:1/-1;color:var(--muted);max-width:52ch}
.svc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);margin-top:var(--s-7)}
.svc-foot p{color:var(--muted);max-width:44ch}
@media (min-width:900px){
  .svc__row{grid-template-columns:4.5rem 3rem minmax(0,6fr) minmax(0,5fr);column-gap:var(--col-gap);padding:clamp(22px, 1rem + .8vw, 32px) 0}
  .svc__no{grid-column:1;grid-row:1}
  .svc__icon{grid-column:2;grid-row:1;justify-self:start;width:28px;height:28px}
  .svc__title{grid-column:3;grid-row:1;margin:0}
  .svc__line{grid-column:4;grid-row:1}
}

/* ---------- 13. How a production runs (paper) ---------- */
.steps{list-style:none;display:grid;grid-template-columns:minmax(0,1fr)}
.step{position:relative;padding:0 0 var(--s-7) var(--s-6);border-left:1px solid var(--line-strong);margin-left:5px}
.step:last-child{padding-bottom:0;border-left-color:transparent}
.step::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;background:var(--text)}
/* Numerals in light black, not Ember: on this band Ember is kept for the eyebrow (one warm job per view) */
.step__no{display:block;font:300 clamp(3rem, 2.2rem + 3vw, 5.5rem)/.85 var(--font-display);color:var(--heading);margin-bottom:var(--s-4)}
.step__title{font:700 var(--fs-h3)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:var(--s-3)}
.step p{color:var(--text);max-width:34ch;font-size:var(--fs-small);line-height:1.6}
/* Tablet: numeral beside the stage, so the band is used edge to edge */
@media (min-width:600px) and (max-width:899.98px){
  .step{display:grid;grid-template-columns:7.5rem minmax(0,1fr);column-gap:var(--s-5);align-items:start}
  .step__no{grid-row:1/3;margin:0}
  .step__title{margin-top:.15em}
  .step p{max-width:52ch}
}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--col-gap);border-top:1px solid var(--line-strong)}
  .step,.step:last-child{padding:var(--s-6) 0 0;border-left:0;margin-left:0}
  .step::before{left:0;top:-6px}
  /* Sized to the column so PRE-PRODUCTION / POST-PRODUCTION never break at the hyphen */
  .step__title{font-size:clamp(1.5rem, 2.8vw, var(--fs-h3));white-space:nowrap}
}

/* ---------- 14. White and Black Music ---------- */
.imprint{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:500 12px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--wb-paper)}
.imprint__dot{width:8px;height:8px;border-radius:50%;background:var(--wb-amber);box-shadow:0 0 0 4px color-mix(in srgb, var(--wb-amber) 18%, transparent);flex:none}
.music__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8)}
.music__intro > .lead + p{margin-top:var(--s-5);max-width:60ch}
.demo{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line)}
.demo__title{font:700 var(--fs-h3)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:var(--s-3)}
.demo p{color:var(--muted);max-width:52ch;margin-bottom:var(--s-5)}
.releases{background:var(--surface);border:1px solid var(--line);padding:clamp(20px, 1rem + 2vw, 40px)}
.releases__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-4);padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.releases__head .mini-title{margin:0}
.release-list{list-style:none}
.release{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s-2) var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--line);align-items:center}
.release:last-child{border-bottom:0;padding-bottom:0}
.release__art{grid-row:1/3;width:72px;height:72px}
.release__art img{width:72px;height:72px;object-fit:cover}
.release__slot{grid-row:1/3;display:grid;place-items:center;width:72px;height:72px;background:var(--surface-2);border:1px solid var(--line)}
.release__no{font:800 2.25rem/1 var(--font-display);letter-spacing:.02em;color:var(--muted)}
.release__next{color:var(--muted)}
.release__meta.seps{--sep:1.2em}
.release__title{font:700 1.75rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--heading)}
.release__meta{font-size:var(--fs-small);color:var(--muted);line-height:1.45}
.release__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:var(--s-2)}
.release__foot time{color:var(--muted)}
@media (min-width:600px){
  .release{grid-template-columns:96px minmax(0,1fr);gap:var(--s-2) var(--s-5)}
  .release__art,.release__art img,.release__slot{width:96px;height:96px}
  .release__no{font-size:3rem}
}
@media (min-width:900px){
  .music__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .music__intro{grid-column:1/7}
  .releases{grid-column:8/13;align-self:start}
}

/* ---------- 15. Events & artists ---------- */
.events__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8)}
.events__head{margin-bottom:calc(var(--s-6) - var(--s-8))}
.events__list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--s-7);border-top:1px solid var(--line)}
.events__list li{display:flex;align-items:baseline;gap:var(--s-4);padding:14px 0;border-bottom:1px solid var(--line);
  font:700 clamp(1.375rem, 1.2rem + .7vw, 1.875rem)/1.05 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--heading)}
.events__list li span{font:500 var(--fs-credit)/1 var(--font-mono);letter-spacing:.14em;color:var(--muted);min-width:2.2rem}
.events__artists{margin-top:var(--s-7);max-width:56ch}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s-4);font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.note .icon{width:18px;height:18px;margin-top:1px;color:var(--text)}
.events .btn-row{margin-top:var(--s-6)}
/* The launch still, framed as a contact print (the source is 359px wide, shown at most 240px: BRAND §5.9) */
.events__photo{justify-self:start;width:min(100%, calc(240px + 2 * var(--s-4)));padding:var(--s-4) var(--s-4) var(--s-5);background:var(--surface);border:1px solid var(--line)}
.events__photo picture{display:block;aspect-ratio:2/3;max-width:240px}
.events__photo img{width:100%;height:100%;object-fit:cover}
.events__photo figcaption{margin-top:var(--s-4);color:var(--muted);font:500 var(--fs-credit)/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
@media (min-width:600px){ .events__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)} }
@media (min-width:600px) and (max-width:899.98px){
  .events__photo{display:grid;grid-template-columns:240px 13rem;column-gap:var(--s-5);align-items:end;width:auto}
  .events__photo figcaption{margin:0}
}
@media (min-width:900px){
  .events__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:0;align-items:start}
  .events__head{grid-column:1/-1;margin-bottom:var(--s-6)}
  .events__text{grid-column:1/9}
  .events__photo{grid-column:9/13;justify-self:end;margin-top:.4rem}
}

/* ---------- 16. About / producer (paper) ---------- */
.about__intro .lead{max-width:52ch}
.producer{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7);margin-top:clamp(4rem, 2.5rem + 6vw, 8rem);padding-top:clamp(3rem, 2rem + 3vw, 5rem);border-top:1px solid var(--line)}
.producer__photo{max-width:420px}
.producer__photo picture{display:block;aspect-ratio:1;background:var(--wb-black)}
.producer__photo img{width:100%;height:100%;object-fit:cover}
.producer__photo figcaption{margin-top:var(--s-3);color:var(--muted)}
.producer__lede{font:300 var(--fs-quote)/1.05 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:var(--heading);max-width:26ch;text-wrap:balance}
.producer__note blockquote{margin:0}
.producer__note blockquote p + p{margin-top:var(--s-5)}
.producer__note blockquote p:not(.producer__lede){max-width:58ch}
.producer__lede + p{margin-top:var(--s-6)!important}
.producer__sig{margin-top:var(--s-7);display:flex;align-items:center;gap:var(--s-4);font:400 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:.04em;color:var(--heading)}
.producer__sig::before{content:"";width:40px;height:1px;background:var(--rule)}
.producer__role{margin-top:var(--s-3);color:var(--muted)}
.producer__links{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px;margin-top:var(--s-5)}
@media (min-width:600px) and (max-width:899.98px){
  .producer{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col-gap);align-items:start}
  .producer__photo{max-width:none;position:sticky;top:calc(var(--header-h) + 24px)}
  .producer__lede{max-width:none}
}
@media (min-width:900px){
  .producer{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .producer__photo{grid-column:1/5;max-width:none;position:sticky;top:calc(var(--header-h) + 32px)}
  .producer__note{grid-column:6/13}
}

/* ---------- 17. Collaborators (paper): end-credits ---------- */
.collab{padding-bottom:var(--section-y)}
.collab__inner{padding-top:clamp(3rem, 2rem + 3vw, 5rem);border-top:1px solid var(--line-strong)}
.collab__list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.collab__list li{display:flex;flex-direction:column;gap:8px;padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.collab__name{font:700 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--heading)}
.collab__role{color:var(--text)}
.collab__work{color:var(--muted);margin-top:-4px}
@media (min-width:600px){ .collab__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)} }
@media (min-width:1200px){ .collab__list{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)} .collab__list li{border-bottom:0} }

/* ---------- 18. Contact + form ---------- */
.contact__title{font:800 var(--fs-title)/.88 var(--font-display);text-transform:uppercase;color:var(--heading)}
.contact__kicker{margin-top:var(--s-4);font:300 var(--fs-quote)/1.05 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8);margin-top:clamp(3rem, 2rem + 4vw, 6rem)}
.contact__aside > p{max-width:40ch}
.contact__email{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:var(--s-6);font:600 clamp(1.0625rem, 1rem + .4vw, 1.375rem)/1.3 var(--font-text);
  color:var(--heading);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.3em;white-space:nowrap;
  transition:color var(--dur-1) var(--ease-standard),text-decoration-color var(--dur-1) var(--ease-standard)}
.contact__email:hover{color:var(--link-hover);text-decoration-color:currentColor}
@media (max-width:359.98px){ .contact__email{white-space:normal;overflow-wrap:anywhere} }
.contact__meta{margin-top:var(--s-7);border-top:1px solid var(--line)}
.contact__meta > div{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.contact__meta dt{color:var(--muted);margin-bottom:6px}
.contact__meta dd{margin:0}
.social{list-style:none;display:flex;flex-wrap:wrap;gap:0 20px}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.3em}
.social a:hover{color:var(--link-hover);text-decoration-color:currentColor}
.social .icon{width:20px;height:20px}
/* CLIENT: phone / WhatsApp slot styles (used once the commented block in the HTML is filled in) */
.contact-direct{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-5)}

.form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
.form__note{color:var(--muted);font-size:var(--fs-small)}
.field{display:flex;flex-direction:column;min-width:0}
.field label{font:500 var(--fs-small)/1.3 var(--font-text);color:var(--text);margin-bottom:var(--s-2)}
.field .req{color:var(--text)}
.field .opt{color:var(--muted);font-weight:400}
.field__hint{margin-top:var(--s-2);font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.input{width:100%;min-height:52px;padding:0 16px;font:400 16px/1.4 var(--font-text);color:var(--text);background:var(--field-bg);
  border:1px solid var(--field-border);border-radius:0;transition:border-color var(--dur-1) var(--ease-standard)}
.input::placeholder{color:var(--placeholder);opacity:1}
.input:hover{border-color:var(--wb-ash)}
.input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--text)}
textarea.input{min-height:168px;padding:14px 16px;resize:vertical;line-height:1.55}
select.input{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A39E95' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
select.input option{background:var(--wb-surface);color:var(--wb-paper)}
.input[aria-invalid="true"]{border-color:var(--err)}
.field__error{display:flex;align-items:flex-start;gap:8px;margin-top:var(--s-2);font-size:var(--fs-small);line-height:1.4;color:var(--err)}
.field__error .icon{width:16px;height:16px;margin-top:2px}
.form__consent{font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.form__consent a{color:var(--text)}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
/* The live region stays rendered (never display:none) so screen readers hear what is written into it */
.form__status:empty{padding:0;border:0;background:none}
.form__status{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line-strong);background:var(--surface);font-size:var(--fs-body);line-height:1.5}
.form__status .icon{width:22px;height:22px;margin-top:1px}
.form__status.is-ok{border-color:var(--ok)}
.form__status.is-ok .icon{color:var(--ok)}
.form__status.is-err{border-color:var(--err)}
.form__status.is-err .icon{color:var(--err)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:none}
.btn.is-busy .spinner{display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:600px){
  .form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
  .field--full,.form__note,.form__consent,.form__actions,.form__status{grid-column:1/-1}
}
@media (min-width:900px){
  .contact__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .contact__aside{grid-column:1/6;position:sticky;top:calc(var(--header-h) + 32px)}
  .form{grid-column:7/13}
}
@media (min-width:1200px){
  .contact__aside{grid-column:1/5}
  .form{grid-column:6/13}
}

/* ---------- 19. Footer (BRAND §6.4) ---------- */
.site-footer{border-top:1px solid var(--line);padding-top:clamp(4rem, 3rem + 4vw, 7rem)}
/* Phones: brand block with the heritage mark beside it, then Explore (two short columns of links), then Contact */
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-5);row-gap:var(--s-7)}
.footer__brand{grid-column:1;grid-row:1}
.footer__mark{grid-column:2;grid-row:1;align-self:start}
.footer__cols{grid-column:1/-1}
.footer__brand .brand{margin-bottom:var(--s-5)}
.footer__tag{font:700 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--heading);max-width:16ch}
.footer__desc{margin-top:var(--s-4);color:var(--muted);max-width:40ch;font-size:var(--fs-small)}
.footer__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6) clamp(32px, 5vw, 80px)}
.footer__col h2{font:500 var(--fs-credit)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2)}
.footer__col ul{list-style:none}
.footer__col--explore ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
.footer__col a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--text);text-decoration:none;font-size:var(--fs-small)}
.footer__col a:hover{color:var(--link-hover);text-decoration:underline}
.footer__col .footer__email{white-space:nowrap}
.footer__col .icon{width:14px;height:14px}
.footer__mark img{width:41px;height:72px}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s-3) var(--s-6);margin-top:var(--s-8);padding-block:var(--s-5);border-top:1px solid var(--line);
  font:400 12px/1.6 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.footer__legal p{max-width:110ch;min-width:0}
.footer__legal p > span:not(.seps){display:block}
.footer__legal p > span + span{margin-top:2px}
.footer__legal .seps{--sep:2.1em}
.footer__legal a{color:var(--text)}
.footer__legal a:hover{color:var(--link-hover)}
.footer__legal ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 20px}
.footer__legal ul a{display:inline-flex;align-items:center;min-height:44px}
.footer__legal a[aria-current]{color:var(--link-hover)}
@media (min-width:600px){
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__col--explore ul{display:block}
}
@media (min-width:900px){
  .footer__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .footer__brand{grid-column:1/6}
  /* Link columns sit on the page grid: Explore on 2 columns, Contact on the rest */
  .footer__cols{grid-column:6/12;grid-row:1;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--col-gap)}
  .footer__col--explore{grid-column:span 2}
  .footer__col--contact{grid-column:span 4}
  .footer__mark{grid-column:12/13;grid-row:1;justify-self:end}
}
@media (min-width:1200px){
  .footer__brand{grid-column:1/5}
  .footer__cols{grid-column:7/12;grid-template-columns:repeat(5,minmax(0,1fr))}
  .footer__col--contact{grid-column:span 3}
}

/* ---------- SP Group strip: identical on all three sites (BRAND-SYSTEMS §6.2). Do not theme. ---------- */
.sp-strip{background:#0A1424;color:#A9B1BF;border-top:1px solid rgb(219 185 99 / .24);
  font-family:"Geist Mono","Geist Mono Fallback","Courier New",monospace;font-size:13px;line-height:1.5}
.sp-strip__in{max-width:1360px;margin-inline:auto;padding:16px var(--gutter, 16px);display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.sp-strip__brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#F3EEE3;text-decoration:none}
.sp-strip__brand img{display:block;width:30px;height:36px;object-fit:contain}
.sp-strip__label{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#A9B1BF}
.sp-strip__links{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;margin:0;padding:0}
.sp-strip__links a{display:inline-flex;align-items:center;min-height:44px;color:#F3EEE3;text-decoration:none;text-underline-offset:.25em}
.sp-strip__links a:hover{text-decoration:underline}
.sp-strip__links a[aria-current]{color:#DBB963;text-decoration:underline;text-decoration-thickness:1px}
.sp-strip a:focus-visible{outline:2px solid #DBB963;outline-offset:2px}

/* ---------- 20. Inner pages: page head, prose, error page ---------- */
.legal-band{padding-top:clamp(3.5rem, 2rem + 5vw, 7rem)}
.legal{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
.legal__toc{border-top:1px solid var(--line-strong);padding-top:var(--s-4)}
.legal__toc ol{list-style:none;counter-reset:toc}
.legal__toc li{counter-increment:toc}
.legal__toc a{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--text);text-decoration:none;font-size:var(--fs-small)}
.legal__toc a::before{content:counter(toc, decimal-leading-zero);flex:none;width:2.4em;font:500 var(--fs-credit)/1 var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.legal__toc a:hover{color:var(--link);text-decoration:underline}
/* Current section: Ember number and a 24px rule (desktop index, set by main.js) */
.legal__toc a[aria-current]{color:var(--heading);font-weight:500}
.legal__toc a[aria-current]::before{color:var(--accent)}
.legal__toc a[aria-current]::after{content:"";order:-1;flex:none;width:24px;height:1px;background:var(--rule)}
/* Phones and tablets: the same index, folded into a disclosure under the intro */
.legal__jump{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.legal__jump summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:52px;cursor:pointer;list-style:none;
  font:500 var(--fs-credit)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--heading)}
.legal__jump summary::-webkit-details-marker{display:none}
.legal__jump summary::after{content:"+";font:300 1.75rem/1 var(--font-display);color:var(--muted)}
.legal__jump[open] summary::after{content:"\2212"}
.legal__jump ol{list-style:none;counter-reset:toc;padding-bottom:var(--s-4)}
.legal__jump li{counter-increment:toc;border-top:1px solid var(--line)}
.legal__jump a{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--text);text-decoration:none}
.legal__jump a::before{content:counter(toc, decimal-leading-zero);flex:none;width:2.4em;font:500 var(--fs-credit)/1 var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.legal__jump a:hover{color:var(--link);text-decoration:underline}
@media (max-width:899.98px){ .legal__toc{display:none} }
@media (min-width:900px){
  .legal__jump{display:none}
  .legal{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .legal__toc{grid-column:1/4;position:sticky;top:calc(var(--header-h) + 32px);align-self:start}
  .legal .prose{grid-column:5/13}
}
.page-head{padding-top:calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem));padding-bottom:clamp(3rem, 2rem + 4vw, 6rem)}
.page-head__title{font:800 var(--fs-title)/.88 var(--font-display);text-transform:uppercase;color:var(--heading)}
.page-head__meta{margin-top:var(--s-5);color:var(--muted)}
.prose{max-width:var(--container-narrow)}
.prose > * + *{margin-top:var(--s-5)}
.prose h2{font:700 var(--fs-h3)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin-top:var(--s-8)}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.25em}
.prose li + li{margin-top:var(--s-2)}
.prose li::marker{color:var(--accent)}
.prose .lead{font-size:var(--fs-lead)}
.error-page{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--header-h) + var(--s-8)) var(--gutter) var(--s-9)}
.error-page > div{max-width:46rem;display:flex;flex-direction:column;align-items:center}
.error-page .eyebrow{justify-content:center}
.error-page h1{font:800 var(--fs-title)/.88 var(--font-display);text-transform:uppercase;color:var(--heading)}
.error-page p:not(.eyebrow){margin-top:var(--s-5);font-size:var(--fs-lead);line-height:1.55;max-width:40ch}
.error-page .btn{margin-top:var(--s-7)}
.error-page__mark{width:72px;height:72px;margin-bottom:var(--s-6)}
.error-page__routes{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s-6);margin-top:var(--s-5)}

/* ---------- 21. Motion (BRAND §2.5, §5.8): finished state is the default ---------- */
@media (prefers-reduced-motion: no-preference){
  .anim [data-reveal]:not(.is-in){opacity:0}
  .anim [data-reveal]{transition:opacity 480ms var(--ease-out);transition-delay:calc(var(--i, 0) * 90ms)}
  /* Keyboard focus never lands on something still fading in */
  .anim [data-reveal]:focus-within{opacity:1;transition:none}
  /* Shutter starts as a thin slit, not fully shut: a zero-area clip would hide the target from IntersectionObserver and lazy-loading */
  .anim [data-shutter]:not(.is-in){clip-path:inset(48% 0 48% 0)}
  .anim [data-shutter]{clip-path:inset(0 0 0 0);transition:clip-path var(--dur-reveal) var(--ease-shutter)}
  .anim .beam:not(.is-in)::before{transform:scaleX(0)}
  .anim .beam::before{transition:transform 900ms var(--ease-out)}
  .anim .eyebrow__rule{transition:transform 900ms var(--ease-out)}
  .anim [data-reveal]:not(.is-in) .eyebrow__rule{transform:scaleX(0)}
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out 125ms var(--ease-in-out) both}
  ::view-transition-new(root){animation:vt-in 125ms var(--ease-in-out) 125ms both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors: active){
  .btn,.input,.nav-toggle,.motion-toggle{border:1px solid ButtonText}
  .play-disc{forced-color-adjust:none}
}
@media print{
  .site-header,.marquee,.sp-strip,.motion-toggle,.grain::before{display:none!important}
  .t-screen,.t-paper{background:var(--wb-white)!important;color:var(--wb-black)!important}
}