@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");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:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin-ext.woff2) format("woff2");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:"Plex Sans";font-weight:400 600;font-display:swap;src:url(fonts/IBMPlexSans-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-weight:400 600;font-display:swap;src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");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:"Plex Mono";font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2")}

/* Paper and red egg by default in light; a quiet dark plum-grey at night. */
:root{
  --bg:#f4f0e8;--bg2:#ebe5d9;--card:#faf7f1;--ink:#1c1a1e;--muted:#3f3c44;--faint:#4c4952;--line:#cbc2b2;--line-soft:#ded6c8;
  --accent:#a3161f;--accent-ink:#8c1219;--thread:rgba(40,36,48,.30);--thread-on:#1c1a1e;--band:rgba(163,22,31,.10);--hband:rgba(40,36,48,.05);
  --c-n3:#2c5d8f;--c-n2:#6f97bd;--c-n1:#b9cbdc;--c-0:#e4ddd0;--c-p1:#f0b9a8;--c-p2:#d9604f;--c-p3:#a3161f;--c-na:transparent;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --to-top-bg:#f4f0e8;--to-top-fg:#1c1a1e;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121016;--bg2:#1b1820;--card:#1d1a22;--ink:#efeae2;--muted:#cdc8d2;--faint:#bab5c2;--line:#353140;--line-soft:#26232d;
  --accent:#ff7d70;--accent-ink:#ff9d92;--thread:rgba(225,220,235,.28);--thread-on:#ffffff;--band:rgba(255,125,112,.13);--hband:rgba(255,255,255,.04);
  --c-n3:#4f86c0;--c-n2:#3a5f86;--c-n1:#2b3a4c;--c-0:#26232d;--c-p1:#5c3330;--c-p2:#a8473d;--c-p3:#ff7d70;
  --to-top-bg:#121016;--to-top-fg:#efeae2;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121016;--bg2:#1b1820;--card:#1d1a22;--ink:#efeae2;--muted:#cdc8d2;--faint:#bab5c2;--line:#353140;--line-soft:#26232d;
  --accent:#ff7d70;--accent-ink:#ff9d92;--thread:rgba(225,220,235,.28);--thread-on:#ffffff;--band:rgba(255,125,112,.13);--hband:rgba(255,255,255,.04);
  --c-n3:#4f86c0;--c-n2:#3a5f86;--c-n1:#2b3a4c;--c-0:#26232d;--c-p1:#5c3330;--c-p2:#a8473d;--c-p3:#ff7d70;
  --to-top-bg:#121016;--to-top-fg:#efeae2;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.62 var(--sans)}
a{color:var(--accent-ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--card);color:var(--ink);padding:8px 12px;z-index:50}
.skip-link:focus{left:8px}

.topbar{position:sticky;top:0;z-index:20;height:44px;display:flex;align-items:center;gap:14px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line-soft);font:500 .84rem/1 var(--sans)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand-mark{color:var(--accent)}
.topnav{display:flex;gap:14px;overflow:hidden}
.topnav a{color:var(--muted);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--ink)}
.spacer{flex:1}
.chip{color:var(--muted);text-decoration:none;font:500 .78rem var(--mono);padding:4px 6px;border-radius:4px}
.chip[aria-current]{color:var(--ink);background:var(--line-soft)}
.icon-btn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;cursor:pointer}
.progress{position:fixed;top:44px;left:0;right:0;height:1px;z-index:19;pointer-events:none}
.progress span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);opacity:.6}
html:not(.past-hero) .topnav{opacity:0;pointer-events:none}
@media (max-width:760px){.topnav{display:none}}

.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .4s}
.past-hero .rail{opacity:1}
.rail a{position:relative;display:block;width:14px;height:14px}
.rail .dot{position:absolute;inset:5px;border-radius:50%;background:var(--faint);opacity:.6}
.rail a[aria-current] .dot{background:var(--accent);inset:3px;opacity:1}
.rail-label{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .78rem var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line);padding:3px 8px;border-radius:4px;opacity:0;pointer-events:none}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1}
@media (max-width:1180px){.rail{display:none}}

.hero{max-width:760px;margin:0 auto;padding:44px 20px 18px}
.kicker{font:500 .8rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
h1{font:600 clamp(1.9rem,5.6vw,3.2rem)/1.08 var(--serif);margin:0 0 16px;letter-spacing:-.01em;text-wrap:balance}
.deck{font:400 1.16rem/1.58 var(--serif);color:var(--muted);margin:0;max-width:62ch}
.anchor{margin-left:8px;color:var(--faint);text-decoration:none;font:400 .8em var(--sans);opacity:0}
h2:hover .anchor,.anchor:focus-visible{opacity:1}

/* the lead figure: lines on the left, the reader's year beside them */
.lead{max-width:1180px;margin:0 auto;padding:10px 20px 30px}
.lead-grid{display:grid;gap:18px}
@media (min-width:960px){.lead-grid{grid-template-columns:minmax(0,1fr) 330px;align-items:start;gap:34px}}
.fig{margin:0}
.fig h2{font:600 1.25rem/1.25 var(--serif);margin:0 0 8px}
.fig figcaption{font-size:.9rem;line-height:1.5;color:var(--muted);margin:8px 0 0;max-width:70ch}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--sans)}
.hero-fig .chart{background:var(--card);border:1px solid var(--line-soft);border-radius:10px}
.threads .g{stroke:var(--line);stroke-width:1}
.threads .g.z{stroke:var(--faint);stroke-dasharray:4 4}
.yt,.xt{fill:var(--muted);font-size:15px}
.xl{fill:var(--accent-ink);font-size:15px;font-weight:600}
.xl.hw{fill:var(--muted);font-weight:500}
.bw-band{fill:var(--band)}
.hw-band{fill:var(--hband)}
.th{fill:none;stroke:var(--thread);stroke-width:1.6;stroke-linejoin:round;transition:opacity .3s,stroke .3s}
.mean{fill:none;stroke:var(--accent);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;transition:opacity .3s}
.mdot{fill:var(--accent)}
.mlab{fill:var(--accent-ink);font-size:16px;font-weight:600}
.ylab{fill:var(--ink);font-size:16px;font-weight:600;opacity:0}
.threads.picked .th{opacity:.35}
.threads.picked .th.on{opacity:1;stroke:var(--thread-on);stroke-width:2.8}
.threads.picked .mean,.threads.picked .mdot{opacity:.35}
.threads.picked [data-mlab]{opacity:0}
.threads .ylab.on{opacity:1}

.answer{font-size:1.02rem}
.years{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.ych,.play,.btn{font:500 .9rem/1 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;min-height:40px;padding:0 12px;cursor:pointer}
.ych[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.play{border-color:var(--accent);color:var(--accent-ink)}
.play[data-on]{background:var(--line-soft)}
@media (pointer:coarse){.ych,.play,.btn{min-height:44px}}
.ans{font:500 1.15rem/1.5 var(--serif);margin:0 0 12px}
.reset{margin:0 0 12px}
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.share-label{font-size:.86rem;color:var(--muted)}
.share-row{display:flex;gap:8px}
.sbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;text-decoration:none}
.sbtn:hover,.sbtn:focus-visible{color:var(--accent-ink);border-color:var(--accent)}
@media (pointer:coarse){.sbtn{width:44px;height:44px}}
.share-msg{min-height:1.2em;font-size:.86rem;color:var(--muted);margin:4px 0 0}

/* prose and figures */
.prose{max-width:720px;margin:0 auto;padding:10px 20px 10px}
.sec{padding:34px 0 8px;border-top:1px solid var(--line-soft)}
.sec h2,.method h2{font:600 clamp(1.4rem,3.8vw,1.95rem)/1.18 var(--serif);margin:0 0 12px;text-wrap:balance}
.sec p,.sec li{max-width:66ch}
.sec ul{padding-left:20px}
.sec li{margin:0 0 10px}
.sec .fig{margin:22px 0 18px}
.fig.wide{width:min(760px,calc(100vw - 32px))}
.cal .cell{stroke:none}
.c-n3{fill:var(--c-n3)}.c-n2{fill:var(--c-n2)}.c-n1{fill:var(--c-n1)}.c-0{fill:var(--c-0)}.c-p1{fill:var(--c-p1)}.c-p2{fill:var(--c-p2)}.c-p3{fill:var(--c-p3)}.c-na{fill:none}
.cal .ring{fill:none;stroke:var(--ink);stroke-width:2.2}
.eu .g.z{stroke:var(--faint);stroke-dasharray:4 4}
.eun{fill:var(--ink);font-size:16px;font-weight:600}
.eup{fill:var(--muted);font-size:13px}
.euv{fill:var(--ink);font-size:15px}
.ci{stroke:var(--faint);stroke-width:2.4;stroke-linecap:round}
.pt{fill:var(--ink)}
.eu.home .pt,.eu.home .ci{fill:var(--accent);stroke:var(--accent)}
.eu.home .eun{fill:var(--accent-ink)}
.eu.early .pt{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.eu.thin .pt{fill:var(--faint)}
.bar{fill:var(--accent)}
.ytab{width:100%;border-collapse:collapse;margin:26px 0 6px;font-size:.95rem;font-variant-numeric:tabular-nums}
.ytab caption{text-align:left;font:600 1.05rem var(--serif);margin-bottom:8px}
.ytab th,.ytab td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line-soft)}
.ytab thead th{font:500 .78rem var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ytab td:nth-child(n+3){text-align:right}
.ytab thead th:nth-child(n+3){text-align:right}
@media (max-width:560px){.ytab td:nth-child(4),.ytab th:nth-child(4){display:none}.ytab th,.ytab td{padding:8px 5px}.ytab{font-size:.88rem}}
.method p{font-size:.98rem}
.sources{padding-left:18px;font-size:.92rem}
.sources li{margin:0 0 6px}
.method h3{font:600 1.05rem var(--serif);margin:22px 0 8px}
.ending{font:500 1.3rem/1.45 var(--serif);margin:46px 0 30px;text-wrap:balance}
.site-footer{max-width:720px;margin:0 auto;padding:24px 20px 70px;display:flex;gap:18px;flex-wrap:wrap;font:400 .86rem var(--sans);color:var(--muted);border-top:1px solid var(--line-soft)}
.site-footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.rail,.progress,.share,.years,.reset{display:none}}
/* phones: chart lettering grows so it stays at least ~12 px on screen */
@media (max-width:620px){
  .threads .yt,.threads .xt{font-size:24px}.threads .xl{font-size:21px}.mlab,.ylab{font-size:25px}
  .cal .yt,.cal .xt{font-size:21px}
  .eun{font-size:25px}.eup{font-size:19px}.euv{font-size:23px}.eu .xt,.age .xt{font-size:21px}
}
.tab-note{font-size:.86rem;color:var(--muted);margin:4px 0 0}