/* Design system: editorial maps, archival imagery, restrained Chinese red. */
:root {
  --color-paper: #f5f1e8;
  --color-surface: #fcfaf5;
  --color-ink: #242b27;
  --color-muted: #68716b;
  --color-green: #26372f;
  --color-red: #a83b32;
  --color-red-dark: #822d27;
  --color-gold: #c1a06a;
  --color-map-neutral: #e5ded1;
  --color-border: #dcd4c7;
  --color-cover: #842f2b;
  --color-cover-text: #fffaf2;
  --color-cover-accent: #f0d7ad;
  --color-control: #ebe5da;
  --color-selected: #822d27;
  --font-body: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --font-heading: 'Noto Serif SC', 'SimSun', serif;
  --font-numeric: Georgia, 'Noto Sans SC', serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-h3: clamp(22px, 2.2vw, 28px);
  --text-h2: clamp(32px, 3.7vw, 48px);
  --text-display: clamp(44px, 6vw, 80px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-panel: 0 12px 36px rgb(36 43 39 / 7%);
  --content-max: 1280px;
  --page-gutter: clamp(20px, 6vw, 96px);
  --header-height: 68px;
  --chapter-space: clamp(76px, 9vw, 116px);

  /* Aliases keep the existing component stylesheet on the same palette. */
  --paper: var(--color-paper);
  --pale: var(--color-surface);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --red: var(--color-red);
  --gold: var(--color-gold);
  --line: var(--color-border);
}

html { scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
body { font: 400 var(--text-base)/1.75 var(--font-body); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
::selection { background: #e7c9ae; color: var(--color-ink); }
.section-wrap { max-width: var(--content-max); padding-inline: var(--page-gutter); }
body::before { opacity: .08; }

/* Type hierarchy */
.hero h1 { font-family: var(--font-heading); font-size: var(--text-display); line-height: 1.2; }
.section-head h2, .photo-comparison h2, .ending h2 { font-family: var(--font-heading); font-size: var(--text-h2); line-height: 1.3; }
.chapter-intro h2 { font-family: var(--font-heading); font-size: clamp(36px, 4.6vw, 60px); }
.panel-top h3 { font-family: var(--font-heading); font-size: clamp(25px, 2.8vw, 36px); line-height: 1.35; }
.info-card h4 { font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.4; }
.section-head p, .chapter-intro p, .story-copy p, .ending p { font-size: var(--text-base); line-height: 1.8; }
.eyebrow, .kicker, .chapter-no, .info-overline { font-size: var(--text-xs); letter-spacing: .12em; }
.map-note, figcaption, .photo-credit { font-size: var(--text-xs); line-height: 1.65; }
.stat-feature strong, .stat-card strong, .timeline strong, .info-number, .year-control label strong { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }

/* Navigation and controls */
.topbar { height: var(--header-height); padding-inline: clamp(20px, 4vw, 64px); background: rgb(252 250 245 / 94%); border-color: var(--color-border); }
.brand { gap: var(--space-3); font-size: var(--text-sm); }
.brand-mark { background: var(--color-red-dark); }
.topbar nav { gap: clamp(12px, 2.5vw, 32px); font-size: 13px; }
.topbar nav a { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 2px solid transparent; transition: color .18s ease, border-color .18s ease; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--color-red-dark); border-color: var(--color-red); }
.topbar-note { color: var(--color-muted); }
.primary-link { min-height: 44px; align-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); transition: background-color .2s ease, color .2s ease; }
.primary-link:hover { background: var(--color-surface); color: var(--color-red-dark); }
.segmented { gap: var(--space-1); padding: var(--space-1); background: var(--color-control); border-radius: var(--radius-sm); }
.segmented button { min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); color: #4d5751; font-size: 13px; font-weight: 500; transition: background-color .18s ease, color .18s ease; }
.segmented button:hover:not(:disabled):not(.active) { background: #ded6c8; color: var(--color-ink); }
.segmented button.active { background: var(--color-selected); color: white; }
.segmented button:disabled { opacity: .4; }
input[type='range'] { accent-color: var(--color-red); cursor: pointer; }
input:not([type='range']) { min-height: 40px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }

/* Existing cards and map components share one surface language. */
.atlas-panel { background: var(--color-surface); box-shadow: var(--shadow-panel); }
.stat-feature { background: var(--color-green); }
.stat-feature strong { color: #ead6ae; }
.stat-card, .info-card { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-sm); }
.stat-card { padding: var(--space-6); }
.info-card { padding: var(--space-6); }
.map-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 30%); gap: var(--space-6); }
.map-shell { background: var(--color-map-neutral); border-color: var(--color-border); border-radius: var(--radius-sm); }
.map-legend { background: rgb(252 250 245 / 94%); border-radius: var(--radius-sm); }
.panel-badge { border-color: var(--color-gold); color: var(--color-red-dark); border-radius: var(--radius-sm); }
.photo-year { background: var(--color-red-dark); }
.timeline button { transition: color .18s ease, border-color .18s ease; }
.timeline button:hover { color: var(--color-red-dark); border-color: var(--color-red); }
.ending { background: var(--color-green); }

/* Chapter rhythm and map reading surface */
.chapter-intro { grid-template-columns: minmax(120px, 17%) minmax(0, 1fr); gap: var(--space-12); padding-top: var(--chapter-space); padding-bottom: var(--space-12); }
.chapter-intro .chapter-no { display: block; padding-top: 8px; border-top: 2px solid var(--color-red); width: fit-content; color: var(--color-red-dark); font-size: 25px; font-weight: 700; letter-spacing: .04em; }
.chapter-intro h2 { margin-bottom: var(--space-6); }
.chapter-intro p { max-width: 44em; }
.atlas-panel { padding-top: var(--space-12); padding-bottom: var(--space-12); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); box-shadow: none; }
.panel-top { align-items: start; }
.panel-top h3 { max-width: 20em; margin-top: var(--space-3); }
.panel-badge { margin-top: 4px; padding: 7px 11px; font-size: 12px; }
.map-toolbar { margin: var(--space-8) 0 var(--space-4); gap: var(--space-6); font-size: 13px; }
.map-toolbar > span { max-width: 29em; text-align: right; line-height: 1.55; }
.map-layout { align-items: stretch; }
.map-shell { height: clamp(420px, 42vw, 570px); background: var(--color-map-neutral); }
.map-corner { top: 14px; right: 15px; width: 44px; font-size: 0; }
.map-corner img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: .86; }
.map-legend { bottom: 16px; left: 16px; max-width: calc(100% - 32px); padding: 10px 13px; border: 1px solid var(--color-border); font-size: 12px; line-height: 1.5; color: #4c514b; }
.map-legend .legend-flow { display: inline-block; margin-right: 6px; vertical-align: middle; }
.info-card { display: flex; flex-direction: column; padding: var(--space-8); }
.info-overline { color: var(--color-red-dark); }
.info-card h4 { margin: var(--space-4) 0 var(--space-3); }
.info-card p { font-size: 13px; line-height: 1.75; }
#migration-info-text:empty { display: none; }
.info-divider { margin: var(--space-8) 0 var(--space-6); }
.info-number { color: var(--color-red-dark); font-size: clamp(30px, 3vw, 40px); overflow-wrap: anywhere; }
.info-number-caption { font-size: 12px; }
.urban-pie { display: grid; justify-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.urban-pie[hidden] { display: none; }
.urban-pie-chart { --urban-share: 50%; flex: 0 0 104px; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--color-red-dark) 0 var(--urban-share), #d7c5ab var(--urban-share) 100%); }
.urban-pie-legend { display: grid; gap: 8px; width: 100%; font-size: 12px; color: var(--color-muted); }
.urban-pie-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.urban-pie-legend strong { margin-left: auto; color: var(--color-ink); font-weight: 700; }
.urban-pie-legend i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.urban-pie-legend .urban-swatch { background: var(--color-red-dark); }
.urban-pie-legend .rural-swatch { background: #d7c5ab; }
.year-control { max-width: none; margin: var(--space-8) 0 0; padding: var(--space-6) var(--space-8); background: #f4efe5; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.year-control label { align-items: baseline; font-size: 13px; }
.year-control input { margin: var(--space-4) 0 var(--space-2); }
.year-marks { color: var(--color-muted); }
.map-note { max-width: 85em; margin-top: var(--space-6); color: #646b63; font-size: 12px; }
.ol-control button { background: var(--color-selected) !important; }
.ol-control button:hover, .ol-control button:focus-visible { background: var(--color-red) !important; }

/* Archive images and conclusion */
.story-image { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 80px); padding-top: var(--chapter-space); padding-bottom: var(--chapter-space); }
.story-copy h3 { max-width: 14em; margin: var(--space-4) 0 var(--space-6); }
.story-copy p { max-width: 32em; }
.story-image img { height: clamp(320px, 35vw, 460px); filter: none; }
.photo-credit { margin-top: var(--space-8); }
.photo-comparison { padding-top: var(--chapter-space); padding-bottom: var(--chapter-space); }
.section-head.compact { margin-bottom: var(--space-8); }
.compare-grid { gap: var(--space-6); }
.compare-grid img { height: clamp(260px, 29vw, 380px); }
.compare-grid figcaption, .story-image figcaption { margin-top: var(--space-3); font-size: 12px; }
.photo-year { top: 14px; left: 14px; padding: 7px 12px; background: var(--color-selected); }
.final-compare { padding-bottom: var(--chapter-space); }
.ending { padding: var(--chapter-space) 0; }
.ending h2 { max-width: 17em; }
.ending a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; transition: color .2s ease, border-color .2s ease; }
.ending a:hover { color: white; border-color: white; }

@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; }
  .info-card { padding: var(--space-6); }
  .map-shell { height: clamp(400px, 55vw, 510px); }
  .story-image { gap: var(--space-8); }
}
@media (max-width: 620px) {
  :root { --header-height: 60px; --page-gutter: 5vw; --text-base: 15px; }
  .topbar { padding-inline: var(--page-gutter); }
  .brand { font-size: 11px; }
  .topbar nav { gap: 10px; font-size: 10px; }
  .topbar nav a:first-child { display: inline-flex; }
  .topbar nav a { min-height: 44px; }
  .map-toolbar { margin-top: var(--space-6); }
  .segmented button { min-height: 40px; padding: 7px 10px; font-size: 12px; }
  .stat-card, .info-card { padding: var(--space-6); }
  .chapter-intro { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-8); }
  .atlas-panel { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .map-toolbar > span { max-width: none; text-align: left; }
  .map-shell { height: 390px; }
  .map-corner { top: 12px; right: 12px; width: 38px; }
  .map-legend { font-size: 11px; }
  .year-control { padding: var(--space-4); }
  .story-image, .photo-comparison { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .story-image img { height: 300px; }
  .compare-grid { gap: var(--space-8); }
  .compare-grid img { height: 270px; }
  .final-compare { padding-bottom: var(--space-16); }
}
@media (max-width: 430px) {
  .topbar { gap: 10px; }
  .brand span:last-child { max-width: 92px; line-height: 1.35; }
  .topbar nav { gap: 6px; font-size: 10px; }
  .hero h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.atlas-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55rem; position: relative; }
.atlas-help > summary { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; cursor: pointer; color: var(--color-red-dark); font: 700 16px/1 var(--font-body); list-style: none; }
.atlas-help > summary::-webkit-details-marker { display: none; }
.atlas-help[open] > summary { background: var(--color-control); border-radius: 4px; }
.atlas-help-content { position: absolute; z-index: 25; inset-inline-start: 0; top: 100%; width: min(28rem, 100%); padding: .65rem .85rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-panel); text-align: start; font: 400 .86rem/1.65 var(--font-body); }
.atlas-help-content p { margin: 0; color: inherit; }
.atlas-help-content p + p { margin-top: .4rem; }

.topic-cover { color: var(--color-cover-text); background: var(--topic-cover-background, var(--color-cover)); }
.rail-cover { --topic-cover-background: #591f21; }
.econ-cover { --topic-cover-background: #253b32; }
.eco-cover { --topic-cover-background: #26372f; }
.topic-cover + section { scroll-margin-top: var(--topic-nav-height); }
.topic-cover[id] { scroll-margin-top: var(--topic-nav-height); }
.topic-cover-inner, .topic-footer-inner {
  width: min(calc(100% - clamp(36px, 12vw, 152px)), 1240px);
  margin-inline: auto;
}
.topic-cover-inner {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  min-height: 520px;
  padding-block: clamp(48px, 5vw, 72px);
}
.topic-cover h1 { margin: 0; font: 700 clamp(72px, 7vw, 96px)/1.1 var(--font-heading); letter-spacing: .04em; }
.topic-cover-label { margin: 0 0 16px; color: var(--color-cover-accent); font: 700 .875rem/1.5 var(--font-body); }
.topic-cover-subtitle { margin: 16px 0 0; color: var(--color-cover-accent); font: 700 clamp(22px, 2.2vw, 28px)/1.4 var(--font-heading); text-wrap: balance; }
.topic-cover-link {
  display: inline-flex; align-items: center; gap: 20px;
  min-height: 44px; margin-top: 24px; padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--color-cover-accent); color: #382820; text-decoration: none; font: 700 1rem/1.5 var(--font-body);
}
.topic-cover-link:hover { background: var(--color-cover-text); }
.topic-cover :is(a:focus-visible) { outline: 2px solid var(--color-cover-text); outline-offset: 4px; }
.topic-cover-figure { min-width: 0; margin: 0; }
.topic-cover-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.rail-cover .topic-cover-image { object-position: left center; }
.topic-cover-figure figcaption { margin-top: 8px; color: var(--color-cover-accent); font: 400 .8125rem/1.6 var(--font-body); }
.topic-cover-figure figcaption a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 760px) {
  .topic-cover-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 24px; padding-block: 36px; }
  .topic-cover h1 { font-size: clamp(40px, 8vw, 52px); }
  .topic-cover-subtitle { font-size: clamp(18px, 3.2vw, 22px); }
}
.topic-footer {
  display: block;
  padding: clamp(40px, 4vw, 48px) 0;
  background: var(--color-green);
  color: var(--color-cover-text);
  font-family: var(--font-body);
}
.topic-footer h2 { margin: 0 0 12px; font: 700 clamp(28px, 2.8vw, 32px)/1.3 var(--font-heading); }
.topic-footer-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; font-size: 1rem; }
.topic-footer-tools { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 8px; border-top: 1px solid #f0d7ad55; font-size: .875rem; }
.topic-footer a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  width: fit-content; color: var(--color-cover-accent); text-decoration: underline; text-underline-offset: .25em;
}
.topic-footer a:hover { color: var(--color-cover-text); }
.topic-footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.topic-footer-credit { margin: 12px 0 0; color: #c8d5ca; font: 400 .8125rem/1.6 var(--font-body); }
@media (max-width: 760px) {
  .topic-footer { padding-block: 30px; }
  .topic-footer h2 { font-size: 24px; }
  .topic-footer-related { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .topic-footer-related a { width: 100%; }
}
.atlas-empty p { margin: 0 0 .35rem; }
.atlas-empty button { padding: .25rem .65rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: var(--color-red-dark); cursor: pointer; }
.atlas-load-error { padding: 1.25rem; }
#urban-picker:not([hidden]) { display: block; max-width: 100%; margin-top: .5rem; font: inherit; }
#migration-info-text:empty, #terrain-readout:empty { display: none; }