:root { color-scheme:dark; --ink:#f2f5ee; --muted:#b5c0c2; --amber:#e6b75d; --line:rgba(225,239,237,.25); --void:#050b12; --display:"GT Sectra Display","GT Sectra",Georgia,"Times New Roman",serif; --sans:"Geist Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
* { box-sizing:border-box; }
html { background:var(--void); scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--void); color:var(--ink); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; z-index:20; left:1rem; top:-4rem; padding:.65rem 1rem; background:var(--ink); color:var(--void); border-radius:3px; } .skip-link:focus { top:1rem; }
.backdrop,.scene-layer,.scene-layer img,.atmosphere { position:fixed; inset:0; width:100%; height:100%; }
.backdrop { z-index:0; overflow:hidden; background:#050b12; }
.scene-layer { margin:0; opacity:var(--opacity,0); transform:translate3d(0,var(--y,0),0) scale(var(--scale,1)); transition:opacity .17s linear,transform .2s linear; will-change:opacity,transform; }
.scene-layer img { object-fit:cover; filter:saturate(.96) contrast(1.02); }
.scene-layer picture { display:contents; }
[id="01-sea-crown"] img { object-position:66% center; }
[id="04-mars-rotorcraft"] img { object-position:68% center; }
.atmosphere { pointer-events:none; background:linear-gradient(90deg,rgba(2,7,12,.2),transparent 63%),linear-gradient(0deg,rgba(2,7,12,.18),transparent 48%,rgba(2,7,12,.08)); box-shadow:inset 0 0 100px rgba(0,0,0,.28); }
.site-header { position:fixed; z-index:10; inset:0 0 auto; height:82px; display:flex; align-items:center; gap:2.5rem; padding:0 clamp(1.25rem,4vw,4.8rem); border-bottom:1px solid rgba(230,244,240,.15); background:linear-gradient(#061019c9,transparent); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; min-width:max-content; min-height:44px; gap:.72rem; font-family:Georgia,serif; font-size:1.04rem; letter-spacing:.02em; } .brand img { width:28px; height:28px; }
.site-nav { display:flex; gap:1.5rem; margin-left:auto; } .site-nav a,.chapter-rail a { min-height:44px; color:var(--muted); font-size:.69rem; letter-spacing:.13em; text-transform:uppercase; transition:color .2s; } .site-nav a { display:flex; align-items:center; } .site-nav a:hover,.site-nav a:focus-visible { color:var(--amber); }
.nav-demo { display:inline-flex; align-items:center; min-height:44px; border:1px solid var(--line); padding:.7rem 1rem; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; transition:background .2s,color .2s; } .nav-demo:hover,.nav-demo:focus-visible { background:var(--ink); color:var(--void); }
.menu-toggle,.mobile-menu { display:none; min-height:44px; }
.chapter-rail { position:fixed; z-index:5; left:clamp(1.25rem,4vw,4.8rem); top:50%; display:grid; gap:1rem; transform:translateY(-50%); } .chapter-rail a { display:grid; min-width:44px; grid-template-columns:1.5rem auto; gap:.55rem; align-items:center; } .chapter-rail b { color:var(--muted); font:500 .62rem/1 ui-monospace,SFMono-Regular,monospace; } .chapter-rail a[aria-current="step"] { color:var(--ink); } .chapter-rail a[aria-current="step"] b { color:var(--amber); }
main { position:relative; z-index:1; }
.chapter { position:relative; min-height:120vh; min-height:120svh; --composition-left:clamp(7.25rem,14vw,13.5rem); --composition-top:22vh; --composition-width:49rem; --title-size:clamp(3.4rem,6.1vw,6.8rem); --title-fit:1; --field-y:49%; --contrast-strength:.88; --copy-visibility:0; --coordinate-reveal:0; --eyebrow-reveal:0; --line-one-reveal:0; --line-two-reveal:0; --body-reveal:0; --evidence-reveal:0; --cta-reveal:0; --line-one-blur:4px; --line-two-blur:4px; isolation:isolate; }
.chapter::before { position:fixed; z-index:0; inset:0; pointer-events:none; opacity:var(--copy-visibility); background:radial-gradient(ellipse 78% 88% at 8% var(--field-y),rgb(3 8 13 / var(--contrast-strength)) 0%,rgb(3 8 13 / .68) 37%,rgb(3 8 13 / .22) 59%,transparent 78%); content:""; }
.chapter-composition { position:fixed; z-index:1; top:var(--composition-top); left:var(--composition-left); width:min(var(--composition-width),calc(100% - var(--composition-left) - 2.5rem)); pointer-events:none; opacity:var(--copy-visibility); }
#flow { --composition-top:23vh; --composition-width:50rem; --title-size:clamp(3.6rem,6.35vw,7rem); --field-y:50%; --contrast-strength:.86; --copy-visibility:1; --coordinate-reveal:1; --eyebrow-reveal:1; --line-one-reveal:1; --line-two-reveal:1; --body-reveal:1; --evidence-reveal:1; --cta-reveal:1; --line-one-blur:0px; --line-two-blur:0px; }
#data { --composition-top:14vh; --composition-width:47rem; --field-y:40%; --contrast-strength:.91; }
#detect { --composition-top:39vh; --composition-width:48rem; --field-y:66%; --contrast-strength:.9; }
#automate { --composition-top:21vh; --composition-width:44rem; --field-y:48%; --contrast-strength:.86; }
#remember { --composition-top:11vh; --composition-width:48rem; --field-y:38%; --contrast-strength:.94; }
/* ONE headline size for chapters 2 to 5, owner-ratified 2026-07-22.
   These four previously carried four hand-dialled sizes (81.4 / 86.4 / 83.5 /
   74.2px at 1440x900, a 23% swing) that were a by-product of fitting different
   headline LENGTHS into different boxes, not a type scale. Chapters 2, 3 and 4
   have identical content structure, and chapters 3 and 5 share a 768px box yet
   differed by 16.5%, so there was no system to preserve.
   The value is the old #remember size, the only one that already accommodated
   the longest line on the page ("Remember the decision," at 10.28em). Grouping
   the selectors makes the shared size structural, so it cannot drift apart
   again. The hero #flow keeps its larger size: it is the page's only h1.
   Any line that still cannot fit a given viewport is handled by the measured
   fit in app.js, so no hand-tuning is needed here ever again. */
#data,#detect,#automate,#remember { --title-size:clamp(3.05rem,5.15vw,5.7rem); }
.chapter-index { display:flex; align-items:center; gap:.8rem; width:min(25rem,70%); margin:0 0 1.15rem; color:#d6dedb; font:600 .61rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; opacity:var(--coordinate-reveal); }
.chapter-coordinate { color:var(--amber); }
.chapter-rule { flex:1 1 auto; height:1px; background:linear-gradient(90deg,rgb(230 183 93 / .88),rgb(230 183 93 / .08)); transform:scaleX(var(--coordinate-reveal)); transform-origin:left center; }
.chapter-system { color:var(--ink); }
.chapter-eyebrow { margin:0 0 1rem; color:#dfe6e3; font:600 .68rem/1.35 var(--mono); letter-spacing:.14em; text-transform:uppercase; opacity:var(--eyebrow-reveal); }
.chapter-composition h1,.chapter-composition h2 { max-width:none; margin:0; font-family:var(--display); font-size:calc(var(--title-size) * var(--title-fit,1)); font-weight:400; letter-spacing:-.058em; line-height:.86; text-wrap:initial; }
.title-line { display:block; overflow:hidden; padding:0 .08em .09em 0; }
.title-line-inner { display:block; white-space:nowrap; }
.title-line:first-child .title-line-inner { opacity:var(--line-one-reveal); filter:blur(var(--line-one-blur)); }
.title-line:nth-child(2) .title-line-inner { opacity:var(--line-two-reveal); filter:blur(var(--line-two-blur)); }
.body-copy { max-width:36rem; margin:1.5rem 0 0; color:#eef2ed; font-size:clamp(.95rem,1.15vw,1.08rem); line-height:1.62; opacity:var(--body-reveal); }
/* The three commercial promises (D-S139-PROMISES) deliberately carry NO treatment
   of their own. An earlier attempt gave them the display serif in amber, which
   broke two rules the rest of the page keeps: the display face is for headlines
   only, and amber is a marker (the coordinate, the CTA fill) and never prose.
   That made them the only amber sentence and the only serif non-headline on the
   page, on one chapter, rhyming with nothing. The class is retained as a hook so
   the line can be elevated deliberately later; it sets nothing today. */
.evidence-list { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:0; margin:1.35rem 0 0; color:#d2dcd9; font:600 .61rem/1.5 var(--mono); letter-spacing:.11em; list-style:none; text-transform:uppercase; opacity:var(--evidence-reveal); }
.evidence-list li+li::before { margin-right:.5rem; color:var(--amber); content:"·"; }
.primary-cta { display:inline-flex; min-height:44px; gap:1rem; align-items:center; margin-top:1.65rem; padding:1rem 1.25rem; background:var(--amber); color:#17130c; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:var(--cta-reveal); transition:background .2s,color .2s; }
.primary-cta:hover,.primary-cta:focus-visible { background:#f8d17e; color:#0d1114; }
.cta-subline { max-width:33rem; margin:.85rem 0 0; color:#d0d9d6; font-size:.72rem; line-height:1.5; opacity:var(--cta-reveal); }
.synthetic-disclosure { position:fixed; z-index:5; bottom:1.3rem; right:clamp(1.25rem,4vw,4.8rem); max-width:300px; margin:0; color:#cdd6d3; font-size:.66rem; line-height:1.4; letter-spacing:.04em; text-align:right; }
@media (max-width:760px) { .site-header { height:68px; gap:.75rem; padding-inline:1rem; } .site-nav,.nav-demo,.chapter-rail { display:none; } .menu-toggle { display:flex; align-items:center; gap:.65rem; margin-left:auto; border:0; background:none; color:var(--ink); font:600 .69rem/1 inherit; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; } .menu-toggle i,.menu-toggle i::before { display:block; width:18px; height:1px; background:currentColor; content:""; } .menu-toggle i::before { transform:translateY(5px); } .mobile-menu { position:fixed; z-index:9; top:68px; right:1rem; left:1rem; padding:1rem; border:1px solid var(--line); background:#07111beF; backdrop-filter:blur(14px); } .mobile-menu:not([hidden]) { display:grid; } .mobile-menu a { padding:.8rem .2rem; border-bottom:1px solid rgba(225,239,237,.12); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; } .chapter { min-height:130svh; --composition-left:1.25rem; --composition-top:50svh; --composition-width:calc(100% - 2.5rem); --title-size:clamp(2.2rem,12.3vw,4.2rem); --contrast-strength:.96; } .chapter::before { background:linear-gradient(180deg,transparent 22%,rgb(3 8 13 / .18) 39%,rgb(3 8 13 / .88) 64%,rgb(3 8 13 / .98) 100%); } .chapter-composition { left:var(--composition-left); width:var(--composition-width); } #flow { --composition-top:49svh; --composition-width:calc(100% - 2.5rem); --title-size:clamp(2.1rem,10vw,4.2rem); } #data { --composition-top:49svh; --composition-width:calc(100% - 2.5rem); } #detect { --composition-top:49svh; --composition-width:calc(100% - 2.5rem); } #automate { --composition-top:49svh; --composition-width:calc(100% - 2.5rem); } #remember { --composition-top:38svh; --composition-width:calc(100% - 2.5rem); } #data,#detect,#automate,#remember { --title-size:clamp(1.75rem,8.6vw,3.8rem); } .chapter-index { margin-bottom:.8rem; } .chapter-eyebrow { margin-bottom:.7rem; font-size:.59rem; } .body-copy { max-width:34rem; margin-top:1rem; font-size:.94rem; line-height:1.5; } .evidence-list { gap:.35rem; margin-top:.95rem; font-size:.55rem; letter-spacing:.07em; } .evidence-list li+li::before { margin-right:.35rem; } .primary-cta { margin-top:1.15rem; } .cta-subline { margin-top:.65rem; font-size:.66rem; } .synthetic-disclosure { top:78px; right:1rem; bottom:auto; max-width:230px; font-size:.59rem; text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.78); } }
.mobile-menu a { display:flex; align-items:center; min-height:44px; }
@media (min-width:761px) and (max-width:900px) and (orientation:portrait) { .chapter { min-height:130svh; --composition-left:clamp(2rem,7vw,4rem); --composition-top:58svh; --composition-width:min(39rem,calc(100% - 4rem)); --title-size:clamp(2.55rem,7.3vw,4.5rem); --field-y:68%; } #flow { --composition-top:57svh; --composition-width:min(38rem,calc(100% - 4rem)); --title-size:clamp(2.6rem,7.1vw,4.35rem); --field-y:72%; } #data { --composition-top:54svh; --field-y:67%; } #detect { --composition-top:60svh; --field-y:74%; } #automate { --composition-top:56svh; --field-y:69%; } #remember { --composition-top:52svh; --field-y:64%; } .body-copy { max-width:32rem; font-size:1rem; } }
@media (min-width:901px) and (max-width:1400px) and (max-height:820px) { #remember { --composition-left:clamp(26rem,39vw,34rem); --composition-top:9vh; --composition-width:min(30rem,42vw); --title-size:clamp(2.45rem,4vw,3.75rem); --field-y:45%; } #remember .chapter-index { margin-bottom:.7rem; } #remember .chapter-eyebrow { margin-bottom:.7rem; } #remember .body-copy { margin-top:1rem; font-size:.94rem; line-height:1.48; } #remember .evidence-list { margin-top:.9rem; } #remember .primary-cta { margin-top:1.05rem; } #remember .cta-subline { margin-top:.55rem; } }
@media (max-width:760px) and (orientation:landscape) and (max-height:450px) { .site-header { height:54px; } .chapter { --composition-left:1rem; --composition-top:54px; --composition-width:min(31rem,calc(100% - 2rem)); } #flow { --composition-top:54px; --title-size:clamp(1.35rem,4.2vw,2rem); } #data,#detect,#automate { --composition-top:54px; } #remember { --composition-top:54px; --composition-width:min(30rem,calc(100% - 2rem)); } #data,#detect,#automate,#remember { --title-size:clamp(1.3rem,4vw,1.85rem); } .chapter-index { margin-bottom:.35rem; font-size:.52rem; } .chapter-eyebrow { margin-bottom:.4rem; font-size:.5rem; } .body-copy { max-width:31rem; margin-top:.55rem; font-size:.72rem; line-height:1.35; } .evidence-list { gap:.3rem; margin-top:.55rem; font-size:.47rem; line-height:1.25; } .evidence-list li+li::before { margin-right:.3rem; } .primary-cta { min-height:44px; margin-top:.65rem; padding:.55rem .85rem; font-size:.62rem; } .cta-subline { max-width:30rem; margin-top:.35rem; font-size:.55rem; line-height:1.25; } .synthetic-disclosure { top:auto; right:.75rem; bottom:.5rem; max-width:190px; font-size:.5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .title-line-inner { filter:none !important; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }
/* The A/B switch. The two presentations are being compared, so a reader who
   wants the other one should not have to go back to the chooser and guess which
   they already saw. Sits with the disclosure rather than in the header: it is a
   footnote about this page, not a navigation destination. */
.view-switch { display:block; margin-top:.4rem; color:var(--amber); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }
.view-switch:hover,.view-switch:focus-visible { color:var(--ink); }