: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; } /* ===== The living backdrop. One fixed stage. Worlds hand over by DISSOLVE: the outgoing scene holds full opacity underneath while the incoming one fades in above it, under a breath of darkness from the veil. An earlier cut to full black between every chapter is exactly what made the page read as a slideshow. Video sits above its own poster frame and fades in only once it is genuinely playing, so a stalled network or a denied autoplay never shows a black hole. ===== */ .backdrop,.scene-layer,.scene-layer img,.scene-layer video,.scene-transition,.atmosphere,.veil { position:fixed; inset:0; width:100%; height:100%; } .backdrop { z-index:0; overflow:hidden; background:#050b12; } /* Opacity is written every frame by the dissolve, so a CSS transition here would fight it and smear the handover. The scene layers are exact. */ .scene-layer { margin:0; opacity:var(--opacity,0); transform:scale(var(--scale,1)); will-change:opacity,transform; } .scene-layer:first-child { --opacity:1; } .scene-layer img,.scene-layer video { object-fit:cover; } .scene-layer img { filter:saturate(.96) contrast(1.02); } .scene-layer video { opacity:0; transition:opacity .5s ease; } .scene-layer video.is-playing { opacity:1; } .scene-layer picture { display:contents; } .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(2,6,11,.28); } .veil { pointer-events:none; background:#02060b; opacity:var(--veil,0); } /* The bespoke handover. This clip was filmed as one continuous move from the Abyssal Forge into the Golden Lattice, pushing through an aperture whose beam becomes the sentinel array's beam at sunrise, so it belongs at exactly the boundary where those two chapters meet. Scroll scrubs it. It is encoded ALL-INTRA, every frame a keyframe, because scrubbing sets currentTime continuously and an ordinary encode would force a seek back to the previous keyframe on every one of those, which stutters. All-intra cost 0.5 MB over a normal encode here, which is the whole reason this is affordable at all. It layers ABOVE the scenes and the ordinary dissolve still runs underneath, so a visitor whose network drops this file gets the plain handover and never knows it was meant to be more. */ .scene-transition { z-index:1; object-fit:cover; opacity:var(--transition-opacity,0); pointer-events:none; /* Held back deliberately. The clip's midpoint is an aperture flare that reaches near-white across the full frame, and at full strength it washed out the fixed chrome sitting on top of it: the nav, the chapter rail and the synthetic-data disclosure all became unreadable for the length of the handover. Darkening the layer keeps the flare dramatic while leaving the page legible through it. */ filter:brightness(.72) saturate(.94) contrast(1.02); } .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; } /* ===== Acts. Each chapter is a tall section whose 100svh stage pins while the scene lives and the copy plays through its beats. The composition keeps the exact coordinate system the owner ratified; only the containing block moved from the viewport to the pinned stage, which occupies the same box. Acts OVERLAP by exactly one viewport. Contiguous sticky sections leave a whole viewport of scroll between chapters in which the stage has unpinned and the next has not yet pinned, so nothing is on screen but the backdrop. That gap is what made the page feel clunky and long: five chapters cost five dead screens. Pulling each act up by 100svh means the next stage takes over the instant the previous releases, and the reader never scrolls through nothing. It also removes roughly half the page height. */ .act { position:relative; height:var(--act-h,200svh); } .act[data-kind="hero"] { --act-h:170svh; } .act + .act { margin-top:-100svh; } .act-stage { position:sticky; top:0; height:100svh; overflow:clip; } .chapter { --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; --copy-lift:0; --line-one-blur:4px; --line-two-blur:4px; } .chapter .act-stage::before { position:absolute; 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:absolute; 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); transform:translate3d(0,calc(var(--copy-lift) * -1.6rem),0); } /* The hero is the page's only h1 and stays the largest, but the previous step was a 23% jump at 1440px, which reads as the type size changing rather than as a hierarchy. Narrowed to about 11%: still clearly the lead, no longer a jolt when the second chapter arrives. */ #flow { --composition-top:23vh; --composition-width:50rem; --title-size:clamp(3.3rem,5.7vw,6.2rem); --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. The value is the size that already accommodated the longest line on the page, and the grouped selector keeps the shared size structural. The hero keeps its larger size: it is the page's only h1. Any line that still cannot fit a viewport is handled by the measured fit in app.js. */ #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; the class is retained as a hook only. */ .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); } /* The scroll cue breathes once the cold open settles and dies on first real scroll. A single hairline, not an arrow cliche. */ .scroll-cue { position:absolute; z-index:1; left:50%; bottom:2.1rem; display:grid; gap:.55rem; justify-items:center; margin:0; color:#d2dcd9; font:600 .58rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; transform:translateX(-50%); opacity:var(--cue-reveal,0); } .scroll-cue i { display:block; width:1px; height:2.6rem; background:linear-gradient(rgb(230 183 93 / .9),rgb(230 183 93 / .05)); animation:cue-breathe 2.6s ease-in-out infinite; } @keyframes cue-breathe { 0%,100% { transform:translateY(0) scaleY(1); } 50% { transform:translateY(.35rem) scaleY(.82); } } /* ===== The end card. Story, archive, then the ask, centered like a title card. The finale reuses the chapter reveal machinery driven by approach. ===== */ .finale { position:relative; display:grid; place-items:center; min-height:130svh; padding:24vh 1.25rem 18vh; --cta-reveal:0; } .finale .chapter-composition { position:static; width:min(46rem,100%); display:grid; justify-items:center; text-align:center; pointer-events:auto; opacity:1; transform:none; } .finale { --coordinate-reveal:0; --line-one-reveal:0; --line-one-blur:4px; --title-size:clamp(2.3rem,4.2vw,4.5rem); --title-fit:1; } .finale-mark { width:46px; height:46px; margin-bottom:1.6rem; opacity:var(--coordinate-reveal); } .finale .chapter-index { display:block; width:auto; margin-bottom:1.3rem; } .finale .finale-title { font-family:var(--display); font-size:calc(var(--title-size) * var(--title-fit,1)); font-weight:400; letter-spacing:-.05em; line-height:.9; margin:0; } .finale .title-line { padding:0 .08em .09em; } .finale .primary-cta { margin-top:2.1rem; } .finale .cta-subline { text-align:center; } .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; } .act { --act-h:185svh; } .act[data-kind="hero"] { --act-h:165svh; } .chapter { --composition-left:1.25rem; --composition-top:47svh; --composition-width:calc(100% - 2.5rem); --title-size:clamp(2.2rem,12.3vw,4.2rem); --contrast-strength:.96; } .chapter .act-stage::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%); } #flow { --composition-top:46svh; --composition-width:calc(100% - 2.5rem); --title-size:clamp(2.1rem,10vw,4.2rem); } #data { --composition-top:47svh; --composition-width:calc(100% - 2.5rem); } #detect { --composition-top:47svh; --composition-width:calc(100% - 2.5rem); } #automate { --composition-top:47svh; --composition-width:calc(100% - 2.5rem); } #remember { --composition-top:40svh; --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; } .scroll-cue { bottom:1.5rem; } .finale { min-height:120svh; padding:20vh 1.25rem 16vh; } .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(2,6,11,.9),0 0 3px rgba(2,6,11,.78); } } .mobile-menu a { display:flex; align-items:center; min-height:44px; } @media (min-width:761px) and (max-width:900px) and (orientation:portrait) { .chapter { --composition-left:clamp(2rem,7vw,4rem); --composition-top:56svh; --composition-width:min(39rem,calc(100% - 4rem)); --title-size:clamp(2.55rem,7.3vw,4.5rem); --field-y:68%; } #flow { --composition-top:55svh; --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:58svh; --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; } } @media (max-width:760px) and (orientation:landscape) and (max-height:450px) { .site-header { height:54px; } .act { --act-h:200svh; } .act[data-kind="hero"] { --act-h:180svh; } .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; } .scroll-cue i { animation:none; } .scene-layer { transition:none; } .scene-layer video { transition:none; } *,*::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); } /* ===== The no-JavaScript fallback ===== Scoped to `html:not(.js-on)` rather than living in a