@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f1ece0;--bg2:#e8e1d0;--card:#faf6ec;--ink:#1b1812;--ink2:#3a352a;--muted:#4b4538;
  --line:#c9bfa6;--line-soft:#d9cfb6;--accent:#8c2708;--accent-ink:#fff;--cool:#1a4690;--gold:#624200;
  --glass:rgba(250,246,236,.95);--still:url(img/still-light.webp);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --bar:3rem;color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070b13;--bg2:#0d141f;--card:#0f1824;--ink:#ece8dd;--ink2:#cfcabb;--muted:#b6b3a1;
  --line:#26313f;--line-soft:#1b2430;--accent:#ff9a4d;--accent-ink:#1a0c00;--cool:#9cc3ff;--gold:#f0c46a;
  --glass:rgba(10,16,26,.93);--still:url(img/still-dark.webp);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070b13;--bg2:#0d141f;--card:#0f1824;--ink:#ece8dd;--ink2:#cfcabb;--muted:#b6b3a1;
  --line:#26313f;--line-soft:#1b2430;--accent:#ff9a4d;--accent-ink:#1a0c00;--cool:#9cc3ff;--gold:#f0c46a;
  --glass:rgba(10,16,26,.93);--still:url(img/still-dark.webp);color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.62 var(--serif);font-optical-sizing:auto;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--accent);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);padding:.5rem 1rem;z-index:80}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section,.step{scroll-margin-top:calc(var(--bar) + 8px)}
h1,h2,h3{font-family:var(--serif);line-height:1.08;margin:0;text-wrap:balance;font-optical-sizing:auto}
button,select,input{font:inherit}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"zero" 0}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;height:var(--bar);display:flex;align-items:center;gap:.7rem;padding:0 max(16px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);font:500 .86rem/1 var(--mono)}
.home{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:600}
.home-ico{color:var(--accent)}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto;margin-left:.6rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink2);text-decoration:none;white-space:nowrap;padding:.95rem .1rem}
.topnav a:hover{color:var(--accent)}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 .7rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:var(--accent)}
.progress i{position:absolute;top:-4px;left:0;width:9px;height:9px;margin-left:-4px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg);will-change:transform}
@media (max-width:820px){.topnav{display:none}}
@media (pointer:coarse){.chip,.icon-btn{min-height:44px;min-width:44px}.icon-btn{width:44px;height:44px}}

/* the stage: a fixed globe behind the whole story */
#stage{position:fixed;inset:0;z-index:0;background:var(--bg) var(--still) right center/cover no-repeat}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#over{pointer-events:none}
#globe[hidden]{display:none}

.page{position:relative;z-index:2}
.lane{position:relative}
.opaque{background:var(--bg);position:relative;z-index:3}

/* hero */
.hero{min-height:calc(100svh - var(--bar));display:flex;flex-direction:column;justify-content:flex-end;padding:0 max(16px,env(safe-area-inset-left)) clamp(1.5rem,6vh,4rem)}
.hero .wrap{max-width:72rem;width:100%;margin:0 auto}
.kicker{font:600 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
h1{font-weight:300;font-size:clamp(2.35rem,7.4vw,5.6rem);letter-spacing:-.022em;line-height:1.0;max-width:15ch;font-variation-settings:"opsz" 144}
h1 em{font-style:italic;font-weight:300;color:var(--accent)}
.deck{font-size:clamp(1.12rem,2.3vw,1.5rem);line-height:1.42;max-width:34rem;margin:1.3rem 0 0;color:var(--ink2);font-weight:350}
.hero-hud{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.9rem 2.2rem;font:500 .85rem/1.3 var(--mono);color:var(--ink2)}
.hero-hud b{display:block;font:300 clamp(1.6rem,4vw,2.5rem)/1 var(--serif);color:var(--ink);letter-spacing:-.01em}
.hero-hud span{display:block;margin-top:.25rem}
.cue{margin-top:2rem;font:500 .8rem/1 var(--mono);color:var(--muted);letter-spacing:.08em}
.cue i{display:inline-block;margin-left:.5rem;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.cue i{animation:none}}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 0%,transparent) 62%)}
.hero>*{position:relative}

/* story steps */
.step{min-height:100svh;display:flex;align-items:flex-end;padding:0 max(16px,env(safe-area-inset-left)) 12vh;pointer-events:none}
.step .card{pointer-events:auto;max-width:27rem;background:var(--glass);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.35rem 1.3rem;box-shadow:0 18px 50px -24px #000a}
.step .card h2{font-size:clamp(1.45rem,3.4vw,2rem);font-weight:400;letter-spacing:-.012em;margin:0 0 .6rem}
.step .card h2 a{color:inherit;text-decoration:none}
.step .card p{margin:.55rem 0 0;font-size:1.02rem;line-height:1.55}
.step .card .big{font:300 clamp(2rem,6vw,3rem)/1 var(--serif);letter-spacing:-.02em;color:var(--accent);margin:.2rem 0 .1rem}
.step .card .meta{font:500 .78rem/1.4 var(--mono);color:var(--muted);margin-top:.8rem;letter-spacing:.02em}
.step.right{justify-content:flex-end}
@media (min-width:980px){.step{align-items:center;padding-bottom:0;padding-left:max(24px,4vw)}.step.right{justify-content:flex-end;padding-right:max(24px,4vw)}}

/* clock */
.hud{position:fixed;z-index:30;left:50%;top:calc(var(--bar) + .6rem);transform:translateX(-50%);display:flex;align-items:center;gap:.9rem;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:500 .84rem/1 var(--mono);opacity:0;pointer-events:none;transition:opacity .35s;white-space:nowrap;max-width:calc(100vw - 24px)}
.hud[data-on="true"]{opacity:1;pointer-events:auto}
.hud .tclock{font-weight:600;font-size:1.05rem;color:var(--ink);min-width:6.4ch;text-align:right}
.hud .sub{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.hud .passn{color:var(--accent);font-weight:600}
@media (max-width:560px){.hud{gap:.55rem;padding:.4rem .7rem;font-size:.74rem}.hud .sub{display:none}}

/* transport (scrubber with play) */
.transport{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1.1rem;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:600 .9rem/1 var(--mono);cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.small{min-height:36px;padding:0 .85rem;font-size:.82rem}
.btn:hover{filter:brightness(1.08)}
.btn .ic-pause{display:none}.btn[data-on="true"] .ic-play{display:none}.btn[data-on="true"] .ic-pause{display:inline}
input[type=range]{accent-color:var(--accent);flex:1;min-width:140px;height:44px}

/* text sections over an opaque ground */
.s{max-width:46rem;margin:0 auto;padding:4rem 16px 0}
.s.wide{max-width:64rem}
.s h2{font-size:clamp(1.7rem,4.6vw,2.6rem);font-weight:350;letter-spacing:-.018em;margin-bottom:1.1rem}
.s h2 .anchor,.s h3 .anchor{color:inherit;text-decoration:none}
.s h3{font-size:1.25rem;font-weight:500;margin:1.8rem 0 .4rem}
.s p{margin:.9rem 0}
.s p.lead{font-size:1.22rem;line-height:1.5;color:var(--ink2)}
.note{font:400 .84rem/1.5 var(--mono);color:var(--muted)}
.pull{font:300 clamp(1.5rem,3.6vw,2.3rem)/1.18 var(--serif);letter-spacing:-.012em;max-width:32ch;margin:2.2rem 0;font-style:italic}
.pull em{color:var(--accent)}
.fig{margin:2rem 0}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{font:400 .82rem/1.5 var(--mono);color:var(--muted);margin-top:.6rem}
table.t{width:100%;border-collapse:collapse;font:400 .86rem/1.4 var(--mono);margin:1.2rem 0}
table.t caption{text-align:left;color:var(--muted);padding:.4rem 0}
table.t th,table.t td{padding:.5rem .55rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
table.t th{font-weight:600;color:var(--ink2);border-bottom:1.5px solid var(--line)}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
details{margin:1rem 0;border-top:1px solid var(--line-soft)}
details summary{cursor:pointer;padding:.9rem 0;font-weight:500;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";display:inline-block;width:1.4rem;color:var(--accent);font-family:var(--mono)}
details[open] summary::before{content:"−"}

/* the finder */
.finder{max-width:60rem;margin:0 auto;padding:0 16px}
.fpanel{max-height:calc(100svh - var(--bar) - 1.6rem);overflow:auto;overscroll-behavior:contain;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;padding:1.4rem;max-width:30rem}
.fpanel h2{font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:380;margin:0 0 .6rem}
.fbox{position:relative;margin-top:1rem}
.fbox input[type=search]{width:100%;min-height:50px;padding:0 1rem;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:500 1rem/1 var(--mono)}
.fbox input[type=search]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.flist{list-style:none;margin:.4rem 0 0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--card);max-height:15rem;overflow:auto}
.flist li button{display:flex;justify-content:space-between;gap:1rem;width:100%;min-height:44px;padding:.55rem .9rem;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:500 .92rem/1.2 var(--mono)}
.flist li button:hover,.flist li button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.flist .cc{color:var(--muted)}
.fres{margin-top:1.1rem}
.fres h3{font:600 .76rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:1rem 0 .3rem}
.fres ol{list-style:none;margin:0;padding:0;font:400 .88rem/1.45 var(--mono)}
.fres li{display:grid;grid-template-columns:2.2rem 1fr;gap:.2rem .5rem;padding:.32rem 0;border-bottom:1px solid var(--line-soft)}
.fres li .k{color:var(--muted)}
.fres li .w{display:block;color:var(--muted);font-size:.78rem}
.fres li b{font-weight:600;color:var(--ink)}
.fres li.rec b::after{content:" ●";color:var(--accent);font-size:.7em}
.fkey{font:400 .78rem/1.45 var(--mono);color:var(--muted);margin-top:.7rem}

/* share + footer + toTop */
.share-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:2.4rem 0 0}
.share-label{font:500 .8rem/1 var(--mono);color:var(--muted);margin-right:.3rem}
.sh{width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid var(--line-soft);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.sh:hover,.sh:focus-visible{border-color:var(--accent);color:var(--accent)}
.copied{margin:0;font:400 .8rem/1 var(--mono);color:var(--muted);flex-basis:100%;min-height:1em}
@media (pointer:coarse){.sh{width:44px;height:44px}}
.foot{max-width:46rem;margin:0 auto;padding:3.2rem 16px 4rem;font:400 .86rem/1.6 var(--mono);color:var(--muted)}
.foot a{color:var(--ink2)}

/* svg figures */
.sv-axis{stroke:var(--line);stroke-width:1}
.sv-grid{stroke:var(--line-soft);stroke-width:1}
.sv-txt{fill:var(--ink2);font:400 11px var(--mono)}
.sv-soft{fill:var(--muted);font:400 10.5px var(--mono)}
.sv-ink{fill:var(--ink)}
.sv-acc{fill:var(--accent)}.sv-acc-s{stroke:var(--accent);fill:none}
.sv-cool{fill:var(--cool)}.sv-cool-s{stroke:var(--cool);fill:none}

/* no-script and reduced motion */
.noscript-note{padding:1rem 16px;max-width:46rem;margin:0 auto;font:400 .9rem/1.5 var(--mono)}

/* the finder as a step: the empty area over the globe takes taps */
.finder-step{pointer-events:auto;align-items:flex-end;touch-action:pan-y}
.finder-step .fpanel{pointer-events:auto}
@media (min-width:980px){.finder-step{align-items:center}}
.ctlrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin-top:.8rem}
.transport.row2{margin-top:.7rem}
.src{padding-left:1.1rem}.src li{margin:.7rem 0;font-size:.95rem;line-height:1.5}
.src a{word-break:break-word}
.btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sv-dot{fill:var(--accent);opacity:.8}
.sv-trace{fill:none;stroke:var(--ink2);stroke-width:1.5;stroke-linejoin:round}
.sv-peak{fill:var(--accent);stroke:var(--bg);stroke-width:1.2}
.sv-model{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:4 3}
.s .note{display:inline}

@media (max-width:979px){
  .hero{justify-content:flex-start;padding-top:calc(var(--bar) + .34*(100svh - var(--bar)) + min(.45*100vw,.28*(100svh - var(--bar))) + 1.2rem);min-height:100svh}
  .hero::before{background:none}
}

@media (max-width:979px){.finder-step{padding-bottom:12px}.fpanel{max-height:56svh}.finder-step .fpanel{max-width:none;width:100%}}

.floatreset{position:fixed;right:16px;top:calc(var(--bar) + .7rem);z-index:35;background:var(--glass);color:var(--ink);border-color:var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (max-width:560px){.hud{left:12px;transform:none}}

@media (max-width:979px){.step{padding-bottom:3vh}.step .card{padding:1rem 1.05rem 1.1rem}.step .card p{font-size:.97rem;line-height:1.5}.step .card h2{font-size:1.4rem}}
@media (max-width:979px) and (max-height:700px){.step .card p{font-size:.9rem;line-height:1.45}.step .card .meta{display:none}}

html:not(.js) .finder-step .fpanel>:not(h2):not(p){display:none}
html:not(.js) .hud{display:none}

.fpanel h2 a{color:inherit;text-decoration:none}