@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/ebgaramond-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/ebgaramond-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"EB Garamond";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/ebgaramond-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/ebgaramond-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"IBM Plex Sans";font-style:normal;font-weight:300 700;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+2074,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:300 700;font-display:swap;src:url("fonts/IBMPlexSans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Paper at dawn by day, the night itself by night. The hero is always night. */
:root{
  color-scheme:light;
  --bg:#f3f0e8;--surface:#fbfaf6;--surface-2:#e8e4d8;
  --ink:#161a24;--ink-2:#2c3240;--muted:#4c5263;--line:#c6c3b8;--line-soft:#dedad0;
  --accent:#8a5a00;--accent-ink:#fff;
  --glow:#d9a441;--deep:#25407a;--flat:#9a9fae;--lit-1:#6d8fd0;--lit-2:#f0c060;
  --night:#060a16;--night-2:#0d1428;--night-ink:#eef0f5;--night-muted:#b3bccf;--night-line:rgba(220,228,245,.18);
  --serif:"EB Garamond","Iowan Old Style",Georgia,serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --topbar:44px;
  --map-sea:#e3dfd2;--map-land:#fbfaf6;--zone:rgba(232,170,60,.16);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#080c18;--surface:#0e1424;--surface-2:#151d31;
  --ink:#e9ebf1;--ink-2:#cfd4df;--muted:#a3abbd;--line:#2b3448;--line-soft:#1a2234;
  --accent:#f0c060;--accent-ink:#141006;
  --glow:#e3b257;--deep:#4d6fb8;--flat:#5c6478;--lit-1:#7d9fe0;--lit-2:#f5cf78;
  --map-sea:#070b16;--map-land:#18213a;--zone:rgba(160,190,255,.10);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080c18;--surface:#0e1424;--surface-2:#151d31;
  --ink:#e9ebf1;--ink-2:#cfd4df;--muted:#a3abbd;--line:#2b3448;--line-soft:#1a2234;
  --accent:#f0c060;--accent-ink:#141006;
  --glow:#e3b257;--deep:#4d6fb8;--flat:#5c6478;--lit-1:#7d9fe0;--lit-2:#f5cf78;
  --map-sea:#070b16;--map-land:#18213a;--zone:rgba(160,190,255,.10);
}
html{--to-top-bg:var(--bg);--to-top-fg:var(--ink)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar) + 14px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--accent)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;font-weight:600}
.skip-link:focus{top:10px}
.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2{font-family:var(--serif);font-weight:600;text-wrap:balance;line-height:1.08;letter-spacing:.003em}
.anchor{opacity:0;margin-left:.3em;text-decoration:none;color:var(--muted);font-family:var(--sans);font-size:.5em;vertical-align:middle;display:inline-block;min-width:1.4em}
h2:hover .anchor,.anchor:focus-visible{opacity:1}
@media (pointer:coarse){.anchor{opacity:.55}}

/* ---------- top bar: slim, takes the night's colours over the hero */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--topbar);z-index:40;display:flex;align-items:center;gap:6px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));background:var(--night);color:var(--night-ink);border-bottom:1px solid transparent;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.past-hero .topbar{background:var(--bg);color:var(--ink);border-bottom-color:var(--line-soft)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--serif);font-size:18px;font-weight:600;white-space:nowrap}
.brand-mark{width:22px;height:22px}
.topnav{display:flex;gap:14px;margin-left:18px;opacity:0;pointer-events:none;transition:opacity .3s}
.past-hero .topnav{opacity:1;pointer-events:auto}
.topnav a{text-decoration:none;color:var(--muted)}
.topnav a:hover{color:var(--accent)}
.spacer{flex:1}
.chip{display:inline-grid;place-items:center;min-width:32px;height:28px;border-radius:14px;text-decoration:none;font-size:12.5px;letter-spacing:.04em;opacity:.75}
.chip[aria-current="page"]{opacity:1;font-weight:600;box-shadow:inset 0 0 0 1px currentColor}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border:0;background:none;color:inherit;border-radius:50%;cursor:pointer}
.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:none}:root[data-theme="dark"] .i-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-sun{display:none}:root:not([data-theme="light"]) .i-moon{display:block}}
@media (max-width:860px){.topnav{display:none}}
@media (max-width:420px){.brand span{font-size:16px}}
.progress{position:fixed;left:0;right:0;top:var(--topbar);height:1px;z-index:39;pointer-events:none}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);opacity:.7}

/* ---------- rail: hairline of dots at the far edge, after the opening */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transition:opacity .4s}
.past-hero .rail{opacity:1;pointer-events:auto}
.rail-dot{position:relative;display:grid;place-items:center;width:18px;height:18px;text-decoration:none}
.rail-dot .dot{width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.45;transition:transform .2s,opacity .2s}
.rail-dot[aria-current="true"] .dot{opacity:1;background:var(--accent);transform:scale(1.4)}
.rail-label{position:absolute;right:24px;white-space:nowrap;font-size:12.5px;color:var(--ink);background:var(--surface);padding:2px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
@media (max-width:1180px){.rail{display:none}}

/* ---------- hero: the night */
.hero{background:var(--night);color:var(--night-ink);padding:calc(var(--topbar) + 22px) 0 26px;display:flex;flex-direction:column}
.hero-deck{max-width:900px;width:100%;margin:0 auto 20px;padding:0 20px;box-sizing:border-box}
.hero-text{width:100%;max-width:900px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.kicker{margin:0 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted)}
.hero h1{font-size:clamp(30px,3.6vw,48px);margin:0 0 14px}
.lede{display:none;margin:0 0 4px;font-size:17px;color:#f3d48e;font-weight:500}
.away{position:absolute;right:12px;top:22px;z-index:2;font-size:12px;letter-spacing:.04em;color:rgba(232,228,216,.7)}
.deck{font-size:clamp(17px,1.55vw,20px);color:#d6dbe6;margin:0}
.hero-deck>*{max-width:62ch}
.deck strong{color:#f3d48e;font-weight:600}
.incoming{margin:0 0 12px;padding:10px 14px;border:1px solid var(--night-line);border-radius:10px;font-size:15px;color:#e4e8f0}
.stage{position:relative;width:100%;max-width:1400px;margin:0 auto;padding:0 14px;box-sizing:border-box}
.still{display:none;width:100%;height:auto;border-radius:12px}
html:not(.js) .still{display:block}
html:not(.js) .wins,html:not(.js) .controls,html:not(.js) .result{display:none}
.wins{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:min(54vh,540px);min-height:300px}
.win{position:relative;overflow:hidden;border-radius:12px;background:#03050b}
.win canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.win::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,rgba(1,2,6,.55));pointer-events:none;z-index:1}
.win-top{position:absolute;left:12px;top:12px;z-index:2}
.pick{appearance:none;-webkit-appearance:none;font:600 16px var(--sans);color:#f4f1e8;background:rgba(6,10,22,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8e4d8' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid rgba(232,228,216,.3);border-radius:22px;padding:8px 34px 8px 14px;min-height:40px;max-width:min(62vw,280px);cursor:pointer}
.pick option,.pick optgroup{color:#111;background:#fff}
.win-read{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;color:#eef0f5;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.win-read p{margin:0}
.r-depth{font-size:14px;color:#c8cfdd}
.r-verdict{font:600 19px/1.25 var(--sans);margin:2px 0 4px!important;text-wrap:balance}
[data-verdict="light"] .r-verdict{color:#f5d38e}
[data-verdict="dark"] .r-verdict{color:#b9cdf5}
.r-count{font-size:13.5px;color:#c8cfdd}
.controls{margin:10px 0 0}
.datebox{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.dlabel{font-size:15px;color:var(--night-muted);min-width:9.5em}
.dlabel b{color:var(--night-ink);font-weight:600}
.datebox input[type=range]{flex:1 1 260px;accent-color:#f0c060;height:32px}
.dbtns{display:flex;gap:6px;flex-wrap:wrap}
.btn{font:500 14.5px var(--sans);border-radius:20px;padding:7px 14px;min-height:38px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.hero .btn{border-color:rgba(232,228,216,.45)}
.btn.play{background:#f0c060;color:#141006;border-color:#f0c060;font-weight:600}
.btn.play[data-on="1"]{background:transparent;color:#f0c060}
.btn.ghost{border-color:transparent;text-decoration:underline;text-underline-offset:.2em}
.caption{font-size:13.5px;color:var(--night-muted);margin:10px 0 0;max-width:80ch}
.result{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px}
.search{position:absolute;z-index:5;left:50%;top:60px;transform:translateX(-50%);width:min(420px,calc(100% - 28px));background:var(--surface);color:var(--ink);border-radius:12px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.search label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.search input{width:100%;font:16px var(--sans);padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.search ul{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow:auto}
.search li button{width:100%;text-align:left;font:15px var(--sans);padding:8px 10px;border:0;background:none;color:inherit;border-radius:6px;cursor:pointer}
.search li button:hover,.search li button:focus-visible{background:var(--surface-2)}
.search .note{padding:8px 10px;color:var(--muted);font-size:14px}

/* share row: compact icon buttons */
.share{display:flex;flex-direction:column;gap:2px}
.share-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.share-label{font-size:13.5px;color:var(--muted);margin-right:4px}
.hero .share-label{color:var(--night-muted)}
.ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:inherit;background:transparent;cursor:pointer;text-decoration:none}
.hero .ic{border-color:rgba(232,228,216,.28)}
.ic:hover,.ic:focus-visible{color:var(--accent);border-color:var(--accent)}
.hero .ic:hover{color:#f0c060;border-color:#f0c060}
@media (pointer:coarse){.ic{width:44px;height:44px}}
.share-msg{margin:0;font-size:13px;color:var(--muted);min-height:1em}

@media (max-width:720px){
  .hero{padding-top:calc(var(--topbar) + 14px)}
  .hero h1{font-size:28px}
  .hero-text{order:1}.stage{order:2}.hero-deck{order:3;margin:16px auto 0}.deck{font-size:16.5px}
  .hero h1{margin-bottom:10px}
  .lede{display:block;margin-bottom:12px}
  .away{display:none}
  .r-depth{display:none}
  .wins{height:min(54svh,480px);min-height:340px;gap:4px}
  .win-top{left:8px;top:8px;right:8px}
  .win-read{left:9px;right:9px;bottom:9px}
  .r-depth{font-size:12.5px}
  .r-verdict{font-size:15px}
  .r-count{font-size:12px;line-height:1.35}
  .pick{font-size:14px;min-height:38px;padding:6px 28px 6px 10px;max-width:100%;background-position:right 9px center}
  .stage{padding:0 10px}
}

/* ---------- prose */
.prose{max-width:760px;margin:0 auto;padding:30px 20px 10px}
.chapter{margin:0 0 56px}
.chapter h2{font-size:clamp(28px,3.2vw,40px);margin:46px 0 16px}
.chapter p{margin:0 0 1em}
.chapter strong{font-weight:600}
.fig{margin:22px -40px 24px;padding:0}
@media (max-width:860px){.fig{margin:20px 0}}
.fig figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin-top:8px}
.key{display:inline-flex;align-items:center;gap:6px}
.key i{display:inline-block;width:10px;height:10px;border-radius:50%}
.k-lit{background:linear-gradient(90deg,var(--lit-1),var(--lit-2))}.k-flat{background:var(--flat)}.k-zone{background:var(--zone);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px!important}
.k-ro{background:var(--accent)}.k-uk{background:var(--deep)}.k-d{background:var(--flat)}
/* map */
.map{width:100%;height:auto;display:block;border-radius:12px;cursor:crosshair;background:var(--map-sea)}
.map .sea{fill:var(--map-sea)}
.map .land{fill:var(--map-land);stroke:var(--line);stroke-width:.6}
.map .ro{fill:color-mix(in oklab,var(--accent) 16%,var(--map-land));stroke:var(--accent);stroke-width:.8}
.map .gb{fill:color-mix(in oklab,var(--deep) 18%,var(--map-land));stroke:var(--deep);stroke-width:.6}
.map .nightless{fill:var(--zone);transition:height .25s}
.map .line48{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:6 4}
.map .line-label{font:600 12px var(--sans);fill:var(--accent)}
.map .ronorth{fill:var(--accent)}
.map .city circle{fill:var(--ink)}
.map .city text{font:12px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--map-land);stroke-width:3px}
.map .st{stroke:var(--surface);stroke-width:.8}
.map .pin circle{fill:none;stroke:var(--ink);stroke-width:2}
.map .pin .pin-core{fill:var(--ink)}
/* scatter */
.scatter{width:100%;height:auto;display:block}
.scatter .g{stroke:var(--line-soft);stroke-width:1}
.scatter .g1{stroke:var(--muted);stroke-width:1}
.scatter .tx,.scatter .ty{font:12px var(--sans);fill:var(--muted)}
.scatter .axis{font:12.5px var(--sans);fill:var(--muted)}
.scatter .band{fill:color-mix(in oklab,var(--lit-2) 14%,transparent)}
.scatter .l18{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:5 4}
.scatter .ann{font:600 12.5px var(--sans);fill:var(--ink)}
.scatter .a18{fill:var(--accent)}
.scatter .a15{font-weight:500;fill:var(--muted);font-size:11.5px}
.scatter circle{stroke:var(--surface);stroke-width:.7}
.scatter .d{fill:var(--flat);opacity:.8}
.scatter .d-uk{fill:var(--deep)}
.scatter .d-ro{fill:var(--accent)}
/* year */
.fig-year canvas{width:100%;height:300px;display:block}
@media (max-width:720px){.fig-year canvas{height:260px}}
.life{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0 10px}
.life label{font-size:15px;color:var(--muted)}
.life input{font:16px var(--sans);width:7.5em;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.life .btn{color:var(--ink);border-color:var(--line)}
.life-out p{margin:.4em 0}
/* table */
.table-wrap{overflow-x:auto;margin:16px 0}
.cities{width:100%;border-collapse:collapse;font-size:15px}
.cities th,.cities td{padding:7px 10px;border-bottom:1px solid var(--line-soft);text-align:right}
.cities th:first-child{text-align:left;font-weight:500}
.cities thead th{font-size:12.5px;font-weight:600;color:var(--muted);vertical-align:bottom;line-height:1.3}
.more{color:var(--ink);border-color:var(--line)}
/* method */
.method p{font-size:16px}
.sources{font-size:14.5px;padding-left:1.1em;color:var(--ink-2)}
.sources li{margin:.35em 0}
.sources a{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
.related{font-size:15.5px}
.prose>.share{margin:10px 0 30px}
.site-footer{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:14px;color:var(--muted);padding:28px 20px 60px;border-top:1px solid var(--line-soft)}
@media print{.topbar,.rail,.progress,.controls,.result,.share{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}