@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Atkinson;src:url(fonts/atkinson-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Atkinson;src:url(fonts/atkinson-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--paper:#f2ecdc;--ink:#17242a;--muted:#5a6b70;--line:#c9bfa5;--accent:#0e5a6d;--ochre:#b97f22;--stage:#0b1c22;--card:#faf6ea}
[data-theme="dark"]{--paper:#101d23;--ink:#e8e2d2;--muted:#9fb0b3;--line:#31444a;--accent:#7fc4d4;--ochre:#e8a33d;--card:#16262d}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#101d23;--ink:#e8e2d2;--muted:#9fb0b3;--line:#31444a;--accent:#7fc4d4;--ochre:#e8a33d;--card:#16262d}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Newsreader,Georgia,serif;font-size:1.13rem;line-height:1.62}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:50}
.topbar{position:sticky;top:0;z-index:30;display:flex;gap:12px;align-items:center;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 14px;font-family:Atkinson,sans-serif;font-size:.92rem}
.topbar a{color:var(--accent);text-decoration:none}.home{font-size:1.2rem}.spacer{flex:1}
.them{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.them .ic::before{content:"◐"}
:root{--topbar:48px}
.topbar .brand{color:var(--ink)}
.brand{color:var(--ink);font-weight:700;text-decoration:none}
.chip{min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-family:Atkinson,sans-serif}
.progress{position:fixed;left:0;right:0;top:var(--topbar);height:3px;z-index:40;pointer-events:none;background:transparent}
.progress i{display:block;height:100%;width:100%;background:var(--ochre);transform:scaleX(0);transform-origin:0 50%}
.rail{display:none}
@media(min-width:1100px){
 .rail{display:flex;flex-direction:column;position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;padding:6px 3px;border-radius:14px;background:color-mix(in srgb,var(--paper) 88%,transparent)}
 .rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:18px;text-decoration:none}
 .rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
 .rail-dot[aria-current="true"] .dot{background:var(--ochre);transform:scale(1.45)}
 .rail-label{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-family:Atkinson,sans-serif;font-size:13px;white-space:nowrap;opacity:0;pointer-events:none}
 .rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
}
.story{position:relative}
.stage{position:sticky;top:var(--topbar);height:calc(100svh - var(--topbar));width:100%;overflow:hidden;z-index:0;background:var(--stage);margin:0}
.framebox{position:absolute;inset:0}
.framebox img{width:100%;height:100%;object-fit:contain;background:var(--stage)}
.framebox svg{position:absolute;inset:0;width:100%;height:100%}
.legend{position:absolute;left:12px;top:12px;z-index:2;max-width:min(28rem,calc(100% - 190px));margin:0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,#0b1c22 72%,transparent);color:#e7f2ee;font-family:Atkinson,sans-serif;font-size:13px;line-height:1.35}
.hud{position:absolute;right:16px;top:8px;z-index:2;margin:0;pointer-events:none}
.hud-year{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(42px,6vw,92px);line-height:.9;color:#f4efe2;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.stagebar{position:absolute;right:16px;bottom:16px;z-index:2;width:min(380px,34vw);padding:10px 12px;border-radius:14px;background:color-mix(in srgb,#0b1c22 78%,transparent);color:#eef3ee;font-family:Atkinson,sans-serif}
#readout{margin:0 0 8px;font-weight:700;line-height:1.35;font-size:15px}
.stagectl{display:flex;gap:8px;align-items:center}
.yrlabel{flex:1;display:grid;gap:2px;font-size:13px}
input[type="range"]{width:100%;min-height:44px;accent-color:var(--ochre)}
.stage button,[data-reset],.measure button,.measure select,.measure input{min-height:44px;border-radius:999px;border:1px solid #4a6a72;background:#175263;color:#eef3ee;font:600 14px Atkinson,sans-serif;padding:0 14px;cursor:pointer}
.steps{position:relative;z-index:3;margin:calc(-100svh + var(--topbar)) 0 0;padding:0;list-style:none;pointer-events:none}
.step{min-height:100svh;display:flex;align-items:center;padding:24px max(22px,6vw) 24px}
.step.hero{align-items:flex-end;padding-bottom:28px;min-height:calc(100svh - var(--topbar))}
.hero-card,.step-card{pointer-events:auto;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 34px rgba(8,16,18,.18);padding:22px 24px 18px}
.hero-card{width:min(520px,42vw)}
.step-card{width:min(560px,46vw)}
h1{font-size:clamp(32px,4vw,52px);line-height:1.05;margin:0 0 12px}
.kicker,.when{font:600 12px Atkinson,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.deck{font-size:clamp(18px,1.6vw,22px);line-height:1.4;margin:0 0 14px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.scroll-cue{font-family:Atkinson,sans-serif;font-size:14px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font:600 15px Atkinson,sans-serif}
.btn.primary{background:var(--ink);color:var(--paper)}
h2{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:0 0 10px}
.step-card p,.after p{max-width:62ch}
.measure{display:grid;gap:10px;margin:14px 0;font-family:Atkinson,sans-serif}
.pair{display:flex;gap:10px;flex-wrap:wrap}
.pair label,.birthlab{display:grid;gap:4px;font-size:14px}
.measure select,.measure input{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;min-width:8rem}
.after{max-width:46rem;margin:0 auto;padding:28px 22px 10px}
.tablewrap{overflow:auto;max-height:28rem;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-family:Atkinson,sans-serif;font-size:.9rem}
th,td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:var(--card)}
.related a,.site-footer a{color:var(--accent)}
.site-footer{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin:10px auto 0;max-width:46rem;padding:18px 22px 28px;font-family:Atkinson,sans-serif;font-size:.92rem}
.miss{max-width:40rem;margin:12vh auto;padding:0 22px}
@media(max-width:859px){
 .stage{height:40svh;z-index:5;border-bottom:1px solid var(--line)}
 .legend{max-width:70%;font-size:12px}
 .hud-year{font-size:36px}
 .stage{display:flex;flex-direction:column}
 .framebox{position:relative;inset:auto;flex:1 1 auto;min-height:0}
 .legend{top:8px;left:8px;max-width:62%;font-size:11px;line-height:1.25;padding:5px 7px}
 .stagebar{position:static;flex:none;width:auto;border-radius:0;padding:4px 10px 2px}
 #readout{font-size:13px;margin:0 0 2px;line-height:1.25}
 .yrlabel{font-size:12px}
 .steps{margin-top:0}
 .step{min-height:0;align-items:flex-start;padding:16px 14px 8px}
 .step.hero{min-height:0;padding:14px 14px 22px}
 .hero-card,.step-card{width:100%;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* share row (standards/v2/tools/share_row.py) */
.share-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;margin-inline-end:.3rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--sr-line,color-mix(in srgb,currentColor 28%,transparent));background:transparent;color:var(--sr-ink,inherit);text-decoration:none;cursor:pointer;font:inherit;transition:color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--sr-acc,inherit);border-color:var(--sr-acc,currentColor)}
.share-row [hidden]{display:none}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
@media (max-width:30rem){.share-row .lab{flex-basis:100%;margin:0 0 .15rem}}
.share-status{font-size:.92rem;color:var(--sr-ok,inherit);min-height:1.2em;margin:.4rem 0 0}
.share-status:empty{display:none}
.share-field{display:block;width:100%;max-width:36rem;margin-top:.4rem;font:inherit;font-size:.9rem}