/* Home (index.html): the four-star chart hero, the On-this-day dial, the era band, disputes, doors.
   Map geometry (scripts/pages/home.py): viewBox 1800×1275 = 131°E–167°E × 26°N–0.5°N, 50 units per degree.
   Yap sits at y 824.5 (45.806% of the width); phones crop to 135.6°E–165.6°E and 12.5°N–0.5°N (156px tall at 390px).
   Labels: offsets from the build's collision-aware pass (scripts/maplabels.py): --lx/--ly desktop, --plx/--ply phones. */

/* ---------- hero: one full-bleed chart. Night sea (dark) or chart paper (light). */
.hero{position:relative;overflow:hidden;margin-top:calc(-1 * var(--head-h));padding-top:var(--head-h);isolation:isolate;
  background:radial-gradient(60% 55% at 72% 18%,var(--glow) 0%,transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--sea) 100%)}
.hero{display:grid;grid-template-columns:100%;grid-template-areas:"top" "map" "cap"}
.hero-text{grid-area:top;width:100%;position:relative;z-index:2;padding-top:clamp(28px,.5rem + 3.4vw,64px);pointer-events:none}
.hero-text > *{pointer-events:auto}
.hero h1{font-size:clamp(2.6rem,1.3rem + 3.9vw,4.875rem);line-height:1.02;letter-spacing:-.022em;max-width:13em;margin-bottom:.35em}
/* the owner's emphasis: "four stars", upright in the accent (no italic file on Home's critical path) */
.hero h1 em{font-style:normal;color:var(--blue);white-space:nowrap}
.hero .lede{font-size:var(--t-lg);line-height:1.5;color:var(--dim);max-width:34em;margin:0}
.hero .btns{margin-top:clamp(20px,1rem + .6vw,28px)}

.hero-map{grid-area:map;position:relative;z-index:1;container-type:inline-size;aspect-ratio:1800/1275;width:100%}
.chart-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.grat path{stroke:var(--grat);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.grat-l{display:none}
.grat-l text{fill:var(--dim);font:15px var(--body);letter-spacing:.04em;opacity:.8}
.sky circle{fill:var(--sky);opacity:.5}
.atolls circle{fill:var(--dim);opacity:.75}
.flagfield{fill:var(--blue);opacity:0}
.lane{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.85;transition:stroke-width var(--d-1),opacity var(--d-1)}
.lane.hot{stroke-width:3;opacity:1}
.lane-draw{fill:none;stroke:#fff;stroke-width:40;stroke-dasharray:1 1;stroke-dashoffset:0}

/* the four states: links at their true positions; 44px targets centred on each star */
.isl-layer,.atl-layer{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.isl{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;pointer-events:auto;color:var(--ink);text-decoration:none;border-radius:50%}
.isl .st{display:grid;place-items:center;width:30px;height:30px}
.isl .st svg{width:100%;height:100%;overflow:visible;transition:transform var(--d-2) var(--ease-star)}
.isl .st path{fill:var(--star);transition:fill var(--d-1)}
.isl .st .ring{fill:none;stroke:var(--star-ring);stroke-width:1}
/* label tiers from the build: d = desktop, p = phones 390–899px, q = phones under 390px */
.lab,.atl{--lx:var(--dx);--ly:var(--dy);--lw:var(--dw);--la:var(--da);--lt:var(--dt);--l:var(--dl,none);--llx:var(--dlx);--lly:var(--dly);--lll:var(--dll);--llr:var(--dlr)}
.isl .lab{position:absolute;top:calc(50% + var(--ly));left:calc(50% + var(--lx));width:var(--lw);display:flex;flex-direction:column;align-items:var(--la);white-space:nowrap;font-size:var(--t-xs);line-height:1.3;color:var(--dim);text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}
.isl .lab b{font:600 1.0625rem/1.2 var(--display);color:var(--ink);letter-spacing:.005em}
.isl:hover .st svg,.isl:focus-visible .st svg,.isl.hot .st svg{transform:scale(1.25)}
.isl:hover .st path,.isl:focus-visible .st path,.isl.hot .st path{fill:var(--blue)}
.isl:hover .lab b,.isl.hot .lab b{color:var(--blue)}
.isl:focus-visible{outline:3px solid var(--blue);outline-offset:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .isl .st svg{filter:drop-shadow(0 0 6px rgba(108,172,228,.55))}}
:root[data-theme="dark"] .isl .st svg{filter:drop-shadow(0 0 6px rgba(108,172,228,.55))}
.atl{position:absolute;left:var(--x);top:var(--y);transform:translate(var(--lx),var(--ly));width:var(--lw);text-align:var(--lt);font-size:var(--t-xs);line-height:17px;color:var(--dim);white-space:nowrap;opacity:.9;text-shadow:0 0 4px var(--bg)}
.atl .s{display:none}
/* a leader hairline from the dot to a label the build had to set further out */
.atl::before,.isl .lab::before{content:"";display:var(--l);position:absolute;left:var(--llx);top:var(--lly);width:var(--lll);height:1px;background:var(--dim);opacity:.6;transform-origin:0 50%;transform:rotate(var(--llr))}
@media (min-width:900px){.atl.ds .f{display:none}.atl.ds .s{display:inline}}
@media (max-width:899px){
  .lab,.atl{--lx:var(--tx);--ly:var(--ty);--lw:var(--tw);--la:var(--ta);--lt:var(--tt);--l:var(--tl,none);--llx:var(--tlx);--lly:var(--tly);--lll:var(--tll);--llr:var(--tlr)}
  .atl.ts .f{display:none}.atl.ts .s{display:inline}
}
@media (max-width:599px){
  .atl.ts .f{display:inline}.atl.ts .s{display:none}
  .isl .lab span{display:none}
  .lab,.atl{--lx:var(--px);--ly:var(--py);--lw:var(--pw);--la:var(--pa);--lt:var(--pt);--l:var(--pl,none);--llx:var(--plx);--lly:var(--ply);--lll:var(--pll);--llr:var(--plr)}
  .atl.ps .f{display:none}.atl.ps .s{display:inline}
  .atl{font-size:.75rem;line-height:16px}
}
@media (max-width:389px){
  .lab,.atl{--lx:var(--qx);--ly:var(--qy);--lw:var(--qw);--la:var(--qa);--lt:var(--qt);--l:var(--ql,none);--llx:var(--qlx);--lly:var(--qly);--lll:var(--qll);--llr:var(--qlr)}
  .atl.ps .f{display:inline}.atl.ps .s{display:none}
  .atl.qs .f{display:none}.atl.qs .s{display:inline}
  .isl .lab b{font-size:.875rem}
}

/* caption: right of the buttons on desktop (where the flag stood), under the map on phones */
.hero-cap{grid-area:cap;width:100%;position:relative;z-index:2;color:var(--dim);font-size:var(--t-sm)}
.hero-cap p{margin:0;max-width:30em}
.cap-live{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.cap-live b{font:600 var(--t-lg)/1.2 var(--display);color:var(--ink)}
.cap-live .go{color:var(--blue);font-weight:700}
/* [jury3 #5/#16] the skip pill sits over the caption, out of flow: the caption is invisible while the pill shows (they
   cross-fade at 2.1 s), so ending the intro moves nothing below it */
.skip-intro{display:none;position:absolute;top:0;inset-inline-start:max(16px,env(safe-area-inset-left,0px));min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--ink);font:700 var(--t-sm)/1 var(--body);cursor:pointer}
.intro .skip-intro{display:inline-flex;align-items:center}
@media (prefers-reduced-motion:no-preference){.intro .skip-intro{animation:skip-out 250ms var(--ease-out) 2000ms both}}
@keyframes skip-out{to{opacity:0;visibility:hidden}}

@media (min-width:900px){
  .hero-text > *{max-width:min(40rem,56%)}
  /* the open sea above Yap tucks under the text; Yap's star clears the buttons by ~40px */
  .hero-map{margin-top:calc(40px - 45.806%)}
  .hero-cap{grid-area:top;align-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding-bottom:4px}
  .hero-cap p{max-width:21em}
  .skip-intro{top:auto;bottom:4px;inset-inline-start:auto;inset-inline-end:max(32px,env(safe-area-inset-right,0px))}
  .cap-live{justify-content:flex-end}
  .grat-l{display:block}
  .isl{--fx:var(--dfx);--fy:var(--dfy)}
  .ff-p{display:none}
}
@media (max-width:899px){
  /* 135.6°E–165.6°E × 12.5°N–0.5°N (156px tall at 390px): the map is wider than the screen; west, east and the open
     sea north of Ulithi are clipped, so Kosrae sits ≥16px inside the right edge and the islands fill the strip */
  .hero-map{width:calc(100vw * 36 / 30);margin-left:calc(-100vw * 4.6 / 30);margin-top:calc(20px - 100vw * 13.5 / 30);clip-path:inset(calc(100vw * 13.5 / 30) 0 -18px 0)}
  .isl{--fx:var(--pfx);--fy:var(--pfy)}
  .ff-d{display:none}
  .isl .st{width:22px;height:22px}
  .isl .lab b{font-size:.9375rem}
  .isl .lab span{font-size:.8125rem}
  .atolls circle{r:9}
  .hero-cap{padding-block:14px 32px}
  .skip-intro{top:14px}
}

/* ---------- signature A: four stars rise into the flag, then sail to their islands (once per session) */
@media (prefers-reduced-motion:no-preference){
  .intro .sky{animation:fade-in 400ms var(--ease-out) both}
  .intro .flagfield{animation:flagfield 1500ms var(--ease-out) 150ms both}
  .intro .isl{animation:sail 900ms var(--ease-in-out) both;animation-delay:calc(1000ms + var(--i) * 70ms)}
  .intro .isl .st{animation:star-in 500ms var(--ease-star) both;animation-delay:calc(200ms + var(--i) * 60ms)}
  .intro .isl .lab{animation:lab-in 500ms var(--ease-out) 2100ms both}
  .intro .atl-layer{animation:fade-in 500ms var(--ease-out) 2100ms both}
  .intro .lane-draw{stroke-dashoffset:1;animation:draw 600ms var(--ease-out) both;animation-delay:calc(1700ms + var(--i) * 90ms)}
  .intro .atolls{animation:fade-in 600ms var(--ease-out) 1800ms both}
  .intro .hero-cap .cap-default{animation:fade-in 400ms var(--ease-out) 2200ms both}
}
@keyframes fade-in{from{opacity:0}}
@keyframes flagfield{0%{opacity:0}30%{opacity:.16}70%{opacity:.16}100%{opacity:0}}
@keyframes sail{from{transform:translate(calc(var(--fx) * 1cqw),calc(var(--fy) * 1cqw)) scale(1.9)}to{transform:none}}
@keyframes star-in{from{opacity:0;transform:scale(.6)}}
@keyframes lab-in{from{opacity:0;transform:translateY(6px)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- signature D: On this day, a star dial */
.otd-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);grid-template-areas:"dial head" "dial list";grid-template-rows:auto 1fr;gap:0 clamp(32px,5vw,80px);align-items:start}
.otd-head{grid-area:head}
.otd-dial{grid-area:dial}
.otd-list{grid-area:list}
.otd-dial{display:flex;flex-direction:column;align-items:center;gap:12px}
.dial{position:relative;width:min(360px,100%);aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%;-webkit-tap-highlight-color:transparent}
.dial:active{cursor:grabbing}
.dial:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:50%}
.dial-svg{width:100%;height:100%;display:block;overflow:visible}
.d-ring{fill:none;stroke:var(--line);stroke-width:1}
.d-ticks{stroke:var(--dim);stroke-width:.8;opacity:.55;fill:none}
.d-dots circle{fill:var(--blue)}
.d-months text{fill:var(--dim);font:700 15px var(--body);letter-spacing:.02em}
.d-arc{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 6}
.d-arc.drawing{stroke-dasharray:1 1;stroke-dashoffset:1;animation:draw 500ms var(--ease-out) forwards}
.d-today circle{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.d-today.on-sel circle{r:21px;fill:none;stroke-width:1.5}
.d-sel{transition:transform var(--d-1) linear}
.d-sel path{fill:var(--star);stroke:var(--star-ring);stroke-width:.6}
.d-halo{fill:var(--blue);opacity:.22}
.d-sel-in{transform-box:fill-box;transform-origin:center}
.d-sel-in.pulse{animation:pulse var(--d-4) var(--ease-star)}
@keyframes pulse{50%{transform:scale(1.35)}}
.dial-read{position:absolute;inset:26%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.dr-date{font:400 clamp(1.75rem,1.4rem + 1vw,2.25rem)/1.05 var(--display);letter-spacing:-.01em}
.dr-date .num{display:block;font-size:1.6em;line-height:1}
.dr-n{margin-top:6px;font-size:var(--t-sm);color:var(--dim)}
.dial-ctl{display:flex;align-items:center;gap:10px}
.dial-ctl .btn{min-height:44px;padding-inline:18px;font-size:var(--t-sm)}
.dial-hint{font-size:var(--t-xs);color:var(--dim);text-align:center;max-width:30ch;margin:0}
.otd-head h2{margin-bottom:.25em}
.otd-status{margin:0 0 var(--sp-5)}
.otd-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));transition:opacity var(--d-2) var(--ease-out)}
.otd-list.fade{opacity:.35}
.otd-list .empty{grid-column:1/-1;color:var(--dim);margin:0}
@media (max-width:820px){
  .otd-grid{grid-template-columns:1fr;grid-template-areas:"head" "dial" "list"}
  .otd-dial{margin-bottom:var(--sp-6)}
  .dial{width:280px}
  .d-months text{font-size:18px}
}

/* ---------- two centuries at a glance: era band with key-moment stars */
.eraband .eb-lede{max-width:52ch;margin:0}
.eb-wrap{padding-inline:max(26px,env(safe-area-inset-left,0px));margin-top:clamp(24px,3vw,48px)}
@media (min-width:720px){.eb-wrap{padding-inline:32px}}
.eb{position:relative;max-width:1440px;margin:0 auto}
.pins{position:relative;height:calc(3 * var(--pin) + 6px);--pin:26px}
.pin{position:absolute;left:var(--a);bottom:calc(var(--lane) * var(--pin));width:24px;height:24px;margin-left:-12px;display:grid;place-items:center;color:var(--c);border-radius:50%;text-decoration:none}
.pin svg{width:15px;height:15px;overflow:visible;transition:transform var(--d-1) var(--ease-star)}
.pin path{fill:currentColor}
.pin::after{content:"";position:absolute;top:calc(50% + 8px);left:50%;width:1px;height:calc(var(--lane) * var(--pin) + 4px);background:var(--line-strong);opacity:.7}
.pin:hover svg,.pin:focus-visible svg,.pin.on svg{transform:scale(1.45)}
.pin.on{color:var(--ink)}
@media (pointer:coarse){.pins{--pin:44px}.pin{width:44px;height:44px;margin-left:-22px}.pin::after{top:calc(50% + 9px)}}
.axis{position:relative;height:30px;border-top:1px solid var(--line-strong)}
.ax-t{position:absolute;left:var(--a);top:0;transform:translateX(-50%);padding-top:7px;font:400 var(--t-xs)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--dim)}
.ax-t::before{content:"";position:absolute;top:0;left:50%;height:4px;border-left:1px solid var(--line-strong)}
.ax-t.ax-major::before{height:7px}
.ax-t:not(.l20){font-size:0}
/* bands: years + title when wide; the title alone (two lines at most) when narrower; below the width the title
   needs (class cwNN, from the build), a leader-line callout in the strip under the rows. Container queries, no JS. */
.segs{position:relative;height:calc(var(--rows) * 48px + var(--tiers) * 24px + 4px);margin-top:4px}
.eseg{position:absolute;left:var(--a);width:var(--w);min-width:16px;top:calc(var(--row) * 48px);height:42px;container-type:inline-size;
  display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 10px;border-radius:6px;text-decoration:none;color:var(--ink);
  background:color-mix(in srgb,var(--blue) 13%,var(--bg2));border:1px solid var(--line-strong);transition:background-color var(--d-1),color var(--d-1),border-color var(--d-1)}
.eseg + .eseg{margin-left:2px}
/* an era inside another (Recent years in "since 1979"): an inset at the end of its host band */
.eseg.host{padding-right:36px}
.eseg.nest{top:calc(var(--row) * 48px + 5px);height:32px;left:auto;right:4px;margin:0;z-index:1;border-radius:4px;background:color-mix(in srgb,var(--blue) 30%,var(--bg2))}
.eseg-y{font-size:var(--t-xs);color:var(--dim);white-space:nowrap;line-height:1.1;overflow:hidden}
.eseg-t{font:400 var(--t-sm)/1.15 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eseg-c{display:none;position:absolute;top:100%;left:50%;padding-top:calc(var(--drop) + 9px);font:400 var(--t-sm)/1.2 var(--display);color:var(--dim);white-space:nowrap;pointer-events:auto}
.eseg-c::before{content:"";position:absolute;top:1px;left:0;height:calc(var(--drop) + 6px);border-left:1px solid var(--line-strong)}
.eseg.end .eseg-c{left:auto;right:calc(50% - 1px);text-align:right}
.eseg.end .eseg-c::before{left:auto;right:0}
@container (max-width:59px){.cs60 .eseg-y{display:none}.cs60 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:69px){.cs70 .eseg-y{display:none}.cs70 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:79px){.cs80 .eseg-y{display:none}.cs80 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:89px){.cs90 .eseg-y{display:none}.cs90 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:99px){.cs100 .eseg-y{display:none}.cs100 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:109px){.cs110 .eseg-y{display:none}.cs110 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:119px){.cs120 .eseg-y{display:none}.cs120 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:129px){.cs130 .eseg-y{display:none}.cs130 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:139px){.cs140 .eseg-y{display:none}.cs140 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:149px){.cs150 .eseg-y{display:none}.cs150 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:159px){.cs160 .eseg-y{display:none}.cs160 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:169px){.cs170 .eseg-y{display:none}.cs170 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:179px){.cs180 .eseg-y{display:none}.cs180 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:189px){.cs190 .eseg-y{display:none}.cs190 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:199px){.cs200 .eseg-y{display:none}.cs200 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:209px){.cs210 .eseg-y{display:none}.cs210 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:219px){.cs220 .eseg-y{display:none}.cs220 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:229px){.cs230 .eseg-y{display:none}.cs230 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:239px){.cs240 .eseg-y{display:none}.cs240 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:249px){.cs250 .eseg-y{display:none}.cs250 .eseg-t{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@container (max-width:29px){.cw30 .eseg-t{display:none}.cw30 .eseg-y{display:block}.cw30 .eseg-c{display:block}}
@container (max-width:39px){.cw40 .eseg-t{display:none}.cw40 .eseg-y{display:block}.cw40 .eseg-c{display:block}}
@container (max-width:49px){.cw50 .eseg-t{display:none}.cw50 .eseg-y{display:block}.cw50 .eseg-c{display:block}}
@container (max-width:59px){.cw60 .eseg-t{display:none}.cw60 .eseg-y{display:block}.cw60 .eseg-c{display:block}}
@container (max-width:69px){.cw70 .eseg-t{display:none}.cw70 .eseg-y{display:block}.cw70 .eseg-c{display:block}}
@container (max-width:79px){.cw80 .eseg-t{display:none}.cw80 .eseg-y{display:block}.cw80 .eseg-c{display:block}}
@container (max-width:89px){.cw90 .eseg-t{display:none}.cw90 .eseg-y{display:block}.cw90 .eseg-c{display:block}}
@container (max-width:99px){.cw100 .eseg-t{display:none}.cw100 .eseg-y{display:block}.cw100 .eseg-c{display:block}}
@container (max-width:109px){.cw110 .eseg-t{display:none}.cw110 .eseg-y{display:block}.cw110 .eseg-c{display:block}}
@container (max-width:119px){.cw120 .eseg-t{display:none}.cw120 .eseg-y{display:block}.cw120 .eseg-c{display:block}}
@container (max-width:129px){.cw130 .eseg-t{display:none}.cw130 .eseg-y{display:block}.cw130 .eseg-c{display:block}}
@container (max-width:139px){.cw140 .eseg-t{display:none}.cw140 .eseg-y{display:block}.cw140 .eseg-c{display:block}}
@container (max-width:149px){.cw150 .eseg-t{display:none}.cw150 .eseg-y{display:block}.cw150 .eseg-c{display:block}}
@container (max-width:159px){.cw160 .eseg-t{display:none}.cw160 .eseg-y{display:block}.cw160 .eseg-c{display:block}}
/* a callout band keeps its years inside while they fit */
@container (max-width:63px){.eseg .eseg-y{display:none}}
.eseg:hover,.eseg:focus-visible,.eseg.on{background:var(--blue);color:var(--blue-ink);border-color:var(--blue)}
.eseg:hover .eseg-y,.eseg:focus-visible .eseg-y,.eseg.on .eseg-y{color:inherit}
.eseg:hover .eseg-c,.eseg:focus-visible .eseg-c,.eseg.on .eseg-c{color:var(--ink)}
.eseg:hover .eseg-c::before,.eseg:focus-visible .eseg-c::before,.eseg.on .eseg-c::before{border-left-color:var(--blue)}
.eseg:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.era-list{display:none}

.caps{display:grid;margin-top:clamp(20px,2.5vw,36px)}
.cap{grid-area:1/1;display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:4px var(--gap);align-content:start;border-top:1px solid var(--line);padding-top:18px}
.js .caps .cap[hidden]{display:grid!important;visibility:hidden}
.js .caps .cap:not(.on){visibility:hidden}
.cap > *{grid-column:2;margin:0}
.cap .cap-k{grid-column:1;grid-row:1;font-size:var(--t-xs);color:var(--dim);font-weight:700}
.cap .cap-y{grid-column:1;grid-row:2 / span 4;font-size:clamp(2.5rem,1.6rem + 2.4vw,3.75rem);line-height:1;letter-spacing:-.02em}
.cap-t{font-size:var(--t-h3);font-weight:400;margin:0}
.cap-p{font-size:var(--t-read);line-height:1.6;max-width:62ch;margin-top:6px}
.cap-chips{display:flex;flex-wrap:wrap;gap:6px}
.cap-src{font-size:var(--t-sm);color:var(--dim)}
.cap-src a{color:var(--dim)}
.cap-go{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.eb-more{display:flex;flex-wrap:wrap;gap:4px 28px;margin:var(--sp-5) 0 0}
.eb-more a{display:inline-flex;align-items:center;min-height:44px}

/* below 900px the bands would be too narrow to name in place: the chapters read as a labelled list instead */
@media (max-width:899px){
  .segs{display:none}
  .ax-t{font-size:0}
  .ax-t.ax-major{font-size:var(--t-xs)}
  .era-list{display:block;list-style:none;margin:var(--sp-5) 0 0;padding:0;border-top:1px solid var(--line)}
  .era-list a{position:relative;display:grid;grid-template-columns:7.2rem minmax(0,1fr);align-items:center;gap:12px;min-height:64px;padding:10px 0 14px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
  .pl-y{font-size:var(--t-sm);color:var(--dim)}
  .pl-t{font:400 1.25rem/1.2 var(--display)}
  /* the era's span on the 1820→2026 axis: overlapping chapters light the same stretch */
  .era-list i{position:absolute;left:0;right:0;bottom:5px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent var(--a),var(--blue) var(--a),var(--blue) calc(var(--a) + var(--w)),transparent calc(var(--a) + var(--w))),var(--line)}
  .cap{grid-template-columns:1fr}
  .cap > *,.cap .cap-k,.cap .cap-y{grid-column:1;grid-row:auto}
  .cap .cap-y{font-size:2.5rem}
  .js .caps .cap:not(.cap-m){display:none!important}
}

/* ---------- disputes and other eyes (kept); phones read the table as dispute cards */
.t-home .pair blockquote:first-child{font-style:normal;font-family:var(--display);font-size:var(--t-lg);line-height:1.45}
@media (max-width:720px){
  .disputes .tbl thead{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
  .disputes .tbl,.disputes .tbl tbody,.disputes .tbl tr,.disputes .tbl td{display:block;width:100%}
  .disputes .tbl tr{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
  .disputes .tbl td{border:0;padding:3px 0}
  .disputes .tbl td:first-child{font:600 var(--t-lg)/1.25 var(--display);padding-bottom:6px}
  .disputes .tbl td:not(:first-child)::before{content:attr(data-l);display:block;font-size:var(--t-xs);font-weight:700;color:var(--dim)}
}

/* ---------- doors: a plain three-column row of text, with one rule above */
.doors ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5) var(--gap)}
.doors li{border-top:1px solid var(--line-strong);padding-top:16px}
.doors a{display:inline-flex;align-items:center;min-height:44px;font:400 var(--t-h3)/1.15 var(--display);color:var(--ink);text-decoration-color:var(--line-strong)}
.doors a:hover{color:var(--blue);text-decoration-color:currentColor}
.doors p{margin:4px 0 0;color:var(--dim);font-size:var(--t-sm);max-width:34ch}
@media (max-width:760px){.doors ul{grid-template-columns:1fr}}
.t-home .site-foot{margin-top:0}