/* Amrita Studio · site styles (v3)
   A cool-gray, monochrome world. Colour appears only in the set lab and when a film plays.
   Reading rule: every line of copy sits on a soft slate "pool" (desktop) or the bottom scrim
   (phones), so body text keeps at least 4.5:1 against what is behind it.
   Type floor: body 17 px on desktop and 16 px on phones; navigation 14/15 px; mono labels 12 px. */
:root {
  --bg: #a6aab5;
  --bg-deep: #8b909c;
  --ink: #f6f7fb;
  --ink-2: rgba(246, 247, 251, .88);
  --ink-3: rgba(246, 247, 251, .66);
  --line: rgba(255, 255, 255, .34);
  --line-2: rgba(255, 255, 255, .18);
  --glass: rgba(255, 255, 255, .09);
  --glass-2: rgba(255, 255, 255, .17);
  --slate: 82, 87, 101;          /* rgb triplet: the deepest silver used for scrims */
  --panel-rgb: 96, 101, 115;     /* the after-journey panel */
  --sky-rgb: 179, 185, 196;      /* the forms' sky: the page's own colour behind the tail (main.js sets body.is-tail) */
  --tail-solid: 104, 109, 123;   /* the panel at .9 over that sky: what the eye sees in the tail */
  --nectar: #fbf6ee;
  --shadow-ink: 0 1px 2px rgba(var(--slate), .3), 0 0 22px rgba(var(--slate), .5);
  --halo: 0 0 3px rgba(var(--slate), .5), 0 0 14px rgba(var(--slate), .75);
  --f-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --f-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --gl: max(var(--gutter), env(safe-area-inset-left, 0px));   /* landscape notches */
  --gr: max(var(--gutter), env(safe-area-inset-right, 0px));
  --radius: 20px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sv: 1vh;                     /* one "small viewport" unit, with a vh fallback */
  --span: 170;                   /* scroll length of one chapter, in --sv */
  --hero-span: 130;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --head-h: 76px;
}
@supports (height: 100svh) { :root { --sv: 1svh; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; } /* nothing that reaches past the edge may widen a phone's page */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 400;
  /* clip, not hidden: hidden makes the body a scroll container of its own, and every sticky stage then
     scrolls away with the page instead of holding the screen (the copy slid over the world) */
  overflow-x: hidden; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: rgba(255, 255, 255, .5); color: #343946; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(var(--slate), .45); border-radius: 6px; }
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: 999px;
  background: #fff; color: #343946; font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-160%); transition: transform .25s;
}
.skip:focus-visible { transform: none; }

/* ---------- canvas + scrim ---------- */
#gl {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh;
  display: block; z-index: 0; pointer-events: none;
}
/* from the forms on, the world steps out (main.js fades the canvas by scroll) and the page shows the forms' sky
   behind the tail's panel; the world returns for the end drop above the access section */
body.is-tail { background-color: rgb(var(--sky-rgb)); }
.scrim { display: none; }


/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; gap: 14px; text-align: center;
  background: var(--bg); color: #353a47; font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em;
  transition: opacity .9s ease, visibility .9s;
}
.loader__mark { font-family: var(--f-display); font-weight: 500; letter-spacing: .46em; font-size: 15px; padding-left: .46em; }
.loader__logo { display: block; width: 46px; height: 46px; margin: 0 auto 18px; transform: translateX(-.23em); }
.loader__logo .am-drop { fill: #e0a54a; }
.loader__bar { white-space: pre; letter-spacing: .08em; }
.loader__pct { color: #353a47; }
body.is-ready .loader { opacity: 0; visibility: hidden; }

/* ---------- header ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(18px, var(--safe-t)) var(--gr) 18px var(--gl);
  pointer-events: none;
  /* headroom (main.js headerState): a short slide and fade, transforms only, so nothing below moves */
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
}
.hud::before {
  content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(180deg, rgba(var(--panel-rgb), .82), rgba(var(--panel-rgb), 0));
}
/* after the journey the header is a frosted bar, so index rows never show through the wordmark */
body.is-late .hud::before {
  inset: 0; opacity: 1;
  background: rgba(var(--panel-rgb), .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 -1px 0 var(--line-2);
}
/* over a full-bleed scene (the forms, the set lab) the wordmark and nav float on the open sky: no bar */
body.is-late.over-stage .hud::before { opacity: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
body.hud-hidden .hud { transform: translate3d(0, -100%, 0); opacity: 0; }
body.hud-hidden .hud > * { pointer-events: none; } /* a hidden bar never catches a click; Tab still reaches it (and brings it back) */
.hud > * { pointer-events: auto; }
.wordmark { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 44px; text-decoration: none; line-height: 1; gap: 12px; padding: 4px 0; text-shadow: var(--halo); }
.wordmark__text { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
/* the mark: a fine A whose crossbar is a drop of nectar light (20 Oct brand); the line takes the text colour */
.wordmark__mark, .foot__mark, .loader__logo { flex: none; overflow: visible; }
.wordmark__mark { width: 34px; height: 34px; filter: drop-shadow(0 0 3px rgba(var(--slate), .5)) drop-shadow(0 0 12px rgba(var(--slate), .65)); }
.am-a { fill: none; stroke: currentColor; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.am-drop { fill: #ffc978; }
.foot__mark { width: 18px; height: 18px; vertical-align: -3px; margin-right: 10px; }
.foot__mark .am-a { stroke-width: 6; }
.wordmark__name { font-weight: 600; letter-spacing: .4em; font-size: 17px; }
.wordmark__sub { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; }
.hud__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-family: var(--f-mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-shadow: var(--halo); }
.hud__nav a { text-decoration: none; transition: opacity .2s; padding: 14px 0; position: relative; }
@media (min-width: 861px) {
  .hud__nav {
    padding: 4px 4px 4px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(var(--slate), .68); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    transition: background .5s, border-color .5s;
  }
  .hud__nav a:not(.pill) { padding: 12px 0; }
  .hud__nav .pill { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
  .hud__nav .pill:hover, .hud__nav .pill:focus-visible { background: rgba(255, 255, 255, .26); border-color: #fff; }
  body.is-late .hud__nav { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hud__nav a:not(.pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hud__nav a:not(.pill):hover::after, .hud__nav a:not(.pill):focus-visible::after { transform: scaleX(1); }
.pill {
  padding: 12px 20px !important; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--slate), .34); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  text-shadow: none; transition: background .25s, border-color .25s;
}
.pill:hover, .pill:focus-visible { background: rgba(var(--slate), .5); border-color: rgba(255, 255, 255, .7); }
/* the menu control: a glass pill with its word on wide screens, a round glass button on small phones */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px; flex: none;
  min-width: 46px; height: 46px; padding: 0 18px 0 16px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
  background: rgba(var(--slate), .4); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ink); font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.menu-btn:hover, .menu-btn:focus-visible { background: rgba(var(--slate), .58); border-color: rgba(255, 255, 255, .7); }
.menu-btn__lines, .menu-btn__lines::before { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; position: relative; }
.menu-btn__lines { transform: translateY(-3px); }
.menu-btn__lines::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; }
.menu-btn__label { line-height: 1; }
@media (min-width: 861px) {
  .hud { justify-content: flex-start; }
  .hud .wordmark { margin-right: auto; }
  .hud__nav + .menu-btn { margin-left: 10px; }
  .menu-btn { height: 48px; background: rgba(var(--slate), .68); border-color: rgba(255, 255, 255, .24); }
  body.is-late .menu-btn { background: rgba(var(--slate), .34); }
}
@media (max-width: 1080px) and (min-width: 861px) { .hud__opt { display: none; } }
/* the section in view: a quiet underline on the primary link */
.hud__nav a[aria-current]:not(.pill)::after { transform: scaleX(1); opacity: .7; }

/* ---------- the menu sheet: every section of the page, grouped, on every width ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 70; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 var(--gr) max(20px, var(--safe-b)) var(--gl);
  background: rgba(var(--panel-rgb), .9);
  backdrop-filter: blur(30px) saturate(1.2); -webkit-backdrop-filter: blur(30px) saturate(1.2);
  opacity: 0; transition: opacity .34s ease;
  overscroll-behavior: contain; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.sheet[hidden] { display: none; }
.sheet.is-open { opacity: 1; }
.sheet__top {
  position: sticky; top: 0; z-index: 2; flex: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 46px; padding: max(18px, var(--safe-t)) var(--gr) 16px var(--gl);
  margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl));
  background: linear-gradient(180deg, rgba(var(--panel-rgb), .96) 0, rgba(var(--panel-rgb), .9) 70%, rgba(var(--panel-rgb), 0) 100%);
}
.sheet__title { margin: 0; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.sheet__title-n { color: var(--ink-3); }
.sheet__close {
  display: inline-flex; align-items: center; gap: 12px; min-width: 46px; height: 46px; padding: 0 16px 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass); cursor: pointer;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  transition: background .25s, border-color .25s;
}
.sheet__close:hover, .sheet__close:focus-visible { background: var(--glass-2); border-color: rgba(255, 255, 255, .7); }
.sheet__x { position: relative; width: 16px; height: 16px; flex: none; }
.sheet__x::before, .sheet__x::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; }
.sheet__x::before { transform: rotate(45deg); }
.sheet__x::after { transform: rotate(-45deg); }
.wordmark--sheet { min-height: 46px; }

.sheet__nav {
  flex: none; display: grid; align-content: start; align-items: start; gap: 34px clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "journey explore studio" "journey films access";
  grid-template-rows: auto 1fr;
  padding: clamp(8px, 2vh, 28px) 0 clamp(20px, 3vh, 36px);
  max-width: 1480px; width: 100%; margin: auto;
}
.sheet__grp--journey { grid-area: journey; }
.sheet__grp--explore { grid-area: explore; }
.sheet__grp--films { grid-area: films; }
.sheet__grp--studio { grid-area: studio; }
.sheet__grp--access { grid-area: access; }
.sheet__grp { min-width: 0; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .45s ease, transform .6s var(--ease-out); transition-delay: calc(var(--g, 0) * 50ms + 40ms); }
.sheet.is-open .sheet__grp { opacity: 1; transform: none; }
.sheet__h {
  margin: 0 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.sheet__h-n { color: var(--ink-3); letter-spacing: .1em; font-size: 12px; }
.sheet__list { list-style: none; margin: 0; padding: 0; }
.sheet__list li + li { border-top: 1px solid var(--line-2); }
.sheet__list a {
  position: relative; display: flex; align-items: baseline; gap: 14px; min-height: 44px; padding: 11px 10px 11px 0; text-decoration: none;
  border-radius: 10px; transition: background .2s, padding .3s var(--ease);
}
.sheet__list a:hover, .sheet__list a:focus-visible { background: rgba(255, 255, 255, .07); padding-left: 10px; }
.sheet__n { flex: none; min-width: 2.2em; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sheet__t { min-width: 0; line-height: 1.3; }
.sheet__name { font-size: 19px; font-weight: 400; letter-spacing: -.01em; margin-right: 8px; }
.sheet__d { font-size: 14.5px; color: var(--ink-3); }
/* the explore, films and studio entries: the name larger, the line under it */
.sheet__grp:not(.sheet__grp--journey) .sheet__t { display: flex; flex-direction: column; gap: 4px; }
.sheet__grp:not(.sheet__grp--journey) .sheet__name { font-size: clamp(22px, 1.9vw, 28px); font-weight: 300; letter-spacing: -.025em; line-height: 1.05; }
.sheet__grp:not(.sheet__grp--journey) .sheet__list a { padding-top: 13px; padding-bottom: 13px; }
/* the section in view */
.sheet a[aria-current] .sheet__n { color: var(--ink); }
.sheet a[aria-current] .sheet__name::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: .18em; border-radius: 50%;
  background: var(--nectar); box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 0 10px rgba(255, 255, 255, .7);
}
.sheet__cta {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; min-height: 64px; padding: 16px 22px; text-decoration: none;
  border-radius: 22px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1);
  transition: background .25s, border-color .25s;
}
.sheet__cta:hover, .sheet__cta:focus-visible { background: rgba(255, 255, 255, .18); border-color: #fff; }
.sheet__cta-l { font-family: var(--f-serif); font-style: italic; font-size: clamp(28px, 2.4vw, 36px); line-height: 1; letter-spacing: -.01em; }
.sheet__cta-d { grid-column: 1; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sheet__cta-a { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; transition: transform .3s var(--ease); }
.sheet__cta:hover .sheet__cta-a { transform: translateX(4px); }
.sheet__foot { flex: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0; line-height: 1.6; color: var(--ink-3); text-align: center; }

/* two columns: the journey, then everything else */
@media (max-width: 1180px) {
  .sheet__nav { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "journey explore" "journey films" "journey studio" "journey access"; grid-template-rows: auto auto auto 1fr; gap: 26px clamp(28px, 4vw, 56px); }
}
/* phones and small tablets: one column; the shortcuts first (films, the studio), then explore and the journey */
@media (max-width: 760px) {
  .sheet__nav { grid-template-columns: minmax(0, 1fr); grid-template-areas: "films" "studio" "explore" "journey" "access"; grid-template-rows: none; gap: 30px; align-content: start; padding-top: 6px; }
  .sheet__title { display: none; }
  .sheet__h-more { display: none; }
  .sheet__grp:not(.sheet__grp--journey) .sheet__name { font-size: clamp(22px, 6.6vw, 28px); }
  .sheet__name { font-size: 18px; }
  .sheet__d { font-size: 14px; }
  .sheet__close-l { display: none; }
  .sheet__close { padding: 0; width: 46px; justify-content: center; }
}
/* a phone held sideways: two columns, compact rows */
@media (orientation: landscape) and (max-height: 500px) {
  .sheet__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "films journey" "studio journey" "explore journey" "access journey"; grid-template-rows: auto auto auto 1fr; gap: 18px 36px; align-content: start; }
  .sheet__list a { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
}

/* ---------- HUD (counter, timecode, scroll bar): two small glass capsules in the bottom corners ---------- */
.hud-meta, .hud-scroll {
  position: fixed; z-index: 20; bottom: max(20px, var(--safe-b));
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; line-height: 1.25; display: grid; gap: 5px; pointer-events: none;
  padding: 9px 14px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(var(--slate), .62); -webkit-backdrop-filter: blur(14px) saturate(1.15) brightness(.84); backdrop-filter: blur(14px) saturate(1.15) brightness(.84);
  transition: opacity .5s;
}
.hud-meta { left: var(--gl); }
.hud-scroll { right: var(--gr); text-align: right; }
.hud-meta .slash, .hud-meta .dash { opacity: .7; margin: 0 .3em; }
#scrollBar { white-space: pre; }
body.is-late .hud-meta, body.is-late .hud-scroll { opacity: 0; }
body:not(.is-ready) .hud-meta, body:not(.is-ready) .hud-scroll { opacity: 0; }
/* while the next chapter's stage is still rising, its copy passes the bottom corners */
@media (min-width: 861px) { body.is-travel .hud-meta, body.is-travel .hud-scroll { opacity: 0; } }

/* ---------- type ---------- */
.kicker {
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; text-shadow: var(--halo);
}
.kicker__rule { display: inline-block; width: 30px; height: 1px; background: currentColor; opacity: .8; transform-origin: left; }
.kicker--center { justify-content: center; }
.tag {
  margin-left: 4px; padding: 5px 10px 5px 11px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .75);
  font-size: 12px; letter-spacing: .12em; background: rgba(var(--slate), .34); text-shadow: none;
}
.display {
  font-weight: 300; letter-spacing: -.035em; line-height: .96; margin: 0;
  font-size: clamp(42px, min(5.7vw, 10.5vh), 100px); text-shadow: var(--shadow-ink);
}
.display em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.display--sm { font-size: clamp(38px, min(5.4vw, 10vh), 88px); }
.display__pre { display: block; font-family: var(--f-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; margin-bottom: 18px; text-shadow: var(--halo); }
.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; margin: 0; color: var(--ink); text-shadow: var(--shadow-ink); }
.body { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; max-width: 32em; margin: 22px 0 0; color: var(--ink); text-shadow: var(--shadow-ink); }
.body b, .body strong { font-weight: 500; color: var(--ink); }

/* ---------- the journey ---------- */
/* .page is one layer above the canvas and the phone scrim (it is also the layer moved in review captures) */
.page { position: relative; z-index: 3; }
.journey { position: relative; z-index: 5; }
.chapter {
  position: relative;
  height: calc((var(--span) + 100) * var(--sv));
  margin-bottom: calc(-100 * var(--sv));
}
.chapter--hero { height: calc((var(--hero-span) + 100) * var(--sv)); }
.stage {
  position: sticky; top: 0; height: 100vh; height: calc(100 * var(--sv));
  display: flex; align-items: center; justify-content: flex-start;
  padding: calc(var(--head-h) + 10px) var(--gr) 76px var(--gl);
  pointer-events: none;
  overflow-x: clip; /* the reading pool may reach past the screen edge; never let it widen the page */
}
.stage--right { justify-content: flex-end; }
/* the hero reads over a floor of slate (its stage is pinned to the viewport while it is active) */
.stage--hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease);
  background: linear-gradient(0deg, rgba(var(--slate), .6) 0%, rgba(var(--slate), .44) 16%, rgba(var(--slate), .16) 34%, rgba(var(--slate), 0) 50%);
}
.is-active > .stage--hero::before, html:not(.js) .stage--hero::before { opacity: 1; }
.copy { position: relative; max-width: min(540px, 41vw); width: 100%; pointer-events: none; }
.is-active .copy { pointer-events: auto; }

/* the reading card: a defined frosted surface sized to the copy (the nav capsule's material), so every
   line keeps at least 4.5:1 without a murky vignette. The backdrop is dimmed a little as well as tinted. */
.copy::before, .hero-side::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -36px -40px; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(var(--slate), .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.15) brightness(.82); backdrop-filter: blur(18px) saturate(1.15) brightness(.82);
  box-shadow: 0 34px 80px -46px rgba(36, 40, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; transition: opacity .9s var(--ease);
}
.js .is-active .copy::before, html:not(.js) .copy::before { opacity: 1; }
.copy.copy--hero::before { display: none; }
/* the card needs room from the screen edge: chapter copy steps in by the card's own padding */
@media (min-width: 641px) and (min-aspect-ratio: 19/20) {
  .stage:not(.stage--hero) { padding-left: calc(var(--gl) + 28px); padding-right: calc(var(--gr) + 28px); }
}

/* hero: the headline keeps at least 32 px clear of the HUD capsule below it */
.stage--hero { align-items: flex-end; padding-bottom: max(17vh, 128px); }
.copy.copy--hero { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.display--hero { font-size: clamp(50px, min(7.4vw, 13vh), 124px); flex: 1 1 auto; }
.hero-side { position: relative; max-width: 372px; flex: 0 0 auto; padding-bottom: 4px; margin-right: 8px; }
/* the lede sits on its own frosted card (the same material as the chapter cards), shown with the hero */
.hero-side::before { inset: -30px -34px -28px; transition: opacity .2s ease; }
.js .is-active .hero-side::before, html:not(.js) .hero-side::before { opacity: 1; }
/* while the drop swallows a sentence the card steps back, so the letters read as they fly */
body.is-absorbing .is-active .hero-side::before { opacity: .25; }
.hero-side .kicker { margin-bottom: 14px; }
.hint { margin: 20px 0 0; display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-shadow: var(--halo); transition: opacity .5s ease; }
.hint__rings { position: relative; width: 22px; height: 22px; flex: none; }
.hint__rings::before, .hint__rings::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; }
.hint__rings::after { inset: 7px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .hint__rings::before { animation: ring 2.6s var(--ease) infinite; }
}
@keyframes ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* typer */
.typer { font-family: var(--f-mono); font-size: 13.5px; letter-spacing: .03em; margin: 22px 0 0; color: var(--ink); min-height: 1.6em; text-shadow: var(--halo); }
.typer__caret { opacity: .8; }
/* the cursor takes no width (its margins cancel), and the untyped rest of the premise is laid out but hidden,
   so the line never re-wraps or jumps while it types; the cursor stays with its word */
.typer__cursor { display: inline-block; width: 8px; height: 14px; background: var(--nectar); vertical-align: -2px; margin-left: 3px; margin-right: -11px; }
.typer__word { white-space: nowrap; }
.typer__ghost { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { .typer__cursor { animation: blink 1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }

/* specs */
.specs { margin: 0; max-width: 430px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-shadow: var(--halo); }
.specs > div { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 9px 0; }
.specs > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; }
.specs > div:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.specs dd { margin: 0; text-align: right; font-size: 13px; font-weight: 500; letter-spacing: .04em; }

/* chips */
.chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 8px 11px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34); background: rgba(var(--slate), .34);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
.chip__st { padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .4); letter-spacing: .06em; }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 0 10px rgba(255, 255, 255, .8); }
.chip[data-s="dev"] .chip__dot { background: transparent; border: 1.5px solid #fff; box-shadow: none; }
.chip[data-s="soon"] .chip__dot, .chip[data-s="planned"] .chip__dot { background: transparent; border: 1.5px dashed #fff; box-shadow: none; }
.chip[data-s="proto"] .chip__dot { background: radial-gradient(circle, #fff 0 1.5px, transparent 2px); border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: none; }
.chip[data-s="dev"], .chip[data-s="soon"], .chip[data-s="proto"] { border-style: dashed; background: rgba(var(--slate), .24); }

/* ---------- chapter reveal (driven by main.js: .is-active on the section) ---------- */
.js .copy > * {
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity .35s ease, transform .55s var(--ease);
}
.js .is-active .copy > * {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms + 60ms);
}
.js .is-active .copy > .display { transition-delay: 0s; }
/* headline words: a luminous outline that fills into solid type (wireframe to solid) */
.js .display .w {
  display: inline-block; color: rgba(246, 247, 251, 0); -webkit-text-stroke: 1px rgba(255, 255, 255, .9);
  opacity: 0; transform: translate3d(0, .22em, 0); text-shadow: none;
  transition: opacity .3s ease, transform .5s var(--ease), color .3s, -webkit-text-stroke-color .3s, text-shadow .3s;
}
.js .is-active .display .w {
  color: var(--ink); -webkit-text-stroke-color: rgba(255, 255, 255, 0); opacity: 1; transform: none; text-shadow: var(--shadow-ink);
  transition-property: opacity, transform, color, -webkit-text-stroke-color, text-shadow;
  transition-duration: .7s, 1.1s, 1s, 1.2s, 1.2s;
  transition-timing-function: ease, var(--ease-out), ease, ease, ease;
  transition-delay: calc(var(--wi, 0) * 70ms + 120ms), calc(var(--wi, 0) * 70ms + 120ms), calc(var(--wi, 0) * 70ms + 620ms), calc(var(--wi, 0) * 70ms + 620ms), calc(var(--wi, 0) * 70ms + 760ms);
}
.js .chapter .kicker__rule { transform: scaleX(0); transition: transform .4s var(--ease); }
.js .is-active .kicker__rule { transform: scaleX(1); transition: transform 1s var(--ease-out) .25s; }
.js .specs > div::before { transform: scaleX(0); transition: transform .4s var(--ease); }
.js .is-active .specs > div::before { transform: scaleX(1); transition: transform 1.1s var(--ease-out); }
.js .is-active .specs > div:nth-child(2)::before { transition-delay: .1s; }
.js .is-active .specs > div:nth-child(3)::before { transition-delay: .2s; }
.js .is-active .specs > div:nth-child(4)::before { transition-delay: .3s; }
.js .chip { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .3s, transform .4s var(--ease); }
.js .is-active .chip { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s var(--ease-out); transition-delay: calc(var(--ci, 0) * 70ms + 520ms); }

/* ---------- after the journey ---------- */
.tail {
  position: relative; z-index: 6;
  background: linear-gradient(180deg,
    rgba(var(--panel-rgb), 0) 0,
    rgba(var(--panel-rgb), .9) calc(36 * var(--sv)),
    rgba(var(--panel-rgb), .9) calc(100% - 34 * var(--sv)),
    rgba(var(--panel-rgb), 0) 100%);
}
.tail > section { scroll-margin-top: 0; }
#setlab .setlab { scroll-margin-top: calc(var(--head-h) + var(--safe-t)); }
.section-head { max-width: 760px; }
.section-head--center { margin: 0 auto; text-align: center; }
.section-head--center .body { margin-left: auto; margin-right: auto; }
.footnote { margin: 18px auto 0; max-width: 62ch; text-align: center; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; line-height: 1.7; color: var(--ink); }

/* reveal for tail blocks (IntersectionObserver adds .is-in) */
.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s ease, transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 60ms); }
.js .rv.is-in { opacity: 1; transform: none; }

/* set lab section (the set lab draws inside #setlabRoot; its own styles live in setlab.css) */
.setlab-section { padding: calc(40 * var(--sv)) var(--gr) calc(10 * var(--sv)) var(--gl); }
.setlab-section .section-head { margin-bottom: clamp(28px, 5vh, 56px); }
.setlab .section-fallback {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2);
  aspect-ratio: 16 / 9; max-height: 78vh; margin: 0 auto; display: grid; place-items: center; text-align: center; padding: 24px;
  background: linear-gradient(rgba(var(--panel-rgb), .55), rgba(var(--panel-rgb), .8)), url("../assets/img/sr-2.jpg") center / cover;
}
.forms .section-fallback { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 24px; }
.section-fallback p { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.55; padding: 14px 20px; border-radius: 16px; background: rgba(var(--slate), .7); }

/* ---------- work ---------- */
/* the films come right after the set lab; the overview closes the tail, so it carries the long bottom fade */
.work { padding: calc(14 * var(--sv)) var(--gr) calc(12 * var(--sv)) var(--gl); }
.work .section-head { margin-bottom: 48px; }
/* a quiet footnote under the films, in sentence case */
.work__note { margin: clamp(36px, 4vw, 56px) 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.work__note::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; opacity: .8; }
.work__note[hidden] { display: none; }
.films-ns { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 19px; line-height: 1.4; }
.films-ns a { text-underline-offset: 4px; }
.films { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.film { grid-column: span 6; display: grid; gap: 18px; align-content: start; }
.film--featured { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: center; }
.film--featured .film__media { grid-column: span 8; }
.film--featured .film__meta { grid-column: span 4; }
.films__rest {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 3.4vw, 52px) clamp(20px, 2.4vw, 36px); margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(30px, 3.4vw, 48px); border-top: 1px solid var(--line-2);
}
.films__rest > .film { grid-column: auto; }
.film__media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: #6f7380; border: 1px solid rgba(255, 255, 255, .24); isolation: isolate;
  box-shadow: 0 40px 90px -40px rgba(40, 44, 56, .55);
}
.film__media img, .film__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(.96);
  transition: transform 1.4s var(--ease), opacity .6s, filter 1s ease;
}
.film__media video { opacity: 0; }
.film.is-playing .film__media video { opacity: 1; filter: none; }
.film:hover .film__media img, .film.is-hover .film__media img { transform: scale(1.035); }
.film__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 33, 42, 0) 55%, rgba(30, 33, 42, .35)); pointer-events: none; }
.film__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .6s var(--ease-out), background .3s;
  pointer-events: none;
}
.film__play::before { content: ""; width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.film:hover .film__play, .film.is-hover .film__play { transform: scale(1.08); background: rgba(255, 255, 255, .24); }
.film__fmt { margin: 0; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.film__title { margin: 12px 0 0; font-weight: 300; font-size: clamp(34px, 3.6vw, 60px); letter-spacing: -.035em; line-height: .98; }
.film__line { margin: 14px 0 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(19px, 1.6vw, 24px); color: var(--ink); }
.film__watch {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 14px; min-height: 46px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1);
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; transition: background .25s, border-color .25s;
}
.film__watch:hover, .film__watch:focus-visible { background: rgba(255, 255, 255, .24); border-color: #fff; }
.film__watch span { font-family: var(--f-display); letter-spacing: 0; font-size: 16px; transition: transform .3s; }
.film__watch:hover span { transform: translateX(3px); }
/* the smaller cards after the featured film */
.film--compact { gap: 14px; }
.film--compact .film__media { border-radius: 16px; box-shadow: 0 30px 60px -36px rgba(40, 44, 56, .55); }
.film--compact .film__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.film--compact .film__play::before { margin-left: 4px; border-width: 8px 0 8px 13px; }
.film--compact .film__fmt { font-size: 12px; letter-spacing: .08em; }
.film--compact .film__title { margin-top: 8px; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.03em; }
.film--compact .film__line { margin-top: 8px; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.35; }
.film--compact .film__watch { margin-top: 14px; min-height: 44px; padding: 10px 16px; }

/* ---------- screening room ---------- */
.screen {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; gap: 14px;
  padding: max(16px, var(--safe-t)) var(--gr) max(20px, var(--safe-b)) var(--gl);
  background: rgba(var(--panel-rgb), .84); backdrop-filter: blur(26px) saturate(1.1); -webkit-backdrop-filter: blur(26px) saturate(1.1);
  opacity: 0; transition: opacity .45s ease;
}
.screen[hidden] { display: none; }
.screen.is-open { opacity: 1; }
.screen__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.screen__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen__close { min-height: 44px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font: inherit; letter-spacing: inherit; cursor: pointer; flex: none; }
.screen__close:hover, .screen__close:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .14); }
.screen__stage { display: grid; place-items: center; min-height: 0; min-width: 0; }
.screen__player { width: min(100%, calc((100vh - 210px) * 16 / 9)); width: min(100%, calc((100dvh - 210px) * 16 / 9)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.screen__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #22252c; box-shadow: 0 30px 90px rgba(36, 40, 50, .45);
}
.screen__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #22252c; }
.screen__hint { margin: 0; text-align: center; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; }
.screen__hint[hidden] { display: none; }
@media (orientation: landscape) { .screen__hint { display: none; } }
/* a phone on its side: the close button moves to the side margin and the film fills the height */
@media (orientation: landscape) and (max-height: 500px) {
  .screen { grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: max(8px, var(--safe-t)) var(--gr) max(8px, var(--safe-b)) var(--gl); }
  .screen__bar { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .screen__title { display: none; }
  .screen__player { width: min(100%, calc((100vh - 96px) * 16 / 9)); width: min(100%, calc((100dvh - 96px) * 16 / 9)); gap: 8px; }
}
body.is-screening { overflow: hidden; }

/* ---------- access: a bookend to the hero (headline bottom-left, note bottom-right, the end drop above) ---------- */
.access {
  position: relative; z-index: 6; min-height: 100vh; min-height: calc(100 * var(--sv));
  display: flex; align-items: flex-end; padding: calc(30 * var(--sv)) var(--gr) calc(9 * var(--sv)) var(--gl);
}
.access::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; pointer-events: none; z-index: -1;
  background: linear-gradient(0deg, rgba(var(--slate), .74) 0%, rgba(var(--slate), .66) 34%, rgba(var(--slate), .36) 62%, rgba(var(--slate), .12) 84%, rgba(var(--slate), 0) 100%);
}
.access__inner { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
/* the headline reads on the section's floor; the note sits on the same frosted card as the chapters */
.access__l { position: relative; }
.access__l .display { font-size: clamp(48px, min(6.6vw, 12vh), 112px); }
.access__r { position: relative; max-width: 380px; margin-right: 8px; padding-bottom: 6px; }
.access__r::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -32px -34px -30px; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(var(--slate), .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.15) brightness(.82); backdrop-filter: blur(18px) saturate(1.15) brightness(.82);
  box-shadow: 0 34px 80px -46px rgba(36, 40, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.access__r .body { margin: 0; }
.cta {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 18px; text-decoration: none; min-height: 56px;
  padding: 19px 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(var(--slate), .34); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  transition: background .3s, border-color .3s, transform .3s;
}
.cta:hover, .cta:focus-visible { background: rgba(var(--slate), .5); border-color: #fff; transform: translateY(-1px); }
.cta__arrow { font-family: var(--f-display); font-size: 18px; letter-spacing: 0; transition: transform .3s; }
.cta:hover .cta__arrow { transform: translateX(4px); }

/* ---------- footer ---------- */
.foot {
  position: relative; z-index: 6; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px;
  padding: 24px var(--gr) max(24px, var(--safe-b)) var(--gl); border-top: 1px solid var(--line);
  background: rgba(var(--panel-rgb), .9);
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.foot__tag { margin-left: 16px; font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 19px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 14px; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__r { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* ---------- compact header: phones and small tablets ---------- */
@media (max-width: 860px) {
  :root { --head-h: 64px; }
  .hud { padding: max(14px, var(--safe-t)) var(--gr) 12px var(--gl); }
  .hud__nav { display: none; }
  :root { --menu-w: 104px; }
  .menu-btn { width: var(--menu-w); padding: 0; gap: 10px; }
  .hud-scroll { display: none; }
  .wordmark__name { font-size: 16px; }
  .wordmark__mark { width: 30px; height: 30px; }
  .wordmark { gap: 10px; }
  .wordmark__sub { font-size: 12px; letter-spacing: .16em; }
  /* the chapter counter rides in the header row, in a small glass capsule beside the menu button */
  .hud-meta {
    z-index: 31; /* above the header's top band (the header itself is z 30) */
    top: calc(max(14px, var(--safe-t)) + 9px); bottom: auto; left: auto; right: calc(var(--gr) + var(--menu-w) + 10px);
    padding: 6px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .06em; line-height: 1.2; text-shadow: none;
    background: rgba(var(--slate), .74); border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  }
  .hud-meta::before, .hud-meta__tc { display: none; }
  /* a soft top band during the journey, so the wordmark reads over the bright top of the world */
  body:not(.is-late) .hud::before {
    opacity: 1; inset: 0 0 -44px;
    background: linear-gradient(180deg, rgba(var(--slate), .72) 0, rgba(var(--slate), .66) 50%, rgba(var(--slate), .36) 70%, rgba(var(--slate), .12) 86%, rgba(var(--slate), 0) 100%);
  }
}
/* the chapter name joins the capsule only where it clears the wordmark (it overlapped it at 400-479 px) */
@media (max-width: 479px) { .hud-meta .dash, .hud-meta #chapName { display: none; } }
/* narrow phones: the mark and wordmark tighten so they clear the chapter capsule down to 360 px */
@media (max-width: 399px) {
  .hud .wordmark { gap: 7px; }
  .hud .wordmark__mark { width: 22px; height: 22px; }
  .hud .wordmark__name { font-size: 14px; letter-spacing: .32em; }
  .hud .wordmark__sub { font-size: 10.5px; letter-spacing: .1em; }
}
/* the narrowest phones: the menu control keeps its icon; its word stays for screen readers */
@media (max-width: 359px) {
  :root { --menu-w: 46px; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- portrait framing: copy at the bottom over a soft scrim, objects above ---------- */
@media (max-width: 640px), (max-aspect-ratio: 19/20) {
  :root { --span: 130; --hero-span: 100; }
  /* the scrim grows to the active chapter's copy (main.js sets --scrim-h): deep behind the copy,
     a short soft fade above it, so the world above stays bright */
  .scrim {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
    height: var(--scrim-h, 60vh);
    background: linear-gradient(0deg,
      rgba(var(--slate), .86) 0, rgba(var(--slate), .8) 45%, rgba(var(--slate), .76) calc(100% - 132px),
      rgba(var(--slate), .6) calc(100% - 104px), rgba(var(--slate), .36) calc(100% - 70px), rgba(var(--slate), .12) calc(100% - 32px), rgba(var(--slate), 0) 100%);
    transition: height .7s var(--ease), opacity .7s ease;
  }
  body.is-late .scrim { opacity: 0; }
  .stage, .stage--right { align-items: flex-end; justify-content: flex-start; padding: 0 var(--gr) calc(max(20px, var(--safe-b)) + 16px) var(--gl); }
  .stage--hero::before, .copy::before, .hero-side::before { display: none; }
  .copy { max-width: 600px; }
  .display { font-size: clamp(36px, 10.6vw, 66px); line-height: .98; }
  .body { font-size: 16px; line-height: 1.52; margin-top: 14px; max-width: 34em; }
  .kicker { margin-bottom: 14px; }
  .facts { display: none; }
  .typer { font-size: 13px; margin-top: 12px; }
  .copy .chips__cap { margin-top: 14px; }
  .chips { margin-top: 16px; gap: 6px; }
  .chip { padding: 7px 11px 7px 10px; font-size: 12px; }
  .stage--hero { padding-bottom: calc(max(20px, var(--safe-b)) + 18px); }
  .copy.copy--hero { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 20px; }
  .display--hero { flex: 0 0 auto; font-size: clamp(42px, 12.4vw, 76px); }
  .hero-side { max-width: 34em; padding-bottom: 0; }
  .hero-side .lede { font-size: 16px; }
  .hint { margin-top: 16px; }
}
/* phones: compact chips (still 12 px) so a chapter's copy stays in the lower part */
@media (max-width: 600px) {
  .chips { gap: 6px; }
  .chip { padding: 7px 10px 7px 9px; gap: 7px; font-size: 12px; letter-spacing: .02em; }
  .chip__st { padding-left: 7px; letter-spacing: .02em; }
  .chip__dot { width: 6px; height: 6px; }
}
/* short phones */
@media (max-aspect-ratio: 19/20) and (max-height: 800px) {
  .display { font-size: clamp(32px, 9.6vw, 52px); }
  .display--hero { font-size: clamp(38px, 11.4vw, 60px); }
  .kicker { margin-bottom: 10px; }
  .body { font-size: 16px; line-height: 1.46; margin-top: 10px; }
  .copy .chips__cap { display: none; }
  .chips { margin-top: 12px; }
  .typer { display: none; }
  .stage, .stage--right, .stage--hero { padding-bottom: calc(max(14px, var(--safe-b)) + 12px); }
}
/* shorter phones (iPhone SE class): one sentence of body, one swipeable row of chips,
   so the copy keeps to the lower ~45% of the screen. The studio index keeps every status. */
@media (max-aspect-ratio: 19/20) and (max-height: 740px) {
  .display { font-size: clamp(30px, 9vw, 44px); }
  .display--hero { font-size: clamp(36px, 10.6vw, 54px); }
  .body__more { display: none; }
  .copy.copy--hero { gap: 14px; }
  .hero-side .lede { font-size: 16px; line-height: 1.46; }
  .hint { display: none; }
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-right: calc(-1 * var(--gr)); padding: 2px calc(var(--gr) + 40px) 2px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 44px), transparent calc(100% - 14px));
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 44px), transparent calc(100% - 14px));
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
/* tall tablets in portrait have room for the spec list */
@media (max-aspect-ratio: 19/20) and (min-width: 600px) and (min-height: 1180px) {
  .facts { display: block; max-width: 520px; }
  .body { font-size: 17px; }
}

/* ---------- tail on phones ---------- */
@media (max-width: 860px) {
  .setlab-section { padding: calc(30 * var(--sv)) var(--gr) calc(8 * var(--sv)) var(--gl); }
  .work { padding: calc(10 * var(--sv)) var(--gr) calc(10 * var(--sv)) var(--gl); }
  .work .section-head { margin-bottom: 30px; }
  .films { grid-template-columns: 1fr; }
  .film, .film--featured { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .film--featured .film__media, .film--featured .film__meta { grid-column: 1 / -1; }
  .film__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .film__title { font-size: clamp(32px, 9vw, 46px); }
  /* the other films: one column, each card full width */
  .films__rest { grid-template-columns: 1fr; gap: 44px; margin-top: 44px; padding-top: 36px; }
  .film--compact .film__title { font-size: clamp(28px, 8vw, 36px); }
  .access { padding-top: calc(48 * var(--sv)); padding-bottom: calc(8 * var(--sv)); }
  .access__inner { flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .access__r::before { display: none; }
  .access::before { height: 78%; }
  .access__inner::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -84px; bottom: -36px; left: calc(-1 * var(--gl)); right: calc(-1 * var(--gr));
    background: rgba(var(--slate), .56);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .6) 44px, #000 84px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .6) 44px, #000 84px, #000 calc(100% - 30px), transparent 100%);
  }
  .access .kicker { justify-content: center; }
  .access__l .display { font-size: clamp(42px, 12vw, 72px); }
  .access__r { max-width: 34em; padding: 0; }
  .access__r .body { margin-top: 20px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot__nav { margin-left: -6px; }
  .foot__tag { margin-left: 10px; }
}
/* short laptop screens: keep every chapter's copy inside the stage (min-width keeps a portrait phone
   with its keyboard open out of these) */
@media (min-aspect-ratio: 19/20) and (max-height: 820px) and (min-width: 480px) {
  .copy::before { inset: -28px -34px; }
  .display { font-size: clamp(40px, min(5.3vw, 9.6vh), 96px); }
  .kicker { margin-bottom: 14px; }
  .body { font-size: 17px; line-height: 1.52; margin-top: 16px; }
  .typer { margin-top: 14px; font-size: 13px; }
  .facts { margin-top: 14px; }
  .specs > div { padding: 7px 0; }
  .copy .chips__cap { margin-top: 14px; }
  .chips { margin-top: 10px; }
  .chip { padding: 7px 11px 7px 10px; font-size: 12px; }
  .stage { padding-top: 70px; }
  .stage:not(.stage--hero) { padding-bottom: 64px; }
}
@media (min-aspect-ratio: 19/20) and (max-height: 680px) and (min-width: 480px) {
  .facts, .copy .chips__cap { display: none; }
}
/* short landscape screens (phones on their side; a portrait phone with its keyboard open is not one) */
@media (orientation: landscape) and (max-height: 560px) and (min-aspect-ratio: 19/20) and (min-width: 480px) {
  .stage { padding-top: 70px; padding-bottom: 20px; }
  .display { font-size: clamp(32px, 8.4vh, 56px); }
  .body { font-size: 16px; margin-top: 12px; }
  .facts, .copy .chips__cap, .typer, .hint { display: none; }
  .chips { margin-top: 12px; }
  .hud-meta, .hud-scroll { display: none; }
  .copy::before { inset: -18px -24px; border-radius: 22px; }
  .copy.copy--hero { flex-direction: column; align-items: flex-start; gap: 14px; max-width: 54vw; }
  .hero-side::before { inset: -16px -20px; border-radius: 22px; }
  /* the studio's line stays visible on a phone held sideways: one line, 12 px */
  .hero-side .kicker { margin-bottom: 8px; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
  .hero-side .lede { font-size: 15px; line-height: 1.45; }
  .ask { margin-top: 14px; }
  .copy.copy--hero { gap: 26px; } /* the lede's card (16 px of padding) keeps clear of the headline */
}

/* ---------- small phones: the hero kicker keeps its last word; a short lede under 600 px tall ---------- */
@media (max-width: 400px) {
  .kicker--plain { letter-spacing: .08em; text-wrap: balance; }
}
@media (max-height: 600px) and (max-aspect-ratio: 19/20) { .lede__more { display: none; } }

/* ---------- a keyboard cut to a chapter: its copy is there at once (no reveal) ---------- */
.js .chapter.is-cut .copy > *, .js .chapter.is-cut .display .w, .js .chapter.is-cut .chip,
.js .chapter.is-cut .copy::before, .js .chapter.is-cut .kicker__rule { transition: none !important; }

/* ---------- reduced motion: no movement, simple fades ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .copy > *, .js .is-active .copy > *, .js .rv, .js .chip, .js .is-active .chip { transform: none !important; }
  .js .display .w { transform: none !important; -webkit-text-stroke-color: transparent !important; }
  .sheet, .sheet__grp, .sheet__list a { transition: none !important; }
  .sheet__grp { transform: none !important; }
  .film__media img, .film__media video { transition: opacity .4s, filter .4s; }
  .film:hover .film__media img { transform: none; }
  #gl { transition: none; }
  .cut-veil { display: none; }
  .ask__pill, .ask__after, .hint { transition: none; }
}

/* ---------- in-page jumps: a short cut through silver (main.js adds .is-on for ~180 ms in, ~260 ms out) ---------- */
.cut-veil {
  position: fixed; inset: 0; z-index: 26; pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(120% 95% at 50% 42%, #b2b6c0 0%, var(--bg) 58%, #9a9eaa 100%);
  transition: opacity .26s ease, visibility 0s linear .26s;
}
.cut-veil.is-on { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.cut-veil.is-flash { transition: none; }

/* ---------- the hero sentence: a glass pill under the lede ---------- */
.ask { position: relative; margin: 22px 0 0; }
html:not(.js) .ask { display: none; }
.ask__pill {
  position: relative; display: flex; align-items: stretch; gap: 6px; min-height: 54px; padding: 0 4px 0 0; border-radius: 999px; cursor: text;
  border: 1px solid rgba(255, 255, 255, .42); background: rgba(var(--slate), .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 40px -26px rgba(40, 44, 56, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: opacity .55s var(--ease) .12s, transform .7s var(--ease-out) .12s, border-color .25s, background .25s, box-shadow .25s;
}
.ask__pill:hover { border-color: rgba(255, 255, 255, .62); }
.ask__pill:focus-within { border-color: #fff; background: rgba(var(--slate), .64); box-shadow: 0 0 0 5px rgba(255, 255, 255, .14), 0 18px 40px -26px rgba(40, 44, 56, .7); }
/* the field fills the pill (a tap anywhere left of the arrow lands in it); its text starts 20 px in */
.ask__input {
  flex: 1 1 auto; min-width: 0; height: auto; min-height: 52px; padding: 0 0 0 20px; margin: 0; border: 0; border-radius: 999px 0 0 999px; outline: none; background: transparent; color: var(--ink);
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .02em; text-overflow: ellipsis;
}
/* touch screens: 16 px, so iOS never zooms the page when the field takes focus */
@media (pointer: coarse), (max-width: 860px) { .ask__input { font-size: 16px; letter-spacing: 0; } }
.ask__input::placeholder { color: rgba(246, 247, 251, .9); opacity: 1; }
.ask__input:focus-visible { outline: none; box-shadow: none; }
.ask__send {
  flex: none; align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); color: #fff;
  transition: background .25s, border-color .25s, transform .3s var(--ease-out);
}
.ask__send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ask__send:hover, .ask__send:focus-visible { background: rgba(255, 255, 255, .26); border-color: #fff; }
.ask.has-text .ask__send { background: #f6f7fb; color: #3d424f; border-color: #f6f7fb; }
.ask.has-text .ask__send:hover { transform: translateX(2px); }
.ask__send:disabled { cursor: default; }
/* while the drop swallows the words, the pill steps back; then it returns, empty */
.ask.is-absorbing .ask__pill { opacity: 0; transform: translate3d(0, 6px, 0) scale(.985); pointer-events: none; }
/* the pill returns without a delay */
.ask:not(.is-absorbing) .ask__pill { transition-delay: 0s; }
/* while the letters fly: the phone scrim, the kicker and the lede step back so the sentence can be read */
@media (max-width: 640px), (max-aspect-ratio: 19/20) {
  .hero-side .kicker, .hero-side .lede { transition: opacity .3s ease; }
  body.is-absorbing .scrim { opacity: .3; transition: height .7s var(--ease), opacity .3s ease; }
  body.is-absorbing .hero-side .kicker, body.is-absorbing .hero-side .lede { opacity: .35; }
}
.ask__after {
  position: absolute; left: 4px; right: 0; top: calc(100% + 14px); margin: 0; pointer-events: none;
  font-family: var(--f-serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--ink); text-shadow: var(--shadow-ink);
  opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .8s ease, transform 1s var(--ease-out);
}
.ask.has-after .ask__after { opacity: 1; transform: none; }
/* no room below the pill (short phones, a phone on its side): the line takes the pill's place for a moment */
.ask.is-inplace .ask__after { top: 50%; left: 20px; right: 20px; transform: translate3d(0, -40%, 0); }
.ask.is-inplace.has-after .ask__after { transform: translate3d(0, -50%, 0); }
.ask.is-inplace .ask__pill { opacity: 0; pointer-events: none; }
.ask.has-after + .hint { opacity: 0; }
.ask.is-empty .ask__pill { animation: nudge .42s var(--ease); }
@keyframes nudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .ask.is-empty .ask__pill { animation: none; } }

/* ---------- chapter numbers on demand, and the key to the feature chips ---------- */
.facts { margin: 22px 0 0; max-width: 430px; }
.facts__sum {
  list-style: none; display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 2px; cursor: pointer;
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; text-shadow: var(--halo);
  border-bottom: 1px solid var(--line); border-radius: 0;
}
.facts__sum::-webkit-details-marker { display: none; }
.facts__sum:hover { border-bottom-color: #fff; }
.facts__plus { position: relative; width: 12px; height: 12px; flex: none; transition: transform .35s var(--ease); }
.facts__plus::before, .facts__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; margin-top: -.75px; background: currentColor; }
.facts__plus::after { transform: rotate(90deg); }
.facts[open] .facts__plus { transform: rotate(45deg); }
.facts[open] .specs { margin-top: 8px; }
.chips__cap {
  margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-shadow: var(--halo);
}
.chips__cap + .chips { margin-top: 10px; }
.chips__key { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.chips__k { display: inline-flex; align-items: center; gap: 7px; }
.chips__k i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.chips__k[data-s="dev"] i { background: transparent; border: 1.5px solid #fff; box-shadow: none; }

/* ---------- the forms: a full-screen sculpture with its own canvas; the world fades out above it ---------- */
.forms-section { position: relative; }
/* above the forms: an eased ramp into their sky (the world's canvas has already faded out, see main.js) */
.forms-section::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(34 * var(--sv)); pointer-events: none;
  background: linear-gradient(180deg,
    rgba(179, 185, 196, 0) 0%, rgba(179, 185, 196, .03) 14%, rgba(179, 185, 196, .1) 27%, rgba(179, 185, 196, .23) 40%,
    rgba(179, 185, 196, .42) 53%, rgba(179, 185, 196, .63) 66%, rgba(179, 185, 196, .82) 79%, rgba(179, 185, 196, .95) 91%, #b3b9c4 100%);
}
/* the ramp stays off while the last chapter's copy is still read over it (a short phone sees the tail's top early);
   it rises with the forms' sky (body.is-tail, main.js) */
.js .forms-section::before, .js .forms-section > .forms, .js .forms-section > .forms-head { opacity: 0; transition: opacity .6s ease; }
.js body.is-tail .forms-section::before, .js body.is-tail .forms-section > .forms, .js body.is-tail .forms-section > .forms-head { opacity: 1; }
/* the forms' visible title (the menu's 'Forms'): above the sculpture, never over it; a menu jump lands on it just under the header */
.forms-section > .forms-head { position: relative; z-index: 2; background: rgb(var(--sky-rgb)); padding: 104px var(--gr) clamp(4px, 1.5vh, 16px) var(--gl); max-width: none; }
.forms-head > * { max-width: 760px; margin-left: auto; margin-right: auto; }
/* on the forms' light sky, graphite type (white would read at under 2:1 here) */
.forms-head, .forms-head .kicker, .forms-head .display { color: rgb(40, 44, 53); text-shadow: none; }
.forms-head .kicker { margin-bottom: 12px; color: rgb(58, 63, 75); }
@media (max-width: 640px) { .forms-section > .forms-head { padding-top: 84px; } }
/* inside the forms (under their own controls, over their canvas): the canvas's top edge melts into the
   sky above it, and the stone dissolves into the tail's panel at the bottom, so no hard line remains */
.forms-section > .forms::before, .forms-section > .forms::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.forms-section > .forms::after { z-index: 0; } /* under the caption and arrows (z 1), over the canvas */
.forms-section > .forms::before { top: 0; height: calc(12 * var(--sv)); background: linear-gradient(180deg, #b3b9c4 0%, rgba(179, 185, 196, .7) 30%, rgba(179, 185, 196, .25) 65%, rgba(179, 185, 196, 0) 100%); }
.forms-section > .forms::after {
  bottom: 0; height: calc(26 * var(--sv));
  background: linear-gradient(180deg,
    rgba(var(--tail-solid), 0) 0%, rgba(var(--tail-solid), .06) 18%, rgba(var(--tail-solid), .2) 36%, rgba(var(--tail-solid), .42) 54%,
    rgba(var(--tail-solid), .66) 71%, rgba(var(--tail-solid), .86) 86%, rgb(var(--tail-solid)) 100%);
}

/* ---------- studio overview: one card per department, the full index on demand ---------- */
.index { padding: calc(14 * var(--sv)) var(--gr) calc(12 * var(--sv)) var(--gl); }
@media (max-width: 860px) { .index { padding-bottom: calc(10 * var(--sv)); } }
.index__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-bottom: 44px; }
.index__lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; }
.tally { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 0 34px; }
.tally > div { display: grid; gap: 10px; }
.tally dt { order: 2; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.tally dd { order: 1; margin: 0; font-weight: 300; font-size: clamp(46px, 5vw, 72px); letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
/* status marks, shared by the tally, the cards and the full index: solid = live, ring = in development, dashed = coming */
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 0 10px rgba(255, 255, 255, .7); }
.st-dot[data-s="dev"] { background: transparent; border: 1.5px solid #fff; box-shadow: none; }
.st-dot[data-s="soon"], .st-dot[data-s="planned"] { background: transparent; border: 1.5px dashed #fff; box-shadow: none; }
.st-dot[data-s="proto"] { background: radial-gradient(circle, #fff 0 1.5px, transparent 2px); border: 1.5px solid #fff; box-shadow: none; }

.ov-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ov-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 20px; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(var(--slate), .2);
  transition: border-color .3s, background .3s;
}
.ov-card:hover { border-color: rgba(255, 255, 255, .44); background: rgba(var(--slate), .28); }
.ov-card__title { margin: 0; font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); letter-spacing: -.025em; line-height: 1.05; }
.ov-card__what { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 36ch; }
.ov-card__hl { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 9px; }
.ov-card__hl li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 11px; font-size: 16px; line-height: 1.35; }
.ov-card__st { flex-basis: 100%; margin: -3px 0 0 19px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ov-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ov-card__count { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.ov-card__count > span { white-space: nowrap; }
.ov-card__all {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .06);
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; transition: background .25s, border-color .25s;
}
.ov-card__all span { font-family: var(--f-display); font-size: 15px; letter-spacing: 0; transition: transform .3s; }
.ov-card__all:hover, .ov-card__all:focus-visible { background: rgba(255, 255, 255, .18); border-color: #fff; }
.ov-card__all:hover span { transform: translateX(3px); }
/* coming next: a wide card with a dashed edge, apart from what is in the studio today */
.ov-card--next {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 14px 40px;
  border-style: dashed; border-color: rgba(255, 255, 255, .38); background: rgba(var(--slate), .14);
}
.ov-card--next .ov-card__foot { grid-column: 4; margin: 0; padding: 0; border: 0; flex-direction: column; align-items: flex-end; text-align: right; }

.ix-more { margin: 40px auto 0; display: grid; justify-items: center; gap: 14px; text-align: center; }
.ix-open {
  display: inline-flex; align-items: center; gap: 16px; min-height: 58px; padding: 0 28px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(var(--slate), .36);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; transition: background .25s, border-color .25s;
}
.ix-open:hover, .ix-open:focus-visible { background: rgba(var(--slate), .56); border-color: #fff; }
.ix-open__n { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .4); font-size: 12.5px; letter-spacing: .06em; }
.ix-open__n:empty { display: none; }
.ix-open__chev { position: relative; width: 12px; height: 12px; transition: transform .35s var(--ease); }
.ix-open__chev::before, .ix-open__chev::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; margin-top: -.75px; background: currentColor; }
.ix-open__chev::after { transform: rotate(90deg); }
.ix-open[aria-expanded="true"] .ix-open__chev { transform: rotate(45deg); }
.ix-more__note { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 46ch; text-wrap: balance; }

.ix-full { max-width: 920px; margin: 52px auto 0; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .6s ease, transform .8s var(--ease-out); }
.ix-full.is-open { opacity: 1; transform: none; }
.ix-full[hidden] { display: none; }
.ixf-legend { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 16px; line-height: 1.5; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.ixf-legend b { font-weight: 500; }
.ixf-group { padding-top: 34px; }
.ixf-group__title {
  margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  font-weight: 300; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -.025em; line-height: 1.1; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--head-h) + 16px);
}
.ixf-group__title:focus { outline: none; }
.ixf-group__sum { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.ixf-list { list-style: none; margin: 0; padding: 0; }
.ixf-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 8px 24px; align-items: center;
  padding: 18px 2px; border-bottom: 1px solid var(--line-2);
}
.ixf-row__main { min-width: 0; }
.ixf-row__name { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.01em; line-height: 1.3; }
.ixf-row__line { margin: 4px 0 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
.ixf-row__st { margin: 0; }
.st-pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ixf-row__more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.ixf-row__more:hover, .ixf-row__more:focus-visible { background: rgba(255, 255, 255, .12); border-color: #fff; }
.ixf-row__plus { position: relative; width: 10px; height: 10px; transition: transform .35s var(--ease); }
.ixf-row__plus::before, .ixf-row__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1.5px; margin-top: -.75px; background: currentColor; }
.ixf-row__plus::after { transform: rotate(90deg); }
.ixf-row__more[aria-expanded="true"] .ixf-row__plus { transform: rotate(45deg); }
.ixf-row__body { grid-column: 1 / -1; margin: 4px 0 6px; max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--ink); }
.ixf-row__body[hidden] { display: none; }
.ixf-end { margin: 40px 0 0; text-align: center; }
.ix-open--end { min-height: 50px; font-size: 13px; }

/* ---------- screening room: the official player, with our controls below the picture ---------- */
.screen__poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: .55; pointer-events: none; }
.screen__msg {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 20px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(20, 22, 28, .6);
}
.screen__msg p { margin: 0; font-family: var(--f-display); text-transform: none; letter-spacing: 0; font-size: 18px; }
.screen__msg a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .12); text-decoration: none; }
.screen__msg--problem { background: rgba(34, 37, 44, .72); pointer-events: auto; }
.screen__msg a { pointer-events: auto; }
.screen__spin { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; }
@media (prefers-reduced-motion: no-preference) { .screen__spin { animation: spin 1s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* the player is taller than its frame, so the title, logo and shelves the player draws at its own edges
   fall outside the picture (the video letterboxes inside the taller player; the frame clips it) */
.screen__yt { position: absolute; inset: 0; }
.screen__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* .is-clean (main.js CLEAN_FRAME): the title row and the label under it (about 106 px from the player's top)
   and the logo and shelves at its foot fall outside the frame */
.is-clean .screen__yt { top: -112px; bottom: -112px; }
/* paused or ended: our own poster and play mark cover the picture */
.screen__cover {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: #22252c; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.screen__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.screen__cover .film__play { position: relative; left: auto; top: auto; margin: 0; }
.is-clean.is-paused .screen__cover, .is-clean.is-ended .screen__cover { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.screen__cover:focus-visible { outline-offset: -6px; }

.pc {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 999px; min-width: 0;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .07);
}
.pc__cc { width: auto; min-width: 44px; padding: 0 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; }
.pc__cc[aria-pressed="true"] { background: #f6f7fb; color: #3d424f; border-color: #f6f7fb; }
.pc__yt-s { display: none; }
.pc__btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); transition: background .25s, border-color .25s, opacity .3s;
}
.pc__btn[hidden] { display: none; }
.pc__btn:hover, .pc__btn:focus-visible { background: rgba(255, 255, 255, .2); border-color: #fff; }
.pc__play { width: 48px; height: 48px; background: #f6f7fb; color: #3d424f; border-color: #f6f7fb; }
.pc__play:hover, .pc__play:focus-visible { background: #fff; color: #2f333d; }
.pc__i { width: 20px; height: 20px; display: block; fill: currentColor; }
.pc__i .s { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc__play[data-state="play"] .pc__i--pause, .pc__play[data-state="pause"] .pc__i--play { display: none; }
.pc__mute .pc__i--muted, .is-muted .pc__mute .pc__i--sound { display: none; }
.is-muted .pc__mute .pc__i--muted { display: block; }
.pc__time { flex: none; min-width: 94px; padding: 0 6px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc__sep { margin: 0 .4em; opacity: .75; }
.pc__scrub { flex: 1 1 auto; min-width: 80px; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pc__scrub:focus-visible { outline: none; box-shadow: none; }
.pc__scrub::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #fff 0 var(--p, 0%), rgba(255, 255, 255, .5) var(--p, 0%) var(--b, 0%), rgba(255, 255, 255, .2) var(--b, 0%) 100%);
}
.pc__scrub::-moz-range-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #fff 0 var(--p, 0%), rgba(255, 255, 255, .5) var(--p, 0%) var(--b, 0%), rgba(255, 255, 255, .2) var(--b, 0%) 100%);
}
.pc__scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.pc__scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.pc__scrub:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 0 0 7px rgba(var(--slate), .5); }
/* volume: a short slider beside mute, same ink as the scrub; phones keep the hardware buttons (iOS ignores page volume) */
.pc__vol { flex: none; width: 84px; height: 44px; margin: 0 2px 0 -2px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pc__vol:focus-visible { outline: none; }
.pc__vol::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff 0 var(--v, 100%), rgba(255, 255, 255, .22) var(--v, 100%) 100%); }
.pc__vol::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff 0 var(--v, 100%), rgba(255, 255, 255, .22) var(--v, 100%) 100%); }
.pc__vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.pc__vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.pc__vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 0 0 7px rgba(var(--slate), .5); }
@media (pointer: coarse), (max-width: 640px) { .pc__vol { display: none; } }
.pc__yt {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; text-decoration: none;
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px;
}
.pc__yt:hover { text-decoration: underline; text-underline-offset: 4px; }
.pc.is-waiting .pc__btn, .pc.is-waiting .pc__scrub, .pc.is-waiting .pc__time { opacity: .45; pointer-events: none; }
/* the player full screen with a mouse: the picture (always whole, 16:9) above, our controls below it */
.screen__player:fullscreen { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: #0e0f12; }
.screen__player:fullscreen .screen__frame { flex: none; width: min(100%, calc((100vh - 96px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.screen__player:fullscreen .pc { width: min(100%, calc((100vh - 96px) * 16 / 9)); }
.screen__player:-webkit-full-screen { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: #0e0f12; }
.screen__player:-webkit-full-screen .screen__frame { flex: none; width: min(100%, calc((100vh - 96px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.screen__player:-webkit-full-screen .pc { width: min(100%, calc((100vh - 96px) * 16 / 9)); }
/* the full-screen button: its mark turns inward while the picture is big */
.pc__fs .pc__i--unfs { display: none; }
.is-fs .pc__fs .pc__i--fs, .is-immersive .pc__fs .pc__i--fs { display: none; }
.is-fs .pc__fs .pc__i--unfs, .is-immersive .pc__fs .pc__i--unfs { display: block; }
/* big on a phone (element full screen, or the immersive mode where a browser has none, as on an iPhone): the
   picture fills the screen, black around it, the whole frame kept (16:9, never cropped); a slim bar over the
   bottom and an exit in the top corner, both stepping away while the film plays and back on any touch */
.screen.is-immersive { padding: 0; background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
.screen.is-immersive .screen__hint { display: none; }
.screen__exit { display: none; }
.screen__player.is-big {
  position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; height: 100dvh; margin: 0; padding: 0; gap: 0;
  display: grid; place-items: center; grid-template-columns: 100%; background: #000;
}
.screen__player.is-big .screen__frame {
  width: min(calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc(100vh * 16 / 9));
  width: min(calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; background: #000;
}
.is-big .pc {
  position: absolute; z-index: 6; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px));
  max-width: 760px; margin: 0 auto; flex-wrap: nowrap; border-radius: 999px; padding: 4px 6px; gap: 4px;
  border-color: rgba(255, 255, 255, .2); background: rgba(14, 15, 18, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .35s ease, transform .35s ease;
}
.is-big .pc__scrub { order: 0; flex: 1 1 auto; min-width: 48px; }
.is-big .pc__time { margin-right: 0; min-width: 0; padding: 0 4px; }
.is-big .pc__yt { display: none; }
.is-big .screen__exit {
  display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 6; top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; color: #fff;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(14, 15, 18, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; transition: opacity .35s ease;
}
.screen__exit svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.is-big .screen__exit:hover, .is-big .screen__exit:focus-visible { border-color: #fff; background: rgba(40, 42, 50, .75); }
.is-big.is-idle .pc { opacity: 0; transform: translate3d(0, 10px, 0); }
.is-big.is-idle .screen__exit { opacity: 0; }
.is-big.is-idle { cursor: none; }
@media (orientation: portrait) { .is-big .pc__time .pc__sep, .is-big .pc__time #pcDur { display: none; } }
@media (prefers-reduced-motion: reduce) { .is-big .pc, .is-big .screen__exit { transition: none; } }

/* ---------- the overview, the films and the player on narrower screens ---------- */
@media (max-width: 1100px) {
  .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-card:nth-child(9) { grid-column: 1 / -1; }
  .ov-card--next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ov-card--next .ov-card__foot { grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left; }
}
@media (max-width: 860px) {
  .index__head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 30px; }
  .tally { gap: 0 22px; }
  .tally dd { font-size: 46px; }
  .ixf-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .ixf-row__main { grid-column: 1 / -1; }
  .ixf-row__name { font-size: 19px; }
  .ixf-row__line { font-size: 16px; }
  .ixf-row__body { font-size: 16px; }
  .ixf-legend { font-size: 15px; }
  .pc { flex-wrap: wrap; border-radius: 22px; padding: 4px 10px 8px; gap: 4px 6px; }
  .pc__scrub { order: -1; flex: 1 0 100%; }
  .pc__time { margin-right: auto; }
  .pc__yt { flex: 1 0 100%; justify-content: center; min-height: 40px; border-top: 1px solid var(--line-2); border-radius: 0; margin-top: 2px; }
}
@media (max-width: 640px) {
  .ov-grid { grid-template-columns: 1fr; gap: 12px; }
  .ov-card:nth-child(9), .ov-card--next { grid-column: auto; }
  .ov-card { padding: 22px 20px 16px; }
  .ov-card--next { display: flex; }
  .ov-card--next .ov-card__foot { flex-direction: row; align-items: center; padding-top: 14px; border-top: 1px solid var(--line-2); }
  .ov-card__what { font-size: 16px; }
  .ov-card__hl li { font-size: 16px; }
  .index__lede { font-size: 19px; }
  .ix-open { padding: 0 22px; gap: 12px; font-size: 13.5px; }
  .ix-open__n { padding-left: 12px; }
}
@media (max-width: 420px) {
  .tally { gap: 0 16px; }
  .tally dd { font-size: 40px; }
  .tally dt { font-size: 12px; letter-spacing: .02em; }
  .pc__yt { padding: 0 6px; letter-spacing: .02em; }
}
/* a phone on its side: the player is sized from the height that is left, and the bar is compact */
@media (orientation: landscape) and (max-height: 500px) {
  .screen__player { width: min(100%, calc((100vh - 2 * max(8px, env(safe-area-inset-top, 0px)) - 54px - 8px) * 16 / 9)); width: min(100%, calc((100dvh - 2 * max(8px, env(safe-area-inset-top, 0px)) - 54px - 8px) * 16 / 9)); }
  .pc { flex-wrap: nowrap; border-radius: 999px; padding: 4px 6px; gap: 4px; }
  .pc__yt { flex: none; min-height: 44px; padding: 0 10px; border-top: 0; border-radius: 999px; margin-top: 0; }
  .pc__yt-l { display: none; }
  .pc__yt-s { display: inline; }
  .pc__scrub { order: 0; flex: 1 1 auto; min-width: 48px; }
  .pc__time { margin-right: 0; min-width: 0; padding: 0 4px; }
  .pc__time .pc__sep, .pc__time #pcDur { display: none; }
}

/* ---------- no-WebGL fallback ---------- */
body.no-webgl { background: radial-gradient(120% 90% at 50% 30%, #b3b7c1 0%, var(--bg) 55%, var(--bg-deep) 100%) fixed; background-color: var(--bg); }
body.no-webgl::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/img/sr-2.jpg") center / cover;
  filter: grayscale(1) contrast(.9) brightness(1.08); opacity: .28;
}

/* ---------- review captures (?ct= / ?at=) ---------- */
.review .loader { display: none; }
.review *, .review *::before, .review *::after { transition: none !important; animation: none !important; }
.review .rv { opacity: 1 !important; transform: none !important; }

/* ---------- typing on a phone: the pill rides just above the keyboard (main.js sets its transform), solid enough
   to read whatever the world behind it is doing; nothing else on the page moves ---------- */
body.is-typing .ask__pill {
  z-index: 40; background: rgba(var(--slate), .92); border-color: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 22px 46px -18px rgba(30, 33, 42, .8);
  transition: transform .22s var(--ease-out), border-color .25s, background .25s, box-shadow .25s;
}
body.is-typing .ask__input { color: #fff; }
body.is-typing .ask__input::placeholder { color: rgba(246, 247, 251, .72); }
/* with the keyboard up, the hero's other lines lie under it or would be read over the world without their scrim:
   they and the scrim step out, so the drop and the pill are what is seen (both return on blur) */
body.is-kb .scrim { opacity: 0; transition: opacity .25s ease; }
body.is-kb .copy--hero .display, body.is-kb .hero-side .kicker, body.is-kb .hero-side .lede, body.is-kb .hint { opacity: 0; transition: opacity .2s ease; }

/* ---------- phones in portrait: the copy keeps to the lower part, the object gets the upper half ----------
   (at least ~42% of a 320x568 screen and ~50% of a 390x844 one is left above the copy, below the header:
   main.js hands that free area to the world, which fits the chapter's object inside it) */
@media (max-width: 640px) {
  .body__more, .copy .chips__cap { display: none; }
  .display { font-size: clamp(32px, 9.4vw, 50px); }
  .body { margin-top: 10px; }
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-top: 14px;
    margin-right: calc(-1 * var(--gr)); padding: 2px calc(var(--gr) + 40px) 2px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 44px), transparent calc(100% - 14px));
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 44px), transparent calc(100% - 14px));
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
@media (max-width: 640px) and (max-height: 600px) {
  .display { font-size: clamp(28px, 8.8vw, 40px); }
  .display--hero { font-size: clamp(32px, 10vw, 44px); }
  .hero-side .kicker { display: none; }
  .copy.copy--hero { gap: 10px; }
  .ask { margin-top: 14px; }
  .kicker { margin-bottom: 8px; }
}
@media (max-width: 640px) and (max-height: 600px) {
  /* the header's counter already names the chapter */
  .chapter:not(.chapter--hero) .kicker { display: none; }
  .body { line-height: 1.42; }
  .chips { margin-top: 10px; }
}
/* a phone on its side: the copy fits between the header and the bottom edge, beside the object */
@media (orientation: landscape) and (max-height: 560px) and (min-aspect-ratio: 19/20) and (min-width: 480px) {
  .body__more { display: none; }
  .display { font-size: clamp(28px, 8vh, 44px); }
  .body { line-height: 1.42; margin-top: 8px; }
  .kicker { margin-bottom: 8px; }
  .stage:not(.stage--hero) { padding-top: calc(var(--head-h) + 6px); padding-bottom: 14px; }
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-top: 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 44px), transparent calc(100% - 14px));
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 44px), transparent calc(100% - 14px));
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
@media (max-width: 640px) { .lede__more { display: none; } }

/* ---------- depth behind the tail: never a flat grey panel ----------
   One viewport-sized backdrop that holds still while the sections scroll over it (sticky, painted once):
   a soft light floor, the drop's ripple rings receding toward it, a few hairline guides and a quiet top light.
   Hairlines only, monochrome, no grain; the frosted cards and the full-bleed scenes sit above it. */
.tail::before {
  content: ""; display: block; position: sticky; top: 0; z-index: -1; pointer-events: none;
  height: 100vh; height: calc(100 * var(--sv)); margin-bottom: -100vh; margin-bottom: calc(-100 * var(--sv));
  background:
    radial-gradient(64% 46% at 50% 112%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 72%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMax slice'><g fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1' vector-effect='non-scaling-stroke'><ellipse cx='800' cy='1050' rx='150' ry='51'/><ellipse cx='800' cy='1050' rx='229' ry='78'/><ellipse cx='800' cy='1050' rx='326' ry='111'/><ellipse cx='800' cy='1050' rx='441' ry='150'/><ellipse cx='800' cy='1050' rx='574' ry='195'/><ellipse cx='800' cy='1050' rx='725' ry='247'/><ellipse cx='800' cy='1050' rx='894' ry='304'/><ellipse cx='800' cy='1050' rx='1081' ry='368'/><ellipse cx='800' cy='1050' rx='1286' ry='437'/><ellipse cx='800' cy='1050' rx='1509' ry='513'/><ellipse cx='800' cy='1050' rx='1750' ry='595'/><ellipse cx='800' cy='1050' rx='2009' ry='683'/><ellipse cx='800' cy='1050' rx='2286' ry='777'/><ellipse cx='800' cy='1050' rx='2581' ry='878'/><ellipse cx='800' cy='1050' rx='2894' ry='984'/><ellipse cx='800' cy='1050' rx='3225' ry='1097'/></g></svg>") center bottom / 100% 100% no-repeat,
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255, 255, 255, .08) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), rgba(255, 255, 255, .08) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    radial-gradient(80% 50% at 18% -6%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%),
    radial-gradient(70% 60% at 100% 40%, rgba(44, 48, 60, .2), rgba(44, 48, 60, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, #000 38%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, #000 38%, #000 100%);
}
/* the cut between places: the silver veil carries the same rings and a hairline horizon, not a flat fill */
.cut-veil {
  background:
    repeating-radial-gradient(ellipse 140% 70% at 50% 58%, rgba(255, 255, 255, 0) 0 37px, rgba(255, 255, 255, .2) 38.5px, rgba(255, 255, 255, 0) 40px 76px),
    linear-gradient(180deg, transparent calc(58% - .5px), rgba(255, 255, 255, .5) calc(58% - .5px) calc(58% + .5px), transparent calc(58% + .5px)),
    radial-gradient(120% 95% at 50% 42%, #b2b6c0 0%, var(--bg) 58%, #9a9eaa 100%);
}

/* ---------- a phone on its side, under ~420 px tall: the hero card ends clear of the bottom edge and the
   home indicator (one-sentence lede, no kicker line; the card's frame keeps 16 px + the inset below it) ---------- */
@media (orientation: landscape) and (max-height: 420px) and (min-aspect-ratio: 19/20) and (min-width: 480px) {
  .hero-side .kicker { display: none; }
  .hero-side .lede__more { display: none; }
  .stage--hero { padding-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 18px); }
}

/* ---------- the sound toggle (js/sound.js owns it; the page places it) ----------
   Desktop: bottom-left, centred on the chapter capsule's row; the capsule steps right of it (--snd-w is the
   toggle's measured width, set by main.js). Phones: the chapter capsule lives in the header, so the toggle takes
   the bottom-left corner on its own, and each chapter's copy (and the hero's sentence) sits one line higher,
   so the toggle reads as the last line under the copy and never covers it. */
:root { --snd-left: var(--gl); --snd-bottom: calc(max(20px, var(--safe-b)) + 10px); --snd-z: 21; }
@media (min-width: 861px) {
  body.has-sound .hud-meta { left: calc(var(--gl) + var(--snd-w, 140px) + 10px); }
}
@media (max-width: 860px) {
  :root { --snd-bottom: max(14px, var(--safe-b)); }
  /* the counter capsule rides in the header row: it leaves and returns with the header */
  .hud-meta { transition: opacity .28s ease, transform .32s cubic-bezier(.22, .61, .36, 1); }
  body.is-ready.hud-hidden .hud-meta { transform: translate3d(0, -64px, 0); opacity: 0; }
}
@media (max-width: 860px) and (max-width: 640px), (max-width: 860px) and (max-aspect-ratio: 19/20) {
  body.has-sound .stage, body.has-sound .stage--right { padding-bottom: calc(max(20px, var(--safe-b)) + 52px); }
  body.has-sound .stage--hero { padding-bottom: calc(max(20px, var(--safe-b)) + 52px); }
}
@media (orientation: landscape) and (max-height: 560px) and (min-aspect-ratio: 19/20) and (min-width: 480px) {
  :root { --snd-bottom: max(10px, var(--safe-b)); }
  body.has-sound .stage { padding-bottom: 54px; }
}
body.snd-away .snd { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
/* the screening room plays alone */
body.is-screening .snd { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hud, .hud-meta { transition: none !important; }
}

/* ---------- the Locus map (js/locus.js owns css/locus.css): full bleed; its root carries its own scroll length ----------
   No ancestor may clip it (its stage is sticky), so the section has no overflow rule and no side padding. */
.locus-section { position: relative; padding: calc(30 * var(--sv)) 0 calc(8 * var(--sv)); }
.locus-section > .section-head { max-width: calc(760px + var(--gl) + var(--gr)); padding: 0 var(--gr) 0 var(--gl); margin-bottom: clamp(8px, 2vh, 24px); }
.locus-section > .footnote { padding: 0 var(--gr) 0 var(--gl); max-width: calc(62ch + var(--gl) + var(--gr)); }

/* ---------- Song DNA (js/songdna.js owns css/songdna.css) ---------- */
.songdna-section { padding: calc(24 * var(--sv)) var(--gr) calc(12 * var(--sv)) var(--gl); }
.songdna-section .section-head { margin-bottom: clamp(28px, 5vh, 56px); }
/* its height is held before it mounts, so a jump past it lands where it should */
/* (the defaults follow css/songdna.css: the stage plus its readout, caption, controls and legend; main.js replaces
   them with the measured height once it has mounted) */
.js .songdna:not(.sdna) { min-height: var(--sd-hold, calc(clamp(min(380px, calc(100svh - 120px)), 58svh, 600px) + 174px)); }
@media (max-width: 639px) { .js .songdna:not(.sdna) { min-height: var(--sd-hold, calc(clamp(min(460px, calc(100svh - 120px)), 74svh, 640px) + 380px)); } }

/* ---------- about: what the studio is, what it makes, how it works ---------- */
.about { padding: calc(14 * var(--sv)) var(--gr) calc(30 * var(--sv)) var(--gl); }
.about__top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 96px); align-items: end;
  padding-bottom: clamp(36px, 4.4vw, 64px); border-bottom: 1px solid var(--line);
}
.about__head .display { margin: 0; }
.about__lede { margin: 0; max-width: 32em; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.5; color: var(--ink); text-shadow: var(--shadow-ink); }
.about__block {
  display: grid; grid-template-columns: minmax(150px, .26fr) minmax(0, 1fr); gap: 22px clamp(28px, 4vw, 64px);
  padding: clamp(30px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--line-2);
}
.about__label { margin: 4px 0 0; font-family: var(--f-mono); font-size: 12.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.about__makes, .about__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px clamp(22px, 2.6vw, 40px); }
.about__makes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: none; }
.about__makes li, .about__steps li { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.about__k { font-weight: 300; font-size: clamp(24px, 2.1vw, 32px); letter-spacing: -.025em; line-height: 1.05; }
.about__v { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 30ch; }
.about__steps li { position: relative; padding-top: 18px; border-top: 1px solid var(--line); }
.about__n { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--ink-3); }
.about__steps li:not(:last-child)::after {
  content: "→"; position: absolute; top: 12px; right: 0; font-size: 16px; color: var(--ink-3);
}
.about__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding-top: clamp(30px, 3.4vw, 48px); }
.about__status { margin: 0; max-width: 46em; font-size: 16px; line-height: 1.6; color: var(--ink); }
.about__status-k {
  display: inline-block; margin-right: 12px; padding: 4px 10px; border-radius: 999px; vertical-align: .1em;
  border: 1px dashed rgba(255, 255, 255, .6); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.about__cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 12px 22px; border-radius: 999px; text-decoration: none; flex: none;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; transition: background .25s, border-color .25s;
}
.about__cta:hover, .about__cta:focus-visible { background: rgba(255, 255, 255, .2); border-color: #fff; }
.about__cta-a { font-family: var(--f-display); font-size: 17px; letter-spacing: 0; transition: transform .3s var(--ease); }
.about__cta:hover .about__cta-a { transform: translateX(4px); }
@media (max-width: 1100px) {
  .about__makes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .locus-section { padding-top: calc(22 * var(--sv)); }
  .songdna-section { padding: calc(18 * var(--sv)) var(--gr) calc(10 * var(--sv)) var(--gl); }
  .about { padding: calc(10 * var(--sv)) var(--gr) calc(22 * var(--sv)) var(--gl); }
  .about__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .about__lede { font-size: 18px; }
  .about__block { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .about__steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .about__steps li:not(:last-child)::after { content: "↓"; }
  .about__v { max-width: 40ch; }
  .about__foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .about__makes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .about__makes li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
  .about__makes li .about__v { flex-basis: 100%; }
  .about__k { font-size: 26px; }
}