/* Layout: a night-sky hero band over a cool paper archive; wiki pages are a chapter rail + a 68ch reading column. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --ink: #161a21;
  --muted: #586070;
  --line: #d8dce3;
  --sun: #c46a0c;          /* accent used for text/links on light */
  --sun-glow: #f0a43a;     /* solar mark, bars */
  --night: #0b0e14;
  --night-ink: #e9ebef;
  --night-muted: #a3abb8;
  --settlement: #3987e5;
  --mandate: #d95926;
  --parishad: #c98500;
  --opencities: #199e70;
  --belt: #8a7ee4;
  --freehold: #b04a9a;
  --lane-climate: #c98a4b;
  --lane-blocs: #7f8796;
  --lane-minds: #7d74c9;
  --lane-bodies: #3f9b8a;
  --lane-outward: #3987e5;
  --lane-long-middle: #e0952f;
  --f-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Literata", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 68ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1117; --surface: #151a22; --ink: #e6e8ec; --muted: #9aa3b1; --line: #28303b;
    --sun: #f2a541; --sun-glow: #f2a541; --night: #07090d; --night-ink: #e9ebef; --night-muted: #a3abb8;
    --belt: #a197ef; --lane-blocs: #9aa1ad;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1117; --surface: #151a22; --ink: #e6e8ec; --muted: #9aa3b1; --line: #28303b;
  --sun: #f2a541; --sun-glow: #f2a541; --night: #07090d; --night-ink: #e9ebef; --night-muted: #a3abb8;
  --belt: #a197ef; --lane-blocs: #9aa1ad;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--f-body); }
img { max-width: 100%; }
a { color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sun-glow); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.muted { color: var(--muted); }
h1, h2, h3, h4 { text-wrap: balance; }

/* ---------- header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--night); }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--night); color: var(--night-ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.head-in { display: flex; align-items: center; gap: 24px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--night-ink); text-decoration: none; font: 700 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.sun { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffe3a8, var(--sun-glow) 60%, #c4620a); box-shadow: 0 0 10px 2px rgba(240,164,58,.55); flex: none; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a { color: var(--night-muted); text-decoration: none; font: 500 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-radius: 4px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--night-ink); background: rgba(255,255,255,.07); }
.search { position: relative; margin-left: auto; flex: 1 1 220px; max-width: 340px; }
.search input { width: 100%; font: 400 14px/1.2 var(--f-mono); padding: 9px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--night-ink); }
.search input::placeholder { color: var(--night-muted); }
.results { position: absolute; right: 0; top: calc(100% + 6px); width: min(460px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.28); padding: 6px; }
.results a { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.results a:hover, .results a.sel { background: var(--bg); }
.results b { font: 600 15px/1.3 var(--f-body); display: block; }
.results small { font: 500 11px/1.4 var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.results span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.results mark { background: rgba(240,164,58,.3); color: inherit; border-radius: 2px; }
.results .none { padding: 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 720px) { .search { max-width: none; flex-basis: 100%; } .head-in { gap: 10px; } }

/* ---------- hero */
.hero { position: relative; background: var(--night); color: var(--night-ink); overflow: hidden; }
#sunfield { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-in { position: relative; padding-block: clamp(56px, 10vw, 120px) clamp(48px, 8vw, 96px); }
.eyebrow { font: 500 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.eyebrow.on-night { color: var(--sun-glow); }
.hero-title { font: 800 clamp(26px, 7.4vw, 96px)/.86 var(--f-display); white-space: nowrap; text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.hero-sub { font: 500 clamp(20px, 3vw, 30px)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .22em; color: var(--sun-glow); margin: 18px 0 0; }
.hero-lede { max-width: 58ch; font-size: clamp(17px, 2vw, 19px); color: var(--night-ink); margin: 26px 0 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; font: 500 14px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 14px 18px; border-radius: 6px; }
.btn.primary { background: var(--sun-glow); color: #1a1206; }
.btn.primary:hover { background: #ffb95b; }
.btn.ghost { color: var(--night-ink); border: 1px solid rgba(255,255,255,.28); }
.btn.ghost:hover { border-color: var(--night-ink); }

/* ---------- home bands */
.band { padding-block: clamp(48px, 7vw, 84px); }
.band + .band { border-top: 1px solid var(--line); }
.section-title { font: 700 clamp(30px, 4.5vw, 46px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 14px; }
.section-lede { max-width: var(--measure); color: var(--muted); margin: 0 0 30px; }
.facts-band { padding-block: 34px; background: var(--surface); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
.facts > div { min-width: 0; border-left: 2px solid var(--sun-glow); padding-left: 14px; }
.facts dt { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 2px; font: 700 clamp(28px, 3.6vw, 40px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.facts p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .paths { grid-template-columns: 1fr; } }
.path { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.path:hover { border-color: var(--sun-glow); transform: translateY(-2px); }
.path-kicker { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
.path-title { font: 700 26px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.path-text { font-size: 15px; line-height: 1.5; color: var(--muted); }
.blocs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1060px) { .blocs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .blocs { grid-template-columns: 1fr; } }
.bloc { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--bc); border-radius: 6px; text-decoration: none; color: var(--ink); }
.bloc:hover { border-color: var(--bc); }
.bloc-name { font: 700 24px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.bloc-gov { font-size: 15px; line-height: 1.45; color: var(--muted); }
.bloc-stats { margin-top: auto; display: grid; gap: 2px; font: 400 12.5px/1.5 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.more { margin: 20px 0 0; font: 500 13px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.quote-band { background: var(--night); color: var(--night-ink); border-top: 0 !important; }
.pull { margin: 0; max-width: 980px; }
.pull p { font: 700 clamp(28px, 4vw, 48px)/1.08 var(--f-display); text-transform: uppercase; margin: 0; }
.pull cite { display: block; margin-top: 18px; font: 400 13px/1.5 var(--f-mono); font-style: normal; color: var(--night-muted); }
.pull cite a { color: var(--sun-glow); }
.hero-lede + .hero-lede { margin-top: 14px; }

/* ---------- landing: the maps, six powers, what's new */
.maps-band { background: #0d0b12; color: #efe8dc; border-top: 0 !important; }
.maps-band .section-lede { color: #a69eb1; }
.mapcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .mapcards { grid-template-columns: 1fr; } }
.mapcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 0 20px; background: #14121b; border: 1px solid #2e2a3a; border-radius: 8px; overflow: hidden; color: #efe8dc; text-decoration: none; transition: border-color .15s, transform .15s; }
a.mapcard:hover { border-color: var(--sun-glow); transform: translateY(-2px); }
.mapcard-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; background: #0d0b12; }
.mapcard-kicker, .mapcard-title, .mapcard-text { padding-inline: 20px; }
.mapcard-kicker { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #a69eb1; }
.mapcard-kicker.live { color: #f4d48c; }
.mapcard-title { font: 700 28px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.mapcard-text { font-size: 15px; line-height: 1.5; color: #a69eb1; }
.mapcard.soon .mapcard-img { opacity: .85; }
img.mapcard-img { object-fit: contain; }
.section-title + .paths { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .mapcard { transition: none; } a.mapcard:hover { transform: none; } }
.blocs.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .blocs.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blocs.six { grid-template-columns: 1fr; } }
.news-band { background: var(--surface); }
.news-in { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.news-head { flex: 1 1 260px; }
.news { flex: 2 1 520px; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.news-kind { flex: 0 0 120px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.news a { font-weight: 600; }

/* ---------- eras chart */
.eras-fig { margin: 0; }
.eras-scroll { overflow-x: auto; }
.eras { width: 100%; min-width: 620px; height: auto; display: block; font-family: var(--f-mono); }
.eras .grid { stroke: var(--line); stroke-width: 1; }
.eras .tick { fill: var(--muted); font-size: 11px; }
.eras .now { stroke: var(--sun-glow); stroke-width: 1.5; stroke-dasharray: 3 3; }
.eras .nowlabel { fill: var(--sun); font-size: 11px; }
.eras .bar { fill: var(--lane-blocs); opacity: .85; }
.eras a:hover .bar { opacity: 1; }
.eras .lane-climate { fill: var(--lane-climate); } .eras .lane-minds { fill: var(--lane-minds); } .eras .lane-bodies { fill: var(--lane-bodies); }
.eras .lane-outward { fill: var(--lane-outward); } .eras .lane-long-middle { fill: var(--lane-long-middle); } .eras .lane-blocs { fill: var(--lane-blocs); }
.eras .barlabel { fill: var(--ink); font-size: 12px; }
.eras .barlabel.in { fill: #10131a; font-weight: 500; }
.eras-fig figcaption { font: 400 12.5px/1.5 var(--f-mono); color: var(--muted); margin-top: 8px; }

/* ---------- wiki pages */
.wiki-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; padding-block: 40px 72px; align-items: start; }
@media (max-width: 900px) { .wiki-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 20px 56px; } }
.toc-side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); max-height: calc(100vh - 96px); overflow: auto; font-size: 14px; }
@media (max-width: 900px) { .toc-side { position: static; max-height: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px; background: var(--surface); } }
.toc-side summary { font: 500 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer; padding: 8px 0; }
.toc-side .part { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 16px 0 4px; }
.toc-side ul { list-style: none; margin: 0; padding: 0; }
.toc-side li a { display: block; padding: 4px 0 4px 10px; border-left: 2px solid var(--line); color: var(--ink); text-decoration: none; line-height: 1.35; }
.toc-side li a:hover { border-left-color: var(--muted); }
.toc-side li a[aria-current="page"] { border-left-color: var(--sun-glow); color: var(--sun); font-weight: 600; }
.article { min-width: 0; max-width: var(--measure); }
.art-head { margin-bottom: 26px; }
.art-head h1 { font: 800 clamp(40px, 6vw, 68px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.span { font: 500 14px/1.4 var(--f-mono); letter-spacing: .08em; color: var(--sun); margin: 12px 0 0; }
.lede { max-width: var(--measure); color: var(--muted); font-size: 18px; margin: 14px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--surface); }
.chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chip.date { border-color: var(--sun-glow); color: var(--sun); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { overflow-wrap: anywhere; }
.prose h2 { font: 700 34px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; margin: 48px 0 12px; scroll-margin-top: 80px; }
.prose h3 { font: 700 24px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; margin: 34px 0 8px; scroll-margin-top: 80px; }
.prose h4 { font: 600 17px/1.3 var(--f-body); margin: 26px 0 6px; scroll-margin-top: 80px; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.anchor { scroll-margin-top: 90px; }
.anchor:target + * , li:has(> .anchor:target), p:has(> .anchor:target) { background: rgba(240,164,58,.14); border-radius: 4px; }
tr:has(.anchor:target) td { background: rgba(240,164,58,.14); }
.table-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: calc(100vw - 32px); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); min-width: 9ch; }
th { font: 500 11.5px/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg); }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }
.callout { border: 1px solid var(--line); border-left: 3px solid var(--sun-glow); background: var(--surface); border-radius: 6px; padding: 14px 18px; margin: 22px 0; }
.callout-title { font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sun); margin: 0 0 6px; }
.excerpt { border-left: 2px solid var(--line); padding: 2px 0 2px 18px; margin: 18px 0 30px; color: var(--ink); }
.excerpt p { margin: 8px 0; }
pre.mermaid { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; overflow-x: auto; font-size: 12px; }
.tick { font-family: var(--f-mono); color: var(--muted); margin-right: 4px; }
.tick.done { color: var(--opencities); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); }
.pager a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); font: 700 22px/1.05 var(--f-display); text-transform: uppercase; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.pager a span { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; color: var(--muted); }
.pager .next { text-align: right; }
.pager a:hover { border-color: var(--sun-glow); }

/* ---------- explore */
.explore { padding-block: 40px 72px; }
.explore section { margin-top: 48px; }
.explore h2 { font: 700 clamp(30px, 4vw, 42px)/1 var(--f-display); text-transform: uppercase; margin: 0 0 18px; }
.explore h3 { font: 500 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.parts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
@media (max-width: 900px) { .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .parts-grid { grid-template-columns: 1fr; } }
.chapter-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.chapter-list a { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.chapter-list a:hover .ttl { color: var(--sun); }
.num { font: 500 12px/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ttl { font: 700 21px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.cents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
@media (max-width: 760px) { .cents { grid-template-columns: 1fr; } }
.ev-list, .en-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ev-list li { display: grid; grid-template-columns: 11ch minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.35; }
.when { font: 400 12.5px/1.4 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.cat { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
@media (max-width: 760px) { .kinds { grid-template-columns: 1fr; } }
.en-list li { padding: 9px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.en-list a { font-weight: 600; }
.en-list span { font-size: 14.5px; line-height: 1.45; color: var(--muted); }

/* ---------- timeline */
.timeline-page { padding-block: 40px 72px; }
.timeline-page .eras-fig { margin: 8px 0 34px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fbtn { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.fbtn[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.tl-cent h2 { font: 800 44px/1 var(--f-display); text-transform: uppercase; margin: 40px 0 10px; color: var(--muted); }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 15ch minmax(0, 1fr); gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.tl li p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.tl .what { font-weight: 600; margin-bottom: 2px; }
.tl li[hidden] { display: none; }
@media (max-width: 560px) { .tl li { grid-template-columns: 1fr; gap: 2px; } .ev-list li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- footer */
.site-foot { background: var(--night); color: var(--night-muted); }
.foot-in { padding-block: 34px 40px; display: grid; gap: 6px; font-size: 14px; }
.foot-in p { margin: 0; }
.foot-in b { color: var(--night-ink); font-weight: 600; }
.site-foot .muted { color: var(--night-muted); }

@media (prefers-reduced-motion: reduce) { .path { transition: none; } .path:hover { transform: none; } }

/* ---------- illustrations */
.banner { margin: 0 0 30px; border-radius: 10px; overflow: hidden; background: var(--night); }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; }
.banner.small { max-width: 520px; }
.art-head .emblem { float: right; width: 72px; height: 72px; margin: 0 0 8px 16px; }
.path { overflow: hidden; }
.path-img { display: block; width: calc(100% + 40px); max-width: none; margin: -20px -20px 6px; aspect-ratio: 3 / 1; height: auto; background: var(--night); }
.bloc-emblem { width: 56px; height: 56px; }
.part-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; border-radius: 8px; margin-bottom: 12px; background: var(--night); }

/* ---------- the atlas (the front page): always the night palette the maps were validated on */
body:has(.atlas) { background: #0d0b12; }
.atlas {
  --space: #14121b; --deep: #0d0b12; --sea: #0c1e30; --raise: #1c1925; --rule: #2e2a3a; --grid: #16304a; --land: #4a4556;
  --ink: #efe8dc; --muted: #a69eb1; --faint: #8a8298; --sun: #f4d48c; --war: #ff5a6e;
  --b-par: #c98500; --b-set: #3987e5; --b-man: #d95926; --b-oc: #199e70; --b-pre: #8a8298;
  --city: #d9d2e3; --c-drown: #6fb7e8; --c-empty: #d6b48a;
  --lane-minds: #7d74c9; --lane-middle: #e0952f; --lane-climate: #c98a4b; --lane-blocs: #9aa1ad; --lane-bodies: #3f9b8a; --lane-outward: #3987e5;
  background: var(--deep); color: var(--ink); color-scheme: dark; padding-block: 16px 40px; font-size: 15px; line-height: 1.5;
}
.atlas a { color: var(--sun); }
.atlas button { font: inherit; color: inherit; }
.atlas :focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.atlas-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; max-width: 1480px; }
.atlas-left { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.atlas .scene { position: relative; aspect-ratio: 2.3 / 1; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--space); touch-action: pan-y; }
@media (max-width: 600px) { .atlas .scene { aspect-ratio: 1.6 / 1; } }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; user-select: none; -webkit-user-select: none; }
#map.drag { cursor: grabbing; }
.atlas .globe { fill: var(--sea); }
.atlas .grat { fill: none; stroke: var(--grid); stroke-width: .8; vector-effect: non-scaling-stroke; }
.atlas .oldb { fill: none; stroke: var(--deep); stroke-opacity: .6; stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas .u path.f { stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas .u path.h { pointer-events: none; }
.atlas .u.flag path.f { stroke-dasharray: 2 3; }
.atlas .selo { fill: none; stroke: var(--sun); stroke-width: 2.2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas .selg { pointer-events: none; }
.atlas .heat path { pointer-events: none; }
.atlas .fr { fill: none; stroke: var(--ink); stroke-width: 1.6px; stroke-dasharray: 5 3; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas .fr.sea { stroke-dasharray: 1.5 4; stroke-width: 1.8px; stroke-opacity: .75; }
.atlas .fr.war { stroke: var(--war); stroke-width: 2.4px; stroke-dasharray: 6 3; }
.atlas .fr.hot { stroke: var(--sun); stroke-width: 2.8px; stroke-opacity: 1; }
.atlas .fr-halo { fill: none; stroke: var(--deep); stroke-width: 4px; stroke-opacity: .55; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas .fr-hit { fill: none; stroke: transparent; stroke-width: 14px; vector-effect: non-scaling-stroke; cursor: help; }
.atlas .lbl { pointer-events: none; paint-order: stroke; stroke: var(--deep); stroke-linejoin: round; fill: var(--ink); }
.atlas .lbl.nation { font-family: var(--f-mono); fill-opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.atlas .lbl.bloc { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.atlas .lbl.polity { font-family: var(--f-body); font-weight: 600; letter-spacing: .02em; }
.atlas .lbl.buffer { font-family: var(--f-body); font-style: italic; fill-opacity: .85; }
.atlas .lbl.fl { font-family: var(--f-mono); fill-opacity: .85; letter-spacing: .04em; }
.atlas .lbl.el { font-family: var(--f-mono); font-weight: 500; fill: var(--sun); }
.atlas .lbl.heatl { font-family: var(--f-body); font-style: italic; fill-opacity: .7; }
.atlas .pt, .atlas .epin { cursor: pointer; outline: none; }
.atlas .pt .ring { fill: var(--deep); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.atlas .pt.selp .ring, .atlas .pt:focus-visible .ring { stroke: var(--sun) !important; stroke-width: 3px; }
.atlas .qmark { font-family: var(--f-mono); pointer-events: none; }
.atlas .epin .edot { fill: var(--deep); stroke: var(--sun); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.atlas .epin .ehalo { fill: var(--sun); fill-opacity: .22; animation: lr-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.atlas .epin.crisis .edot { stroke: var(--war); }
.atlas .epin.crisis .ehalo { fill: var(--war); fill-opacity: .3; }
.atlas .epin.selp .edot, .atlas .epin:focus-visible .edot { fill: var(--sun); }
@keyframes lr-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .atlas .epin .ehalo { animation: none; } }

.atlas .ov-year { position: absolute; left: 16px; top: 10px; pointer-events: none; }
.atlas .ov-year small { display: block; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 8px var(--deep); }
.atlas .ov-year span { display: block; font: 400 clamp(32px, 4.6vw, 52px)/1 var(--f-mono); letter-spacing: -.04em; color: var(--sun); font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px var(--deep); }
.atlas .zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 4px; }
.atlas .zoom button { width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--rule); background: var(--raise); cursor: pointer; font: 400 17px/1 var(--f-mono); }
.atlas .zoom button:hover { border-color: var(--faint); }
.atlas .scene-wrap { position: relative; }
.atlas .legend-chips { position: absolute; right: 10px; bottom: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 72%; z-index: 2; }
.atlas .legend-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 3px; background: rgba(13,11,18,.88); border: 1px solid transparent; color: var(--ink); text-decoration: none; font: 400 11.5px var(--f-mono); }
.atlas .legend-chips a:hover, .atlas .legend-chips a:focus-visible { border-color: var(--sun); color: var(--sun); }
.atlas .legend-chips i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.atlas .legend-chips i.hb { background: repeating-linear-gradient(-45deg, #8a8298 0 2px, #4a4456 2px 4px); }
.atlas .legend-chips i.hs { background: repeating-linear-gradient(45deg, #9aa1ad 0 2px, #3b3546 2px 4px); }
@media (max-width: 760px) { .atlas .legend-chips { position: static; max-width: none; justify-content: flex-start; margin-top: 8px; } .atlas .legend-chips a { padding: 8px 10px; } }
.atlas .tip { position: absolute; z-index: 5; pointer-events: none; background: var(--raise); border: 1px solid var(--rule); border-radius: 4px; padding: 7px 10px; font-size: 13px; line-height: 1.4; max-width: 260px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.atlas .tip b { display: block; font-weight: 600; }
.atlas .tip span { color: var(--muted); }

/* the card that says what is happening on another map; over the ocean when the map is wide, below it when not */
.atlas .xmap { position: absolute; left: 1.3%; bottom: 10%; width: 23%; max-width: 260px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid #9085e9; border-radius: 6px; background: rgba(13,11,18,.9); text-decoration: none; color: var(--ink); }
.atlas .xmap[hidden] { display: none; }
.atlas .xmap.below { position: static; width: auto; max-width: none; }
.atlas .xmap:hover { border-color: #bdb5f5; }
.atlas .xmap .xk { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #bdb5f5; }
.atlas .xmap .xt { font-weight: 600; font-size: 15px; line-height: 1.3; }
.atlas .xmap .xs { font-size: 13px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.atlas .xmap.below .xs { -webkit-line-clamp: 2; }
.atlas .xmap .xa { font: 500 11.5px var(--f-mono); color: var(--sun); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* the time box */
.atlas .timebox { border: 1px solid var(--rule); border-radius: 8px; background: var(--space); padding: 12px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.atlas .tb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.atlas .pbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.atlas .pbtn svg { width: 14px; height: 14px; fill: currentColor; }
.atlas .pbtn.main { background: var(--sun); border-color: var(--sun); color: #1a1408; }
.atlas .pbtn:hover { border-color: var(--faint); }
.atlas .tb-label { font: 400 12.5px var(--f-mono); color: var(--muted); }
.atlas .spacer { flex: 1; }
.atlas .tkey { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 400 11.5px var(--f-mono); color: var(--muted); }
.atlas .tkey span { display: inline-flex; align-items: center; gap: 6px; }
.atlas .tkey i { display: inline-block; }
.atlas .k-here { width: 3px; height: 12px; border-radius: 2px; background: var(--ink); }
.atlas .k-there { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; }
.atlas .k-crisis { width: 3px; height: 12px; border-radius: 2px; background: var(--war); }
.atlas .tkey[hidden] { display: none; }
.atlas .tog { min-height: 36px; padding: 6px 14px; border: 1px solid #3a3446; border-radius: 999px; background: var(--raise); cursor: pointer; font: 400 12px var(--f-mono); }
.atlas .tog:hover { border-color: var(--faint); }
.atlas .ribbon { position: relative; height: 106px; }
.atlas .ribbon[hidden] { display: none; }
.atlas .ribbon a { position: absolute; box-sizing: border-box; height: 15px; padding: 0 6px; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; font: 500 10.5px/15px var(--f-mono); background: #241f2e; color: var(--muted); }
.atlas .ribbon a.on { color: #10131a; }
.atlas .ribbon a:hover { outline: 1px solid var(--ink); }
.atlas .track { position: relative; height: 30px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.atlas .track.drag { cursor: grabbing; }
.atlas .track .rail { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--rule); }
.atlas .track .fill { position: absolute; left: 0; top: 14px; height: 2px; background: var(--sun); opacity: .55; }
.atlas .ticks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.atlas .tk { pointer-events: auto; position: absolute; top: 5px; width: 12px; height: 20px; margin-left: -6px; padding: 0; border: 0; background: none; cursor: pointer; }
.atlas .tk::after { content: ""; position: absolute; left: 4.5px; top: 4px; width: 3px; height: 12px; border-radius: 2px; background: #5c556b; }
.atlas .tk.here.past::after { background: var(--ink); }
.atlas .tk.crisis::after { background: #6b3a45; }
.atlas .tk.crisis.past::after { background: var(--war); }
.atlas .tk.there::after { left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #5c556b; box-sizing: border-box; background: var(--space); }
.atlas .tk.there.past::after { border-color: var(--muted); }
.atlas .tk.on::after { box-shadow: 0 0 0 2px var(--sun); }
.atlas .thumb { position: absolute; top: 4px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--sun); border: 4px solid var(--space); box-sizing: border-box; box-shadow: 0 0 0 1px var(--sun), 0 0 14px rgba(244,212,140,.5); pointer-events: none; z-index: 3; }
.atlas #yr { position: absolute; inset: 0; width: 100%; height: 30px; margin: 0; opacity: 0; z-index: 1; pointer-events: none; }
.atlas #yr:focus-visible + * , .atlas .track:focus-within .thumb { box-shadow: 0 0 0 3px var(--ink), 0 0 14px rgba(244,212,140,.5); }
.atlas .years { position: relative; height: 14px; font: 400 10.5px/14px var(--f-mono); color: var(--muted); }
.atlas .years span { position: absolute; transform: translateX(-50%); }
.atlas .years span:first-child { transform: none; }
.atlas .years span:last-child { transform: none; }

/* the panel */
.atlas .apanel { flex: 1 1 320px; min-width: 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--space); }
@media (min-width: 981px) { .atlas .apanel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); max-height: calc(100vh - 96px); display: flex; flex-direction: column; } .atlas .ap-body { overflow: auto; } }
.atlas .ap-head { padding: 8px 8px 8px 16px; min-height: 52px; box-sizing: border-box; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.atlas .ap-head span { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.atlas .ap-head button { min-height: 36px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font: 400 12px var(--f-mono); }
.atlas .ap-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; font-family: var(--f-body); }
.atlas .ap-body section { display: flex; flex-direction: column; gap: 8px; }
.atlas .ap-body h2 { margin: 0; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
.atlas .ap-body .ttl { font: 800 38px/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.atlas .muted { color: var(--muted); font-size: 14px; margin: 0; }
.atlas .note { font-size: 13.5px; color: var(--muted); border-left: 2px solid var(--sun); padding-left: 10px; margin: 0; }
.atlas .x { margin: 0; font-size: 14.5px; color: #d8d0c4; }
.atlas .evl, .atlas .chl { list-style: none; margin: 0; padding: 0; }
.atlas .evl li, .atlas .chl li { border-top: 1px solid var(--rule); }
.atlas .evl li:last-child, .atlas .chl li:last-child { border-bottom: 1px solid var(--rule); }
.atlas .evb { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 0; cursor: pointer; }
.atlas .evb:hover b { color: var(--sun); }
.atlas .evb:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.atlas .evb .d, .atlas .chl .d { font: 400 11.5px var(--f-mono); color: var(--sun); }
.atlas .evb .d.cr { color: #ff8a98; }
.atlas .evb b, .atlas .chl b { font-weight: 600; font-size: 15px; }
.atlas .evb .x { font-size: 13.5px; color: var(--muted); }
.atlas .chl li { padding: 8px 0; font-size: 13.5px; }
.atlas .chl b { display: block; font-size: 14px; }
.atlas .lnk { all: unset; cursor: pointer; color: var(--sun); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.atlas .lnk:focus-visible { outline: 2px solid var(--sun); }
.atlas .erachips { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas .erachips a { padding: 7px 11px; border-radius: 999px; border: 1px solid #3a3446; color: var(--ink); text-decoration: none; font: 400 12.5px var(--f-mono); }
.atlas .erachips a:hover { border-color: var(--ink); }
.atlas .works { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14.5px; }
.atlas .more { margin: 4px 0 0; font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.atlas .reads { display: flex; flex-direction: column; gap: 8px; font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.atlas .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas .chip { display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px/1.5 var(--f-mono); padding: 3px 9px; border-radius: 3px; background: var(--raise); border: 0; color: var(--ink); text-decoration: none; white-space: nowrap; }
.atlas .chip i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.atlas .chip.date { border: 1px solid var(--sun); background: none; color: var(--sun); }
.atlas .chip.date.cr { border-color: var(--war); color: #ff8a98; }
.atlas .chip.flag { color: var(--sun); background: none; border: 1px solid var(--rule); }
.atlas .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 13.5px; margin: 0; }
.atlas .kv dt { font: 500 10.5px/1.9 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.atlas .kv dd { margin: 0; }
.atlas ol.tl { list-style: none; padding: 0; margin: 0; }
.atlas ol.tl li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.atlas ol.tl li.now { background: linear-gradient(90deg, rgba(244,212,140,.08), transparent); }
.atlas ol.tl li.future { color: var(--faint); }
.atlas ol.tl .w { font: 400 11.5px/1.5 var(--f-mono); color: var(--sun); }
.atlas ol.tl li.future .w { color: var(--faint); }
.atlas ol.tl .st { display: block; font-weight: 600; }
.atlas .src { display: block; font: 400 11px var(--f-mono); color: var(--faint); margin-top: 3px; }
.atlas .src a { color: var(--muted); }
.atlas .tl-list { margin: 0; font-size: 14px; }

/* site header: the maps are the menu */
.map-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; }
.map-tabs a, .map-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; color: var(--night-muted); text-decoration: none; font: 500 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.map-tabs a:hover { color: var(--night-ink); background: rgba(255,255,255,.07); }
.map-tabs a[aria-current="page"] { background: rgba(255,255,255,.12); color: var(--night-ink); }
.map-tabs span[aria-disabled] { opacity: .55; cursor: default; }
.map-tabs small { font: 400 9.5px/1 var(--f-mono); letter-spacing: .08em; padding: 2px 5px; border: 1px solid currentColor; border-radius: 3px; }
@media (max-width: 720px) { .map-tabs a, .map-tabs span { padding: 10px 11px; font-size: 12px; } .map-tabs small { display: none; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12.5px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.foot-links a { color: var(--night-muted); text-decoration: none; }
.foot-links a:hover { color: var(--night-ink); }
.art-head .chips { align-items: center; }
.see-map { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font: 500 12.5px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.see-map:hover { border-color: var(--sun-glow); }
body:has(.atlas) .site-head .wrap, body:has(.atlas) .site-foot .wrap { max-width: 1480px; }

/* cities on the Earth map (the Cities chapter) */
.atlas .city, .atlas .csite { cursor: pointer; outline: none; }
.atlas .cdot { vector-effect: non-scaling-stroke; }
.atlas .cwall { fill: none; stroke: var(--ink); stroke-width: 1.3px; stroke-opacity: .85; vector-effect: non-scaling-stroke; }
.atlas .csite { pointer-events: none; }
.atlas .csite .cdot { stroke: var(--deep); stroke-width: 1px; fill-opacity: .9; }
.atlas .cmove { fill: none; stroke: var(--ink); stroke-width: 1.3px; stroke-dasharray: 3 3; stroke-opacity: .8; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas .city.selp .cdot, .atlas .city:focus-visible .cdot { stroke: var(--sun) !important; stroke-width: 2.6px; }
.atlas .lbl.city { font-family: var(--f-body); font-weight: 600; fill-opacity: .92; }
.atlas .lbl.city.gone { font-style: italic; font-weight: 400; fill: var(--muted); }
.atlas .lbl.city.site { font-weight: 400; font-style: italic; }
.atlas .legend-chips .ctog { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 3px; background: rgba(13,11,18,.88); border: 1px solid var(--rule); color: var(--ink); font: 400 11.5px var(--f-mono); cursor: pointer; }
.atlas .legend-chips .ctog .hsea { width: 12px; height: 10px; border-radius: 2px; background: var(--sea, var(--deep)); box-shadow: inset 0 -3px 0 var(--c-drown); }
.atlas .legend-chips .ctog .hob { width: 12px; height: 10px; border: 1px dashed var(--muted); border-radius: 2px; }
.atlas .legend-chips .ctog[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.atlas .legend-chips .ctog:hover, .atlas .legend-chips .ctog:focus-visible { border-color: var(--sun); }
.atlas .legend-chips i.hc { width: 9px; height: 9px; border-radius: 50%; background: var(--city); box-shadow: 0 0 0 1.5px var(--deep), 0 0 0 2.6px var(--ink); }
@media (max-width: 760px) { .atlas .legend-chips .ctog { padding: 8px 10px; } }
.atlas .chip.fate { background: none; border: 1px solid var(--rule); }
.atlas .chip.fate.f-drowned { border-color: var(--c-drown); color: var(--c-drown); }
.atlas .chip.fate.f-emptied, .atlas .chip.fate.f-ruin { border-color: var(--c-empty); color: var(--c-empty); }

/* ---------- the solar system map (atlas-solar.js) */
.atlas { --b-belt: #9085e9; --b-free: #b04a9a; --prot: #a69eb1; }
.atlas[data-map="solar"] .scene { background: var(--deep); }
.atlas[data-map="solar"] .legend-chips { max-width: 96%; }
/* below 1180px the drawing gets a taller frame and pans sideways; the key moves below it */
@media (max-width: 1180px) { .atlas[data-map="solar"] .scene { aspect-ratio: 1.6 / 1; } .atlas[data-map="solar"] .legend-chips { position: static; max-width: none; justify-content: flex-start; margin-top: 8px; } }
@media (max-width: 600px) { .atlas[data-map="solar"] .scene { aspect-ratio: 1.15 / 1; } }
.atlas .pan-hint { margin: 6px 0 0; font: 400 11.5px var(--f-mono); color: var(--muted); }
.atlas .pan-hint[hidden] { display: none; }
.atlas .sv.pan { cursor: grab; }
.atlas .sv.pan.drag { cursor: grabbing; }
.atlas .sv text { pointer-events: none; paint-order: stroke; stroke: var(--deep); stroke-linejoin: round; }
.atlas .sv .wl { font: 500 calc(12px * var(--u, 1)) var(--f-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); stroke-width: calc(3px * var(--u, 1)); }
.atlas .sv .wl.small { font-size: calc(11px * var(--u, 1)); }
.atlas .sv .sl { font: 400 calc(11.5px * var(--u, 1)) var(--f-mono); fill: var(--muted); stroke-width: calc(3px * var(--u, 1)); }
.atlas .sv .it { font: italic 400 calc(13px * var(--u, 1)) var(--f-body); fill: #cfc6b8; stroke-width: calc(3px * var(--u, 1)); }
.atlas .sv.tight .sec { display: none !important; }
.atlas .sv .hit { cursor: pointer; outline: none; }
.atlas .sv .hit:hover .body, .atlas .sv .hit:focus-visible .body { stroke: var(--sun); stroke-width: 2px; }
.atlas .sv .hit:focus-visible .f { stroke: var(--sun); stroke-width: 2px; }
.atlas .sv .rg .f.dash { stroke-dasharray: 4 3; }
.atlas .sv .rg.ring .f.dash { stroke-dasharray: 6 5; }
.atlas .sv .rg .h { pointer-events: none; }
.atlas .sv .rg.ring .f.prot { stroke-dasharray: 3 3; }
.atlas .sv .rg:not(.ring) .f.prot { fill: none; }
.atlas .sv .rg.selr:not(.ring) .f { stroke: var(--sun); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.atlas .sv .rg.ring.selr .f { filter: drop-shadow(0 0 3px var(--sun)); }
.atlas .sv .sdot { stroke: var(--deep); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.atlas .sv .sdoth { pointer-events: none; }
.atlas .sv .sdot.dash { stroke: var(--ink); stroke-dasharray: 2 2; }
.atlas .sv .sdot-g.selp .sdot, .atlas .sv .sdot-g:focus-visible .sdot { stroke: var(--sun); stroke-width: 3px; }
.atlas .sv .frontier { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; fill: none; pointer-events: none; }
.atlas .sv .site { fill: var(--deep); stroke: var(--muted); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.atlas .sv .arr-halo { fill: #ffd27a; fill-opacity: .14; stroke: #ffd27a; stroke-opacity: .35; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }   /* layer 4, 4 Nov 2026 */
.atlas .sv .arr-tick { stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.atlas .sv .route { fill: none; stroke-width: 1.6px; stroke-dasharray: 5 4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }   /* layers 5 and 6, 4 Nov 2026 */
.atlas .sv .route.cable { stroke-dasharray: none; stroke-width: 2.4px; }
.atlas .sv .route.tube { stroke-dasharray: 1 6; stroke-width: 2.6px; }
.atlas .sv .beam-h { fill: none; stroke-width: 6px; stroke-opacity: .18; vector-effect: non-scaling-stroke; }
.atlas .sv .beam { fill: none; stroke: #ffd27a; stroke-width: 1px; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; animation: lr-beam 1.6s linear infinite; }
@keyframes lr-beam { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .atlas .sv .beam { animation: none; } }
.atlas .sv .lifec.q { stroke-dasharray: 3 3; }
.atlas .sv .life-l { fill: var(--life); }
.atlas .sv .beam.share { stroke: #e7a6d6; }   /* Freehold's share: Freehold-pink light, 4 Nov 2026 */
.atlas .sv .beams g.cut .beam { stroke: #e05a5a; stroke-dasharray: 2 6; animation: none; }
.atlas .sv .beams g.cut .beam-h { stroke-opacity: .07; }
.atlas .sv .route.cut { stroke: #e05a5a; stroke-dasharray: 2 6; opacity: .7; }
.atlas .legend-chips i.k-route { width: 16px; height: 0; border-radius: 0; background: none; border-top: 2px dashed #cfc6dc; }   /* solar key: routes, beams, life, 4 Nov 2026 */
.atlas .legend-chips i.k-beam { width: 16px; height: 3px; border-radius: 2px; background: #ffd27a; box-shadow: 0 0 5px #ffd27a; }
.atlas .legend-chips i.k-share { width: 16px; height: 3px; border-radius: 2px; background: #e7a6d6; box-shadow: 0 0 5px #b04a9a; }
.atlas .legend-chips i.k-cut { width: 16px; height: 0; border-radius: 0; background: none; border-top: 2px dotted #e05a5a; }
.atlas .legend-chips i.k-life { width: 10px; height: 10px; border-radius: 50%; background: none; border: 2px solid var(--life); }
.atlas .sv .rhit { fill: none; stroke: transparent; stroke-width: 14px; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: help; }   /* hover area for routes, beams and life, 4 Nov 2026 */
.atlas .sv .site-x { stroke: var(--muted); stroke-width: 1.2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas .sv .hit.selp .site, .atlas .sv .hit:focus-visible .site { stroke: var(--sun); stroke-width: 2.6px; }
.atlas .ov-year .crumb { margin-top: 4px; pointer-events: auto; }
.atlas .ov-year .crumb-a { all: unset; cursor: pointer; color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }
.atlas .ov-year .crumb-a:focus-visible { outline: 2px solid var(--sun); }
.atlas .sback { position: absolute; right: 12px; top: 12px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--raise); cursor: pointer; font: 400 12px var(--f-mono); z-index: 2; }
.atlas .sback:hover { border-color: var(--faint); }
.atlas .sback[hidden] { display: none; }
.atlas .legend-chips .lk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 3px; background: rgba(13,11,18,.88); color: var(--ink); font: 400 11.5px var(--f-mono); }
.atlas .legend-chips i.hbr { background: radial-gradient(circle at 30% 30%, #0d0b12 0 1.1px, transparent 1.3px) 0 0 / 4px 4px, var(--b-belt); }
.atlas .legend-chips i.hw { background: repeating-linear-gradient(-45deg, var(--war) 0 2px, #6b6478 2px 4px); }
.atlas .legend-chips i.hj { background: repeating-linear-gradient(45deg, var(--b-set) 0 2px, var(--b-man) 2px 4px); }
.atlas .legend-chips i.hp { border: 1.5px dashed var(--prot); background: none; box-sizing: border-box; border-radius: 50%; }
.atlas .legend-chips i.hfd { width: 7px; height: 7px; transform: rotate(45deg); background: var(--sun); border-radius: 1px; }
@media (max-width: 760px) { .atlas .legend-chips .lk { padding: 8px 10px; } }
/* foundings: a row of gold diamonds above the slider */
.atlas .founds { position: relative; height: 14px; margin-bottom: -6px; }
.atlas .fd { position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; padding: 0; border: 0; background: none; cursor: pointer; }
.atlas .fd::after { content: ""; position: absolute; left: 3.5px; top: 3.5px; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; background: #5c5038; }
.atlas .fd.past::after { background: var(--sun); }
.atlas .fd.on::after { box-shadow: 0 0 0 2px var(--ink); }
.atlas .fd:focus-visible { outline: 2px solid var(--sun); }
.atlas .k-found { width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; background: var(--sun); }
.atlas .chips.inl { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.atlas .chl .chips.inl .chip { padding: 1px 7px; }

/* the interstellar map (atlas-stars.js) */
.atlas { --life: #6fd39a; }
.atlas[data-map="stars"] .scene { background: var(--deep); }
.atlas[data-map="stars"] .legend-chips { position: static; max-width: none; justify-content: flex-start; margin-top: 8px; }   /* the key sits below the chart at every width, clear of the 15 light-year ring label (3 Nov 2026) */
@media (max-width: 1180px) { .atlas[data-map="stars"] .scene { aspect-ratio: 1.6 / 1; } .atlas[data-map="stars"] .legend-chips { position: static; max-width: none; justify-content: flex-start; margin-top: 8px; } }
@media (max-width: 600px) { .atlas[data-map="stars"] .scene { aspect-ratio: 1.05 / 1; } }
.atlas .sv .sgrid circle { fill: none; stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.atlas .sv .sgrid .axis { stroke: var(--rule); stroke-width: 1px; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.atlas .sv .ring-l, .atlas .sv .dir { fill: var(--faint); }
.atlas .sv .cstar { fill: var(--faint); fill-opacity: .6; }
.atlas .sv .hit:hover .cstar, .atlas .sv .hit.selp .cstar, .atlas .sv .hit:focus-visible .cstar { fill: var(--ink); fill-opacity: 1; }
.atlas .sv .kstar { fill: #fff6e6; }
.atlas .sv .voy .rest { stroke-width: 1.4px; stroke-dasharray: 4 5; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.atlas .sv .voy .done, .atlas .sv .trk .done { stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.atlas .sv .voy.over .done { stroke-width: 1.2px; stroke-opacity: .35; }
.atlas .sv .voy.over .rest { display: none; }
.atlas .sv .ship { stroke: var(--deep); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.atlas .sv .ship.seenmode { fill-opacity: .55; }
.atlas .sv .ghost { fill: none; stroke-width: 1.2px; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.atlas .sv .vlab { fill: #cfc6b8; }
.atlas .sv .hit.selp .ship, .atlas .sv .hit:focus-visible .ship { stroke: var(--sun); stroke-width: 2.6px; }
.atlas .sv .hit.selp .done { stroke-width: 3.4px; }
.atlas .sv .thread { stroke: var(--b-set); stroke-width: 2px; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; animation: lr-thread 1.6s linear infinite; }
.atlas .sv .thread.two { stroke-dasharray: none; animation: none; }
@keyframes lr-thread { to { stroke-dashoffset: -20; } }
.atlas .sv .flare circle { fill: none; stroke: var(--sun); stroke-width: 1.4px; stroke-opacity: .7; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.atlas .sv .flare-l { fill: var(--sun); }
.atlas .sv .flare-dot { fill: var(--sun); filter: drop-shadow(0 0 6px var(--sun)); }
.atlas .sv .lifec { fill: none; stroke: var(--life); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.atlas .sv .protc { fill: none; stroke: var(--prot); stroke-width: 1.4px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.atlas .sv .colony { stroke: var(--deep); stroke-width: 1.4px; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas .sv .orbits circle, .atlas .sv .morbit { fill: none; stroke: #2a2636; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.atlas .sv .dust circle { fill: none; stroke: #8a8298; stroke-opacity: .08; }
.atlas .sv .planet { fill: #8d8699; stroke: var(--deep); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.atlas .sv .planet.giant { fill: #c3a985; }
.atlas .sv .moon { fill: #cfe3f0; stroke: var(--deep); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.atlas .sv .gap { stroke: var(--faint); stroke-width: 1px; stroke-dasharray: 1 6; vector-effect: non-scaling-stroke; }
.atlas .sv .trk-rail { stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.atlas .sv .trk .rest { stroke-width: 1.2px; stroke-dasharray: 4 5; stroke-opacity: .45; vector-effect: non-scaling-stroke; }
.atlas .sv .trk.yet .rest { stroke-opacity: .2; }
.atlas .sv .trk.over .rest { display: none; }
.atlas[data-map="stars"] .sback { top: 56px; }
.atlas .seen-tog { position: absolute; right: 12px; top: 12px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--raise); cursor: pointer; font: 400 12px var(--f-mono); z-index: 2; }
.atlas .seen-tog:hover { border-color: var(--faint); }
.atlas .seen-tog[aria-pressed="true"] { border-color: var(--sun); color: var(--sun); }
.atlas .legend-chips i.hx { background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 7px); height: 2px; border-radius: 0; }
.atlas .legend-chips i.ht { background: repeating-linear-gradient(90deg, var(--b-set) 0 3px, transparent 3px 6px); height: 3px; border-radius: 0; }
.atlas .legend-chips i.hl { border: 2px solid var(--life); background: none; box-sizing: border-box; border-radius: 50%; }
.atlas .vsw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
@media (prefers-reduced-motion: reduce) { .atlas .sv .thread { animation: none; } }
.atlas .sv.narrow .dir { display: none; }
/* interstellar map: the "elsewhere" card below the chart keeps its space when empty, so the timeline does not jump (Rodney, 3 Nov 2026) */
.atlas[data-map="stars"] .xmap.below, .atlas[data-map="solar"] .xmap.below { height: 118px; overflow: hidden; }
.atlas[data-map="stars"] .xmap.below[hidden], .atlas[data-map="solar"] .xmap.below[hidden] { display: flex; visibility: hidden; }
.atlas[data-map="stars"] .xmap.below .xt, .atlas[data-map="solar"] .xmap.below .xt, .atlas[data-map="earth"] .xmap.below .xt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.atlas .sv .dep-torch { fill: none; stroke: #ffe2b0; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }   /* solar layer 7, departures, 4 Nov 2026 */
.atlas .sv .dep-mk { cursor: pointer; }
.atlas .sv .dep-mk:hover .dep-l, .atlas .sv .dep-mk:focus .dep-l { fill: var(--ink); text-decoration: underline; }
.atlas .legend-chips i.k-dep { width: 0; height: 0; border-radius: 0; background: none; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #cfc6dc; }
.atlas .sv .dep-mk.arrived path { opacity: .55; }   /* an arrived ship's arrow, 4 Nov 2026 */

/* Earth map: Antarctica in a south-pole inset, bottom left (4 Nov 2026) */
.atlas .ata-inset { position: absolute; left: 10px; bottom: 10px; width: 19%; min-width: 92px; max-width: 190px; z-index: 2; }
.atlas .ata-inset svg { display: block; width: 100%; height: auto; overflow: visible; }
.atlas .ata-sea { stroke: var(--rule); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.atlas .ata-grat { fill: none; stroke: var(--rule); stroke-width: .8px; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: .7; }
.atlas .ata-land { shape-rendering: crispEdges; cursor: help; }
.atlas .ata-claims line { stroke: var(--ink); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .55; pointer-events: none; }
.atlas .ata-l { font: 400 11px var(--f-mono); fill: var(--ink); opacity: .8; pointer-events: none; paint-order: stroke; stroke: rgba(13,11,18,.6); stroke-width: 3px; }
.atlas .ata-enc { cursor: help; }
.atlas .ata-enc polygon { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-opacity: .7; }
.atlas .ata-stn { fill: var(--ink); }
.atlas .ata-cap { position: absolute; left: 50%; top: -2px; transform: translate(-50%, -100%); font: 400 11px var(--f-mono); color: var(--muted); white-space: nowrap; pointer-events: none; }
@media (max-width: 760px) { .atlas .ata-l { display: none; } }

/* Earth map: the cross-map card between the year and the Antarctica inset on wide screens; below the map, its space kept, on narrow ones (4 Nov 2026) */
.atlas[data-map="earth"] .xmap:not(.below) { top: 88px; bottom: auto; overflow: hidden; }   /* placed by fitSea() in atlas-earth.js */
.atlas[data-map="earth"] .xmap.tight .xs { -webkit-line-clamp: 1; }
@media (max-width: 959px) {
  .atlas[data-map="earth"] .xmap.below { height: 118px; overflow: hidden; }
  .atlas[data-map="earth"] .xmap.below[hidden] { display: flex; visibility: hidden; }
}

/* Solar map: the cross-map card in the top-right corner on wide screens (4 Nov 2026) */
.atlas[data-map="solar"] .xmap:not(.below) { left: auto; right: 12px; top: 12px; bottom: auto; width: 24%; max-width: 260px; }
@media (min-width: 960px) { .atlas[data-map="solar"] .xmap.below, .atlas[data-map="solar"] .xmap.below[hidden] { display: none; } }

/* Interstellar map: the cross-map card in the bottom-right corner on wide screens (4 Nov 2026) */
.atlas[data-map="stars"] .xmap:not(.below) { left: auto; right: 12px; bottom: 12px; top: auto; width: 24%; max-width: 260px; }
@media (min-width: 960px) { .atlas[data-map="stars"] .xmap.below, .atlas[data-map="stars"] .xmap.below[hidden] { display: none; } }