/* Reading Room — a book surface, not a wiki page.
   Warm ink palette, serif reading column, plates and apparatus around it. */

:root {
  --ink: #0c0b0a;
  --ink-2: #14120f;
  --ink-3: #1c1916;
  --rule: #2e2823;
  --rule-soft: #221e1a;
  --paper: #e9e1d4;
  --paper-dim: #b3a897;
  --paper-faint: #7d7365;
  --ember: #c8763f;
  --ember-soft: #8a4f2a;
  --gold: #d8b26a;
  --blood: #8f3a3a;
  --steel: #5b7a8c;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rail-w: 264px;
  --measure: 40rem;

  /* Recurring effects, named once so a theme overrides eight values instead of
     forty literals. A "wash" is a translucent lift off the surface; on paper it
     has to darken rather than lighten, which is why it cannot be a literal. */
  --wash: rgba(255,255,255,.03);
  --wash-2: rgba(255,255,255,.045);
  --ember-wash: rgba(200,118,63,.08);
  --ember-ring: rgba(200,118,63,.2);
  --ember-hair: rgba(200,118,63,.4);
  --gold-wash: rgba(216,178,106,.06);

  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
  --shadow-panel: 0 20px 52px rgba(0,0,0,.62);
  --shadow-note: 0 14px 34px rgba(0,0,0,.55);
  --scrim: rgba(20,18,15,.93);

  --map-bg: #10100f;
  --tile-filter: grayscale(.6) brightness(.62) contrast(1.12) sepia(.22);

  /* Plates are printed on the page, so they carry the page's own light. */
  --img-cover: grayscale(.35) contrast(1.05) brightness(.62);
  --img-plate: grayscale(.25) contrast(1.03);
  --img-face: grayscale(.55) contrast(1.06);
  --img-thumb: grayscale(.5) brightness(.75);

  --veil: 12,11,10;
}

/* ---- paper ----------------------------------------------------------------
   The same room by daylight. Ink and paper swap, the ember stays but darkens
   enough to hold contrast on cream, and every filter tuned to lift images out
   of the dark is reversed to sit them back down onto the page. */
:root[data-theme="light"] {
  --ink: #f5f0e6;
  --ink-2: #ece5d7;
  --ink-3: #e0d7c5;
  --rule: #cec0a8;
  --rule-soft: #ded3bf;
  --paper: #221d17;
  --paper-dim: #554c40;
  --paper-faint: #857a69;
  --ember: #a2521d;
  --ember-soft: #c07a45;
  --gold: #8a6a1f;
  --blood: #8f3a3a;
  --steel: #40637a;

  --wash: rgba(0,0,0,.035);
  --wash-2: rgba(0,0,0,.055);
  --ember-wash: rgba(162,82,29,.09);
  --ember-ring: rgba(162,82,29,.2);
  --ember-hair: rgba(162,82,29,.45);
  --gold-wash: rgba(138,106,31,.09);

  --shadow-lg: 0 18px 44px rgba(60,45,25,.22);
  --shadow-panel: 0 20px 46px rgba(60,45,25,.24);
  --shadow-note: 0 12px 28px rgba(60,45,25,.18);
  --scrim: rgba(246,241,232,.95);

  --map-bg: #e8e1d3;
  --tile-filter: grayscale(.35) contrast(.95) sepia(.16);

  --img-cover: grayscale(.2) contrast(1.02) brightness(.94);
  --img-plate: grayscale(.12) contrast(1.02);
  --img-face: grayscale(.35) contrast(1.03);
  --img-thumb: grayscale(.3) brightness(.98);

  --veil: 245,240,230;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---- reading progress ---- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: var(--rule-soft);
}
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ember-soft), var(--ember), var(--gold));
  transition: width .15s linear;
}

/* ---- left rail / table of contents ---- */
.rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w);
  border-right: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  display: flex; flex-direction: column; z-index: 50;
}
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--rule-soft);
}
.rail-home {
  font-family: var(--sans); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--paper-faint); text-decoration: none;
}
.rail-home:hover { color: var(--ember); }
.rail-toggle {
  display: none; background: none; border: 0; color: var(--paper-dim);
  font-size: 18px; cursor: pointer;
}

.toc { flex: 1; overflow-y: auto; padding: 14px 12px 24px; }
.toc-group {
  font-family: var(--sans); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper-faint);
  padding: 16px 10px 6px;
}
.toc a {
  display: block; padding: 5px 10px 5px 14px; margin: 1px 0;
  font-family: var(--sans); font-size: 13px; line-height: 1.35;
  color: var(--paper-dim); text-decoration: none;
  border-left: 2px solid transparent; border-radius: 0 3px 3px 0;
}
.toc a:hover { color: var(--paper); background: var(--wash); }
.toc a.lvl-2 { padding-left: 26px; font-size: 12.5px; color: var(--paper-faint); }
.toc a.lvl-3 { padding-left: 38px; font-size: 12px; color: var(--paper-faint); }
.toc a.active { color: var(--ember); border-left-color: var(--ember); background: var(--ember-wash); }

.rail-foot {
  padding: 14px 20px 18px; border-top: 1px solid var(--rule-soft);
  font-family: var(--sans); font-size: 10.5px; line-height: 1.6; color: var(--paper-faint);
}
.rail-foot a { color: var(--paper-dim); }
.rail-foot .badge {
  display: inline-block; margin-bottom: 8px; padding: 3px 8px;
  border: 1px solid var(--rule); border-radius: 999px;
  letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; color: var(--gold);
}

/* ---- main column ---- */
.book { margin-left: var(--rail-w); padding-bottom: 20vh; }

@keyframes pulse { 0%,100% { opacity:.3 } 50% { opacity:1 } }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- the binding screen ----
   Shown only until the article's own text arrives, which on a cold build is
   about a fifth of the total. Every line on it is a real event from the build,
   with the real elapsed time — there is no synthetic progress here. */
.binder { min-height: 84vh; display: flex; align-items: center; }
.binder-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.binder-eyebrow {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
.binder-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; margin: 0;
  font-weight: 600; letter-spacing: -.02em; text-wrap: balance;
}
.binder-stages { list-style: none; margin: 34px 0 0; padding: 0; border-left: 1px solid var(--rule-soft); max-width: 40rem; }
.binder-stages li {
  position: relative; padding: 9px 0 9px 26px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  font-family: var(--sans); font-size: 12.5px; color: var(--paper-faint);
}
.binder-stages li::before {
  content: ''; position: absolute; left: -4px; top: 16px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rule);
}
.binder-stages li.on { color: var(--paper); }
.binder-stages li.on::before {
  background: var(--ember); box-shadow: 0 0 0 4px var(--ember-ring);
  animation: pulse 1.5s ease-in-out infinite;
}
.binder-ms { font-family: var(--mono); font-size: 11px; color: var(--paper-faint); flex: 0 0 auto; }
.binder-foot { margin-top: 30px; font-family: var(--sans); font-size: 11.5px; color: var(--paper-faint); }
.binder.failed .binder-title { color: var(--blood); }
.binder.failed .binder-stages li.on::before { background: var(--blood); box-shadow: none; animation: none; }

/* ---- apparatus strip ----
   The book is readable while the rest of it is still being built. Say so. */
.apparatus-note {
  position: fixed; left: calc(var(--rail-w) + 26px); bottom: 22px; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--scrim); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-note);
  font-family: var(--sans); font-size: 11.5px; color: var(--paper-dim);
  transition: opacity .5s ease, transform .5s ease;
}
.apparatus-note.done { opacity: 0; transform: translateY(10px); }
.apparatus-pulse {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember); animation: pulse 1.5s ease-in-out infinite;
}

.arriving { animation: arrive .5s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .arriving { animation: none; }
  .binder-stages li.on::before, .apparatus-pulse { animation: none; }
  html { scroll-behavior: auto; }
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.measure { max-width: var(--measure); }

section.block { padding: 72px 0; border-top: 1px solid var(--rule-soft); }
section.block:first-of-type { border-top: 0; }

.block-title {
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ember);
  margin: 0 0 6px;
}
.block-caption {
  font-family: var(--sans); font-size: 12.5px; color: var(--paper-faint);
  max-width: 46rem; margin: 0 0 28px;
}
.block-title + .block-caption { margin-top: 10px; }
.block-title:only-child, .block-title.solo { margin-bottom: 28px; }

/* ---- cover ---- */
.cover { position: relative; min-height: 78vh; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--rule); overflow: hidden; }
.cover-art { position: absolute; inset: 0; }
.cover-art img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-cover); }
.cover-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--veil),.72) 0%, rgba(var(--veil),.28) 38%, rgba(var(--veil),.92) 88%, var(--ink) 100%),
    radial-gradient(120% 80% at 20% 100%, var(--ember-ring), transparent 60%);
}
.cover-inner { position: relative; padding: 0 40px 56px; width: 100%; max-width: 1080px; margin: 0 auto; }
.cover-eyebrow {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.cover h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; margin: 0 0 16px;
  font-weight: 600; letter-spacing: -.02em; text-wrap: balance;
}
.cover-sub {
  font-size: 1.12rem; color: var(--paper-dim); max-width: 34rem; margin: 0 0 30px; font-style: italic;
}
.cover-facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); }
.cover-fact { padding: 16px 28px 4px 0; margin-right: 28px; border-right: 1px solid var(--rule-soft); }
.cover-fact:last-child { border-right: 0; }
.cover-fact dt {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--paper-faint); margin-bottom: 4px;
}
.cover-fact dd { margin: 0; font-size: .98rem; color: var(--paper); max-width: 22rem; }

/* The cover clips its overflow, so the plate strip has to scroll on its own. */
.plates { display: flex; gap: 8px; margin-top: 26px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.plates img { flex: 0 0 auto; }
.plates img {
  width: 62px; height: 62px; object-fit: cover; border: 1px solid var(--rule);
  filter: var(--img-thumb); cursor: pointer; transition: .2s;
}
.plates img:hover, .plates img.on { filter: none; border-color: var(--ember); }

/* ---- sides ---- */
.sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 28px; align-items: start; }
.side-col { min-width: 0; }
.side-col.right { text-align: right; }
.side-name { font-size: 1.7rem; margin: 0 0 12px; letter-spacing: -.01em; }
.side-parties { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.side-col.right .side-parties { justify-content: flex-end; }
.chip {
  font-family: var(--sans); font-size: 11.5px; padding: 3px 9px;
  border: 1px solid var(--rule); border-radius: 999px; color: var(--paper-dim);
}
.versus {
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em; color: var(--paper-faint);
  padding-top: 12px; position: relative;
}
.versus::before, .versus::after {
  content: ''; position: absolute; left: 50%; width: 1px; background: var(--rule-soft);
}
.versus::before { top: -60px; height: 52px; }
.versus::after { top: 40px; bottom: -80px; }

.formation { margin-bottom: 14px; }
.formation-name {
  font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 5px;
}
.formation ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--paper-dim); }
.formation li { line-height: 1.5; }

/* ---- forces ---- */
.phase-tabs { display: flex; gap: 6px; margin-bottom: 26px; flex-wrap: wrap; }
.phase-tab {
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--rule); background: none; color: var(--paper-faint);
  cursor: pointer; border-radius: 2px; transition: .15s;
}
.phase-tab:hover { color: var(--paper); }
.phase-tab.on { border-color: var(--ember); color: var(--ember); background: var(--ember-wash); }

.force-head { display: grid; grid-template-columns: 1fr 128px 1fr; align-items: center; margin-bottom: 18px; }
.force-head .fh {
  font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.force-head .fh.a { text-align: right; color: var(--blood); }
.force-head .fh.b { color: var(--steel); }

.force-row { display: grid; grid-template-columns: 1fr 128px 1fr; align-items: center; margin-bottom: 4px; }
.force-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-faint); text-align: center;
}
.bar-cell { display: flex; align-items: center; gap: 10px; height: 34px; }
.bar-cell.a { justify-content: flex-end; }
.bar {
  height: 15px; min-width: 2px;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.bar.a { background: linear-gradient(90deg, rgba(143,58,58,.25), var(--blood)); }
.bar.b { background: linear-gradient(90deg, var(--steel), rgba(91,122,140,.25)); }
.bar-num { font-family: var(--mono); font-size: 12.5px; color: var(--paper-dim); white-space: nowrap; }

.raw-toggle {
  margin-top: 26px; font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; background: none; border: 0; color: var(--paper-faint);
  cursor: pointer; padding: 0; border-bottom: 1px dotted var(--rule);
}
.raw-toggle:hover { color: var(--ember); }
.raw-src { display: none; margin-top: 18px; gap: 40px; grid-template-columns: 1fr 1fr; }
.raw-src.on { display: grid; }
.raw-src ul { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 11.5px; color: var(--paper-faint); line-height: 1.7; }

/* ---- toll ---- */
.toll { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.toll-total {
  font-family: var(--sans); text-align: center; margin-bottom: 34px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.toll-num { font-family: var(--serif); font-size: clamp(2rem,4.4vw,3.2rem); line-height: 1; margin: 6px 0; letter-spacing: -.02em; }
.toll-side .toll-num { color: var(--paper); }
.toll-caption { font-family: var(--mono); font-size: 11.5px; color: var(--paper-faint); margin-bottom: 16px; }
.dots { display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px; margin: 16px 0; }
.dot { width: 100%; aspect-ratio: 1; border-radius: 50%; }
.dot.a { background: rgba(143,58,58,.85); }
.dot.b { background: rgba(91,122,140,.85); }
.dot.ghost { background: var(--rule-soft); }
.toll-break { list-style: none; margin: 14px 0 0; padding: 0; font-size: .84rem; color: var(--paper-faint); line-height: 1.6; }

/* ---- cast ---- */
.cast-group { margin-bottom: 40px; }
.cast-group h3 { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); margin: 0 0 16px; }
.cast-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 18px; }
.person { text-align: left; cursor: pointer; }
.person-face {
  width: 100%; aspect-ratio: 3/4; background: var(--ink-3); border: 1px solid var(--rule);
  overflow: hidden; margin-bottom: 8px;
}
.person-face img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-face); transition: .3s; }
.person:hover .person-face img { filter: grayscale(0); }
.person-face.empty { display: flex; align-items: center; justify-content: center; color: var(--rule); font-size: 26px; }
.person-name { font-size: .92rem; line-height: 1.3; }
.person-desc { font-family: var(--sans); font-size: 10.5px; color: var(--paper-faint); line-height: 1.4; margin-top: 3px; }

/* ---- map ---- */
.map-shell { height: 60vh; min-height: 420px; border: 1px solid var(--rule); background: var(--ink-3); position: relative; }
.map-mount { width: 100%; height: 100%; background: var(--map-bg); }
.leaflet-container { background: var(--map-bg); font-family: var(--sans); }
.leaflet-tile { filter: var(--tile-filter); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--ink-2); color: var(--paper); border: 1px solid var(--rule); border-radius: 2px; }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--sans); font-size: 12.5px; }
.leaflet-control-attribution { background: var(--scrim) !important; color: var(--paper-faint) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--paper-dim) !important; }
.pin { width: 10px; height: 10px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px var(--ember-ring); }
.pin.primary { width: 15px; height: 15px; background: var(--gold); box-shadow: 0 0 0 5px var(--ember-ring); }
.map-fallback { padding: 28px; display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 12px; font-family: var(--sans); font-size: 12.5px; color: var(--paper-dim); }

/* ---- country: identity ---- */
.identity { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: start; }
.emblems { display: flex; gap: 22px; align-items: flex-start; }
.emblem { margin: 0; }
.emblem img { display: block; border: 1px solid var(--rule); background: var(--ink-3); }
.emblem.flag img { width: 200px; height: auto; }
.emblem.arms img { width: 96px; height: auto; border: 0; background: none; }
.emblem figcaption {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-faint); margin-top: 8px;
}
.identity-rows { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 0 20px; align-self: center; }
.identity-rows dt {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-faint); padding: 10px 0; border-top: 1px solid var(--rule-soft);
}
.identity-rows dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: .95rem; }

.identity-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px; margin-top: 40px; }
.dated-list { list-style: none; margin: 0; padding: 0; }
.dated-list li { display: flex; gap: 14px; padding: 6px 0; border-top: 1px solid var(--rule-soft); }
.dated-when {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold);
  flex: 0 0 96px; white-space: nowrap; padding-top: 2px;
}
.dated-what { font-size: .9rem; color: var(--paper-dim); text-decoration: none; }
a.dated-what:hover { color: var(--ember); }

/* ---- country: lineage ---- */
.lineage {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin;
}
.lin-col { flex: 0 0 auto; width: 176px; display: flex; flex-direction: column; gap: 10px; }
.lin-era {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-faint); padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px;
}
.lin-col.subject .lin-era { color: var(--gold); border-bottom-color: var(--ember-soft); }
/* Beside the first card, not centred in the column: a dissolution column can be
   six cards tall, and a centred arrow floats in empty space. */
.lin-arrow {
  flex: 0 0 auto; width: 34px; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 76px; color: var(--rule); font-size: 15px;
}
.lin-node {
  display: block; text-decoration: none; padding: 12px; background: var(--ink-2);
  border: 1px solid var(--rule-soft); transition: .2s;
}
a.lin-node:hover { border-color: var(--ember-soft); transform: translateY(-2px); }
.lin-node.on { border-color: var(--gold); background: var(--gold-wash); }
.lin-flag { height: 34px; margin-bottom: 10px; display: flex; align-items: center; }
.lin-flag img { max-height: 34px; max-width: 100%; border: 1px solid var(--rule); }
.lin-flag.empty::before { content: ''; width: 44px; height: 26px; border: 1px dashed var(--rule); }
.lin-name { font-size: .92rem; line-height: 1.28; margin-bottom: 5px; }
.lin-span { font-family: var(--mono); font-size: 10.5px; color: var(--paper-faint); }
.lin-via {
  font-family: var(--sans); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember-soft); margin-top: 7px;
}
.lin-more { font-family: var(--sans); font-size: 10.5px; color: var(--paper-faint); padding-top: 4px; }

/* ---- country: dated series ---- */
.series-svg { width: 100%; height: auto; display: block; overflow: visible; }
.series-line { fill: none; stroke: var(--ember); stroke-width: 1.8; stroke-linejoin: round; }
.series-dot { fill: var(--ember); opacity: .55; }
.series-dot.mark { fill: var(--gold); opacity: 1; }
.series-grid { stroke: var(--rule-soft); stroke-width: 1; }
.series-gridlabel, .series-mark, .series-xlabel { font-family: var(--mono); fill: var(--paper-faint); }
.series-gridlabel { font-size: 10px; }
.series-xlabel { font-size: 10.5px; }
.series-mark { font-size: 12px; fill: var(--gold); }

/* ---- country: rulers ---- */
.ruler-axis { position: relative; height: 18px; margin: 4px 0 10px; }
.ruler-year {
  position: absolute; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--paper-faint);
}
.ruler-track { margin-bottom: 30px; }
.ruler-track h3 {
  font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember); margin: 0 0 12px;
}
.ruler-row {
  display: grid; grid-template-columns: 34px 190px 1fr 96px; gap: 12px;
  align-items: center; text-decoration: none; color: inherit; padding: 3px 0;
}
a.ruler-row:hover .ruler-name span:first-child { color: var(--gold); }
.ruler-face {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--ink-3); border: 1px solid var(--rule);
}
.ruler-face img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-face); }
.ruler-face.empty { display: flex; align-items: center; justify-content: center; color: var(--rule); font-size: 14px; }
.ruler-name { min-width: 0; font-size: .9rem; line-height: 1.25; }
.ruler-name span { display: block; }
.ruler-note {
  font-family: var(--sans); font-size: 9.5px; color: var(--paper-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ruler-rail { position: relative; height: 20px; background: linear-gradient(var(--rule-soft), var(--rule-soft)) center/100% 1px no-repeat; }
.ruler-rail .bar { position: absolute; top: 4px; height: 12px; min-width: 3px; }
.ruler-span { font-family: var(--mono); font-size: 10.5px; color: var(--paper-faint); text-align: right; white-space: nowrap; }

/* ---- map layers ---- */
.map-layers { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.layer-tab {
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--rule); background: none; color: var(--paper-faint);
  cursor: pointer; border-radius: 2px; transition: .15s;
}
.layer-tab span { font-family: var(--mono); letter-spacing: 0; opacity: .6; margin-left: 6px; }
.layer-tab:hover { color: var(--paper); }
.layer-tab.on { border-color: var(--ember); color: var(--ember); background: var(--ember-wash); }
.pin.faint { width: 7px; height: 7px; background: var(--steel); box-shadow: 0 0 0 2px rgba(91,122,140,.2); }

/* ---- chronology ---- */
.chrono-rail {
  position: relative; height: 92px; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); margin: 8px 0 26px; cursor: crosshair;
}
.chrono-axis { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
/* Era bands: equal spans of time drawn at unequal width, so the compression of
   a two-millennium axis is visible rather than silent. */
.chrono-rail.banded { height: 104px; }
.chrono-band { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--rule-soft); }
.chrono-band.alt { background: var(--wash); }
.chrono-bandlabel {
  position: absolute; top: 6px; left: 5px;
  font-family: var(--mono); font-size: 10px; color: var(--paper-faint); white-space: nowrap;
}
.chrono-band.tight .chrono-bandlabel { display: none; }
.chrono-tick { position: absolute; top: 50%; transform: translate(-50%,-50%); }
.chrono-tick i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper-faint); transition: .2s; cursor: pointer;
}
.chrono-tick:hover i, .chrono-tick.on i { background: var(--ember); transform: scale(1.85); }
.chrono-tick.imprecise i { width: 5px; height: 5px; opacity: .5; }
.chrono-year {
  position: absolute; bottom: 6px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--paper-faint);
}
.chrono-year span { position: absolute; top: -74px; left: 50%; width: 1px; height: 70px; background: var(--rule-soft); }
.chrono-detail {
  min-height: 118px; border-left: 2px solid var(--ember); padding: 4px 0 4px 20px;
}
.chrono-date { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ember); margin-bottom: 8px; }
.chrono-sentence { font-size: 1.06rem; line-height: 1.6; margin: 0 0 10px; max-width: 46rem; }
.chrono-src { font-family: var(--sans); font-size: 11px; color: var(--paper-faint); }
.chrono-src a { color: var(--paper-dim); }
.chrono-nav { display: flex; gap: 8px; margin-top: 16px; }
.chrono-nav button {
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule); color: var(--paper-faint);
  padding: 6px 12px; cursor: pointer; border-radius: 2px;
}
.chrono-nav button:hover { color: var(--ember); border-color: var(--ember-soft); }

/* ---- chapters / the reading spine ---- */
.chapter { padding: 54px 0 8px; scroll-margin-top: 24px; }
.chapter-num {
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--paper-faint); margin-bottom: 10px;
}
.chapter h2 { font-size: 2.1rem; line-height: 1.14; margin: 0 0 24px; font-weight: 500; letter-spacing: -.015em; }
.chapter h3 { font-size: 1.42rem; margin: 34px 0 14px; font-weight: 500; }
.chapter.lvl-2 h2 { font-size: 1.5rem; }
.chapter.lvl-3 h2 { font-size: 1.2rem; }
.chapter.part { padding-bottom: 0; }
.chapter.part h2 {
  font-size: 1rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--rule); padding-bottom: 18px; font-weight: 400;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15em; }
.prose p:first-of-type { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.prose li { margin-bottom: .3em; }
.prose blockquote {
  margin: 1.6em 0; padding-left: 22px; border-left: 2px solid var(--ember-soft);
  font-style: italic; color: var(--paper-dim);
}
.prose .wb-scroll { overflow-x: auto; margin: 1.6em 0; }
.prose table { border-collapse: collapse; font-family: var(--sans); font-size: 12.5px; width: 100%; }
.prose th, .prose td { border: 1px solid var(--rule-soft); padding: 7px 10px; text-align: left; vertical-align: top; }
.prose th { color: var(--paper-dim); font-weight: 500; background: var(--wash); }
.prose img { max-width: 100%; height: auto; }

/* Wikipedia's own float and multi-image boxes carry inline pixel widths — a
   400px `floatright`, a `trow` of three side-by-side plates — which are wider
   than a phone and scroll the whole page sideways. These need !important:
   the offending declaration is an inline `max-width`, which a stylesheet
   cannot outrank any other way. */
.prose .thumb, .prose .thumbinner, .prose .tmulti, .prose .tsingle, .prose .trow,
.prose .floatright, .prose .floatleft, .prose .center,
.prose .gallery, .prose .gallerybox, .prose .gallerytext, .prose .thumb-inner,
.prose .floatright > *, .prose .floatleft > *, .prose .thumbinner > *,
.prose .tsingle > *, .prose .gallerybox > * {
  max-width: 100% !important;
}
.prose .gallery { padding-left: 0; }
.prose .trow { display: flex; flex-wrap: wrap; }
.prose .tsingle { min-width: 0; }
/* Annotated images position their labels absolutely at fixed offsets, so no
   width cap reaches them. Let the figure scroll rather than the page. */
.prose .noresize { overflow-x: auto; }

.wb-link {
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid var(--ember-hair); cursor: pointer;
}
.wb-link:hover { border-bottom-color: var(--ember); color: var(--gold); }
.wb-ext { color: var(--paper-dim); }
.wb-note {
  font-family: var(--sans); font-size: .62em; vertical-align: super; line-height: 0;
  color: var(--ember); text-decoration: none; padding: 0 1px; cursor: pointer;
}
.wb-note:hover { color: var(--gold); }

/* plates inside chapters */
.plate { margin: 34px 0; }
.plate img { width: 100%; max-width: 720px; display: block; border: 1px solid var(--rule); filter: var(--img-plate); }
.plate figcaption {
  font-family: var(--sans); font-size: 11.5px; color: var(--paper-faint);
  margin-top: 9px; max-width: 46rem; line-height: 1.5;
}
.plate.wide img { max-width: 100%; }

/* ---- shelf ---- */
.shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: 20px; }
.volume {
  display: block; text-decoration: none; border: 1px solid var(--rule-soft);
  background: var(--ink-2); transition: .2s; overflow: hidden;
}
.volume:hover { border-color: var(--ember-soft); transform: translateY(-3px); }
.volume-art { height: 116px; background: var(--ink-3); overflow: hidden; }
.volume-art img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-thumb); }
.volume-body { padding: 12px 14px 16px; }
.volume-title { font-size: .98rem; line-height: 1.25; margin-bottom: 5px; }
.volume-desc { font-family: var(--sans); font-size: 10.5px; color: var(--paper-faint); line-height: 1.45; }

/* ---- notes ---- */
.notes-list { columns: 2; column-gap: 44px; font-size: .8rem; color: var(--paper-faint); }
.notes-list li { break-inside: avoid; margin-bottom: 10px; line-height: 1.55; }
.notes-list a { color: var(--paper-dim); }
/* Citation markup arrives with layout baggage from the source wiki. */
.notes-list li > *, .notes-list cite { margin: 0; padding: 0; text-indent: 0; float: none; }
.notes-list cite { font-style: normal; }
.notes-more {
  margin-top: 22px; font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; background: none; border: 1px solid var(--rule);
  color: var(--paper-faint); padding: 8px 16px; cursor: pointer;
}
.notes-more:hover { color: var(--ember); border-color: var(--ember-soft); }

/* ---- colophon ---- */
.colophon {
  border-top: 1px solid var(--rule); margin-top: 40px; padding: 40px 0 0;
  font-family: var(--sans); font-size: 11.5px; color: var(--paper-faint); line-height: 1.75;
}
.colophon a { color: var(--paper-dim); }
.colophon h4 { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ember); margin: 0 0 12px; }
.colophon-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 32px; }
.colophon dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
.colophon dt { color: var(--paper-faint); }
.colophon dd { margin: 0; color: var(--paper-dim); font-family: var(--mono); font-size: 11px; }

/* ---- floating cards ---- */
.hovercard, .notecard {
  position: absolute; z-index: 80; max-width: 340px;
  background: var(--ink-2); border: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--paper-dim);
}
.hovercard { display: flex; flex-direction: column; }
.hovercard img { width: 100%; height: 118px; object-fit: cover; filter: var(--img-thumb); }
.hc-body { padding: 12px 14px 14px; }
.hc-title { font-family: var(--serif); font-size: 1.02rem; color: var(--paper); margin-bottom: 4px; }
.hc-desc { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 8px; }
.hc-actions { margin-top: 12px; display: flex; gap: 12px; }
.hc-actions a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); text-decoration: none; }
.notecard { padding: 14px 16px; max-width: 400px; font-size: 12px; }
.notecard a { color: var(--ember); }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .toll { grid-template-columns: 1fr; gap: 32px; }
  .raw-src.on { grid-template-columns: 1fr; gap: 20px; }
  .notes-list { columns: 1; }
  .identity { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .rail {
    width: 100%; height: auto; bottom: auto;
    border-right: 0; border-bottom: 1px solid var(--rule-soft);
  }
  .rail .toc, .rail .rail-foot { display: none; }
  .rail.open .toc { display: block; max-height: 60vh; }
  .rail.open .rail-foot { display: block; }
  .rail-toggle { display: block; }
  .book { margin-left: 0; padding-top: 54px; }
  .wrap, .cover-inner { padding: 0 22px; }
  .cover-inner { padding-bottom: 40px; }
  .sides { grid-template-columns: 1fr; gap: 32px; }
  .side-col.right { text-align: left; }
  .side-col.right .side-parties { justify-content: flex-start; }
  .versus { display: none; }
  .force-head, .force-row { grid-template-columns: 1fr 84px 1fr; }
  .dots { grid-template-columns: repeat(24, 1fr); }
  /* Facts stack, so the column rules become stray vertical lines. */
  .cover-facts { display: block; }
  .cover-fact { border-right: 0; margin-right: 0; padding-right: 0; }

  /* The emblem strip and the lineage strip both scroll rather than squeeze. */
  .emblems { gap: 16px; }
  .emblem.flag img { width: 150px; }
  .emblem.arms img { width: 72px; }
  .identity-rows { grid-template-columns: minmax(96px, auto) 1fr; gap: 0 14px; }
  .lin-col { width: 150px; }
  .lin-arrow { width: 22px; }
  /* Portrait, name and dates share the first row; the bar gets its own beneath,
     full width, because a tenure bar in 120px says nothing. */
  .ruler-row { grid-template-columns: 28px 1fr auto; gap: 10px; row-gap: 0; }
  .ruler-face { grid-area: 1 / 1; width: 28px; height: 28px; }
  .ruler-name { grid-area: 1 / 2; }
  .ruler-span { grid-area: 1 / 3; }
  .ruler-rail { grid-area: 2 / 1 / 3 / 4; height: 14px; margin-bottom: 10px; }
  .ruler-rail .bar { top: 2px; height: 10px; }
  .dated-list li { gap: 10px; }
  .dated-when { flex-basis: 84px; }
  .binder-inner { padding: 0 22px; }
  .apparatus-note { left: 16px; right: 16px; bottom: 16px; }

  /* A floated plate in a 331px column leaves no column. Let them stack. */
  .prose .thumb, .prose .floatright, .prose .floatleft {
    float: none; margin-left: 0; margin-right: 0;
  }
}

/* ---- language switcher --------------------------------------------------- */

.rail-actions { display: flex; align-items: center; gap: 8px; }

.lang-btn {
  font-family: var(--sans); font-size: 10px; letter-spacing: .14em;
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--gold); padding: 3px 9px; cursor: pointer; transition: .15s;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] {
  border-color: var(--ember-soft); color: var(--ember);
  background: var(--ember-wash);
}

.lang-panel {
  /* Wider than the rail on purpose: 264px cannot hold a language name and the
     edition's own title for the subject side by side. */
  position: absolute; top: 54px; left: 12px; width: 330px; max-width: calc(100vw - 24px);
  z-index: 70;
  background: var(--ink-2); border: 1px solid var(--rule);
  box-shadow: var(--shadow-panel);
  max-height: 62vh; display: flex; flex-direction: column; overflow: hidden;
}
.lang-current {
  padding: 11px 14px; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--sans); font-size: 12px; color: var(--paper);
  display: flex; align-items: baseline; gap: 8px;
}
.lang-current span {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint);
}
.lang-search {
  margin: 10px 12px; padding: 7px 10px;
  background: var(--ink-3); border: 1px solid var(--rule-soft); outline: none;
  font-family: var(--sans); font-size: 12px; color: var(--paper);
}
.lang-search:focus { border-color: var(--ember-soft); }
.lang-search::placeholder { color: var(--paper-faint); }

.lang-rows { overflow-y: auto; padding-bottom: 6px; }
.lang-row {
  display: grid; grid-template-columns: 32px 1fr; align-items: baseline; gap: 9px;
  padding: 7px 14px; text-decoration: none; color: var(--paper-dim);
  font-family: var(--sans); font-size: 12.5px;
}
.lang-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lang-row:hover { background: var(--wash-2); color: var(--paper); }
.lang-code {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; color: var(--gold);
}
.lang-row.partial .lang-code { color: var(--paper-faint); }
.lang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-title {
  font-family: var(--serif); font-size: 11.5px; color: var(--paper-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lang-divider {
  padding: 12px 14px 5px; font-family: var(--sans); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint);
  border-top: 1px solid var(--rule-soft); margin-top: 6px;
}
.lang-empty {
  padding: 16px 14px; font-family: var(--sans); font-size: 12px; color: var(--paper-faint);
}

@media (max-width: 860px) {
  .lang-panel { top: 50px; max-height: 70vh; left: 12px; right: 12px; width: auto; }
}

/* ---- theme toggle -------------------------------------------------------- */
.theme-btn {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--paper-dim); width: 25px; height: 25px; line-height: 1;
  font-size: 12px; cursor: pointer; padding: 0; transition: .15s;
  display: grid; place-items: center; flex: 0 0 auto;
}
.theme-btn:hover { color: var(--ember); border-color: var(--ember-soft); }

/* ---- reading aloud ------------------------------------------------------- */

.voice-btn {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--paper-dim); width: 25px; height: 25px; line-height: 1;
  font-size: 9px; cursor: pointer; padding: 0; transition: .15s;
  display: grid; place-items: center; flex: 0 0 auto;
}
.voice-btn:hover { color: var(--ember); border-color: var(--ember-soft); }
.voice-btn.on {
  color: var(--ember); border-color: var(--ember);
  background: var(--ember-wash);
}

/* The passage being spoken. A tinted rule rather than a highlight block, so a
   long paragraph does not turn into a slab of colour mid-page. */
.speaking {
  background: var(--ember-wash);
  box-shadow: -12px 0 0 var(--ember-wash), 12px 0 0 var(--ember-wash);
  border-radius: 1px;
  transition: background .25s ease;
}
h2.speaking, h1.speaking { box-shadow: none; background: none; color: var(--ember); }

.voice-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--scrim); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-note);
  font-family: var(--sans); font-size: 12px; color: var(--paper-dim);
  max-width: calc(100vw - 32px);
}
.voice-ctl {
  background: none; border: 0; color: var(--paper-dim); cursor: pointer;
  font-size: 12px; padding: 5px 7px; border-radius: 999px; line-height: 1;
}
.voice-ctl:hover { color: var(--ember); background: var(--wash); }
.voice-play { color: var(--ember); font-size: 13px; }
.voice-stop { margin-left: 2px; }

.voice-where {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 0 10px; max-width: 240px;
}
.voice-label {
  font-size: 11.5px; color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voice-count { font-family: var(--mono); font-size: 9.5px; color: var(--paper-faint); }

.voice-rate { display: flex; align-items: center; gap: 6px; padding-left: 4px; }
.voice-rate input { width: 66px; accent-color: var(--ember); cursor: pointer; }
.voice-rate-val { font-family: var(--mono); font-size: 9.5px; color: var(--paper-faint); width: 26px; }

@media (max-width: 720px) {
  .voice-where { max-width: 100px; padding: 0 6px; }
  .voice-rate { display: none; }
  .voice-pick { max-width: 96px; }
}
.voice-pick {
  background: var(--ink-3); border: 1px solid var(--rule-soft); border-radius: 3px;
  color: var(--paper-dim); font-family: var(--sans); font-size: 10.5px;
  padding: 4px 6px; max-width: 130px; cursor: pointer; outline: none;
}
.voice-pick:focus { border-color: var(--ember-soft); }
/* The voice choice is the single biggest lever on how natural this sounds, so
   it survives much further down than the speed slider does. */
@media (max-width: 560px) { .voice-pick { display: none; } }