/* Neuron Engine Studio — one page over a fixed 3D stage, with two held scenes (DEATH STEEL, the engine).
   Faces: Michroma (titles, capitals), Geist (text), Geist Mono (labels). Black, ink, and one dim tone. */
@font-face { font-family: 'Michroma'; src: url('/assets/fonts/Michroma-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-VF.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono-VF.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #030304;
  --ink: #e9edf2;
  --dim: rgba(233, 237, 242, 0.56);
  --faint: rgba(233, 237, 242, 0.16);
  --line: rgba(233, 237, 242, 0.1);
  --display: 'Michroma', 'Geist', system-ui, sans-serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --gutter: clamp(20px, 2.6vw, 64px);
  --wide: min(1680px, 100vw - var(--gutter) * 2);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); overflow-x: hidden; }
body { margin: 0; font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }

.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ type */

.display { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.08; }
.display .row { display: block; text-wrap: balance; }
.display .row--dim { color: rgba(233, 237, 242, 0.42); }
.label { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); }
.label b { font-weight: 500; color: var(--ink); }
.lead { margin: 0; max-width: 54ch; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.65; color: var(--dim); }

.link { display: inline-flex; gap: 0.5em; align-items: baseline; font: 500 12px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  padding-bottom: 6px; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat; transition: background-size 0.5s var(--ease); }
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* Letters of a display title arrive out of a blur, one after another, when the title comes into view. */
.ch { display: inline-block; white-space: pre; opacity: 0; filter: blur(12px); transform: translateY(0.28em) scale(1.04);
  transition: opacity 0.9s ease, filter 1s ease, transform 1.2s var(--ease); transition-delay: calc(var(--i) * 22ms + 80ms); }
.is-in .ch { opacity: 1; filter: none; transform: none; }

/* Korean, Japanese, Chinese: a Korean word never breaks in the middle, Japanese and Chinese lines break
   by their strict rules, and none of them takes the wide letter-spacing of the Latin labels. */
:lang(ko) { word-break: keep-all; }
:lang(ja), :lang(zh) { line-break: strict; }
:lang(ja) { word-break: auto-phrase; }      /* where supported (Chrome): Japanese lines break between phrases, not inside a word */
:is(:lang(ko), :lang(ja), :lang(zh)) :is(.label, .link, .bar__nav a, .bar__menu, .cursor span) { letter-spacing: 0.06em; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease 0.15s, transform 1.3s var(--ease) 0.15s; }
.reveal.is-in { opacity: 1; transform: none; }

/* Film grain over everything, faint; the cursor's ring over links, pictures and the world. */
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: 0.045; mix-blend-mode: screen;
  background: url('/assets/grain.png'); animation: grain 0.9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* A jump across the page: a short fade to black, the cut, and back (main.js). */
.veil { position: fixed; inset: 0; z-index: 28; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.26s ease; }
.veil.is-on { opacity: 1; }

.cursor { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; width: 0; height: 0; }
.cursor span { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid rgba(233, 237, 242, 0.7);
  display: grid; place-items: center; font: 500 9px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transform: scale(0.4); transition: opacity 0.3s ease, transform 0.45s var(--ease); backdrop-filter: blur(2px); }
.cursor.is-on span { opacity: 1; transform: scale(1); }
/* Touch screens: no cursor, and none of the full-screen blending layers (they cost every frame on a phone). */
@media (pointer: coarse) { .cursor, .grain, .ds__embers { display: none; } }

/* ------------------------------------------------------------------ bar */

.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: var(--gutter); pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar::before { content: ''; position: absolute; inset: 0 0 -48px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(3, 3, 4, 0.94), rgba(3, 3, 4, 0.7) 55%, rgba(3, 3, 4, 0)); opacity: 0; transition: opacity 0.5s ease; }
.is-scrolled .bar::before { opacity: 1; }
.is-scene .bar::before { opacity: 0; }
.bar__mark img { height: clamp(11px, 0.95vw, 17px); width: auto; }
.bar__nav { display: flex; gap: clamp(18px, 2.2vw, 44px); }
.bar__nav a { font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); transition: color 0.25s; }
.bar__nav a:hover, .bar__nav a.is-here { color: var(--ink); }
.bar__end { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 44px); }
/* The site's languages, after the sections (on phones, in the menu). */
.bar__langs { display: flex; gap: 14px; padding-left: clamp(18px, 2.2vw, 44px); border-left: 1px solid var(--faint); }
.bar__langs a { font: 500 11px/1 var(--mono); letter-spacing: 0.2em; }
.bar__langs a, .menu__langs a { color: var(--dim); transition: color 0.25s; }
.bar__langs a:hover, .bar__langs a[aria-current], .menu__langs a[aria-current] { color: var(--ink); }

/* Phones: a Menu button and a full-screen list of the sections. */
.bar__menu { display: none; align-items: center; gap: 12px; padding: 6px 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.bar__menu i { position: relative; width: 18px; height: 7px; }
.bar__menu i::before, .bar__menu i::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.bar__menu i::before { top: 0; }
.bar__menu i::after { top: 6px; }
.menu-open .bar__menu i::before { top: 3px; transform: rotate(35deg); }
.menu-open .bar__menu i::after { top: 3px; transform: rotate(-35deg); }

.menu { display: none; }
@media (max-width: 800px) {
  .bar__menu { display: inline-flex; }
  .menu { position: fixed; inset: 0; z-index: 29; display: grid; align-content: end; gap: 40px; padding: 0 var(--gutter) calc(var(--gutter) * 2.2);
    background: var(--bg); opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
  .menu-open .menu { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
  .menu__list { margin: 0; padding: 0; list-style: none; display: grid; }
  .menu__list li { border-top: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.6s var(--ease); }
  .menu__list li:last-child { border-bottom: 1px solid var(--line); }
  .menu-open .menu__list li { opacity: 1; transform: none; }
  .menu-open .menu__list li:nth-child(2) { transition-delay: 0.04s; }
  .menu-open .menu__list li:nth-child(3) { transition-delay: 0.08s; }
  .menu-open .menu__list li:nth-child(4) { transition-delay: 0.12s; }
  .menu-open .menu__list li:nth-child(5) { transition-delay: 0.16s; }
  .menu__list a { display: flex; align-items: baseline; gap: 18px; padding: 20px 0; font: 400 clamp(22px, 7vw, 32px)/1 var(--display); text-transform: uppercase; }
  .menu__langs { display: flex; gap: 26px; }
  .menu__mail { color: var(--ink); letter-spacing: 0.12em; text-transform: none; }
}

main { position: relative; }
section { position: relative; }

/* ------------------------------------------------------------------ hero and vision */

.hero { height: 100svh; }
.hero__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) * 2.2); text-align: center; }
.hero__kicker { margin-bottom: 1.5em; letter-spacing: 0.32em; }
.hero__title { font-size: clamp(21px, 2.46vw, 56px); }
.hero__sub { margin: 1.6em auto 0; max-width: 52ch; color: var(--dim); font: 400 12px/1.75 var(--mono); letter-spacing: 0.02em; }
.hero__kicker, .hero__sub { opacity: 0; transition: opacity 1.4s ease 0.9s; }
.is-on .hero__kicker, .is-on .hero__sub { opacity: 1; }

/* How to go on: the gesture itself, drawn and moving, with its name under it. Left alone on the first
   screen, it grows (is-urging) while the symbol shows what scrolling does. It is never pressable. */
.cue { position: absolute; left: 50%; bottom: calc(var(--gutter) * 0.55); translate: -50% 0; transform-origin: 50% 100%; z-index: 2;
  display: grid; justify-items: center; gap: 10px; pointer-events: none; color: var(--ink);
  opacity: 0; transition: opacity 0.6s ease, scale 0.6s var(--ease); }
.is-on .hero .cue { opacity: 0.85; transition-delay: 1.2s, 0s; }
.cue.is-urging { scale: 1.3; opacity: 1; }
.hero .cue.is-gone { opacity: 0; }
.cue__word { font: 500 10px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; }
/* A mouse, its wheel turning. */
.cue__mark { position: relative; width: 22px; height: 35px; border: 1.5px solid currentColor; border-radius: 11px; }
.cue__mark::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
  background: currentColor; animation: wheel 1.6s var(--ease) infinite; }
@keyframes wheel { 0% { translate: 0 0; opacity: 1; } 70%, 100% { translate: 0 11px; opacity: 0; } }
/* On a touch screen: a fingertip sliding up the glass, under an arrowhead that points the way. */
@media (pointer: coarse) {
  .cue__mark { width: 40px; height: 64px; border: 0; border-radius: 0; }
  .cue__mark::before { content: ''; position: absolute; left: 50%; top: 4px; width: 12px; height: 12px; margin-left: -6px;
    border-top: 2px solid; border-left: 2px solid; rotate: 45deg; animation: point 1.7s ease-in-out infinite; }
  .cue__mark::after { top: auto; bottom: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
    background: rgba(233, 237, 242, 0.92); box-shadow: 0 0 0 6px rgba(233, 237, 242, 0.18); animation: swipe 1.7s var(--ease) infinite; }
}
@keyframes swipe { 0% { translate: 0 0; scale: 0.7; opacity: 0; } 14% { scale: 1; opacity: 1; } 78%, 100% { translate: 0 -40px; opacity: 0; } }
@keyframes point { 0%, 100% { translate: 0 4px; opacity: 0.45; } 45% { translate: 0 -2px; opacity: 1; } }

/* Inside a held scene: the same cue while the scene has only begun, and a rail filling with its progress. */
.cue--scene { bottom: calc(var(--gutter) * 0.9); }
.cue--scene.is-shown { opacity: 0.85; }
.rail { position: absolute; right: calc(var(--gutter) * 0.6); top: 50%; width: 1px; height: min(220px, 30svh); translate: 0 -50%; background: var(--faint); pointer-events: none; }
.rail i { position: absolute; inset: 0; background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); }

.vision { min-height: 100svh; margin-top: 90svh; display: grid; align-content: center; justify-items: center; gap: 2.4em;
  padding: 0 var(--gutter); text-align: center; }
.vision__title { font-size: clamp(20px, 2.3vw, 52px); }
.vision .lead { text-align: center; }

/* ------------------------------------------------------------------ DEATH STEEL: a held scene */

.games { padding-top: clamp(60px, 10vh, 140px); }
.ds { position: relative; height: 280svh; }
.ds__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--bg); }
/* A held scene never shows a hard edge: while it slides in (or out) the edge that is on screen fades into
   the page's black; once it holds the screen, all of it shows (main.js sets the two fade heights). */
.ds__stage, .fly__stage {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0%), #000 calc(100% - var(--fade-bottom, 0%)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0%), #000 calc(100% - var(--fade-bottom, 0%)), transparent 100%);
}
.ds__layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; will-change: transform; }
.ds__embers { mix-blend-mode: screen; }
/* The shade never moves: it keeps the words readable over the picture. */
.ds__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 3, 4, 0.82) 0%, rgba(3, 3, 4, 0.35) 38%, rgba(3, 3, 4, 0) 62%),
              linear-gradient(0deg, rgba(3, 3, 4, 0.9) 0%, rgba(3, 3, 4, 0) 42%),
              linear-gradient(180deg, rgba(3, 3, 4, 0.7) 0%, rgba(3, 3, 4, 0) 22%); }
.ds__head { position: absolute; top: calc(var(--gutter) * 3); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 2em; }
.ds__title-wrap { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) * 1.6); display: grid; gap: 1.2em; will-change: transform; }
.ds__title { font-size: clamp(30px, 6.2vw, 150px); letter-spacing: -0.02em; line-height: 0.95; }
.ds__line { margin: 0; font-size: clamp(18px, 1.7vw, 32px); letter-spacing: -0.02em; opacity: 0; transition: opacity 1s ease 0.6s; }
.ds.is-in .ds__line { opacity: 1; }
.ds__details { position: absolute; left: var(--gutter); top: calc(var(--gutter) * 3 + 64px); width: min(420px, 30vw); display: grid; gap: 18px; justify-items: start;
  opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 1.1s var(--ease); pointer-events: none; }
.ds.is-open .ds__details { opacity: 1; transform: none; pointer-events: auto; }
.ds__details > p:first-child { margin: 0; color: rgba(233, 237, 242, 0.78); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.7; }
.ds__taught { color: var(--ink); }
.clip { margin: 0; width: 100%; display: grid; gap: 10px; }
.clip video { display: block; width: 100%; aspect-ratio: 960 / 372; object-fit: cover; background: #000; outline: 1px solid var(--faint); outline-offset: -1px; }

/* The earlier games: two small cards. */
.earlier { width: var(--wide); margin: clamp(90px, 10vw, 160px) auto 0; }
.earlier__head { padding-bottom: 18px; margin-bottom: clamp(24px, 2.4vw, 40px); border-bottom: 1px solid var(--line); }
.earlier__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); gap: clamp(24px, 3vw, 56px); }
.card { display: grid; gap: 12px; align-content: start; justify-items: start; }
.frame { position: relative; display: block; overflow: hidden; background: #000; outline: 1px solid var(--line); outline-offset: -1px; }
.frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); translate: 0 var(--shift, 0%);
  transition: transform 2.4s var(--ease), filter 0.8s ease; filter: saturate(0.9) brightness(0.88); }
.frame.is-in img, .card.is-in .frame img { transform: scale(1.0); }
.frame:hover img { filter: saturate(1) brightness(1); }
.frame--card { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 8px; }
.card__title { margin: 0; font: 400 clamp(13px, 1.05vw, 18px)/1.2 var(--display); text-transform: uppercase; }
.card__line { margin: 0 0 6px; color: var(--dim); font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------------ the engine: a held fly-over */

.engine { padding-top: clamp(120px, 16vh, 220px); }
.fly { position: relative; height: 460svh; }
.fly__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--bg); }
.viewport__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fly__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 3, 4, 0.75) 0%, rgba(3, 3, 4, 0) 26%), linear-gradient(0deg, rgba(3, 3, 4, 0.6) 0%, rgba(3, 3, 4, 0) 22%); }
.fly__intro { position: absolute; left: var(--gutter); top: calc(var(--gutter) * 3); display: grid; gap: 1.6em; pointer-events: none; will-change: opacity, transform; }
.fly__title { font-size: clamp(22px, 3.2vw, 72px); }
/* Over the bright terrain: a soft dark halo keeps the line readable without a panel behind it. */
.fly__line { margin: 0; max-width: 40ch; color: rgba(233, 237, 242, 0.8); font-size: clamp(15px, 1.05vw, 19px); line-height: 1.6;
  text-shadow: 0 0 3px rgba(3, 3, 4, 0.9), 0 1px 16px rgba(3, 3, 4, 0.95); }

.callouts { margin: 0; padding: 0; list-style: none; }
.callout { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.callout__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink); background: rgba(223, 232, 255, 0.25);
  box-shadow: 0 0 0 6px rgba(223, 232, 255, 0.06); }
.callout__dot::after { content: ''; position: absolute; left: 9px; top: 4px; width: 64px; height: 1px; background: linear-gradient(90deg, var(--ink), rgba(233, 237, 242, 0.15)); }
.callout__body { position: absolute; left: 84px; top: -14px; width: min(320px, 70vw); display: grid; gap: 10px; }
.callout__body h3 { margin: 0; font: 400 clamp(15px, 1.25vw, 22px)/1.2 var(--display); text-transform: uppercase; }
.callout__body p:not(.label) { margin: 0; color: rgba(233, 237, 242, 0.75); font-size: clamp(14px, 0.95vw, 16px); line-height: 1.6; }

.viewport__hud { position: absolute; left: var(--gutter); bottom: var(--gutter); display: grid; grid-template-columns: auto auto; gap: 6px 18px; pointer-events: none;
  font: 400 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.viewport__hud b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.viewport__note { position: absolute; right: var(--gutter); bottom: var(--gutter); font-size: 10px; letter-spacing: 0.2em; pointer-events: none; }

/* ------------------------------------------------------------------ studio */

.studio { padding-top: clamp(120px, 16vh, 220px); }
.section-head { width: var(--wide); margin: 0 auto clamp(56px, 7vw, 120px); display: grid; gap: 1.6em; }
.section-title { font-size: clamp(20px, 2.3vw, 52px); }
.principles { width: var(--wide); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 80px); }
.principles li { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.principle__title { margin: 0; font: 400 clamp(13px, 1.05vw, 18px)/1.2 var(--display); text-transform: uppercase; }
.principles p { margin: 0; color: var(--dim); font-size: clamp(15px, 1vw, 17px); line-height: 1.65; }
.note { width: var(--wide); margin: clamp(110px, 12vw, 200px) auto 0; display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 4vw, 96px); }
.note blockquote { margin: 0; display: grid; gap: 1.2em; }
.note blockquote p { margin: 0; font-size: clamp(20px, 1.75vw, 32px); line-height: 1.45; letter-spacing: -0.015em; max-width: 34ch; }
.note blockquote p + p { color: var(--dim); }
.note figcaption { grid-column: 2; }

/* ------------------------------------------------------------------ contact and footer */

.contact { min-height: 100svh; margin-top: clamp(120px, 14vw, 240px); display: grid; align-content: end; justify-items: center; gap: 2em;
  padding: 0 var(--gutter) clamp(80px, 12vh, 160px); text-align: center; }
.contact__title { font-size: clamp(24px, 3.6vw, 84px); }
.contact__mail { font: 400 clamp(17px, 1.6vw, 28px)/1.2 var(--sans); letter-spacing: -0.01em; border-bottom: 1px solid var(--faint); padding-bottom: 4px; transition: border-color 0.3s; }
.contact__mail:hover { border-color: var(--ink); }
.contact__links { display: flex; gap: 2.4em; margin: 0.6em 0 0; padding: 0; list-style: none; }

.foot { position: relative; padding: clamp(40px, 6vw, 96px) var(--gutter) 32px; border-top: 1px solid var(--line); display: grid; gap: clamp(28px, 3vw, 48px); }
.giant { width: 100%; height: auto; opacity: 0.92; }
.foot__row { display: flex; justify-content: space-between; gap: 24px; }

/* ------------------------------------------------------------------ phones */

@media (max-width: 800px) {
  .bar__nav, .bar__langs { display: none; }
  .hero__text { bottom: calc(var(--gutter) * 0.55 + 132px); }      /* clear of the swipe cue, even grown (is-urging) */
  .hero__title { font-size: clamp(15px, 4.6vw, 26px); }
  .vision__title, .section-title { font-size: clamp(15px, 4.4vw, 24px); }
  .ds__layers img { object-position: 70% 40%; }
  .ds__shade { background: linear-gradient(0deg, rgba(3, 3, 4, 0.95) 0%, rgba(3, 3, 4, 0.55) 45%, rgba(3, 3, 4, 0) 70%),
                           linear-gradient(180deg, rgba(3, 3, 4, 0.7) 0%, rgba(3, 3, 4, 0) 22%); }
  .ds__head { flex-direction: column; gap: 6px; }
  .ds__title { font-size: clamp(26px, 9vw, 44px); }
  .ds__details { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(var(--gutter) * 1.2); }
  .ds.is-open .ds__title-wrap { opacity: 0; }
  .ds__title-wrap { transition: opacity 0.6s ease; }
  .earlier__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .card .label { font-size: 9px; letter-spacing: 0.16em; }
  .card__title { font-size: 11px; }
  .card__line { font-size: 13px; }
  .fly__title { font-size: clamp(17px, 5.4vw, 28px); }
  .callout__body { left: 0; top: 22px; width: min(280px, 78vw); }
  .callout__dot::after { display: none; }
  .viewport__note { display: none; }
  .principles { grid-template-columns: 1fr; }
  .note { grid-template-columns: 1fr; }
  .note figcaption { grid-column: 1; }
  .contact__title { font-size: clamp(20px, 7vw, 36px); }
  .foot__row { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch, .reveal, .frame img { transition: none; opacity: 1; filter: none; transform: none; }
  .grain { animation: none; }
}