/* ============================================================
   NIGHT ATLAS SKIN — "Shab-nameh"
   A nocturnal cartographic redesign layered over the chronicle.
   One idea, held all the way down: a scholarly instrument read by
   lamplight. Bitumen-indigo ground, bone ink, Persian-turquoise
   instrument lines, saffron-gold illumination, lacquer red reserved
   for war and the present moment. No pastiche: the only ornaments
   are the cartographer's own — hairlines, ticks, stars, numerals.
   Type: Fraunces (display) / Spectral (text) / IBM Plex Mono (data).
   All engine-measured dimensions (lane strip heights, grid columns)
   are left untouched. Motion is layered and honors reduced-motion.
   ============================================================ */

:root {
  /* ground */
  --night: #0a1418;
  --night-2: #0e1a20;
  --night-3: #122129;
  /* re-aimed site tokens (most of the page recolors through these) */
  --ink: #ece4d2;
  --ink-2: #cfc5ac;
  --paper: #0a1418;          /* halos around map/lane labels go dark */
  --surface: #0e1a20;
  --line: rgba(236, 228, 210, 0.14);
  --muted: #9a927c;
  --lapis: #4fb3c9;          /* cerulean: neighbours, politics    */
  --cypress: #67bd92;        /* modern overlay, solid evidence    */
  --pomegranate: #e05747;    /* lacquer red: war, events          */
  --copper: #d9995c;         /* culture, capitals                 */
  --gold: #e9b949;           /* saffron: illumination, the "now"  */
  --turquoise: #3ed6c3;      /* myth, brand, instrument accents   */
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  --nx-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Spectral", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.chronicle-page {
  --lane-politics: var(--lapis);
  --lane-wars: var(--pomegranate);
  --lane-religion: #cf9b3f;
  --lane-culture: var(--copper);
  --lane-economy: var(--cypress);
  --clock-bg: rgba(9, 17, 21, 0.88);
}

/* ------------------------------------------------------------ base */

body.chronicle-page {
  background:
    radial-gradient(1100px 720px at 85% -8%, rgba(62, 214, 195, 0.055), transparent 62%),
    radial-gradient(900px 640px at -8% 26%, rgba(233, 185, 73, 0.045), transparent 58%),
    var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.7;
  letter-spacing: 0.006em;
}

/* the night itself: a fixed, barely-there field of survey points */
body.chronicle-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.1px 1.1px at 22% 18%, rgba(236, 228, 210, 0.30) 48%, transparent 52%),
    radial-gradient(0.9px 0.9px at 68% 62%, rgba(62, 214, 195, 0.22) 48%, transparent 52%),
    radial-gradient(1.3px 1.3px at 84% 30%, rgba(236, 228, 210, 0.20) 48%, transparent 52%),
    radial-gradient(0.8px 0.8px at 40% 84%, rgba(233, 185, 73, 0.20) 48%, transparent 52%),
    radial-gradient(1px 1px at 8% 56%, rgba(236, 228, 210, 0.16) 48%, transparent 52%);
  background-size: 520px 520px, 380px 380px, 640px 640px, 460px 460px, 700px 700px;
  opacity: 0.7;
}

.chronicle-page ::selection {
  background: rgba(233, 185, 73, 0.92);
  color: #100c04;
}

.chronicle-page :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

html {
  scrollbar-color: #2c4049 var(--night);
}

.chronicle-page ::-webkit-scrollbar { width: 11px; height: 11px; }
.chronicle-page ::-webkit-scrollbar-track { background: var(--night); }
.chronicle-page ::-webkit-scrollbar-thumb {
  background: #24343c;
  border-radius: 8px;
  border: 2px solid var(--night);
}
.chronicle-page ::-webkit-scrollbar-thumb:hover { background: #33555c; }

.chronicle-page .skip-link {
  background: var(--gold);
  color: #100c04;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.chronicle-page code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: #8fdfd3;
  background: rgba(62, 214, 195, 0.08);
  border: 1px solid rgba(62, 214, 195, 0.18);
  border-radius: 3px;
  padding: 0 0.3em;
}

/* ---------------------------------------------------------- topbar */

.chronicle-page .ch-topbar {
  background: rgba(9, 17, 21, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.chronicle-page .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 480;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.chronicle-page .brand-mark {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--turquoise);
  transform: rotate(45deg) scale(0.86);
  background:
    linear-gradient(45deg, transparent 46%, var(--gold) 47%, var(--gold) 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--turquoise) 47%, var(--turquoise) 53%, transparent 54%);
}

/* --------------------------------------------- the pinned clock */

.chronicle-page .ch-clock {
  border-bottom: 1px solid rgba(62, 214, 195, 0.28);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.chronicle-page .ch-lane-label {
  font-family: var(--font-mono);
  letter-spacing: 0.11em;
  color: var(--muted);
}

.chronicle-page .ch-lane-strip {
  background: linear-gradient(to right, transparent, rgba(236, 228, 210, 0.045) 10%, rgba(236, 228, 210, 0.045) 90%, transparent);
}

.chronicle-page .ch-lane.is-expanded .ch-lane-strip {
  background: var(--night-2);
  border-color: rgba(62, 214, 195, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

/* lane hue re-aims (the hardcoded originals were tuned for daylight) */
.chronicle-page [data-lane="myth"] { --lane-color: var(--turquoise); }
.chronicle-page .ch-tl-band.lane-myth { --lane-color: var(--turquoise); }
.chronicle-page [data-lane="rulers"] { --lane-color: #b287c6; }
.chronicle-page .ch-tl-band[data-band="band-zoroastrian-state"] { --lane-color: var(--lane-religion); }
.chronicle-page .ch-tl-band[data-band="band-shia-state"] { --lane-color: #b0713a; }

.chronicle-page .ch-tl-band {
  background: color-mix(in srgb, var(--lane-color, var(--lapis)) 20%, transparent);
  border-color: color-mix(in srgb, var(--lane-color, var(--lapis)) 55%, transparent);
}

.chronicle-page .ch-tl-band.is-live {
  background: color-mix(in srgb, var(--lane-color, var(--lapis)) 40%, transparent);
  border-color: var(--lane-color, var(--lapis));
  box-shadow: 0 0 12px color-mix(in srgb, var(--lane-color, var(--lapis)) 35%, transparent);
}

.chronicle-page .ch-tl-dot {
  box-shadow: 0 0 0 2px rgba(10, 20, 24, 0.85);
}

.chronicle-page .ch-tl-point.is-war .ch-tl-name {
  color: color-mix(in srgb, var(--pomegranate) 70%, var(--ink));
}

.chronicle-page .ch-poli {
  fill: color-mix(in srgb, var(--lane-politics) 22%, transparent);
  stroke: color-mix(in srgb, var(--lane-politics) 60%, transparent);
}

.chronicle-page .ch-poli.is-live { fill: color-mix(in srgb, var(--lane-politics) 44%, transparent); }

.chronicle-page .ch-poli:hover,
.chronicle-page .ch-poli:focus-visible { fill: color-mix(in srgb, var(--lane-politics) 55%, transparent); }

.chronicle-page .ch-lane-sub { color: var(--muted); }
.chronicle-page .ch-lane-sub .ch-key-life {
  background: color-mix(in srgb, var(--turquoise) 40%, transparent);
  border-color: var(--turquoise);
}

.chronicle-page .ch-chron select {
  color: #6adfd0;
  background-color: var(--night-2);
  border-color: rgba(62, 214, 195, 0.42);
  font-family: var(--font-mono);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%233ed6c3' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.chronicle-page .ch-chron select:hover,
.chronicle-page .ch-chron select:focus-visible {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 2.5px rgba(62, 214, 195, 0.14);
}

.chronicle-page .ch-merge-toggle {
  color: #cfa7dd;
  background: var(--night-2);
  border-color: rgba(178, 135, 198, 0.45);
  font-family: var(--font-mono);
}

.chronicle-page .ch-merge-toggle:hover,
.chronicle-page .ch-merge-toggle:focus-visible {
  border-color: #b287c6;
  box-shadow: 0 0 0 2.5px rgba(178, 135, 198, 0.16);
}

.chronicle-page .ch-merge-toggle[aria-pressed="false"] {
  background: #b287c6;
  color: #17091c;
  border-color: #b287c6;
}

/* ruler: brass-instrument dial */

.chronicle-page .ch-ticks { border-top: 1px solid rgba(236, 228, 210, 0.42); }
.chronicle-page .ch-tick i { background: rgba(236, 228, 210, 0.38); }
.chronicle-page .ch-tick b {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

.chronicle-page .ch-needle {
  border-left: 2px solid var(--gold);
  filter: drop-shadow(0 0 5px rgba(233, 185, 73, 0.65));
}

.chronicle-page .ch-needle::before { border-top-color: var(--gold); }

.chronicle-page .ch-year-readout {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: #0c161b;
  border: 1px solid rgba(233, 185, 73, 0.6);
  border-radius: 4px;
  padding: 0.08rem 0.72rem;
  box-shadow:
    0 0 0 3px rgba(233, 185, 73, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.55);
}

.chronicle-page .ch-clock-controls button {
  border: 1px solid var(--line);
  background: var(--night-2);
  color: var(--ink-2);
}

.chronicle-page .ch-clock-controls button:hover,
.chronicle-page .ch-clock-controls button:focus-visible {
  border-color: var(--turquoise);
  color: var(--turquoise);
}

.chronicle-page .ch-clock-tip {
  background: #101d24;
  border: 1px solid rgba(62, 214, 195, 0.3);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
}

.chronicle-page .ch-clock-tip strong { font-family: var(--font-display); font-weight: 560; }
.chronicle-page .ch-clock-tip em { color: var(--gold); font-family: var(--font-mono); font-size: 0.7rem; }
.chronicle-page .ch-clock-tip span { color: var(--ink-2); }

/* ------------------------------------------------------------ hero */

.chronicle-page .ch-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  max-width: none;
  min-height: 66vh;
  display: grid;
  align-content: center;
  padding-block: clamp(4rem, 12vh, 8rem);
}

/* the astrolabe: two survey circles behind the title, one dashed */
.chronicle-page .ch-hero::before,
.chronicle-page .ch-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.chronicle-page .ch-hero::before {
  width: min(58rem, 94vw);
  aspect-ratio: 1;
  border: 1px solid rgba(62, 214, 195, 0.10);
  box-shadow: inset 0 0 60px rgba(62, 214, 195, 0.04);
}

.chronicle-page .ch-hero::after {
  width: min(42rem, 72vw);
  aspect-ratio: 1;
  border: 1px dashed rgba(233, 185, 73, 0.16);
}

.chronicle-page .ch-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* optically recenter the tracked text */
  color: var(--turquoise);
}

.chronicle-page .ch-hero .eyebrow::before,
.chronicle-page .ch-hero .eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: rgba(62, 214, 195, 0.4);
  vertical-align: middle;
  margin: 0 0.9em;
}

.chronicle-page .ch-hero h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 460;
  font-size: clamp(2.7rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0.6rem auto 0;
  max-width: 17ch;
  color: var(--ink);
  text-wrap: balance;
}

/* the split-word spans (added by JS) */
.nx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.nx-w > span { display: inline-block; }
.nx-w-accent > span { font-style: italic; font-weight: 540; color: var(--gold); }

.chronicle-page .ch-hero-rule {
  width: 170px;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(233, 185, 73, 0.75);
  margin: 1.6rem auto 1.5rem;
  position: relative;
}

.chronicle-page .ch-hero-rule::after {
  content: "\2726"; /* the cartographer's star */
  position: absolute;
  left: 50%;
  top: -0.72em;
  transform: translateX(-50%);
  padding-inline: 0.45em;
  background: var(--night);
  color: var(--gold);
  font-size: 0.85rem;
  line-height: 1;
}

.chronicle-page .ch-hero .lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.75;
  color: #d8d0bc;
  max-width: 48rem;
}

.chronicle-page .ch-hero .lede em,
.chronicle-page .ch-hero .lede strong { color: var(--ink); }

.chronicle-page .ch-hero-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.chronicle-page .ch-hero-note strong { color: var(--ink-2); font-weight: 600; }

/* -------------------------------------------------- layout & atlas */

.chronicle-page .ch-story {
  border-inline-start: 1px solid var(--line);
}

.chronicle-page .ch-atlas-head {
  border-bottom: 1px solid rgba(236, 228, 210, 0.3);
}

.chronicle-page .ch-atlas-era {
  font-family: var(--font-display);
  font-weight: 520;
  letter-spacing: 0.005em;
}

.chronicle-page .ch-atlas-order {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 600;
  color: var(--gold);
}

.chronicle-page .ch-atlas-range {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------- map */

.chronicle-page .ch-map {
  background: #081118;
  border: 1px solid rgba(62, 214, 195, 0.22);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(8, 17, 24, 0.9),
    0 0 0 5px rgba(62, 214, 195, 0.05),
    var(--shadow);
}

.chronicle-page .ch-map-gratline {
  stroke: rgba(62, 214, 195, 0.10);
  stroke-width: 0.6;
}

.chronicle-page .ch-map-landmass {
  fill: #15242b;
  stroke: #33505a;
  stroke-width: 1;
}

.chronicle-page .ch-map-sea-labels text {
  font-family: var(--font-display);
  font-style: italic;
  fill: #47707c;
  letter-spacing: 0.14em;
}

/* the ruling polity of the plateau is the illuminated shape */
.chronicle-page .ch-border {
  fill: none;
  stroke: var(--lapis);
  stroke-width: 1.8;
}

.chronicle-page .ch-border.is-primary {
  fill: rgba(233, 185, 73, 0.10);
  stroke: var(--gold);
  stroke-width: 2.4;
}

.chronicle-page .ch-snap.is-ghost:not(.is-on) .ch-border {
  stroke: rgba(207, 197, 172, 0.65);
  stroke-width: 1.3;
}

/* borders ignite when their year arrives */
@media (prefers-reduced-motion: no-preference) {
  .chronicle-page .ch-snap.is-on .ch-border {
    animation: nx-ignite 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes nx-ignite {
  0%   { stroke-opacity: 0.15; fill-opacity: 0; filter: none; }
  55%  { filter: drop-shadow(0 0 12px rgba(233, 185, 73, 0.55)); }
  100% { stroke-opacity: 1; fill-opacity: 1; filter: none; }
}

.chronicle-page .ch-modern-iran {
  fill: rgba(103, 189, 146, 0.12);
  stroke: var(--cypress);
  stroke-width: 1.8;
}

.chronicle-page .ch-modern-borders { stroke: rgba(236, 228, 210, 0.4); }

.chronicle-page .ch-modern-tag {
  fill: var(--cypress);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.chronicle-page .ch-map-place circle {
  fill: #d8d0bc;
  stroke: #081118;
  stroke-width: 1.5;
}

.chronicle-page .ch-cap-star {
  fill: var(--gold);
  stroke: #081118;
}

.chronicle-page .ch-map-place text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: #d8d0bc;
  stroke: rgba(8, 17, 24, 0.92);
  stroke-width: 3px;
}

.chronicle-page .ch-map-place:hover circle,
.chronicle-page .ch-map-place:hover .ch-cap-star { fill: var(--turquoise); }

.chronicle-page .ch-map-scale line { stroke: rgba(236, 228, 210, 0.5); stroke-width: 1.2; }
.chronicle-page .ch-map-scale text { font-family: var(--font-mono); font-size: 10.5px; fill: var(--muted); }

.chronicle-page .ch-map-tool {
  font-family: var(--font-mono);
  background: rgba(10, 20, 24, 0.9);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.chronicle-page .ch-map-tool:hover { border-color: var(--turquoise); color: var(--turquoise); }

.chronicle-page .ch-map-tool[aria-pressed="true"] {
  background: var(--gold);
  color: #100c04;
  border-color: var(--gold);
}

.chronicle-page .ch-map-tip {
  background: #101d24;
  border: 1px solid rgba(62, 214, 195, 0.3);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
}

.chronicle-page .ch-map figcaption {
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.7;
}

.chronicle-page .ch-legend-year { font-family: var(--font-mono); }

.chronicle-page .ch-legend-swatch {
  border-color: var(--gold);
  background: rgba(233, 185, 73, 0.14);
}

.chronicle-page .key-swatch.key-primary { border-color: var(--gold); background: rgba(233, 185, 73, 0.14); }
.chronicle-page .key-swatch.key-neighbor { border-color: var(--lapis); }
.chronicle-page .key-swatch.key-ghost { border-color: rgba(207, 197, 172, 0.7); }
.chronicle-page .key-swatch.key-modern { border-color: var(--cypress); background: rgba(103, 189, 146, 0.14); }

.chronicle-page .ch-now {
  background: linear-gradient(135deg, rgba(224, 87, 71, 0.09), rgba(233, 185, 73, 0.06));
  border: 1px solid rgba(224, 87, 71, 0.38);
}

.chronicle-page .ch-now-title {
  font-family: var(--font-mono);
  color: #ef8a76;
}

/* ------------------------------------------------------ era story */

.chronicle-page .ch-era {
  position: relative;
  overflow: clip;
  overflow-clip-margin: 2rem;
  border-top: 1px solid var(--line);
}

.chronicle-page .ch-era > :not(.nx-num) { position: relative; z-index: 1; }

/* the giant engraved era numeral (injected by JS, decorative) */
.nx-num {
  position: absolute;
  z-index: 0;
  top: 0.8rem;
  right: -0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9rem, 15vw, 18rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(236, 228, 210, 0.075);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color 700ms ease;
}

.chronicle-page .ch-era.is-current .nx-num {
  -webkit-text-stroke-color: rgba(233, 185, 73, 0.20);
}

.chronicle-page .ch-era-kicker {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.chronicle-page .ch-era-order {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
}

.chronicle-page .ch-era.is-current .ch-era-order {
  color: var(--turquoise);
  text-shadow: 0 0 14px rgba(62, 214, 195, 0.5);
}

.chronicle-page .ch-era h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 540;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.chronicle-page .ch-era h2::after {
  width: 92px;
  border-bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(233, 185, 73, 0.1));
  margin-top: 0.7rem;
  transform-origin: left center;
}

.chronicle-page .ch-era-transition {
  color: #a9d6cb;
  font-style: italic;
  font-weight: 300;
  font-size: 1.04rem;
}

.chronicle-page .ch-overview p {
  max-width: 60ch;
  font-size: 1.01rem;
  line-height: 1.78;
  color: var(--ink-2);
}

.chronicle-page .ch-overview p strong { color: var(--ink); font-weight: 600; }

.chronicle-page .ch-overview h4 {
  font-family: var(--font-display);
  font-weight: 560;
  color: var(--ink);
}

.chronicle-page .ch-overview blockquote {
  border-inline-start: 2px solid var(--gold);
  color: var(--ink-2);
  background: linear-gradient(90deg, rgba(233, 185, 73, 0.05), transparent 70%);
  padding-block: 0.5rem;
}

/* editorial disclaimers become archive stamps */
.chronicle-page .ch-overview > p:first-child > em:only-child,
.chronicle-page .ch-overview > p:last-of-type > em:only-child {
  display: block;
  max-width: 56ch;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: #c8ae6d;
  border: 1px dashed rgba(233, 185, 73, 0.32);
  border-radius: 4px;
  padding: 0.55rem 0.85rem;
}

.chronicle-page .ch-overview a,
.chronicle-page .ch-end a {
  color: #6fd9cb;
  text-decoration-color: rgba(111, 217, 203, 0.45);
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.chronicle-page .ch-overview a:hover,
.chronicle-page .ch-end a:hover { color: var(--gold); text-decoration-color: rgba(233, 185, 73, 0.6); }

/* ----------------------------------------------- evidence ledger */

.chronicle-page .ch-evidence {
  background: rgba(14, 26, 32, 0.6);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.chronicle-page .ch-evidence summary:hover { background: rgba(236, 228, 210, 0.04); }

.chronicle-page .ch-meta-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.chronicle-page .ch-evidence-count { font-family: var(--font-mono); font-size: 0.66rem; }

.chronicle-page .ch-evidence-bar { background: rgba(236, 228, 210, 0.09); }

.chronicle-page .ch-evidence-how {
  font-size: 0.78rem;
  border-bottom: 1px dashed var(--line);
}

.chronicle-page .ch-claim-list li { border-bottom: 1px dashed var(--line); }

.chronicle-page .ch-claim-text {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
}

.chronicle-page .ch-claim-chip { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.04em; }
.chronicle-page .ch-claim-chip.ev-solid { background: rgba(103, 189, 146, 0.12); border-color: rgba(103, 189, 146, 0.6); color: #9fd8b9; }
.chronicle-page .ch-claim-chip.ev-consensus { background: rgba(79, 179, 201, 0.12); border-color: rgba(79, 179, 201, 0.6); color: #a3d6e3; }
.chronicle-page .ch-claim-chip.ev-contested { background: rgba(224, 87, 71, 0.12); border-color: rgba(224, 87, 71, 0.6); color: #f0a294; }
.chronicle-page .ch-claim-chip.ev-open { background: rgba(233, 185, 73, 0.12); border-color: rgba(233, 185, 73, 0.6); color: #e6c887; }
.chronicle-page .ch-claim-chip.ev-conf { background: rgba(236, 228, 210, 0.05); border-color: var(--line); color: var(--ink-2); }

/* ------------------------------------------------- event stream */

.chronicle-page .ch-stream-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.45rem;
}

.chronicle-page .ch-card {
  background: linear-gradient(180deg, #101d24, #0d1820);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--lapis);
  border-radius: 6px;
  transition:
    transform 300ms ease, box-shadow 300ms ease, opacity 300ms ease,
    border-color 300ms ease, translate 900ms var(--nx-ease), filter 900ms var(--nx-ease);
}

/* plate-mark corner ticks, lit when the year arrives */
.chronicle-page .ch-card::before,
.chronicle-page .ch-card::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid transparent;
  transition: border-color 500ms ease;
  pointer-events: none;
}

.chronicle-page .ch-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.chronicle-page .ch-card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.chronicle-page .ch-card h4 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.16rem;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.chronicle-page .ch-card p { color: var(--ink-2); }

.chronicle-page .ch-card-type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--lapis);
}

.chronicle-page .ch-card-year {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--gold);
}

.chronicle-page .ch-card-war { border-inline-start-color: var(--pomegranate); }
.chronicle-page .ch-card-war .ch-card-type { color: #ef8a76; }

.chronicle-page .ch-chip {
  background: rgba(79, 179, 201, 0.09);
  border: 1px solid rgba(79, 179, 201, 0.32);
  color: #bfe0e9;
  font-size: 0.74rem;
}

.chronicle-page .ch-chip-place {
  background: rgba(217, 153, 92, 0.09);
  border-color: rgba(217, 153, 92, 0.38);
  color: #ecc8a2;
}

.chronicle-page .ch-card-foot {
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.chronicle-page .badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 22px;
  background: rgba(236, 228, 210, 0.05);
  border-color: var(--line);
  color: var(--ink-2);
}

.chronicle-page .badge-provisional,
.chronicle-page .badge-queued {
  color: #e6c887;
  background: rgba(233, 185, 73, 0.08);
  border-color: rgba(233, 185, 73, 0.45);
}

.chronicle-page .badge-verified {
  color: #9fd8b9;
  background: rgba(103, 189, 146, 0.1);
  border-color: rgba(103, 189, 146, 0.5);
}

.chronicle-page .badge-uncertainty {
  color: #d9b465;
  background: transparent;
  border: 1px dashed rgba(233, 185, 73, 0.5);
}

.chronicle-page .badge-status { color: var(--turquoise); border-color: rgba(62, 214, 195, 0.4); }

/* scroll-time states */

body.chronicle-page.ch-enhanced .ch-card.is-active {
  border-color: rgba(233, 185, 73, 0.55);
  border-inline-start-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(233, 185, 73, 0.14),
    0 14px 44px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(233, 185, 73, 0.07);
}

body.chronicle-page.ch-enhanced .ch-card.is-active::before,
body.chronicle-page.ch-enhanced .ch-card.is-active::after {
  border-color: rgba(233, 185, 73, 0.85);
}

body.chronicle-page.ch-enhanced .ch-card-war.is-active {
  border-inline-start-color: var(--pomegranate);
  box-shadow:
    0 0 0 1px rgba(224, 87, 71, 0.18),
    0 14px 44px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(224, 87, 71, 0.1);
}

body.chronicle-page.ch-enhanced .ch-card-war.is-active::before,
body.chronicle-page.ch-enhanced .ch-card-war.is-active::after {
  border-color: rgba(224, 87, 71, 0.85);
}

/* ------------------------------------------------------- colophon */

.chronicle-page .ch-end { border-top: 1px solid var(--line); }

.chronicle-page .ch-end h2 {
  font-family: var(--font-display);
  font-weight: 520;
}

.chronicle-page .ch-end h2::before {
  content: "\2726";
  display: block;
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

.chronicle-page .ch-end p { color: var(--ink-2); }

/* -------------------------------------------- reveal choreography */

@media (prefers-reduced-motion: no-preference) {
  .nx-rv { opacity: 0; translate: 0 30px; }
  .nx-rvc { filter: opacity(0); translate: 0 30px; }

  .nx-rv.nx-in,
  .nx-rvc.nx-in {
    opacity: 1;
    filter: none;
    translate: 0 0;
    transition:
      opacity 950ms var(--nx-ease),
      filter 950ms var(--nx-ease),
      translate 950ms var(--nx-ease);
    transition-delay: var(--rv-d, 0ms);
  }

  /* the era rule draws itself once the heading lands */
  .ch-era-head.nx-rv h2::after { transform: scaleX(0); }
  .ch-era-head.nx-in h2::after {
    transform: scaleX(1);
    transition: transform 1100ms 350ms var(--nx-ease);
  }

  /* hero entrance (spans injected by JS; static without it) */
  .nx-on .ch-hero .eyebrow { animation: nx-fade 900ms 150ms backwards; }
  .nx-w > span {
    transform: translateY(118%);
    animation: nx-rise 900ms calc(280ms + var(--wi, 0) * 80ms) var(--nx-ease) forwards;
  }
  .nx-on .ch-hero-rule {
    transform: scaleX(0);
    animation: nx-scalex 1100ms 1050ms var(--nx-ease) forwards;
  }
  .nx-on .ch-hero .lede { animation: nx-fade-up 1000ms 1150ms var(--nx-ease) backwards; }
  .nx-on .ch-hero-note { animation: nx-fade 1200ms 1500ms backwards; }

  /* slow instruments */
  .nx-on .ch-hero::after { animation: nx-spin 240s linear infinite; }
  .nx-on .ch-needle { animation: nx-needle 3.2s ease-in-out infinite; }
}

@keyframes nx-rise { to { transform: translateY(0); } }
@keyframes nx-fade { from { opacity: 0; } }
@keyframes nx-fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes nx-scalex { to { transform: scaleX(1); } }
@keyframes nx-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes nx-needle {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(233, 185, 73, 0.45)); }
  50% { filter: drop-shadow(0 0 9px rgba(233, 185, 73, 0.85)); }
}

/* ------------------------------------------------------ responsive */

@media (max-width: 980px) {
  .nx-num { font-size: 8.5rem; top: 0.6rem; right: 0; }
  .chronicle-page .ch-hero { min-height: auto; }
  .chronicle-page .ch-hero h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
}

/* ------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .nx-rv, .nx-rvc { opacity: 1; filter: none; translate: none; }
  .nx-w > span { transform: none; animation: none; }
  .nx-on .ch-hero-rule { transform: none; animation: none; }
  .nx-on .ch-hero::after, .nx-on .ch-needle { animation: none; }
  .chronicle-page .ch-snap.is-on .ch-border { animation: none; }
  body.chronicle-page::before { display: none; }
}