@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/literata-latin.woff2') format('woff2');}

:root{color-scheme:light dark;--paper:#efe6d6;--ink:#2b2620;--soft:#6d675c;--wash:#e2d7c0;--card:#f6f1e4;--line:#d3c6a8;--clay:#a3401f;--clay-ink:#7e2f14;--link:#8f3418;--riv:#2e6f7e;--riv-deep:#1f4b56;--ok:#3d6b35;--serif:'Literata',Georgia,'Times New Roman',serif;--sans:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
@media (prefers-color-scheme:dark){:root:not([data-theme='light']){--paper:#211d17;--ink:#ece4d2;--soft:#b3a78f;--wash:#2c2720;--card:#282219;--line:#4a4132;--clay:#d87a4c;--clay-ink:#eda87e;--link:#e39a6d;--riv:#6fb3c2;--riv-deep:#9fd4de;--ok:#8fce85;}}
:root[data-theme='dark']{--paper:#211d17;--ink:#ece4d2;--soft:#b3a78f;--wash:#2c2720;--card:#282219;--line:#4a4132;--clay:#d87a4c;--clay-ink:#eda87e;--link:#e39a6d;--riv:#6fb3c2;--riv-deep:#9fd4de;--ok:#8fce85;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:64px;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.72;}
main{max-width:1060px;margin:0 auto;padding:0 20px 40px;}
a{color:var(--link);}
img{max-width:100%;height:auto;display:block;}
.topbar{position:sticky;top:0;z-index:30;display:flex;gap:.6rem;align-items:center;max-width:1060px;margin:0 auto;padding:.65rem 20px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topbar .home{font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;}
.topnav{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;}
.topnav a{white-space:nowrap;color:var(--soft);text-decoration:none;font-size:.86rem;padding:.2rem .5rem;border-radius:99px;}
.topnav a[aria-current]{color:var(--clay-ink);background:var(--wash);}
.spacer{flex:1;}
.chip{border:1px solid var(--line);border-radius:99px;padding:.15rem .7rem;font-size:.85rem;color:var(--ink);text-decoration:none;background:var(--card);white-space:nowrap;font-family:var(--sans);}
.icon-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.skip{position:absolute;left:-999px;top:0;background:var(--clay);color:#fff;padding:.5rem 1rem;z-index:99;}
.skip:focus{left:0;}
.hero{display:grid;gap:1.2rem;padding:2.2rem 0 1rem;}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr;align-items:start;}}
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--clay);margin:.2rem 0;}
h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.1;margin:.2rem 0 .8rem;letter-spacing:-.01em;}
.deck{font-size:1.12rem;}
.answer{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--riv);padding:.8rem 1rem;border-radius:0 12px 12px 0;}
.start{display:inline-block;margin-top:1rem;background:var(--clay);color:#fff;text-decoration:none;padding:.55rem 1.1rem;border-radius:99px;font-family:var(--sans);font-weight:600;}
.byline{color:var(--soft);font-size:.9rem;}
.hero-fig{margin:0;}
.hero-fig,.fig{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.hero-fig img,.fig img{width:100%;}
figcaption{font-size:.82rem;color:var(--soft);padding:.5rem .8rem;font-family:var(--sans);}
figcaption .cr{display:block;}
.share{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1rem 0;}
.share-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;font-family:var(--sans);}
.share-row .lab{font-size:.85rem;color:var(--soft);}
.share a,.share button{color:var(--ink);background:none;border:none;cursor:pointer;padding:.15rem;display:inline-flex;}
.share-status{min-height:1.2em;font-size:.85rem;color:var(--soft);font-family:var(--sans);}
h2{font-size:1.5rem;margin:2.4rem 0 .4rem;}
h2 .anchor{color:inherit;text-decoration:none;}
h2 .anchor:hover{color:var(--clay);}
.lede{color:var(--soft);font-size:1.05rem;}
.prose p{max-width:68ch;}
.chapter{scroll-margin-top:70px;}
.figgrid{display:grid;gap:1rem;margin:1.2rem 0;}
@media(min-width:760px){.figgrid{grid-template-columns:1fr 1fr;}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;}
.stat b{display:block;font-size:1.25rem;color:var(--riv-deep);}
.stat span{font-size:.85rem;color:var(--soft);font-family:var(--sans);}
.clock{scroll-margin-top:70px;}
.stage-wrap{display:grid;gap:1rem;}
@media(min-width:900px){.stage-wrap{grid-template-columns:1fr 300px;align-items:start;}}
.stage{position:sticky;top:64px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem;}
.hud{display:flex;justify-content:flex-end;}
#hud-year{font-family:var(--sans);font-weight:700;background:var(--ink);color:var(--paper);border-radius:99px;padding:.1rem .8rem;}
.region{width:100%;height:auto;}
.region .land{fill:var(--wash);}
.region .water{fill:none;stroke:#7fa8b5;stroke-width:5;stroke-linecap:round;}
.region .site{fill:var(--clay);}
.region .site-ring{fill:none;stroke:var(--clay);}
.region .city{fill:#8a8478;}
.region .lab{font-family:var(--sans);font-size:15px;fill:var(--soft);}
.region .lab.city{font-size:13px;}
.region .edge{fill:none;stroke:var(--line);}
.curvebox{margin-top:.5rem;}
.curve{width:100%;height:auto;}
.curve .band{fill:var(--wash);}
.curve .curve-line{fill:none;stroke:var(--clay);stroke-width:3;}
.curve .tick text{font-family:var(--sans);font-size:13px;fill:var(--soft);text-anchor:middle;}
.curve .tick line{stroke:var(--soft);}
.curve .cursor{stroke:var(--ink);stroke-width:2;}
.steps{display:grid;gap:.8rem;}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;scroll-margin-top:140px;}
.step .yr{font-family:var(--sans);font-weight:700;color:var(--clay);margin:0;}
.step h3{margin:.1rem 0 .3rem;font-size:1.05rem;}
.step p{margin:.2rem 0;font-size:.95rem;}
.step.lit{outline:2px solid var(--clay);}
.note{color:var(--soft);font-size:.9rem;}
.hint{color:var(--soft);font-size:.9rem;font-family:var(--sans);}
.see ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.see li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;}
.see h3{margin:0;font-size:1rem;}
.see p{margin:.2rem 0 0;font-size:.92rem;color:var(--soft);}
.src ul{margin:.2rem 0 1rem;padding-left:1.2rem;}
.src li{margin:.25rem 0;font-size:.93rem;}
.src h3{font-size:1rem;margin:1rem 0 .2rem;font-family:var(--sans);}
.foot{border-top:1px solid var(--line);margin-top:2rem;padding:1rem 20px 3rem;text-align:center;color:var(--soft);font-size:.9rem;}
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:.45rem;z-index:20;}
@media(min-width:1240px){.rail{display:flex;}}
.rail a{display:flex;align-items:center;gap:.4rem;text-decoration:none;}
.rail i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block;}
.rail a[aria-current] i{background:var(--clay);}
.rail span{font-family:var(--sans);font-size:.72rem;color:var(--soft);opacity:0;transition:opacity .15s;}
.rail a:hover span,.rail a[aria-current] span{opacity:1;}
.citysearch{margin:1rem 0;}
.citysearch form{display:flex;gap:.5rem;flex-wrap:wrap;}
.citysearch input{flex:1;min-width:200px;font:inherit;padding:.5rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);}
.citysearch .out{margin-top:.8rem;}
.citycard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin-top:.6rem;}
.citycard.on{border-left:5px solid var(--ok);}
.citycard.peri{border-left:5px solid #b98a2f;}
.citycard.out{border-left:5px solid var(--soft);}
.btn{font-family:var(--sans);background:var(--clay);color:#fff;border:none;border-radius:99px;padding:.5rem 1.1rem;font-weight:600;cursor:pointer;text-decoration:none;}
.btn.small{font-size:.82rem;padding:.25rem .8rem;}
.btn.ghost{background:none;color:var(--link);border:1px solid var(--line);}
.nf body,.nf{background:var(--paper);}
.nf main{max-width:560px;margin:20vh auto;text-align:center;font-family:var(--serif);}
/* river map */
.rivermap{width:100%;height:auto;}
.rivermap .land{fill:var(--wash);}
.rivermap .l-old,.rivermap .l-new,.rivermap .l-box{transition:opacity .45s ease;}
.rivermap .old{fill:none;stroke:var(--riv);stroke-width:7;stroke-linecap:round;}
.rivermap .ox{fill:none;stroke:var(--riv);stroke-width:4;stroke-dasharray:10 7;opacity:.8;}
.rivermap .canal{fill:none;stroke:#7fa8b5;stroke-width:5;stroke-linecap:round;}
.rivermap .cover{fill:none;stroke:var(--clay);stroke-width:7;stroke-linecap:round;opacity:.9;}
.rivermap .box{fill:none;stroke:var(--ink);stroke-width:11;stroke-dasharray:16 10;opacity:.55;}
.rivermap .overlay{transition:opacity .3s ease;}
.rivermap[data-state="s1871"] .l-new,.rivermap[data-state="s1871"] .l-box{opacity:0;}
.rivermap[data-state="s1911"] .l-old{opacity:.25;}
.rivermap[data-state="s1911"] .l-box{opacity:0;}
.rivermap[data-state="s1911"] .cover{opacity:0;}
.rivermap[data-state="s1936"] .l-old{opacity:.25;}
.rivermap[data-state="s1936"] .l-box{opacity:0;}
.rivermap[data-state="sazi"] .l-old{opacity:.15;}
.rivermap .mark{fill:var(--ink);}
.rivermap .lab{font-family:var(--sans);font-size:15px;fill:var(--soft);}
.rivermap .lookpin{fill:var(--clay);stroke:#fff;stroke-width:2;opacity:0;}
.rivermap .lookpin.ping{opacity:1;animation:ping 1.6s ease-out 2;}
@keyframes ping{0%{r:9;opacity:1;}70%{r:20;opacity:0;}100%{r:20;opacity:0;}}
.rivermap .scale line{stroke:var(--soft);stroke-width:2;}
.rivermap .scale text{font-family:var(--sans);font-size:12px;fill:var(--soft);}
@media (prefers-reduced-motion:reduce){.rivermap .l-old,.rivermap .l-new,.rivermap .l-box{transition:none;}.rivermap .lookpin.ping{animation:none;opacity:1;}}
.mapbar{display:flex;gap:.6rem;align-items:center;margin-top:.6rem;flex-wrap:wrap;}
.mapbar input[type="range"]{flex:1;min-width:160px;accent-color:var(--clay);}
.states{width:100%;height:auto;}
.states .band.s1871{fill:#9fc6d1;}.states .band.s1911{fill:#c3d8cf;}.states .band.s1936{fill:#d8cfc0;}.states .band.sazi{fill:var(--wash);}
.states .tick text{font-family:var(--sans);font-size:12px;fill:var(--soft);text-anchor:middle;}
.states .tick line{stroke:var(--soft);}
.states .cursor{stroke:var(--clay);stroke-width:2.5;}
.legend{list-style:none;display:flex;gap:.9rem;flex-wrap:wrap;padding:0;margin:.6rem 0 0;font-family:var(--sans);font-size:.8rem;color:var(--soft);}
.legend i.k{display:inline-block;width:22px;height:0;border-top:5px solid var(--riv);vertical-align:middle;margin-right:.3rem;border-radius:2px;}
.legend i.k.canal{border-color:#7fa8b5;}
.legend i.k.box{border-top:5px dashed var(--ink);opacity:.6;}
.legend i.k.ox{border-top:4px dashed var(--riv);}
/* lookup */
.search label{display:block;font-family:var(--sans);font-size:.85rem;color:var(--soft);margin-bottom:.3rem;}
.search input{width:100%;font:inherit;padding:.6rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);}
.street-out .st{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin-top:.7rem;}
.street-out .st h3{margin:0 0 .3rem;font-size:1.02rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.rd-band{font-family:var(--sans);font-size:.75rem;font-weight:700;border-radius:99px;padding:.1rem .7rem;white-space:nowrap;}
.k-v0{background:var(--riv);color:#fff;}
.k-v1{background:#b98a2f;color:#fff;}
.k-v2{background:var(--wash);color:var(--soft);}
.rd-meta{list-style:none;margin:.4rem 0 0;padding:0;columns:2;font-size:.85rem;font-family:var(--sans);}
@media(min-width:760px){.rd-meta{columns:3;}}
.rd-meta li{break-inside:avoid;margin:.15rem 0;}
.street-out h4{font-family:var(--sans);font-size:.85rem;margin:.7rem 0 .2rem;color:var(--soft);}
.empty{color:var(--soft);}
.soft{color:var(--soft);font-size:.9rem;}
.examples{list-style:none;margin:.6rem 0;padding:0;display:grid;gap:.5rem;}
.examples li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.55rem .9rem;font-size:.93rem;}
.examples b{color:var(--riv-deep);}
/* quiz + faq + loo + section */
.quiz .q{border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin:.7rem 0;background:var(--card);}
.quiz legend{font-weight:600;padding:0 .4rem;}
.quiz .opts{display:grid;gap:.3rem;margin-top:.4rem;}
.quiz .opts label{display:flex;gap:.5rem;align-items:baseline;font-size:.95rem;cursor:pointer;}
.quiz .prove{background:var(--wash);border-radius:8px;padding:.5rem .8rem;font-size:.9rem;}
.quiz .q.right{border-color:var(--ok);}
.quiz .q.wrong{border-color:var(--clay);}
.score{font-family:var(--sans);font-weight:700;margin-left:.6rem;}
.faqs details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;margin:.5rem 0;}
.faqs summary{font-weight:600;cursor:pointer;}
.faqs p{margin:.4rem 0 0;}
table.loo{border-collapse:collapse;margin:1rem 0;font-size:.88rem;font-family:var(--sans);}
table.loo caption{text-align:left;font-weight:700;margin-bottom:.4rem;font-family:var(--serif);font-size:1rem;}
table.loo td{border:1px solid var(--line);padding:.25rem .7rem;}
.sectfig{margin:1.2rem 0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.sect{width:100%;height:auto;display:block;}
.sect .ground{fill:var(--wash);}
.sect .splai{fill:var(--line);}
.sect .basin{fill:#9fc6d1;stroke:var(--riv-deep);stroke-width:2;}
.sect .cbox{fill:#4a4132;}
.sect .wall{stroke:#efe6d6;stroke-width:2;}
.sect .coll{stroke:var(--clay);stroke-width:3;}
.sect .sl{font-family:var(--sans);font-size:22px;fill:var(--ink);text-anchor:middle;}
.sect .dim{font-family:var(--sans);font-size:17px;fill:var(--soft);text-anchor:middle;}
.sect .inv{fill:#f6f1e4;}
.sect .dim.inv{fill:#d8cfc0;}