/* Fluxtify: a dark studio floor, art-directed per section like reels on one programme.
   Hero = cinema; films = the screening room; IO = ink on paper; How = an edit suite;
   credits = end titles; Muse = a drenched violet chamber; Flux = a starfield; closer = the brand colour itself.
   Neutrals are OKLCH tinted to hue 295 (as in the app's DESIGN.md). The gradient is reserved for
   primary actions, the current selection and one closing band. */
@property --glow { syntax: "<color>"; inherits: true; initial-value: oklch(0.62 0.16 200); }
:root {
  --bg: oklch(0.155 0.012 295);
  --bg-deep: oklch(0.125 0.012 295);
  --panel: oklch(0.195 0.014 295);
  --panel-2: oklch(0.238 0.016 295);
  --line: oklch(0.30 0.018 295);
  --line-soft: oklch(0.24 0.016 295);
  --ink: oklch(0.955 0.008 295);
  --ink-2: oklch(0.86 0.012 295);
  --dim: oklch(0.76 0.014 295);
  --faint: oklch(0.64 0.016 295);
  --violet: oklch(0.6 0.22 292);
  --magenta: oklch(0.58 0.25 330);
  --pink: oklch(0.68 0.21 355);
  --lilac: oklch(0.82 0.09 300);
  --sky: oklch(0.80 0.10 232);
  --sel: oklch(0.68 0.17 252);
  --grad: linear-gradient(90deg, var(--violet), var(--magenta), var(--pink));
  --paper: oklch(0.93 0.014 85);
  --paper-dim: oklch(0.76 0.014 85);
  --ink-black: oklch(0.13 0.006 70);
  --display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(1rem, 4vw, 3rem);
  --max: 82rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--panel); padding: .5rem .8rem; z-index: 20; border-radius: 6px; }

/* Film grain over everything, very quiet. */
body { position: relative; }
body::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.kicker { font: 500 .74rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--lilac); margin: 0 0 1rem; }

/* ───────── Bar ───────── */
.bar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .85rem var(--gut); padding-top: max(.85rem, env(safe-area-inset-top)); background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid color-mix(in oklch, var(--line) 70%, transparent); }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 700 1.15rem var(--display); letter-spacing: -.01em; }
.bar nav { display: flex; justify-content: center; gap: clamp(.9rem, 2.6vw, 2.2rem); font-size: .92rem; color: var(--dim); }
.bar nav a { text-decoration: none; position: relative; padding: .2rem 0; transition: color .2s var(--ease); }
.bar nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.bar nav a:hover, .bar nav a.here { color: var(--ink); }
.bar nav a:hover::after, .bar nav a.here::after { transform: scaleX(1); }
.bar nav .short { display: none; }
.bar-status { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font: 500 .72rem var(--mono); letter-spacing: .04em; color: var(--dim); padding: .38rem .75rem; border: 1px solid var(--line); border-radius: 999px; }
.dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pink) 25%, transparent); flex: none; }

/* ───────── Hero ───────── */
.hero { position: relative; isolation: isolate; padding: clamp(3rem, 8vw, 6.5rem) var(--gut) clamp(3rem, 6vw, 5rem); overflow: clip; }
.hero-glow { position: absolute; inset: -10% -10% auto; height: 110%; z-index: -1; opacity: .5; filter: blur(80px) saturate(1.4); -webkit-mask-image: linear-gradient(#000 35%, transparent 90%); mask-image: linear-gradient(#000 35%, transparent 90%); }
.hero-glow img { width: 100%; height: 100%; object-fit: cover; }
.hero-glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 20%, transparent, var(--bg) 85%); }
.hero-inner { max-width: var(--max); margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: .8rem; font: 500 .76rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 clamp(1.2rem, 2.5vw, 2rem); }
.eyebrow .sep { width: 2.4rem; height: 1px; background: var(--grad); }
.headline { font: 800 clamp(3rem, 9.4vw, 9.4rem)/.9 var(--display); letter-spacing: -.045em; margin: 0; }
.headline .ln { display: block; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.headline .ln > span { display: inline-block; }
.headline em { font-style: normal; color: var(--lilac); }
.hero-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(2rem, 4.5vw, 3.75rem); }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 30rem; margin: 0 0 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-primary, .btn-ghost, .btn-light { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .7rem 1.25rem; border-radius: 999px; font: 600 .95rem var(--body); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s; }
.btn-primary { color: var(--ink); background: var(--grad); box-shadow: 0 8px 30px -8px color-mix(in oklch, var(--magenta) 70%, transparent), inset 0 1px 0 oklch(1 0 0 / .25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px color-mix(in oklch, var(--magenta) 85%, transparent), inset 0 1px 0 oklch(1 0 0 / .25); }
.btn-ghost { color: var(--ink-2); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--lilac); color: var(--ink); }

.hero-film { margin: 0; min-width: 0; }
.frame { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--panel); border: 1px solid color-mix(in oklch, var(--lilac) 22%, var(--line));
  box-shadow: 0 40px 120px -30px color-mix(in oklch, var(--violet) 55%, transparent), 0 0 0 1px oklch(0 0 0 / .3); }
.frame::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--grad); z-index: 2; }
.frame video { width: 100%; height: 100%; object-fit: cover; }
.slate { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: space-between; padding: .8rem 1rem; font: 500 .72rem var(--mono); letter-spacing: .06em; color: var(--ink); text-shadow: 0 1px 8px oklch(0 0 0 / .7); pointer-events: none; transition: opacity .3s; }
.slate-l { display: inline-flex; align-items: center; gap: .5rem; text-transform: uppercase; }
.live { width: .45rem; height: .45rem; border-radius: 50%; background: var(--pink); animation: pulse 2s var(--ease) infinite; }
.slate-r { font-variant-numeric: tabular-nums; }
.sound { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px; min-height: 2.6rem; padding: .55rem 1.05rem .55rem .85rem; font: 600 .9rem var(--body); color: var(--ink); background: var(--grad); cursor: pointer; box-shadow: 0 8px 26px -8px oklch(0 0 0 / .8); transition: transform .25s var(--ease); }
.sound:hover { transform: translateY(-2px); }
.hero-film.with-sound .sound { top: 2.6rem; bottom: auto; }
.hero-film.with-sound .slate { opacity: 0; }
.hero-film figcaption { margin-top: .75rem; text-align: right; }
.tc { font: 400 .75rem var(--mono); color: var(--dim); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ───────── Spec strip ───────── */
.slate-strip { border-block: 1px solid var(--line-soft); background: var(--bg-deep); }
.slate-strip ul { max-width: var(--max); margin: 0 auto; padding: 1.1rem var(--gut); list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.6rem; font: 400 .8rem var(--mono); color: var(--faint); }
.slate-strip b { font-weight: 500; color: var(--ink-2); }

/* ───────── Section heads ───────── */
.sec-head { max-width: var(--max); margin: 0 auto clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: 3rem; align-items: end; }
.sec-head .kicker { grid-column: 1 / -1; }
.sec-head h2, .muse h2, .flux h2, .credits h2 { font: 800 clamp(2.3rem, 5.6vw, 4.8rem)/.95 var(--display); letter-spacing: -.04em; margin: 0; }
.sec-sub { margin: 0; color: var(--dim); }

/* ───────── Films ───────── */
.films { padding: clamp(4.5rem, 10vw, 8rem) var(--gut) clamp(4rem, 8vw, 6rem); }
.reel { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.stage { margin: 0; min-width: 0; }
.stage-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 30px 90px -40px color-mix(in oklch, var(--violet) 60%, transparent); }
.stage video { width: 100%; aspect-ratio: 16 / 9; background: var(--bg-deep); }
.stage figcaption { display: flex; align-items: baseline; gap: .9rem; margin-top: .9rem; font: 600 1.05rem var(--display); }
.stage figcaption .np { font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); white-space: nowrap; }
.stage figcaption .tc { margin-left: auto; }
.playlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; min-width: 0; counter-reset: p; }
.pick { position: relative; width: 100%; display: grid; grid-template-columns: 1.6rem 6.4rem minmax(0, 1fr) auto; column-gap: .85rem; align-items: center; text-align: left; padding: .55rem .7rem .55rem .55rem; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font: 500 .95rem/1.3 var(--body); cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.pick .num { font: 500 .72rem var(--mono); color: var(--faint); text-align: center; }
.pick img { width: 6.4rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; transition: transform .4s var(--ease); }
.pick .pt { display: flex; flex-direction: column; min-width: 0; }
.pick .kind { font: 500 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: .2rem; }
.pick .tc { align-self: start; padding-top: .1rem; }
.pick:hover { background: var(--panel); }
.pick:hover img { transform: scale(1.04); }
.pick.on { background: var(--panel); border-color: color-mix(in oklch, var(--magenta) 45%, var(--line)); }
.pick.on .num { color: var(--pink); }
.pick.on .kind { color: var(--lilac); }

/* ───────── IO: ink on paper ───────── */
.io { background: var(--ink-black); color: var(--paper); padding: clamp(4.5rem, 10vw, 8rem) var(--gut); position: relative; }
.io::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, oklch(1 0 0 / .018) 0 1px, transparent 1px 4px); }
.io-inner { position: relative; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.io-title { font: 800 clamp(7rem, 17vw, 15rem)/.8 var(--display); letter-spacing: -.02em; margin: 0 0 1.5rem; color: var(--paper); }
.io-head p { margin: 0; color: var(--paper-dim); max-width: 22rem; }
.io-head b { color: var(--paper); font-weight: 600; }
.poems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 1.6rem 1.4rem; }
.poem.big { grid-row: span 2; }
.pframe { border-radius: 4px; overflow: hidden; border: 1px solid oklch(0.35 0.01 80); background: oklch(0.08 0.004 70); }
.poems video { width: 100%; aspect-ratio: 16 / 9; filter: grayscale(.15); }
.poems p { margin: .7rem 0 0; display: flex; flex-direction: column; }
.poems p b { font: 700 1.1rem var(--display); letter-spacing: -.01em; }
.poem.big p b { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.poems p span { font: 400 .74rem var(--mono); color: var(--paper-dim); margin-top: .2rem; }

/* ───────── How: edit suite scrollytelling ───────── */
.how { padding: clamp(5rem, 11vw, 9rem) var(--gut) clamp(3rem, 6vw, 5rem); }
.how-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.screen-wrap { position: relative; }
.screen { position: sticky; top: calc(50vh - min(19vw, 15rem)); aspect-ratio: 16 / 11; max-height: 30rem; width: 100%; border-radius: 16px; background: var(--bg-deep); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 40px 100px -40px color-mix(in oklch, var(--violet) 55%, transparent); }
.screen-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); background: var(--panel); }
.screen-bar span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.screen-bar em { margin-left: auto; font: 500 .7rem var(--mono); font-style: normal; color: var(--dim); letter-spacing: .08em; }
.panel { position: absolute; inset: 2.6rem 0 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 3vw, 2rem); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; }
.screen[data-step="1"] .p1, .screen[data-step="2"] .p2, .screen[data-step="3"] .p3, .screen[data-step="4"] .p4 { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s; }
.plabel { font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 1rem; }

.brief { font: 500 clamp(1.15rem, 2.2vw, 1.75rem)/1.35 var(--display); letter-spacing: -.01em; margin: 0 0 1.4rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--panel); border: 1px solid color-mix(in oklch, var(--violet) 50%, var(--line)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--violet) 14%, transparent); min-height: 5.6em; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--pink); animation: blink 1s steps(1) infinite; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips span { font: 500 .72rem var(--mono); color: var(--ink-2); padding: .35rem .7rem; border-radius: 999px; background: var(--panel-2); }
.chips span:first-child { background: color-mix(in oklch, var(--violet) 30%, var(--panel)); }

.scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.scenes li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem .85rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-soft); }
.scenes .sn { font: 500 .75rem var(--mono); color: var(--lilac); }
.scenes .st { font: 600 1rem/1.25 var(--display); display: flex; flex-direction: column; min-width: 0; }
.scenes small { font: 400 .82rem var(--body); color: var(--dim); margin-top: .15rem; }
.screen[data-step="2"] .scenes li { animation: rise .6s var(--ease) both; }
.screen[data-step="2"] .scenes li:nth-child(2) { animation-delay: .12s; }
.screen[data-step="2"] .scenes li:nth-child(3) { animation-delay: .24s; }
.screen[data-step="2"] .scenes li:nth-child(4) { animation-delay: .36s; }

.tracks { position: relative; display: grid; gap: .55rem; }
.track { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.tl { font: 500 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.clips { display: flex; gap: 3px; height: clamp(2.6rem, 6vw, 4.2rem); }
.clips i { flex: 1; border-radius: 5px; background-size: cover; background-position: center; border: 1px solid oklch(1 0 0 / .08); }
.clips b { border-radius: 5px; flex: 1.4; }
.shader { background: conic-gradient(from 200deg at 30% 60%, var(--violet), var(--sky), var(--pink), var(--violet)); background-size: 200% 200%; animation: drift 8s linear infinite; }
.shader.s2 { flex: 1; background: radial-gradient(circle at 50% 50%, var(--pink), var(--magenta) 30%, var(--bg-deep) 70%); }
.wave { height: clamp(1.8rem, 4vw, 2.6rem); border-radius: 5px; background-color: var(--panel); background-repeat: repeat-x; background-position: 0 50%; }
.wave.v { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cg stroke='%2386c8f2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8v4M10 5v10M16 7v6M22 3v14M28 6v8M34 9v2M40 4v12M46 6v8M52 2v16M58 7v6M64 5v10M70 8v4M76 3v14M82 6v8M88 9v2M94 5v10M100 2v16M106 6v8M112 8v4M118 4v12M124 9v2M130 6v8M136 3v14M142 7v6M148 5v10M154 2v16M160 8v4M166 6v8M172 4v12M178 9v2M184 5v10M190 3v14M196 7v6M202 9v2M208 4v12M214 6v8M220 2v16M226 7v6M232 5v10'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; }
.wave.m { background-image: repeating-linear-gradient(90deg, color-mix(in oklch, var(--pink) 80%, transparent) 0 3px, transparent 3px 6px); -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 46% 52%, #000 58%), linear-gradient(0deg, transparent 15%, #000 15% 85%, transparent 85%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 0 40%, transparent 46% 52%, #000 58%), linear-gradient(0deg, transparent 15%, #000 15% 85%, transparent 85%); mask-composite: intersect; }
.playhead { position: absolute; top: -.4rem; bottom: -.4rem; left: calc(4.6rem + .6rem); width: 2px; background: var(--sel); box-shadow: 0 0 12px var(--sel); }
.playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 7px solid var(--sel); }
.screen[data-step="3"] .playhead { animation: scrub 6s linear infinite; }

.bar-track { height: .7rem; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin-bottom: 1.2rem; }
.bar-fill { display: block; height: 100%; width: 100%; background: var(--grad); border-radius: inherit; transform-origin: left; }
.screen[data-step="4"] .bar-fill { animation: fill 2.4s var(--ease) both; }
.log { list-style: none; margin: 0 0 1.4rem; padding: 0; font: 400 .8rem/1.9 var(--mono); color: var(--dim); }
.log li::before { content: "› "; color: var(--faint); }
.log .ok { color: var(--ink); }
.log .ok::before { content: "✓ "; color: var(--pink); }
.ratios { display: flex; align-items: flex-end; gap: clamp(.6rem, 2vw, 1.2rem); }
.ratios span { display: grid; place-items: center; font: 500 .66rem var(--mono); color: var(--ink-2); border: 1.5px solid var(--lilac); border-radius: 5px; }
.r169 { width: 7.2rem; aspect-ratio: 16/9; }
.r916 { width: 3.4rem; aspect-ratio: 9/16; }
.r11 { width: 4.6rem; aspect-ratio: 1; }
.r45 { width: 4.4rem; aspect-ratio: 4/5; }

.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; border-top: 1px solid var(--line-soft); transition: opacity .5s var(--ease); }
.js .step { opacity: .5; }
.step:first-child { border-top: 0; min-height: 50vh; justify-content: flex-start; padding-top: 3rem; }
.step:last-child { min-height: 55vh; }
.step.on { opacity: 1; }
.step .n { font: 500 .78rem var(--mono); color: var(--pink); margin-bottom: .8rem; }
.step h3 { font: 800 clamp(1.8rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -.035em; margin: 0 0 .9rem; }
.step p { margin: 0; color: var(--ink-2); max-width: 30rem; font-size: 1.05rem; }

/* ───────── Credits ───────── */
.credits { padding: clamp(4rem, 9vw, 7rem) var(--gut) clamp(5rem, 10vw, 8rem); text-align: center; border-top: 1px solid var(--line-soft); }
.credits h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.roll { max-width: 52rem; margin: 0 auto; display: grid; gap: 1.35rem; }
.roll div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.6rem; align-items: baseline; }
.roll dt { text-align: right; font: 500 .76rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); }
.roll dd { margin: 0; text-align: left; font: 500 clamp(1.05rem, 1.6vw, 1.3rem)/1.35 var(--display); color: var(--ink); }

/* ───────── Muse: drenched chamber ───────── */
.muse { --glow: oklch(0.62 0.16 200); position: relative; overflow: clip; padding: clamp(5rem, 10vw, 8rem) var(--gut); background:
  radial-gradient(80% 70% at 75% 45%, color-mix(in oklch, var(--glow) 30%, transparent), transparent 70%),
  linear-gradient(180deg, oklch(0.2 0.07 300), oklch(0.15 0.05 300)); transition: --glow 1s; }
.muse[data-look="B"] { --glow: oklch(0.6 0.15 130); }
.muse[data-look="C"] { --glow: oklch(0.75 0.02 300); }
.muse[data-look="D"] { --glow: oklch(0.6 0.27 330); }
.muse-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.muse .kicker { color: oklch(0.84 0.08 330); }
.muse h2 { margin-bottom: 1.4rem; }
.muse-copy > p:not(.kicker) { color: oklch(0.88 0.03 300); max-width: 30rem; }
.coin { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: baseline; margin: 1.6rem 0; padding: 1.1rem 0; border-block: 1px solid oklch(0.4 0.08 300); }
.coin .word { font: 400 italic clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--body); color: var(--ink); letter-spacing: -.01em; }
.coin .pos { font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: oklch(0.8 0.06 300); }
.coin .def { grid-column: 1 / -1; margin-top: .55rem; color: oklch(0.86 0.04 300); }
.muse-stage { position: relative; min-width: 0; }
.orb-glow { position: absolute; inset: 10% 15%; border-radius: 50%; background: var(--glow); filter: blur(90px); opacity: .45; z-index: 0; animation: breathe 6s ease-in-out infinite; transition: background-color 1s; }
.muse-frame { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--bg-deep); border: 1px solid oklch(0.42 0.08 300); box-shadow: 0 40px 100px -30px oklch(0.05 0.03 300 / .9); }
.muse-frame img, .muse-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.muse-frame video { opacity: 0; transition: opacity .6s var(--ease); }
.muse-frame video.ready { opacity: 1; }
.muse-name { position: absolute; left: 1rem; bottom: .9rem; margin: 0; z-index: 2; font: 500 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: .35rem .65rem; border-radius: 6px; background: oklch(0.12 0.02 300 / .72); }
.looks { position: relative; z-index: 1; list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.look { width: 100%; padding: 0; border: 0; background: none; color: oklch(0.82 0.04 300); cursor: pointer; text-align: left; font: 500 .8rem var(--body); }
.look img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1.5px solid oklch(0.38 0.06 300); transition: transform .35s var(--ease), border-color .25s; }
.look span { display: block; margin-top: .45rem; }
.look:hover img { transform: translateY(-3px); }
.look.on { color: var(--ink); }
.look.on img { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pink) 30%, transparent); }

/* ───────── Flux: starfield ───────── */
.flux { position: relative; overflow: clip; padding: clamp(5rem, 10vw, 8rem) var(--gut) clamp(2rem, 4vw, 3rem); background: radial-gradient(90% 60% at 50% 100%, color-mix(in oklch, var(--sky) 28%, transparent), transparent 70%), radial-gradient(50% 40% at 85% 15%, color-mix(in oklch, var(--violet) 22%, transparent), transparent 70%), var(--bg-deep); }
.stars { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(2.5px 2.5px at 22% 30%, var(--sky) 50%, transparent 51%), radial-gradient(2px 2px at 56% 22%, var(--lilac) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 88% 40%, var(--ink) 50%, transparent 51%), radial-gradient(2px 2px at 76% 70%, var(--sky) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 12% 18%, var(--ink) 50%, transparent 51%), radial-gradient(1px 1px at 28% 62%, var(--lilac) 50%, transparent 51%), radial-gradient(2px 2px at 47% 12%, var(--sky) 50%, transparent 51%), radial-gradient(1px 1px at 63% 40%, var(--ink) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 82% 22%, var(--lilac) 50%, transparent 51%), radial-gradient(1px 1px at 91% 58%, var(--sky) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 74%, var(--sky) 50%, transparent 51%), radial-gradient(1px 1px at 72% 8%, var(--ink) 50%, transparent 51%), radial-gradient(1px 1px at 38% 34%, var(--sky) 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate; }
.flux-copy { position: relative; max-width: var(--max); margin: 0 auto; }
.flux-copy p:not(.kicker) { max-width: 38rem; color: var(--ink-2); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.flux .kicker { color: var(--sky); }
.flux h2 { margin-bottom: 1.2rem; }
.poses { position: relative; list-style: none; max-width: var(--max); margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.poses li { flex: 1 1 0; display: flex; justify-content: center; }
.poses img { height: clamp(6rem, 15vw, 13rem); width: auto; filter: drop-shadow(0 18px 24px oklch(0.1 0.05 260 / .7)); transition: transform .5s var(--ease); cursor: default; }
.poses li:hover img { transform: translateY(-14px) rotate(-3deg); }
.poses::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--sky) 60%, transparent), transparent); }

/* ───────── Closer: the brand colour itself ───────── */
.closer { position: relative; overflow: clip; padding: clamp(4.5rem, 10vw, 8rem) var(--gut); background: linear-gradient(115deg, oklch(0.42 0.2 292), oklch(0.44 0.22 330) 55%, oklch(0.5 0.2 355)); }
.closer-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.closer h2 { font: 800 clamp(2.6rem, 7.4vw, 7rem)/.92 var(--display); letter-spacing: -.045em; margin: 0 0 1.5rem; color: oklch(0.98 0.01 330); max-width: 14ch; }
.closer p { margin: 0 0 2rem; max-width: 30rem; color: oklch(0.94 0.03 330); font-size: 1.1rem; }
.btn-light { color: oklch(0.25 0.1 300); background: oklch(0.97 0.012 330); }
.btn-light:hover { transform: translateY(-2px); background: oklch(1 0 0); }
.closer-flux { position: absolute; right: clamp(-1rem, 4vw, 6rem); bottom: -1.5rem; height: clamp(10rem, 26vw, 22rem); width: auto; transform: rotate(-6deg); filter: drop-shadow(0 30px 40px oklch(0.15 0.1 300 / .6)); }

/* ───────── Footer ───────── */
.foot { padding: clamp(2.5rem, 5vw, 4rem) var(--gut) 2rem; background: var(--bg-deep); color: var(--dim); overflow: clip; }
.foot-top, .foot-base { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; }
.foot .brand { color: var(--ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .95rem; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.wordmark { max-width: var(--max); margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.5rem, 4vw, 3rem); font: 800 clamp(4.5rem, 20vw, 19rem)/.95 var(--display); letter-spacing: -.06em; color: var(--panel-2); user-select: none; white-space: nowrap; }
.foot-base { border-top: 1px solid var(--line-soft); padding-top: 1.3rem; font-size: .92rem; }
.foot p { margin: 0; }
.foot .small { font: 400 .74rem var(--mono); color: var(--faint); }

/* ───────── Motion ───────── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes drift { to { background-position: 200% 0; } }
@keyframes scrub { from { transform: translateX(0); } to { transform: translateX(var(--scrub, 20rem)); } }
@keyframes fill { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
@keyframes breathe { 0%, 100% { transform: scale(.9); opacity: .35; } 50% { transform: scale(1.08); opacity: .55; } }
@keyframes twinkle { from { opacity: .45; } to { opacity: .9; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .headline .ln > span { animation: lineUp 1.1s var(--ease) both; }
  .headline .ln:nth-child(2) > span { animation-delay: .12s; }
  .eyebrow, .hero-copy { animation: fadeUp 1s var(--ease) .3s both; }
  .hero-film { animation: fadeUp 1.2s var(--ease) .45s both; }
  .js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .roll .rv { transform: translateY(16px); }
  .poses li:nth-child(odd) img { animation: bob 4.5s ease-in-out infinite; }
  .poses li:nth-child(even) img { animation: bob 5.2s ease-in-out -.8s infinite; }
  .poses li:hover img { animation-play-state: paused; }
  @supports (animation-timeline: view()) {
    .frame { animation: frameIn linear both; animation-timeline: view(); animation-range: cover 30% cover 75%; }
    @keyframes frameIn { from { transform: none; } to { transform: scale(.94); opacity: .7; } }
    .wordmark { animation: wmIn linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes wmIn { from { letter-spacing: .02em; color: var(--panel); } to { letter-spacing: -.06em; color: var(--panel-2); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .caret { display: none; }
}

/* ───────── Responsive ───────── */
@media (max-width: 1080px) {
  .bar-status { display: none; }
  .bar { grid-template-columns: auto 1fr; }
  .bar nav { justify-content: flex-end; }
}
@media (max-width: 900px) {
  .hero-row, .reel, .io-inner, .muse-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-row { align-items: start; }
  .hero-copy { order: 2; }
  .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .io-title { margin-bottom: .8rem; }
  .io-head p { max-width: 36rem; }
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .screen-wrap { position: sticky; top: 3.6rem; z-index: 2; padding: .75rem 0; background: linear-gradient(var(--bg) 85%, transparent); }
  .screen { position: relative; top: 0; aspect-ratio: auto; height: clamp(17.5rem, 56vw, 22rem); }
  .step, .step:first-child { padding-top: 2.5rem; }
  .panel { inset: 2.4rem 0 0; padding: .9rem 1rem; justify-content: flex-start; }
  .plabel { margin-bottom: .7rem; }
  .step, .step:first-child, .step:last-child { min-height: 46vh; padding: 2rem 0; justify-content: flex-start; }
  .brief { font-size: 1.05rem; min-height: 0; padding: .85rem 1rem; margin-bottom: .9rem; }
  .scenes { gap: .35rem; }
  .scenes li { padding: .4rem .7rem; }
  .scenes small { display: none; }
  .log { margin-bottom: .8rem; line-height: 1.6; font-size: .74rem; }
  .bar-track { margin-bottom: .8rem; }
}
@media (max-width: 640px) {
  .bar { padding-inline: 1rem; }
  .bar nav { gap: .95rem; font-size: .86rem; }
  .bar nav .long { display: none; }
  .bar nav .short { display: inline; }
  .hero { padding-inline: 1rem; }
  .headline { font-size: clamp(2.6rem, 12.6vw, 4rem); letter-spacing: -.04em; }
  .eyebrow { letter-spacing: .14em; font-size: .7rem; }
  .slate-strip ul { justify-content: flex-start; gap: .5rem 1.2rem; font-size: .74rem; padding-inline: 1rem; }
  .films, .how, .credits, .muse, .flux, .closer, .io { padding-inline: 1rem; }
  .pick { grid-template-columns: 5.2rem minmax(0, 1fr) auto; padding: .45rem; }
  .pick .num { display: none; }
  .pick img { width: 5.2rem; }
  .stage figcaption { flex-wrap: wrap; row-gap: .2rem; font-size: .98rem; }
  .poems { grid-template-columns: minmax(0, 1fr); }
  .poem.big { grid-row: auto; }
  .roll div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .roll dt, .roll dd { text-align: center; }
  .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poses li:nth-child(n+5) { display: none; }
  .clips { height: 2.4rem; }
  .track { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .playhead { left: 4.1rem; }
  .ratios span { font-size: .6rem; }
  .r169 { width: 4.2rem; } .r916 { width: 2rem; } .r11 { width: 2.8rem; } .r45 { width: 2.6rem; }
  .closer { padding-bottom: 9rem; }
  .closer-flux { right: -1.5rem; bottom: -1.2rem; height: 9.5rem; }
  .closer h2 { max-width: none; font-size: clamp(2rem, 9.6vw, 2.8rem); }
  .closer p { max-width: none; }
  .sound { left: .6rem; bottom: .6rem; min-height: 2.3rem; padding: .4rem .8rem .4rem .65rem; font-size: .8rem; }
  .slate { padding: .55rem .7rem; font-size: .64rem; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}