/* Flux prelands (go.flux.gg) — one stylesheet; every campaign is a set of genes on <html data-*>:
   composition, rhythm, shape, surface, media, motion, cta, density, entrance, reveal, display.
   Palette and fonts arrive inline per page. Text on a picture is always light. */
@layer reset, tokens, base, layout, genes, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  img, video { display: block; max-width: 100%; }
  figure, h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
  ul { list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  dialog { padding: 0; border: 0; max-width: none; max-height: none; }
}

@layer tokens {
  :root {
    --bg: var(--void);
    --panel: var(--ink);
    --fg: var(--text);
    --soft: color-mix(in srgb, var(--fg) 72%, transparent);
    --line: color-mix(in srgb, var(--fg) 16%, transparent);
    --on-accent: #0b0b0b;
    --flux-brand: #3ddc84;
    --mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --r: 0;
    --r-btn: 0;
    --space: clamp(5rem, 11vw, 11rem);
    --gutter: max(5vw, 1.25rem);
    --h1: clamp(1.9rem, 4.2vw, 4.4rem);
    --h2: clamp(2.2rem, 5.4vw, 5.8rem);
    --name: clamp(3.4rem, 10vw, 11rem);
    --body: clamp(1rem, 1.15vw, 1.15rem);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --case: none;
    --track: -.01em;
  }
  .on-image, .hero, .world, .gate, [data-rhythm='chapter-cuts'] .chapter, .theater, .zoom {
    --bg: var(--void);
    --panel: var(--ink);
    --fg: var(--text);
    --soft: color-mix(in srgb, var(--text) 82%, transparent);
    --line: color-mix(in srgb, var(--text) 24%, transparent);
    color: var(--fg);
  }
}

@layer base {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--bg); }
  body { min-height: 100vh; background: var(--bg); color: var(--fg); font: 400 var(--body)/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  h1, h2, h3, .hero__name, .gate__name, .proof__big, .proof__mid { font-family: var(--display); font-weight: var(--display-weight); text-transform: var(--case); letter-spacing: var(--track); line-height: .95; text-wrap: balance; }
  h2 { font-size: var(--h2); }
  h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; }
  p { text-wrap: pretty; }
  a { color: inherit; }
  img { background: color-mix(in srgb, var(--panel) 80%, transparent); }
  :focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
  .skip { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .8rem 1rem; background: var(--fg); color: var(--bg); }
  .skip:focus { top: 1rem; }
  .pad { padding: var(--space) var(--gutter); }
  .kicker { color: var(--glow); font: 600 .72rem/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
  .section-head { display: grid; gap: 1.2rem; max-width: 70rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
  .flux-mark { display: inline-flex; align-items: baseline; gap: .7rem; text-decoration: none; }
  .flux-mark span { font: 800 1.3rem/1 system-ui, sans-serif; letter-spacing: -.05em; }
  .flux-mark i { font-style: normal; color: var(--flux-brand); }
  .flux-mark small { color: var(--soft); font: 600 .6rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
}

@layer layout {
  /* Buttons — the one action on the page. */
  .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 3.2rem; padding: .9rem 1.7rem; border-radius: var(--r-btn); font: 700 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
  .btn--buy { background: var(--accent); color: var(--on-accent); box-shadow: 0 .8rem 2.4rem -1rem var(--accent), inset 0 1px 0 rgba(255,255,255,.25); }
  .btn--buy::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%); transform: translateX(-120%); transition: transform .9s var(--ease); }
  .btn--buy:hover { transform: translateY(-2px); box-shadow: 0 1.2rem 3rem -1rem var(--accent), 0 0 0 1px color-mix(in srgb, var(--glow) 60%, transparent); }
  .btn--buy:hover::after { transform: translateX(120%); }
  .btn__arrow { transition: transform .35s var(--ease); }
  .btn:hover .btn__arrow { transform: translateX(.35rem); }
  .btn__seal { display: none; }
  .btn--xl { min-height: 4rem; padding: 1.15rem 2.4rem; font-size: .9rem; }
  .btn--sm { min-height: 2.5rem; padding: .6rem 1.1rem; font-size: .7rem; }
  .btn--ghost { color: var(--fg); border: 1px solid var(--line); background: color-mix(in srgb, var(--void) 35%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .btn--ghost:hover { border-color: var(--fg); transform: translateY(-2px); }
  .btn__play { width: 0; height: 0; border-left: .65rem solid currentColor; border-block: .4rem solid transparent; }

  /* Bar: transparent over the hero, solid once the reader scrolls. */
  .progress { position: fixed; z-index: 60; inset: 0 0 auto; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
  .bar { position: fixed; z-index: 50; inset: 0 0 auto; display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem var(--gutter); color: var(--text); transition: background .4s, padding .4s, border-color .4s; border-bottom: 1px solid transparent; }
  .bar__title { flex: 1; opacity: 0; font: var(--display-weight) 1.05rem/1 var(--display); text-transform: var(--case); transition: opacity .4s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar .btn { opacity: 0; pointer-events: none; transition: opacity .4s; }
  .bar[data-scrolled] { padding-block: .7rem; background: color-mix(in srgb, var(--void) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-color: color-mix(in srgb, var(--text) 10%, transparent); }
  .bar[data-scrolled] .bar__title, .bar[data-scrolled] .btn { opacity: 1; pointer-events: auto; }

  /* Hero */
  .hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; background: var(--void); }
  .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
  .hero__video { opacity: 0; transition: opacity 1.6s ease; filter: brightness(1.25) saturate(1.1); }
  .hero__video.is-playing { opacity: 1; }
  .hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--void) 2%, color-mix(in srgb, var(--void) 55%, transparent) 38%, transparent 70%), linear-gradient(90deg, color-mix(in srgb, var(--void) 80%, transparent), transparent 62%), radial-gradient(ellipse at 50% 40%, transparent 40%, color-mix(in srgb, var(--void) 60%, transparent)); }
  .hero__copy { position: relative; z-index: 3; display: grid; justify-items: start; gap: 1.3rem; max-width: 50rem; padding: 8rem var(--gutter) clamp(4.5rem, 9vh, 7rem); }
  .hero__logo-wrap { line-height: 0; }
  .hero__logo { width: min(30rem, 78vw); max-height: 12rem; object-fit: contain; object-position: left bottom; background: none; filter: drop-shadow(0 .6rem 2rem rgba(0,0,0,.7)); }
  .hero__name { font-size: min(var(--name), calc(92vw / (var(--name-chars, 10) * var(--cw, .6)))); line-height: .88; text-shadow: 0 .4rem 3rem rgba(0,0,0,.6); }
  /* --cw: the face's average glyph width in em (caps are wider, condensed faces narrower). */
  .hero h1 { font-size: min(var(--h1), calc(var(--measure, 88vw) / (var(--h1-chars, 14) * var(--cw, .6)))); line-height: 1; }
  .h1__line { display: block; }
  .h1__line--2 { color: var(--glow); }
  .hero__intro { max-width: 36rem; color: var(--soft); font-size: clamp(1rem, 1.25vw, 1.2rem); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; }
  .trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .4rem; color: var(--soft); font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .trust li { display: inline-flex; align-items: center; gap: .45rem; }
  .trust svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .trust b { color: var(--glow); font-weight: 700; }
  /* The rating reads as one sentence; as a flex row its two halves wrapped into uneven columns. */
  .trust .trust__reviews { display: block; text-wrap: balance; }
  .hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 1.4rem; width: 1.5rem; height: 2.4rem; margin-left: -.75rem; border: 1px solid var(--line); border-radius: 1rem; }
  .hero__scroll span { position: absolute; left: 50%; top: .45rem; width: 2px; height: .5rem; margin-left: -1px; background: var(--fg); border-radius: 1px; animation: scroll-cue 2s var(--ease) infinite; }
  .hero__shard { position: absolute; z-index: 1; overflow: hidden; box-shadow: 0 2rem 4rem -1rem rgba(0,0,0,.7); border-radius: var(--r); }
  .hero__shard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

  /* Proof band */
  .proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-block: 1px solid var(--line); background: var(--panel); }
  .proof__cell { display: grid; align-content: start; gap: .35rem; padding: clamp(1.8rem, 3.5vw, 3rem) var(--gutter); border-right: 1px solid var(--line); }
  .proof__cell:last-child { border-right: 0; }
  .proof__big { font-size: clamp(3rem, 6vw, 5.6rem); line-height: .9; color: var(--fg); }
  .proof__big small { font-size: .45em; color: var(--glow); }
  .proof__mid { font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.05; }
  .proof__cell span { color: var(--glow); font: 600 .7rem var(--mono); letter-spacing: .18em; text-transform: uppercase; }
  .proof__cell em { color: var(--soft); font-style: normal; font-size: .88rem; }

  /* Statement */
  .statement { display: grid; gap: 1.6rem; text-align: center; justify-items: center; }
  .statement__line { max-width: 18ch; font: var(--display-weight) clamp(2.6rem, 7.5vw, 8rem)/.95 var(--display); text-transform: var(--case); letter-spacing: var(--track); text-wrap: balance; }
  .statement__line:nth-child(odd) { color: var(--glow); }

  /* Contrast */
  .contrast { display: grid; grid-template-columns: 1fr 1fr; }
  .contrast__side { display: grid; align-content: start; background: var(--panel); border-right: 1px solid var(--line); }
  .contrast__side:last-child { border-right: 0; background: color-mix(in srgb, var(--panel) 70%, var(--accent)); }
  .contrast__art { overflow: hidden; aspect-ratio: 16 / 9; }
  .contrast__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
  .contrast__side:hover .contrast__art img { transform: scale(1.05); }
  .contrast__copy { position: relative; display: grid; gap: 1.1rem; padding: clamp(2rem, 5vw, 4.5rem) var(--gutter); }
  .contrast__copy h2 { font-size: clamp(2rem, 3.6vw, 3.6rem); }
  .contrast__copy p:last-child { color: var(--soft); max-width: 34rem; }
  .contrast__number { position: absolute; right: var(--gutter); top: 1.2rem; font: var(--display-weight) clamp(3rem, 7vw, 6rem)/1 var(--display); color: color-mix(in srgb, var(--fg) 10%, transparent); }

  /* Chapters — zigzag by default */
  .chapters__list { display: grid; gap: clamp(4rem, 9vw, 9rem); }
  .chapter { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
  .chapter:nth-child(even) .chapter__art { order: 2; }
  .chapter__art { overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10; box-shadow: 0 2.5rem 5rem -2rem rgba(0,0,0,.6); }
  .chapter__art img { width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--py, 0)); }
  .chapter__copy { display: grid; gap: 1.1rem; max-width: 34rem; }
  .chapter__copy h2 { font-size: clamp(2rem, 3.8vw, 3.8rem); }
  .chapter__copy > p:last-child { color: var(--soft); }
  .chapter__index { font: var(--display-weight) clamp(3rem, 6vw, 5rem)/1 var(--display); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--glow) 70%, transparent); }

  /* World */
  .world { position: relative; min-height: 92vh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
  .world__art { position: absolute; inset: -8% 0; z-index: -1; }
  .world__art img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)); }
  .world__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--void), transparent 55%), linear-gradient(90deg, color-mix(in srgb, var(--void) 70%, transparent), transparent 60%); }
  .world__copy { display: grid; gap: 1.2rem; max-width: 64rem; padding: clamp(3rem, 8vw, 8rem) var(--gutter); }
  .world h2 { text-shadow: 0 .3rem 2.4rem rgba(0,0,0,.7); }

  /* Codex */
  .codex__grid { display: grid; grid-template-columns: repeat(var(--codex-cols, 3), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
  .codex__entry { display: grid; align-content: start; gap: .9rem; padding: clamp(1.8rem, 3vw, 2.8rem); background: var(--bg); transition: background .4s; }
  .codex__entry:hover { background: var(--panel); }
  .codex__entry p:last-child { color: var(--soft); font-size: .95rem; }

  /* Film */
  .film { display: grid; gap: 2.2rem; }
  .film__copy { display: grid; gap: 1rem; }
  .film__copy h2 { font-size: clamp(1.8rem, 3.4vw, 3.4rem); }
  .film__stage { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); box-shadow: 0 3rem 6rem -2rem rgba(0,0,0,.7); }
  .film__poster { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
  .film__stage:hover .film__poster { transform: scale(1.04); filter: brightness(.8); }
  .film__play { position: absolute; left: 50%; top: 50%; width: clamp(5rem, 9vw, 7.5rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .8rem color-mix(in srgb, var(--accent) 30%, transparent), 0 1rem 3rem rgba(0,0,0,.5); transition: transform .4s var(--ease), box-shadow .4s; }
  .film__play::before { content: ''; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-left: 1.4rem solid var(--on-accent); border-block: .85rem solid transparent; }
  .film__stage:hover .film__play { transform: scale(1.08); box-shadow: 0 0 0 1.4rem color-mix(in srgb, var(--accent) 22%, transparent), 0 1rem 3rem rgba(0,0,0,.5); }

  /* Gallery — a rail by default */
  .gallery__grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 58rem); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 1.2rem; scrollbar-width: thin; }
  .plate { position: relative; scroll-snap-align: center; overflow: hidden; border-radius: var(--r); }
  .plate button { display: block; width: 100%; cursor: zoom-in; }
  .plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1s var(--ease), filter .5s; }
  .plate:hover img { transform: scale(1.05); }
  .plate figcaption { position: absolute; left: 1rem; bottom: .8rem; color: var(--text); font: 600 .7rem var(--mono); letter-spacing: .2em; text-shadow: 0 1px 6px #000; pointer-events: none; }

  /* Features */
  .features__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
  .feature { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--panel) 60%, transparent); font-weight: 600; transition: border-color .3s, transform .3s var(--ease); }
  .feature:hover { border-color: var(--glow); transform: translateY(-3px); }
  .feature svg { flex: none; width: 2rem; height: 2rem; fill: none; stroke: var(--glow); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

  /* Credits */
  .credits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 3rem; border-top: 1px solid var(--line); }
  .credits__title { display: grid; gap: 1rem; align-content: start; }
  .credits__title h2 { font-size: clamp(2.2rem, 4.5vw, 4.4rem); }
  .fact { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .fact dt { color: var(--glow); font: 600 .68rem/2.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }

  /* Gate */
  .gate { position: relative; min-height: 92vh; display: grid; place-items: center; padding: 7rem var(--gutter); text-align: center; overflow: hidden; isolation: isolate; }
  .gate__art { position: absolute; inset: -8% 0; z-index: -2; }
  .gate__art img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)); }
  .gate__art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--void) 55%, transparent), color-mix(in srgb, var(--void) 92%, transparent) 75%); }
  .gate__copy { display: grid; justify-items: center; gap: 1.5rem; max-width: 64rem; }
  .gate__logo { width: min(26rem, 74vw); max-height: 10rem; object-fit: contain; background: none; filter: drop-shadow(0 .6rem 2rem rgba(0,0,0,.7)); }
  .gate__name { font-size: clamp(2.8rem, 7vw, 7rem); line-height: .9; }
  .gate h2 { font-size: clamp(1.8rem, 4vw, 4rem); line-height: 1.05; }
  .gate small { color: var(--soft); font-size: .78rem; }

  footer { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; padding-block: 2.5rem 6rem; border-top: 1px solid var(--line); color: var(--soft); font-size: .78rem; }

  /* Dock: the phone's thumb-reach buy button, shown once the hero's button scrolls away. */
  .dock { position: fixed; z-index: 55; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); display: none; align-items: center; gap: .8rem; padding: .55rem .55rem .55rem 1rem; color: var(--text); background: color-mix(in srgb, var(--void) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: calc(var(--r-btn) + .4rem); transform: translateY(160%); opacity: 0; visibility: hidden; transition: transform .5s var(--ease), opacity .5s, visibility .5s; }
  .dock[data-show] { transform: none; opacity: 1; visibility: visible; }
  .dock__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--display-weight) 1rem/1.1 var(--display); text-transform: var(--case); }

  /* Theater and zoom */
  .theater, .zoom { width: 100vw; height: 100dvh; background: rgba(0,0,0,.94); place-items: center; }
  .theater[open], .zoom[open] { display: grid; }
  .theater::backdrop, .zoom::backdrop { background: rgba(0,0,0,.8); }
  .theater__stage { width: min(92vw, 160vh, 82rem); aspect-ratio: 16 / 9; background: #000; }
  .theater__stage video { width: 100%; height: 100%; }
  .theater__bar { position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0; }
  .theater__close { position: absolute; top: 1rem; right: 1.2rem; z-index: 2; width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; color: #fff; }
  .zoom img { max-width: 94vw; max-height: 90dvh; object-fit: contain; background: none; }

  /* Hub */
  .hub main { padding: 6rem var(--gutter); }
  .hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.2rem; margin-top: 2rem; }
  .hub__grid a { position: relative; display: grid; align-content: end; gap: .4rem; min-height: 16rem; padding: 1.5rem; overflow: hidden; text-decoration: none; color: #fff; background: #111; }
  .hub__grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
  .hub__grid span, .hub__grid strong { position: relative; }
  .hub__grid span { font: 600 .7rem monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
  .hub__grid strong { font: 800 1.6rem/1.1 system-ui, sans-serif; }
  body.hub { --void: #0b0b0d; --ink: #141417; --text: #eee; --muted: #999; --glow: #3ddc84; --accent: #3ddc84; font-family: system-ui, sans-serif; }

  /* Glyphs (codex) — abstract signs, never a logo or a likeness */
  .glyph { position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border: 1px solid var(--glow); border-radius: 50%; }
  .glyph::before, .glyph::after { content: ''; position: absolute; }
  .glyph[data-glyph='sun']::before { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--glow); box-shadow: 0 0 1rem var(--glow); }
  .glyph[data-glyph='moon']::before { width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: inset .45rem -.1rem 0 var(--fg); }
  .glyph[data-glyph='clock']::before { width: 1px; height: 1.1rem; background: var(--fg); transform: translateY(-.5rem); }
  .glyph[data-glyph='clock']::after { width: .8rem; height: 1px; background: var(--glow); transform: translateX(.4rem); }
  .glyph[data-glyph='kin']::before { width: 1.3rem; height: 1.8rem; border: 1px solid var(--fg); border-radius: 50% 50% 42% 42%; }
  .glyph[data-glyph='land']::before { width: 1.6rem; height: 1.6rem; border: 1px solid var(--fg); border-width: 1px 0 0 1px; transform: translateY(.4rem) rotate(45deg); }
  .glyph[data-glyph='fork']::before { width: 1px; height: 1.6rem; background: var(--fg); transform: rotate(28deg); }
  .glyph[data-glyph='fork']::after { width: 1px; height: 1.6rem; background: var(--glow); transform: rotate(-28deg); }
  .glyph[data-glyph='blade']::before { width: .45rem; height: 2.2rem; background: linear-gradient(var(--fg), var(--accent)); clip-path: polygon(50% 0, 100% 80%, 50% 100%, 0 80%); }
  .glyph[data-glyph='flame']::before { width: 1rem; height: 1.5rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, var(--glow), var(--accent)); }
  .glyph[data-glyph='eye']::before { width: 1.8rem; height: .9rem; border: 1px solid var(--fg); border-radius: 50%; }
  .glyph[data-glyph='eye']::after { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
  .glyph[data-glyph='star']::before, .glyph[data-glyph='star']::after { width: 1.1rem; height: 1.1rem; border: 1px solid var(--glow); transform: rotate(45deg); }
  .glyph[data-glyph='star']::after { transform: none; }
  .glyph[data-glyph='wave']::before { width: 1.8rem; height: .7rem; border: 1px solid var(--fg); border-color: var(--fg) transparent transparent; border-radius: 50%; }
  .glyph[data-glyph='gate']::before { width: 1.3rem; height: 1.7rem; border: 1px solid var(--fg); border-bottom: 0; border-radius: .7rem .7rem 0 0; }
}

@layer genes {
  /* ── composition: the first screen ── */
  [data-composition='central-monolith'] .hero { place-items: center; text-align: center; }
  [data-composition='central-monolith'] .hero__copy { justify-items: center; max-width: 68rem; padding-bottom: clamp(5rem, 12vh, 9rem); }
  [data-composition='central-monolith'] .hero__logo { object-position: center bottom; }
  [data-composition='central-monolith'] .hero__shade { background: linear-gradient(0deg, var(--void) 1%, transparent 55%), radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--void) 35%, transparent), color-mix(in srgb, var(--void) 75%, transparent) 80%); }
  [data-composition='central-monolith'] .hero__actions, [data-composition='central-monolith'] .trust { justify-content: center; }

  [data-composition='split-vertical'] .hero__media { left: 34%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
  [data-composition='split-vertical'] .hero__shade { background: linear-gradient(0deg, var(--void), transparent 30%); }
  [data-composition='split-vertical'] .hero__copy { align-self: center; max-width: min(46rem, 52vw); --measure: 44vw; }

  [data-composition='edge-collage'] .hero__media { left: 46%; top: 12%; bottom: 14%; right: 0; border-radius: var(--r) 0 0 var(--r); box-shadow: 0 3rem 6rem -2rem rgba(0,0,0,.7); }
  [data-composition='edge-collage'] .hero__shade { background: linear-gradient(90deg, color-mix(in srgb, var(--void) 50%, transparent), transparent 40%); }
  [data-composition='edge-collage'] .hero { background: radial-gradient(ellipse at 20% 50%, var(--panel), var(--void) 70%); }
  [data-composition='edge-collage'] .hero__copy { align-self: center; max-width: min(46rem, 46vw); --measure: 40vw; }
  [data-composition='edge-collage'] .hero__shard--1 { left: 40%; bottom: 7%; width: 17%; transform: rotate(-3deg); }
  [data-composition='edge-collage'] .hero__shard--2 { right: 4%; bottom: 4%; width: 19%; transform: rotate(2.5deg); }
  [data-composition='edge-collage'] .hero__shard--3 { left: 43%; top: 9%; width: 13%; transform: rotate(-1.5deg); }

  [data-composition='framed-landscape'] .hero__media { inset: 5.5rem var(--gutter) 34vh; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line), 0 3rem 6rem -2rem rgba(0,0,0,.8); }
  [data-composition='framed-landscape'] .hero__shade { background: linear-gradient(0deg, color-mix(in srgb, var(--void) 70%, transparent), transparent 50%); }
  [data-composition='framed-landscape'] .hero { place-items: end center; text-align: center; }
  [data-composition='framed-landscape'] .hero__copy { justify-items: center; max-width: 70rem; padding-top: 0; }
  [data-composition='framed-landscape'] .hero__actions, [data-composition='framed-landscape'] .trust { justify-content: center; }

  /* ── rhythm: chapter form ── */
  [data-rhythm='ritual-descent'] .chapters__list { max-width: 86rem; margin-inline: auto; }
  [data-rhythm='drift-and-impact'] .chapter__copy { position: relative; z-index: 2; padding: clamp(2rem, 4vw, 3.5rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-left: -8rem; box-shadow: 0 2rem 4rem -2rem rgba(0,0,0,.6); }
  [data-rhythm='drift-and-impact'] .chapter:nth-child(even) .chapter__copy { margin: 0 -8rem 0 0; }
  [data-rhythm='chapter-cuts'] .chapters { padding-inline: 0; }
  [data-rhythm='chapter-cuts'] .section-head { padding-inline: var(--gutter); }
  [data-rhythm='chapter-cuts'] .chapters__list { gap: 0; }
  [data-rhythm='chapter-cuts'] .chapter { position: relative; display: grid; grid-template-columns: 1fr; min-height: 88vh; align-items: end; overflow: hidden; isolation: isolate; }
  [data-rhythm='chapter-cuts'] .chapter__art { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; order: 0 !important; box-shadow: none; }
  [data-rhythm='chapter-cuts'] .chapter__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--void), transparent 60%), linear-gradient(90deg, color-mix(in srgb, var(--void) 70%, transparent), transparent 60%); }
  [data-rhythm='chapter-cuts'] .chapter__copy { padding: 0 var(--gutter) clamp(3rem, 8vw, 7rem); max-width: 48rem; }
  [data-rhythm='continuous-scroll'] .chapters__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
  [data-rhythm='continuous-scroll'] .chapter { display: block; padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem) 0; border-bottom: 1px solid var(--line); }
  [data-rhythm='continuous-scroll'] .chapter__copy { max-width: none; }

  /* ── mediaTreatment: gallery form and the world frame ── */
  [data-media='cinematic-bleed'] .world { min-height: 0; aspect-ratio: 21 / 9; border-block: 3vw solid #000; }
  [data-media='aperture-crop'] .gallery__grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; overflow: visible; margin: 0; padding: 0; }
  [data-media='aperture-crop'] .plate { border-radius: 50%; aspect-ratio: 1; }
  [data-media='aperture-crop'] .plate img { aspect-ratio: 1; }
  [data-media='aperture-crop'] .world__art { inset: 0 0 0 30%; clip-path: ellipse(48% 46% at 55% 50%); }
  [data-media='aperture-crop'] .world__art::after { background: none; }
  [data-media='aperture-crop'] .world__copy { max-width: 36vw; }
  [data-media='aperture-crop'] .world h2 { font-size: min(var(--h2), 4.6vw); }
  [data-media='aperture-crop'] .world { background: var(--bg); color: var(--fg); --fg: var(--text); }
  [data-media='triptych'] .gallery__grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; overflow: visible; margin: 0; padding: 0; }
  [data-media='triptych'] .plate img { aspect-ratio: 3 / 4; }
  [data-media='triptych'] .plate:nth-child(3n+2) { transform: translateY(3rem); }
  [data-media='triptych'] .world__art { -webkit-mask-image: linear-gradient(90deg, #000 0 32.6%, transparent 32.6% 33.6%, #000 33.6% 66.2%, transparent 66.2% 67.2%, #000 67.2%); mask-image: linear-gradient(90deg, #000 0 32.6%, transparent 32.6% 33.6%, #000 33.6% 66.2%, transparent 66.2% 67.2%, #000 67.2%); }
  [data-media='archival-plates'] .gallery__grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; overflow: visible; margin: 0; padding: 0; }
  [data-media='archival-plates'] .plate { padding: .9rem .9rem 2.8rem; background: var(--panel); border: 1px solid var(--line); overflow: visible; }
  [data-media='archival-plates'] .plate:nth-child(odd) { transform: rotate(-.8deg); }
  [data-media='archival-plates'] .plate:nth-child(even) { transform: rotate(.7deg) translateY(2rem); }
  [data-media='archival-plates'] .plate figcaption { bottom: .9rem; color: var(--soft); text-shadow: none; }
  [data-media='archival-plates'] .world__art { inset: 4vw; border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); }

  /* ── density ── */
  [data-density='sparse'] { --space: clamp(6rem, 15vw, 15rem); --h2: clamp(2.6rem, 6.6vw, 7rem); --codex-cols: 2; }
  [data-density='editorial'] { --codex-cols: 3; }
  [data-density='dense'] { --space: clamp(4rem, 7vw, 7rem); --h2: clamp(2rem, 4.2vw, 4.4rem); --codex-cols: 4; }

  /* ── shapeLanguage: corners, ornaments, the button's silhouette ── */
  [data-shape='gothic-blade'] { --r: 0; --r-btn: 0; --case: uppercase; --track: .04em; --cw: .76; }
  [data-shape='gothic-blade'] .btn { clip-path: polygon(.9rem 0, calc(100% - .9rem) 0, 100% 50%, calc(100% - .9rem) 100%, .9rem 100%, 0 50%); padding-inline: 2.4rem; }
  [data-shape='gothic-blade'] .kicker::before { content: '◆ '; color: var(--accent); }
  [data-shape='gothic-blade'] .codex__entry { border-top: 2px solid var(--accent); }
  [data-shape='eroded-organic'] { --r: 1.4rem; --r-btn: 99rem; }
  [data-shape='eroded-organic'] .chapter__art, [data-shape='eroded-organic'] .film__stage { border-radius: 2.4rem .8rem 2.4rem .8rem; }
  [data-shape='geometric-signal'] { --r: 0; --r-btn: 0; --case: uppercase; --track: .02em; --cw: .72; }
  [data-shape='geometric-signal'] .btn, [data-shape='geometric-signal'] .feature, [data-shape='geometric-signal'] .chapter__art { clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem)); }
  [data-shape='geometric-signal'] .kicker::before { content: '[ '; }
  [data-shape='geometric-signal'] .kicker::after { content: ' ]'; }
  [data-shape='paper-cut'] { --r: 0; --r-btn: 0; --case: uppercase; --track: 0; --cw: .72; }
  [data-shape='paper-cut'] .btn--buy, [data-shape='paper-cut'] .chapter__art, [data-shape='paper-cut'] .plate, [data-shape='paper-cut'] .feature { box-shadow: .5rem .5rem 0 var(--glow); }
  [data-shape='paper-cut'] .codex__grid { gap: 1rem; background: none; border: 0; }
  [data-shape='paper-cut'] .codex__entry { border: 2px solid var(--fg); }
  [data-shape='paper-cut'] .codex__entry:nth-child(odd) { transform: rotate(-.8deg); }

  /* ── surface: the material under everything ── */
  [data-surface='blackened-steel'] body { background: linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px) 0 0 / 3px 100%, linear-gradient(var(--void), color-mix(in srgb, var(--void) 85%, var(--ink))); }
  [data-surface='wet-stone'] body { background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 50%), linear-gradient(var(--void), var(--ink)); background-attachment: fixed; }
  [data-surface='parchment'] { --bg: color-mix(in srgb, var(--text) 88%, #fff); --panel: color-mix(in srgb, var(--text) 74%, var(--muted)); --fg: var(--void); --soft: color-mix(in srgb, var(--void) 74%, transparent); --line: color-mix(in srgb, var(--void) 20%, transparent); }
  [data-surface='parchment'] body { background: radial-gradient(ellipse at center, transparent 50%, color-mix(in srgb, var(--muted) 28%, transparent)), var(--bg); }
  [data-surface='parchment'] .kicker, [data-surface='parchment'] .proof__cell span, [data-surface='parchment'] .fact dt { color: color-mix(in srgb, var(--accent) 70%, var(--void)); }
  [data-surface='parchment'] .statement__line:nth-child(odd), [data-surface='parchment'] .h1__line--2 { color: color-mix(in srgb, var(--accent) 80%, var(--void)); }
  [data-surface='parchment'] .hero .h1__line--2 { color: var(--glow); }
  [data-surface='parchment'] .hero .kicker, [data-surface='parchment'] .world .kicker, [data-surface='parchment'] .gate .kicker { color: var(--glow); }
  [data-surface='glass-haze'] body { background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 40%), radial-gradient(circle at 85% 70%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 45%), var(--void); background-attachment: fixed; }
  [data-surface='glass-haze'] .codex__entry, [data-surface='glass-haze'] .contrast__side, [data-surface='glass-haze'] .feature, [data-surface='glass-haze'] .proof { background: color-mix(in srgb, var(--ink) 45%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

  /* ── ctaMotif: the button and the gate ── */
  [data-cta='blood-seal'] .btn--buy .btn__seal { display: block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--on-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--on-accent) 30%, transparent); animation: seal 2.4s ease-in-out infinite; }
  [data-cta='blood-seal'] .gate__copy::before { content: ''; width: 5rem; height: 5rem; border-radius: 50%; background: radial-gradient(circle, var(--accent) 40%, transparent 42%), radial-gradient(circle, transparent 55%, var(--accent) 57%, transparent 60%); filter: drop-shadow(0 0 1.4rem var(--accent)); }
  [data-cta='signal-gate'] .gate::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--glow) 6%, transparent) 3px 4px); }
  [data-cta='signal-gate'] .btn--buy { box-shadow: 0 0 0 1px var(--glow), 0 0 2rem -.4rem var(--glow); }
  [data-cta='hard-cut'] .gate { place-items: end start; text-align: left; }
  [data-cta='hard-cut'] .gate__copy { justify-items: start; }
  [data-cta='hard-cut'] .gate__art { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
  [data-cta='hard-cut'] .btn--buy:hover { background: var(--text); color: var(--void); }
  [data-cta='luminous-frame'] .btn--buy { outline: 1px solid color-mix(in srgb, var(--glow) 70%, transparent); outline-offset: 4px; }
  [data-cta='luminous-frame'] .gate__copy { padding: clamp(2rem, 5vw, 4rem); border: 1px solid color-mix(in srgb, var(--glow) 45%, transparent); box-shadow: 0 0 4rem -1rem var(--glow), inset 0 0 4rem -2rem var(--glow); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

  /* ── display fonts that need their own scale ── */
  [data-display='press-start'], [data-display='silkscreen'] { --name: clamp(2.2rem, 6vw, 6.4rem); --h1: clamp(1.1rem, 2.2vw, 2.2rem); --h2: clamp(1.4rem, 3vw, 3rem); --track: 0; --cw: .95; }
  [data-display='press-start'] h1, [data-display='press-start'] h2, [data-display='press-start'] .statement__line { line-height: 1.35; }
  [data-display='press-start'] .statement__line { font-size: clamp(1.4rem, 3.6vw, 3.6rem); }
  [data-display='press-start'] .hero__name, [data-display='silkscreen'] .hero__name { text-shadow: .25rem .25rem 0 var(--accent), 0 .4rem 3rem rgba(0,0,0,.6); }
  [data-display='press-start'] :is(.chapter__copy, .contrast__copy, .credits__title) h2, [data-display='press-start'] .gate h2 { font-size: clamp(1.1rem, 1.9vw, 1.9rem); line-height: 1.35; }
  [data-display='press-start'] .proof__mid, [data-display='silkscreen'] .proof__mid { font-size: clamp(.85rem, 1.2vw, 1.15rem); line-height: 1.5; }
  [data-display='press-start'] .proof__big { font-size: clamp(2rem, 3.6vw, 3.4rem); }
  [data-display='press-start'] .chapter__index { font-size: clamp(1.6rem, 3vw, 2.6rem); }
  [data-display='press-start'] h3, [data-display='press-start'] .bar__title, [data-display='press-start'] .dock__name { font-size: .85rem; line-height: 1.5; }
  [data-display='unifraktur'], [data-display='pirata'] { --case: none; }
  [data-display='bebas'], [data-display='anton'], [data-display='oswald'], [data-display='teko'] { --name: clamp(4.4rem, 13vw, 15rem); --case: uppercase; --track: .005em; --cw: .46; }
  [data-display='cinzel'], [data-display='marcellus'], [data-display='orbitron'], [data-display='russo'], [data-display='black-ops'], [data-display='audiowide'], [data-display='bungee'] { --cw: .8; }
}

@layer motion {
  /* Atmosphere: particles positioned by the renderer (--x, --d delay, --t duration, --s scale). */
  .atmos { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
  .atmo { position: absolute; inset: 0; }
  .atmo i { position: absolute; left: var(--x); top: -2%; width: calc(.35rem * var(--s)); height: calc(.35rem * var(--s)); border-radius: 50%; animation: fall var(--t) linear var(--d) infinite; }
  .atmo--ash i { background: rgba(210,205,200,.55); filter: blur(.5px); animation-name: ash; }
  .atmo--snow i { background: rgba(255,255,255,.85); filter: blur(.6px); animation-name: snow; }
  .atmo--rain i { width: 1px; height: calc(4rem * var(--s)); border-radius: 0; background: linear-gradient(transparent, rgba(200,220,255,.5)); animation: rain calc(var(--t) / 7) linear var(--d) infinite; }
  .atmo--embers i, .atmo--sparks i { top: auto; bottom: -2%; background: var(--glow); box-shadow: 0 0 .7rem var(--accent), 0 0 .2rem var(--glow); animation-name: rise; }
  .atmo--sparks i { width: 2px; height: calc(.9rem * var(--s)); border-radius: 1px; animation-duration: calc(var(--t) / 3); }
  .atmo--fireflies i { top: calc(30% + var(--s) * 40%); background: #e8ff9a; box-shadow: 0 0 .8rem #c8f060; animation: firefly var(--t) ease-in-out var(--d) infinite alternate; }
  .atmo--dust i { top: calc(var(--s) * 60%); width: 3px; height: 3px; background: color-mix(in srgb, var(--text) 40%, transparent); animation: dust calc(var(--t) * 2) linear var(--d) infinite; }
  .atmo--pixels i { top: calc(var(--s) * 60%); width: calc(.5rem * var(--s)); height: calc(.5rem * var(--s)); border-radius: 0; background: var(--glow); animation: pixel calc(var(--t) / 2) steps(2, jump-none) var(--d) infinite; }
  .atmo--mist { background: radial-gradient(ellipse 60% 40% at 30% 70%, color-mix(in srgb, var(--text) 14%, transparent), transparent), radial-gradient(ellipse 50% 30% at 75% 60%, color-mix(in srgb, var(--text) 10%, transparent), transparent); filter: blur(20px); animation: mist 28s ease-in-out infinite alternate; }
  .atmo--grain { inset: -50%; opacity: .1; 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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
  .atmo--scanlines { background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); animation: scan 9s linear infinite; }
  .atmo--lightning { animation: lightning 11s linear infinite; }
  @keyframes fall { to { transform: translate3d(2rem, 110vh, 0); } }
  @keyframes ash { 50% { transform: translate3d(-1.5rem, 55vh, 0) rotate(120deg); } to { transform: translate3d(1rem, 110vh, 0) rotate(260deg); } }
  @keyframes snow { 50% { transform: translate3d(1.5rem, 55vh, 0); } to { transform: translate3d(-1rem, 110vh, 0); } }
  @keyframes rain { from { transform: translate3d(0, -10vh, 0) rotate(12deg); } to { transform: translate3d(-12vh, 110vh, 0) rotate(12deg); } }
  @keyframes rise { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 15% { opacity: 1; } to { opacity: 0; transform: translate3d(3rem, -95vh, 0); } }
  @keyframes firefly { 0% { opacity: .1; transform: translate(0, 0); } 50% { opacity: 1; } to { opacity: .2; transform: translate(4rem, -3rem); } }
  @keyframes dust { from { transform: translateX(-5vw); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateX(30vw); opacity: 0; } }
  @keyframes pixel { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
  @keyframes mist { to { transform: translateX(8%) scale(1.15); } }
  @keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -6%); } 60% { transform: translate(-3%, 5%); } 80% { transform: translate(6%, 2%); } }
  @keyframes scan { to { background-position: 0 100vh; } }
  @keyframes lightning { 0%, 93%, 95%, 97%, 100% { background: transparent; } 94%, 96% { background: rgba(225,232,255,.22); } }
  @keyframes scroll-cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } to { opacity: 0; transform: translateY(.8rem); } }
  @keyframes seal { 50% { box-shadow: 0 0 0 .45rem transparent; } }

  /* motion: what the hero picture does while you read */
  [data-motion='slow-drift'] .hero__img, [data-motion='slow-drift'] .hero__video { animation: drift 40s ease-in-out infinite alternate; }
  [data-motion='pulse'] .hero__media { animation: pulse 9s ease-in-out infinite; }
  @keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.16) translate(-2%, -1.5%); } }
  @keyframes pulse { 50% { filter: brightness(1.18) saturate(1.1); } }

  /* entrance: how the first screen arrives (html.js is set before paint by site.js) */
  .js .hero__copy > * { animation: rise-in 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * .12s + .15s); }
  .hero__copy > :nth-child(2) { --i: 1; } .hero__copy > :nth-child(3) { --i: 2; } .hero__copy > :nth-child(4) { --i: 3; }
  .hero__copy > :nth-child(5) { --i: 4; } .hero__copy > :nth-child(6) { --i: 5; }
  .js[data-entrance='focus'] .hero__media { animation: focus-in 2.2s var(--ease) both; }
  .js[data-entrance='focus'] .hero__copy > * { animation-name: blur-in; }
  .js[data-entrance='zoom'] .hero__media { animation: zoom-in 3s var(--ease) both; }
  .js[data-entrance='zoom'] .hero__copy > * { animation-delay: calc(var(--i, 0) * .12s + .9s); }
  .js[data-entrance='ink'] .hero__media { animation: ink-in 2.4s var(--ease) both; }
  .js[data-entrance='wipe'] .hero__copy > * { animation-name: wipe-in; }
  .js[data-entrance='wipe'] .hero__media { animation: wipe-media 1.6s var(--ease) both; }
  .js[data-entrance='glitch'] .hero__copy > :is(h1, .hero__name, .hero__logo-wrap) { animation: glitch-in 1.1s steps(1) both; }
  .js[data-entrance='glitch'] .hero__media { animation: flicker 1.4s steps(1) both; }
  .js[data-entrance='letters'] .hero__copy > :is(h1, .hero__name) { animation: none; }
  .char { display: inline-block; white-space: pre; animation: letter-in .8s var(--ease) both; animation-delay: calc(var(--c) * .035s + .2s); }
  @keyframes rise-in { from { opacity: 0; transform: translateY(2.2rem); } }
  @keyframes blur-in { from { opacity: 0; filter: blur(14px); transform: scale(1.04); } }
  @keyframes focus-in { from { filter: blur(24px) brightness(.4); transform: scale(1.15); } }
  @keyframes zoom-in { from { transform: scale(1.35); filter: brightness(.3); } }
  @keyframes ink-in { from { clip-path: circle(0% at 50% 62%); } to { clip-path: circle(150% at 50% 62%); } }
  @keyframes wipe-in { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); } }
  @keyframes wipe-media { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
  @keyframes glitch-in { 0% { opacity: 0; } 10% { opacity: 1; transform: translate(-6px, 2px); text-shadow: 4px 0 var(--accent), -4px 0 var(--glow); clip-path: inset(10% 0 55% 0); } 25% { transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); } 40% { transform: translate(-3px, 0); clip-path: inset(30% 0 30% 0); } 55% { transform: none; clip-path: none; text-shadow: 2px 0 var(--accent), -2px 0 var(--glow); } 70%, 100% { text-shadow: none; } }
  @keyframes flicker { 0% { opacity: 0; } 8% { opacity: .7; } 12% { opacity: .1; } 20% { opacity: 1; } 24% { opacity: .4; } 30%, 100% { opacity: 1; } }
  @keyframes letter-in { from { opacity: 0; transform: translateY(.6em) rotate(6deg); filter: blur(6px); } }

  /* reveal: how each block enters on scroll (only with JS; never hides content without it) */
  .js .reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease), clip-path 1.2s var(--ease); }
  .js .reveal:not(.is-visible) { opacity: 0; }
  .js .reveal.is-visible { opacity: 1; }
  .js[data-reveal='rise'] .reveal:not(.is-visible) { transform: translateY(3rem); }
  .js[data-reveal='slide'] .reveal:not(.is-visible):nth-child(odd) { transform: translateX(-4rem); }
  .js[data-reveal='slide'] .reveal:not(.is-visible):nth-child(even) { transform: translateX(4rem); }
  /* A mask, not clip-path: a fully clipped element never reports itself visible. */
  .js[data-reveal='clip'] .reveal { -webkit-mask: linear-gradient(#000 0 0) top / 100% 100% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 100% no-repeat; transition: -webkit-mask-size 1.3s var(--ease), mask-size 1.3s var(--ease), transform 1.3s var(--ease); }
  .js[data-reveal='clip'] .reveal:not(.is-visible) { opacity: 1; -webkit-mask-size: 100% 0%; mask-size: 100% 0%; transform: translateY(1.5rem); }
  .js[data-reveal='scale'] .reveal:not(.is-visible) { transform: scale(.9); }
  .js[data-reveal='blur'] .reveal:not(.is-visible) { filter: blur(16px); }
  .js[data-reveal='tilt'] .reveal:not(.is-visible) { transform: perspective(900px) rotateX(16deg) translateY(3rem); transform-origin: 50% 100%; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
    .atmos, .hero__video { display: none; }
  }
}

@media (max-width: 850px) {
  :root { --gutter: 1.25rem; }
  .bar { padding-block: .8rem; }
  .bar .btn, .bar__title { display: none; }
  /* Phone: the key art is a visible band on top, fading into the copy — a full-bleed cover of a 3:1 image over a
     tall hero only ever showed its dark middle under the shade (an ad click landed on an empty screen). */
  [data-composition] .hero__media { inset: 0 0 auto 0; height: var(--hero-band); border-radius: 0; box-shadow: none; -webkit-mask-image: none; mask-image: none; }
  [data-composition] .hero__shade { background: linear-gradient(0deg, var(--void) 2%, color-mix(in srgb, var(--void) 55%, transparent) 30%, transparent 65%), linear-gradient(180deg, color-mix(in srgb, var(--void) 55%, transparent), transparent 30%); }
  [data-composition] .hero__copy { max-width: none; padding: calc(var(--hero-band) - 3.5rem) 1.25rem 4.5rem; --measure: 88vw; }
  .hero { --hero-band: clamp(14rem, 62vw, 24rem); }
  .hero__img { object-position: center; }
  .hero__shard, .hero__scroll { display: none; }
  .hero__actions { display: grid; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof__cell { border-bottom: 1px solid var(--line); }
  .contrast, .credits, footer { grid-template-columns: 1fr; }
  .chapter, [data-rhythm='continuous-scroll'] .chapters__list { grid-template-columns: 1fr; }
  .chapter:nth-child(even) .chapter__art { order: 0; }
  [data-rhythm='drift-and-impact'] .chapter__copy, [data-rhythm='drift-and-impact'] .chapter:nth-child(even) .chapter__copy { margin: -3rem 1rem 0; }
  .codex__grid { --codex-cols: 1; }
  .gallery__grid, [data-media] .gallery__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84vw; overflow-x: auto; margin-inline: -1.25rem; padding: 0 1.25rem 1rem; gap: .8rem; }
  [data-media] .plate { transform: none !important; }
  /* A wide picture in a tall section crops to sky: on a phone the aperture gets its own landscape box. */
  [data-media='aperture-crop'] .world { min-height: 0; display: block; padding-top: 1.5rem; }
  [data-media='aperture-crop'] .world__art { position: relative; inset: auto; height: 64vw; clip-path: ellipse(50% 50% at 50% 50%); }
  [data-media='aperture-crop'] .world__copy { max-width: none; }
  [data-media='aperture-crop'] .world h2 { font-size: var(--h2); }
  .fact { grid-template-columns: 7rem 1fr; }
  .dock { display: flex; }
  .theater__bar { display: none; }
}