@font-face{font-family:Fraunces;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/fraunces-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  --bg:#f6f0e4;--bg2:#ece3d2;--ink:#2b2018;--ink2:#3d3228;--ink3:#54463a;--rule:#d8ccb8;
  --accent:#a8501f;--accent-ink:#fff;--link:#762f0e;--focus:#1f5fc9;--glass:rgba(250,244,232,.94);
  --t-dated:#07503f;--t-phase:#5f3e00;--t-undated:#722b2b;--m1:#07503f;--m2:#5f3e00;--m3:#762f0e;
  --night:#0b0e19;--sr-line:var(--rule);--sr-acc:var(--accent);--sr-ink:var(--ink);--sr-ok:var(--ink2);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14110f;--bg2:#1d1814;--ink:#f1e8da;--ink2:#d9cdbb;--ink3:#b8aa97;--rule:#3a3027;--accent:#f0a36e;--accent-ink:#1b1106;--link:#f6b88c;--focus:#8ab4ff;--glass:rgba(20,17,15,.94);
  --t-dated:#6fd9c4;--t-phase:#f0c46a;--t-undated:#f2a0a0;--m1:#6fd9c4;--m2:#f0c46a;--m3:#f6b88c;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14110f;--bg2:#1d1814;--ink:#f1e8da;--ink2:#d9cdbb;--ink3:#b8aa97;--rule:#3a3027;--accent:#f0a36e;--accent-ink:#1b1106;--link:#f6b88c;--focus:#8ab4ff;--glass:rgba(20,17,15,.94);
  --t-dated:#6fd9c4;--t-phase:#f0c46a;--t-undated:#f2a0a0;--m1:#6fd9c4;--m2:#f0c46a;--m3:#f6b88c;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:56px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.62 "Source Serif 4",Georgia,serif;overflow-x:clip}
a{color:var(--link);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--bg);color:var(--ink);padding:.5rem 1rem;z-index:40}
.skip:focus{left:8px;top:8px}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.14;letter-spacing:-.01em;margin:0 0 .5em}
h2{font-size:clamp(1.55rem,3.4vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.muted{color:var(--ink3);font-size:.95rem}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;height:48px;padding:0 12px 0 16px;background:var(--glass);border-bottom:1px solid var(--rule);font:600 .92rem/1 "Source Serif 4",Georgia,serif}
.topbar a{color:var(--ink2);text-decoration:none}
.topbar a:hover,.topbar a[aria-current]{color:var(--ink);text-decoration:underline}
.home{font-weight:700;color:var(--ink)!important;white-space:nowrap}
.topnav{display:flex;gap:.95rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;white-space:nowrap}
.spacer{flex:0 0 0}
.lang{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.icon-btn{background:none;border:0;color:var(--ink);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;flex:none}
.icon-btn svg{display:block}.icon-btn svg[hidden]{display:none}
@media (max-width:560px){.home{display:none}}

/* the stages: a sticky picture, cards that scroll over it */
.stage{position:relative}
main{display:block}
#stage1{margin-top:-48px}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0;background:var(--night)}
.pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pin::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(9,11,22,.62),rgba(9,11,22,0) 38%,rgba(9,11,22,0) 70%,rgba(9,11,22,.5)),linear-gradient(to right,rgba(9,11,22,.55),rgba(9,11,22,0) 62%)}
#stage2 .pin::after{background:linear-gradient(to bottom,rgba(9,11,22,.5),rgba(9,11,22,0) 25%,rgba(9,11,22,0) 75%,rgba(9,11,22,.5))}
.steps{position:relative;z-index:2;margin-top:-100svh;pointer-events:none}
.step{min-height:100svh;display:flex;align-items:center;padding:72px max(16px,5vw) 130px}
.step>*{pointer-events:auto}
.step.hero>*{pointer-events:none}
.card{max-width:31rem;background:rgba(10,12,24,.94);color:#f5eee3;padding:1.1rem 1.3rem 1rem;border-radius:14px;border:1px solid rgba(255,226,180,.22);font-size:1.06rem;transition:opacity .35s,transform .35s}
.card a{color:#ffd7a6}
.card h2,.card h3{color:#fff7e9}
.card h3{font-size:1.3rem}
.step:not(.on):not(.intro) .card{opacity:.5}
.card .cite{font-size:.85rem;color:#e6d8c3;margin:.3rem 0 0}
.card .extra{color:#fde7c3;border-left:3px solid #f0a36e;padding-left:.8rem}
.step.hero{align-items:flex-start;padding-top:min(15vh,120px);padding-bottom:140px;display:block}
.hero .kicker{font:600 .95rem/1.3 "Source Serif 4",serif;letter-spacing:.06em;text-transform:uppercase;color:#ffdcae;margin:0 0 .8rem;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hero h1{font-size:clamp(2.05rem,5.6vw,4.2rem);line-height:1.06;color:#fff8ea;max-width:20ch;text-shadow:0 2px 24px rgba(0,0,0,.65);margin-bottom:.5em}
.hero .deck{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:36rem;color:#fff1db;text-shadow:0 1px 14px rgba(0,0,0,.75)}
.hero .cue{position:absolute;left:max(16px,5vw);bottom:150px;margin:0;color:#ffe3b8;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 6px #000}
.intro .jump{margin-top:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.3rem 0 .7rem}
.chip,.linkbtn,.reveal,.yearbox button,.reset{font:600 .9rem/1.2 "Source Serif 4",serif;color:#1b1106;background:#f0b47a;border:0;border-radius:999px;padding:.5rem .9rem;min-height:44px;cursor:pointer}
.chip:hover,.reveal:hover,.yearbox button:hover{background:#ffd09f}
.linkbtn{background:none;color:var(--link);text-decoration:underline;padding:.35rem 0;min-height:44px;border-radius:0}
.yearbox{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.yearbox label{font-size:.95rem}
.yearbox input{font:inherit;width:5.2rem;min-height:44px;border-radius:8px;border:1px solid #8a7660;background:#fff;color:#1b1106;padding:0 .6rem}
.year-out{font-size:.95rem;color:#ffe3b8;min-height:1.4em;margin:.4rem 0 0}
.legend{margin-top:.8rem;font-size:.95rem}.legend summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.legend ul{list-style:none;margin:.3rem 0 .6rem;padding:0}.legend li{display:flex;align-items:center;gap:.6rem;margin:.25rem 0}
.sw{display:inline-block;width:1.1rem;height:.7rem;border-radius:3px;flex:none}
.ev-a,.ev-c{background:#4fc3b0}.sw-solid{background:#0c0a10;border:1px solid #f0d9b0}.sw-undated{background:rgba(58,50,72,.6);border:1px solid #fff1d6}.sw-art{background:#7a86a8}
.ev-b{background:repeating-linear-gradient(135deg,#c9a56a 0 4px,transparent 4px 8px)}.ev-d{background:repeating-linear-gradient(90deg,#e0b070 0 6px,transparent 6px 10px)}
.shot{margin:.8rem 0 0}.shot img{width:100%;border-radius:8px;display:block}.shot figcaption{font-size:.88rem;color:#e6d8c3;margin-top:.4rem}
.shot .muted{color:#e6d8c3}

/* the clock */
.clock{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:.55rem max(14px,3vw) calc(.7rem + env(safe-area-inset-bottom));background:rgba(8,10,20,.92);border-top:1px solid rgba(255,226,180,.18);color:#f5eee3}
.ck-top{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.ck-read{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.ck-year{font:600 1.7rem/1 Fraunces,Georgia,serif;color:#fff7e9;font-variant-numeric:tabular-nums;min-width:5.6ch}
.ck-ago{font-size:.98rem;color:#ffe3b8}
.ck-play{display:inline-flex;align-items:center;gap:.45rem;font:600 .95rem/1 "Source Serif 4",serif;color:#1b1106;background:#f0b47a;border:0;border-radius:999px;padding:0 1.05rem 0 .9rem;min-height:44px;cursor:pointer}
.ck-play .ic-pause{display:none}.ck-play[data-on="true"] .ic-play{display:none}.ck-play[data-on="true"] .ic-pause{display:inline}
.ck-only{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#f5eee3;min-height:44px;cursor:pointer;max-width:19rem}
.ck-only input{width:20px;height:20px;accent-color:#f0a36e;flex:none}
.ck-track{position:relative;height:44px;margin-top:.1rem}
.ck-ev{position:absolute;left:0;right:0;top:50%;height:8px;transform:translateY(-50%);border-radius:4px;background:rgba(255,255,255,.2)}
.ck-ev i{position:absolute;top:0;bottom:0;border-radius:2px}
.ck-range{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.ck-range::-webkit-slider-runnable-track{height:44px;background:transparent}
.ck-range::-moz-range-track{height:44px;background:transparent}
.ck-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:9px;border-radius:50%;background:#ffd9a0;border:3px solid #1b1106;box-shadow:0 0 0 2px #ffd9a0,0 2px 8px rgba(0,0,0,.5)}
.ck-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#ffd9a0;border:3px solid #1b1106;box-shadow:0 0 0 2px #ffd9a0}
.ck-range:focus-visible{outline:3px solid #8ab4ff;outline-offset:2px;border-radius:6px}
.ck-note{margin:.2rem 0 0;font-size:.9rem;color:#ffd6a0}
.pop{position:absolute;z-index:8;width:min(21rem,calc(100% - 24px));background:rgba(10,12,24,.96);color:#f5eee3;border:1px solid rgba(255,226,180,.35);border-radius:12px;padding:.8rem 2.2rem .8rem 1rem;font-size:.98rem;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.pop h4{margin:0 0 .3rem;font-size:1.1rem;color:#fff7e9}.pop p{margin:.35rem 0}.pop a{color:#ffd7a6}.pop-date{color:#ffe3b8;font-size:.92rem}
.pop-x{position:absolute;right:.2rem;top:.2rem;width:44px;height:44px;border:0;background:none;color:#fff;font-size:1.5rem;cursor:pointer}
.tier{display:inline-block;font-size:.78rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;border:1px solid currentColor}
.t-drawn{color:var(--ink3)}.t-dated{color:var(--t-dated)}.t-phase{color:var(--t-phase)}.t-undated{color:var(--t-undated)}
.pop .t-drawn{color:#cdbfa8}.pop .t-dated{color:#6fd9c4}.pop .t-phase{color:#f0c46a}.pop .t-undated{color:#f2a0a0}
.map-note{position:absolute;left:max(14px,3vw);top:62px;max-width:min(26rem,70vw);margin:0;font-size:.84rem;line-height:1.35;color:#f2e6d2;text-shadow:0 1px 6px #000;z-index:4}
.reset{position:absolute;right:max(14px,3vw);top:60px;z-index:5;background:rgba(10,12,24,.85);color:#ffe3b8;border:1px solid rgba(255,226,180,.4);font-weight:600}
.nojs-stills{position:absolute;inset:0;overflow:auto;background:var(--night);color:#f5eee3;padding:60px 16px 16px;z-index:3}.nojs-stills img{width:100%;height:auto;border-radius:8px}

/* the rest of the page */
.wrap{max-width:72rem;margin:0 auto;padding:3.2rem 16px}
.wrap>h2,.wrap>.lead,.wrap>p{max-width:46rem}
.lead{font-size:1.2rem;color:var(--ink2)}
.tablewrap{overflow-x:auto;margin:1rem 0}
table{border-collapse:collapse;width:100%;font-size:1rem}
th,td{text-align:left;vertical-align:top;padding:.7rem .8rem;border-bottom:1px solid var(--rule)}
thead th{font-family:Fraunces,serif;font-size:.95rem;border-bottom:2px solid var(--ink3)}
tbody th{font-weight:600;min-width:9rem}
.cite{font-size:.88rem;color:var(--ink3);margin:.4rem 0 0}
.bars{list-style:none;padding:0;margin:1rem 0}.bars li{margin:0 0 1.1rem;max-width:46rem}
.bar-t{height:12px;background:var(--bg2);border-radius:6px;overflow:hidden;margin:.3rem 0}.bar-t span{display:block;height:100%;background:var(--accent);border-radius:6px}
.bar-v{color:var(--ink2);font-size:.98rem}
.artgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:1.8rem 1.4rem;margin-top:1.4rem}
.art{margin:0}.art img{width:100%;height:auto;display:block;border-radius:10px;background:var(--bg2)}
.art figcaption{font-size:1rem;color:var(--ink2);margin-top:.6rem}.art figcaption strong{display:block;font:600 1.15rem/1.2 Fraunces,serif;color:var(--ink);margin-bottom:.25rem}
.credit{display:block;font-size:.84rem;color:var(--ink3);margin-top:.35rem}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:2rem 2.2rem;margin-top:1.2rem}
.blk{max-width:34rem}.blk .art{margin-top:.8rem}
.mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.4rem;margin:1.2rem 0}
.mcol{border-top:4px solid var(--rule);padding-top:.6rem}.mcol.m1{border-color:var(--m1)}.mcol.m2{border-color:var(--m2)}.mcol.m3{border-color:var(--m3)}
.mcol ul{padding-left:1.1rem;margin:.4rem 0}.mcol li{margin:.4rem 0}
.sources ol{padding-left:1.4rem}.sources li{margin:.55rem 0;max-width:52rem}.credits{padding-left:1.2rem;font-size:.95rem;color:var(--ink2)}
.share-wrap{padding-top:1rem;color:var(--ink)}
.foot{padding:1.6rem 16px 3rem;text-align:center;color:var(--ink3);font-size:.92rem}
.e404{background:var(--bg)}
@media (min-width:900px){.artgrid .art:first-child{grid-column:span 2}.artgrid .art:first-child img{max-height:560px;object-fit:cover}}
@media (min-width:721px){.note-m{display:none}}
@media (max-width:720px){
  .map-note{display:none}
  body{font-size:1.04rem}
  /* phones: the picture and the clock stay pinned at the top, the text scrolls under them */
  .pin{top:48px;z-index:6;height:auto;display:flex;flex-direction:column;box-shadow:0 8px 18px rgba(0,0,0,.45)}
  .pin canvas{position:relative;inset:auto;width:100%;height:37svh;min-height:230px;flex:none}
  .pin::after{display:none}
  .clock{position:relative}
  .steps{margin-top:0;background:var(--night)}
  .step{min-height:44svh;display:block;padding:1.1rem 12px 1.4rem}
  .step.hero{min-height:0;padding:1rem 16px 1.4rem}.hero .cue{display:none}
  #stage1{margin-top:0}
  .card{max-width:none;width:100%;font-size:1rem;line-height:1.55;padding:.9rem 1rem .8rem}
  .card h3{font-size:1.2rem}.card .extra{padding-left:.6rem}
  .step:not(.on):not(.intro) .card{opacity:.7}
  .hero h1{font-size:1.9rem}.hero .deck{font-size:1.02rem;text-shadow:none}.hero .kicker{text-shadow:none;font-size:.82rem}
  .ck-year{font-size:1.4rem}.ck-ago{font-size:.9rem}.ck-only{font-size:.84rem}
  .ck-top{gap:.5rem}
  .reset{top:6px;font-size:.78rem;padding:.2rem .6rem;min-height:44px}
  .pop{max-width:calc(100vw - 24px)}
  table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{border-bottom:2px solid var(--rule);padding:.6rem 0}th,td{border:0;padding:.2rem 0}td::before{content:attr(data-label);display:block;font-size:.8rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em}
}
@media (max-height:560px){
  /* short windows (400% zoom, phones on their side): nothing is pinned, so no text hides behind the picture */
  .pin{position:relative;top:auto;height:auto;z-index:0;display:flex;flex-direction:column;box-shadow:none}
  .pin canvas{position:relative;inset:auto;width:100%;height:70vh;min-height:170px;flex:none}
  .pin::after{display:none}.clock{position:relative}
  .steps{margin-top:0;background:var(--night)}.step{min-height:0;display:block;padding:1rem 12px}.step.hero{padding:1rem 16px}
  #stage1{margin-top:0}.card{max-width:none}.map-note{display:none}.note-m{display:block!important}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.qa-clean .topbar,.qa-clean .steps,.qa-clean .clock,.qa-clean .foot,.qa-clean main>:not(#stage1){display:none!important}.qa-clean #stage1{margin:0}.qa-clean .pin::after{display:none}.qa-clean .pin{height:100vh}

/* 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;opacity:.8;margin-right:.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-field{display:block;width:100%;max-width:36rem;margin-top:.4rem;font:inherit;font-size:.9rem}