/* Eras index (eras/) and chapter pages (eras/<slug>/): the era page as a book chapter.
   Layout (desktop ≥1280px):  [In this chapter 13rem] 3.5rem [text 62ch] 3rem [margin notes 15rem]
           (1100–1279px):     [text 62ch] 3rem [margin notes]          — chapter list folds above the text
           (<1100px):         [text]                                   — notes open under their sentence
   Every size below is in the reading font size (19px from 1100px), so 62ch is the 62-character measure. */

.t-era{--toc-w:13rem;--note-w:15rem;--note-gap:3rem;--toc-gap:3.5rem}
.t-era .ch-wrap{max-width:1380px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.ch-head,.ch-grid{font-size:var(--t-read)}
.ch-head-in,.ch-main{max-width:62ch;margin-inline:auto}
@media (min-width:1100px){
  .ch-head-in,.ch-main{max-width:calc(62ch + var(--note-gap) + var(--note-w))}
}
/* ≥1280px: one grid holds the opener and the chapter; the rail spans both rows, so it starts at the top of the text
   column (level with the breadcrumb) and its list stays sticky under the header while the chapter is read */
@media (min-width:1280px){
  .ch-grid{display:grid;grid-template-columns:var(--toc-w) calc(62ch + var(--note-gap) + var(--note-w));grid-template-rows:auto 1fr;column-gap:var(--toc-gap);justify-content:center}
  .ch-grid > .ch-open{grid-column:2;grid-row:1}
  .ch-grid > .ch-toc{grid-column:1;grid-row:1 / span 2;padding-top:20px}
  .ch-grid > .ch-main{grid-column:2;grid-row:2}
  .ch-main{margin:0;max-width:none}
  .ch-head-in{margin:0;max-width:none}
}

/* ---------- opener: chapter number, display years, title, locator, standfirst */
.ch-open{padding-block:20px 8px}
.ch-open .crumbs{margin-bottom:clamp(20px,4vw,48px)}
.ch-n{font:400 var(--t-lg)/1.2 var(--display);margin:0 0 .35em;color:var(--ink)}
.ch-n span{color:var(--dim)}
.ch-years{position:relative;margin:0 0 .12em -.04em;font:400 var(--t-display)/.9 var(--display);letter-spacing:-.03em;font-variant-numeric:lining-nums proportional-nums;color:var(--ink);white-space:nowrap;width:max-content;max-width:100%;view-transition-name:era-years}
.ch-years .yf{display:none}
/* outlined numerals that fill from left to right as the chapter is read; solid where unsupported or under reduced motion */
@supports (animation-timeline:scroll()) and (-webkit-text-stroke:1px black){
  @media (prefers-reduced-motion:no-preference){
    .ch-years .yo{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
    .ch-years .yf{display:block;position:absolute;inset:0;overflow:hidden;animation:yf-clip linear both;animation-timeline:scroll(root)}
    .ch-years .yf > span{display:block;animation:yf-hold linear both;animation-timeline:scroll(root)}
  }
}
@keyframes yf-clip{from{transform:translateX(-100%)}to{transform:none}}
@keyframes yf-hold{from{transform:translateX(100%)}to{transform:none}}
@media (max-width:560px){.ch-years .yo{-webkit-text-stroke-width:1px}}
.ch-title{font-size:var(--t-h1);max-width:16ch;margin:0;view-transition-name:era-title}
.ch-stand{font:400 var(--t-lg)/1.5 var(--display);font-size:clamp(1.25rem,1.1rem + .55vw,1.5rem);color:var(--ink);max-width:36em;margin:28px 0 0;text-wrap:pretty}

/* the mini Sea Lane: all ten eras on 1820→2026, overlaps on their own rows, this chapter lit */
.loc{margin-top:28px;max-width:calc(62ch + var(--note-gap) + var(--note-w))}
.loc-lane{--row:6px;--rg:3px;position:relative;height:calc(var(--rows) * var(--row) + (var(--rows) - 1) * var(--rg));margin-bottom:22px;view-transition-name:era-lane}
.loc-lane .seg{position:absolute;left:var(--l);width:max(calc(var(--w) - 2px),3px);top:calc(var(--r) * (var(--row) + var(--rg)));height:var(--row);border-radius:3px;background:var(--line-strong)}
.loc-lane .seg.lit{background:var(--blue);top:calc(var(--r) * (var(--row) + var(--rg)) - 3px);height:calc(var(--row) + 6px);box-shadow:0 0 0 2px var(--bg);z-index:1;view-transition-name:era-lit}
.loc-ax{position:absolute;inset:auto 0 -22px;display:flex;justify-content:space-between;font:400 var(--t-xs)/1 var(--display);color:var(--dim);font-variant-numeric:lining-nums}
.loc-nav{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:6px}
.loc-step{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--t-sm);color:var(--dim);text-decoration:none}
.loc-step:hover{color:var(--blue);text-decoration:underline}
.loc-step.next{margin-left:auto;text-align:right}

/* ---------- reading progress (phones and mid widths): 2px under the header */
.rprog{display:none}
.js .rprog{display:block;position:fixed;left:0;right:0;top:0;height:2px;z-index:21;pointer-events:none;transform:translateY(calc(var(--head-h) + env(safe-area-inset-top,0px) - 1px));transition:transform var(--d-2) var(--ease-out)}
.js.head-hidden .rprog{transform:translateY(env(safe-area-inset-top,0px))}
.rprog span{display:block;height:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--rp,0))}
@supports (animation-timeline:scroll()){.rprog span{animation:rp-grow linear both;animation-timeline:scroll(root)}}
@keyframes rp-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:1280px){.js .rprog{display:none}}

/* ---------- In this chapter: sticky star path (≥1280px), folded list above the text otherwise */
.ch-toc{display:none}
.toc-h{font:400 var(--t-lg)/1.2 var(--display);margin:0 0 12px}
.toc ol,.ch-toc-m ol{list-style:none;margin:0;padding:0}
.toc a,.ch-toc-m a{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;align-items:center;min-height:32px;padding:4px 0;color:var(--dim);text-decoration:none;font-size:var(--t-sm);line-height:1.3}
.toc a:hover,.ch-toc-m a:hover{color:var(--ink);text-decoration:underline}
.toc-star{display:grid;place-items:center;position:relative;z-index:1}
.toc-star svg{width:14px;height:14px;fill:var(--bg);stroke:var(--line-strong);stroke-width:2.2;transition:transform var(--d-2) var(--ease-star),fill var(--d-2)}
.toc a.past .toc-star svg{fill:var(--blue);stroke:var(--blue)}
.toc a[aria-current] {color:var(--ink)}
.toc a[aria-current] .toc-star svg{fill:var(--star);stroke:var(--blue);transform:scale(1.35)}
.toc-path{position:relative}
.toc-path::before,.toc-fill{content:"";position:absolute;left:7px;top:16px;bottom:16px;width:2px}
.toc-path::before{background:repeating-linear-gradient(to bottom,var(--line-strong) 0 3px,transparent 3px 9px)}
.toc-fill{top:0;bottom:0;background:var(--blue);transform-origin:50% 0;transform:scaleY(0);transition:transform var(--d-3) var(--ease-out)}
.toc-more{display:flex;flex-direction:column;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:var(--t-sm)}
.toc-more a{display:inline-flex;align-items:center;min-height:32px}
@media (min-width:1280px){
  .ch-toc{display:block}
  .toc{position:sticky;top:calc(var(--head-h) + 28px);max-height:calc(100vh - var(--head-h) - 48px);overflow:auto;padding:4px 4px 8px 0;overscroll-behavior:contain}
  .ch-toc-m{display:none}
}
.ch-toc-m{border-block:1px solid var(--line);margin:28px 0 8px}
.ch-toc-m summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font:400 var(--t-lg)/1.2 var(--display);list-style:none}
.ch-toc-m summary::-webkit-details-marker{display:none}
.ch-toc-m summary span{font:400 var(--t-sm)/1 var(--body);color:var(--dim)}
.ch-toc-m summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform var(--d-2) var(--ease-out)}
.ch-toc-m[open] summary::after{transform:translateY(2px) rotate(225deg)}
.ch-toc-m nav{padding:2px 0 14px}
.ch-toc-m a[aria-current]{color:var(--ink)}
.ch-toc-m a[aria-current] .toc-star svg{fill:var(--blue);stroke:var(--blue)}
@media (pointer:coarse){.ch-toc-m a{min-height:44px}}

/* ---------- the narrative: 62ch, 19px, no citation noise */
.ch-text{max-width:62ch;line-height:1.7;hyphens:manual}
.ch-text p{margin:0 0 1.05em;text-wrap:pretty}
.ch-part{scroll-margin-top:calc(var(--head-h) + 16px)}
.ch-text h2.sub{font:400 var(--t-h3)/1.2 var(--display);font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);letter-spacing:-.005em;margin:2.1em 0 .7em;max-width:30ch}
.ch-part:first-child h2.sub{margin-top:1.2em}
@supports (initial-letter:2) or (-webkit-initial-letter:2){
  .ch-part:first-child h2.sub + p::first-letter{-webkit-initial-letter:2;initial-letter:2;font-family:var(--display);font-weight:400;color:var(--ink);margin-right:.1em}
}
.ch-text em{font-family:var(--display);font-size:1.05em}
.ch-table{overflow-x:auto;margin:1.4em 0 .6em;font-size:var(--t-sm)}
.ch-table:focus-visible{outline-offset:4px}
.ch-text table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.ch-text th,.ch-text td{border-bottom:1px solid var(--line);padding:.5em .6em;text-align:left;vertical-align:top}
.ch-text th{font-size:var(--t-xs);color:var(--dim);font-weight:700;border-bottom-color:var(--line-strong)}
.ch-text .tsrc{font-size:var(--t-sm);color:var(--dim);line-height:1.5}
.ch-text .tsrc a{color:var(--dim)}

/* glossary terms: the first mention of a defined term links to its glossary entry, set like a defined term (<dfn>):
   ink colour with a dotted accent rule, solid on hover */
.ch-text a.gt{color:inherit;text-decoration:underline dotted var(--blue);text-decoration-thickness:1.5px;text-underline-offset:.22em}
.ch-text a.gt:hover{color:var(--blue);text-decoration-style:solid}

/* sidenote markers: small Newsreader numerals that do not disturb the line spacing; a larger invisible hit area */
.nref{position:relative;top:-.62em;margin-left:.06em;padding:0 .1em;font:600 .7em/0 var(--display);font-variant-numeric:lining-nums;color:var(--blue);text-decoration:none;border-radius:3px}
.nref::after{content:"";position:absolute;inset:-1em -.55em}
.nref:hover{text-decoration:underline}
.nref[aria-expanded="true"]{background:var(--blue);color:var(--blue-ink)}
.sn{display:none}
.sn-n{font:600 1em/1 var(--display);color:var(--ink);margin-right:.3em;font-variant-numeric:lining-nums}
.sn a{color:var(--dim)}
.sn a:hover{color:var(--blue)}
.sn.open{display:block;margin:.5em 0 .9em;padding:.6em .85em;border-left:2px solid var(--blue);background:var(--bg3);border-radius:0 8px 8px 0;font-size:var(--t-sm);line-height:1.5;color:var(--dim);animation:sn-in var(--d-2) var(--ease-out)}
.sn.open a{display:inline-block;padding-block:4px}
@keyframes sn-in{from{opacity:0;transform:translateY(-4px)}}
@media (min-width:1100px){
  .sn,.sn.open{display:block;float:right;clear:right;width:var(--note-w);margin:.35em calc(-1 * (var(--note-w) + var(--note-gap))) .9em 0;padding:0 0 0 12px;border:0;border-left:1px solid var(--line);background:none;border-radius:0;
    font-size:var(--t-xs);line-height:1.5;color:var(--dim);animation:none;text-wrap:pretty}
  .sn.open a{display:inline;padding:0}
  .sn.flash{animation:sn-flash var(--d-5) var(--ease-out)}
  .nref::after{inset:-.6em -.4em}
}
@keyframes sn-flash{0%,30%{border-left-color:var(--blue);color:var(--ink);background:var(--glow)}}

/* ---------- chapter sections */
.ch-sec{margin-top:72px;padding-top:36px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--head-h) + 16px)}
.ch-sec h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);margin-bottom:.7em;max-width:20ch}
.ch-sec > p,.ch-lede{max-width:62ch}
.ch-lede{color:var(--dim);font-size:var(--t-body)}
.ch-all{margin:24px 0 0;font-size:var(--t-body)}
.ch-all a{display:inline-flex;align-items:center;gap:6px;min-height:44px}

/* key events: a vertical lane of state-coloured nodes */
.lane{list-style:none;margin:8px 0 0;padding:0;max-width:calc(62ch + var(--note-gap) + var(--note-w));font-size:var(--t-body)}
.lv{--dw:6.25rem;display:grid;grid-template-columns:var(--dw) 22px minmax(0,1fr);column-gap:16px;position:relative;padding-bottom:26px}
.lv::before{content:"";position:absolute;left:calc(var(--dw) + 16px + 10px);top:.6em;bottom:-.6em;width:2px;background:var(--line-strong)}
.lv:last-child::before{display:none}
.lv-d{text-align:right;padding-top:.05em}
.lv-d .y{display:block;font:400 1.625rem/1 var(--display)}
.lv-d .dl{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--dim)}
.lv-node{width:12px;height:12px;border-radius:50%;background:var(--c,var(--national));justify-self:center;margin-top:.45em;box-shadow:0 0 0 4px var(--bg);position:relative;z-index:1}
.lv-b{min-width:0}
.lv-m{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.lv-b p{margin:0;max-width:62ch}
.lv-b .lv-s{margin-top:6px;font-size:var(--t-sm);color:var(--dim)}
.lv-s a{color:var(--dim);display:inline-block;padding-block:4px;margin-right:10px}
@media (max-width:600px){
  .lv{--dw:0px;grid-template-columns:22px minmax(0,1fr);column-gap:12px;grid-template-areas:"n d" "n b"}
  .lv::before{left:10px}
  .lv-d{grid-area:d;text-align:left;display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
  .lv-d .dl{margin:0}
  .lv-node{grid-area:n;margin-top:.5em}
  .lv-b{grid-area:b}
}

/* people: a register, not cards */
.people{margin:0;max-width:calc(62ch + var(--note-gap) + var(--note-w))}
.pp{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:4px 28px;padding:18px 0;border-top:1px solid var(--line)}
.pp:first-child{border-top:0;padding-top:4px}
.pp dt{font:400 1.375rem/1.2 var(--display)}
.pp dd{margin:0;color:var(--dim);font-size:var(--t-body);max-width:62ch}
@media (max-width:720px){.pp{grid-template-columns:1fr}}

/* where sources disagree: dispute cards (the one justified card on the page) */
.dcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:16px;max-width:calc(62ch + var(--note-gap) + var(--note-w))}
.dc{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;font-size:var(--t-body)}
.dc h3{font:600 1.1875rem/1.25 var(--display);margin:0}
.dc-vals{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.dc-v{font:400 1.75rem/1.1 var(--display);color:var(--ink)}
.dc-vs{font:italic 400 var(--t-sm)/1 var(--display);color:var(--dim)}
.dc-best{margin:0;font-size:var(--t-sm);color:var(--dim);line-height:1.5;padding-top:12px;border-top:1px solid var(--line)}
.dc-best a{color:var(--dim)}
.dc-pill{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:999px;font-size:var(--t-xs);font-weight:700;background:var(--blue);color:var(--blue-ink);border:1px solid var(--blue);vertical-align:1px}
.dc-pill.open{background:none;color:var(--weak);border-color:var(--weak)}
.dc-nosrc{display:inline-block;margin-top:4px;color:var(--dim);font-style:italic;font-size:var(--t-xs)}

/* through other eyes: original beside translation */
.ox{border-top:1px solid var(--line);max-width:calc(62ch + var(--note-gap) + var(--note-w))}
.ox:last-of-type{border-bottom:1px solid var(--line)}
.ox summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:14px 0;min-height:56px;cursor:pointer;list-style:none}
.ox summary::-webkit-details-marker{display:none}
.ox summary::after{content:"";grid-row:1 / span 2;grid-column:2;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform var(--d-2) var(--ease-out)}
.ox[open] summary::after{transform:translateY(2px) rotate(225deg)}
.ox-h{font:400 1.375rem/1.25 var(--display)}
.ox-meta{font-size:var(--t-sm);color:var(--dim)}
.ox-body{padding:4px 0 24px;font-size:var(--t-body)}
.ox-body > p{max-width:62ch}
.ox-src{font-size:var(--t-sm);color:var(--dim);margin:20px 0 10px;line-height:1.5}
.ox-src strong{font-weight:400}
.ox-src a{color:var(--blue)}
.ox-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 32px;margin:0 0 14px}
.ox-pair blockquote,.ox-solo{margin:0}
.ox-pair blockquote p,.ox-solo p{margin:0}
.ox-o,.ox-t{position:relative;padding-left:40px}
.ox-l{position:absolute;left:0;top:.3em;font:700 .6875rem/1 var(--body);letter-spacing:.06em;color:var(--dim);border:1px solid var(--line-strong);border-radius:4px;padding:3px 4px}
.ox-o blockquote{font:400 1.1875rem/1.55 var(--display);color:var(--ink)}
.ox-o blockquote:lang(ja){font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",var(--display);font-size:1.0625rem;line-height:1.8}
.ox-t blockquote{color:var(--ink);line-height:1.6}
.ox-solo{padding-left:40px;color:var(--ink)}
.ox-settles{font-size:var(--t-sm);color:var(--dim);margin:4px 0 0;padding-left:40px;line-height:1.55}
.ox-settles span{color:var(--ink);font-weight:700}
.ox-more{margin:18px 0 0;font-size:var(--t-sm)}
.ox-more a{display:inline-flex;align-items:center;min-height:32px}
@media (max-width:720px){.ox-pair{grid-template-columns:1fr;gap:10px}}

/* notes at the chapter end (and the footnotes in print) */
.endnotes{margin:0;padding:0 0 0 2.2em;columns:2 20rem;column-gap:3rem;font-size:var(--t-sm);line-height:1.5;color:var(--dim)}
.endnotes li{break-inside:avoid;padding:3px 0 7px;scroll-margin-top:calc(var(--head-h) + 24px)}
.endnotes li::marker{font:600 1em var(--display);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.endnotes a{color:var(--dim)}
.endnotes a:hover{color:var(--blue)}
.endnotes li:target{color:var(--ink);background:linear-gradient(var(--glow),var(--glow)) -8px 0/calc(100% + 16px) 100% no-repeat;border-radius:6px}
.en-back{display:inline-grid;place-items:center;width:28px;height:28px;margin:-4px 0;border-radius:6px;text-decoration:none;font-family:var(--body)}
.en-back:hover{background:var(--bg3)}
@media (pointer:coarse){.en-back{width:44px;height:44px;margin:-10px 0}}

/* ---------- next chapter: one full-width panel, one link */
.t-era .ch-next{margin-top:96px}
.nextch{display:grid;gap:8px;padding:clamp(28px,5vw,64px) clamp(20px,5vw,72px);border:1px solid var(--line-strong);border-radius:22px;color:var(--ink);text-decoration:none;
  background:radial-gradient(90% 120% at 100% 0%,var(--glow) 0%,transparent 60%),var(--bg2);transition:border-color var(--d-1)}
.nextch:hover{border-color:var(--blue)}
.next-k{font-size:var(--t-sm);color:var(--dim)}
.next-y{font:400 clamp(3rem,1.8rem + 5vw,6.5rem)/.95 var(--display);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.25px var(--ink);margin-top:4px;font-variant-numeric:lining-nums proportional-nums}
.next-t{font:400 var(--t-h2)/1.1 var(--display)}
.next-p{font-size:var(--t-lg);line-height:1.5;color:var(--dim);max-width:46ch}
.next-go{margin-top:12px;font-weight:700;color:var(--blue);display:inline-flex;gap:8px;align-items:center}
.next-go span{transition:transform var(--d-2) var(--ease-out)}
.nextch:hover .next-go span{transform:translateX(5px)}
@supports not (-webkit-text-stroke:1px black){.next-y{color:var(--ink)}}

/* ---------- chapter turns (Signature C): cross-document view transitions; era-turn.js sets the types
   "chapter" + "forward"/"back", and "turn" (chapter to chapter) or "index" (eras index to or from a chapter).
   Rules: the years and title never travel over body text, and two different sets of outlined numerals are never
   dissolved into each other. */
.t-era .site-head{view-transition-name:site-head}

/* chapter → chapter: the page slides one way; the years and title push through their own clipped boxes like a
   turning slot (old out, new in from the other side, side by side, never on top of each other). */
html:active-view-transition-type(turn){--vt-dx:32px;--vt-dy:0px;--vt-out-dx:-32px;--vt-out-dy:0px}
html:active-view-transition-type(turn):active-view-transition-type(back){--vt-dx:-32px;--vt-out-dx:32px}
html:active-view-transition-type(turn)::view-transition-old(root){animation:vt-out 180ms var(--ease-in-out) both}
html:active-view-transition-type(turn)::view-transition-new(root){animation:vt-in 320ms var(--ease-out) 180ms both}
html:active-view-transition-type(turn)::view-transition-group(era-years),
html:active-view-transition-type(turn)::view-transition-group(era-title){animation:none;overflow:clip}
html:active-view-transition-type(turn)::view-transition-old(era-years),html:active-view-transition-type(turn)::view-transition-new(era-years),
html:active-view-transition-type(turn)::view-transition-old(era-title),html:active-view-transition-type(turn)::view-transition-new(era-title){width:auto;height:auto;inset:0 auto auto 0}
html:active-view-transition-type(turn)::view-transition-old(era-years){animation:era-push-out 460ms var(--ease-in-out) both;--push:-1}
html:active-view-transition-type(turn)::view-transition-new(era-years){animation:era-push-in 460ms var(--ease-in-out) both;--push:1}
html:active-view-transition-type(turn)::view-transition-old(era-title){animation:era-push-out 460ms var(--ease-in-out) 60ms both;--push:-1}
html:active-view-transition-type(turn)::view-transition-new(era-title){animation:era-push-in 460ms var(--ease-in-out) 60ms both;--push:1}
html:active-view-transition-type(turn):active-view-transition-type(back)::view-transition-old(era-years),
html:active-view-transition-type(turn):active-view-transition-type(back)::view-transition-old(era-title){--push:1}
html:active-view-transition-type(turn):active-view-transition-type(back)::view-transition-new(era-years),
html:active-view-transition-type(turn):active-view-transition-type(back)::view-transition-new(era-title){--push:-1}
@keyframes era-push-out{to{transform:translateX(calc(var(--push) * (100% + 32px)));opacity:0}}
@keyframes era-push-in{from{transform:translateX(calc(var(--push) * (100% + 32px)));opacity:0}}

/* eras index <-> chapter: the old page clears first (140ms), the row's title and years then fly to the chapter opener
   (or back) over empty paper, and the new page appears only once they have landed. */
html:active-view-transition-type(index)::view-transition-old(root),html:active-view-transition-type(index)::view-transition-old(era-lane){animation:era-fade-out 140ms linear both}
html:active-view-transition-type(index)::view-transition-new(root),html:active-view-transition-type(index)::view-transition-new(era-lane){animation:era-fade-in 260ms var(--ease-out) 500ms both}
html:active-view-transition-type(index)::view-transition-group(era-years),html:active-view-transition-type(index)::view-transition-group(era-title),
html:active-view-transition-type(index)::view-transition-group(era-lit){animation-duration:440ms;animation-delay:100ms;animation-timing-function:var(--ease-in-out);z-index:2}
html:active-view-transition-type(index)::view-transition-old(era-years),html:active-view-transition-type(index)::view-transition-new(era-years),
html:active-view-transition-type(index)::view-transition-old(era-title),html:active-view-transition-type(index)::view-transition-new(era-title){width:100%;height:100%;object-fit:contain;object-position:left top}
html:active-view-transition-type(index)::view-transition-old(era-title),
html:active-view-transition-type(index)::view-transition-old(era-lit){animation:era-fade-out 220ms linear 120ms both}
html:active-view-transition-type(index)::view-transition-new(era-title),
html:active-view-transition-type(index)::view-transition-new(era-lit){animation:era-fade-in 240ms linear 280ms both}
/* the years are not shared with the index row (they would cross the title in flight): they write in where they stand */
html:active-view-transition-type(index)::view-transition-new(era-years){animation:era-fade-in 280ms var(--ease-out) 360ms both}
html:active-view-transition-type(index)::view-transition-old(era-years){animation:era-fade-out 140ms linear both}
@keyframes era-fade-out{to{opacity:0}}
@keyframes era-fade-in{from{opacity:0}}
/* shared elements hug their text, so the flying box scales the words rather than a wide empty block */
.g-title,.g-y{align-self:flex-start;width:fit-content}
.ch-title{width:fit-content}

/* ---------- eras index: a Gantt chart of the ten chapters on a shared 1820→2026 axis */
.gantt{--n:2.75rem;--tw:17.5rem;--sw:7rem;font-size:var(--t-body)}
/* the lane: the timeline's Sea Lane language (dotted lane line, decade ticks, stacked era bands with a 2px rule) */
.g-lane{display:grid;grid-template-columns:var(--n) var(--tw) minmax(0,1fr) var(--sw);margin-bottom:14px}
.g-lane-in{grid-column:3;position:relative}
.g-line{height:0;border-top:2px dotted color-mix(in srgb,var(--blue) 70%,transparent);margin-bottom:6px}
.gantt .bands{position:relative;--bh:20px;height:calc(var(--rows) * (var(--bh) + 2px))}
.gantt .band{position:absolute;left:calc(var(--x0) * 100%);width:calc(var(--w) * 100%);top:calc(var(--r) * (var(--bh) + 2px));height:var(--bh);min-width:3px;
  background:var(--bg3);border-left:2px solid var(--line-strong);color:var(--dim);font-size:var(--t-xs);line-height:var(--bh);white-space:nowrap;overflow:hidden;text-decoration:none;
  transition:background-color var(--d-2),color var(--d-2),border-color var(--d-2)}
.gantt .band span{display:none;padding-left:6px}
.gantt .band.lbl span{display:inline}
.gantt .band:hover{color:var(--ink);border-left-color:var(--blue)}
/* pointing at a chapter row lights its band on the lane */
.gantt:has(.g-row[data-slug="contact"] .g-link:is(:hover,:focus-visible)) .band[data-slug="contact"],
.gantt:has(.g-row[data-slug="spanish"] .g-link:is(:hover,:focus-visible)) .band[data-slug="spanish"],
.gantt:has(.g-row[data-slug="german"] .g-link:is(:hover,:focus-visible)) .band[data-slug="german"],
.gantt:has(.g-row[data-slug="japanese"] .g-link:is(:hover,:focus-visible)) .band[data-slug="japanese"],
.gantt:has(.g-row[data-slug="ww2"] .g-link:is(:hover,:focus-visible)) .band[data-slug="ww2"],
.gantt:has(.g-row[data-slug="trust-territory"] .g-link:is(:hover,:focus-visible)) .band[data-slug="trust-territory"],
.gantt:has(.g-row[data-slug="nationhood"] .g-link:is(:hover,:focus-visible)) .band[data-slug="nationhood"],
.gantt:has(.g-row[data-slug="free-association"] .g-link:is(:hover,:focus-visible)) .band[data-slug="free-association"],
.gantt:has(.g-row[data-slug="since-1979"] .g-link:is(:hover,:focus-visible)) .band[data-slug="since-1979"],
.gantt:has(.g-row[data-slug="recent"] .g-link:is(:hover,:focus-visible)) .band[data-slug="recent"]{background:color-mix(in srgb,var(--blue) 26%,var(--bg3));color:var(--ink);border-left-color:var(--blue)}
.g-ax{position:relative;height:26px;font:var(--t-xs)/1 var(--display);color:var(--dim);font-variant-numeric:lining-nums tabular-nums}
.g-ax .ticks{position:absolute;inset:0}
.g-ax .ticks i{position:absolute;top:0;left:calc(var(--x) * 100%);width:1px;height:4px;background:var(--line-strong)}
.g-ax .ticks i.maj{height:7px}
.g-ax > span:not(.ticks){position:absolute;top:11px;left:calc(var(--x) * 100%);transform:translateX(-50%)}
.g-ax > .g-ax-e{left:0;transform:none}
.g-ax > .g-ax-e.end{left:auto;right:0}
/* [jury3 #7] "2000" sits 12.6% from the end: below 440px of lane it would meet "2026", so it gives way (any width) */
.g-lane-in{container-type:inline-size}
@container (max-width:440px){.g-ax > .g-ax-near{display:none}}
.g-rows{list-style:none;margin:0;padding:0;position:relative;border-bottom:1px solid var(--line)}
.g-row{position:relative;border-top:1px solid var(--line)}
.g-link{display:grid;grid-template-columns:var(--n) var(--tw) minmax(0,1fr);align-items:center;min-height:64px;padding-right:var(--sw);color:var(--ink);text-decoration:none}
.g-n{font:400 1.125rem/1 var(--display);color:var(--dim)}
.g-t{display:flex;flex-direction:column;gap:3px;padding:8px 16px 8px 0;min-width:0}
.g-title{font:400 1.25rem/1.15 var(--display)}
.g-y{font:400 var(--t-sm)/1 var(--display);color:var(--dim)}
.g-rows::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--n) + var(--tw));right:var(--sw);pointer-events:none;
  background:linear-gradient(var(--line),var(--line)) 14.56% 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 38.83% 0/1px 100% no-repeat,
             linear-gradient(var(--line),var(--line)) 63.11% 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 87.38% 0/1px 100% no-repeat}
.g-track{position:relative;height:20px}
@media (max-width:760px){.g-rows::before{display:none}.g-track{
  background:linear-gradient(var(--line),var(--line)) 14.56% 50%/1px 400% no-repeat,linear-gradient(var(--line),var(--line)) 38.83% 50%/1px 400% no-repeat,
             linear-gradient(var(--line),var(--line)) 63.11% 50%/1px 400% no-repeat,linear-gradient(var(--line),var(--line)) 87.38% 50%/1px 400% no-repeat}}
.g-bar{position:absolute;left:var(--l);width:max(var(--w),4px);top:0;bottom:0;background:color-mix(in srgb,var(--blue) 30%,var(--bg3));border-left:2px solid var(--blue);transition:background-color var(--d-2),border-color var(--d-2)}
.g-link:hover .g-title,.g-link:focus-visible .g-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.g-link:hover .g-bar,.g-link:focus-visible .g-bar{background:color-mix(in srgb,var(--blue) 60%,var(--bg3));border-left-color:var(--ink)}
.g-link:focus-visible{outline-offset:-3px;border-radius:8px}
.g-more summary{position:absolute;top:10px;right:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;list-style:none;font-size:var(--t-sm);color:var(--ink);background:var(--bg)}
.g-more summary::-webkit-details-marker{display:none}
.g-more summary:hover{border-color:var(--blue)}
.g-plus{position:relative;width:10px;height:10px}
.g-plus::before,.g-plus::after{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:currentColor;transition:transform var(--d-2) var(--ease-out)}
.g-plus::after{transform:rotate(90deg)}
.g-more[open] .g-plus::after{transform:rotate(0)}
.g-more p{position:relative;margin:0 var(--sw) 16px var(--n);padding:14px 20px;max-width:62ch;background:var(--bg2);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:var(--t-body);line-height:1.6;animation:sn-in var(--d-3) var(--ease-out)}
.g-note{margin:20px 0 0;padding-left:var(--n);max-width:calc(var(--n) + 62ch);font-size:var(--t-sm);color:var(--dim)}
@media (max-width:760px){
  .gantt{--n:2rem;--sw:0px}
  .g-lane{grid-template-columns:var(--n) minmax(0,1fr)}
  .g-lane-in{grid-column:2}
  .gantt .band.lbl span{display:none}
  .g-link{grid-template-columns:var(--n) minmax(0,1fr);grid-template-areas:"n t" ". b";padding:12px 0 16px;align-items:start;min-height:0}
  .g-n{grid-area:n;padding-top:4px}
  .g-t{grid-area:t;padding:0 7.5rem 10px 0;min-height:44px;justify-content:center}
  .g-track{grid-area:b;height:16px}
  .g-more summary{top:8px}
  .g-more p{margin:0 0 16px var(--n)}
}

/* ---------- archival plates (scripts/pages/images.py): one lead image per era where a good one exists.
   Printed in two tones of the page's own palette, like an engraving tipped into the chapter: shadows in the darkest
   tone, highlights in the plate tone. The treatment is CSS only (grayscale → multiply → lighten); the image links to
   the untinted JPEG. Under html.ph-off (Photos switched off, or Save-Data) the picture is display:none, so the lazy
   image is never fetched, and a graticule placeholder holds the same box (no layout shift). */
.t-era{--ph-lo:var(--ink);--ph-hi:var(--bg2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-era{--ph-lo:var(--bg2);--ph-hi:color-mix(in srgb,var(--ink) 62%,var(--dim))}}
:root[data-theme="dark"] .t-era{--ph-lo:var(--bg2);--ph-hi:color-mix(in srgb,var(--ink) 62%,var(--dim))}
.ph{margin:36px 0 0;max-width:min(62ch,36rem)}
.ph-box{position:relative;aspect-ratio:var(--ar)}
.ph-open{display:block;height:100%;position:relative;isolation:isolate;overflow:hidden;background:var(--ph-hi);border-radius:3px;box-shadow:0 0 0 1px var(--line)}
.ph-open::after,.g-th::after{content:"";position:absolute;inset:0;background:var(--ph-lo);mix-blend-mode:lighten;pointer-events:none}
.ph-pic img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);mix-blend-mode:multiply}
.ph-open:focus-visible{outline-offset:4px}
.ph-ph{display:none;position:absolute;inset:0;place-content:center;justify-items:center;gap:10px;padding:16px;text-align:center;background:var(--bg3);border-radius:3px;box-shadow:inset 0 0 0 1px var(--line)}
.ph-ph svg{position:absolute;inset:0;width:100%;height:100%}
.ph-g{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.ph-ph .ph-st{position:static;width:40px;height:40px;fill:var(--line-strong)}
.ph-msg{position:relative;margin:0;font-size:var(--t-sm);color:var(--dim)}
.ph-one{position:relative}
.ph-off .ph:not(.ph-1) .ph-open{display:none}
.ph-off .ph:not(.ph-1) .ph-ph{display:grid}
.ph figcaption{margin-top:12px}
.ph-cap{margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--ink);text-wrap:pretty}
.ph-cred{margin:6px 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--dim);text-wrap:pretty}
.ph-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin:4px 0 0;font-size:var(--t-xs)}
.ph-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--dim)}
.ph-links a:hover{color:var(--blue)}
/* the site-wide Photos switch (needs JS) */
.ph-sw{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 2px;border:0;background:none;color:var(--dim);font:inherit;font-size:var(--t-xs);cursor:pointer}
.no-js .ph-sw{display:none}
.ph-sw-t{position:relative;width:30px;height:18px;border:1.5px solid var(--line-strong);border-radius:999px;transition:background-color var(--d-2),border-color var(--d-2)}
.ph-sw-t::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--line-strong);transition:transform var(--d-2) var(--ease-out),background-color var(--d-2)}
.ph-sw[aria-checked="true"] .ph-sw-t{background:var(--blue);border-color:var(--blue)}
.ph-sw[aria-checked="true"] .ph-sw-t::after{transform:translateX(12px);background:var(--blue-ink)}
.ph-sw:hover{color:var(--ink)}
@media (pointer:coarse){.ph-links a,.ph-sw{min-height:44px}}
/* ≥1100px: the plate stands to the right of the chapter's years and title, like a frontispiece */
@media (min-width:1100px){
  .ch-head-in.has-ph{display:grid;grid-template-columns:minmax(0,1fr) clamp(18rem,26vw,25rem);column-gap:clamp(32px,3.5vw,56px);align-items:start}
  .ch-head-in.has-ph > *{grid-column:1}
  .ch-head-in.has-ph > .ph{grid-column:2;grid-row:2 / span 5;margin:.5em 0 0;max-width:none}
}
/* eras index: a small plate at the end of the chapter's title column (wider screens only) */
.g-th{display:none}
@media (min-width:761px){
  .g-row.has-th .g-t{padding-right:calc(84px + 24px)}
  .g-th{display:block;position:absolute;top:4px;left:calc(var(--n) + var(--tw) - 84px - 16px);width:84px;height:56px;overflow:hidden;isolation:isolate;background:var(--ph-hi);border-radius:2px;box-shadow:0 0 0 1px var(--line)}
  .g-th img{display:block;width:84px;height:56px;object-fit:cover;filter:grayscale(1) contrast(1.04);mix-blend-mode:multiply}
}
.ph-off .g-th{display:none}

/* ---------- print: notes become footnotes */
@media print{
  .sn,.rprog,.ch-toc,.ch-toc-m,.loc-nav,.ch-next{display:none!important}
  .ch-grid,.ch-head{display:block}
  .ch-head-in,.ch-main{max-width:none}
  .nref{color:#000;top:-.5em}
  .ch-years .yo{color:#000;-webkit-text-stroke:0}
  .ch-years .yf{display:none!important}
  .ch-sec{margin-top:28px;padding-top:14px}
  .endnotes{columns:1;color:#000;font-size:9pt}
  .endnotes a[href^="http"]::after{content:" " attr(href);font-size:8pt;color:#444;word-break:break-all}
  .en-back{display:none}
  .dc{break-inside:avoid;border-color:#999}
  .ox-pair{break-inside:avoid}
  .ph{break-inside:avoid;max-width:12cm}
  .ph-open{background:none;box-shadow:none}
  .ph-open::after,.ph-sw,.g-th{display:none!important}
  .ph-pic img{mix-blend-mode:normal;filter:grayscale(1)}
}

/* small inline source links: hit areas reach 24px without changing the line layout */
.endnotes a,.ox-src a,.ox-settles a,.dc-best a,.ch-text .tsrc a,.ox-body > p a{padding-block:4px}
/* wide screens: tables fit the measure, so a sidenote inside a cell can reach the margin column */
@media (min-width:1100px){.ch-table{overflow:visible}}