/* Milestone 1: structural design system. Motion choreography lands in the next commit. */

/* Hero-only display faces (self-hosted). Scoped onto .chapter--origin below —
   the site-wide --display/--sans/--mono tokens are untouched. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/spacegrotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrainsmono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #07080d;
  --bg-rgb: 7, 8, 13;
  --paper: #f4f1e8;
  --ink: #11131a;
  --white: #f8f7f0;
  --muted: #a7a8b2;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --lime: #caff58;
  --cyan: #69ddff;
  --gold: #ffd169;
  --coral: #ff7c63;
  --pink: #ff8dcd;
  --violet: #a88aff;
  --teal: #76eed7;
  --header-h: 84px;
  --pad: clamp(22px, 4vw, 64px);
  --display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); color: var(--white); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body::selection { background: var(--lime); color: #071006; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }

.skip-link { position: fixed; z-index: 999; left: 16px; top: 12px; transform: translateY(-160%); padding: 10px 14px; border-radius: 100px; background: var(--paper); color: var(--ink); font-weight: 800; transition: transform .2s; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }

.cosmos { position: fixed; inset: 0; z-index: -4; width: 100%; height: 100%; pointer-events: none; opacity: .72; }
.paper-noise { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .032; mix-blend-mode: normal; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.page-progress { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.04); }
.page-progress span { display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--lime), var(--cyan), var(--violet)); }

.site-header { position: fixed; z-index: 70; top: 0; left: 0; width: 100%; height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, transform .45s var(--ease-out); }
.site-header.is-scrolled { background: rgba(7,8,13,.76); border-color: rgba(255,255,255,.1); backdrop-filter: none; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; }
.wordmark__sigil { width: 38px; height: 38px; color: var(--white); }
.wordmark__sigil svg { width: 100%; height: 100%; overflow: visible; }
.wordmark__sigil circle, .wordmark__sigil path { fill: none; stroke: currentColor; stroke-width: 1.3; }
.wordmark__text { display: grid; gap: 0; line-height: 1; }
.wordmark__text b { font: 900 17px/1 var(--display); letter-spacing: .08em; }
.wordmark__text small { margin-top: 3px; font: 600 8px/1 var(--mono); letter-spacing: .28em; color: var(--muted); }
.header-thesis { margin: 0; color: rgba(255,255,255,.58); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.header-link { justify-self: end; display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.header-link svg { width: 17px; height: 17px; }
.header-link path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.chapter-rail { position: fixed; z-index: 65; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.chapter-rail a { position: relative; display: grid; grid-template-columns: 18px 0fr; align-items: center; gap: 4px; min-height: 20px; color: rgba(255,255,255,.38); text-decoration: none; transition: color .25s, grid-template-columns .35s var(--ease-out); }
.chapter-rail a::before { content: ""; position: absolute; right: 0; width: 8px; height: 1px; background: currentColor; transition: width .35s var(--ease-out); }
.chapter-rail span { opacity: 0; font: 600 9px/1 var(--mono); }
.chapter-rail b { overflow: hidden; white-space: nowrap; opacity: 0; font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.chapter-rail a:hover, .chapter-rail a[aria-current="true"] { color: var(--white); grid-template-columns: 18px 54px; }
.chapter-rail a:hover::before, .chapter-rail a[aria-current="true"]::before { width: 72px; }
.chapter-rail a:hover span, .chapter-rail a:hover b, .chapter-rail a[aria-current="true"] span, .chapter-rail a[aria-current="true"] b { opacity: 1; }

.chapter { position: relative; min-height: 140vh; }
.chapter-stage { position: sticky; top: 0; min-height: 100svh; overflow: hidden; padding: calc(var(--header-h) + 26px) var(--pad) 36px; }
.eyebrow { margin: 0; font: 700 10px/1.25 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: currentColor; }

/* Origin */
.chapter--origin {
  min-height: 180vh;
  background: radial-gradient(circle at 50% 42%, rgba(87,125,255,.09), transparent 34%), var(--bg);
  --display: "Space Grotesk", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Space Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --lime: #b8f04a; /* the exact accent the WebGL core paints — hero only */
}
.origin-stage { position: relative; display: grid; grid-template-columns: minmax(320px, 46%) 1fr; grid-template-rows: auto 1fr auto; align-items: center; gap: 20px 4vw; pointer-events: none; }
.origin-universe { position: absolute; z-index: 0; top: 0; bottom: 0; left: 30%; right: -4%; pointer-events: auto; }
.origin-universe odds-universe { display: block; width: 100%; height: 100%; }
.origin-universe__fallback { display: none; position: absolute; inset: 0; background: radial-gradient(circle at 62% 46%, rgba(202,255,88,.22), rgba(202,255,88,.04) 40%, transparent 64%); }
.origin-universe__fallback::before, .origin-universe__fallback::after { content: ""; position: absolute; left: 50%; top: 46%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.origin-universe__fallback::before { width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-9deg); }
.origin-universe__fallback::after { width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(15deg); border-style: dashed; }
odds-universe[data-reduced] ~ .origin-universe__fallback,
odds-universe[data-failed] ~ .origin-universe__fallback { display: block; }
.origin-scrim { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(var(--bg-rgb), .94) 0%, rgba(var(--bg-rgb), .88) 32%, rgba(var(--bg-rgb), 0) 64%); }
.origin-kicker { position: absolute; z-index: 2; top: calc(var(--header-h) + 18px); left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; color: rgba(255,255,255,.48); font: 600 10px/1 var(--mono); letter-spacing: .12em; }
.origin-title { pointer-events: auto; position: relative; z-index: 2; grid-column: 1; grid-row: 2; margin: 0; align-self: center; font-family: var(--display); font-weight: 700; line-height: .86; letter-spacing: -.035em; text-transform: uppercase; }
.origin-title__line { display: block; white-space: nowrap; font-size: clamp(52px, 7.2vw, 116px); }
.origin-title__line--one { color: var(--paper); }
.origin-title__line--two { color: transparent; -webkit-text-stroke: 1.4px rgba(246,245,242,.42); }
.origin-title__line--three { color: var(--lime); }
.origin-title__line--four { color: var(--lime); }
.origin-deck { pointer-events: auto; position: relative; z-index: 3; grid-column: 1; grid-row: 3; align-self: end; max-width: 520px; margin: 0 0 5vh; padding-left: 64px; color: rgba(255,255,255,.72); font-size: clamp(16px, 1.45vw, 22px); line-height: 1.5; }
.origin-deck::before { content: ""; position: absolute; top: .7em; left: 0; width: 43px; height: 2px; background: var(--lime); }
.origin-meta { position: absolute; z-index: 2; right: var(--pad); bottom: 36px; display: grid; gap: 8px; justify-items: end; color: rgba(255,255,255,.42); font: 600 10px/1 var(--mono); letter-spacing: .16em; text-align: right; text-transform: uppercase; }
.origin-meta span:last-child { color: rgba(255,255,255,.58); }
/* No live scene to drag when the component stood down. */
.origin-stage:has(odds-universe[data-reduced]) .origin-meta span:last-child,
.origin-stage:has(odds-universe[data-failed]) .origin-meta span:last-child { display: none; }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); color: rgba(255,255,255,.5); font: 600 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue i { position: relative; display: block; width: 42px; height: 1px; background: rgba(255,255,255,.25); }
.scroll-cue i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

/* Manifesto */
.manifesto { position: relative; min-height: 230vh; background: var(--paper); color: var(--ink); }
.manifesto-sticky { position: sticky; top: 0; min-height: 100svh; display: grid; grid-template-columns: minmax(280px,.7fr) minmax(460px,1.3fr); grid-template-rows: auto auto 1fr auto; gap: 20px 8vw; align-items: start; padding: calc(var(--header-h) + 46px) var(--pad) 42px; overflow: hidden; }
.manifesto-frame { position: absolute; inset: 20px; border: 2px solid var(--ink); pointer-events: none; }
.manifesto-frame::before, .manifesto-frame::after { content: ""; position: absolute; background: var(--ink); }
.manifesto-frame::before { top: 80px; left: -12px; width: calc(100% + 24px); height: 2px; }
.manifesto-frame::after { left: 46%; top: -12px; width: 2px; height: calc(100% + 24px); transform: rotate(4deg); }
.manifesto .eyebrow { grid-column: 1; position: relative; z-index: 2; }
.manifesto h2 { position: relative; z-index: 2; grid-column: 1; grid-row: 2 / 4; margin: 5vh 0 0; font: 900 clamp(54px, 7vw, 120px)/.86 var(--display); letter-spacing: -.075em; }
.manifesto-lines { position: relative; z-index: 2; grid-column: 2; grid-row: 2 / 4; display: grid; align-content: center; height: 100%; }
.manifesto-lines p { display: grid; grid-template-columns: 38px minmax(120px,.7fr) 1.4fr; align-items: baseline; gap: 14px; margin: 0; padding: 24px 0; border-bottom: 1px solid rgba(17,19,26,.22); }
.manifesto-lines span { font: 700 10px/1 var(--mono); }
.manifesto-lines b { font: 900 clamp(24px, 3vw, 48px)/1 var(--display); letter-spacing: -.04em; }
.manifesto-lines em { font-size: clamp(15px, 1.4vw, 21px); line-height: 1.3; font-style: normal; }
.manifesto-answer { position: relative; z-index: 2; grid-column: 2; margin: 0; max-width: 700px; padding: 12px 0 0 54px; font-size: clamp(16px,1.5vw,22px); line-height: 1.4; }
.manifesto-answer::before { content: "→"; position: absolute; left: 0; font-size: 30px; }
.manifesto-answer span { display: block; margin-bottom: 5px; font: 700 9px/1 var(--mono); letter-spacing: .13em; }

/* Product realms */
.realm { min-height: 180vh; --realm-accent: var(--white); --realm-accent-2: var(--white); --realm-bg: #090b12; background: var(--realm-bg); }
.realm-stage { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(520px,1.28fr); gap: clamp(28px,6vw,100px); align-items: center; }
.realm-stage--reverse { grid-template-columns: minmax(520px,1.28fr) minmax(320px,.72fr); }
.realm-stage--reverse .realm-copy { grid-column: 2; }
.realm-stage--reverse .realm-scene { grid-column: 1; grid-row: 1; }
.realm-index { position: absolute; top: calc(var(--header-h) + 18px); right: var(--pad); display: flex; align-items: baseline; gap: 8px; color: var(--realm-accent); font-family: var(--mono); }
.realm-index span { font-size: 30px; font-weight: 800; }
.realm-index b { color: rgba(255,255,255,.35); font-size: 10px; }
.realm-copy { position: relative; z-index: 3; max-width: 620px; }
.realm-copy .eyebrow { margin-bottom: 20px; color: var(--realm-accent); }
.realm-copy h2 { display: grid; width: max-content; max-width: 100%; margin: 0 0 30px; font: 900 clamp(67px, 8vw, 145px)/.72 var(--display); letter-spacing: -.08em; text-transform: uppercase; }
.realm-copy h2 span { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.75); }
.realm-copy h2 strong { color: var(--realm-accent); font-weight: inherit; }
.realm-thesis { max-width: 620px; margin: 0 0 18px; color: var(--white); font-size: clamp(23px, 2.3vw, 38px); font-weight: 750; line-height: 1.08; letter-spacing: -.035em; }
.realm-body { max-width: 570px; margin: 0 0 30px; color: rgba(255,255,255,.65); font-size: clamp(15px,1.25vw,19px); line-height: 1.58; }
.realm-proof { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 32px; padding: 0; list-style: none; }
.realm-proof li { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.63); font: 650 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.realm-proof span { color: var(--realm-accent); font-weight: 900; }
.realm-link { position: relative; display: inline-flex; align-items: center; gap: 28px; min-width: 215px; padding: 16px 18px; overflow: hidden; border: 1px solid var(--realm-accent); color: var(--realm-accent); text-decoration: none; font: 800 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.realm-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--realm-accent); transform: translateX(-102%); transition: transform .35s var(--ease-out); }
.realm-link i { margin-left: auto; font-style: normal; font-size: 18px; }
.realm-link:hover { color: #071006; }
.realm-link:hover::before { transform: none; }
.realm-scene { position: relative; z-index: 2; width: min(58vw, 900px); max-width: 100%; justify-self: center; }
.realm-scene > svg { width: 100%; height: auto; overflow: visible; filter: none; }
.realm-scene::before { content: ""; position: absolute; z-index: -1; inset: -13px 18px 22px -18px; border: 2px solid var(--realm-accent); opacity: .46; transform: rotate(-1.8deg); }
.realm-stage--reverse .realm-scene::before { transform: rotate(1.8deg); inset: 16px -17px -15px 20px; }
.scene-caption { position: absolute; right: 20px; bottom: -20px; margin: 0; padding: 10px 13px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 800 9px/1 var(--mono); letter-spacing: .06em; transform: rotate(-1.5deg); }
.scene-caption span { margin-right: 8px; color: #6b6670; }
.realm-stage--reverse .scene-caption { right: auto; left: 20px; transform: rotate(1.4deg); }

.realm--retire { --realm-accent: var(--gold); --realm-bg: #080d19; }
.realm--ops { --realm-accent: var(--cyan); --realm-bg: #050915; }
.realm--fit { --realm-accent: var(--lime); --realm-bg: #050807; }
.realm--family { --realm-accent: var(--coral); --realm-bg: #130a0f; }
.realm--myth { --realm-accent: #ffd46e; --realm-bg: #0c0719; }
.realm--path { --realm-accent: var(--teal); --realm-bg: #061215; }

/* OpsOdds has a wide brokerage screenshot. Keep its media track shrinkable so
   the real peek never invades the copy column at browser zoom / narrower laptops. */
.realm--ops .realm-stage--reverse { grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: clamp(32px, 4vw, 72px); }
.realm--ops .realm-scene { width: min(100%, 800px); max-width: 800px; min-width: 0; justify-self: start; overflow: visible; }
.realm--ops .realm-copy { min-width: 0; max-width: 570px; justify-self: end; }

/* Defensive guard for the pre-performance bundle, which injected a second
   `.real-peek` card into the same scene when stale JS was cached. */
.realm-scene--peek > .real-peek { display: none !important; }

/* Real product peeks — actual interfaces inside the illustrated universe. */
.realm-scene--peek { isolation: isolate; }
.product-peek { position: relative; margin: 0; --peek-accent: var(--realm-accent); }
.product-peek--ops { --peek-accent: #ff7b3f; }
.product-peek--myth { --peek-accent: #ffd46e; }
.product-peek__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--peek-accent) 65%, white 12%);
  border-radius: clamp(16px, 2.1vw, 30px);
  background: #05070a;
  box-shadow: 0 36px 90px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform: rotate(-.42deg);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.product-peek--retire .product-peek__frame,
.product-peek--myth .product-peek__frame { aspect-ratio: 16 / 9; }
.product-peek--ops .product-peek__frame { aspect-ratio: 1800 / 1137; background: #eeeae3; transform: rotate(.2deg); }
.product-peek--fit .product-peek__frame { aspect-ratio: 1800 / 1105; transform: rotate(-.3deg); }
.product-peek__frame--link { color: inherit; text-decoration: none; }
.product-peek__frame:hover,
.product-peek__frame:focus-visible { transform: rotate(0deg) translateY(-4px) scale(1.008); box-shadow: 0 44px 110px rgba(0,0,0,.52), 0 0 44px color-mix(in srgb, var(--peek-accent) 16%, transparent); }
.product-peek__media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #080b0e; transform: scale(1.002); transition: transform 1.5s var(--ease-out), filter .8s var(--ease-out); }
.product-peek__embed { position: absolute; inset: 0; border: 0; opacity: 0; background: #f3f0e8; transform: none; transition: opacity .35s ease; }
/* The vendored RetireOdds Stage includes a 44px playback bar below its 16:9
   canvas. Oversize the same-origin iframe and let the whimsical frame crop that
   chrome, matching the canonical RetireOdds landing presentation. */
.product-peek--retire .product-peek__embed { height: calc(100% + 44px); bottom: auto; }
.product-peek__embed-fallback { position: absolute; inset: 0; opacity: 1; transition: opacity .35s ease; }
.product-peek__frame.embed-ready .product-peek__embed { opacity: 1; }
.product-peek__frame.embed-ready .product-peek__embed-fallback { opacity: 0; }
.product-peek--retire .product-peek__veil { pointer-events: none; }
.product-peek--ops .product-peek__media,
.product-peek--fit .product-peek__media { object-fit: contain; }
.realm.is-active .product-peek__media:not(.product-peek__embed) { transform: scale(1.015); }
.product-peek__frame:hover .product-peek__media:not(.product-peek__embed) { transform: scale(1.025); }
.product-peek__veil,
.product-peek__frame::before,
.product-peek__frame::after { position: absolute; inset: 0; pointer-events: none; }
.product-peek__frame::before {
  content: "";
  z-index: 2;
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(255,255,255,.12) 6px, transparent 7px);
}
.product-peek__frame::after {
  content: "";
  z-index: 3;
  box-shadow: 0 0 90px rgba(0,0,0,.44) inset;
  background: linear-gradient(115deg, color-mix(in srgb, var(--peek-accent) 9%, transparent), transparent 26% 70%, rgba(0,0,0,.22));
}
.product-peek__veil { z-index: 4; background: linear-gradient(to bottom, rgba(4,6,10,.45), transparent 18% 72%, rgba(4,6,10,.7)); }
.product-peek--ops .product-peek__veil,
.product-peek--fit .product-peek__veil { background: linear-gradient(to bottom, rgba(4,6,10,.22), transparent 15% 78%, rgba(4,6,10,.5)); }
.product-peek__ticker,
.product-peek__badge,
.product-peek__cta { position: absolute; z-index: 6; font-family: var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.product-peek__ticker { top: 14px; left: 14px; max-width: calc(100% - 28px); padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--peek-accent) 55%, transparent); background: rgba(4,7,11,.72); color: rgba(255,255,255,.76); font-size: clamp(7px, .62vw, 10px); line-height: 1.2; backdrop-filter: none; transform: rotate(-.6deg); }
.product-peek__ticker b { color: var(--peek-accent); }
.product-peek__badge { left: 17px; bottom: 17px; padding: 8px 10px; border-left: 3px solid var(--peek-accent); background: rgba(4,7,11,.76); color: var(--white); font-size: clamp(7px, .62vw, 10px); backdrop-filter: none; }
.product-peek__cta { right: 16px; bottom: 16px; padding: 10px 12px; border: 1px solid var(--peek-accent); background: var(--peek-accent); color: #071006; font-size: clamp(7px, .63vw, 10px); font-weight: 900; text-decoration: none; transform: rotate(.65deg); transition: transform .3s var(--ease-out); }
.product-peek__cta:hover { transform: rotate(0deg) translate(-2px,-2px); }
.product-peek__tape { position: absolute; z-index: 7; top: -9px; width: 82px; height: 24px; background: color-mix(in srgb, var(--peek-accent) 48%, #f3ead2); opacity: .72; box-shadow: 0 1px 1px rgba(0,0,0,.2); pointer-events: none; }
.product-peek__tape--left { left: 7%; transform: rotate(-7deg); }
.product-peek__tape--right { right: 7%; transform: rotate(6deg); }
.product-peek__orbit { position: absolute; z-index: -2; border: 1px dashed color-mix(in srgb, var(--peek-accent) 42%, transparent); border-radius: 50%; pointer-events: none; }
.product-peek__orbit--one { width: 46%; aspect-ratio: 1; right: -11%; top: -18%; animation: peekOrbit 28s linear infinite; }
.product-peek__orbit--two { width: 31%; aspect-ratio: 1; left: -10%; bottom: -18%; animation: peekOrbit 22s linear infinite reverse; }
.product-peek::after { content: "✦"; position: absolute; z-index: 8; right: -12px; top: 18%; color: var(--peek-accent); font-size: clamp(23px, 3vw, 48px); line-height: 1; text-shadow: 0 0 24px color-mix(in srgb, var(--peek-accent) 65%, transparent); animation: peekSpark 3.8s ease-in-out infinite; pointer-events: none; }
.product-peek--ops::after { content: "⌁"; }
.product-peek--fit::after { content: "+"; }
.product-peek--myth::after { content: "✧"; }
@keyframes peekOrbit { to { transform: rotate(360deg); } }
@keyframes peekSpark { 0%,100% { transform: rotate(-8deg) scale(.88); opacity: .48; } 50% { transform: rotate(8deg) scale(1.12); opacity: 1; } }

/* Scene base */
.realm-scene svg text { font-family: var(--mono); }
.scene-retire .retire-sun--halo { fill: none; stroke: rgba(255,209,105,.3); stroke-width: 1; }
.scene-retire .retire-mountain--far { fill: #162d35; opacity: .8; }
.scene-retire .retire-mountain--near { fill: #0d1b24; }
.projection-grid { fill: none; stroke: rgba(255,255,255,.11); stroke-width: 1; }
.projection-paths, .projection-median { fill: none; stroke: rgba(126,214,255,.28); stroke-width: 1.2; }
.projection-median { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.retire-marker circle:first-child { fill: rgba(255,209,105,.13); stroke: var(--gold); }
.retire-marker circle:nth-child(2) { fill: var(--gold); }
.retire-marker text, .retire-year text { fill: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .1em; text-anchor: middle; }
.retire-score circle { fill: rgba(5,9,15,.88); stroke: rgba(255,255,255,.16); }
.retire-score path { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 82 100; }
.retire-score text { fill: var(--white); text-anchor: middle; font-size: 29px; font-weight: 800; }
.retire-score text:last-child { fill: rgba(255,255,255,.55); font-size: 8px; font-weight: 600; letter-spacing: .1em; }

.ops-grid { fill: none; stroke: rgba(103,220,255,.055); }
.ops-tape text { fill: rgba(104,221,255,.48); font-size: 12px; letter-spacing: .07em; }
.ops-candles path, .ops-candles rect { fill: #ff8068; stroke: #ff8068; stroke-width: 2; }
.ops-candles rect.up { fill: none; stroke: var(--cyan); }
.ops-trend { fill: none; stroke: url(#opsSignal); stroke-width: 5; stroke-linecap: round; }
.ops-level { stroke: #ff8068; stroke-width: 1; stroke-dasharray: 6 7; }
.ops-level-label { fill: #ff9d8d; font-size: 9px; }
.ops-scanner rect { fill: none; stroke: rgba(103,220,255,.26); stroke-width: 1.5; }
.ops-scanner path { stroke: var(--cyan); stroke-width: 2; }
.ops-scanner text { fill: var(--cyan); font-size: 9px; letter-spacing: .12em; }
.ops-decision circle { fill: rgba(4,8,18,.9); stroke: rgba(255,255,255,.18); }
.ops-decision circle:nth-child(2) { fill: none; stroke: rgba(103,220,255,.18); }
.ops-decision path { fill: none; stroke: url(#opsSignal); stroke-width: 7; stroke-dasharray: 72 100; stroke-linecap: round; }
.ops-decision text { fill: var(--white); text-anchor: middle; font-weight: 800; font-size: 16px; }
.ops-decision text:nth-of-type(2) { font-size: 36px; fill: var(--cyan); }
.ops-decision text:last-of-type { font-size: 7px; fill: rgba(255,255,255,.54); letter-spacing: .08em; }
.ops-rule rect { fill: rgba(5,10,20,.88); stroke: rgba(255,255,255,.14); }
.ops-rule circle { fill: var(--lime); }
.ops-rule text { fill: var(--white); font-size: 10px; font-weight: 700; }
.ops-rule text:last-child { fill: rgba(255,255,255,.48); font-size: 8px; }

.fit-rings { fill: none; stroke: rgba(202,255,88,.24); stroke-width: 1.2; stroke-dasharray: 4 7; }
.fit-body circle, .fit-body > path:first-of-type { fill: none; stroke: rgba(255,255,255,.54); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fit-muscle { fill: rgba(202,255,88,.12); stroke: var(--lime); stroke-width: 1.5; }
.fit-metric rect { fill: rgba(14,20,16,.82); stroke: rgba(202,255,88,.3); }
.fit-metric text { fill: rgba(255,255,255,.6); font-size: 10px; letter-spacing: .1em; }
.fit-metric text:nth-of-type(2) { fill: var(--white); font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.fit-metric tspan { fill: var(--lime); font-size: 13px; }
.fit-metric path { stroke: rgba(255,255,255,.14); stroke-width: 5; stroke-linecap: round; }
.fit-metric path.fit-meter { stroke: var(--lime); }
.fit-metric circle { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 5; }
.fit-metric--train path { fill: none; stroke: var(--lime); stroke-dasharray: 76 100; }
.fit-pulse path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fit-label { fill: rgba(255,255,255,.44); font-size: 9px; letter-spacing: .14em; }

.family-sun circle { fill: rgba(255,198,107,.13); stroke: #ffc66b; }
.family-sun path { stroke: #ffc66b; stroke-width: 2; stroke-linecap: round; }
.family-home { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.65); stroke-width: 3; stroke-linejoin: round; }
.family-people circle, .family-people path { fill: rgba(255,125,99,.13); stroke: #ff9b86; stroke-width: 2.4; }
.family-clock circle { fill: rgba(18,7,12,.34); stroke: rgba(255,255,255,.22); stroke-width: 2; }
.family-clock > path { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; stroke-linecap: round; }
.family-clock .family-hour { stroke: #ffc66b; stroke-width: 7; }
.family-clock .family-minute { stroke: #ff8fc8; stroke-width: 5; }
.family-ribbon { fill: none; stroke-width: 7; stroke-linecap: round; }
.family-tasks circle { fill: #29111c; stroke: var(--coral); stroke-width: 2; }
.family-tasks path { fill: none; stroke: #ffc66b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.family-tasks text { fill: rgba(255,255,255,.5); font-size: 8px; text-anchor: middle; letter-spacing: .1em; }
.family-timeback rect { fill: rgba(255,198,107,.12); stroke: #ffc66b; }
.family-timeback text { fill: #ffe0a8; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.family-timeback text:last-child { fill: rgba(255,255,255,.5); font-size: 8px; }

.myth-moon { fill: #ffd980; opacity: .72; }
.myth-cloud { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 2; }
.myth-hills--far { fill: #291b48; }
.myth-hills--near { fill: #130f29; }
.myth-city path { fill: rgba(255,214,112,.06); stroke: rgba(255,224,150,.32); stroke-width: 2; }
.myth-spire > path { fill: rgba(255,211,105,.1); stroke: #ffdc7d; stroke-width: 2; }
.myth-spire ellipse { fill: none; stroke: #ffecb4; }
.myth-hero circle, .myth-hero > path { fill: #090819; stroke: #ffd778; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.myth-hero .myth-cape { fill: rgba(169,137,255,.3); stroke: var(--violet); }
.myth-lumen-count rect { fill: rgba(12,7,25,.72); stroke: rgba(255,215,120,.42); }
.myth-lumen-count circle { fill: #ffd46e; }
.myth-lumen-count text { fill: rgba(255,255,255,.55); font-size: 9px; letter-spacing: .1em; }
.myth-lumen-count text:last-child { fill: #ffdf8e; font-size: 16px; font-weight: 800; }
.myth-path { fill: none; stroke: #ffd46e; stroke-width: 2; stroke-dasharray: 3 8; }
.myth-runes text { fill: rgba(255,220,132,.52); font-size: 8px; letter-spacing: .15em; }

.path-sun { fill: rgba(229,255,114,.3); stroke: #e6ff72; }
.path-contours { fill: none; stroke: rgba(124,241,218,.13); stroke-width: 1.2; }
.path-mountains--far { fill: #1c4b48; }
.path-mountains--near { fill: #0c2729; }
.path-route { fill: none; stroke: rgba(124,241,218,.4); stroke-width: 2; stroke-dasharray: 4 8; }
.path-route--main { stroke-width: 7; stroke-dasharray: none; stroke-linecap: round; }
.path-node circle { fill: #071617; stroke: var(--teal); stroke-width: 2; }
.path-node text { fill: var(--teal); font-size: 9px; letter-spacing: .1em; }
.path-node--north path { fill: #e6ff72; }
.path-compass circle { fill: rgba(6,18,21,.6); stroke: rgba(124,241,218,.4); stroke-width: 1.5; }
.path-compass path { fill: none; stroke: #e6ff72; stroke-width: 2; }
.path-compass text { fill: rgba(255,255,255,.54); font-size: 8px; letter-spacing: .12em; }
.path-label rect { fill: rgba(5,17,19,.76); stroke: rgba(124,241,218,.4); }
.path-label text { fill: #d8fff7; font-size: 10px; font-weight: 700; letter-spacing: .06em; }

/* Mental wealth */
.chapter--mental { min-height: 210vh; background: radial-gradient(circle at 50% 48%, rgba(138,206,255,.1), transparent 36%), #07080d; }
.mental-stage { display: grid; grid-template-columns: minmax(340px,.8fr) minmax(500px,1.2fr); grid-template-rows: auto auto 1fr auto; align-items: center; gap: 18px 6vw; }
.mental-stage .eyebrow { grid-column: 1; align-self: end; color: var(--lime); }
.mental-stage h2 { grid-column: 1; margin: 0; font: 900 clamp(58px,7vw,126px)/.83 var(--display); letter-spacing: -.075em; }
.mental-stage h2 span { color: transparent; -webkit-text-stroke: 1.3px rgba(255,255,255,.72); }
.mental-deck { grid-column: 1; max-width: 620px; align-self: start; margin: 10px 0 0; color: rgba(255,255,255,.66); font-size: clamp(17px,1.5vw,23px); line-height: 1.5; }
.mental-bloom { grid-column: 2; grid-row: 1 / 5; width: min(68vw, 850px); justify-self: center; }
.mental-bloom svg { width: 100%; height: auto; overflow: visible; }
.mental-orbits { fill: none; stroke: rgba(255,255,255,.11); stroke-width: 1; stroke-dasharray: 4 9; }
.mental-petal { stroke-width: 1.4; stroke-opacity: .52; }
.mental-petal--one { stroke: var(--gold); }
.mental-petal--two { stroke: var(--lime); }
.mental-petal--three { stroke: var(--coral); }
.mental-petal--four { stroke: var(--violet); }
.mental-face path { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 2; stroke-linecap: round; }
.mental-words text { fill: rgba(255,255,255,.5); font: 700 10px/1 var(--mono); letter-spacing: .16em; }
.mental-note { grid-column: 1; align-self: end; margin: 0 0 6vh; padding-left: 56px; color: rgba(255,255,255,.5); font: 600 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mental-note::before { content: ""; position: absolute; width: 38px; height: 1px; margin: 8px 0 0 -56px; background: var(--lime); }
.mental-note b { color: var(--white); }

/* Atlas */
.atlas { position: relative; min-height: 1250px; padding: 130px var(--pad); overflow: hidden; background: var(--paper); color: var(--ink); }
.atlas::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: radial-gradient(var(--ink) .8px, transparent .8px); background-size: 8px 8px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.atlas-intro { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px 8vw; align-items: end; max-width: 1400px; margin: 0 auto 75px; }
.atlas-intro .eyebrow { grid-column: 1; }
.atlas-intro h2 { grid-column: 1; margin: 0; font: 900 clamp(62px,8vw,138px)/.8 var(--display); letter-spacing: -.08em; }
.atlas-intro > p:last-child { grid-column: 2; max-width: 460px; margin: 0 0 5px; font-size: clamp(17px,1.5vw,22px); line-height: 1.45; }
.atlas-map { position: relative; z-index: 2; width: min(100%, 1250px); height: 730px; margin: 0 auto; }
.atlas-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-lines path, .atlas-lines circle { fill: none; stroke: rgba(17,19,26,.28); stroke-width: 1.5; stroke-dasharray: 4 7; }
.atlas-core { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 190px; aspect-ratio: 1; transform: translate(-50%,-50%) rotate(-4deg); border: 3px solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 14px 14px 0 var(--ink); }
.atlas-core span { align-self: end; font: 900 43px/.8 var(--display); letter-spacing: -.06em; }
.atlas-core b { align-self: start; font: 800 12px/1 var(--mono); letter-spacing: .18em; }
.atlas-core small { position: absolute; bottom: 28px; font: 700 7px/1 var(--mono); letter-spacing: .13em; }
.atlas-door { position: absolute; z-index: 4; display: grid; gap: 7px; width: clamp(220px, 24vw, 310px); min-height: 126px; padding: 18px 48px 18px 18px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 8px 8px 0 var(--ink); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s; }
.atlas-door:hover { transform: translate(-4px,-4px) rotate(0deg); box-shadow: 13px 13px 0 var(--ink); background: var(--door-color); }
.atlas-door span { font: 700 8px/1 var(--mono); letter-spacing: .12em; }
.atlas-door b { font: 900 clamp(27px,2.7vw,39px)/.9 var(--display); letter-spacing: -.045em; }
.atlas-door small { max-width: 220px; font-size: 12px; line-height: 1.3; }
.atlas-door i { position: absolute; right: 16px; top: 16px; font-size: 20px; font-style: normal; }
.atlas-door--retire { --door-color: #ffd169; left: 4%; top: 2%; transform: rotate(-3deg); }
.atlas-door--ops { --door-color: #69ddff; left: 38%; top: 0; transform: rotate(2deg); }
.atlas-door--fit { --door-color: #caff58; right: 2%; top: 9%; transform: rotate(3deg); }
.atlas-door--family { --door-color: #ff886e; left: 0; bottom: 5%; transform: rotate(2.5deg); }
.atlas-door--myth { --door-color: #c0a5ff; left: 38%; bottom: 0; transform: rotate(-2deg); }
.atlas-door--path { --door-color: #76eed7; right: 0; bottom: 8%; transform: rotate(-3deg); }

/* Epilogue */
.epilogue { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 5vw; padding: 130px var(--pad); overflow: hidden; background: #07080d; }
.epilogue-panel { position: relative; z-index: 2; }
.epilogue-panel > p { margin: 0 0 24px; color: var(--lime); font: 700 10px/1 var(--mono); letter-spacing: .16em; }
.epilogue h2 { margin: 0 0 44px; font: 900 clamp(74px,10vw,170px)/.78 var(--display); letter-spacing: -.08em; }
.epilogue-link { display: inline-flex; gap: 30px; align-items: center; padding: 15px 18px; border-bottom: 2px solid var(--lime); color: var(--lime); text-decoration: none; font: 800 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.epilogue-link i { font-size: 18px; font-style: normal; }
.epilogue-orb { position: relative; justify-self: center; display: grid; place-items: center; width: min(40vw, 520px); aspect-ratio: 1; }
.epilogue-orb span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.epilogue-orb span:nth-child(2) { inset: 15%; border-color: var(--cyan); border-style: dashed; }
.epilogue-orb span:nth-child(3) { inset: 30%; border-color: var(--lime); }
.epilogue-orb b { font: 900 clamp(100px,15vw,240px)/1 var(--display); color: var(--lime); text-shadow: 18px 18px 0 rgba(105,221,255,.2); }

.site-footer { min-height: 100px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; padding: 24px var(--pad); border-top: 1px solid var(--line); color: rgba(255,255,255,.45); font: 600 9px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.site-footer p { margin: 0; }
.site-footer p:last-child { justify-self: end; }
.wordmark--footer { color: var(--white); }

@media (max-width: 1120px) {
  /* Below the two-column threshold the copy stacks at the top and the scene
     takes the space underneath it — dimming it behind the text instead just
     buried the planets under the scrim. */
  .origin-stage { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-items: start; padding-top: 118px; }
  .origin-title { grid-column: 1; grid-row: 1; align-self: start; }
  .origin-deck { grid-column: 1; grid-row: 2; align-self: start; max-width: 560px; margin: 26px 0 0; }
  .origin-meta { position: static; grid-column: 1; grid-row: 3; align-self: start; margin: 18px 0 0; justify-items: start; text-align: left; }
  .origin-universe { left: -8%; right: -8%; top: auto; bottom: 0; height: 52%; opacity: .85; }
  .origin-scrim { background: linear-gradient(180deg, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .9) 32%, rgba(var(--bg-rgb), 0) 64%); }
  .realm-stage, .realm-stage--reverse { grid-template-columns: 1fr; align-content: center; gap: 30px; }
  .realm-stage--reverse .realm-copy, .realm-stage--reverse .realm-scene { grid-column: 1; }
  .realm-stage--reverse .realm-scene { grid-row: auto; }
  .realm--ops .realm-stage--reverse { grid-template-columns: 1fr; gap: 30px; }
  .realm--ops .realm-scene { width: min(92vw, 760px); max-width: 760px; justify-self: center; }
  .realm--ops .realm-copy { max-width: 820px; justify-self: stretch; }
  .realm-copy { max-width: 820px; }
  .realm-copy h2 { font-size: clamp(62px,12vw,130px); }
  .realm-scene { width: min(92vw, 760px); }
  .mental-stage { grid-template-columns: 1fr; align-content: center; }
  .mental-stage .eyebrow, .mental-stage h2, .mental-deck, .mental-note { grid-column: 1; }
  .mental-bloom { grid-column: 1; grid-row: 3; width: min(86vw,680px); margin: -5vh auto; }
  .mental-note { margin: 0; }
}

@media (max-width: 820px) {
  :root { --header-h: 68px; --pad: 20px; }
  .site-header { grid-template-columns: 1fr auto; }
  .header-thesis { display: none; }
  .header-link { padding: 9px 12px; }
  .header-link span { display: none; }
  .chapter-rail { display: none; }
  .chapter, .realm, .chapter--mental { min-height: auto; }
  .chapter-stage, .manifesto-sticky { position: relative; min-height: auto; }
  .chapter-stage { padding-top: 110px; padding-bottom: 90px; }
  .origin-stage { min-height: 100svh; display: flex; flex-direction: column; align-items: stretch; }
  .origin-kicker { top: 88px; }
  .origin-title { margin-top: 70px; }
  .origin-title__line { font-size: clamp(44px, 13.5vw, 84px); }
  .origin-title__line--four { white-space: normal; }
  .origin-deck { padding-left: 42px; font-size: 16px; }
  .origin-deck::before { width: 28px; }
  .origin-universe { left: -12%; right: -12%; top: auto; bottom: 0; height: 46%; opacity: .68; }
  .origin-universe .ou-labels { display: none; } /* bodies project too close together to label legibly here */
  .origin-scrim { background: linear-gradient(180deg, rgba(var(--bg-rgb), .97) 0%, rgba(var(--bg-rgb), .93) 36%, rgba(var(--bg-rgb), 0) 66%); }
  .origin-meta { position: static; grid-column: 1; margin: 14px 0 0; justify-items: start; text-align: left; }
  .origin-meta span:last-child { display: none; }
  .scroll-cue { display: none; }
  .manifesto { min-height: auto; }
  .manifesto-sticky { display: block; padding: 118px 32px 90px; }
  .manifesto-frame { inset: 12px; }
  .manifesto-frame::after { display: none; }
  .manifesto h2 { margin: 45px 0 50px; font-size: clamp(50px,15vw,80px); }
  .manifesto-lines p { grid-template-columns: 28px 1fr; gap: 8px; }
  .manifesto-lines em { grid-column: 2; }
  .manifesto-answer { margin-top: 38px; padding-left: 42px; }
  .realm-stage { display: flex; flex-direction: column; align-items: stretch; padding-top: 118px; }
  .realm-index { top: 84px; }
  .realm-copy h2 { font-size: clamp(62px,22vw,108px); }
  .realm-thesis { font-size: 27px; }
  .realm-scene { order: 2; width: 100%; }
  .realm-stage--reverse .realm-scene { order: 2; }
  .realm-scene::before { inset: -7px 10px 14px -9px; }
  .scene-caption { right: 9px; bottom: -15px; max-width: 80%; line-height: 1.3; }
  .product-peek__ticker { top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 7px 8px; }
  .product-peek__badge { left: 9px; bottom: 9px; max-width: 62%; padding: 7px 8px; }
  .product-peek__cta { right: 9px; bottom: 9px; padding: 8px 9px; }
  .product-peek__tape { width: 58px; height: 18px; }
  .product-peek::after { right: -6px; }
  .mental-stage { display: flex; flex-direction: column; align-items: stretch; }
  .mental-stage h2 { font-size: clamp(54px,17vw,94px); }
  .mental-bloom { width: 115vw; margin: -40px -8vw; }
  .mental-note { margin-top: 25px; }
  .atlas { min-height: 1440px; padding-top: 100px; }
  .atlas-intro { display: block; margin-bottom: 40px; }
  .atlas-intro h2 { margin: 18px 0 24px; font-size: clamp(57px,17vw,90px); }
  .atlas-map { height: 1040px; }
  .atlas-lines { display: none; }
  .atlas-core { top: 50%; width: 148px; }
  .atlas-door { width: min(75vw, 300px); min-height: 115px; }
  .atlas-door--retire { left: 0; top: 0; }
  .atlas-door--ops { right: 0; left: auto; top: 17%; }
  .atlas-door--fit { left: 0; right: auto; top: 34%; }
  .atlas-door--family { right: 0; left: auto; bottom: 34%; }
  .atlas-door--myth { left: 0; bottom: 17%; }
  .atlas-door--path { right: 0; bottom: 0; }
  .epilogue { grid-template-columns: 1fr; min-height: 850px; padding-top: 110px; }
  .epilogue h2 { font-size: clamp(68px,20vw,110px); }
  .epilogue-orb { position: absolute; right: -28%; bottom: -5%; width: 90vw; opacity: .43; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer p:nth-child(2) { display: none; }
}

@media (max-width: 460px) {
  .wordmark__sigil { width: 32px; height: 32px; }
  .origin-kicker span:last-child { display: none; }
  .realm-proof { display: grid; grid-template-columns: 1fr; }
  .realm-proof li { width: max-content; }
  .realm-link { width: 100%; }
  .atlas-door { width: 83vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cosmos { display: none; }
}

/* Motion layer — scroll-driven graphic-novel choreography */
:root {
  --pointer-x: 0;
  --pointer-y: 0;
}

.magnetic { transform: translate(var(--mag-x, 0), var(--mag-y, 0)); transition: transform .25s var(--ease-out), color .25s, background .25s, border-color .25s; }

body[data-ink="paper"] .site-header { color: var(--ink); }
body[data-ink="paper"] .site-header.is-scrolled { background: rgba(244,241,232,.84); border-color: rgba(17,19,26,.14); }
body[data-ink="paper"] .site-header .wordmark__sigil { color: var(--ink); }
body[data-ink="paper"] .site-header .wordmark__text small,
body[data-ink="paper"] .site-header .header-thesis { color: rgba(17,19,26,.55); }
body[data-ink="paper"] .site-header .header-link { border-color: rgba(17,19,26,.4); }
body[data-ink="paper"] .chapter-rail a { color: rgba(17,19,26,.43); }
body[data-ink="paper"] .chapter-rail a:hover,
body[data-ink="paper"] .chapter-rail a[aria-current="true"] { color: var(--ink); }
body[data-ink="paper"] .paper-noise { mix-blend-mode: normal; opacity: .022; }

.motion-ready .motion-reveal { opacity: 0; transform: translateY(24px) rotate(.15deg); transition: opacity .75s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--reveal-order, 0) * 55ms); }
.motion-ready .motion-reveal.is-visible { opacity: 1; transform: none; }

@keyframes orbitClockwise { to { transform: rotate(360deg); } }
@keyframes orbitCounter { to { transform: rotate(-360deg); } }
@keyframes pulseHalo { 0%,100% { opacity: .25; transform: scale(.92); } 50% { opacity: .75; transform: scale(1.08); } }
@keyframes dashFlow { to { stroke-dashoffset: -1; } }
@keyframes nodeFloat { 0%,100% { translate: 0 -4px; } 50% { translate: 0 7px; } }
@keyframes starTwinkle { 0%,100% { opacity: .2; } 50% { opacity: .95; } }
@keyframes tickerTape { to { transform: translateX(-900px); } }
@keyframes scannerSweep { 0%,100% { transform: translateY(-140px); opacity: 0; } 10%,90% { opacity: 1; } 50% { transform: translateY(285px); } }
@keyframes bodyTurn { 0%,100% { transform: rotateY(-10deg) rotateX(1deg); } 50% { transform: rotateY(10deg) rotateX(-1deg); } }
@keyframes scanBody { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(396px); opacity: 0; } }
@keyframes ribbonMove { to { stroke-dashoffset: -90; } }
@keyframes clockHour { to { transform: rotate(360deg); } }
@keyframes clockMinute { to { transform: rotate(2160deg); } }
@keyframes cloudDrift { 0%,100% { transform: translateX(-15px); } 50% { transform: translateX(20px); } }
@keyframes lumenPulse { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes beamBreathe { 0%,100% { opacity: .22; } 50% { opacity: .9; } }
@keyframes capeLift { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg); } }
@keyframes compassSpin { to { transform: rotate(360deg); } }
@keyframes routeMarch { to { stroke-dashoffset: -120; } }
@keyframes petalBreathe { 0%,100% { opacity: .52; } 50% { opacity: .95; } }
@keyframes cueMove { 0% { transform: translateX(-22px); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateX(18px); opacity: 0; } }
@keyframes orbPulse { 0%,100% { opacity: .82; } 50% { opacity: 1; } }

.origin-title__line { transform-origin: 0 50%; }
.origin-title__line--one { transform: translate3d(calc(var(--p, 0) * -5vw), calc(var(--p, 0) * -3vh), 0) scale(calc(1 - var(--p, 0) * .06)); }
.origin-title__line--two { transform: translate3d(calc(var(--p, 0) * 8vw), 0, 0); }
.origin-title__line--three { transform: translate3d(calc(var(--p, 0) * -2vw), calc(var(--p, 0) * 3vh), 0) scale(calc(1 + var(--p, 0) * .035)); }
.origin-title__line--four { transform: translate3d(calc(var(--p, 0) * 3vw), calc(var(--p, 0) * 5vh), 0) scale(calc(1 + var(--p, 0) * .025)); }
.origin-deck { transform: translateY(calc(var(--p, 0) * -24px)); opacity: calc(1 - var(--p, 0) * .72); }
.scroll-cue i::before { content: ""; position: absolute; top: -1px; left: 0; width: 15px; height: 3px; background: var(--lime); animation: cueMove 1.8s var(--ease-in-out) infinite; }

.manifesto h2 { transform: translate3d(calc(var(--p, 0) * -3vw), calc(var(--p, 0) * -3vh), 0) rotate(calc(var(--p, 0) * -1deg)); }
.manifesto-frame::after { transform: rotate(calc(4deg + var(--p, 0) * -8deg)); }
.manifesto-lines p { opacity: calc(.14 + var(--line-p, 0) * .86); transform: translateX(calc((1 - var(--line-p, 0)) * 70px)); }
.manifesto-lines p b { color: color-mix(in srgb, var(--ink) calc(38% + var(--line-p, 0) * 62%), transparent); }
.manifesto-answer { opacity: clamp(0, calc((var(--p, 0) - .52) * 4), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p, 0) - .52) * 4), 1)) * 25px)); }

.realm-copy { transform: translate3d(0, calc(var(--scene-drift, 0px) * -.18), 0); }
.realm-scene { transform: perspective(1300px) translate3d(calc(var(--pointer-x) * 7px), calc(var(--scene-drift, 0px) + var(--pointer-y) * 6px), 0) rotateX(calc(var(--pointer-y) * -1.15deg)) rotateY(calc(var(--pointer-x) * 1.4deg)) scale(calc(.94 + var(--enter, 1) * .06 - (1 - var(--leave, 1)) * .035)); transform-style: preserve-3d; opacity: calc(.32 + var(--enter, 1) * .68); }
.realm-stage--reverse .realm-scene { transform: perspective(1300px) translate3d(calc(var(--pointer-x) * -7px), calc(var(--scene-drift, 0px) + var(--pointer-y) * 6px), 0) rotateX(calc(var(--pointer-y) * -1.15deg)) rotateY(calc(var(--pointer-x) * -1.4deg)) scale(calc(.94 + var(--enter, 1) * .06 - (1 - var(--leave, 1)) * .035)); }
.realm-scene::before { transition: inset .6s var(--ease-out), transform .6s var(--ease-out); }
.realm.is-active .realm-scene::before { inset: -19px 25px 28px -24px; }

.retire-stars circle, .myth-stars circle { animation: starTwinkle var(--star-speed, 5s) ease-in-out var(--star-delay, 0s) infinite; }
.retire-sun--halo { transform-box: fill-box; transform-origin: center; animation: pulseHalo 5.5s ease-in-out infinite; }
.retire-sun:not(.retire-sun--halo) { transform: translateY(calc(var(--p, 0) * -42px)); }
.projection-cone { opacity: calc(.22 + var(--p, 0) * .72); }
.projection-paths path { will-change: auto; }
.projection-median { will-change: auto; }
.retire-score { transform-box: fill-box; transform-origin: center; transform: scale(calc(.86 + var(--p, 0) * .14)); }

.ops-tape { animation: tickerTape 20s linear infinite; }
.ops-scanner path { animation: scannerSweep 5s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
.ops-trend { will-change: auto; }
.ops-candles > g { opacity: calc(.25 + var(--p, 0) * .75); transform-box: fill-box; transform-origin: bottom; transform: scaleY(calc(.4 + var(--p, 0) * .6)); }
.ops-decision { transform-box: fill-box; transform-origin: center; transform: rotate(calc((1 - var(--p, 0)) * -12deg)) scale(calc(.78 + var(--p, 0) * .22)); }
.ops-decision path { animation: ribbonMove 4s linear infinite; }

.fit-body { transform-box: fill-box; transform-origin: center; animation: bodyTurn 8s ease-in-out infinite; }
.fit-scan { animation: scanBody 4.8s var(--ease-in-out) infinite; }
.fit-rings ellipse { transform-box: fill-box; transform-origin: center; transform: scale(calc(.78 + var(--p, 0) * .22)); }
.fit-rings ellipse:nth-child(2) { transition-delay: .08s; }
.fit-rings ellipse:nth-child(3) { transition-delay: .16s; }
.fit-rings ellipse:nth-child(4) { transition-delay: .24s; }
.fit-pulse path { stroke-dasharray: 12 8; animation: ribbonMove 4s linear infinite; }
.fit-muscle { opacity: calc(.22 + var(--p, 0) * .78); }

.family-hour, .family-minute { transform-box: fill-box; transform-origin: 50% 100%; }
.family-hour { animation: clockHour 28s linear infinite; }
.family-minute { animation: clockMinute 28s linear infinite; }
.family-ribbon { stroke-dasharray: 12 9; animation: ribbonMove 3.8s linear infinite; }
.family-tasks > g { animation: nodeFloat 4.5s ease-in-out infinite; }
.family-tasks > g:nth-child(2) { animation-delay: -1.1s; }
.family-tasks > g:nth-child(3) { animation-delay: -2.2s; }
.family-tasks > g:nth-child(4) { animation-delay: -3.3s; }
.family-timeback { transform-box: fill-box; transform-origin: center; animation: pulseHalo 5s ease-in-out infinite; }
.family-home { transform: translateY(calc((1 - var(--p, 0)) * 28px)); opacity: calc(.3 + var(--p, 0) * .7); }

.myth-cloud--one { animation: cloudDrift 14s ease-in-out infinite; }
.myth-cloud--two { animation: cloudDrift 19s ease-in-out -6s infinite reverse; }
.myth-lumen { transform-box: fill-box; transform-origin: center; animation: lumenPulse 4s ease-in-out infinite; }
.myth-beam { animation: beamBreathe 4s ease-in-out infinite; }
.myth-cape { transform-box: fill-box; transform-origin: 80% 15%; animation: capeLift 3.2s ease-in-out infinite; }
.myth-path { animation: ribbonMove 3s linear infinite; }
.myth-spire { transform: translateY(calc((1 - var(--p, 0)) * 38px)); opacity: calc(.32 + var(--p, 0) * .68); }

.path-compass { transform-box: fill-box; transform-origin: center; }
.path-compass > circle:nth-child(2) { transform-box: fill-box; transform-origin: center; animation: compassSpin 30s linear infinite; stroke-dasharray: 4 7; }
.path-route:not(.path-route--main) { animation: routeMarch 5s linear infinite; }
.path-route--main { will-change: auto; }
.path-node { opacity: calc(.28 + var(--p, 0) * .72); transform-box: fill-box; transform-origin: center; animation: pulseHalo 4.8s ease-in-out infinite; }
.path-node:nth-of-type(2) { animation-delay: -.8s; }
.path-node:nth-of-type(3) { animation-delay: -1.6s; }
.path-node:nth-of-type(4) { animation-delay: -2.4s; }
.path-sun { transform-box: fill-box; transform-origin: center; animation: pulseHalo 6s ease-in-out infinite; }

.mental-bloom { transform: perspective(1200px) translate3d(calc(var(--pointer-x) * 10px), calc(var(--scene-drift, 0px) + var(--pointer-y) * 8px), 0) rotate(calc(var(--p, 0) * 8deg)) scale(calc(.82 + var(--enter, 1) * .18)); }
.mental-orbits circle { transform-box: fill-box; transform-origin: center; }
.mental-orbits circle:nth-child(1) { animation: orbitClockwise 56s linear infinite; }
.mental-orbits circle:nth-child(2) { animation: orbitCounter 42s linear infinite; }
.mental-orbits circle:nth-child(3) { animation: orbitClockwise 34s linear infinite; }
.mental-petal { transform-box: fill-box; transform-origin: center; opacity: calc(.22 + var(--p, 0) * .78); animation: petalBreathe 5.5s ease-in-out infinite; }
.mental-petal--two { animation-delay: -1.3s; }
.mental-petal--three { animation-delay: -2.6s; }
.mental-petal--four { animation-delay: -3.9s; }
.mental-center-glow { transform-box: fill-box; transform-origin: center; animation: lumenPulse 5.2s ease-in-out infinite; }

.atlas-core { transform: translate(-50%,-50%) rotate(calc(-8deg + var(--p, 0) * 8deg)) scale(calc(.82 + var(--p, 0) * .18)); }
.atlas-lines circle { transform-box: fill-box; transform-origin: center; }
.atlas-lines circle:first-of-type { animation: orbitClockwise 38s linear infinite; }
.atlas-lines circle:last-of-type { animation: orbitCounter 56s linear infinite; }
.atlas-lines path { stroke-dashoffset: calc(var(--p, 0) * -50); }
.atlas-door { opacity: calc(.22 + var(--p, 0) * .78); }
.atlas-door--retire, .atlas-door--family { translate: calc((1 - var(--p, 0)) * -35px) 0; }
.atlas-door--fit, .atlas-door--path { translate: calc((1 - var(--p, 0)) * 35px) 0; }
.atlas-door--ops { translate: 0 calc((1 - var(--p, 0)) * -30px); }
.atlas-door--myth { translate: 0 calc((1 - var(--p, 0)) * 30px); }

.epilogue-orb { transform: translate3d(calc(var(--pointer-x) * 12px), calc(var(--pointer-y) * 10px), 0) scale(calc(.82 + var(--p, 0) * .18)); animation: orbPulse 5s ease-in-out infinite; }
.epilogue-orb span:first-child { animation: orbitClockwise 42s linear infinite; }
.epilogue-orb span:nth-child(2) { animation: orbitCounter 31s linear infinite; }
.epilogue-orb span:nth-child(3) { animation: orbitClockwise 24s linear infinite; }

@supports (animation-timeline: view()) {
  .origin-kicker { animation: originKicker linear both; animation-timeline: view(); animation-range: exit 0% exit 55%; }
  @keyframes originKicker { to { opacity: 0; transform: translateY(-18px); } }
}

@media (max-width: 1120px) {
  .realm-scene, .realm-stage--reverse .realm-scene { transform: perspective(1300px) translate3d(calc(var(--pointer-x) * 4px), calc(var(--scene-drift, 0px) * .45 + var(--pointer-y) * 4px), 0) rotateX(calc(var(--pointer-y) * -.6deg)) rotateY(calc(var(--pointer-x) * .7deg)) scale(calc(.96 + var(--enter, 1) * .04)); }
}

@media (max-width: 820px) {
  .origin-title__line--one, .origin-title__line--two, .origin-title__line--three, .origin-title__line--four { transform: none; }
  .origin-deck { transform: none; opacity: 1; }
  .realm-copy, .realm-scene, .realm-stage--reverse .realm-scene { transform: none; opacity: 1; }
  .manifesto h2 { transform: none; }
  .manifesto-lines p { opacity: 1; transform: none; }
  .manifesto-answer { opacity: 1; transform: none; }
  .mental-bloom { transform: rotate(calc(var(--p, 0) * 4deg)); }
  .atlas-door { opacity: 1; translate: none; }
}

/* Performance guardrails: preserve the authored motion, but do not animate the entire
   long-form page while it is off-screen or while the user is actively scrolling. */
.chapter:not(.is-inview) *,
.atlas:not(.is-inview) *,
.epilogue:not(.is-inview) * { animation-play-state: paused !important; }

.chapter--origin.is-inview .origin-title__line { will-change: transform, opacity; }
.chapter--origin.is-inview .origin-universe,
.chapter.realm.is-inview .realm-scene,
.chapter--mental.is-inview .mental-bloom,
.epilogue.is-inview .epilogue-orb { will-change: transform, opacity; }

body.is-scrolling .chapter *,
body.is-scrolling .atlas *,
body.is-scrolling .epilogue * { animation-play-state: paused !important; }
body.is-scrolling .paper-noise { opacity: 0; }
body.is-scrolling .site-header.is-scrolled {
  backdrop-filter: none;
  background: rgba(7,8,13,.94);
}
body[data-ink="paper"].is-scrolling .site-header.is-scrolled {
  background: rgba(244,241,232,.96);
}
body.is-scrolling .realm-scene,
body.is-scrolling .realm-stage--reverse .realm-scene,
body.is-scrolling .origin-universe,
body.is-scrolling .mental-bloom,
body.is-scrolling .epilogue-orb,
body.is-scrolling .product-peek__frame,
body.is-scrolling .product-peek__media { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .motion-ready .motion-reveal { opacity: 1; transform: none; }
  .origin-universe, .realm-copy, .realm-scene, .realm-stage--reverse .realm-scene, .mental-bloom, .epilogue-orb { transform: none; }
  .origin-title__line, .origin-deck, .manifesto h2, .manifesto-lines p, .manifesto-answer { transform: none; opacity: 1; }
  .atlas-door { translate: none; opacity: 1; }
}