/* base + layout + components (S2) — built from the gated leaves: aria-landmark-structure, focus_visible_wcag_2_4_11, WCAG AA contrast, forced-colors, scroll-padding for the sticky header, font-loading (self-hosted, metric fallback, zero CLS), primary CTA singularity */
*,*::before,*::after{box-sizing:border-box}
html.fonts-pending body{visibility:hidden} html.fonts-pending .hero-scene{visibility:visible}
[hidden]{display:none!important}
.mt-2{margin:.8rem 0 0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{color:#E7C765}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--sp-4);top:-60px;background:var(--gold);color:#0b0c10;padding:.6rem 1rem;border-radius:var(--radius-sm);font-weight:600;z-index:100}
.skip:focus{top:var(--sp-4)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.012em;line-height:var(--lh-tight);margin:0 0 var(--sp-4);font-variation-settings:"opsz" 144}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-xl);font-family:var(--font-body);font-weight:600;letter-spacing:0}
h1 em,h2 em{font-style:italic;color:var(--gold)}
p{margin:0 0 var(--sp-4)} p.lead{font-size:var(--fs-lg);color:var(--text);max-width:52ch}
.kicker{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:var(--sp-3)}
.muted{color:var(--muted)} .mono{font-family:var(--font-mono);font-size:.92em}
/* header */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,9,14,.72);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--sp-4)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.02em}
.brand svg{width:28px;height:28px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(.6rem,1.6vw,1.4rem)}
.nav a{color:var(--muted);text-decoration:none;font-size:var(--fs-sm);padding:.4rem .2rem} .nav a:hover{color:var(--text)} .nav a.btn-primary{color:#0b0c10;padding:.55rem .95rem} .nav a.btn-primary:hover{color:#0b0c10}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:var(--radius-sm);padding:.45rem .7rem;font:inherit}
@media (max-width:900px){.nav{display:none;position:absolute;left:0;right:0;top:var(--header-h);background:rgba(7,9,14,.96);border-bottom:1px solid var(--line);padding:var(--sp-4) var(--gutter)}.nav.open{display:block}.nav ul{flex-direction:column;gap:.2rem}.nav-toggle{display:inline-block}}
/* buttons: exactly ONE primary emphasis per view (primary-cta-singularity); secondary = outline */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.35rem;border-radius:var(--radius-pill);font-weight:600;font-size:var(--fs-sm);text-decoration:none;border:1px solid transparent;min-height:44px;min-width:44px;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);cursor:pointer;font-family:inherit}
.btn-primary{background:var(--gold);color:#0b0c10;box-shadow:var(--glow-gold)} .btn-primary:hover{background:#E7C765;color:#0b0c10;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--text);border-color:rgba(255,255,255,.28)} .btn-secondary:hover{border-color:var(--text);color:var(--text)}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent;padding-inline:.6rem} .btn-ghost:hover{color:var(--text)}
.btn-small{padding:.55rem .95rem;font-size:var(--fs-xs)}
/* sections / chapters */
.chapter{padding:clamp(4rem,9vw,8rem) 0;border-top:1px solid var(--line);position:relative}
.chapter .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
@media (min-width:900px){.chapter.two .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-10);align-items:start}}
.cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5);position:relative;transform-style:preserve-3d;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.card:hover{border-color:rgba(212,175,55,.45)} .card .letter{font-family:var(--font-display);font-size:var(--fs-2xl);color:var(--gold);line-height:1;margin-bottom:var(--sp-3)}
.card h3{margin-bottom:var(--sp-2)} .card p{color:var(--muted);margin:0}
.flow{display:grid;gap:var(--sp-4)} @media (min-width:800px){.flow{grid-template-columns:1fr 1fr}}
.flow .col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5)}
.flow .col.today{border-color:rgba(167,176,192,.25)} .flow .col.dna{border-color:rgba(212,175,55,.35)}
.flow ol{margin:0;padding-left:1.2rem;color:var(--muted)} .flow ol li{padding:.25rem 0} .flow ol li::marker{color:var(--nexus)} .flow .today ol li::marker{color:var(--dim)}
.flow .col h3{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3)}
.chain{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-4);overflow-x:auto;white-space:normal}
.chain b{color:var(--nexus);font-weight:500}
.ledger{font-family:var(--font-mono);font-size:var(--fs-sm);background:#05070b;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius-sm);padding:var(--sp-5);color:var(--text);margin:0}
.ledger .k{color:var(--muted)} .ledger li{list-style:none;padding:.2rem 0} .ledger ul{margin:0;padding:0}
.statement{font-family:var(--font-display);font-size:var(--fs-xl);font-style:italic;color:var(--text);border-left:3px solid var(--gold);padding-left:var(--sp-4);margin:var(--sp-6) 0}
.panels{display:grid;gap:var(--sp-4)} @media (min-width:900px){.panels{grid-template-columns:repeat(3,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5)} .panel h3{margin-bottom:var(--sp-2)} .panel p{color:var(--muted);margin:0 0 var(--sp-3)}
.honesty{display:grid;gap:var(--sp-4)} @media (min-width:800px){.honesty{grid-template-columns:1fr 1fr}}
.honesty div{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5)} .honesty h3{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .honesty ul{margin:0;padding-left:1.1rem;color:var(--text)} .honesty .today{border-color:rgba(94,225,214,.35)} .honesty .designed{border-color:rgba(212,175,55,.35)}
.strip{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);align-items:center;font-size:var(--fs-xs);color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-4) 0}
.strip b{color:var(--text);font-weight:600} .strip a{color:var(--gold)}
/* form */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-6);display:grid;gap:var(--sp-4);max-width:640px}
.seg{display:flex;gap:.5rem;flex-wrap:wrap} .seg label{border:1px solid var(--line);border-radius:var(--radius-pill);padding:.5rem .9rem;cursor:pointer;color:var(--muted);font-size:var(--fs-sm)} .seg input{position:absolute;opacity:0;pointer-events:none} .seg input:checked+span{color:#0b0c10} .seg label:has(input:checked){background:var(--gold);border-color:var(--gold);color:#0b0c10} .seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.field{display:grid;gap:.35rem} .field label{font-size:var(--fs-sm);color:var(--text);font-weight:500} .field input,.field textarea{font:inherit;background:#05070b;color:var(--text);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:.75rem .9rem;min-height:44px} .field input:focus,.field textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(212,175,55,.25)} .field .err{color:#FCA5A5;font-size:var(--fs-xs);min-height:1.2em} .field input[aria-invalid="true"]{border-color:#F87171}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form .fine{font-size:var(--fs-xs);color:var(--muted);margin:0}
.status{border-radius:var(--radius-sm);padding:var(--sp-4);font-size:var(--fs-sm)} .status.ok{background:var(--nexus-soft);border:1px solid rgba(94,225,214,.4);color:var(--text)} .status.bad{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4)}
/* faq */
.faq details{border-top:1px solid var(--line);padding:var(--sp-4) 0} .faq details:last-child{border-bottom:1px solid var(--line)} .faq summary{min-height:44px;cursor:pointer;font-weight:600;font-size:var(--fs-lg);list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;font-family:var(--font-display);font-weight:500} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-size:1.4em;line-height:1;transition:transform var(--dur-fast)} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{color:var(--muted);margin:var(--sp-3) 0 0;max-width:70ch}
/* footer */
.site-footer{border-top:1px solid var(--line);padding:var(--sp-10) 0 var(--sp-8);color:var(--muted);font-size:var(--fs-sm)}
.site-footer .wrap{display:grid;gap:var(--sp-6)} @media (min-width:800px){.site-footer .wrap{grid-template-columns:2fr 1fr 1fr}}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem} .site-footer a{color:var(--muted)} .site-footer a:hover{color:var(--text)}
.legal{font-size:var(--fs-xs);color:var(--dim)}
/* progress */
.progress{position:fixed;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),var(--nexus));z-index:60;pointer-events:none}
/* forced colors */
@media (forced-colors:active){.btn-primary,.btn-secondary{border:2px solid ButtonText;forced-color-adjust:none;background:ButtonFace;color:ButtonText}.card,.panel,.form,.ledger,.chain{border:1px solid CanvasText}:focus-visible{outline:3px solid Highlight}}
/* tables (built page) */
.tbl{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:var(--fs-sm)} .tbl th,.tbl td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top} .tbl th{color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-xs)}

/* I0 fix batch (designer review 2026-09-22, Astra-confirmed order) */
.site-footer ul{align-content:start}
main .chapter:not(.two) .wrap > :is(p,ul,ol,details){max-width:33em}
main .chapter:not(.two) .wrap > .chain:not(:has(table)){max-width:33em}
main .chapter:not(.two) .wrap > div > :is(p:not(.kicker),ul.plain){max-width:33em}
.faq details{max-width:34em} .faq details p{max-width:33em}
fieldset.seg-wrap,#lead-form fieldset{border:0;padding:0;margin:0 0 var(--sp-4)}
#lead-form legend{position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;margin:0 0 var(--sp-2);padding:0;font-size:var(--fs-sm);color:var(--muted)}
.hero .wrap{max-width:var(--maxw)} .hero-copy{max-width:58rem}
.hero h1,.hero-line{text-wrap:balance}
@media (max-width:900px){.nav a{font-size:1rem;display:block;min-height:44px;line-height:44px}.nav{background:rgba(7,9,14,1)}}
@media (min-width:960px){.chapter.two .wrap > div:first-child{position:sticky;top:96px;align-self:start}}

/* #network drawn diagram (fix batch I0-6) */
.net-figure{margin:0 0 var(--sp-6)} .net-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} @media (max-width:900px){.net-grid{grid-template-columns:1fr}}
.net-cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4) var(--sp-4) var(--sp-2)} .net-cell.today{border-color:rgba(167,176,192,.25)} .net-cell.dna{border-color:rgba(212,175,55,.35)}
.net-cell h3{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2)}
.net-svg{width:100%;height:auto;display:block} .net-svg text{font:600 15px/1 var(--font-body);fill:var(--muted)} .net-svg .d-label{fill:var(--text)} .net-svg .net-center{font-family:var(--font-display);font-style:italic;font-size:19px;font-weight:400} .net-svg .p-center{fill:var(--dim)} .net-svg .d-center{fill:var(--gold)}
.net-svg .p-arc{fill:none;stroke:#8B94A6;stroke-width:1.5;opacity:.7} .net-svg .p-node{fill:#8B94A6} .net-svg .d-arc{fill:none;stroke:#5EE1D6;stroke-width:1.8} .net-svg .d-node{fill:#D4AF37}
.net-figure figcaption{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-4)} @media (max-width:900px){.net-figure figcaption{grid-template-columns:1fr}} .net-figure figcaption .chain{max-width:none}

/* single-column list items keep a reading measure (fix batch I0-2) */
main .chapter:not(.two):not(.wb-panels):not(.wb-top) .wrap li{max-width:31em}
.wb-card > p, .wb-card .wb-perm-hint{max-width:33em}

/* measure-em: every reading line ≤ 75 characters, measured per rendered line (Astra P2 F-9) */
main .lead,main p.lead{max-width:33em} main .chapter:not(.two) .wrap > p.statement,main .chapter .wrap p.statement,main p.statement{max-width:27em} main .fine-print,#lead-form .fine,main .chapter .wrap p.fine{max-width:33em} main .chapter.two .wrap > div > p:not(.kicker){max-width:33em}

#ops-runtime li .mono{overflow-wrap:anywhere} #ops-release .mono{overflow-wrap:anywhere}
/* language switcher (NL build 2026-09-23): plain links, no JS, no storage; compact in the header, full names in the footer and the mobile menu */
.lang-switch{display:flex;align-items:center;gap:.35rem;margin-left:auto;font-size:var(--fs-sm);white-space:nowrap}
.site-header .wrap{gap:var(--sp-3)}
.lang-switch a{color:var(--muted);text-decoration:none;padding:.4rem .35rem;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--radius-sm)}
.lang-switch a:hover{color:var(--text)} .lang-switch a[aria-current="page"]{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:.25em}
.lang-switch span{color:var(--muted)}
.nav .lang-menu{display:none}
@media (max-width:900px){.nav .lang-menu{display:block;border-top:1px solid var(--line);margin-top:.4rem;padding-top:.4rem}.nav .lang-menu a{display:inline-block;min-width:44px} .lang-switch{margin-left:0}}
.lang-full a[aria-current="page"]{color:var(--text);font-weight:600}
/* laptop widths (901–1100 px): the primary nav + the language control must share one header row — measured 2026-09-23 (HEADER_MEASUREMENT_H1.md): tighter gaps and a slightly smaller nav type keep every item on one line in both languages */
@media (max-width:1100px) and (min-width:901px){.nav ul{gap:.45rem}.nav a{font-size:.86rem;padding:.4rem .1rem}.nav a.btn-primary{padding:.4rem .6rem}.site-header .wrap{gap:.6rem}}

/* /podcast/ — 2026-09-23 */
.podcast-player{margin:var(--sp-5) 0}.podcast-player video{width:100%;height:auto;aspect-ratio:16/9;background:#05070b;border:1px solid var(--line);border-radius:var(--radius-sm)}.podcast-player figcaption{margin-top:var(--sp-2)}.chapters{padding-left:1.4em}.chapters li{margin:.25rem 0}.chapters .mono{margin-right:.5rem}

/* The Shift — scroll-driven stage between the hero and #shift (shift-scene.js). Always in the layout: without WebGL/JS/motion it is one
   screen with a static poster of the final picture; site.js adds .scrub before the first scroll when the device can run the scene,
   so starting the scene never shifts the page. */
.shift-stage{position:relative;height:100vh;height:100svh;border-top:1px solid var(--line)}
.shift-stage.scrub{height:280vh}
.shift-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.shift-sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.shift-stage.live canvas{opacity:1}
.shift-poster{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(92vw,1100px);height:auto;opacity:.9}
.shift-stage.live .shift-poster{display:none}
.shift-caps{position:absolute;left:0;right:0;bottom:6vh;height:6em;pointer-events:none}
.shift-caps p{position:absolute;left:50%;bottom:0;width:min(92vw,30em);margin:0;text-align:center;font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.25;color:var(--text);opacity:0;transform:translate(-50%,10px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);text-shadow:0 2px 18px rgba(7,9,14,.9)}
.shift-caps p.on,.shift-stage:not(.live) .shift-caps p[data-phase="0.68-1"]{opacity:1;transform:translate(-50%,0)}
.shift-hint{position:absolute;left:0;right:0;top:calc(72px + 3vh);margin:0;text-align:center;font-size:.85rem;color:var(--muted);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.shift-stage.live:has(p[data-phase="0.68-1"].on) .shift-hint{opacity:.85}
@media (max-width:700px){.shift-stage.scrub{height:220vh}}
@media (prefers-reduced-motion:reduce){.shift-caps p,.shift-hint,.shift-sticky canvas{transition:none}}

/* Podcast: audio-only player and clickable chapters */
.podcast-audio{display:block;width:100%;margin:var(--sp-4,1rem) 0 0}
#chapters .chapter-btn{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;border-radius:6px;padding:.1em .25em}
#chapters .chapter-btn:hover,#chapters .chapter-btn:focus-visible{color:var(--gold);outline:2px solid var(--gold);outline-offset:2px}
/* Shift labels on the 3D stage (CR-20261009-2112-helix-desktop) — placed by shift-scene.js; the 2D version draws its own */
.shift-tag{position:absolute;left:0;top:0;padding:.2em .65em;border-radius:6px;background:rgba(7,9,14,.72);font:600 .95rem/1.4 var(--font-body,system-ui),system-ui,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;color:#B0BACE;will-change:transform,opacity}
.shift-tag-data{color:var(--gold,#E6C25A)} .shift-tag-services{color:#7FE7DC}
@media (prefers-reduced-motion:reduce){.shift-tag{transition:none}}