@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/fraunces-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+201E,U+2212,U+2026,U+00B7}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/fraunces-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url("fonts/fraunces-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+201E,U+2212,U+2026}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url("fonts/fraunces-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+201E,U+2212}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F}
:root{
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--mono:"PlexMono",ui-monospace,Menlo,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#081316;--bg-2:#0d1d21;--ink:#eaf1ee;--ink-2:#b9cbc6;--line:#254348;--accent:#f0b48c;--lichen:#cbd67f;--sea-chip:#1b4a53;
  --card:rgba(8,19,22,.9);--card-line:rgba(240,180,140,.28);--field:#0f2428;
  color-scheme:dark;
}
:root.light{
  --bg:#f4f0e6;--bg-2:#e9e3d3;--ink:#15211f;--ink-2:#36443f;--line:#c7bfab;--accent:#733322;--lichen:#566000;--sea-chip:#b9d4cf;
  --card:rgba(244,240,230,.93);--card-line:rgba(138,67,51,.3);--field:#fbf8f0;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.06rem/1.62 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
[hidden]{display:none!important}svg[hidden]{display:none!important}
a{color:var(--accent);text-underline-offset:.18em}
.skip{position:absolute;left:-999px;top:0;background:var(--bg);color:var(--ink);padding:.6rem 1rem;z-index:60}.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:0}
h1 em{font-style:italic;color:var(--accent);font-weight:400}
.topbar{position:fixed;inset:0 0 auto 0;height:36px;z-index:30;display:flex;align-items:center;gap:.6rem;padding:0 max(14px,2vw);color:var(--ink);font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar a{color:inherit;text-decoration:none}
.topbar .home{display:flex;align-items:center;gap:.55rem;opacity:.9}.topbar .home:hover{opacity:1}
.topbar .spacer{flex:1}
.chip,.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 .55rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.icon-btn{padding:0;width:30px}.chip:hover,.icon-btn:hover{border-color:var(--accent)}
@media (pointer:coarse){.chip,.icon-btn{height:30px;min-width:38px}.icon-btn{width:38px}}
.icon-btn svg{width:14px;height:14px}
:root:not(.light) .i-sun{display:none}:root.light .i-moon{display:none}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}.progress i{display:block;height:100%;width:0;background:var(--accent)}

/* story */
.story{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;width:100%;margin:0 0 -100vh;margin-bottom:-100svh;background:var(--bg);overflow:hidden;z-index:1}
.stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.stage.live canvas{touch-action:pan-y;cursor:crosshair}
.hud{z-index:3;position:absolute;right:max(16px,3vw);top:62px;text-align:right;pointer-events:none;font-family:var(--serif);color:var(--ink);text-shadow:0 1px 14px var(--bg),0 0 3px var(--bg)}
.hud .yr{font-size:clamp(2.8rem,11vw,5.8rem);line-height:1;font-weight:400;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.hud .sea,.hud .land{font:500 .86rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.hud .land b{font-weight:600;color:var(--accent)}
.legend{position:absolute;left:max(16px,3vw);bottom:max(14px,2vh);display:none;gap:.9rem;font:500 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);pointer-events:none}
.legend i{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;margin-right:.35rem;vertical-align:-.15rem;border:1px solid var(--line)}
.stage.live .legend{display:flex}
.steps{position:relative;z-index:2;pointer-events:none}.step .card{pointer-events:auto}
.step{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:0 max(14px,3vw) 7vh}
.step .card{max-width:30rem;background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:1.2rem 1.35rem 1.3rem}
.step .tag{font:500 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .55rem}
.step h2{font-size:clamp(1.55rem,3.6vw,2.2rem);margin-bottom:.7rem}
.step p{margin:.55rem 0 0;font-size:1rem;color:var(--ink)}
.step.hero{min-height:100vh;min-height:100svh}
.hero .card{max-width:34rem;background:var(--card);padding:1.3rem 1.4rem 1.4rem}
.hero .kicker{font:500 .72rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .7rem}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem)}
.hero .deck{font-family:var(--serif);font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.4;color:var(--ink);margin:.9rem 0 0}
.hero .hint{font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:1.1rem 0 0}
.step.play{min-height:90vh;min-height:90svh;pointer-events:none}.step.play .card{pointer-events:auto}
.panel{display:none;margin-top:.8rem}
.stage.live ~ .steps .step.play .panel,.step.play.on .panel{display:block}
.slider-row{display:flex;gap:.7rem;align-items:center;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.slider-row input{flex:1;accent-color:var(--accent);min-height:32px}
.insp{margin:.8rem 0 0;padding:.8rem .9rem;border-left:3px solid var(--accent);background:var(--field);font-size:.98rem;min-height:3.2rem}
.insp b{font-family:var(--serif);font-size:1.25rem;font-weight:500;color:var(--accent)}
.zoom{position:absolute;right:max(14px,3vw);bottom:max(14px,3vh);display:none;flex-direction:column;gap:.4rem;z-index:3}
.stage.live .zoom{display:flex}
.zoom button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font:500 1.2rem/1 var(--sans);cursor:pointer}
.rail{display:none}
@media (min-width:900px){
  .step{padding-bottom:5vh}
  .step .card{margin-left:max(14px,3vw)}
  .step.play .card{max-height:none}
}
@media (max-width:899px){
  .legend{left:14px;bottom:auto;top:110px;gap:.35rem;flex-direction:column}
  .zoom{left:14px;right:auto;bottom:auto;top:62px;flex-direction:row}
  .zoom button{width:40px;height:40px}
  .step .card{max-width:none;width:100%;max-height:42svh;overflow:auto;border-radius:14px 14px 0 0}
  .step{padding:0}
  .step .card{border-left:0;border-right:0;border-bottom:0}
  .hud{top:44px}
  .step.play .card{max-height:50svh}
}

/* blocks */
.block{position:relative;z-index:3;background:var(--bg);padding:clamp(3rem,8vw,6rem) max(18px,5.5vw)}
.block.tint{background:var(--bg-2)}
.wrap{max-width:46rem;margin:0 auto}
.block h2{font-size:clamp(1.7rem,4.2vw,2.6rem);margin-bottom:1rem}
.block p{margin:.9rem 0}
.block.wide .wrap{max-width:60rem}
figure.chart{margin:1.4rem 0;padding:0}
figure.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .bo{fill:var(--accent)}
figure.chart figcaption{font:500 .78rem/1.5 var(--mono);letter-spacing:.03em;color:var(--ink-2);margin-top:.6rem}
.chart .ax,.chart .tk{fill:var(--ink-2);font:500 12px var(--mono)}.chart .ln{stroke:var(--line);stroke-width:1}.chart .gr{stroke:var(--line);stroke-width:1;opacity:.5}
.chart .dots circle{fill:var(--lichen);stroke:var(--bg);stroke-width:1.5}.chart .dots circle.ek{fill:var(--accent)}
.chart .curve{fill:none;stroke:var(--ink);stroke-width:2}
.chart .band{fill:var(--accent);opacity:.14}
.chart .sr{fill:none;stroke:var(--accent);stroke-width:2}.chart .sm{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.45}
.chart .bm{fill:var(--lichen)}.chart .bo{fill:var(--accent)}
.chart .lab{fill:var(--ink);font:500 13px var(--mono)}
table.t{width:100%;border-collapse:collapse;margin:1.2rem 0 .4rem;font-variant-numeric:tabular-nums}
.t th,.t td{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:right}.t th:first-child,.t td:first-child{text-align:left}
.t th{font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.note{font:500 .78rem/1.5 var(--mono);color:var(--ink-2);letter-spacing:.02em}
.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1rem 0}
.row label{font:500 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.row input[type=number]{width:7.5rem;min-height:44px;padding:.5rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font:500 1.2rem var(--serif)}
.row input[type=range]{flex:1;min-width:12rem;accent-color:var(--accent);min-height:40px}
.btn{min-height:40px;padding:.4rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:500 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.btn:hover{border-color:var(--accent)}
.out{font-family:var(--serif);font-size:1.3rem;line-height:1.35;min-height:2.7rem;margin:.6rem 0}
.share-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
.share-row .lbl{font:500 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-right:.4rem;color:var(--ink-2)}
.share-row a,.share-row button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.share-row a:hover,.share-row button:hover{border-color:var(--accent)}
.share-row svg{width:20px;height:20px}
#share-status{min-height:1.4rem;font:500 .8rem var(--mono);color:var(--accent)}
ol.small{padding-left:1.2rem;font-size:.95rem;color:var(--ink)}ol.small li{margin:.5rem 0}
footer{position:relative;z-index:3;background:var(--bg);border-top:1px solid var(--line);padding:1.6rem max(18px,5.5vw) 2.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font:500 .74rem/1.5 var(--mono);letter-spacing:.06em;color:var(--ink-2)}
footer a{color:var(--ink)}
.noscript{padding:1rem;background:var(--bg-2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.legend .lg-a{background:#9a4b41}.legend .lg-l{background:#e6c88f}.legend .lg-s{background:var(--sea-chip)}

.places{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.7rem 0 0}
.places .plbl{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-right:.2rem}
.pbtn{min-height:36px;padding:.2rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--field);color:var(--ink);font:500 .84rem var(--sans);cursor:pointer}.pbtn:hover{border-color:var(--accent)}

.stage.marked .legend{display:none}
@media (max-width:899px){
  .places{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem;-webkit-overflow-scrolling:touch}
  .places .plbl{display:none}
  .pbtn{flex:0 0 auto}
  .slider-row{margin-top:.2rem}
  .insp{min-height:0}
}

@media (max-width:899px){
  .stage.live ~ .steps .step.play .card > p, .step.play.on .card > p{display:none}
  .step.play.on .card h2{font-size:1.25rem;margin-bottom:.2rem}
  .step.play .card{max-height:44svh}
}

td.v-t{color:var(--ink);font-weight:600}td.v-f{color:var(--accent);font-weight:600}td.v-m{color:var(--accent);font-weight:600;font-style:italic}
.t td{vertical-align:top;text-align:left;font-size:.95rem}.t th{text-align:left}
.t td:first-child{font-weight:600;white-space:normal}
.chart .p1{fill:var(--accent)}.chart .p2{fill:var(--ink-2)}.chart .p3{fill:var(--lichen)}.chart .p4{fill:var(--ink)}.chart .p5{fill:var(--line)}
.chart .dumb{stroke:var(--line);stroke-width:3}.chart .dp{fill:var(--accent)}.chart .da{fill:none;stroke:var(--ink);stroke-width:2}
.chart .sm2{fill:none;stroke:var(--ink);stroke-width:2}.insp .muni{display:block;margin-top:.35rem;font-size:.9rem;color:var(--ink-2)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1.6rem 0 0}
figure.photo{margin:0}figure.photo img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line);background:var(--bg-2)}
figure.photo figcaption{font:500 .76rem/1.5 var(--mono);color:var(--ink-2);margin-top:.5rem}
.t.tl td:first-child{white-space:nowrap}
@media (max-width:640px){.t.tl td:first-child{white-space:normal}}

@media (max-width:640px){
  .t.stack thead,.t thead{position:absolute;left:-9999px}
  .t,.t tbody,.t tr,.t td{display:block;width:100%}
  .t tr{border-bottom:1px solid var(--line);padding:.8rem 0}
  .t td{border:0;padding:.12rem 0;text-align:left!important;white-space:normal!important}
  .t td::before{content:attr(data-l);display:block;font:500 .66rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:.35rem}
  .t td:first-child{font-size:1.05rem}.t td:first-child::before{display:none}
}

td.v-t{color:var(--lichen)!important;font-weight:600;font-style:normal}td.v-f{color:var(--accent)!important;font-weight:600;font-style:normal}td.v-m{color:var(--ink-2)!important;font-weight:600;font-style:normal}
.t td:first-child{font-weight:400}
.gallery{display:none}figure.photo.wide{margin:1.4rem 0}
@media (max-width:640px){#chart-birth + p{margin-top:1rem}}

.secnav{display:flex;gap:.2rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;margin-left:.4rem}
.secnav::-webkit-scrollbar{display:none}
.secnav a{padding:.55rem .55rem;white-space:nowrap;color:var(--ink-2);border-radius:4px}
.secnav a:hover,.secnav a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.block,.story{scroll-margin-top:36px}
@media (max-width:640px){.topbar .home{display:none}.secnav{margin-left:0}.secnav a{padding:.55rem .45rem}}