@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format("woff2"),url(fonts/fraunces-normal-latin-ext.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2"),url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2"),url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2")}
:root{
--paper:#f7f3ea;--paper-2:#efe8d8;--ink:#201d17;--ink-2:#46433f;--ink-3:#7a766c;
--rule:#ddd3bf;--line-soft:#e6ddc9;--accent:#b3541e;--accent-button:#b3541e;--accent-ink:#fff8ee;
--link:#9a4a1a;--focus:#1a5fb4;--glass:rgba(247,243,234,.92);--ok:#2e7d43;--glow:#e8a13c;
--topbar-h:3rem;color-scheme:light}
html[data-theme="dark"]{
--paper:#141311;--paper-2:#1d1c19;--ink:#ece7db;--ink-2:#c9c3b4;--ink-3:#8f8a7d;
--rule:#35322b;--line-soft:#29271f;--accent:#f0a36e;--accent-button:#f0a36e;--accent-ink:#1b1406;
--link:#f6b88c;--focus:#8ab4ff;--glass:rgba(18,20,22,.92);--ok:#8fd19e;color-scheme:dark}
@media (prefers-color-scheme:dark){
html:not([data-theme]){
--paper:#141311;--paper-2:#1d1c19;--ink:#ece7db;--ink-2:#c9c3b4;--ink-3:#8f8a7d;
--rule:#35322b;--line-soft:#29271f;--accent:#f0a36e;--accent-button:#f0a36e;--accent-ink:#1b1406;
--link:#f6b88c;--focus:#8ab4ff;--glass:rgba(18,20,22,.92);--ok:#8fd19e;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + .5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:1.08rem/1.65 "Source Serif 4",Georgia,serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.12;margin:0 0 .7em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:600}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:600;margin-top:2.6em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--link);text-underline-offset:.15em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:.6rem;top:-3rem;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;border-radius:.5rem;z-index:60;text-decoration:none}
.skip:focus{top:.6rem}
.js-only{display:none}
html.js .js-only{display:revert}
html.no-js .js-only{display:none}
/* topbar */
.topbar{position:sticky;top:0;z-index:50;height:var(--topbar-h);display:flex;align-items:center;gap:.9rem;padding:0 .9rem;background:var(--glass);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.topbar .home{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;font:600 .95rem Fraunces,serif;white-space:nowrap}
.topbar .home:hover{color:var(--accent)}
.home-mark{flex:none;color:var(--accent)}
.topnav{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink-2);text-decoration:none;font-size:.92rem;padding:.35rem .55rem;border-radius:.4rem;white-space:nowrap}
.topnav a:hover{color:var(--accent)}
.topnav a[aria-current="true"]{color:var(--accent);text-decoration:underline;text-underline-offset:.25em}
.spacer{flex:1}
.chip{color:var(--ink-2);text-decoration:none;font:600 .85rem "Source Serif 4",serif;border:1px solid var(--rule);border-radius:999px;padding:.2rem .7rem}
.chip:hover{color:var(--accent);border-color:var(--accent)}
.icon-btn{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
.hairline{position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.wind{position:absolute;left:0;bottom:-7px;width:60px;height:16px;color:var(--accent);pointer-events:none}
.wind svg{display:block;overflow:visible}
html.no-js .hairline,html.no-js .wind{display:none}
/* hero */
.hero{position:relative;min-height:min(108svh,62rem);display:flex;align-items:flex-end;overflow:clip;background:#101418}
.hero canvas#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.labels span{position:absolute;transform:translate(-50%,-50%);font:600 .78rem "Source Serif 4",serif;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9);white-space:nowrap;padding:.1rem .3rem}
.labels span.dim{opacity:.55}
.hud{position:absolute;top:.8rem;right:1rem;text-align:right;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9);pointer-events:none}
.hud b{display:block;font:600 2rem/1.05 Fraunces,serif}
.hud small{display:block;font-size:.85rem;opacity:.92}
.hero-copy{position:relative;z-index:2;max-width:46rem;padding:5rem 1.2rem 4.5rem;color:#f4efe4}
.hero-copy::before{content:"";position:absolute;inset:-2rem -3rem;background:linear-gradient(to top,rgba(8,10,14,.82),rgba(8,10,14,.45) 55%,transparent);z-index:-1}
.kicker{font:700 .8rem "Source Serif 4",serif;letter-spacing:.14em;color:var(--glow);margin:0 0 .8em}
.hero-copy h1{color:#fff}
.deck{font-size:1.2rem;color:#e9e2d2}
.payoff{background:rgba(12,14,18,.55);border-left:3px solid var(--glow);border-radius:.4rem;padding:.8rem 1rem;margin:1.2rem 0;font-size:1rem;color:#f0ead9;backdrop-filter:blur(4px)}
.places{margin-top:1rem}
.places-k{font:700 .8rem "Source Serif 4",serif;letter-spacing:.12em;text-transform:uppercase;color:#c9c0a9;margin:0 0 .5em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips button{font:600 .95rem "Source Serif 4",serif;color:#f0ead9;background:rgba(20,22,28,.6);border:1px solid rgba(240,234,217,.4);border-radius:999px;padding:.45rem 1rem;cursor:pointer;min-height:44px}
.chips button:hover{border-color:var(--glow)}
.chips button[aria-pressed="true"]{background:var(--glow);border-color:var(--glow);color:#1b1406}
.places-note{font-size:.88rem;color:#c9c0a9}
.place-card{margin-top:.8rem;background:rgba(12,14,18,.6);border:1px solid rgba(240,234,217,.25);border-radius:.7rem;padding:.7rem 1rem;font-size:.95rem;color:#f0ead9;backdrop-filter:blur(4px)}
.place-card b{font-variant-numeric:tabular-nums}
.scroll-cue{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:2;width:1.4rem;height:2.3rem;border:2px solid rgba(255,255,255,.55);border-radius:1rem}
.scroll-cue span{display:block;width:.3rem;height:.6rem;margin:.4rem auto;background:var(--glow);border-radius:.2rem;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(.6rem);opacity:.4}}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}
html.no-gl .hero{min-height:0;background:var(--paper)}
html.no-gl #gl,html.no-gl .labels,html.no-gl .scroll-cue{display:none}
html.no-gl .hero-copy{color:var(--ink);padding:3rem 1.2rem}
html.no-gl .hero-copy::before{display:none}
html.no-gl .hero-copy h1{color:var(--ink)}
html.no-gl .deck,html.no-gl .payoff,html.no-gl .places-k{color:var(--ink)}
html.no-gl .places-note{color:var(--ink-3)}
html.no-gl .chips button{color:var(--ink);background:var(--paper-2);border-color:var(--rule)}
html.no-gl .chips button[aria-pressed="true"]{background:var(--glow);border-color:var(--glow);color:#1b1406}
html.no-gl .payoff{background:var(--paper-2);border-left-color:var(--accent)}
html.no-gl .place-card{background:var(--paper-2);color:var(--ink);border-color:var(--rule)}
html.no-js .hero{min-height:0;background:var(--paper)}
html.no-js #gl,html.no-js #gl2,html.no-js .labels,html.no-js .scroll-cue,html.no-js .ero-ctl,html.no-js .places{display:none}
html.no-js .hero-copy{color:var(--ink);padding:3rem 1.2rem}
html.no-js .hero-copy::before{display:none}
html.no-js .hero-copy h1{color:var(--ink)}
html.no-js .deck,html.no-js .payoff{color:var(--ink)}
html.no-js .payoff{background:var(--paper-2);border-left-color:var(--accent)}
/* prose */
.wrap{max-width:46rem;margin:0 auto;padding:0 1.2rem}
.wide{max-width:60rem;margin:0 auto;padding:0 1.2rem}
.sec-k{display:block;font:700 .78rem "Source Serif 4",serif;letter-spacing:.14em;color:var(--accent);margin-bottom:.5em}
section{scroll-margin-top:calc(var(--topbar-h) + .8rem)}
.figcap{font-size:.9rem;color:var(--ink-3);margin-top:.6rem}
/* erosion stage */
.ero-stage{position:relative;margin:1.4rem 0}
#gl2{display:block;width:100%;height:min(72svh,34rem);border-radius:.9rem;background:#101418;touch-action:pan-y}
.ero-ctl{margin:.8rem 0 0;display:grid;gap:.3rem}
.ero-ctl label{font:600 .95rem "Source Serif 4",serif}
.ero-ctl input[type="range"]{width:100%;accent-color:var(--accent-button);min-height:44px}
.chapters{display:grid;gap:.7rem;margin-top:.9rem}
.ch{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:.7rem;padding:.85rem 1.05rem}
.ch h3{margin:0 0 .35em;font-size:1.02rem;color:var(--accent)}
.ch p{margin:0;font-size:.98rem}
.ch.on{border-color:var(--accent)}
html.no-gl #gl2{display:none}
html.no-gl .ero-ctl{display:none}
/* tables */
.tbl-wrap{overflow-x:auto;margin:1rem 0}
table.tbl{border-collapse:collapse;width:100%;font-size:.95rem;table-layout:fixed}
.tbl th,.tbl td{text-align:right;padding:.45rem .6rem;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;vertical-align:top}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{font-weight:600;color:var(--ink-2);font-size:.85rem;vertical-align:bottom}
.tbl tbody th{font-weight:600}
.places-table th:first-child,.places-table td:first-child{width:44%}
.places-table th:nth-child(2),.places-table td:nth-child(2){width:32%}
.places-table tbody th{white-space:normal}
.places-table tr[data-place]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.myth-table th:first-child,.myth-table td:first-child{width:26%}
.myth-table th:nth-child(2),.myth-table td:nth-child(2){width:52%;text-align:left}
.myth-table th:nth-child(3),.myth-table td:nth-child(3){width:22%;text-align:left}
.tbl tr.sel td,.tbl tr.sel th{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.gl-note{font-size:.9rem;color:var(--ink-3);border-left:3px solid var(--accent);padding-left:.8rem;margin-top:1rem}
.tbl tr{cursor:default}
.tbl tbody tr[data-place]{cursor:pointer}
.tbl-note{font-size:.9rem;color:var(--ink-3)}
.var{display:block;font-size:.8rem;color:var(--ink-3);font-weight:400}
.pnote{display:block;font-size:.82rem;color:var(--ink-3);font-weight:400}
.sis{font-size:.82rem;white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
/* figures */
figure{margin:1.4rem 0}
figure svg{display:block;width:100%;height:auto;background:var(--paper-2);border:1px solid var(--rule);border-radius:12px}
/* timeline + cards + dochia + siblings */
.timeline{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.7rem}
.timeline li{display:grid;grid-template-columns:11rem 1fr;gap:.9rem;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:.7rem;padding:.7rem 1rem}
.timeline b{font:600 .98rem Fraunces,serif;color:var(--accent)}
.timeline span{font-size:.96rem}
.cards{display:grid;gap:.7rem;margin:1.2rem 0}
@media(min-width:40rem){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:.7rem;padding:.8rem 1rem}
.card h3{margin:0 0 .2em;font-size:1.02rem}
.card p{margin:0;font-size:.92rem;color:var(--ink-2)}
.card p.num{color:var(--ink-3);font-size:.85rem;margin-top:.2em}
.dochia{background:var(--paper-2);border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:.7rem;padding:.9rem 1.1rem;margin:1.4rem 0}
.dochia h3{margin:0 0 .4em;font-size:1.05rem}
.dochia p{margin:0;font-size:.97rem}
.siblings ul{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.7rem}
.siblings a{display:grid;gap:.1rem;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:.7rem;padding:.8rem 1rem;text-decoration:none}
.siblings a:hover{border-color:var(--accent)}
.siblings strong{color:var(--ink);font-family:Fraunces,serif}
.siblings span{color:var(--ink-3);font-size:.92rem}
/* faq */
.faq-list{display:grid;gap:.6rem}
.faq-list details{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:.7rem;padding:.7rem 1.1rem}
.faq-list summary{font-family:Fraunces,serif;font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center}
.faq-list p{margin:.5rem 0 .3rem}
/* footer */
.footer{margin-top:3rem;padding-bottom:3rem;color:var(--ink-3);font-size:.95rem}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.8rem 0}
.share-row a,.share-row button{display:inline-grid;place-items:center;min-width:2.5rem;height:2.5rem;padding:0 .6rem;border-radius:999px;border:1px solid var(--line-soft);background:transparent;color:var(--ink-2);text-decoration:none;cursor:pointer;font:600 .85rem "Source Serif 4",serif}
.share-row a:hover,.share-row button:hover{color:var(--accent);border-color:var(--accent)}
.share-row [hidden]{display:none}
.share-status{font-size:.9rem;color:var(--ok);min-height:1.2em;margin:.2rem 0 0}
.share-field{font:inherit;color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);border-radius:.5rem;padding:.4rem .7rem;width:100%;max-width:28rem}
.to-top{display:none}
html.no-js .to-top{display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:.55rem 1rem;min-height:44px;box-sizing:border-box;font:600 .9rem "Source Serif 4",serif;text-decoration:none}
html.js .to-top.show{display:inline-flex;align-items:center;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;background:var(--glass);backdrop-filter:blur(8px);color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:.55rem 1rem;min-height:44px;box-sizing:border-box;font:600 .9rem "Source Serif 4",serif;text-decoration:none;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.15)}
html.js .to-top.show:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:43.75rem){
body{font-size:1rem}
.topbar{gap:.55rem;padding:0 .6rem}
.topbar .home span{display:none}
.hero-copy{padding:4rem 1rem 3.5rem}
.deck{font-size:1.08rem}
.hud b{font-size:1.5rem}
.timeline li{grid-template-columns:1fr}
}