@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/nr-l.woff2) format("woff2");unicode-range:U+0000-00FF,U+2009,U+2013-2014,U+2018-201E,U+2022,U+2026,U+202F,U+2032-2033,U+2212}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/nr-x.woff2) format("woff2");unicode-range:U+0102-0103,U+015E-015F,U+0162-0163,U+0218-021B}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/nr-i-l.woff2) format("woff2");unicode-range:U+0000-00FF,U+2009,U+2013-2014,U+2018-201E,U+2022,U+2026,U+202F,U+2032-2033,U+2212}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/nr-i-x.woff2) format("woff2");unicode-range:U+0102-0103,U+015E-015F,U+0162-0163,U+0218-021B}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;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:"IBM Plex Sans";font-style:normal;font-weight:400;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}

:root{
  --paper:#f2ece0;--paper2:#e8dfcc;--ink:#1c1a16;--ink2:#47423a;--rule:#c9bda3;
  --terra:#a1402a;--terra-t:#782816;--sea:#1b4a5a;--olive:#51552a;--pencil:#443f3a;
  --wiki-bg:#f8f9fa;--wiki-ink:#202122;--wiki-rule:#a2a9b1;--wiki-link:#0645ad;
  --b-land:#ece4d3;--b-sea:#bcd0cf;--b-block:#c7a085;--b-road:#f7f1e3;--b-coast:#3f6a70;--b-label:#1d3a40;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --col:38rem;--wide:68rem;--bar:3rem;--photo-fx:multiply;--photo-dim:1;
  color-scheme:light}
:root[data-theme=dark]{
  --paper:#0e1a20;--paper2:#15252d;--ink:#efe7d3;--ink2:#c7c0ac;--rule:#2e414a;
  --terra:#e8886a;--terra-t:#f0a086;--sea:#8cc3d3;--olive:#b9be78;--pencil:#b9b6af;
  --b-land:#14232a;--b-sea:#0b2a35;--b-block:#7a5a47;--b-road:#26363d;--b-coast:#7fb2ba;--b-label:#d6e3df;
  --photo-fx:normal;--photo-dim:.9;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1875rem/1.62 var(--serif);font-optical-sizing:auto;text-rendering:optimizeLegibility;hyphens:manual}
[hidden]{display:none!important}
svg[hidden]{display:none}
a{color:var(--sea);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--terra)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.skip-link{position:absolute;left:-99rem;top:.5rem;background:var(--paper);color:var(--ink);padding:.5rem .8rem;z-index:50}
.skip-link:focus{left:.5rem}

/* topbar */
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--bar);display:flex;align-items:center;gap:.9rem;padding:0 1rem;font:400 .8125rem/1 var(--sans);color:var(--ink);background:linear-gradient(var(--paper),color-mix(in srgb,var(--paper) 86%,transparent))}
.topbar a{color:inherit;text-decoration:none}
.topbar .home{font-weight:500;letter-spacing:.01em}
.topbar .sp{flex:1}
.topbar .lang{border:1px solid var(--rule);border-radius:999px;padding:.38rem .7rem}
.topbar .lang:hover,.icon-btn:hover{border-color:var(--terra);color:var(--terra)}
.icon-btn{width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.i-moon{display:none}:root[data-theme=dark] .i-sun{display:none}:root[data-theme=dark] .i-moon{display:block}
.i-sun{display:block}

/* hero */
.hero{position:relative}
.hero-photo{position:relative;height:min(72svh,50rem);min-height:22rem;overflow:hidden;background:var(--paper2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 38%;mix-blend-mode:var(--photo-fx);filter:brightness(var(--photo-dim))}
.hero-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(transparent,var(--paper))}
.hero-body{max-width:var(--wide);margin:-5.5rem auto 0;padding:0 1.25rem;position:relative;z-index:2}
h1{font:500 clamp(2.9rem,10.6vw,7.6rem)/.92 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.025em;margin:0 0 1.2rem;color:var(--ink);text-wrap:balance}
h1 .u{font-size:.58em;letter-spacing:0;font-weight:400;color:var(--terra);white-space:nowrap}
.standfirst{font:400 clamp(1.25rem,3.4vw,1.75rem)/1.4 var(--serif);max-width:36rem;margin:0 0 1rem;color:var(--ink);text-wrap:pretty}
.byline{font:400 .8125rem/1.5 var(--sans);color:var(--ink2);margin:0 0 .5rem}
.photo-cap{font:400 .8125rem/1.5 var(--sans);color:var(--ink2);max-width:var(--wide);margin:0 auto;padding:.5rem 1.25rem 0}
.photo-cap a{color:inherit}

/* essay */
section{scroll-margin-top:calc(var(--bar) + .75rem)}
.chap{max-width:var(--wide);margin:0 auto;padding:clamp(4rem,10vw,8rem) 1.25rem 0}
.chap>*{max-width:var(--col)}
.chap>.wide{max-width:var(--wide)}
h2{font:500 clamp(2rem,6vw,3.4rem)/1.04 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.018em;margin:0 0 1.4rem;text-wrap:balance}
h3{font:500 1.35rem/1.25 var(--serif);margin:2.6rem 0 .6rem}
p{margin:0 0 1.15rem;text-wrap:pretty}
.lede{font-size:1.32rem;line-height:1.5}
.num{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.fn{font-size:.9rem;color:var(--ink2)}
em{font-style:italic}
q,.q{quotes:"„" "”"}
:lang(en) q,[lang=en] q{quotes:"“" "”"}
blockquote{margin:1.8rem 0;padding:0 0 0 1.2rem;border-left:2px solid var(--terra);font-style:italic}
.plain-link{color:inherit}

/* dated chronicle */
.dated{display:grid;gap:.15rem 1.6rem;grid-template-columns:1fr;margin:0 0 1.6rem}
.dated dt{font:500 .8125rem/1.5 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--terra-t);margin-top:1.1rem}
.dated dd{margin:0}
@media(min-width:48rem){.dated{grid-template-columns:7.4rem 1fr;max-width:var(--col)}.dated dt{margin:0;padding-top:.45rem;text-align:left}.dated dd{margin:0 0 1.15rem}}

/* infobox: a Wikipedia revision rebuilt */
.doc-row{display:grid;gap:2rem;margin:2rem 0}
@media(min-width:56rem){.doc-row{grid-template-columns:22rem 1fr;align-items:start;gap:3rem}}
.clip{position:relative;transform:rotate(-.6deg);filter:drop-shadow(0 .7rem 1.1rem rgba(0,0,0,.16))}
.infobox{background:var(--wiki-bg);color:var(--wiki-ink);border:1px solid var(--wiki-rule);font:400 .875rem/1.5 var(--sans);width:100%;max-width:22rem}
.infobox .ib-t{padding:.6rem .7rem;text-align:center;font-weight:700;background:#eaecf0;border-bottom:1px solid var(--wiki-rule)}
.infobox .ib-n{padding:.35rem .7rem;text-align:center;color:#3c4146;font-size:.78rem;border-bottom:1px solid #eaecf0}
.infobox table{border-collapse:collapse;width:100%}
.infobox th{text-align:left;padding:.5rem .7rem;font-weight:700;width:38%;vertical-align:top}
.infobox td{padding:.5rem .7rem}
.infobox tr.hot td{font-weight:400;position:relative}
.infobox tr.hot td b{font-size:1.4rem;font-weight:500;background:linear-gradient(transparent 58%,color-mix(in srgb,#e8886a 55%,transparent) 58%)}
.infobox .ib-f{padding:.45rem .7rem;font-size:.72rem;color:#3c4146;border-top:1px solid #eaecf0}
.infobox a{color:var(--wiki-link)}
.cc{font:400 .78rem/1.5 var(--sans);color:var(--ink2);margin-top:.9rem;max-width:22rem}

/* revision log */
.hist{list-style:none;margin:2rem 0;padding:0;border:1px solid var(--wiki-rule);background:var(--wiki-bg);color:var(--wiki-ink);font:400 .875rem/1.45 var(--sans)}
.hist li{display:grid;grid-template-columns:1fr;gap:.1rem .9rem;padding:.7rem .8rem;border-bottom:1px solid #dfe3e8}
.hist li:last-child{border-bottom:0}
.hist li.key{background:#fff7ee}
.hist .t{font:400 .8rem/1.4 var(--sans);font-variant-numeric:tabular-nums;color:#3a4046}
.hist .w{font-weight:700;color:#7a2a17}
.hist .s a{color:var(--wiki-link)}
.hist .v{color:#3c4146;font-size:.78rem}
.hist .a{display:inline-block;margin-left:.35rem;font:700 .72rem/1 var(--sans);padding:.15rem .35rem;border:1px solid #7a2a17;color:#7a2a17;border-radius:2px;vertical-align:1px}
.hist-wrap{max-width:var(--wide)}
@media(min-width:48rem){.hist li{grid-template-columns:11.6rem 1fr 11.5rem}}
:root[data-theme=dark] .hist{background:var(--paper2);color:var(--ink);border-color:var(--rule)}
:root[data-theme=dark] .hist li{border-color:var(--rule)}
:root[data-theme=dark] .hist li.key{background:color-mix(in srgb,var(--terra) 12%,var(--paper2))}
:root[data-theme=dark] .hist .t,:root[data-theme=dark] .hist .v{color:var(--ink2)}
:root[data-theme=dark] .hist .w,:root[data-theme=dark] .hist .a{color:var(--terra-t);border-color:var(--terra-t)}
:root[data-theme=dark] .hist .s a,:root[data-theme=dark] .hist .v a{color:var(--sea)}

/* how long it stayed on screen */
.stay{margin:2.5rem 0;display:grid;gap:1.15rem;max-width:var(--wide)}
.stay .row b{font:500 1.02rem/1.3 var(--serif);display:block}
.stay .row span.d{font:400 .8125rem/1.4 var(--sans);color:var(--ink2)}
.track{position:relative;height:1.4rem;margin-top:.35rem;border-bottom:1px solid var(--rule)}
.bar{position:absolute;top:.25rem;bottom:.1rem;background:var(--terra);border-radius:1px}
.bar.open{background:linear-gradient(90deg,var(--terra) 70%,transparent)}
.dot{position:absolute;top:.2rem;width:.7rem;height:.7rem;margin-left:-.35rem;border-radius:50%;background:var(--terra)}
.mark{position:absolute;top:-.2rem;bottom:0;border-left:1px dashed var(--sea)}
.axis{position:relative;height:1.3rem;font:400 .75rem/1 var(--sans);color:var(--ink2)}
.axis i{position:absolute;font-style:normal;transform:translateX(-50%)}

/* scale stage */
.scale{padding-top:clamp(4rem,10vw,8rem)}
.scale>h2,.scale>.lede{max-width:var(--col);margin-left:auto;margin-right:auto;padding:0 1.25rem}
.scale-grid{position:relative;margin-top:2rem}
.pin{position:sticky;top:0;height:100svh;z-index:1;display:none}
.steps{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.step{max-width:var(--col);margin:0 auto 3rem;padding:0 1.25rem}
.step p{margin:0 0 .8rem}
.frame{margin:0 0 1rem}
.frame svg{width:100%;height:auto;display:block;background:var(--paper2);border:1px solid var(--rule)}
.frame figcaption{font:400 .8rem/1.45 var(--sans);color:var(--ink2);margin-top:.35rem}
.f-claim{fill:color-mix(in srgb,var(--terra) 10%,transparent);stroke:var(--terra);stroke-width:1.6;vector-effect:non-scaling-stroke}
.f-cell{fill:color-mix(in srgb,var(--terra) 38%,transparent);stroke:var(--terra);stroke-width:1.4;vector-effect:non-scaling-stroke}
.f-ref{fill:none;stroke:var(--ink2);stroke-width:1.2;vector-effect:non-scaling-stroke}
.f-t{fill:var(--ink);font-family:var(--sans)}
.f-grid{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.measure{font:500 1.05rem/1.5 var(--serif)}
.js-stage .pin{display:block}
.js-stage .frame{display:none}
.js-stage .step{min-height:78svh;display:flex;flex-direction:column;justify-content:center;margin-bottom:0}
.js-stage .step:last-child{min-height:130svh;justify-content:flex-start;padding-top:22svh}
.js-stage .step>*{background:linear-gradient(90deg,var(--paper) 78%,transparent);padding-right:1rem;margin-right:-1rem}
.pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pin .readout{position:absolute;left:1.25rem;bottom:1.1rem;font:500 .8125rem/1.3 var(--sans);color:var(--ink2);display:flex;align-items:center;gap:.6rem}
.pin .readout i{display:block;height:6px;border:1px solid var(--ink2);border-top:0}
.js-stage .scale-grid{margin-top:2rem}
.js-stage .steps{margin-top:-100svh}
@media(min-width:60rem){
 .js-stage .step{margin-left:max(1.25rem,calc((100vw - var(--wide))/2));margin-right:auto;max-width:21rem;padding:0}
 .js-stage .step>*{background:none;padding:0;margin-right:0;text-shadow:0 0 .5rem var(--paper),0 0 .15rem var(--paper),0 0 1rem var(--paper)}
 .pin .readout{left:calc(66% - 3rem);right:auto}
}
@media(max-width:59.99rem){
 .js-stage .pin{height:40svh;top:var(--bar);z-index:3;background:var(--paper);border-bottom:1px solid var(--rule)}
 .js-stage .steps{margin-top:0}
 .js-stage .step{background:var(--paper);min-height:62svh;justify-content:flex-start;padding-top:1.2rem;font-size:1.1rem}
 .js-stage .step>*{background:none}
 .js-stage .step:last-child{min-height:140svh;padding-top:1.2rem}
}

/* land */
.fig{margin:2.2rem 0;max-width:var(--wide)}
.fig figcaption{font:400 .8125rem/1.5 var(--sans);color:var(--ink2);margin-top:.5rem;max-width:var(--col)}
.fig figcaption a{color:inherit}
.pair{display:grid;gap:1.4rem;margin:2rem 0}
@media(min-width:44rem){.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:2.2rem}}
.pair img{border:1px solid var(--rule);max-height:26rem;width:auto;max-width:100%}
.pair .fig{margin:0}
.archive-lab{font:400 .8125rem/1.5 var(--sans);color:var(--ink2);border-left:2px solid var(--rule);padding:.1rem 0 .1rem .9rem;margin:1.3rem 0}
.bayfig svg{width:100%;height:auto;aspect-ratio:4/3;display:block;background:var(--b-land);border:1px solid var(--rule)}
@media(min-width:48rem){.bayfig svg{aspect-ratio:2/1}}
.b-land{fill:var(--b-land)}.b-sea{fill:var(--b-sea)}.b-blocks{fill:var(--b-block)}
.b-road{fill:none;stroke:var(--b-road);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.b-coast{fill:none;stroke:var(--b-coast);stroke-width:9;stroke-linejoin:round}
.b-lab{fill:var(--b-label);font:italic 400 150px var(--serif)}
.b-town-l{font:500 190px var(--serif);font-style:normal;letter-spacing:.02em}
.b-scale path{stroke:var(--b-label);stroke-width:8;fill:none}.b-scale text{fill:var(--b-label);font:500 120px var(--sans)}

/* lineup of squares */
.lineup{--m:2.2px;display:grid;gap:1.1rem;margin:2rem 0 .5rem}
@media(min-width:48rem){.lineup{--m:6px}}
.lineup .row{display:grid;grid-template-columns:calc(var(--m)*39) 1fr;gap:1rem;align-items:end}
.lineup .sq{display:block;background:color-mix(in srgb,var(--terra) 34%,transparent);border:1px solid var(--terra)}
.lineup .sq.g{background:color-mix(in srgb,var(--pencil) 22%,transparent);border-color:var(--pencil)}
.lineup .sq.t{background:color-mix(in srgb,var(--ink2) 12%,transparent);border-color:var(--ink2)}
.lineup .sq.o{background:none}
.lineup .lb{font:400 .8125rem/1.35 var(--sans);color:var(--ink2)}
.lineup .lb b{display:block;font:500 1.05rem/1.25 var(--serif);color:var(--ink)}
.lineup-wrap{padding-bottom:.5rem}

/* ledger */
.ledger{max-width:36rem;margin:2.2rem 0;background:var(--paper2);border:1px solid var(--rule);padding:1.3rem 1.2rem 1rem;position:relative;font-variant-numeric:tabular-nums lining-nums}
.ledger::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:8px;background:linear-gradient(90deg,transparent,var(--paper));opacity:.55}
.ledger h3{margin:0 0 .8rem;font:500 1.15rem/1.3 var(--serif)}
.ledger table{width:100%;border-collapse:collapse}
.ledger th,.ledger td{padding:.42rem .25rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:baseline}
.ledger td.n{text-align:right;font:500 1.12rem/1.3 var(--serif);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.ledger .typed{font-weight:500}
.ledger .pencil{font:italic 400 1.15rem var(--serif);color:var(--pencil);letter-spacing:.01em}
.ledger .mine{color:var(--sea)}
.ledger td.n.pencil{font-style:italic;font-weight:400;color:var(--pencil);font-size:1.2rem}
.ledger td.n.mine{font-weight:400}
.ledger tr.tot td{border-top:2px solid var(--ink);border-bottom:0;font-weight:500}
.ledger .key{font:400 .78rem/1.5 var(--sans);color:var(--ink2);margin:.9rem 0 0}
.ledger .key i{font-style:normal}
.ledger .lab{font-size:.98rem;line-height:1.35}

.endline{font:500 clamp(1.5rem,4.6vw,2.35rem)/1.22 var(--serif);font-variation-settings:"opsz" 40;letter-spacing:-.01em;margin:3.2rem 0 0;padding-top:1.5rem;border-top:2px solid var(--terra);max-width:var(--col);text-wrap:balance}
.dates2{display:grid;gap:1.4rem 2.4rem;margin:2.2rem 0;max-width:46rem}
@media(min-width:44rem){.dates2{grid-template-columns:1fr 1fr}}
.dates2>div{border-top:2px solid var(--terra);padding-top:.7rem}
.dates2 b{display:block;font:500 clamp(1.7rem,5vw,2.4rem)/1.1 var(--serif);font-variation-settings:"opsz" 40;color:var(--terra-t);letter-spacing:-.01em;margin-bottom:.45rem;font-variant-numeric:lining-nums}
.dates2 span{font-size:1.05rem;line-height:1.45}
.unknowns{max-width:var(--col);padding-left:1.2rem;margin:.6rem 0 1.6rem}
.unknowns li{margin:.45rem 0}
/* sources etc. */
.src{font:400 .9375rem/1.55 var(--sans);max-width:var(--col)}
.src ol{padding-left:1.3rem;margin:.6rem 0 1.6rem}
.src li{margin:.55rem 0}
.src h3{font:500 1.2rem/1.3 var(--serif);margin-top:2.2rem}
.chap.last{padding-bottom:6rem}
.plate{font:400 .9rem/1.55 var(--sans);color:var(--ink2);max-width:var(--col)}
footer{max-width:var(--wide);margin:0 auto;padding:2rem 1.25rem 3rem;border-top:1px solid var(--rule);font:400 .8125rem/1.6 var(--sans);color:var(--ink2);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
footer a{color:inherit}

/* rail */
.rail{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:30;display:none;flex-direction:column;gap:.9rem}
@media(min-width:76rem){.rail{display:flex}}
.rail a{position:relative;display:block;width:.6rem;height:.6rem;border-radius:50%;background:var(--rule);transition:transform .2s,background .2s}
.rail a[aria-current=true]{background:var(--terra);transform:scale(1.45)}
.rail a span{position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);white-space:nowrap;font:400 .78rem/1 var(--sans);color:var(--ink);background:var(--paper);padding:.3rem .5rem;border:1px solid var(--rule);border-radius:3px;opacity:0;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
.top{position:fixed;right:1rem;bottom:1rem;z-index:30;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--rule);color:var(--ink);text-decoration:none;font:400 1.1rem/1 var(--sans)}
@media print{.topbar,.rail,.top,.pin{display:none!important}}