/* ==========================================================================
   ViciFold · 一波万绪 — site stylesheet
   Direction: "Atlas of Worldlines" — engraved night-sea art, deep navy ground,
   hairlines, rounded frames, one amber line per view.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* dark field */
  --abyss: #040B18;      /* hero, closing sections */
  --ink: #0A1626;        /* dark sections */
  --navy: #0F2133;       /* dark cards */
  --deep: #0E3A4A;       /* base / emphasis blocks */
  --tide: #6FB9D1;       /* accent on dark */
  --mist: #9FB6C6;       /* body text on dark */
  --dim: #7F93A5;        /* captions on dark */
  --hair: rgba(159, 182, 198, .18);
  /* light field */
  --paper: #ECF0F4;      /* light sections */
  --plate: #FFFFFF;      /* cards on paper */
  --rule: #CBD5DE;       /* hairlines on paper */
  --graphite: #13202E;   /* text on paper */
  --slate: #4E5E6F;      /* secondary text on paper */
  --teal: #18708A;       /* accent on paper */
  /* signal — use for ONE element per view */
  --signal: #E3A24F;
  --signal-ink: #8A5716; /* signal as text on paper */

  --serif: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Menlo, monospace;
  --cjk-serif: 'Noto Serif SC', 'Source Serif 4', 'Songti SC', serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1296px;
  --r-xl: 28px;
  --r-l: 22px;
  --r-m: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
/* nav links scroll to the home page's chapters; glide only for people who have not asked for less motion */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--abyss); color: var(--graphite);
  font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--tide); color: var(--abyss); }
:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.container { max-width: var(--maxw); margin: 0 auto; }
.mono { font-family: var(--mono); }

/* ---------- 3. Sections & type ---------- */
.section { padding: clamp(96px, 11vw, 150px) var(--pad) clamp(100px, 12vw, 170px); }
.section--abyss { background: var(--abyss); color: #ECF0F4; }
.section--ink { background: var(--ink); color: #ECF0F4; }
.section--paper { background: var(--paper); color: var(--graphite); }

.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--tide);
}
.eyebrow::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; }
.section--paper .eyebrow { color: var(--teal); }

.display, .h2, .h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; }
.display { margin: 28px 0 0; font-size: clamp(36px, 4.6vw, 72px); line-height: 1.16; letter-spacing: .015em; }
.h2 { margin: 26px 0 0; font-size: clamp(32px, 4vw, 60px); line-height: 1.2; letter-spacing: .01em; }
.h3 { margin: 0; font-size: clamp(22px, 2vw, 26px); line-height: 1.35; }
html[lang="en"] .display { font-weight: 400; letter-spacing: -.022em; }
html[lang="en"] .h2 { font-weight: 400; letter-spacing: -.015em; }

.lede { margin: 0; font-size: 16px; line-height: 1.95; font-weight: 300; color: var(--mist); text-wrap: pretty; }
.lede--lg { font-size: clamp(15px, 1.25vw, 18px); }
.section--paper .lede { color: var(--slate); font-weight: 400; }
.body { margin: 0; font-size: 15.5px; line-height: 1.9; font-weight: 300; color: var(--mist); text-wrap: pretty; }
.section--paper .body { color: var(--slate); font-weight: 400; }

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 96px; }
.sec-head__main { flex: 1 1 560px; min-width: 0; }
.sec-head__side { flex: 0 1 440px; margin: 0; }
.more-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 40px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tide); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 4px;
  transition: border-color .25s ease;
}
.more-link:hover { border-bottom-color: currentColor; }
.section--paper .more-link { color: var(--teal); }

.caption { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; line-height: 1.7; color: var(--dim); }
.section--paper .caption { color: var(--slate); }
.caption b { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .2em; color: var(--tide); }
.section--paper .caption b { color: var(--teal); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 18px; min-height: 54px; padding: 0 26px 0 28px;
  background: #ECF0F4; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .04em;
  border: 0; border-radius: 999px; cursor: pointer; transition: background-color .25s ease;
}
.btn:hover { background: #FFFFFF; }
.btn__dash { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--signal); }
.btn--dark { background: var(--graphite); color: #ECF0F4; }
.btn--dark:hover { background: #0A1626; }
/* sending (site.js sets aria-busy and disables the button): the dash becomes a small spinner of the same width */
.btn[aria-busy="true"] { cursor: progress; }
.btn--dark[aria-busy="true"] { background: var(--graphite); }
.btn[aria-busy="true"] .btn__dash {
  width: 16px; height: 16px; margin: 0 3px; border-radius: 50%; background: none;
  border: 2px solid rgba(236, 240, 244, .22); border-color: color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: var(--signal); animation: vf-spin .8s linear infinite;
}
@keyframes vf-spin { to { transform: rotate(360deg); } }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 24px;
  font-size: 15px; letter-spacing: .03em; text-decoration: none; color: inherit;
  border-radius: 999px; border: 1px solid rgba(236, 240, 244, .3); background: rgba(5, 16, 31, .3);
  transition: background-color .25s ease, border-color .25s ease;
}
.btn-ghost:hover { background: rgba(236, 240, 244, .1); border-color: #ECF0F4; }
.section--paper .btn-ghost { border-color: rgba(19, 32, 46, .3); background: transparent; }
.section--paper .btn-ghost:hover { border-color: var(--graphite); background: rgba(19, 32, 46, .04); }
.btn-ghost small { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--mist); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }

/* ---------- 5. Navigation ---------- */
.progress {
  position: fixed; z-index: 61; top: 0; left: 0; right: 0; height: 2px;
  background: var(--tide); transform: scaleX(0); transform-origin: 0 50%;
}
.nav {
  position: fixed; z-index: 60; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1240px, calc(100% - 24px)); color: #ECF0F4;
  background: rgba(8, 18, 32, .74); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(159, 182, 198, .2); border-radius: 18px; box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .6);
}
.nav__bar { padding: 6px 8px 6px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.nav__word { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -.005em; }
.nav__cn { font-family: var(--cjk-serif); font-size: 14px; letter-spacing: .16em; color: var(--mist); }
.nav__links { display: flex; gap: 34px; font-size: 14px; letter-spacing: .03em; }
.nav__links a { color: #B9C9D6; text-decoration: none; transition: color .2s ease; }
.nav__links a:hover, .nav__links a[aria-current] { color: #FFFFFF; }
.nav__links a[aria-current] { text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--tide); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; padding: 0 8px; color: var(--dim); text-decoration: none; }
.lang a[aria-current="true"] { color: #ECF0F4; }
.lang span { color: rgba(159, 182, 198, .4); }
.nav__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; letter-spacing: .04em; text-decoration: none;
  color: var(--ink); background: #ECF0F4; border-radius: 12px; transition: background-color .25s ease;
}
.nav__cta:hover { background: #FFFFFF; }
.nav__menu {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: none; border: 0; color: #ECF0F4; cursor: pointer; border-radius: 12px;
}
@media (max-width: 860px) {
  .nav__cn { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    flex-direction: column; gap: 0; padding: 8px; border-radius: 18px;
    background: rgba(8, 18, 32, .94); border: 1px solid rgba(159, 182, 198, .2);
  }
  .nav__links a { padding: 14px 16px; font-size: 16px; }
  .nav.is-open .nav__links { display: flex; }
}
@media (max-width: 420px) { .nav__cta { padding: 0 14px; } .nav__bar { padding-left: 16px; gap: 8px; } }

/* ---------- 6. Hero (home) ---------- */
.hero { position: relative; height: max(660px, 100vh); padding: 10px; background: var(--abyss); color: #ECF0F4; }
.hero__frame { position: relative; height: 100%; overflow: hidden; border-radius: var(--r-xl); background: #05101F; box-shadow: inset 0 0 0 1px rgba(159, 182, 198, .14); }
/* depth planes: sky + moon (far), sea + sea shader canvas (mid), swell (near); they share one box so
   the art lines up at rest, and drift apart on scroll (section 20). */
.hero__layer { position: absolute; inset: 0; will-change: transform; }
.hero__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.06); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
/* the sea shader (hero.js) takes over from the sea picture once its first frame is drawn; the picture
   comes back at once if the shader stops */
.hero.is-live .hero__canvas { opacity: 1; }
.hero.is-live .hero__layer--sea img { visibility: hidden; transition: visibility 0s .8s; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 16, 31, .82) 0%, rgba(5, 16, 31, .5) 30%, rgba(5, 16, 31, 0) 58%),
              linear-gradient(0deg, rgba(5, 16, 31, .75) 0%, rgba(5, 16, 31, 0) 22%);
}
.hero__content {
  position: relative; z-index: 2; height: 100%; max-width: 1440px; margin: 0 auto;
  padding: clamp(120px, 15vh, 170px) clamp(18px, 4vw, 56px) 24px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.hero .display { max-width: 13.5em; }
.hero .lede { margin-top: 26px; max-width: 30em; color: #B9C9D6; }
.hero .actions { margin-top: 38px; }
.hero__bar {
  padding-top: 16px; border-top: 1px solid rgba(159, 182, 198, .18);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--dim);
}
.cue { display: flex; align-items: center; gap: 14px; }
.cue__line { position: relative; display: block; width: 1px; height: 28px; background: rgba(159, 182, 198, .2); overflow: hidden; }
.cue__line::after { content: ""; position: absolute; inset: 0; background: var(--tide); animation: vf-cue 2.6s ease-in-out infinite; }
.hint { display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .6s ease; }
.hero.is-live .hint { opacity: 1; }   /* only while the sea answers a click */
@media (max-width: 760px) { .hero__layer img { object-position: 22% 50%; } }
@media (max-width: 860px) { .hint { display: none; } }
/* the moon breathes: a soft halo over the moon of the sky picture swells and fades, and hero.js lets
   the moonlight on the water follow it. Placed with the pictures' crop (cover box of the 16:10 art at
   their object-position, then scale 1.06 about the centre); moon measured on hero-sky: centre
   (0.709, 0.148), diameter 0.115 of the art's width. The near swell heaves on its own. */
@media (prefers-reduced-motion: no-preference) {
  @supports (width: 1cqw) {
    .hero__layer--sky { container-type: size; }
    .hero__moon {
      --px: .5; --bw: max(100cqw, 160cqh); --bh: max(100cqh, 62.5cqw);
      position: absolute; width: calc(var(--bw) * 1.06 * .4); aspect-ratio: 1; translate: -50% -50%;
      left: calc(50cqw + ((100cqw - var(--bw)) * var(--px) + var(--bw) * .709 - 50cqw) * 1.06);
      top: calc(50cqh + ((100cqh - var(--bh)) * .5 + var(--bh) * .148 - 50cqh) * 1.06);
      border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
      background: radial-gradient(closest-side, rgba(236, 240, 244, .3) 0%, rgba(236, 240, 244, .24) 27%, rgba(236, 240, 244, .17) 31%, rgba(236, 240, 244, .07) 60%, rgba(236, 240, 244, 0) 100%);
      animation: vf-moon 4s ease-in-out infinite alternate;
    }
  }
  .hero__layer--swell { transform-origin: 50% 100%; animation: vf-heave 6s ease-in-out infinite alternate; }
}
@media (max-width: 760px) { .hero__moon { --px: .22; } }
@keyframes vf-moon { from { opacity: .2; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes vf-heave { to { transform: translate3d(0, -1.3%, 0) scaleY(1.016); } }
.intro { animation: vf-rise 1.6s var(--ease) both; }
.intro--1 { animation-delay: .2s; } .intro--2 { animation-delay: .35s; } .intro--3 { animation-delay: .5s; }
.intro--4 { animation-delay: .65s; } .intro--5 { animation-delay: .9s; }

/* ---------- 7. Page hero (subpages) ---------- */
.phero { position: relative; padding: 10px; background: var(--abyss); color: #ECF0F4; }
.phero__frame { position: relative; min-height: min(78vh, 760px); overflow: hidden; border-radius: var(--r-xl); background: #05101F; display: flex; align-items: flex-end; }
/* depth planes: -bg is the scene, -fg (transparent) the nearest things; both crop identically */
.phero__layer { position: absolute; inset: 0; will-change: transform; }
.phero__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 760px) { .phero__layer img { object-position: 68% 50%; } }
/* on wide screens the nearest plane sits above the scrim, crisp against the dimmed scene;
   on phones the title spans the width, so it stays under the scrim */
@media (min-width: 761px) { .phero__layer--fg { z-index: 1; } }
/* phones: the text covers most of the frame, so the lower half is settled harder */
@media (max-width: 760px) { .phero__scrim { background: linear-gradient(0deg, rgba(5, 16, 31, .94) 0%, rgba(5, 16, 31, .72) 48%, rgba(5, 16, 31, .12) 100%); } }
/* the artwork keeps its lower left dark for the title, so the scrim only needs to settle the text */
.phero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 16, 31, .8) 0%, rgba(5, 16, 31, .3) 38%, rgba(5, 16, 31, 0) 64%), linear-gradient(90deg, rgba(5, 16, 31, .5) 0%, rgba(5, 16, 31, 0) 50%); }
.phero__content { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 160px clamp(18px, 4vw, 56px) clamp(40px, 6vw, 72px); }
.phero .display { max-width: 15em; }
.phero .lede { margin-top: 24px; max-width: 34em; color: #B9C9D6; }
.phero--short .phero__frame { min-height: min(60vh, 560px); }

/* ---------- 8. Manifesto (scroll-lit lines) ---------- */
.mani { padding: clamp(140px, 18vh, 200px) var(--pad) clamp(140px, 20vh, 220px); background: var(--abyss); color: #ECF0F4; }
.mani__lines { margin: 56px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4.2vw, 64px); line-height: 1.42; letter-spacing: .012em; }
html[lang="en"] .mani__lines { font-weight: 300; letter-spacing: -.012em; }
.mani__lines span { display: block; color: var(--lit, #ECF0F4); }

/* ---------- 9. Film (1942) ---------- */
.film { background: var(--abyss); color: #ECF0F4; }
.film__media { position: relative; height: 780px; overflow: hidden; }
.film__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.film__img--crew { transform-origin: 50% 100%; }
.film__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 11, 24, .96) 0%, rgba(4, 11, 24, .4) 46%, rgba(4, 11, 24, .55) 100%); }
.film__year {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 200; font-size: clamp(140px, 23vw, 340px); line-height: 1; letter-spacing: -.04em;
  font-feature-settings: 'onum' 1; color: #ECF0F4;
}
.film__label { position: absolute; top: 104px; left: var(--pad); }
.film__src { position: absolute; right: var(--pad); bottom: 26px; margin: 0; max-width: 44em; text-align: right; font-size: 11.5px; line-height: 1.7; color: var(--dim); }
.film__lines { display: grid; gap: 28px; padding: 64px var(--pad) 120px; }
.film__line { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.5; text-wrap: balance; }
.film__line:last-child { color: var(--tide); }

/* ---------- 10. Method (pinned) ---------- */
.proc { background: var(--paper); color: var(--graphite); }
.proc__stage { padding: 140px var(--pad); background: var(--paper); }
.proc__grid { width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.proc__text { flex: 1 1 360px; min-width: 0; }
.proc__rail { margin-top: 48px; display: flex; gap: 28px; }
.proc__line { position: relative; flex: none; width: 1px; background: var(--rule); }
.proc__fill { position: absolute; inset: 0; background: var(--teal); transform-origin: 50% 0; }
.proc__ticks { display: flex; gap: 22px; margin-bottom: 26px; font-family: var(--serif); font-size: 17px; letter-spacing: .06em; color: var(--teal); }
.steps { display: grid; gap: 40px; }
.step__tag { display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--teal); }
.step__tag span:first-child { font-family: var(--serif); font-size: 20px; letter-spacing: .06em; }
.step h3 { margin: 14px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.3; }
.step p { margin: 14px 0 0; max-width: 27em; font-size: 16px; line-height: 1.9; color: var(--slate); }
.diagram { flex: 1.5 1 520px; min-width: 0; margin: 0; padding: 26px 28px 20px; background: var(--plate); border-radius: var(--r-xl); box-shadow: 0 50px 90px -50px rgba(19, 32, 46, .45), 0 0 0 1px rgba(19, 32, 46, .06); }
.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- 11. Results: art + floating console ---------- */
.results__grid { margin-top: 88px; display: flex; flex-wrap: wrap; align-items: center; gap: 72px 80px; }
.points { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.points li { padding: 28px 0; border-top: 1px solid var(--hair); }
.points .k { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--tide); }
.points h3 { margin: 12px 0 0; font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.35; }
.points p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.9; font-weight: 300; color: var(--mist); }
.showcase { flex: 1.55 1 560px; min-width: 0; position: relative; padding-bottom: 40px; }
.frame { overflow: hidden; border-radius: var(--r-xl); background: #05101F; box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .8); }
.frame img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 1.2s var(--ease); }
.frame:hover img { transform: scale(1.035); }
.console {
  position: absolute; left: -48px; bottom: 0; width: 380px; padding: 20px 22px 18px; color: #ECF0F4;
  border-radius: var(--r-l); background: rgba(9, 20, 36, .7); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(159, 182, 198, .24); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.console__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--dim); }
.console__live { display: flex; align-items: center; gap: 8px; }
.console__live::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--tide); box-shadow: 0 0 0 4px rgba(111, 185, 209, .16); }
.console__tag { padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(227, 162, 79, .45); color: var(--signal); }
.console__title { margin-top: 16px; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.35; }
.console__meta { margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--mist); }
.console__rows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.console__rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 12.5px; }
.console__n { font-family: var(--serif); font-size: 12px; color: var(--dim); }
.console__name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.console__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #D3DEE6; }
.console__track { display: block; height: 3px; border-radius: 3px; background: rgba(159, 182, 198, .14); overflow: hidden; }
.console__bar { display: block; height: 100%; border-radius: 3px; background: var(--tide); transform-origin: 0 50%; animation: vf-barw 1.8s var(--ease) .4s both; }
.console__bar.is-signal { background: var(--signal); }
.console__p { text-align: right; font-family: var(--mono); font-size: 11.5px; color: #D3DEE6; }
.console__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(159, 182, 198, .16); display: grid; gap: 4px; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .1em; color: var(--dim); }
.console__foot i { font-style: normal; color: var(--tide); }
@media (max-width: 980px) { .console { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 14px 0; } }

/* ---------- 12. Stacking strata ---------- */
.stack { margin-top: 80px; display: flex; flex-direction: column; gap: 24px; }
.layer {
  position: sticky; top: var(--top, 92px); min-height: 280px; padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-xl); box-shadow: 0 -30px 70px -40px rgba(0, 0, 0, .7);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 64px;
  background: var(--navy); border: 1px solid rgba(159, 182, 198, .16); color: #ECF0F4;
}
.layer__main { flex: 1 1 480px; min-width: 0; }
.layer__tag { font-family: var(--mono); font-size: 12px; letter-spacing: .26em; color: var(--tide); }
.layer h3 { margin: 22px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.8vw, 56px); line-height: 1.15; }
html[lang="en"] .layer h3 { font-weight: 400; letter-spacing: -.015em; }
.layer p { margin: 20px 0 0; max-width: 32em; font-size: 17px; line-height: 1.85; font-weight: 300; color: var(--mist); }
.layer__side { flex: 0 1 260px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: right; }
.layer__num { font-family: var(--mono); font-size: clamp(64px, 8vw, 120px); line-height: .9; letter-spacing: -.04em; color: rgba(159, 182, 198, .14); }
.layer__formula { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 40px); color: var(--tide); }
.layer__code { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; line-height: 2; color: #C5D3DE; }
.layer__note { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--mist); }
.layer--2 { background: #112A40; }
.layer--3 { background: #0D2B3B; border-color: var(--tide); }
.layer--3 p { color: #C5D3DE; }
.layer--4 { background: var(--deep); border-color: var(--deep); }
.layer--4 .layer__tag, .layer--4 .layer__note { color: #ECF0F4; }
.layer--4 p { color: #D3DEE6; }
.layer--5 { background: var(--ink); border: 1px dashed rgba(159, 182, 198, .5); }

/* ---------- 13. Plates (horizontal) ---------- */
.plates { background: var(--paper); color: var(--graphite); }
.plates__stage { padding: 140px var(--pad); background: var(--paper); }
.plates__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 40px 32px; }
.plates__intro { display: flex; flex-direction: column; justify-content: center; padding-right: 24px; }
.plate { margin: 0; }
.plate__img { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--ink); box-shadow: 0 40px 70px -42px rgba(10, 22, 38, .6); }
.plate__img img { display: block; width: 100%; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; transition: transform 1.2s var(--ease); }
.plate:hover .plate__img img { transform: scale(1.035); }
.formula {
  position: absolute; left: 16px; top: 16px; padding: 6px 14px; border-radius: 999px;
  background: rgba(9, 20, 36, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(159, 182, 198, .28); color: #ECF0F4; font-family: var(--serif); font-style: italic; font-size: 17px;
}
.plate figcaption { margin-top: 20px; }
.plate__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: var(--teal); }
.plate h3 { margin: 12px 0 0; font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.35; }
.plate p { margin: 10px 0 0; max-width: 30em; font-size: 15px; line-height: 1.85; color: var(--slate); }
.plates__progress { margin-top: 40px; height: 1px; background: var(--rule); position: relative; }
.plates__progress span { position: absolute; inset: 0; background: var(--graphite); transform-origin: 0 50%; transform: scaleX(0); display: none; }

/* ---------- 14. Emblems ---------- */
.emblems { margin-top: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 44px 28px; }
.emblem { margin: 0; }
.emblem__img { overflow: hidden; border-radius: 24px; border: 1px solid var(--hair); }
.emblem__img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.2s ease; }
.emblem:hover .emblem__img img { transform: scale(1.06); filter: brightness(1.2); }
.emblem figcaption { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.emblem__name { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.emblem p { margin: 10px 0 0; font-size: 15px; line-height: 1.85; font-weight: 300; color: var(--mist); }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; padding: 5px 11px; border-radius: 999px; background: var(--tide); color: var(--abyss); white-space: nowrap; }

/* ---------- 15. Feature rows (subpages) ---------- */
.feature { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 80px; }
.feature:nth-child(even) { flex-direction: row-reverse; }
.feature__media { flex: 1.2 1 520px; min-width: 0; margin: 0; }
.feature__text { flex: 1 1 380px; min-width: 0; }
.feature__k { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--tide); }
.section--paper .feature__k { color: var(--teal); }
.feature h3 { margin: 14px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.3; text-wrap: balance; }
html[lang="en"] .feature h3 { font-weight: 400; }
.feature p { margin: 18px 0 0; }
.feature .frame img { aspect-ratio: 3 / 2; }

/* cards grid */
.cards { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.card { padding: 30px 28px 32px; border-radius: var(--r-l); background: var(--navy); border: 1px solid var(--hair); }
.section--paper .card { background: var(--plate); border-color: var(--rule); box-shadow: 0 30px 60px -45px rgba(19, 32, 46, .4); }
.card__k { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--tide); }
.section--paper .card__k { color: var(--teal); }
.card h3 { margin: 16px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.4; }
.card p { margin: 12px 0 0; font-size: 15px; line-height: 1.85; font-weight: 300; color: var(--mist); }
.section--paper .card p { color: var(--slate); font-weight: 400; }

/* questions list */
.qlist { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.qlist li { padding: 16px 0; border-top: 1px solid var(--hair); font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
.section--paper .qlist li { border-color: var(--rule); }

/* comparison table */


/* code-ish line */
.codeline { margin-top: 28px; padding: 18px 22px; border-radius: var(--r-m); background: var(--ink); color: #C5D3DE; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; line-height: 2; overflow-x: auto; white-space: nowrap; }
.codeline i { font-style: normal; color: var(--tide); }

/* references */
.refs { margin: 56px 0 0; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: ref; }
.refs li { counter-increment: ref; position: relative; padding: 18px 0 18px 52px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.75; color: var(--slate); }
.refs li::before { content: counter(ref, decimal-leading-zero); position: absolute; left: 0; top: 19px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--teal); }
.refs a { color: var(--teal); }

/* ---------- 16. CTA band ---------- */
.cta { position: relative; overflow: hidden; background: var(--abyss); color: #ECF0F4; padding: 170px var(--pad) 150px; text-align: center; }
.cta__rings { position: absolute; inset: 0; pointer-events: none; }
.cta__rings span { position: absolute; left: 50%; top: 44%; width: 1400px; height: 1400px; border-radius: 50%; border: 1px solid rgba(159, 182, 198, .34); transform: translate(-50%, -50%) scale(.6); animation: vf-ripple 10s cubic-bezier(.15, .55, .35, 1) infinite; }
.cta__rings span:nth-child(2) { animation-delay: -2.5s; }
.cta__rings span:nth-child(3) { animation-delay: -5s; border-style: dashed; }
.cta__rings span:nth-child(4) { animation-delay: -7.5s; }
.cta__inner { position: relative; max-width: 1080px; margin: 0 auto; }
.cta__drop { display: block; width: clamp(180px, 20vw, 280px); margin: 0 auto; mix-blend-mode: screen; }
.cta .eyebrow { justify-content: center; margin-top: 22px; }
.cta .eyebrow::before { display: none; }
.cta__title { margin: 28px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(46px, 7.4vw, 116px); line-height: 1.08; letter-spacing: .02em; }
html[lang="en"] .cta__title { font-weight: 400; letter-spacing: -.02em; }
.cta .lede { margin: 36px auto 0; max-width: 32em; }
.cta .actions { margin-top: 52px; justify-content: center; }

/* ---------- 17. Contact form (posted to the Worker, guarded by Turnstile) ---------- */
.contact-grid { display: flex; flex-wrap: wrap; gap: 56px 96px; align-items: flex-start; }
.form { flex: 1.4 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px 24px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--plate); box-shadow: 0 50px 90px -50px rgba(19, 32, 46, .45); }
/* honeypot: off-screen rather than display:none, which some bots skip */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile renders here only when a visitor has to interact (appearance: interaction-only) */
.form__turnstile { grid-column: 1 / -1; }
.form__turnstile:empty, .form.is-sent .form__turnstile { display: none; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-m);
  border: 1px solid var(--rule); background: #F6F8FA; color: var(--graphite); font-size: 15px;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.7; color: var(--slate); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form__note { font-size: 12.5px; color: var(--slate); }
.form__done { grid-column: 1 / -1; display: none; padding: 20px 22px; border-radius: var(--r-m); background: rgba(24, 112, 138, .08); color: var(--graphite); line-height: 1.8; }
.form.is-sent .form__done { display: block; }
.form.is-sent .field, .form.is-sent .check, .form.is-sent .form__foot { display: none; }
.aside { flex: 1 1 300px; min-width: 0; display: grid; gap: 0; }
.aside > div { padding: 22px 0; border-top: 1px solid var(--rule); }
.aside dt, .aside .k { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--teal); }
.aside p { margin: 10px 0 0; line-height: 1.8; color: var(--slate); }

/* ---------- 18. Footer ---------- */
.footer { background: var(--abyss); color: var(--mist); padding: 0 var(--pad) 40px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--hair); padding-top: 56px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px 64px; }
.footer__brand { flex: 1 1 300px; }
.footer__brand .word { display: flex; align-items: baseline; gap: 14px; color: #ECF0F4; }
.footer__brand .word b { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.footer__brand .word span { font-family: var(--cjk-serif); font-size: 15px; letter-spacing: .16em; color: var(--mist); }
.footer__brand p { margin: 16px 0 0; max-width: 24em; font-size: 14px; line-height: 1.9; }
.footer__cols { display: flex; flex-wrap: wrap; gap: 32px 72px; font-size: 14px; line-height: 2.2; }
.footer__cols div { display: flex; flex-direction: column; }
.footer__cols span { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--dim); margin-bottom: 8px; }
.footer__cols a { color: #B9C9D6; text-decoration: none; }
.footer__cols a:hover { color: #FFFFFF; }
.footer__bottom { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; font-size: 12px; line-height: 1.8; color: var(--dim); }
.footer__bottom .mono { letter-spacing: .18em; }

/* ---------- 19. Keyframes ---------- */
@keyframes vf-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vf-ripple { 0% { transform: translate(-50%, -50%) scale(.12); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes vf-cue { 0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
@keyframes vf-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vf-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vf-barw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vf-lit { from { color: #1E2F42; } to { color: var(--lit, #ECF0F4); } }
@keyframes vf-s1 { 0%, 18% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes vf-s2 { 0%, 20% { opacity: 0; transform: translateY(24px); } 26%, 43% { opacity: 1; transform: none; } 49%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes vf-s3 { 0%, 45% { opacity: 0; transform: translateY(24px); } 51%, 68% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes vf-s4 { 0%, 70% { opacity: 0; transform: translateY(24px); } 76%, 100% { opacity: 1; transform: none; } }
@keyframes vf-tk1 { 0%, 21% { opacity: 1; } 25%, 100% { opacity: .3; } }
@keyframes vf-tk2 { 0%, 21% { opacity: .3; } 25%, 46% { opacity: 1; } 50%, 100% { opacity: .3; } }
@keyframes vf-tk3 { 0%, 46% { opacity: .3; } 50%, 71% { opacity: 1; } 75%, 100% { opacity: .3; } }
@keyframes vf-tk4 { 0%, 71% { opacity: .3; } 75%, 100% { opacity: 1; } }
@keyframes vf-plans { 0% { opacity: 0; transform: translateX(-24px); } 7%, 100% { opacity: 1; transform: none; } }
@keyframes vf-dimout { 0%, 22% { opacity: 1; } 30%, 100% { opacity: .25; } }
@keyframes vf-draw { 0%, 24% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes vf-nodes { 0%, 56% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes vf-actual { 0%, 74% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes vf-zoom { 0% { transform: scale(1.3); filter: brightness(.4) saturate(.8); } 24% { filter: brightness(.82) saturate(1); } 100% { transform: scale(1); filter: brightness(.88) saturate(1); } }
@keyframes vf-unframe { 0% { clip-path: inset(10vh 7vw round 32px); } 24%, 100% { clip-path: inset(0 round 0); } }
@keyframes vf-year { 0%, 9% { opacity: 1; transform: none; filter: blur(0); } 22%, 100% { opacity: 0; transform: scale(1.14); filter: blur(12px); } }
@keyframes vf-f1 { 0%, 15% { opacity: 0; transform: translateY(28px); } 20%, 34% { opacity: 1; transform: none; } 39%, 100% { opacity: 0; transform: translateY(-28px); } }
@keyframes vf-f2 { 0%, 37% { opacity: 0; transform: translateY(28px); } 42%, 54% { opacity: 1; transform: none; } 59%, 100% { opacity: 0; transform: translateY(-28px); } }
@keyframes vf-f3 { 0%, 57% { opacity: 0; transform: translateY(28px); } 62%, 74% { opacity: 1; transform: none; } 79%, 100% { opacity: 0; transform: translateY(-28px); } }
@keyframes vf-f4 { 0%, 77% { opacity: 0; transform: translateY(28px); } 83%, 100% { opacity: 1; transform: none; } }
@keyframes vf-hx { 0%, 4% { transform: translateX(0); } 96%, 100% { transform: translateX(calc(-100% + 100vw - 2 * var(--pad))); } }
/* depth planes lag behind the page: the further away, the more they trail */
@keyframes vf-far { to { transform: translate3d(0, 46%, 0); } }
@keyframes vf-mid { to { transform: translate3d(0, 22%, 0); } }
@keyframes vf-near { to { transform: translate3d(0, -12%, 0); } }
@keyframes vf-ch-far { from { transform: translate3d(0, -8%, 0); } to { transform: translate3d(0, 8%, 0); } }
@keyframes vf-ch-near { from { transform: translate3d(0, 4%, 0); } to { transform: translate3d(0, -4%, 0); } }
/* 1942: the crew is nearer than the floor, so it starts larger and shrinks faster as the camera pulls back */
@keyframes vf-zoom-near { 0% { transform: translateY(8%) scale(1.55); filter: brightness(.4) saturate(.8); } 24% { filter: brightness(.82) saturate(1); } 100% { transform: none; filter: brightness(.88) saturate(1); } }

/* ---------- 20. Scroll-driven enhancement ----------
   Browsers without animation-timeline (e.g. Firefox today) get the static layout above. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: vf-grow-x auto linear both; animation-timeline: scroll(root); }
    /* hero parallax: as the hero scrolls away, the sky trails most, the sea less, the swell not at all */
    /* inset 0: the nav's scroll-padding must not start the exit range early (the planes would sit 88px low at rest) */
    .hero { view-timeline-name: --vf-hero; view-timeline-inset: 0; }
    .hero__layer--sky, .hero__layer--sea { animation: auto linear both; animation-timeline: --vf-hero; animation-range: exit 0% exit 100%; }
    .hero__layer--sky { animation-name: vf-far; }
    .hero__layer--sea { animation-name: vf-mid; }
    /* subpage headers: the scene trails, the nearest plane runs a little ahead */
    .phero { view-timeline-name: --vf-ph; view-timeline-inset: 0; }
    .phero__layer { animation: auto linear both; animation-timeline: --vf-ph; animation-range: exit 0% exit 100%; }
    .phero__layer--bg { animation-name: vf-far; }
    .phero__layer--fg { animation-name: vf-near; }
    /* chapter plates sit mid-page, so their planes drift over the whole pass, not only on the way out;
       the planes are cut 12% taller than the frame so the drift never shows an edge */
    .chapter { view-timeline-name: --vf-ch; }
    .chapter .phero__layer { inset: -12% 0; animation-timeline: --vf-ch; animation-range: cover 0% cover 100%; }
    .chapter .phero__layer--bg { animation-name: vf-ch-far; }
    .chapter .phero__layer--fg { animation-name: vf-ch-near; }
    .reveal { animation: vf-rise auto linear both; animation-timeline: view(); animation-range: entry 5% cover 26%; }
    .mani { padding-top: 24vh; padding-bottom: 22vh; }
    .mani__lines span { animation: vf-lit auto linear both; animation-timeline: view(); animation-range: cover 26% cover 44%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 820px) and (min-height: 600px) {
    /* method: pinned */
    .proc { height: 460vh; view-timeline-name: --vf-p; }
    .proc__stage { position: sticky; top: 0; height: 100vh; padding: 72px var(--pad) 0; display: flex; align-items: center; overflow: hidden; }
    .steps { position: relative; display: block; height: 250px; }
    .step { position: absolute; left: 0; right: 0; top: 0; }
    .proc .s1, .proc .s2, .proc .s3, .proc .s4, .proc .tk1, .proc .tk2, .proc .tk3, .proc .tk4,
    .proc .proc__fill, .proc .g-plans, .proc .g-dim, .proc .g-paths, .proc .g-nodes, .proc .g-actual {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --vf-p; animation-range: contain 0% contain 100%;
    }
    .proc .s1 { animation-name: vf-s1; } .proc .s2 { animation-name: vf-s2; } .proc .s3 { animation-name: vf-s3; } .proc .s4 { animation-name: vf-s4; }
    .proc .tk1 { animation-name: vf-tk1; } .proc .tk2 { animation-name: vf-tk2; } .proc .tk3 { animation-name: vf-tk3; } .proc .tk4 { animation-name: vf-tk4; }
    .proc .proc__fill { animation-name: vf-grow-y; }
    .proc .g-plans { animation-name: vf-plans; } .proc .g-dim { animation-name: vf-dimout; } .proc .g-paths { animation-name: vf-draw; }
    .proc .g-nodes { animation-name: vf-nodes; } .proc .g-actual { animation-name: vf-actual; }

    /* 1942: pinned film */
    .film { height: 360vh; view-timeline-name: --vf-f; }
    .film__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
    .film__media { position: absolute; inset: 0; height: auto; }
    .film__lines { position: absolute; left: var(--pad); right: var(--pad); bottom: 13vh; height: 200px; padding: 0; display: block; }
    .film__line { position: absolute; left: 0; bottom: 0; max-width: 26em; }
    .film__media, .film__img, .film__year, .film__line {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --vf-f; animation-range: contain 0% contain 100%;
    }
    .film__media { animation-name: vf-unframe; } .film__year { animation-name: vf-year; }
    .film__img--floor { animation-name: vf-zoom; } .film__img--crew { animation-name: vf-zoom-near; }
    .film__line:nth-child(1) { animation-name: vf-f1; } .film__line:nth-child(2) { animation-name: vf-f2; }
    .film__line:nth-child(3) { animation-name: vf-f3; } .film__line:nth-child(4) { animation-name: vf-f4; }

    /* strata */
    .stack { gap: 14vh; }
    .layer { min-height: min(50vh, 440px); }

    /* plates: horizontal */
    .plates { height: 400vh; view-timeline-name: --vf-h; }
    .plates__stage { position: sticky; top: 0; height: 100vh; padding: 72px var(--pad) 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
    .plates__row { display: flex; width: max-content; gap: 40px; animation: vf-hx auto linear both; animation-timeline: --vf-h; animation-range: contain 0% contain 100%; }
    .plates__row > * { width: var(--w, 560px); flex: none; }
    .plate__img img { height: min(48vh, 480px); aspect-ratio: auto; }
    .plates__progress span { display: block; animation: vf-grow-x auto linear both; animation-timeline: --vf-h; animation-range: contain 0% contain 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro, .cta__rings span, .cue__line::after, .console__bar { animation: none !important; }
}

/* ---------- 21. Page furniture added for the multi-page build ---------- */
.skip-link {
  position: fixed; z-index: 100; left: 16px; top: -80px; padding: 12px 18px; border-radius: 12px;
  background: #ECF0F4; color: var(--ink); font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 16px; }
.nav__links-cta { display: none; }
@media (max-width: 520px) {
  .nav__cta { display: none; }
  .nav__links .nav__links-cta { display: block; color: var(--abyss); background: #ECF0F4; border-radius: 12px; margin-top: 6px; }
}
.proc__body { flex: 1; min-width: 0; }
.results__text { flex: 1 1 340px; min-width: 0; }
.results__text .points { flex: none; }
.showcase .frame img { aspect-ratio: 5 / 4; object-position: 62% 50%; }
.feature .showcase { padding-bottom: 40px; }
.feature .showcase .frame img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
.feature .console { left: auto; right: -28px; }
@media (max-width: 980px) { .feature .console { right: auto; } }
.feature .diagram { flex: none; }
.frame--sq img, .feature .frame--sq img { aspect-ratio: 1 / 1; }
.frame--wide img { aspect-ratio: 1400 / 506; }
.plates__hint { display: none; margin-top: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--teal); }
.plates__intro .lede { margin-top: 24px; }
.plates__intro .more-link { margin-top: 28px; }
.plate-grid { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px 32px; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px; }
.card--row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 22px; padding: 16px 24px 16px 16px; }
.card--row img { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-m); }
.card--row h3 { margin-top: 0; }
.card--row p { margin-top: 8px; }
.prose { margin-top: 48px; max-width: 46em; display: grid; gap: 1.1em; }
.wide-figure { margin: 72px 0 0; }
.q-label { margin-top: 44px; }
.after { margin-top: 28px; }
.section--slim { padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
.form__error { grid-column: 1 / -1; display: none; padding: 14px 18px; border-radius: var(--r-m); background: rgba(227, 162, 79, .14); color: var(--signal-ink); font-size: 14px; }
.form.is-error .form__error { display: block; }
.aside a { color: var(--teal); }
.aside dd { margin: 0; }
.notfound .phero__frame { min-height: calc(100vh - 20px); align-items: center; }
.notfound .actions { margin-top: 36px; }
.emblem figcaption { flex-wrap: wrap; }
@media (max-width: 600px) {
  .emblems { grid-template-columns: 1fr 1fr; gap: 32px 14px; margin-top: 56px; }
  .emblem__img { border-radius: 18px; }
  .emblem figcaption { margin-top: 14px; }
  .emblem__name { font-size: 18px; }
  .emblem p { font-size: 14px; }
  .chip { font-size: 10px; padding: 4px 9px; letter-spacing: .08em; }
  .cta { padding-top: 110px; padding-bottom: 110px; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 820px) and (min-height: 600px) {
    .plates__hint { display: block; }
  }
}

/* ---------- 22. Story components (decision-simulator narrative, 2026-10) ---------- */
/* hero: the category name is the title; the cover slogan sits under it */
.hero .display.hero__title { font-size: clamp(46px, 6.6vw, 104px); line-height: 1.06; letter-spacing: .03em; }
html[lang="en"] .hero .display.hero__title { font-weight: 400; letter-spacing: -.02em; }
.hero__slogan { margin: 22px 0 0; max-width: 24em; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.5; color: #DCE8EE; text-wrap: balance; }
html[lang="en"] .hero__slogan { font-weight: 400; }
.hero .hero__slogan + .lede { margin-top: 18px; }

/* the mathematical thread under the story: small mono notes on a hairline */
.mnote { margin: 40px 0 0; max-width: 34em; padding: 2px 0 2px 18px; border-left: 1px solid var(--tide); }
.mnote__k { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; color: var(--tide); }
.mnote__t { margin: 8px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--dim); }
.section--paper .mnote { border-left-color: var(--teal); }
.section--paper .mnote__k { color: var(--teal); }
.section--paper .mnote__t { color: var(--slate); }
.mnote--mani { margin-top: 72px; }
.mnote--proc { margin-top: 32px; }

/* 02: forward and inverse problems */
.roads { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 64px 48px; align-items: start; }
.road .frame img { aspect-ratio: 3 / 2; }
.road__body { margin-top: 28px; }
.road__body h3 { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.35; }
html[lang="en"] .road__body h3 { font-weight: 500; }
.road__body .body { margin-top: 14px; }
.road .mnote { margin-top: 28px; }

/* 04: the cover slogan as its own chapter */
.strategy { padding: clamp(120px, 14vw, 200px) var(--pad); background: var(--abyss); color: #ECF0F4; }
.strategy__title { margin: 32px 0 0; max-width: 15em; font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.8vw, 72px); line-height: 1.2; letter-spacing: .01em; text-wrap: balance; }
html[lang="en"] .strategy__title { font-weight: 400; letter-spacing: -.02em; }
.strategy__grid { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px 96px; align-items: start; }
.strategy__grid .prose { margin-top: 0; }
.strategy__vs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.strategy__vs > div { padding: 24px 20px 0 0; }
.strategy__vs > div + div { padding-left: 24px; border-left: 1px solid var(--hair); }
.strategy__vs dt { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: var(--dim); }
.strategy__vs .is-now dt { color: var(--signal); }
.strategy__vs dd { margin: 16px 0 0; }
.strategy__vs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--dim); }
.strategy__vs .is-now ul { color: #ECF0F4; }
@media (max-width: 900px) { .strategy__grid { grid-template-columns: 1fr; } }

/* 09: complex adaptive systems, with the four hard problems as emblems */
.cas-intro { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 80px; align-items: start; }
.cas-intro .prose { margin-top: 0; }
.cas-intro .mnote { margin-top: 6px; }
@media (max-width: 900px) { .cas-intro { grid-template-columns: 1fr; } }
#complex .emblems { margin-top: 72px; }

/* 10: the two scientists */
.scis { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr)); gap: 28px; }
.sci { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); gap: 28px; align-items: start; padding: 26px; border-radius: var(--r-xl); background: var(--navy); border: 1px solid var(--hair); }
.sci__photo { overflow: hidden; border-radius: var(--r-l); }
.sci__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sci__name { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); font-weight: 600; line-height: 1.25; }
html[lang="en"] .sci__name { font-weight: 500; }
.sci__role { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tide); }
.sci__facts { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.sci__facts li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.75; color: var(--mist); }
.sci__facts li::before { content: ''; position: absolute; left: 0; top: .85em; width: 8px; height: 1px; background: var(--tide); }
.sci__joint { margin: 32px 0 0; max-width: 46em; font-size: 15px; line-height: 1.9; color: var(--mist); }
@media (max-width: 600px) { .sci { grid-template-columns: 1fr; padding: 20px; } .sci__photo { max-width: 200px; } }

/* ---------- 23. One page (2026-10): chapter plates and the blocks folded in from the former subpages ---------- */
/* chapter plates: the nav scrolls to these; same frame and planes as a page hero, a little shorter */
.chapter .phero__frame { min-height: min(74vh, 700px); }
.chapter .phero__content { padding-top: 120px; }
.chapter .display { max-width: 14em; }

/* 02: simulation, the road the page argues for, set apart below the two others */
.road-sim { margin-top: clamp(72px, 9vw, 112px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.road-sim .frame img { aspect-ratio: 3 / 2; }
.road-sim__body h3 { margin: 12px 0 0; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; line-height: 1.3; letter-spacing: .01em; }
html[lang="en"] .road-sim__body h3 { font-weight: 400; letter-spacing: -.012em; }
.road-sim__body .body { margin-top: 18px; font-size: 17px; }
.road-sim .mnote { margin-top: 28px; }
@media (max-width: 900px) { .road-sim { grid-template-columns: 1fr; } }

/* emblems on a light section (the four hard problems) */
.section--paper .emblem__img { border-color: var(--rule); }
.section--paper .emblem p { color: var(--slate); font-weight: 400; }

/* 10: markets and rock masses, the bridge into CAS+ */
.disc { margin-top: clamp(88px, 10vw, 128px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 80px; align-items: start; }
.disc__title { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); font-weight: 600; line-height: 1.25; }
html[lang="en"] .disc__title { font-weight: 400; letter-spacing: -.015em; }
.disc .prose { margin-top: 0; }
.disc + .wide-figure { margin-top: 56px; }
@media (max-width: 900px) { .disc { grid-template-columns: 1fr; } }

/* references, kept short at the end of the CAS+ chapter */

/* 14: the other seas, then a short list of further uses */
.seas__more { margin-top: clamp(72px, 9vw, 110px); }
.seas__more + .cards { margin-top: 28px; }

/* ---------- 24. Places, footnotes, cookie notice (2026-10) ---------- */
/* where we are: the closing band and the booking page say it in one line, no label */
.cta__places { margin: 88px 0 0; padding-top: 28px; border-top: 1px solid var(--hair); font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: .08em; color: #ECF0F4; }
.aside__places { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: .06em; color: var(--graphite) !important; }
@media (max-width: 760px) { .cta__places { margin-top: 64px; } }

/* references as footnotes at the foot of the home page, between the closing band and the footer */
.notes { background: var(--abyss); padding: 8px var(--pad) 24px; }
.notes__inner { max-width: var(--maxw); margin: 0 auto; padding-top: 40px; border-top: 1px solid var(--hair); }
.notes__lede { margin: 14px 0 0; font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.7; color: var(--dim); }
.notes .refs { margin-top: 20px; display: block; columns: 2 420px; column-gap: 56px; }
.notes .refs li { break-inside: avoid; padding: 8px 0 8px 36px; border-top: 0; font-size: 12.5px; line-height: 1.7; color: var(--dim); }
.notes .refs li::before { top: 9px; font-size: 11px; color: var(--tide); }
.notes .refs a { color: var(--mist); }

/* cookie notice: bottom right, both answers equally easy */
.consent { position: fixed; z-index: 80; right: 20px; bottom: 20px; width: min(400px, calc(100vw - 32px)); padding: 20px 22px; border-radius: var(--r-l); background: rgba(9, 20, 36, .94); border: 1px solid var(--hair); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); color: #D3DEE6; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.consent[hidden] { display: none; }
.consent__text { margin: 0; font-size: 13.5px; line-height: 1.75; }
.consent__actions { margin-top: 16px; display: flex; gap: 10px; }
.consent__btn { flex: 1; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(236, 240, 244, .4); background: transparent; color: #ECF0F4; font: inherit; font-size: 14px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.consent__btn:hover { background: rgba(236, 240, 244, .1); border-color: #ECF0F4; }
/* accept is the primary action: a white pill like .btn; decline keeps the outline */
.consent__btn--accept { background: #ECF0F4; border-color: #ECF0F4; color: var(--ink); font-weight: 500; }
.consent__btn--accept:hover { background: #FFFFFF; border-color: #FFFFFF; }
.consent__btn:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
@media (max-width: 760px) { .consent { right: 16px; bottom: 16px; } }
.footer__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(159, 182, 198, .4); cursor: pointer; }
.footer__cookies:hover { color: #ECF0F4; }