/* THE BUNKERS 2108 : landing page
   Direction: "The last shelter". Warm anthracite, ivory reading zones,
   copper and amber accents, sage only at the end of the stretch curve.
   Structure: 1 tokens · 2 base · 3 layout · 4 header · 5 hero and trust band
   6 media and provenance badges · 7 instruments · 8 sections · 9 sensor grid
   10 dialog · 11 responsive · 12 motion · 13 cinematic systems
   14 direct engine captures */

/* 1. Tokens ------------------------------------------------------------ */
:root{
  --bg:#18140f; --bg-alt:#1f1912; --panel:#2b241c; --interior:#11100e;
  --copper:#ac7650; --amber:#dfb37b; --text:#e5d3b9; --title:#f0dfc5;
  --muted:#bca58a; --bezel:#9c8565; --sage:#a0c9b0;
  --paper:#f1ece2; --ink:#3a2e23; --ink-strong:#2a2018; --ink-muted:#6d5d4b; --ink-accent:#8a5a36;
  --radius-outer:22px; --radius-inner:16px; --radius-module:14px;
  --gutter:48px; --max:1200px;
  --header-h:96px; --header-compact:66px;
  --band-pad:clamp(44px,5vw,72px); --loop-gap:clamp(40px,5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1); --mech:cubic-bezier(.65,0,.35,1);
  --font:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
}
/* Colour roles, redefined per surface so components follow their background. */
:root,.on-dark{
  --fg:var(--text); --fg-strong:var(--title); --fg-muted:var(--muted);
  --rule:#dfb37b2e; --accent:var(--amber); --focus:var(--amber); --eyebrow:#c9a073;
}
.on-paper{
  --fg:var(--ink); --fg-strong:var(--ink-strong); --fg-muted:var(--ink-muted);
  --rule:#8a5a3640; --accent:var(--ink-accent); --focus:var(--ink-accent); --eyebrow:var(--ink-accent);
}

/* 2. Base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-compact) + 20px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.65 var(--font);overflow-wrap:break-word}
.js body{padding-top:var(--header-h)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
strong{font-weight:600;color:var(--fg-strong)}
h1,h2{font-weight:300;line-height:1.1;color:var(--fg-strong);letter-spacing:-.025em;text-wrap:balance}
h2{font-size:clamp(32px,3.6vw,50px)}
h3{font-size:22px;font-weight:400;line-height:1.3;color:var(--fg-strong);text-wrap:balance}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}
.skip{position:fixed;left:16px;top:-80px;z-index:60;padding:12px 16px;background:var(--paper);color:var(--ink-strong);border-radius:6px}
.skip:focus{top:12px}
.num{font-variant-numeric:tabular-nums lining-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]:not([hidden="until-found"]){display:none!important}

/* 3. Layout ------------------------------------------------------------ */
.wrap{max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.band{position:relative;padding-block:var(--band-pad);background:var(--bg);color:var(--fg)}
.band.alt{background:var(--bg-alt)}
.band.on-paper{background:var(--paper)}
.band + .band:not(.on-paper){border-top:1px solid #dfb37b14}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px;align-items:end;margin-bottom:clamp(28px,3.6vw,48px)}
.stack-l > .head{margin-bottom:0}
.head > div{grid-column:1/span 6}
.head .lead{grid-column:8/span 5}
/* Zone markers: small copper index above each section title. */
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow)}
.eyebrow::before{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.lead{font-size:clamp(19px,1.5vw,21px);line-height:1.6;color:var(--fg)}
.prose{max-width:66ch}
.prose > * + *{margin-top:18px}
.prose h3{margin-top:40px}
.note{font-style:italic;color:var(--fg-muted)}
.stack-l > * + *{margin-top:clamp(34px,4.4vw,64px)}
.stack-m > * + *{margin-top:clamp(24px,3vw,36px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split > .prose{position:sticky;top:calc(var(--header-compact) + 28px)}
.bullets li{position:relative;padding-left:22px;margin-top:8px}
.bullets li::before{content:'';position:absolute;left:0;top:.82em;width:10px;height:1px;background:var(--accent)}
.sub{font-size:clamp(22px,2vw,26px);font-weight:300}

/* Buttons: one treatment, two weights. */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:7px;border:1px solid transparent;font-size:16px;line-height:1.3;text-decoration:none;transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .06s}
.button.primary{background:var(--amber);border-color:#f2cf98;color:#1b150e;box-shadow:inset 0 1px 0 #ffffff55,0 6px 18px #dfb37b1f}
.button.primary:hover{background:#ecc48f;box-shadow:inset 0 1px 0 #ffffff77,inset 0 0 0 1px #fff1d8b3,0 6px 18px #dfb37b2e}
.button.secondary{border-color:#dfb37b77;color:var(--text);background:#18140f66}
.button.secondary:hover{border-color:var(--amber);color:var(--title);background:#dfb37b12;box-shadow:inset 0 0 0 1px #dfb37b4d,inset 0 1px 0 #f0dfc52e}
.on-paper .button.secondary{color:var(--ink-strong);border-color:#8a5a3699;background:transparent}
.button:active{transform:translateY(1px);transition-duration:0s}
/* Keyboard focus stays stronger than hover: outline plus a wide halo. */
.button:focus-visible{box-shadow:0 0 0 9px #dfb37b29}
.button:disabled,.button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
/* Second line of a button: where it leads (e.g. the Kickstarter creator profile). */
.cta-sub{font-size:13px;font-weight:400;opacity:.85}
a[target="_blank"]:not(.follow-link)::after{content:'↗';font-size:.85em;margin-left:.35em;opacity:.75}

/* 4. Header ------------------------------------------------------------ */
.site-header{position:relative;z-index:30;background:#18140ff2}
.js .site-header{position:fixed;inset:0 0 auto;transition:background-color .25s,box-shadow .25s}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:var(--header-h);transition:min-height .25s}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ac765055 20%,#ac765055 80%,transparent)}
.site-header.is-compact{background:#16120ef0;box-shadow:0 10px 30px #0907044d}
.site-header.is-compact .wrap{min-height:var(--header-compact)}
@supports (backdrop-filter:blur(8px)){.site-header.is-compact{background:#16120ed9;backdrop-filter:blur(10px) saturate(1.1)}}
/* Logo plate: a touch lighter than the night, copper fillet, soft inner relief. */
.identity{display:block;flex:none;width:256px;padding:7px 12px;border:1px solid #ac765059;border-radius:12px;background:linear-gradient(160deg,#2a221a,#1b1611 62%,#211a14);box-shadow:inset 0 1px 0 #f0dfc51f,inset 0 -1px 0 #0b0806,0 6px 16px #0907043b;transition:width .25s,padding .25s}
.identity img{width:100%}
.site-header.is-compact .identity{width:206px;padding-block:5px}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);font-size:16px}
.site-nav a{position:relative;text-decoration:none;color:#d4c0a3;padding-block:10px}
.site-nav a:not(.button):hover{color:var(--title)}
.site-nav a[aria-current="true"]{color:var(--title)}
.site-nav a:not(.button)::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-nav a[aria-current="true"]::after{transform:scaleX(1)}
.site-nav a.button{color:#1b150e;min-height:44px;padding:8px 18px}
.header-rewards{display:none}
.menu-toggle{display:none;min-width:84px;min-height:46px;padding:8px 16px;background:#2b241c;border:1px solid #9c856588;border-radius:7px;color:var(--title);font-size:16px}
/* More: the last button of the bar opens the other chapters (js/site.js). Without JavaScript
   the button stays hidden and its links sit in the bar, which wraps. The .js class (set in the
   head) gives the final layout from the first paint, so nothing moves when the script runs. */
html:not(.js) .site-header .wrap{flex-wrap:wrap;padding-block:10px}
html:not(.js) .site-nav{flex-wrap:wrap;gap:4px 22px}
.more,html:not(.js) .more-panel{display:contents}
html:not(.js) .more-toggle{display:none}
.js .more{display:block;position:relative}
.js .more:not(.is-enhanced) .more-panel{display:none}
.more-toggle{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 2px;border:0;background:none;color:#d4c0a3;font-size:16px}
.more-toggle::after{content:'';width:7px;height:7px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.more-toggle[aria-expanded="true"]::after{margin-top:3px;transform:rotate(-135deg)}
.more-toggle:hover,.more-toggle[aria-expanded="true"]{color:var(--title)}
/* Discreet active state when the current chapter is one of the More links. */
.more-toggle.is-current{color:var(--title)}
.more-toggle.is-current::before{content:'';position:absolute;left:0;right:15px;bottom:4px;height:1px;background:var(--amber)}
.more.is-enhanced .more-panel{position:absolute;right:-14px;top:calc(100% + 10px);z-index:2;display:grid;min-width:220px;padding:8px;border:1px solid #9c856566;border-radius:12px;background:#17130ffa;box-shadow:0 18px 40px #090704a6,inset 0 1px 0 #f0dfc51a}
.more.is-enhanced .more-panel a{padding:11px 14px;border-radius:7px}
.more.is-enhanced .more-panel a::after{display:none}
.more.is-enhanced .more-panel a:hover{background:#dfb37b12}
.more.is-enhanced .more-panel a[aria-current="true"]{color:var(--amber);background:#dfb37b0d}
.more.is-enhanced .more-panel a[href="privacy.html"]{margin-top:6px;padding-top:15px;border-top:1px solid #dfb37b1c;border-radius:0 0 7px 7px}
/* Menu panel (narrow screens): opaque, scrollable, everything in reading order. */
.menu-panel{position:absolute;left:0;right:0;top:100%;overflow-y:auto;overscroll-behavior:contain;padding:6px var(--gutter) 28px;background:#141009;border-top:1px solid #ac765044;box-shadow:0 18px 30px #09070466}
.menu-list{display:grid;grid-template-columns:1fr}
.menu-list a,.menu-out a{display:flex;align-items:center;min-height:48px;padding:10px 2px;border-top:1px solid #dfb37b1a;color:#e2cfb3;font-size:18px;text-decoration:none}
.menu-list li:first-child a{border-top:0}
.menu-list a[aria-current="true"]{color:var(--amber)}
.menu-list a[aria-current="true"]::before{content:'';width:6px;height:6px;margin-right:12px;border-radius:50%;background:var(--amber)}
.menu-out{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid #ac765088}
.menu-out a{display:block;min-height:44px;padding:12px 2px;border-top:0;font-size:16px;line-height:1.25;color:var(--muted)}
html.menu-open{overflow:hidden}

/* 5. Hero and trust band ----------------------------------------------- */
.hero{position:relative;padding-block:clamp(28px,4vw,60px) clamp(56px,7vw,100px);background:
  radial-gradient(ellipse 60% 70% at 78% 40%,#ac765021,transparent 70%),
  radial-gradient(ellipse 50% 60% at 10% 100%,#2b241c,transparent 70%),var(--bg);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(#dfb37b08 1px,transparent 1px),linear-gradient(90deg,#dfb37b08 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 70% 40%,#000,transparent 75%)}
/* Title, media, then words in source order; on desktop the media spans the right column
   and the empty first and last rows keep the left column vertically centred. */
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);grid-template-rows:1fr auto auto 1fr auto;grid-template-areas:". media" "title media" "copy media" ". media" "film film";column-gap:clamp(32px,4vw,56px);align-items:center}
.hero-grid > h1{grid-area:title}
.hero .intro{max-width:30em}
.hero-media{grid-area:media}
.hero-copy{grid-area:copy}
.hero h1{font-size:clamp(40px,4.2vw,62px);letter-spacing:-.04em;line-height:1.05}
.hero h1 span{display:block;margin-top:.22em;color:#cdb698}
.hero .intro{margin-top:24px;max-width:34em;font-size:clamp(18px,1.35vw,19.5px);color:var(--text)}
.facts{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:24px;font-size:13px;letter-spacing:.18em;color:var(--title)}
.facts li{display:flex;align-items:center;white-space:nowrap}
.facts li + li::before{content:'';width:4px;height:4px;margin-inline:14px;border-radius:50%;background:var(--copper)}
.hero .actions{margin-top:26px}
/* Desktop: the two buttons are always stacked, so the swap between the fallback and the
   follow button moves nothing (no layout shift). */
@media (min-width:1000px){.hero .actions{flex-direction:column;align-items:flex-start}}
.hero-media .scenes{display:grid;grid-template-columns:63fr 37fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:1.28;background:linear-gradient(135deg,#0f0c08,#9e8469 34%,#b99771 50%,#32261e 68%,#0f0c08)}
.scenes .zoom{border-radius:0;height:100%}
.scenes .zoom:first-child{grid-row:1/3}
.scenes img{width:100%;height:100%;object-fit:cover}
.scenes .zoom:nth-child(1) img{object-position:58% 50%}
.scenes .zoom:nth-child(2) img{object-position:30% 50%}


/* 6. Media and provenance badges --------------------------------------- */
/* Double frame of the pack: metal bezel, inner fillet, dark screen. */
.bezel{position:relative;padding:7px;border:1px solid var(--bezel);border-radius:var(--radius-outer);
  background:linear-gradient(145deg,#b2a18b,#544132 12%,#18140f 30%,#3b2d22 72%,#a0825d);
  box-shadow:0 2px 0 #16120e,inset 0 1px 0 #efdab6aa,0 15px 20px #23170927,0 30px 40px #2c1c0d14}
.bezel::after{content:'';position:absolute;inset:3px;border:1px solid #f0e9e230;border-radius:calc(var(--radius-outer) - 4px);pointer-events:none}
.bezel > .screen{position:relative;border:1px solid #211b16;border-radius:var(--radius-inner);overflow:hidden;background:#1b1712;box-shadow:inset 0 1px 0 #b8956144}
/* Single light frame for secondary media. */
.frame{border:1px solid #9c856566;border-radius:14px;overflow:hidden;background:var(--interior)}
.on-paper .frame{border-color:#8a6f4e88;box-shadow:0 10px 24px #2c1c0d1c}
.zoom{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.zoom img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.015)}
.zoom:focus-visible{outline-offset:-3px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.sheet{padding:clamp(8px,1.2vw,14px);background:#1b1712}
.sheet .zoom{border-radius:9px;border:1px solid #83746444}

/* One main badge per media: shape and wording differ, never colour alone. */
.prov{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px;margin-top:12px}
.prov-note{font-size:13.5px;line-height:1.4;color:var(--fg-muted)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:4px;font-size:11.5px;font-weight:600;line-height:1.25;letter-spacing:.13em;white-space:nowrap}
.badge::before{content:'';flex:none}
/* Concept art: open frame, diamond mark. */
.badge--concept{border:1px solid #ac7650aa;color:#d0a678}
.badge--concept::before{width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg)}
.on-paper .badge--concept{border-color:#8a5a3699;color:var(--ink-accent)}
/* AI-generated stylised film: amber wash, film strip mark. */
.badge--film{border:1px solid #dfb37b66;background:#dfb37b1c;color:var(--amber)}
.badge--film::before{width:11px;height:8px;border-block:2px dotted currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.on-paper .badge--film{color:#6e4727;background:#dfb37b40;border-color:#ac765088}
/* Direct engine capture (development build): solid ivory plate, recording dot. */
.badge--capture{background:var(--text);border:1px solid #f0dfc5;color:#1b150e}
.badge--capture::before{width:8px;height:8px;border-radius:50%;background:#8a4f2c;box-shadow:0 0 0 2px #ac765044}

/* 7. Instruments ------------------------------------------------------- */
/* Native versions of the D1, D5, D3, stretch and roadmap panels.
   Sizes follow the panel width (container query units), not the viewport. */
.instrument{container-type:inline-size;color:var(--text)}
.instrument .screen{padding:clamp(18px,6cqi,40px);background:radial-gradient(ellipse at 90% 0,#51382a55,transparent 65%),linear-gradient(125deg,#2b241c,#18140f 68%)}
.instrument .screen::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(#dfb37b0b 1px,transparent 1px),linear-gradient(90deg,#dfb37b0b 1px,transparent 1px);background-size:48px 48px}
.instrument .screen > *{position:relative}
.inst-title{font-size:clamp(18px,4.5cqi,30px);font-weight:300;letter-spacing:.06em;line-height:1.2;color:var(--title);padding-bottom:clamp(14px,3.4cqi,22px);margin-bottom:clamp(16px,4cqi,28px);border-bottom:1px solid #b3946d55}
.module{position:relative;border:1px solid #ac856344;border-radius:var(--radius-module);background:linear-gradient(125deg,#78553716,#12100c55);box-shadow:inset 0 1px 0 #efd5b324,0 10px 26px #09070433}
.instrument svg{display:block}
.instrument .wire{fill:none;stroke:#ac7650;stroke-width:1.5}
.instrument .fine{fill:none;stroke:#dfb37b77;stroke-width:1}
.instrument .lit{fill:none;stroke:#dfb37b;stroke-width:2}
.instrument .node{fill:#211910;stroke:#dfb37b;stroke-width:1.5}
.instrument .pct,.instrument .unit{color:#c9a073;font-weight:400;letter-spacing:0}
.instrument .big{white-space:nowrap;font-weight:300;color:var(--title);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.inst-label{font-size:clamp(13px,3cqi,19px);letter-spacing:.09em;color:var(--amber)}

/* D1 : where we are */
.stock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44cqi);align-items:center;gap:8px;padding:clamp(12px,3cqi,22px) clamp(14px,4cqi,30px)}
.stock .signal{display:flex;align-items:center;gap:12px}
.stock .signal::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px #dfb37b12,0 0 15px #dfb37b66}
.stock .hint{margin-top:8px;font-size:clamp(12px,2.5cqi,15.5px);letter-spacing:.09em;color:var(--muted)}
.dial{position:relative}
.dial svg{width:100%;height:auto}
/* The approx sign, number and unit are one group, centred on the dial and raised. */
.dial .read{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.09em;white-space:nowrap;font-size:clamp(40px,13.5cqi,88px)}
.dial .read .approx,.dial .read .pct{font-size:.34em;color:#c9a073}
.dial .read .n{letter-spacing:-.04em}
.gauge{padding-block:clamp(14px,3.4cqi,24px);border-top:1px solid #9c856533}
.stock + .gauge{margin-top:clamp(16px,4cqi,28px)}
.gauge-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(10px,2.4cqi,18px)}
.gauge-name{font-size:clamp(13px,3.1cqi,20px);letter-spacing:.07em}
.gauge-value{display:inline-flex;align-items:baseline;gap:.2em;font-size:clamp(30px,7.6cqi,50px);white-space:nowrap}
.gauge-value .to{align-self:center;font-size:max(11.5px,.27em);letter-spacing:.08em;color:#c9a073;border-block:1px solid #ac765044;padding:.35em 0;margin-inline:.25em}
.gauge-value .pct{font-size:.43em}
.track{position:relative;height:20px;border-top:1px solid #9c856533;border-bottom:1px solid #9c856522;background:repeating-linear-gradient(90deg,#dfb37b17 0 4px,transparent 4px 11px)}
.track .fill{position:absolute;top:5px;bottom:5px;left:0;background:linear-gradient(90deg,#ac7650,#dfb37b)}
.track .interval{position:absolute;top:2px;bottom:2px;background:repeating-linear-gradient(135deg,#f0dfc5 0 2px,#c9a073 2px 4px);border-right:2px solid #f0dfc5}
.track .needle{position:absolute;top:-6px;height:30px;width:1px;background:var(--amber)}
.track::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:4px;background:repeating-linear-gradient(90deg,#dfb37b44 0 1px,transparent 1px 10%)}

@container (max-width:400px){
  .stock{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:18px}
  .stock .signal{justify-content:center}
  .dial{width:68%}
}

/* D5 : what is already built */
.built{display:grid;align-items:center;gap:clamp(12px,3.6cqi,28px);padding:clamp(14px,3.6cqi,26px)}
.built + .built{margin-top:clamp(12px,3cqi,22px)}
.built.cognition{grid-template-columns:minmax(0,34cqi) minmax(0,1fr)}
.built.system{grid-template-columns:minmax(0,17cqi) minmax(0,1fr)}
.built svg{width:100%;height:auto}
.built .tested{display:flex;align-items:baseline;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid #b3946d33;color:var(--muted);font-size:15.5px;line-height:1.35}
.built .tested .big{font-size:44px}
/* One panel, three columns on wide screens: each module carries its full list (no second list in words). */
.built-grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.built-grid .built,.built-grid .built.cognition{grid-template-columns:minmax(0,56px) minmax(0,1fr);align-items:start;margin:0}
.built-grid .inst-label{font-size:15.5px;letter-spacing:.07em}
.inst-list{margin-top:8px}
.inst-list li{position:relative;padding-left:18px;margin-top:6px;font-size:15.5px;line-height:1.45;color:var(--text)}
.inst-list li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--amber)}
@media (min-width:1000px){
  .built-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .built-grid .built,.built-grid .built.cognition{grid-template-columns:minmax(0,1fr);gap:14px}
  .built-grid .built svg{width:72px}
  .built-grid .inst-label{font-size:17px}
}

/* D3 : where the money goes */
.budget-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34cqi);align-items:center;gap:16px;padding-bottom:clamp(14px,3.6cqi,26px)}
.budget-top .big{font-size:clamp(40px,12.6cqi,84px);letter-spacing:-.035em}
.budget-top .unit{display:block;margin-top:clamp(8px,2cqi,16px);font-size:clamp(11.5px,2.6cqi,17px);letter-spacing:.24em}
.budget-top svg{width:100%;height:auto}
.alloc{display:grid;grid-template-columns:clamp(74px,19cqi,124px) minmax(0,1fr);gap:clamp(12px,3.4cqi,24px);align-items:center;padding-block:clamp(13px,3cqi,20px);border-top:1px solid #9c856533}
/* Amounts right-aligned, percent signs in their own fixed column. */
.alloc-num{display:grid;grid-template-columns:minmax(0,1fr) .5em;column-gap:.1em;align-items:baseline;padding-right:clamp(8px,2cqi,12px);border-right:1px solid #9c856533;font-size:clamp(30px,8.2cqi,54px)}
.alloc-num .n{text-align:right;letter-spacing:-.03em}
.alloc-num .pct{font-size:.41em;text-align:left}
.alloc-name{font-size:clamp(12.5px,3cqi,19px);letter-spacing:.06em}
.alloc-detail{margin:2px 0 clamp(8px,1.8cqi,12px);font-size:clamp(13.5px,2.8cqi,16px);line-height:1.4;color:var(--muted)}
.alloc-bar{height:9px;border-radius:9px;background:#dfb37b13;overflow:hidden}
.alloc-bar span{display:block;height:100%;border-radius:9px;background:var(--tone)}

/* Stretch goals */
.ascent{position:relative;margin-bottom:clamp(6px,2cqi,14px)}
.ascent svg{width:100%;height:auto;overflow:visible}
.ascent-labels{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:2px;font-size:clamp(11.5px,2.5cqi,16px);letter-spacing:.09em;white-space:nowrap}
.ascent-labels span:nth-child(1){color:#bfa68b;text-align:left}
.ascent-labels span:nth-child(2){color:var(--amber);text-align:center}
.ascent-labels span:nth-child(3){color:var(--title);text-align:right}
/* Three cards of identical height; the mini gauges share columns and baseline. */
.stage{display:grid;grid-template-columns:clamp(22px,7cqi,48px) minmax(0,1fr) clamp(46px,13cqi,92px);align-items:center;gap:clamp(10px,3cqi,22px);min-height:clamp(108px,23cqi,150px);padding:clamp(10px,2cqi,14px) clamp(12px,3.4cqi,24px);margin-top:clamp(10px,2.4cqi,16px);border:1px solid var(--edge);border-radius:var(--radius-module);background:radial-gradient(ellipse at right,var(--wash),transparent 70%),linear-gradient(125deg,#47332626,#11100c66);box-shadow:inset 0 1px 0 #efd5b32b,0 8px 20px #09070433}
.stage svg{width:100%;height:auto}
.stage svg path{fill:none;stroke:var(--tone);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.stage .threshold{display:flex;align-items:baseline;gap:.25em;font-size:clamp(25px,7.2cqi,46px);font-weight:300;line-height:1.1;color:var(--tone);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.stage .threshold .unit{font-size:max(11.5px,.38em);letter-spacing:.12em}
.stage .promise{margin-top:6px;font-size:clamp(14px,3.1cqi,19px);line-height:1.35}
.energy{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:14%;height:clamp(40px,11cqi,72px);padding:0 8% clamp(6px,1.4cqi,10px);border-bottom:1px solid var(--edge)}
.energy i{display:block;border-radius:3px 3px 0 0;border:1px solid #b89a6e20;background:#dfb37b0a}
.energy i:nth-child(1){height:42%}.energy i:nth-child(2){height:70%}.energy i:nth-child(3){height:100%}
.energy i.on{background:linear-gradient(0deg,#ac765044,var(--tone));border-color:var(--edge)}
.stage.s1{--tone:#c69564;--edge:#ac765050;--wash:#ac765011}
.stage.s2{--tone:#dfb37b;--edge:#c9a07377;--wash:#dfb37b13}
.stage.s3{--tone:#f0dfc5;--edge:#dfb37b99;--wash:#dfb37b22}
.stage.s3 .threshold{letter-spacing:.06em;font-size:clamp(22px,6.2cqi,40px)}

.alloc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;padding-top:clamp(12px,3cqi,18px);border-top:1px solid #b3946d55;font-size:clamp(13px,3cqi,18px);letter-spacing:.12em;color:var(--muted)}
.alloc-total .num{font-size:clamp(18px,4.2cqi,26px);font-weight:300;letter-spacing:0;color:var(--title)}

/* 8. Sections ---------------------------------------------------------- */
/* Deepborn */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.pillars li{padding-top:22px;border-top:1px solid var(--rule)}
.pillar-n{display:block;font-size:14px;letter-spacing:.16em;color:var(--accent)}
.pillars h3{margin-top:10px;font-size:clamp(24px,2.3vw,30px);font-weight:300}
.pillars p{margin-top:10px;max-width:30ch}
.interaction-line{max-width:46em;padding:22px 26px;border-left:2px solid var(--accent);background:#8a5a360d;font-size:clamp(18px,1.5vw,20px)}
.anatomy{container-type:inline-size;color:var(--text)}
.anatomy .screen{padding:clamp(18px,6cqi,40px);background:linear-gradient(125deg,#2b241c,#18140f 68%)}
.anatomy .inst-title{border-bottom:0;padding-bottom:0;margin-bottom:clamp(14px,3.4cqi,22px)}
.anatomy .rule{height:1px;background:linear-gradient(90deg,#b3946d,#b3946d30 45%,transparent);margin-bottom:clamp(16px,4cqi,26px)}
.anatomy dl,.anatomy dd{margin:0}
.anatomy dt{font-size:clamp(13px,3.3cqi,20px);letter-spacing:.08em;color:#c9a073;margin-bottom:6px}
.anatomy dd{font-size:clamp(13px,3.4cqi,21px);line-height:1.4;letter-spacing:.02em}
.anatomy dd span{display:block}
.anatomy .origin{display:grid;grid-template-columns:1fr 1fr;align-items:center;border:1px solid #7e706166;border-radius:var(--radius-module);overflow:hidden;background:#251e18}
.anatomy .origin > div{padding:clamp(10px,3.4cqi,22px)}
.anatomy .birth{display:grid;grid-template-columns:43fr 57fr;align-items:center;margin-block:clamp(14px,3.6cqi,24px)}
.anatomy .birth .zoom{border:1px solid #a0845466;border-radius:var(--radius-module)}
.anatomy .birth > div{padding-left:clamp(14px,4cqi,28px)}
.anatomy .mini-rule{width:clamp(48px,12cqi,90px);height:1px;background:#ad916f;margin-block:clamp(12px,3.4cqi,24px)}
.anatomy .interaction{display:grid;grid-template-columns:38fr 62fr;align-items:center;padding:clamp(12px,3.6cqi,24px);border:1px solid #776a5c66;border-radius:var(--radius-module);background:#473d3233}
.anatomy .interaction dt{margin:0}
.anims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.anim{padding:9px 9px 18px;border:1px solid #8e7e6d55;border-radius:16px;background:linear-gradient(145deg,#443327,#211911 80%);box-shadow:inset 0 1px 0 #e5e2de33,0 10px 18px #2c1c0d2e;color:var(--text)}
.anim .zoom{border-radius:10px;border:1px solid #94857544}
.anim h4{margin:16px 6px 0;font-size:15px;font-weight:400;letter-spacing:.14em;color:#d9d3cc}
.anim h4::after{content:'';display:block;width:34px;height:1px;background:#b69872;margin-top:10px}
.anim p{margin:12px 6px 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.anim p strong{color:var(--title)}
.split--concepts{align-items:center}
.cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}

.anim p{font-size:15px}

/* Gameplay: alternating editorial rows, image and words. */
.loops{display:grid;gap:var(--loop-gap)}
.loop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.loop:nth-child(even) .media{order:2}
.loop-n{font-size:clamp(44px,5vw,72px);font-weight:200;line-height:1;letter-spacing:-.03em;color:#ac7650cc;font-variant-numeric:lining-nums}
.loop h3{margin-top:14px;font-size:clamp(28px,2.8vw,38px);font-weight:300;letter-spacing:-.01em}
.loop-copy > p:not(.loop-n):not(.spec){margin-top:14px;max-width:34em}
.spec{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;letter-spacing:.16em;color:var(--amber)}

/* Story: darker, cinematic. */
.band.story{background:radial-gradient(ellipse 70% 50% at 50% 0,#2b241c66,transparent 70%),var(--interior)}
.story-years{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px)}
.year-block{padding-top:20px;border-top:1px solid #ac765066}
.year-block .year{font-size:clamp(64px,8.5vw,120px);font-weight:200;line-height:.95;letter-spacing:-.045em;color:var(--amber);font-variant-numeric:lining-nums}
.year-block p:not(.year){margin-top:16px;max-width:34em;font-size:clamp(18px,1.45vw,20px)}
.year-block .year + h3 + p{margin-top:24px;color:var(--title)}
.questions{max-width:24em;margin-inline:auto;text-align:center;font-size:clamp(26px,3vw,40px);font-weight:300;line-height:1.3;letter-spacing:-.01em;color:var(--title);text-wrap:balance}

/* Progress */
.band.progress{isolation:isolate}

.proof-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ps{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid #9c856577;border-radius:4px;font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase}
.ps::before{content:'';flex:none;width:7px;height:7px;border-radius:50%}
.ps--built{color:var(--amber);border-color:#dfb37b88!important}
.ps--built::before{background:var(--amber)}
.ps--impl{color:var(--fg);border-color:var(--fg-muted)!important}
.ps--impl::before{border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.ps--pending{color:var(--fg-muted);border-style:dashed!important}
.ps--pending::before{border:1px solid currentColor}
.on-paper .ps--built{color:var(--ink-accent);border-color:#8a5a36aa!important}
.on-paper .ps--built::before{background:var(--ink-accent)}

/* Funding */
.statement{max-width:30em;font-size:clamp(23px,2.5vw,33px);font-weight:300;line-height:1.4;color:var(--fg-strong)}
.statement strong{font-weight:400;color:var(--accent)}

/* Rewards: comparable rows, prices aligned in one column. */
.tiers{border-top:1px solid var(--rule)}
.tier{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:10px;padding:24px 0;border-bottom:1px solid var(--rule)}
.tier > :not(.perks){grid-column:1}
.tier .perks{grid-column:2;grid-row:1/span 3}
.tier-head{display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:baseline;column-gap:16px}
.tier h3{font-size:19px;letter-spacing:.12em}
/* Prices right-aligned, currency in a fixed column. */
.tier .price{display:grid;grid-template-columns:minmax(0,1fr) 40px;white-space:nowrap;column-gap:8px;align-items:baseline;font-size:40px;font-weight:300;line-height:1;color:var(--title)}
.tier .price .n{text-align:right}
.tier .price .unit{font-size:13px;font-weight:400;letter-spacing:.12em;color:#c9a073}
.tier .role{font-size:14.5px;color:var(--muted)}
.tier .role span{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid #9c856566;border-radius:4px;font-size:12.5px;letter-spacing:.1em;color:var(--title)}
.perks li{position:relative;padding-left:22px;margin-top:6px}
.perks li:first-child{margin-top:0}
.perks li::before{content:'';position:absolute;left:0;top:.82em;width:10px;height:1px;background:var(--amber)}
.perks li.inherit{color:var(--muted);font-style:italic}
.perks li.not{color:var(--muted)}
.tiers--two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);border-top:0}
.tier.tier--intent{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,30px);border:1px solid #dfb37b66;border-radius:12px;background:linear-gradient(140deg,#dfb37b14,#dfb37b04 60%);box-shadow:inset 0 1px 0 #f0dfc51a,0 14px 30px #0907044d}
.tier--intent .tier-head{grid-template-columns:minmax(0,1fr) auto}
.tier--intent h3{color:var(--amber)}
.tier-kicker{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tier-pitch{font-size:clamp(21px,1.9vw,25px);font-weight:300;line-height:1.3;color:var(--title)}
.tier-game{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);font-weight:600;color:var(--title)}
.tier-game--no{color:var(--text)}
.tiers--more{margin-top:clamp(28px,3vw,40px)}
.head .lead-sub{margin-top:10px;font-size:16px;color:var(--muted)}
.tier-notes{display:grid;gap:20px;margin-top:32px;max-width:76ch}
.tier-notes .bullets{font-size:16px}
.offer-facts{display:grid;gap:12px;padding:18px 22px;border-left:2px solid var(--copper);background:#dfb37b0a;font-size:16px}
.offer-facts a{color:var(--amber)}

/* Roadmap */
.road{position:relative;padding-left:76px}
.station{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;column-gap:24px;padding:22px 28px 22px 32px;border:1px solid #b3946d55;border-radius:18px;background:linear-gradient(135deg,#66503b21,#211a1355 40%,#100e0a99);box-shadow:inset 0 1px 0 #efd5b33b,inset 0 -1px 0 #0c0906cc,0 8px 0 -3px #0e0c0999,0 15px 20px #0907043b}
.station + .station{margin-top:16px}
.station::before{content:'';position:absolute;inset:5px;border:1px solid #f0dfc50c;border-radius:13px;pointer-events:none}
/* Rail: one segment per station, from its terminal to the next one. */
.station:not(:last-child)::after{content:'';position:absolute;left:-53px;top:50px;width:2px;height:calc(100% + 16px);background:#ac765088}
.station.today::after{background:linear-gradient(#dfb37b,#ac765088)}
.station:nth-last-child(2)::after{background:repeating-linear-gradient(#ac765088 0 3px,transparent 3px 9px)}
/* Rail terminal: hollow for future steps, lit for today only. */
.station .terminal{position:absolute;z-index:1;left:-76px;top:50px;width:48px;height:48px;transform:translateY(-50%);border-radius:50%;border:1px solid #b3946d55;background:#211a13;display:grid;place-items:center}
.station .terminal::before{content:'';width:26px;height:26px;border-radius:50%;border:2px solid #b3946d;background:#211a13}
.station .terminal::after{content:'';position:absolute;left:100%;top:50%;width:28px;height:1px;background:#c9a07377}
.station.today{border-color:#c9a073aa;background:radial-gradient(ellipse at 0 50%,#ac765035,transparent 70%),linear-gradient(125deg,#49352844,#17120ecc)}
.station.today .terminal{box-shadow:0 0 0 8px #dfb37b12,0 0 28px #dfb37b33}
.station.today .terminal::before{border-color:var(--amber);background:radial-gradient(circle,var(--amber) 0 38%,#211a13 42%)}
.station h3{margin-top:10px;font-size:clamp(24px,2.7vw,34px);font-weight:300;letter-spacing:.05em;line-height:1.15;color:#eee0c8}
.station.today h3{color:var(--amber)}
/* Status chips: wording and border style tell the kind of step, not colour alone. */
.status{display:inline-block;padding:3px 10px;border:1px solid #9c856588;border-radius:4px;font-size:12px;letter-spacing:.14em;color:#c9a073}
.station.today .status{background:var(--amber);border-color:var(--amber);color:#1b150e;font-weight:600}
.station.next .status{border-color:#dfb37b;color:var(--amber)}
.station.later .status{border-style:dashed}
.station .when{margin-top:8px;font-size:13px;letter-spacing:.12em;color:#c9a073}
.station .what{margin-top:14px;max-width:62ch}
.station.later{border-color:#b3946d33;background:linear-gradient(135deg,#41332711,#12100c88)}
.station.later h3{color:#c5b29a}
/* Emblems: same slot, same centre, comparable visual envelope. */
.emblem{position:relative;grid-column:2;grid-row:1/3;width:96px;height:96px;display:grid;place-items:center;align-self:center}
.station .what{grid-column:1}
.emblem::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:1px;background:#b3946d22}
.emblem svg{width:84px;height:84px}
.emblem svg *{fill:none;stroke:#c9a073;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.station.today .emblem svg *{stroke:var(--amber)}
.station.later .emblem svg *{stroke:#bba98d}
@media (min-width:1000px){
  /* Each station reads across: step, then what it contains, then its emblem. */
  .station{grid-template-columns:minmax(0,290px) minmax(0,1fr) 96px;column-gap:32px}
  .station .what{grid-column:2;grid-row:1;margin-top:0}
  .emblem{grid-column:3;grid-row:1}
  #progress .split,#funding .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Creator */
.author{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"portrait head" "portrait text";column-gap:clamp(32px,5vw,80px);align-items:start}
.author-head{grid-area:head}
.author > .prose{grid-area:text}
.author .portrait{grid-area:portrait;position:sticky;top:calc(var(--header-compact) + 28px)}
.author .portrait .screen{background:#11100e}
.author .prov{justify-content:flex-start}
.author h2{margin-bottom:28px}
.author .eyebrow + h2{margin-top:0}
.author .time{font-size:clamp(23px,2.4vw,31px);font-weight:300;line-height:1.3;color:var(--fg-strong)}

/* Risks, AI, FAQ */
.risks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px) clamp(32px,5vw,72px)}
.risks h3{padding-top:18px;border-top:1px solid var(--rule);margin-bottom:12px}
.risks p{max-width:62ch}
.ai{padding:clamp(24px,4vw,48px);border:1px solid #9c856555;border-radius:var(--radius-inner);background:linear-gradient(125deg,#2b241c88,#18140f)}
.ai-title{font-size:clamp(28px,2.8vw,38px)}
.ai-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:28px}
.ai-map li{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid #9c856544;border-radius:12px;background:#11100e66}
.ai-map strong{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.ai-map span{font-size:15.5px;line-height:1.5}
.ai .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,3vw,44px);margin-top:36px;padding-top:28px;border-top:1px solid var(--rule);font-size:16px;line-height:1.65}
.ai .cols h3{margin-bottom:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.faq-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-head{position:sticky;top:calc(var(--header-compact) + 28px)}
.faq-group + .faq-group{margin-top:clamp(28px,3.6vw,40px)}
.faq-group-title{margin-bottom:8px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-group-title + .faq-item{border-top:1px solid var(--rule)}
.faq-item h4{font-size:inherit;font-weight:inherit;line-height:inherit}
.faq-q{position:relative;display:block;width:100%;padding:14px 48px 14px 0;border:0;background:none;text-align:left;font-size:20px;line-height:1.35;color:var(--fg-strong);cursor:default}
.js .faq-q{cursor:pointer}
.js .faq-q::after{content:'';position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1.5px 100% no-repeat;transition:transform .2s}
.faq-q[aria-expanded="true"]::after{transform:rotate(45deg)}
.js .faq-q:hover{color:var(--accent)}
.faq-a{padding:0 48px 20px 0}
.faq-a[hidden]{padding-block:0}
.faq-a p{max-width:64ch}
.faq-a p + p{margin-top:12px}
.follow-inline{display:flex;flex-wrap:wrap;gap:8px 20px}
.follow-inline a{color:var(--accent)}

/* Privacy page */
.privacy-h{margin-top:40px;font-size:clamp(24px,2.4vw,30px)}
.updated{font-size:14px;letter-spacing:.04em;color:var(--fg-muted)}

/* Closing and footer */
.band.closing{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 60% 80% at 50% 100%,#ac765024,transparent 70%),var(--bg)}
.closing-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.closing h2{max-width:12em;font-size:clamp(36px,4.4vw,60px)}
.closing .lead{margin-top:18px;color:var(--muted)}
.follow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.follow-link{display:flex;flex-direction:column;gap:2px;min-height:64px;padding:12px 44px 12px 16px;position:relative;border:1px solid #9c856566;border-radius:10px;background:#11100eaa;text-decoration:none;transition:border-color .18s,background-color .18s}
.follow-link span{font-size:16px;color:var(--title)}
.follow-link small{font-size:13px;color:var(--muted)}
.follow-link::after{content:'↗';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--amber)}
.follow-link:hover{border-color:var(--amber);background:#2b241c}
.site-footer{background:var(--interior);color:var(--muted);font-size:14px}
.site-footer .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px 40px;padding-block:44px}
.site-footer .mark{width:170px}
.site-footer .motto{letter-spacing:.2em;font-size:12px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.site-footer a{text-decoration:none;padding-block:9px;display:inline-block}
.site-footer a:hover{color:var(--title)}

/* 9. Sensor grid -------------------------------------------------------- */
/* Decorative layer behind content: dormant dots in CSS, the canvas takes over
   only on wide screens with a fine pointer and motion allowed (js/sensor-grid.js). */
.sensor-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 78%,transparent)}
.band.progress .sensor-grid{bottom:auto;height:min(980px,100%)}
.sensor-grid__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
.sensor-grid__fallback{position:absolute;inset:0;opacity:.9;transition:opacity .8s;
  background-image:radial-gradient(circle,#ac765038 1px,transparent 1.6px),radial-gradient(circle,#dfb37b2e 1.2px,transparent 1.8px);
  background-size:26px 26px,182px 130px;background-position:0 0,13px 39px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 30%,transparent 100%)}
.sensor-grid.is-live .sensor-grid__canvas{opacity:1}
.sensor-grid.is-live .sensor-grid__fallback{opacity:0}

.rail-nav{display:none}

/* 10. Dialog ----------------------------------------------------------- */
dialog.viewer{width:fit-content;max-width:min(96vw,1500px);max-height:96vh;padding:64px 16px 16px;border:1px solid var(--bezel);border-radius:14px;background:var(--bg);color:var(--text)}
dialog.viewer::backdrop{background:#0b0906e6}
dialog.viewer img{max-width:100%;max-height:calc(96vh - 136px);width:auto;height:auto;margin-inline:auto;object-fit:contain;border-radius:6px}
dialog.viewer p{max-width:80ch;margin:12px 0 0 auto;font-size:13.5px;line-height:1.5;letter-spacing:.03em;color:var(--muted);min-height:1em}
dialog.viewer .close{position:absolute;right:14px;top:12px;min-height:44px;padding:6px 18px;border:1px solid #9c856588;border-radius:7px;background:var(--panel);color:var(--text);font-size:15px}
dialog.viewer .close:hover{border-color:var(--amber);color:var(--title)}
html.has-modal{overflow:hidden}

/* 11. Responsive ------------------------------------------------------- */
@media (max-width:1180px){
  .ai-map{grid-template-columns:1fr 1fr}
}
@media (max-width:999px){
  :root{--gutter:28px}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"title" "copy" "film" "media"}
  .hero-media{margin-top:32px}
  .hero-copy{margin-top:0}
  .hero h1{font-size:clamp(40px,7.4vw,60px)}
  .head{display:block}
  .head .lead{margin-top:20px;max-width:62ch}
  .split,.split--even,.author,.faq-layout,.closing-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .split > .prose,.author .portrait{position:static}
  .author .portrait{max-width:420px}
  .author{grid-template-rows:none;grid-template-areas:"head" "portrait" "text";row-gap:28px}
  .author h2{margin-bottom:0}
  .split > .instrument,.split > figure{max-width:680px}
  .loop{grid-template-columns:1fr;gap:22px}
  .loop:nth-child(even) .media{order:0}
  .loop-n{font-size:40px}
  .ai .cols{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr}
  .tier .perks{grid-column:1;grid-row:auto;margin-top:6px}
  .tiers--two{grid-template-columns:1fr}
  .tier-head{grid-template-columns:minmax(0,1fr) 132px;max-width:520px}
}
@media (max-width:860px){
  :root{--header-h:68px;--header-compact:60px}
  .js .menu-toggle{display:block}
  /* Rewards stay one tap away beside the Menu button. */
  .js .header-rewards{display:inline-flex;align-items:center;min-height:46px;margin-left:auto;padding:8px 14px;border:1px solid #dfb37b77;border-radius:7px;color:var(--title);font-size:16px;text-decoration:none}
  .js .header-rewards:hover{border-color:var(--amber);background:#dfb37b12}
  .site-header .wrap{gap:10px}
  .identity{width:206px;padding:6px 11px}
  .site-header.is-compact .identity{width:180px;padding-block:5px}
  /* The bar gives way to the Menu panel; without JavaScript the bar simply wraps. */
  .js .site-nav{display:none}
  html:not(.js) .site-nav{gap:2px 18px}
}
@media (min-width:861px){
  .menu-panel{display:none!important}
}
@media (max-width:700px){
  :root{--gutter:20px}
  body{font-size:16.5px}
  .identity{width:184px}
  .site-header.is-compact .identity{width:164px}
  .hero{padding-top:22px;padding-bottom:40px}
  .hero .intro{margin-top:16px}
  .facts{margin-top:16px}
  .hero .actions{margin-top:20px}
  .hero .actions{display:grid}
  .facts{gap:8px;font-size:11.5px;letter-spacing:.12em}
  .facts li{padding:4px 8px;border:1px solid #dfb37b38;border-radius:4px}
  .facts li + li::before{content:none}
  .button.cta{flex-wrap:wrap;row-gap:2px;white-space:nowrap}
  /* Lead scene on top, the two others side by side below. */
  .hero-media .scenes{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:4px}
  .scenes .zoom:first-child{grid-row:auto;grid-column:1/3;aspect-ratio:16/10}
  .scenes .zoom:not(:first-child){aspect-ratio:16/10}
  .hero-media{margin-top:22px}
  .hero-media .prov{margin-top:10px}
  .prov{justify-content:flex-start}
  .badge{font-size:11.5px;letter-spacing:.1em;white-space:normal}
  .prov-note{font-size:13px}
  .pillars{grid-template-columns:1fr;gap:14px}
  /* Pillars: number beside the title, as for the gameplay steps. */
  .pillars li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;padding-top:14px}
  .pillars h3{margin-top:0;font-size:22px}
  .pillars p{grid-column:1/-1;margin-top:6px;max-width:none}
  .interaction-line{padding:18px 18px}
  .pair,.story-years,.risks{grid-template-columns:1fr}
  .follow{grid-template-columns:1fr 1fr;gap:8px}
  .follow-link{min-height:58px;padding:10px 30px 10px 12px}
  .follow-link::after{right:10px}
  /* Two Trailer 1 stills side by side: both stay readable and open full size. */
  .story .pair{grid-template-columns:1fr 1fr;gap:8px}
  .story .pair .frame{border-radius:10px}
  .anims{grid-template-columns:1fr;gap:12px}
  /* Animations stay together: picture left, words right. */
  .anim{display:grid;grid-template-columns:36% minmax(0,1fr);column-gap:14px;align-items:center;padding:8px}
  .anim .zoom{grid-row:1/3}
  .anim h4{margin:0;align-self:end;font-size:14px}
  .anim p{margin:8px 0 0;align-self:start;font-size:14.5px}
  /* Everyday life: the two interface concepts side by side, each opens full size. */
  .sheet.pair{grid-template-columns:1fr 1fr;gap:6px}
  /* Gameplay steps: the number sits beside the step name. */
  .loop-copy{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline}
  .loop-copy > :not(.loop-n):not(h3){grid-column:1/-1}
  .loop-n{font-size:34px}
  .loop h3{margin-top:0}
  .author .portrait{max-width:300px}
  .tier{padding:20px 0}
  .faq-q{padding-block:14px}
  .ai-map{gap:10px;margin-top:20px}
  .ai-map li{padding:12px 14px}
  .statement{font-size:21px}
  .head .lead{margin-top:14px}
  .station .what{margin-top:10px}
  .risks{gap:28px}
  .spec{margin-top:14px;padding-top:10px}
  .prose h3{margin-top:28px}
  .interaction-line{font-size:17px}
  .risks h3{padding-top:14px;margin-bottom:8px;font-size:20px}
  .year-block .year{font-size:56px}
  .site-footer .wrap{padding-block:32px}
  /* Four character cards: a manual horizontal rail, the next card always peeking out. */
  .cast{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(8px,1.2vw,14px);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#ac765088 transparent}
  .cast .zoom{scroll-snap-align:start}
  .js .rail-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
  .rail-btn{flex:none;width:44px;height:44px;padding:0;border:1px solid #dfb37b77;border-radius:50%;background:transparent;color:var(--fg-strong);font-size:24px;line-height:1}
  .rail-btn:disabled{opacity:.35;cursor:default}
  .rail-hint{font-size:13px;text-align:center;color:var(--fg-muted)}
  .ai-map{grid-template-columns:1fr}
  .road{padding-left:40px}
  .station:not(:last-child)::after{left:-29px;top:40px;width:1px;height:calc(100% + 16px)}
  .station{grid-template-columns:minmax(0,1fr) 52px;column-gap:12px;padding:20px 16px 20px 18px;border-radius:14px}
  .station .terminal{left:-40px;top:40px;width:24px;height:24px}
  .station .terminal::before{width:12px;height:12px}
  .station .terminal::after{width:16px}
  .station.today .terminal{box-shadow:0 0 0 5px #dfb37b12,0 0 18px #dfb37b33}
  .station .what{grid-column:1/-1}
  .emblem{grid-row:1;width:52px;height:52px}
  .emblem::before{display:none}
  .emblem svg{width:46px;height:46px}
  .tier-head{grid-template-columns:minmax(0,1fr) 118px}
  .tier .price{font-size:34px}
  .faq-q{font-size:18px;padding-right:40px}
  .faq-a{padding-right:0}
  .site-footer .wrap{grid-template-columns:1fr;gap:16px}
  .closing .actions{display:grid}
  .bezel{padding:5px;border-radius:17px}
  .bezel::after{border-radius:14px}
  .bezel > .screen{border-radius:12px}
}
@media (max-width:480px){
  /* Logo, Rewards and Menu side by side down to 360 px. */
  .identity,.site-header.is-compact .identity{width:150px;padding:5px 9px}
  .js .header-rewards{padding:8px 10px;font-size:15px}
  .js .menu-toggle{min-width:0;padding:8px 12px;font-size:15px}
  .js .header-rewards,.js .menu-toggle{white-space:nowrap}
}
@media (max-width:380px){
  /* 360 px: logo, Rewards and Menu each stay on one line. */
  .identity,.site-header.is-compact .identity{width:132px;padding:5px 8px}
  .js .header-rewards{padding:8px 9px}
  .js .menu-toggle{padding:8px 10px}
}

/* 12. Motion ----------------------------------------------------------- */
/* Short reveals, the stretch curve drawing, and nothing that hides content without JavaScript. */
@media (prefers-reduced-motion:no-preference){
  /* Reveals: inner elements only, 380 ms at most. A section itself is never hidden. */
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .38s var(--ease),transform .38s var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
  .js .ascent .curve{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--mech)}
  .js .ascent.drawn .curve{stroke-dashoffset:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .zoom:hover img{transform:none}
}
@media print{
  .site-nav,.menu-toggle,.actions,.sensor-grid{display:none}
  .js body{padding-top:0}
  .js .site-header{position:static}
}

/* 13. Cinematic systems ------------------------------------------------ */
/* Decorative layers only: every pseudo-element below carries no text, and every
   animated state falls back to the final, readable state without JavaScript
   or with reduced motion (section 12 switches all motion off). */

/* Energy conduits: a fine copper line runs from the top edge of a key section
   down into the tick of its eyebrow; one light pulse travels it once. */
.band.conduit::before,.band.conduit::after{content:'';position:absolute;top:0;left:max(var(--gutter),calc((100% - var(--max)) / 2));width:1px;pointer-events:none}
.band.conduit::before{height:calc(var(--band-pad) + 11px);background:linear-gradient(#ac765000,#ac76506b 35%,#ac765099)}
.band.conduit.on-paper::before{background:linear-gradient(#8a5a3600,#8a5a3655 35%,#8a5a3688)}
.band.conduit::after{--ch:calc(var(--band-pad) + 11px);left:calc(max(var(--gutter),calc((100% - var(--max)) / 2)) - 1px);width:3px;height:56px;border-radius:3px;background:linear-gradient(#f0cf9900,#f6dcae,#f0cf9900);box-shadow:0 0 10px #dfb37b66;opacity:0}
.band.conduit.on-paper::after{background:linear-gradient(#c6956400,#c69564,#c6956400);box-shadow:0 0 8px #ac765055}
.band.conduit > .wrap{position:relative}

/* Gameplay: a continuity rail in the left gutter links the four steps (desktop). */
@media (min-width:1000px){
  .loop{position:relative}
  .loop::before{content:'';position:absolute;z-index:1;left:calc(var(--gutter) / -2 - 4px);top:50%;width:9px;height:9px;margin-top:-4.5px;transform:rotate(45deg);border:1px solid #ac765099;background:var(--bg);transition:border-color .38s,background-color .38s,box-shadow .38s}
  .loop::after{content:'';position:absolute;left:calc(var(--gutter) / -2);top:0;width:1px;height:calc(100% + var(--loop-gap));background:linear-gradient(#dfb37b,#ac7650) top/1px 0 no-repeat,#ac76502e;transition:background-size .4s var(--ease) .1s}
  .loop:first-child::after{top:50%;height:calc(50% + var(--loop-gap))}
  .loop:last-child::after{height:50%}
  .loop.is-in::before,.loops:not(.is-sequenced) .loop::before{border-color:var(--amber);background:#3a2a1c;box-shadow:0 0 10px #dfb37b40}
  .loop.is-in::after,.loops:not(.is-sequenced) .loop::after{background-size:1px 100%}
}

/* Progress and funding instruments: the needles settle once, the values never move. */
.dial-arc{stroke-dasharray:1}

/* Roadmap: one pulse runs down the rail from TODAY; future terminals glow briefly, then rest. */
.road::before{content:'';position:absolute;z-index:2;left:23px;top:50px;width:2px;height:70px;margin-top:-35px;border-radius:2px;background:linear-gradient(#f0cf9900,#f6dcae,#f0cf9900);box-shadow:0 0 12px #dfb37b88;opacity:0;pointer-events:none}
.emblem svg{transition:transform .35s var(--ease),filter .35s}


/* Deepborn: ivory kept, with a near-invisible technical grid and copper registration marks. */
#deepborn{background-color:var(--paper);background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23ac7650' stroke-opacity='.55'%3E%3Cpath d='M23 4v38M4 23h38'/%3E%3Ccircle cx='23' cy='23' r='7'/%3E%3C/g%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23ac7650' stroke-opacity='.45'%3E%3Cpath d='M23 4v38M4 23h38'/%3E%3Cpath d='M17 23h12' stroke-width='3' stroke-opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),
  linear-gradient(#8a5a3608 1px,transparent 1px),linear-gradient(90deg,#8a5a3608 1px,transparent 1px);
  background-repeat:no-repeat,no-repeat,repeat,repeat;
  background-position:right max(16px,calc((100% - var(--max)) / 2 - 64px)) top 36px,left max(16px,calc((100% - var(--max)) / 2 - 64px)) bottom 36px,0 0,0 0;
  background-size:46px 46px,46px 46px,64px 64px,64px 64px}
#deepborn .stack-l > * + *,#risks .stack-l > * + *{margin-top:clamp(36px,4.4vw,60px)}

/* Use of AI: the three long texts become disclosures once js/site.js has run. */
.ai .cols.is-enhanced{grid-template-columns:1fr;gap:12px;padding-top:24px}
.ai-d.is-ready,.disclosure.is-ready{border:1px solid #9c856544;border-radius:12px;background:#11100e66;transition:border-color .2s,background-color .2s}
.ai-d.is-ready.is-open,.disclosure.is-ready.is-open{border-color:#dfb37b66;background:#11100e99}
.ai .cols .ai-d.is-ready h3,.disclosure.is-ready .disclosure-title{margin:0}
/* Private Discord details under the rewards: same disclosure treatment. */
.disclosure-title{margin-bottom:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.dis-a{padding:0 22px 22px}
.dis-a[hidden]{padding-block:0}
.dis-a p{font-size:16px}
.ai-q,.dis-q{position:relative;display:flex;align-items:center;width:100%;min-height:58px;padding:16px 56px 16px 22px;border:0;border-radius:11px;background:none;text-align:left;letter-spacing:inherit;text-transform:inherit;color:inherit;font-weight:inherit}
.ai-q::after,.dis-q::after{content:'';position:absolute;right:22px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1.5px 100% no-repeat;transition:transform .2s}
.ai-q[aria-expanded="true"]::after,.dis-q[aria-expanded="true"]::after{transform:rotate(45deg)}
.ai-q:hover,.dis-q:hover{background:#dfb37b0d;color:var(--title)}
.ai-q:focus-visible,.dis-q:focus-visible{outline-offset:-3px}
.ai-a{max-width:72ch;padding:0 22px 22px}
.on-paper .disclosure-title{color:var(--ink-accent)}
.on-paper .disclosure.is-ready{border-color:#8a5a3640;background:#fffaf266}
.on-paper .disclosure.is-ready.is-open{border-color:#8a5a3699;background:#fffaf2b3}
.on-paper .dis-q:hover{background:#8a5a360d;color:var(--ink-strong)}

/* Bridge to the rewards, after the first proof and the game. */

/* Creator: the next step, right before the offer. */
.next-step{padding:22px 24px;border-left:2px solid var(--accent);background:#8a5a360d}
.next-step h3{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.next-step > * + *{margin-top:12px}
.next-step .actions{margin-top:18px}

/* Technology: benefit first, status always visible, the explanation behind one button per topic. */
.tech-key{display:flex;flex-wrap:wrap;gap:8px 10px}
.tech-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px) clamp(24px,4vw,56px)}
.tech-item{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:18px;border-top:1px solid var(--rule)}
.tech-item h4{font-size:clamp(22px,2vw,26px);font-weight:300}
.tech-benefit{max-width:44ch}
.tech-more{align-self:stretch;margin-top:4px}
.tech-more .disclosure-title{margin-bottom:6px}
.tech-more .dis-q{min-height:46px;padding:10px 48px 10px 16px}
.tech-more .dis-q::after{right:16px}
.tech-more .dis-a{padding:0 16px 16px}
.tech-more .dis-a[hidden],.gallery .dis-a[hidden]{padding-block:0}
.ps-note{font-size:14px;line-height:1.4;color:var(--fg-muted)}
.tech-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tech-more .disclosure-body > * + *{margin-top:10px}
.tech-limit{font-size:16px;color:var(--fg-muted)}
.tech-limit strong{color:var(--fg-strong)}
.tech-later{max-width:72ch;padding-top:20px;border-top:1px solid var(--rule)}
@media (max-width:999px){.tech-list{grid-template-columns:minmax(0,1fr)}}

/* World: the concept gallery behind one heading. */
.gallery .dis-a{padding:6px clamp(12px,1.6vw,22px) clamp(16px,2vw,24px)}

/* Risks: each development opens on demand; the summary sits next to the offer. */
.risks-lead{margin-top:clamp(20px,2.4vw,28px);margin-bottom:clamp(24px,3vw,36px);max-width:62ch}
.risks .disclosure-title{font-size:20px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg-strong)}
.risks .disclosure.is-ready{align-self:start}
.js .risks{gap:14px clamp(16px,2vw,24px)}
.risks .disclosure.is-ready h3{padding-top:0;border-top:0;margin:0}
.risks .disclosure.is-ready .dis-q{line-height:1.35}
.risks .dis-a p{font-size:17px}
.ai-a[hidden]{padding-block:0}

/* Logo: one faint ember on 2108 at first paint. */
.js .identity{position:relative}
.js .identity::after{content:'';position:absolute;inset:7px 12px;pointer-events:none;background:radial-gradient(ellipse 22% 30% at 50% 88%,#ff9d4d,#ff9d4d00 72%);mix-blend-mode:screen;opacity:0}

@media (prefers-reduced-motion:no-preference){
  /* Hero: slow amber breathing on the metal bezel, a rare glint across the glass. */
  @media (min-width:1000px){
    .hero-media .bezel::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px #dfb37b70,0 0 24px #dfb37b33,inset 0 0 12px #dfb37b2e;opacity:.1;animation:bezel-breathe 9s ease-in-out infinite alternate}
    .hero-media .scenes::after{content:'';position:absolute;z-index:2;top:-10%;bottom:-10%;left:0;width:34%;pointer-events:none;background:linear-gradient(100deg,#fff3dc00 25%,#fff3dc0f 45%,#fff3dc1c 50%,#fff3dc0f 55%,#fff3dc00 75%);transform:translateX(-130%) skewX(-12deg);animation:glass-glint 14s cubic-bezier(.45,0,.25,1) 2.5s infinite}
    .hero.is-off .hero-media .bezel::before,.hero.is-off .hero-media .scenes::after{animation-play-state:paused}
  }
  /* Hero depth: images drift a few pixels with the pointer, then return (js/site.js). */
  .hero.has-depth .scenes img{transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(var(--ds,1.03));transition:transform .9s var(--ease)}
  .hero.has-depth .scenes .zoom:hover img{transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(calc(var(--ds,1.03) + .015))}

  .band.conduit.is-lit::after{animation:conduit-pulse 1.15s cubic-bezier(.4,0,.2,1) 1 forwards}
  .band.conduit.is-lit .eyebrow::before{animation:conduit-tick .8s ease-out .9s 1}

  /* Sequenced reveal: number, then media, then words. */
  .seq .rv{transition:opacity .36s var(--ease),transform .36s var(--ease);transition-delay:var(--rv-d,0ms)}
  .seq:not(.is-in) .rv{opacity:0;transform:translateY(12px)}

  /* Instruments: armed below the fold by js/site.js, released once when visible. */
  .gauge .fill,.gauge .interval{transform-origin:left center;transition:transform .78s var(--mech)}
  .gauge .interval{transition-delay:.08s}
  .gauge .needle{transition:opacity .25s ease .62s}
  .gauge.is-armed .fill,.gauge.is-armed .interval{transform:scaleX(0)}
  .gauge.is-armed .needle{opacity:0}
  .stock .dial-arc{transition:stroke-dashoffset .85s var(--mech)}
  .stock .dial-tip{transition:opacity .2s ease .62s}
  .stock.is-armed .dial-arc{stroke-dashoffset:1}
  .stock.is-armed .dial-tip{opacity:0}
  .budget-top circle[stroke-width="22"]{transition:stroke-dasharray .85s var(--mech)}
  .budget-top.is-armed circle[stroke-width="22"]{stroke-dasharray:0 100}
  .alloc .alloc-bar span{transform-origin:left center;transition:transform .7s var(--mech) .1s}
  .alloc.is-armed .alloc-bar span{transform:scaleX(0)}
  .stage .energy i.on{transform-origin:center bottom;transition:transform .45s var(--mech)}
  .stage .energy i.on:nth-child(2){transition-delay:.1s}
  .stage .energy i.on:nth-child(3){transition-delay:.2s}
  .stage.is-armed .energy i.on{transform:scaleY(0)}
  .instrument .is-armed .big{opacity:.35}
  .instrument .stock .big,.instrument .gauge .big,.instrument .alloc .big,.instrument .budget-top .big{transition:opacity .45s ease .3s}

  /* Roadmap pulse and the brief, faint light it leaves on future terminals. */
  .road.is-pulsing::before{animation:road-pulse var(--road-dur,1.8s) cubic-bezier(.45,0,.25,1) 1 forwards}
  .station:not(.today).is-touched .terminal{animation:terminal-touch 1.5s ease-out var(--touch-d,0ms) 1 backwards}
  .station:not(.today).is-touched .terminal::before{animation:terminal-ring 1.5s ease-out var(--touch-d,0ms) 1 backwards}

  .js .identity::after{animation:ember 2.8s ease-in-out .5s 1 both}
}

@media (hover:hover) and (pointer:fine){
  .station:hover .emblem svg{transform:scale(1.05) rotate(-2deg);filter:drop-shadow(0 0 6px #dfb37b40)}
  .pillars li{transition:border-color .25s}
  .pillar-n,.pillars h3{transition:transform .25s var(--ease),color .25s}
  .pillars li:hover{border-top-color:var(--accent)}
  .pillars li:hover .pillar-n{transform:translateX(4px)}
  .pillars li:hover h3{color:var(--ink-accent)}
}
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  .tier{transition:background-color .25s,box-shadow .25s}
  .tiers--more .tier:hover{background:linear-gradient(90deg,#dfb37b0a,#dfb37b00 70%)}
  .tier--intent:hover{border-color:#dfb37b99}
}
@media (max-width:700px){
  .road::before{left:10px;top:40px}
  #deepborn{background-image:linear-gradient(#8a5a3608 1px,transparent 1px),linear-gradient(90deg,#8a5a3608 1px,transparent 1px);background-repeat:repeat;background-position:0 0;background-size:64px 64px}
}

@keyframes bezel-breathe{from{opacity:.1}to{opacity:.62}}
@keyframes glass-glint{0%{transform:translateX(-130%) skewX(-12deg)}13%,100%{transform:translateX(330%) skewX(-12deg)}}
@keyframes conduit-pulse{0%{opacity:0;transform:translateY(-56px)}18%{opacity:1}85%{opacity:.9}100%{opacity:0;transform:translateY(calc(var(--ch) - 34px))}}
@keyframes conduit-tick{0%,100%{opacity:.7;box-shadow:none}35%{opacity:1;box-shadow:0 0 8px currentColor}}
@keyframes road-pulse{0%{opacity:0;transform:translateY(0)}10%{opacity:1}88%{opacity:.85}100%{opacity:0;transform:translateY(var(--road-len,600px))}}
@keyframes terminal-touch{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 6px #dfb37b0c,0 0 18px #dfb37b2b}}
@keyframes terminal-ring{0%,100%{border-color:#b3946d}30%{border-color:#d4ad7c}}
@keyframes ember{0%,100%{opacity:0}38%{opacity:.5}}

/* 14. Direct engine captures ------------------------------------------ */
/* The second visual register, kept apart from concept art: precise, technical, direct.
   Fine copper borders, ivory text, amber only for active states, numbers and junctions.
   A capture is never cropped, covered or drawn over; its only motion is a 0.985 to 1 scale
   and a light dim while another act is active. Translations sit in HTML under the image. */
.zoom picture{display:block}
.cap-frame{position:relative;border:1px solid #ac765099;border-radius:4px;background:var(--interior);overflow:hidden;box-shadow:0 12px 28px #0907044d}
.on-paper .cap-frame{border-color:#8a5a36aa;box-shadow:0 10px 24px #2c1c0d24}
.on-paper .badge--capture{background:var(--ink-strong);border-color:var(--ink-strong);color:var(--paper)}
.on-paper .badge--capture::before{background:var(--amber);box-shadow:none}


/* Translation of the French WIP interface, always under the capture. */
.translation{margin-top:16px;padding:12px 16px;border-left:1px solid var(--copper);background:#dfb37b08}
.on-paper .translation{border-left-color:var(--ink-accent);background:#8a5a360a}
.tr-label{font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.tr-quote{margin-top:6px;font-size:17px;line-height:1.5;color:var(--fg-strong)}
.tr-sub{margin-top:8px;font-size:14.5px;line-height:1.45;color:var(--fg-muted)}

/* Proof section: machine, shelter, person. Phones and tablets read three blocks in order. */
.band.proof{isolation:isolate;background:radial-gradient(ellipse 70% 40% at 50% 0,#2b241c66,transparent 70%),var(--interior)}
.proof .sensor-grid__fallback{opacity:.6}
.acts{display:grid;gap:16px}
.act figure{display:grid;gap:14px}
.act:not(:last-child)::after{content:'';display:block;width:1px;height:28px;margin:18px 0 0 3px;background:linear-gradient(#ac7650aa,#ac765022)}
.act-label{font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--title)}
.act-node{display:inline-block;width:7px;height:7px;margin-right:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px #dfb37b1f;vertical-align:.1em}
.act-n{color:var(--amber);font-variant-numeric:tabular-nums lining-nums}
.act-text{margin-top:8px;max-width:34em;font-size:17px;line-height:1.5;color:var(--text)}
.act .prov{justify-content:flex-start}
.act .badge,.strip .badge,.progress .badge{white-space:normal}
.chain-rail,.chain-prov{display:none}
.chain-end{display:flex;align-items:center;gap:16px;margin-top:clamp(32px,4vw,56px);font-size:clamp(24px,2.4vw,32px);font-weight:300;line-height:1.3;letter-spacing:-.01em;color:var(--title)}
.chain-end::before{content:'';flex:none;width:28px;height:1px;background:var(--copper)}
/* Invitation to the rewards right after the first proof. */
.proof-next{margin-top:clamp(20px,2.4vw,28px);padding-top:16px;border-top:1px solid #ac765044;font-size:17px;color:var(--text)}
.proof-next a{margin-left:6px;color:var(--amber);font-weight:600;white-space:nowrap}

/* Desktop: three acts side by side, the person largest. The slots share one height so the
   captions line up and the consequence signal runs between images and words. */
@media (min-width:1000px){
  .chain-stage{position:relative;container-type:inline-size}
  .chain-prov{display:flex;justify-content:flex-start;margin:0 0 18px}
  .act .prov{display:none}
  .acts{grid-template-columns:minmax(0,23fr) minmax(0,27fr) minmax(0,50fr);column-gap:40px;align-items:start}
  .act:not(:last-child)::after{content:none}
  .act figure{gap:0}
  .act-slot{display:flex;align-items:center;height:calc((100cqw - 80px) * .5 * 830 / 1600 + 2px)}
  .act-frame{width:100%}
  .act-cap{position:relative;padding-top:30px}
  .act-node{position:absolute;left:0;top:9px;margin:0}
  .act-text{font-size:16px}
  .act .tr-quote{font-size:16px}
  .act .translation{margin-top:12px}
  .act .prov{margin-top:10px}
  .chain-rail{display:block;position:absolute;z-index:0;top:var(--rail-t,0);left:var(--rail-l,0);width:var(--rail-w,0);height:1px;background:#ac765044;pointer-events:none}
  .chain-rail::after{content:'';position:absolute;inset:-.5px 0;background:linear-gradient(90deg,#ac7650,#dfb37b);transform-origin:left center;transform:scaleX(var(--sig,1))}
  .act-node{z-index:1}
  .chain.is-pinned .chain-stage{position:sticky}
  .chain.is-pinned .act:not(.is-reached) .act-node{background:var(--interior);box-shadow:inset 0 0 0 1px #ac7650}
}
/* The signal head and the active act exist only while the stage is held (js/site.js). */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .chain.is-pinned .chain-rail::before{content:'';position:absolute;z-index:1;top:-3px;left:-3px;width:7px;height:7px;border-radius:50%;background:#f6dcae;box-shadow:0 0 10px #dfb37b;transform:translateX(calc(var(--sig,1) * var(--rail-w,0px)))}
  .act-frame{transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
  .act-frame img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s var(--ease)}
  .act-label,.act-text,.act .translation{transition:opacity .4s var(--ease)}
  .chain.is-pinned .act-frame{transform:scale(.985)}
  .chain.is-pinned .act-frame img{filter:brightness(.84) contrast(.96) saturate(.9)}
  .chain.is-pinned .act.is-active .act-frame{transform:none;border-color:#dfb37bb3;box-shadow:0 0 0 1px #dfb37b2e,0 0 26px #dfb37b1a,0 12px 28px #0907044d}
  .chain.is-pinned .act.is-active .act-frame img{filter:contrast(1.04)}
  .chain.is-pinned .act:not(.is-reached) :is(.act-label,.act-text,.translation){opacity:.78}
  .chain.is-pinned .act-node{transition:background-color .3s,box-shadow .3s}
}

/* Give birth: the incubator sequence, one process read left to right (stacked on phones). */
.strip{margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--rule)}
.strip-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 32px;align-items:baseline;margin-bottom:20px}
.strip-title{font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--title)}
.strip-head p{color:var(--text)}
.strip-steps{display:grid;gap:22px}
.strip-step{position:relative}
.step-cap{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;font-weight:600;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--title)}
.step-n{color:var(--amber);font-variant-numeric:tabular-nums lining-nums}
@media (min-width:861px){
  .strip-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;container-type:inline-size}
  /* Copper link through the gap, level with the middle of the images. */
  .strip-step + .strip-step::before{content:'';position:absolute;left:-28px;top:calc((100cqw - 56px) / 3 * 828 / 1600 / 2);width:28px;height:1px;background:linear-gradient(90deg,#ac7650,#dfb37b)}
  .strip-step + .strip-step::after{content:'';position:absolute;left:-4px;top:calc((100cqw - 56px) / 3 * 828 / 1600 / 2 - 3px);width:7px;height:7px;border-radius:50%;background:var(--amber)}
}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .strip-step{--sd:0s}
  .strip-step:nth-child(2){--sd:.5s}
  .strip-step:nth-child(3){--sd:1s}
  .strip-step img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .6s var(--ease) var(--sd)}
  .strip-step + .strip-step::before{transform-origin:left center;transition:transform .45s var(--ease) calc(var(--sd) - .45s)}
  .strip-step + .strip-step::after{transition:opacity .2s ease var(--sd)}
  .strip.is-armed .strip-step img{filter:brightness(.45) saturate(.6);transition:none}
  .strip.is-armed .strip-step + .strip-step::before{transform:scaleX(0);transition:none}
  .strip.is-armed .strip-step + .strip-step::after{opacity:0;transition:none}
}

.tile-cap{margin-top:10px;font-size:15px;line-height:1.5;color:var(--muted)}
.tile-cap strong{color:var(--title)}
.progress .prose figure{margin-top:28px}
.progress .prose figure .prov{justify-content:flex-start;margin-top:8px}

@media (max-width:999px){
  .strip-head{grid-template-columns:1fr}
}
@media (max-width:700px){
  .tile-cap{font-size:14.5px}
  .act-text,.tr-quote{font-size:16px}
  .chain-end{font-size:22px}
}

/* Give birth on desktop: the concept row keeps its grid and its rail diamond; the strip sits below. */
.loop--birth{display:block}
.loop--birth .loop-main{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,64px);align-items:center}
@media (max-width:999px){
  .loop--birth .loop-main{grid-template-columns:1fr;gap:22px}
}
@media (min-width:1000px){
  .loop--birth::before{content:none}
  .loop--birth .loop-main{position:relative}
  .loop--birth .loop-main::before{content:'';position:absolute;z-index:1;left:calc(var(--gutter) / -2 - 4px);top:50%;width:9px;height:9px;margin-top:-4.5px;transform:rotate(45deg);border:1px solid #ac765099;background:var(--bg);transition:border-color .38s,background-color .38s,box-shadow .38s}
  .loop--birth.is-in .loop-main::before,.loops:not(.is-sequenced) .loop--birth .loop-main::before{border-color:var(--amber);background:#3a2a1c;box-shadow:0 0 10px #dfb37b40}
}

/* 15. Films (pass 2) ----------------------------------------------------- */
/* Native players only: controls, playsinline, preload="none", no autoplay. Each film keeps its own
   proportions (16:9, or 1920/992 for the engine recording): no cover, no crop of the interface.
   The provenance label sits above the film, outside its pixels. */
.film{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start}
.film-prov{justify-content:flex-start;margin:0 0 10px}
.film-frame{position:relative;border:1px solid #ac765099;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 12px 28px #0907044d}
.film-frame video{display:block;width:100%;height:auto;background:#000}
.film-frame--wide video{aspect-ratio:1920/1080}
.film-frame--engine video{aspect-ratio:1920/992}
.film-cap > * + *{margin-top:12px}
.film-title{font-size:clamp(22px,2vw,28px);font-weight:300;line-height:1.25;letter-spacing:0;color:var(--fg-strong)}
.film-meta{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.film-note{padding-left:14px;border-left:2px solid var(--accent);color:var(--fg-strong)}
.film-campaign{font-size:16px;color:var(--fg-muted)}
.film-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:15px}
.film-file a{color:var(--accent)}
.film-size{color:var(--fg-muted);font-size:13.5px}
.film-still{width:auto;min-height:44px;padding:8px 14px;border:1px solid var(--rule);border-radius:6px;color:var(--fg-strong);font-size:15px;cursor:zoom-in}
.film-still:hover{border-color:var(--accent)}
.film-back{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.film-back a{color:var(--amber);font-weight:600}
.film-back span{font-size:15px;color:var(--muted)}
/* Subtitles: readable on any frame; the cues themselves sit near the top (WebVTT line:18%) so the
   in-game dialogue window stays visible. */
video::cue{background:rgba(10,8,6,.86);color:#fff6e8;font-size:clamp(14px,1.7vw,22px);line-height:1.35;white-space:pre-line}
/* pre-line is the WebVTT default; without it Chromium kept a long cue on one line, cut by the frame at 390 px. */
/* Trailer 1 on its own, in the world chapter: compact, beside its caption. */
.film--compact{grid-template-columns:minmax(0,520px) minmax(0,1fr);margin-top:clamp(28px,3vw,44px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid #dfb37b1f}
.film--compact .film-cap{align-self:center;max-width:52ch}
.film--compact .film-title{font-size:clamp(22px,2vw,26px)}
/* First proof: the recording, then the three captures. */
.film--proof{margin-bottom:clamp(36px,4.4vw,60px)}
.transcript{margin-top:16px}
.transcript-lines{padding-left:1.4em;list-style:decimal}
.transcript-lines li + li{margin-top:4px}
.transcript-note{margin-top:10px;font-size:14.5px;color:var(--fg-muted)}
.film--proof .dis-a,.film--proof .disclosure-body{font-size:16px}
/* Vision: one player, a two-button language choice. */
.film-lang{display:inline-flex;margin-top:12px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.film-lang button{min-height:44px;min-width:96px;padding:8px 16px;border:0;background:transparent;color:var(--fg-strong);font-size:15px}
.film-lang button + button{border-left:1px solid var(--rule)}
.film-lang button[aria-pressed="true"]{background:var(--ink-strong);color:var(--paper);font-weight:600}
.film-lang button:focus-visible{outline-offset:-4px}
.film--vision .actions{margin-top:14px}
/* Animated explainer: dashed frame and square mark, distinct in shape and wording from captures and concepts. */
.badge--explainer{border:1px dashed #dfb37b99;color:var(--amber)}
.badge--explainer::before{width:7px;height:7px;border:1px solid currentColor}
.on-paper .badge--explainer{border-color:#8a5a36;color:var(--ink-accent)}
/* Progress: three engine captures in one compact row. */
.engine-row-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.engine-row .prov{justify-content:flex-start;margin-top:14px}
@media (max-width:999px){
  .film,.film--compact{grid-template-columns:minmax(0,1fr)}
  .film--compact .film-media{max-width:640px}
  .engine-row-list{grid-template-columns:1fr 1fr}
  .engine-row-list li:last-child{grid-column:1/-1}
}
@media (max-width:700px){
  .engine-row-list{grid-template-columns:1fr}
  .film-meta{font-size:12.5px;letter-spacing:.1em}
}

/* 16. Shorter road to Rewards (20261007-1) ------------------------------------ */
/* Every picture stays on the page and opens full size; text sizes do not change. Engine captures that
   carry interface text (the three acts of #proof, Nola in the incubator) keep the full width. */
@media (min-width:701px) and (max-width:999px){
  /* Tablets: the gameplay steps keep their desktop rows, image and words side by side. */
  .loop,.loop--birth .loop-main{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px}
  .loop:nth-child(even) .media{order:2}
  /* The creator: portrait beside the words, as on desktop. */
  .author{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"portrait head" "portrait text";column-gap:32px;row-gap:0}
  .author .portrait{max-width:none}
  .author h2{margin-bottom:24px}
}
@media (min-width:701px) and (max-width:860px){
  .strip-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media (max-width:700px){
  /* Gameplay steps: the concept illustration beside the step number and name, the words below. */
  .loop,.loop--birth .loop-main{grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:16px;row-gap:14px;align-items:start}
  .loop > .media,.loop--birth .loop-main > .media{grid-column:1;grid-row:1}
  .loop-copy{display:contents}
  .loop-copy > .loop-n{grid-column:2;grid-row:1;align-self:start;margin-top:2px}
  .loop-copy > h3{grid-column:2;grid-row:1;align-self:start;margin-top:44px}
  .loop-copy > :not(.loop-n):not(h3){grid-column:1/-1}
  .loop-copy > p:not(.loop-n):not(.spec){margin-top:0}
  .loop .media .prov{margin-top:8px}
  /* Incubator sequence: power and incubation side by side, the birth (with its notice) full width. */
  .strip-steps{grid-template-columns:1fr 1fr;gap:14px 8px}
  .strip-step:last-child{grid-column:1/-1}
  /* The creator: portrait beside the title. */
  .author{grid-template-columns:minmax(0,11fr) minmax(0,14fr);grid-template-areas:"portrait head" "text text";column-gap:16px;row-gap:24px}
  .author .portrait{max-width:none}
  .author-head{align-self:end}
}

/* 17. Complete revision (20261007-3) ------------------------------------------- */
/* First button: the real conversation, with its length and source on a second line. */
.button--film{flex-direction:column;gap:2px;padding-block:10px}
.button-sub{font-size:13px;font-weight:600;letter-spacing:.06em;opacity:.78}
/* Concept label on the hero frame itself, readable as soon as the image appears; it sits in the
   top corner, away from faces. The caption under the frame stays. */
.hero-media .bezel{position:relative}
.frame-tag{position:absolute;z-index:2;top:14px;left:14px;padding:4px 9px;border:1px solid #dfb37b88;border-radius:4px;background:#18140fd9;color:var(--amber);font-size:11.5px;font-weight:600;line-height:1.25;letter-spacing:.12em;pointer-events:none}
/* Technology: four ideas, each with its topics. */
.tech-group{display:grid;gap:clamp(16px,2vw,22px)}
.tech-group-title{font-size:clamp(24px,2.4vw,30px);font-weight:300;letter-spacing:-.005em;color:var(--fg-strong)}
.tech-local{display:grid;gap:14px;padding:clamp(20px,2.6vw,30px);border:1px solid var(--rule);border-left:2px solid var(--accent);border-radius:8px;background:#8a5a360a}
.tech-local-text{max-width:70ch;color:var(--fg-strong)}
.local-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;margin:4px 0 0}
.local-facts dt{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.local-facts dd{margin:6px 0 0}
.tech-local-more a{color:var(--accent);font-weight:600}
@media (max-width:860px){.local-facts{grid-template-columns:1fr}}
/* Use of AI: the quoted Kickstarter texts are named as such. */
.ai-quote{max-width:72ch;margin-top:28px;font-size:15.5px;color:var(--fg-muted)}
/* A film whose file cannot be loaded: a plain notice instead of a dead player. */
.film-unavailable{padding:16px 18px;border:1px dashed var(--rule);border-radius:6px;color:var(--fg-muted)}

/* 18. Living concept art (20261007-6, edges covered in 20261007-7; js/living-art.js) ------------------------------------------ */
/* Isolated: every rule targets .la-* elements created by the script, over the validated concept art only.
   The page's own image stays underneath; a layer appears only once loaded and live. */
.la-art{position:absolute;z-index:1;display:block;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.la-art.is-live{opacity:1}
.la-art svg{display:block;width:100%;height:100%;overflow:hidden}
/* Same hover zoom as the image under it (.zoom:hover img). */
.zoom:hover > .la-art{transform:scale(1.015)}
.la-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--look-x,50%) var(--look-y,42%),transparent 36%,#08090c55 100%)}
.la-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:1px solid #9c856588;border-radius:7px;background:var(--panel);color:var(--text);font-size:14px;cursor:pointer}
.la-toggle:hover,.la-toggle[aria-pressed="true"]{border-color:var(--amber);color:var(--title)}
/* On a frame: a small round control in the bottom-right corner, its label for assistive technologies only. */
.la-toggle--corner{position:absolute;z-index:3;right:14px;bottom:14px;justify-content:center;width:36px;min-height:0;height:36px;padding:0;border-color:#dfb37b88;border-radius:50%;background:#18140fcc;color:var(--amber)}
.la-toggle--corner .la-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.la-ico{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.la-toggle[aria-pressed="true"] .la-ico{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.la-viewer-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.la-viewer-tools button{min-height:40px;padding:6px 14px;border:1px solid #9c856588;border-radius:7px;background:var(--panel);color:var(--text);font-size:14px;cursor:pointer}
.la-viewer-tools button:hover,.la-viewer-tools button[aria-pressed="true"]{border-color:var(--amber);color:var(--title)}
/* Same drift and scale as the hero image under it (.hero.has-depth .scenes img, js/site.js module 13). */
@media (prefers-reduced-motion:no-preference){
  .hero.has-depth .scenes .la-art{transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(var(--ds,1.03));transition:opacity .3s ease,transform .9s var(--ease)}
  .hero.has-depth .scenes .zoom:hover > .la-art{transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(calc(var(--ds,1.03) + .015))}
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.la-art,.la-toggle,.la-viewer-tools{display:none!important}}

/* 19. Main film (20261024-1) --------------------------------------------------- */
/* One player under the promise and the buttons, before the concept triptych in reading order: on
   desktop a full-width row under the words and the triptych, on narrow screens between the buttons
   and the triptych. Two different films, two labelled choices (never a bare EN/FR switch). */
.hero-film{grid-area:film;margin-top:clamp(28px,3vw,44px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid #dfb37b1f}
@media (max-width:999px){.hero-film{margin-top:28px}}
.film--main .film-cap{max-width:56ch}
.film--main .film-title{font-size:clamp(26px,2.4vw,34px)}
/* Edited film made of labelled parts: open frame with a double bar mark, distinct in shape and wording. */
.badge--edited{border:1px solid #dfb37b80;color:var(--amber)}
.badge--edited::before{width:9px;height:9px;border-inline:2px solid currentColor}
.film-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.film-choice button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:56px;padding:8px 14px;border:0;background:transparent;color:var(--fg-strong);text-align:left;line-height:1.3}
.film-choice button + button{border-left:1px solid var(--rule)}
.choice-name{font-size:16px;font-weight:600}
.choice-sub{font-size:14px;color:var(--fg-muted)}
.film-choice button[aria-pressed="true"]{background:var(--title);color:var(--ink-strong)}
.film-choice button[aria-pressed="true"] .choice-sub{color:var(--ink)}
.film-choice button:not([aria-pressed="true"]):hover{background:#dfb37b12}
.film-choice button:focus-visible{outline-offset:-4px}
.chapters{display:grid;gap:8px}
.film-cap > .chapters{margin-top:16px}
.chapters li{display:grid;gap:2px}
.chapter{display:flex;align-items:baseline;gap:12px;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--rule);border-radius:6px;background:transparent;color:var(--fg-strong);text-align:left;font-size:16px;line-height:1.3}
.chapter:not(:disabled):hover{border-color:var(--accent);background:#dfb37b0d}
.chapter:disabled{cursor:default}
.chapter[aria-current="true"]{border-color:var(--accent);background:#dfb37b17}
.chapter-t{min-width:3.2em;font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}
.chapter-name{font-weight:600}
.chapter-note{padding-left:12px;font-size:14px;line-height:1.45;color:var(--fg-muted)}
.film-status{font-size:15px;line-height:1.55;color:var(--fg-muted)}
.film-status a{color:var(--accent)}
/* Links back to a film from a paper section keep a readable contrast. */
.on-paper .film-back a{color:var(--ink-accent)}
.on-paper .film-back span{color:var(--fg-muted)}
.progress-update{padding-left:14px;border-left:2px solid var(--accent)}

/* 20. Public film presentation (20261025-2) ------------------------------ */
/* "Inside THE BUNKERS 2108": public titles, a golden finish on the choices and chapters, the long notes in a
   native disclosure. Scoped to #film and to the hero actions; the living-art layers are not touched.
   Decorative signs are generated with an empty alternative text, so they are never read aloud. */
#film{scroll-margin-top:90px;padding-top:38px}
#film .film--main{grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:26px 32px}
#film .film-intro{grid-column:1 / -1;display:flex;align-items:end;justify-content:space-between;gap:24px}
#film .film-kicker{margin-bottom:10px;font-size:12px;letter-spacing:.18em;color:var(--amber);font-weight:600;text-transform:uppercase}
#film .film-title{font-size:clamp(28px,3.3vw,44px);line-height:1.15;font-weight:350;max-width:25ch}
#film .film-intro-copy{max-width:37ch;color:var(--muted);font-size:16px;line-height:1.6}
#film .film-media{min-width:0}
#film .film-frame{border:1px solid #a17a49;border-radius:14px;box-shadow:0 20px 54px #0005,0 1px 0 #edd0a538 inset}
#film .film-prov{margin-top:12px;margin-bottom:0;min-height:24px;font-size:12px;color:var(--muted)}
#film .film-prov .badge{border:0;padding:0;background:transparent;font-size:11px;letter-spacing:.075em;color:var(--muted)}
#film .film-choice{border:0;border-radius:0;gap:10px;margin-top:16px;overflow:visible}
#film .film-choice button{position:relative;border:1px solid #dfb37b38;border-radius:10px;padding:14px 16px;min-height:78px;background:#211c16;transition:border-color .18s,background .18s}
#film .film-choice button + button{border-left:1px solid #dfb37b38}
#film .film-choice button[aria-pressed="true"]{color:#f3dfbf;background:linear-gradient(125deg,#493722,#2c241b);border-color:#d5aa71;box-shadow:inset 0 1px #f1c78833}
#film .film-choice button[aria-pressed="true"] .choice-sub{color:#d3b897}
#film .choice-name{font-size:15px;line-height:1.35}
#film .choice-sub{margin-top:5px;font-size:12px;color:#c7b096}
#film .film-choice button:not([aria-pressed="true"]):hover{background:#30261c;border-color:#bd9764}
#film .film-cap{max-width:none}
#film .film-cap > .film-meta{margin-top:0;margin-bottom:16px;font-size:11px;letter-spacing:.13em;color:#c9a477}
#film .chapters{gap:12px;margin-top:0}
#film .chapters li{border:1px solid #dfb37b26;border-radius:12px;background:linear-gradient(110deg,#2a221a,#1c1813);padding:4px 6px 13px}
#film .chapter{align-items:center;gap:12px;padding:12px 10px 8px;border:0;border-radius:8px;font-size:16px;min-height:50px}
#film .chapter::after{content:"\25b6";content:"\25b6" / "";margin-left:auto;color:#d7ac73;font-size:12px}
#film .chapter-t{font-size:12px;font-weight:500;min-width:3em;color:#d7ac73}
#film .chapter-name{font-weight:550}
#film .chapter[aria-current="true"],#film .chapter:not(:disabled):hover{background:#dfb37b0d}
#film .chapter-note{display:block;margin-left:58px;padding:0 10px 0 0;font-size:12px;line-height:1.55;color:#c6af92}
#film .film-detail{border-top:1px solid #dfb37b26;border-bottom:1px solid #dfb37b26;padding:0}
#film .film-detail summary{display:flex;align-items:center;padding:12px 0;cursor:pointer;font-size:14px;color:#d9bd97;min-height:48px}
#film .film-detail summary{list-style:none;gap:16px}
#film .film-detail summary::-webkit-details-marker{display:none}
#film .film-detail summary::after{content:"+";content:"+" / "";margin-left:auto;font-size:20px;line-height:1;color:#d7ac73}
#film .film-detail[open] summary::after{content:"\2212";content:"\2212" / ""}
#film .film-detail-content{padding:2px 0 20px;max-width:94ch;display:grid;gap:14px}
#film .film-detail-content > *{margin-top:0}
#film .film-status{font-size:14px}
#film .film-file{gap:8px 18px;font-size:13px}
#film .film-fr-context{padding:22px;background:#2a221a;border:1px solid #dfb37b30;border-radius:12px;font-size:16px;line-height:1.65}
#film .film-fr-lead{margin-bottom:12px;font-size:22px;font-weight:450;color:var(--fg-strong)}
#film .film-fr-note{margin-top:12px;color:var(--muted);font-size:14px}
#film [hidden]{display:none !important}
.hero-copy .actions .button{border-radius:10px;min-height:56px;padding:13px 22px}
.hero-copy .actions .primary{background:linear-gradient(125deg,#edc78f,#c99960);color:#261b10;border-color:#edc78f;box-shadow:0 7px 24px #c18d4220,inset 0 1px #fff6}
.hero-copy .actions .primary::before{content:"\25b6";content:"\25b6" / "";font-size:12px;margin-right:10px}
.hero-copy .actions .secondary{background:#211b14}
.hero-copy .prototype-link{display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-top:12px;color:#d8b88d;font-size:14px;text-decoration:none;border-bottom:1px solid #dfb37b35}
.hero-copy .prototype-link:hover{color:#ffe0ae}
#film button:focus-visible,#film summary:focus-visible,#film a:focus-visible,.hero-copy a:focus-visible{outline:2px solid #f1c788;outline-offset:4px}
#film .film-choice button:focus-visible{outline-offset:2px}
@media (max-width:999px){#film .film--main{grid-template-columns:minmax(0,1fr)}#film .film-intro{display:block}#film .film-intro-copy{max-width:58ch;margin-top:16px}}
@media (max-width:480px){#film{padding-top:28px}#film .film--main{gap:22px}#film .film-choice{grid-template-columns:minmax(0,1fr);gap:8px}#film .film-choice button{min-height:68px;padding:11px 15px}#film .chapter-note{margin-left:54px}#film .chapter{font-size:15px;gap:8px}#film .film-intro-copy{font-size:15px}}
@media (prefers-reduced-motion:reduce){#film *,.hero-copy .actions .button{transition:none !important}}