/* Owl Night: the page layer of the home page's opening. One dark theme (the scene is night), tokens only.
   The page is whole without the scene: the poster and the words paint first. */

:root {
  /* the page */
  --color-ink: #050814;
  --color-ink-2: #0A1024;
  --color-paper: #F3F1EA;
  --color-muted: #B9C2DA;
  --color-moon: #BFD4FF;
  --color-river-blue: #4191E1;
  --color-river-mint: #41E1B5;
  --color-river-cyan: #22D3EE;
  --color-gold: #F6C56B;
  --color-coral: #FF8A6B;
  --color-line: rgb(191 212 255 / 0.16);
  --color-line-strong: rgb(191 212 255 / 0.34);
  --color-veil: rgb(5 8 20 / 0.62);
  --color-veil-strong: rgb(5 8 20 / 0.86);
  --color-veil-soft: rgb(5 8 20 / 0.28);
  --color-veil-mid: rgb(5 8 20 / 0.5);
  --color-shade-text: rgb(5 8 20 / 0.6);
  --color-shade-deep: rgb(5 8 20 / 0.9);
  --color-shadow: rgb(0 0 0 / 0.5);
  --color-hover: rgb(191 212 255 / 0.09);
  --color-press: rgb(191 212 255 / 0.15);
  --color-thumb: rgb(191 212 255 / 0.3);
  --color-main-glow: rgb(65 225 181 / 0.22);
  --color-pin-glow: rgb(191 212 255 / 0.55);
  --color-term: rgb(5 8 20 / 0.78);
  --gradient-brand: linear-gradient(100deg, #4191E1 0%, #41E1B5 55%, #22D3EE 100%);
  /* the scene reads these */
  --scene-zenith: #140F3A;
  --scene-mid: #1B2459;
  --scene-horizon: #2E4C86;
  --scene-cloud: #0E1433;
  --scene-aurora-a: #3BE0A8;
  --scene-aurora-b: #7A5CFF;
  /* the frame the words and the owl are composed in: never wider than two screens-high, so a 21:9 or 32:9 screen
     gains forest at its sides and the words do not drift a metre from the picture's middle */
  --frame: min(100vw, 200svh);
  --gutter: clamp(20px, min(3.3vw, 6.2svh), 150px);
  --edge: calc((100vw - var(--frame)) / 2 + var(--gutter));
  --head-pad: clamp(18px, min(2.6vw, 5svh), 110px);
  --head-h: clamp(56px, min(4.2vw, 8svh), 150px);
  /* motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --u: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-ink); color: var(--color-paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--color-thumb) var(--color-ink); }
body { margin: 0; font-family: var(--font-text); font-size: var(--size-ui); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-river-cyan); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
[hidden] { display: none; }
.btn[hidden], .pause[hidden] { display: none; }

.skip { position: fixed; left: var(--head-pad); top: 10px; z-index: 60; padding: 0.6em 1em; border-radius: 999px; background: var(--color-paper); color: var(--color-ink); font-weight: 600; text-decoration: none; transform: translateY(-300%); transition: transform var(--duration-normal) var(--ease-premium); }
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- header: edge to edge, quiet until it is needed */
/* the header itself: assets/css/header.css (the same on every page); the loader line below sits in it */
.load { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: clip; opacity: 0; transition: opacity var(--duration-slow) ease-out; }
.load.is-on { opacity: 1; }
.load__bar { display: block; height: 100%; background: var(--gradient-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) ease-out; }

/* ---------------------------------------------------------------- the flight: a tall section with one sticky screen */
/* the whole home page is one flight: the opening (5.16 screens of scroll), then 27.9 screens in the wood (T298, T382), then one to land.
   --pace is how many real screens of scroll one screen of the flight takes (the owner, 2026-10-17: it scrolled "hard"
   at 1: 25 to 37 wheel notches an act). boot.js reads it from here, so the marks and the jumps stay in step. */
.flight { position: relative; --pace: 0.6; height: calc((33.06 * var(--pace) + 1) * 100svh); }   /* 33.06 screens since T382 (the ford, the fall) */

.mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.stage { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--color-ink); isolation: isolate; }
.poster, .poster img, .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the poster is framed as the live camera frames the same night (T303, 2026-10-17). Measured against the live scene's
   first frame at 1920x1080 and 3414x1440 on two graphics cards: the camera looks at the middle of the picture (not 62%)
   and is rolled 0.26 degrees. T334 (2026-10-18): the poster pictures are now drawn from the live scene's own first frame (its roll
   is in the picture), so the poster sits at 50% and is not turned. The same picture is laid behind it. The tall poster (a phone) keeps its own framing. */
.poster { background: url("../img/poster-wide.jpg?v=20261018t334") 50% 50% / cover no-repeat; }
.poster img { object-fit: cover; object-position: 50% 50%; transform-origin: 50% 50%; }
@media (max-aspect-ratio: 4/5) { .poster { background: none; } .poster img { object-position: 62% 50%; rotate: none; transform-origin: 62% 55%; } }
.scene { display: block; opacity: 0; visibility: hidden; }
.is-live .scene, .is-still .scene { opacity: 1; visibility: visible; }
.is-live .poster, .is-still .poster { visibility: hidden; }
/* while the scene loads (no state class yet: 3 to 11 s on a home connection, the speed check of 2026-10-17) the still
   settles for its first 3.2 s: it backs away from a slightly closer, shifted frame and ends AT REST, on the frame the live
   scene starts from. The scene replaces the poster on one frame (it has no fade), so the poster must already be at rest then:
   a drift that was still going at that frame made the moon and the trees jump (T303). With no live scene at all (the still
   picture stays) it drifts back and forth from rest, as before. */
:root:not(.is-live):not(.is-still):not(.is-poster) .poster img { animation: settle 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes settle { from { scale: 1.04; translate: -1% -0.6%; } to { scale: 1; translate: 0 0; } }
.is-poster .poster img { animation: drift 46s ease-in-out infinite alternate; }
@keyframes drift { from { scale: 1; translate: 0 0; } to { scale: 1.09; translate: -1.2% -0.8%; } }

.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 90% at 22% 72%, var(--color-veil-mid) 0%, var(--color-veil-soft) 42%, transparent 70%); opacity: clamp(0, calc(1 - (var(--u) - 0.03) / 0.08), 1); }
.is-live .stage::after, .is-still .stage::after { background: none; }   /* the live picture carries its own shade */

.copy { position: absolute; z-index: 2; margin: 0; }
.hero { left: max(var(--edge), env(safe-area-inset-left)); bottom: clamp(40px, 10.5svh, 260px); width: min(calc(var(--frame) - 2 * var(--gutter)), 46em); max-width: calc(100vw - 2 * var(--gutter)); opacity: clamp(0, calc(1 - (var(--u) - 0.025) / 0.07), 1); transform: translate3d(0, calc(var(--u) * -260px), 0); }
.hero.is-gone { visibility: hidden; }
/* the waypoints of the opening flight: one quiet line at a time where the hero stood; --w is set by boot.js */
.way { left: max(var(--edge), env(safe-area-inset-left)); bottom: clamp(40px, 10.5svh, 260px); width: min(calc(var(--frame) - 2 * var(--gutter)), 30em); max-width: calc(100vw - 2 * var(--gutter)); font-family: var(--font-serif); font-style: italic; font-size: calc(var(--size-lede) * 1.3); line-height: 1.35; text-wrap: balance; color: var(--color-paper); text-shadow: 0 0 1.2em var(--color-shade-deep); opacity: var(--w, 0); visibility: hidden; transform: translate3d(0, calc((1 - var(--w, 0)) * 16px), 0); pointer-events: none; }
.way.is-on { visibility: visible; }
/* its own ground: the river under it is the brightest thing in the flight (white text washed out there, 2026-10-17) */
.way { isolation: isolate; }
.way::before { content: ""; position: absolute; inset: -2.4em -3em -2.2em -3em; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--color-shade-deep) 0%, color-mix(in srgb, var(--color-shade-deep) 70%, transparent) 40%, color-mix(in srgb, var(--color-shade-deep) 25%, transparent) 72%, transparent 100%); }
h1 .h1-topic { display: block; font-family: var(--font-text); font-style: normal; line-height: 1.5; }   /* the topic "Stryx Labs" sits inside the h1 (SEO, 2026-10-19), looks as the eyebrow did */
.hero__eyebrow { margin: 0 0 1.1em; font-size: var(--size-small); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-moon); }
.hero__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--size-title); line-height: 0.98; letter-spacing: var(--track-title); font-kerning: normal; font-feature-settings: "kern", "liga", "clig", "calt"; text-wrap: balance; text-shadow: 0 0.04em 0.6em var(--color-shade-text); }
.hero__line { display: block; }
.hero__line--em { font-style: italic; letter-spacing: -0.012em; color: var(--color-gold); padding-bottom: 0.06em; }
.hero__lede { margin: 1.25em 0 0; max-width: 31em; font-size: var(--size-lede); line-height: 1.55; color: var(--color-paper); text-shadow: 0 0 1.2em var(--color-shade-deep); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75em 1.1em; margin-top: 1.9em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; min-height: 3em; padding: 0 1.5em; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: var(--size-ui); font-weight: 600; letter-spacing: 0.035em; text-decoration: none; cursor: pointer; transition: transform var(--duration-fast) var(--ease-premium), background-color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, opacity var(--duration-fast) ease-out; }
.btn svg { width: 1em; height: 1em; transition: transform var(--duration-normal) var(--ease-premium); }
.btn--main { background: var(--gradient-brand); color: var(--color-ink); box-shadow: 0 0.5em 2.4em var(--color-main-glow); }
.btn--main:hover { transform: translateY(-2px); } .btn--main:hover svg { transform: translateX(3px); }
.btn--main:active { transform: translateY(0) scale(0.975); transition-duration: 100ms; }
.btn--quiet { color: var(--color-paper); border-color: var(--color-line-strong); background: var(--color-veil-soft); }
.btn--quiet:hover { border-color: var(--color-paper); background: var(--color-veil-mid); } .btn--quiet:hover svg { transform: translateY(3px); }
.btn--quiet:active { transform: scale(0.975); transition-duration: 100ms; }
.btn--small { min-height: 2.75em; padding: 0 1.2em; color: var(--color-paper); border-color: var(--color-line-strong); background: var(--color-veil-strong); }
.btn--small:hover { border-color: var(--color-paper); } .btn--small:active { transform: scale(0.975); }

.line { left: 0; right: 0; text-align: center; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: var(--size-line); line-height: 1.05; letter-spacing: -0.012em; color: var(--color-paper); text-shadow: 0 0 0.9em var(--color-shade-deep), 0 0 0.25em var(--color-shade-text); pointer-events: none; padding: 0 var(--gutter); }
.line--river { top: 17svh; opacity: clamp(0, min(calc((var(--u) - 0.425) / 0.035), calc((0.555 - var(--u)) / 0.04)), 1); transform: translate3d(0, calc((var(--u) - 0.49) * -420px), 0); }

.seen { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; display: grid; gap: 0.15em; padding: 0.55em 0.9em; border-radius: 0.7em; background: var(--color-veil-strong); border: 1px solid var(--color-line); font-size: var(--size-small); letter-spacing: 0.03em; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity var(--duration-slow) ease-out; white-space: nowrap; }
.seen.is-on { opacity: 1; }
.seen__name { font-weight: 600; color: var(--color-river-mint); } .seen__fact { color: var(--color-muted); }

.status { position: absolute; z-index: 3; right: max(var(--head-pad), env(safe-area-inset-right)); bottom: clamp(18px, 4svh, 80px); display: flex; flex-direction: column; align-items: flex-end; gap: 0.7em; max-width: min(34em, calc(100vw - 2 * var(--head-pad))); }
.status__text { margin: 0; padding: 0.7em 1em; border-radius: 0.8em; background: var(--color-veil-strong); border: 1px solid var(--color-line); color: var(--color-paper); font-size: var(--size-small); line-height: 1.45; }
.status__text:empty { display: none; }
.pause { position: absolute; z-index: 3; left: max(var(--head-pad), env(safe-area-inset-left)); bottom: clamp(14px, 3svh, 64px); display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; padding: 0 1em; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-veil-mid); color: var(--color-muted); font: inherit; font-size: var(--size-small); font-weight: 600; letter-spacing: 0.04em; cursor: pointer; opacity: 0.7; transition: opacity var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out; }
.pause:hover, .pause:focus-visible { opacity: 1; color: var(--color-paper); border-color: var(--color-line-strong); } .pause:active { opacity: 0.85; }
.pause__icon { width: 0.7em; height: 0.8em; border-left: 0.24em solid currentColor; border-right: 0.24em solid currentColor; }
.pause[aria-pressed="true"] .pause__icon { width: 0; height: 0; border-top: 0.42em solid transparent; border-bottom: 0.42em solid transparent; border-left: 0.7em solid currentColor; border-right: 0; }

/* ---------------------------------------------------------------- the acts in the wood: each is a layer over the stage; its card holds the words,
   its pins hang on the things in the wood they belong to (a trunk, a light, an owl). --w is how much of the act is on screen. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.band { display: none; }
.act { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--w, 0); visibility: hidden; --w: 0; }
.act.is-on { visibility: visible; }
.act--memory .act__card, .act--beliefs .act__card { top: auto; bottom: clamp(56px, 11svh, 260px); transform: translate3d(0, calc((1 - var(--w)) * 22px), 0); }
.act__card { position: absolute; left: max(var(--edge), env(safe-area-inset-left)); top: 50%; width: min(calc(var(--frame) - 2 * var(--gutter)), 34em); max-width: calc(100vw - 2 * var(--gutter)); pointer-events: auto; transform: translate3d(0, calc(-50% + (1 - var(--w)) * 22px), 0); text-shadow: 0 0 1.2em var(--color-shade-deep); }
/* T377: at the end of the Orion act the eye comes down to the counter and the lit brook runs under the words: a soft
   night veil behind them, no edge, part of the act (it fades with --w). The phone keeps its own veil (.act::before). */
@media (min-width: 761px) {
  .act--orion .act__card::before { content: ""; position: absolute; z-index: -1; inset: -5em -9em -2em -12em; pointer-events: none; background: radial-gradient(closest-side, var(--color-veil-strong) 0%, var(--color-veil-strong) 40%, var(--color-veil-mid) 72%, transparent 100%); }
}
.act__eyebrow { margin: 0 0 1em; font-size: var(--size-small); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-moon); }
.act__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--size-line); line-height: 1.02; letter-spacing: var(--track-title); text-wrap: balance; }
.act__title em { font-style: italic; letter-spacing: var(--track-title-italic); color: var(--color-gold); }
.act__title--name small { font-family: var(--font-text); font-size: var(--size-small); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dot, var(--color-moon)); margin-left: 0.6em; vertical-align: 0.9em; }
.act__lede, .act__promise { margin: 1.1em 0 0; max-width: 31em; font-size: var(--size-lede); line-height: 1.55; text-wrap: pretty; }
.act__promise { font-family: var(--font-serif); font-style: italic; font-size: calc(var(--size-lede) * 1.18); line-height: 1.4; }
.act__note { margin: 1em 0 0; font-family: var(--font-serif); font-style: italic; color: var(--color-muted); font-size: var(--size-lede); }
.act__small { margin: 1.4em 0 0; font-size: var(--size-small); letter-spacing: 0.06em; color: var(--color-muted); }
.act__btn { margin-top: 1.6em; }
.act__links { display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; margin: 1.4em 0 0; }
.act__mail { margin: 1.5em 0 0; font-size: var(--size-lede); color: var(--color-muted); }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-paper); font-weight: 600; letter-spacing: 0.03em; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 0.3em; transition: text-decoration-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out; }
.link:hover { text-decoration-color: var(--color-river-mint); } .link:active { color: var(--color-river-mint); }
.link--quiet { color: var(--color-muted); font-weight: 400; }
.trio { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1.5em 0 0; padding: 0; }
.trio__link { display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; padding: 0 1.1em; border-radius: 999px; border: 1px solid var(--color-line-strong); background: var(--color-veil-mid); text-decoration: none; font-weight: 600; letter-spacing: 0.03em; transition: border-color var(--duration-fast) ease-out, background-color var(--duration-fast) ease-out, transform var(--duration-fast) var(--ease-premium); }
.trio__link:hover { border-color: var(--dot); background: var(--color-veil-strong); transform: translateY(-1px); } .trio__link:active { transform: scale(0.975); }
.trio--small .trio__link { min-height: 40px; }
[data-site="mneme"] .act__title--name small { color: var(--color-river-blue); }

/* pins: placed by boot.js from the scene each frame (--px, --py are CSS px in the stage) */
.pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; transform: translate3d(var(--px, -999px), var(--py, -999px), 0); opacity: var(--pin, 0); transition: opacity var(--duration-slow) ease-out; }
/* the pins of the act on screen move every frame: each on its own layer, so a move is not a repaint (report 15) */
:root:not(.no-pins) .act.is-on .pin { will-change: transform; }
.fact { display: flex; flex-direction: column-reverse; padding: 0.2em 0 0 1.1em; transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(0, -50%); }
.fact::before { content: ""; position: absolute; left: -0.25em; top: 50%; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--color-paper); box-shadow: 0 0 0.8em var(--color-pin-glow); transform: translateY(-50%); }
.fact dd { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--size-line); line-height: 1; color: var(--color-paper); text-shadow: 0 0 0.6em var(--color-shade-deep); }
.fact dt { margin-top: 0.35em; font-size: var(--size-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-moon); text-shadow: 0 0 0.8em var(--color-shade-deep); }
.tag { padding: 0.35em 0.8em; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-veil-strong); font-size: var(--size-small); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; color: var(--color-paper); transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(-50%, -170%); transition: opacity var(--duration-slow) ease-out, color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out; }
.tag.is-chosen { color: var(--color-paper); border-color: var(--color-river-mint); }
.tags--far .tag { border-color: var(--dot); transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(-50%, -175%); }
.belief { width: min(19em, 28vw); padding-left: 1.3em; font-family: var(--font-serif); font-style: italic; font-size: var(--size-lede); line-height: 1.4; color: var(--color-paper); text-shadow: 0 0 1em var(--color-shade-deep), 0 0 0.3em var(--color-shade-text); transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(0.8em, -50%); }
.belief__n { position: absolute; left: 0; top: 0.05em; font-family: var(--font-text); font-style: normal; font-size: var(--size-small); font-weight: 600; letter-spacing: 0.1em; color: var(--color-gold); }
.person { width: min(17em, 24vw); text-align: center; transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(-50%, 3.2em); text-shadow: 0 0 1em var(--color-shade-deep); }
.person__name { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: calc(var(--size-line) * 0.62); line-height: 1.1; }
.person__role { margin: 0.3em 0 0; font-size: var(--size-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-moon); }
.person__line { margin: 0.5em 0 0; font-size: var(--size-small); line-height: 1.5; color: var(--color-paper); }

/* with no live scene to hang them on (a still picture, a narrow screen) the pins sit in the card's own column */
.no-pins .act { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.6em; padding: calc(var(--head-h) + 1em) var(--gutter) 5.5em max(var(--edge), env(safe-area-inset-left)); }
.no-pins .act__card { position: relative; left: auto; top: auto; transform: translate3d(0, calc((1 - var(--w)) * 22px), 0); }
.no-pins .pins { position: relative; inset: auto; display: flex; flex-wrap: wrap; gap: 1.2em 2.2em; max-width: min(calc(var(--frame) - 2 * var(--gutter)), 46em); }
.no-pins .pin { position: relative; transform: none; opacity: 1; }
.no-pins .tags { display: none; }
.no-pins .belief, .no-pins .person { width: auto; max-width: 21em; text-align: left; }

/* the terminal of the Mneme demo, and Orion's ledger */
.term, .ledger { margin-top: 1.4em; padding: 0.9em 1.1em 1em; border-radius: 0.9em; border: 1px solid var(--color-line); background: var(--color-term); text-shadow: none; }
.term__bar { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 0.7em; font-family: var(--font-mono); font-size: var(--size-small); color: var(--color-muted); }
.term__cap, .ledger__cap { font-family: var(--font-text); font-size: var(--size-small); letter-spacing: 0.08em; color: var(--color-muted); }
.term__body { font-family: var(--font-mono); font-size: var(--size-small); line-height: 1.6; }
.term__line { display: grid; grid-template-columns: 1.6em 1fr; margin: 0; color: var(--color-paper); }
.term__line > span:first-child { color: var(--color-muted); }
.term__line.is-ok > span:first-child { color: var(--color-river-mint); }
.term__line.is-warn, .term__line.is-warn > span:first-child { color: var(--color-coral); }
.term__line.is-note { color: var(--color-muted); }
.term .q { color: var(--color-gold); } .term .dim { color: var(--color-muted); }
.term.is-playing .term__line { animation: term-in 320ms var(--ease-premium) both; animation-delay: calc(var(--i, 0) * 420ms); }
@keyframes term-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.term__run { margin-top: 0.9em; }
.term__run svg { width: 0.9em; height: 0.9em; }
.skills__say { margin: 1.2em 0 0.7em; font-size: var(--size-lede); color: var(--color-muted); } .skills__say b { color: var(--color-paper); font-weight: 600; }
.groups { display: flex; flex-wrap: wrap; gap: 0.5em; }
.group { display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding: 0 0.95em; border-radius: 999px; border: 1px solid var(--color-line-strong); background: var(--color-veil-mid); color: var(--color-paper); font: inherit; font-size: var(--size-small); font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: border-color var(--duration-fast) ease-out, background-color var(--duration-fast) ease-out, transform var(--duration-fast) var(--ease-premium); }
.group span { color: var(--color-muted); font-weight: 400; }
.group:hover { border-color: var(--color-paper); } .group:active { transform: scale(0.97); }
.group[aria-pressed="true"] { border-color: var(--color-river-mint); background: var(--color-veil-strong); } .group[aria-pressed="true"] span { color: var(--color-river-mint); }
.ledger__tabs { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.9em; }
.ledger__tab { min-height: 40px; padding: 0 0.95em; border-radius: 999px; border: 1px solid var(--color-line); background: none; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--size-small); cursor: pointer; transition: color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out; }
.ledger__tab:hover { color: var(--color-paper); } .ledger__tab[aria-selected="true"] { color: var(--color-paper); border-color: var(--color-river-cyan); }
.tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; margin: 0; padding: 0; }
.tile { display: flex; flex-direction: column; gap: 0.15em; padding: 0.6em 0.8em; border-radius: 0.6em; border: 1px solid var(--color-line); font-size: var(--size-small); }
.tile span { color: var(--color-muted); } .tile b { font-family: var(--font-mono); font-weight: 600; color: var(--color-paper); }
.tile--wide { grid-column: 1 / -1; } .tile.is-good b { color: var(--color-river-mint); } .tile.is-warn b { color: var(--color-coral); }
.ledger__cap { margin: 0.8em 0 0; }

/* the rail: one dot for each act; the label shows on the act you are in, and on hover or focus */
.rail.is-away { opacity: 0; visibility: hidden; transition: opacity var(--duration-slow) ease-out, visibility 0s linear var(--duration-slow); }
.rail { transition: opacity var(--duration-slow) ease-out, visibility 0s; }
.rail { position: fixed; z-index: 40; right: max(var(--head-pad), env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15em; align-items: flex-end; }
.rail__link { display: flex; align-items: center; flex-direction: row-reverse; gap: 0.7em; min-height: 30px; padding: 0 0.2em; text-decoration: none; color: var(--color-muted); font-size: var(--size-small); font-weight: 600; letter-spacing: 0.06em; }
.rail__dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--color-muted); transition: transform var(--duration-normal) var(--ease-premium), background-color var(--duration-normal) ease-out, border-color var(--duration-normal) ease-out; }
.rail__label { padding: 0.15em 0.6em; border-radius: 999px; background: var(--color-veil-strong); opacity: 0; transform: translateX(6px); transition: opacity var(--duration-normal) ease-out, transform var(--duration-normal) var(--ease-premium); }
.rail__link:hover .rail__label, .rail__link:focus-visible .rail__label, .rail__link[aria-current="true"] .rail__label { opacity: 1; transform: none; }
.rail__link[aria-current="true"] { color: var(--color-paper); } .rail__link[aria-current="true"] .rail__dot { background: var(--color-river-mint); border-color: var(--color-river-mint); transform: scale(1.4); }
.rail__link:hover .rail__dot { border-color: var(--color-paper); }

/* the footer: the page lands here after the flight */
.foot { position: relative; z-index: 3; background: var(--color-ink); border-top: 1px solid var(--color-line); }
.foot__in { width: min(calc(var(--frame) - 2 * var(--gutter)), 1600px); margin: 0 auto; padding: clamp(48px, 8svh, 140px) 0 clamp(28px, 4svh, 70px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5em 3em; }
.foot__line { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--size-line); line-height: 1.05; }
.foot__line em { color: var(--color-gold); }
.foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em; }
.foot__head { margin: 0 0 0.6em; font-size: var(--size-small); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-moon); }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-paper); text-decoration: none; transition: color var(--duration-fast) ease-out; }
.foot__col a:hover { color: var(--color-river-mint); }
.foot__made { grid-column: 1 / -1; margin: 0; font-size: var(--size-small); color: var(--color-muted); }
.foot__made a { color: var(--color-paper); text-underline-offset: 0.25em; }
.foot__legal { grid-column: 1 / -1; margin: 1em 0 0; padding-top: 1.5em; border-top: 1px solid var(--color-line); font-size: var(--size-small); color: var(--color-muted); }
.foot__legal a { color: var(--color-paper); }

/* ---------------------------------------------------------------- narrow screens: the same idea, the words under the owl */
@media (max-width: 760px) {
  .hero { bottom: clamp(84px, 13svh, 150px); }
  .hero__lede { font-size: 1rem; }
  .line--river { top: 15svh; }
  .status { left: var(--head-pad); align-items: stretch; bottom: 70px; }
  .rail { display: none; }
  .no-pins .act { justify-content: flex-end; padding-bottom: 6.5em; gap: 1em; }
  .act::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-veil-strong) 0%, var(--color-veil-strong) 38%, var(--color-veil-soft) 68%, transparent 82%); }
  .act > * { position: relative; }
  /* T378: the owl vessel now stands above the manifesto words, so the lit brook in front of it rises to their top line:
     a soft band behind the words only (screen edge to edge, soft above and below), gone before the vessel's foot */
  .act--beliefs .act__card::before { content: ""; position: absolute; z-index: -1; inset: -4.5em calc(-1 * var(--gutter)) -1em; pointer-events: none; background: linear-gradient(to bottom, transparent 0, var(--color-veil-soft) 1.6em, var(--color-veil-mid) 3em, var(--color-veil-strong) 4.5em, var(--color-veil-strong) calc(100% - 1em), transparent 100%); }   /* T400: a long soft ramp: no darker band shows above MANIFESTO */
  /* T382: the ford and the fall stand above their words on a phone, but as each act ends the eye turns down the lit
     water behind the words; the same soft band as the manifesto's keeps them readable to the last frame */
  /* it lives outside the act (#band, set by boot.js), so it comes before the words and stays until they are gone */
  .band { display: block; position: absolute; left: 0; right: 0; z-index: 1; top: var(--band-top, 0px); height: var(--band-h, 0px); pointer-events: none; opacity: var(--band, 0); background: linear-gradient(to bottom, transparent 0, var(--color-veil-mid) 1.5em, var(--color-veil-strong) 3em, var(--color-veil-strong) calc(100% - 1em), transparent 100%); }
  .act__lede, .act__promise { font-size: 1rem; }
  .term__line:nth-child(n + 6) { display: none; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) and (max-height: 700px) { .hero__lede { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .hero, .line, .way, .act__card, .no-pins .act__card { transform: none; }
  .act__card { top: 50%; translate: 0 -50%; } .no-pins .act__card { translate: none; }
  .btn, .btn svg { transition-property: opacity, color, background-color, border-color; }
}
@media (forced-colors: active) { .btn--main { border-color: ButtonText; } }

/* ---------------------------------------------------------------- the products section (2026-10-17)
   One calm section after the flight and before the footer: normal scrolling, its own dark ground, not over the scene.
   The three product inks and the 4 px space steps mirror assets/css/tokens.css (the home page does not load that file). */
:root {
  --color-mneme: #6fb0f2; --color-skills: #5fe8c2; --color-orion: #5fdcf2;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --radius-lg: 1.25rem;
  --color-panel: color-mix(in srgb, var(--color-moon) 5%, var(--color-ink-2));
}
.offer { position: relative; z-index: 3; background: linear-gradient(to bottom, var(--color-ink) 0, var(--color-ink-2) 12rem, var(--color-ink-2) 100%); border-top: 1px solid var(--color-line); }
.offer__in { width: min(calc(var(--frame) - 2 * var(--gutter)), 1600px); margin: 0 auto; padding: clamp(var(--space-8), 12svh, var(--space-9)) 0 clamp(var(--space-8), 10svh, var(--space-9)); }
.offer__head { max-width: 46rem; }
.offer__kicker, .offer__eyebrow { margin: 0; font-size: var(--size-small); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-moon); }
.offer__title { margin: var(--space-4) 0 0; font-family: var(--font-display); font-weight: 300; font-size: var(--size-line); line-height: 1.05; letter-spacing: var(--track-title); text-wrap: balance; }
.offer__intro { margin: var(--space-5) 0 0; max-width: 34rem; font-size: var(--size-lede); line-height: var(--lead-text); color: var(--color-muted); text-wrap: pretty; }
.offer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.offer__card { --acc: var(--color-mneme); --acc-fill: var(--color-river-blue); position: relative; display: flex; flex-direction: column; padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: var(--color-panel); }
.offer__card[data-site="skills"] { --acc: var(--color-skills); --acc-fill: var(--color-river-mint); }
.offer__card[data-site="orion"] { --acc: var(--color-orion); --acc-fill: var(--color-river-cyan); }
.offer__card::before { content: ""; width: 2.25rem; height: 2px; margin-bottom: var(--space-5); border-radius: 2px; background: var(--acc-fill); }
.offer__eyebrow { color: var(--acc); }
.offer__name { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 300; font-size: calc(var(--size-lede) * 1.7); line-height: 1.1; letter-spacing: var(--track-title); text-wrap: balance; }
.offer__lede { margin: var(--space-4) 0 0; font-size: var(--size-lede); line-height: var(--lead-text); color: var(--color-paper); text-wrap: pretty; }
.offer__points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.offer__points li { position: relative; padding-left: var(--space-5); font-size: calc(var(--size-lede) * 0.92); line-height: var(--lead-text); color: var(--color-muted); text-wrap: pretty; }
.offer__points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--acc-fill); }
.offer__points strong { font-weight: 600; color: var(--color-paper); }
.offer__proof { margin-top: auto; }
.offer__proof p { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-line); font-family: var(--font-serif); font-style: italic; font-size: var(--size-lede); line-height: 1.45; color: var(--color-paper); text-wrap: pretty; }
.offer__proof .offer__label { margin: var(--space-3) 0 0; padding: 0; border: 0; font-family: var(--font-text); font-style: normal; font-size: var(--size-small); letter-spacing: 0.04em; color: var(--color-muted); }
.offer__btn { align-self: flex-start; margin-top: var(--space-5); border-color: var(--acc); }
.offer__btn:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.offer__btn:hover svg { transform: translateX(3px); }
.offer__close { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.offer__close p { margin: 0; max-width: 36rem; font-family: var(--font-display); font-weight: 300; font-size: calc(var(--size-lede) * 1.4); line-height: 1.3; text-wrap: balance; }
@media (min-width: 1000px) { .offer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .offer__card { padding: var(--space-6) clamp(var(--space-5), 1.6vw, var(--space-6)); } }
@media (max-width: 760px) { .offer__card { padding: var(--space-5); } .offer__btn, .offer__close .btn { align-self: stretch; } }
/* a gentle fade-in on scroll, where the browser can tie it to the scroll; elsewhere the cards are simply there */
@supports (animation-timeline: view()) {
  .offer__card, .offer__close { animation: offer-in linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes offer-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .offer__card, .offer__close { animation: none; } .offer__btn:hover svg { transform: none; } }

/* ---------------------------------------------------------------- "Look closer" (T298, 2026-10-17): at each landing the card
   keeps a headline, one line and two actions; the long facts open in place, on their own ground, with no extra scrolling.
   The button says whether it is open (aria-expanded); Escape closes it and gives the focus back (boot.js). */
.act__do { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75em 1.1em; margin-top: 1.6em; }
.closer__chev { transition: transform var(--duration-normal) var(--ease-premium); }
.closer__btn[aria-expanded="true"] .closer__chev { transform: rotate(180deg); }
.closer__btn:hover svg.closer__chev { transform: none; } .closer__btn[aria-expanded="true"]:hover svg.closer__chev { transform: rotate(180deg); }
.closer { margin-top: 1.2em; padding: 1em 1.15em 1.1em; max-height: min(52svh, 34em); overflow: auto; overscroll-behavior: contain; border-radius: 0.9em; border: 1px solid var(--color-line); background: var(--color-veil-strong); text-shadow: none; animation: closer-in var(--duration-slow) var(--ease-premium) both; }
.closer .term, .closer .ledger { margin-top: 1em; background: transparent; border: 0; padding: 0; }
.closer .act__links { margin-top: 1em; }
.closer .skills__say { margin-top: 0; }
.closer__facts { list-style: none; display: grid; gap: 0.45em; margin: 0; padding: 0; font-size: var(--size-ui); color: var(--color-muted); }
.closer__facts li { position: relative; padding-left: 1.1em; } .closer__facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--dot, var(--color-river-mint)); }
.closer__facts b { color: var(--color-paper); font-weight: 600; }
.closer__note { margin: 1em 0 0; font-size: var(--size-small); line-height: 1.5; color: var(--color-muted); }
[data-site="mneme"] .closer__facts li::before { background: var(--color-river-blue); }
@keyframes closer-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .closer { animation: none; } .closer__chev { transition: none; } }
@media (max-width: 760px) { .closer { max-height: 40svh; } .act__do .btn { flex: 1 1 auto; } }