/* Hallmark · built: existing project · audit-informed refinement · brand: geographic documentary · user scope: P0/P1 learning flow and accessibility */
/* Critique: retain terrain and comparison semantics; strengthen the lesson, legibility and evidence at each decision. */
:root {
  --font-display: var(--font);
  --ground-dark: #151a16;
  --ground-deep: #101a14;
  --ground-light: #f4f5f0;
  --ground-panel: #e6ece2;
  --ground-white: #fdfefe;
  --text-dark: #1d2c24;
  --text-secondary: #465c4d;
  --text-light: #f0f3ee;
  --text-subtle-light: #c4d1c6;
  --signal-a: #28684f;
  --signal-b: #805318;
  --focus: #9c6a26;
  --sample-ground: #f1e5ce;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section: 96px;
  --reading-small: 14px;
  --reading-body: 16px;
  --reading-lead: 20px;
  --reading-title: clamp(28px, 2.8vw, 40px);
  --reading-display: clamp(56px, 6.3vw, 92px);
  --page-width: 1520px;
}
html, body { overflow-x: clip; }
html { scroll-padding-top: 92px; scrollbar-color: var(--signal-a) var(--ground-panel); }
body { caret-color: var(--signal-a); }
h1,h2,h3,h4 { min-width: 0; overflow-wrap: break-word; letter-spacing: -.025em; }
h4 { font-size: var(--reading-lead); line-height: 1.5; margin: 0 0 var(--space-sm); font-weight: 500; }
button, select, input, summary, .resource-links a { min-height: 44px; }
button:disabled { opacity: .6; cursor: not-allowed; }
summary { display: list-item; align-content: center; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header { height: 72px; }
.site-header nav { font-size: var(--reading-small); gap: var(--space-md); }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.motion-toggle { font-size: var(--reading-small); }
.hero h1 { font-family: var(--font-display); font-size: var(--reading-display); letter-spacing: -.03em; }
.hero-statement { font-size: clamp(26px,2.4vw,34px); line-height: 1.55; }
.hero-description { font-size: 18px; line-height: 1.8; max-width: 370px; color: var(--text-light); }
.hero-source { font-size: var(--reading-small); line-height: 1.8; color: var(--text-subtle-light); max-width: 370px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.hero-history { padding-inline: var(--space-sm); color: var(--text-light); background: var(--atlas-transparent); }
.hero-date, .hero-date span { font-size: var(--reading-small); color: var(--text-subtle-light); }
.hero-date { margin-block: var(--space-md); }
.scene-credit { font-size: var(--reading-small); color: var(--text-subtle-light); }
.scene-console { font-size: var(--reading-small); }
.scene-now>span:first-child,.scene-now>span:last-child,.scene-now strong small,.scene-time label,.scene-time label>output,.scene-console>button,.scene-weeks button,.scene-weeks button span,.scene-play-note { font-size: var(--reading-small); }
.story-scope,.story-play-status,.story-actions>span { font-size: var(--reading-small); color: var(--text-subtle-light); }
.story-controls button { font-size: var(--reading-small); }
.explore, .evidence { max-width: var(--page-width); margin-inline: auto; }
.explore .section-intro h2,.evidence .section-intro h2,.learning-resources h2 { font-size: var(--reading-title); }
.explore .section-intro p,.evidence .section-intro p { font-size: var(--reading-body); color: var(--text-secondary); }
.guided-lab { padding: var(--space-lg); margin-block: var(--space-lg) var(--space-xl); background: var(--ground-panel); scroll-margin-top: 0; }
.guide-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-lg); align-items: start; }
.guide-intro h3 { font-size: clamp(26px,2.4vw,34px); max-width: 18em; }
.guide-intro>p { font-size: var(--reading-body); color: var(--text-secondary); max-width: 42ch; }
.guide-progress { display: flex; gap: var(--space-md); list-style-position: inside; padding: 0; margin: var(--space-lg) 0; font-size: var(--reading-small); color: var(--text-secondary); }
.guide-progress li { padding-bottom: var(--space-xs); flex: 1; border-bottom: 2px solid var(--line); }
.guide-progress li[aria-current] { color: var(--text-dark); border-color: var(--signal-a); font-weight: 600; }
.guide-progress li.complete { border-color: var(--signal-a); }
.guide-work { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: var(--space-xl); }
.guide-question { font-size: var(--reading-lead); line-height: 1.7; max-width: 28em; }
.guide-choices,.guide-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.guide-secondary { background: var(--ground-light); color: var(--text-dark); padding: 12px 18px; }
.guide-footnote { font-size: var(--reading-small); line-height: 1.7; color: var(--text-secondary); margin-top: var(--space-md); }
.guide-reading { font-size: var(--reading-small); color: var(--text-secondary); }
.guide-counts { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-lg); margin-block: var(--space-sm); color: var(--text-dark); }
.guide-counts div { display: grid; align-content: start; }
.guide-counts strong { font-size: 56px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.guide-counts small { font-size: var(--reading-small); }
.guide-utility { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); align-items: center; }
.guide-utility button,.guide-utility a { text-decoration: underline; text-underline-offset: 4px; font-size: var(--reading-small); padding-block: var(--space-xs); min-height: 44px; }
#guide-condition-status button { display: block; margin-top: var(--space-xs); }
.condition-bar>p,.advanced-conditions>summary,.filters label { font-size: var(--reading-small); }
.explorer-layout { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--space-md); }
.explore-map-panel { padding: var(--space-md); }
.explore-map-panel .panel-heading { flex-wrap: wrap; gap: var(--space-sm); }
.explore-map-panel .panel-heading h3 { font-size: var(--reading-body); }
.map-tools { gap: 6px; }
.map-tools button,.map-tools #zoom-reset { min-height: 44px; font-size: var(--reading-small); min-width: 44px; padding: var(--space-xs) 12px; }
.map-viewport-note { font-size: var(--reading-small); line-height: 1.7; margin-block: var(--space-sm); color: var(--text-secondary); }
.map-legend,.map-help,.event-detail>span,.detail-grid,.event-detail a { font-size: var(--reading-small); }
.window-summary { gap: var(--space-md); }
.window-summary>div { border: 0; padding: var(--space-sm); background: var(--ground-panel); color: var(--text-dark); }
.window-summary>div::after { display: none; }
.window-summary>div>span:first-child { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--reading-small); }
.window-summary>div>span:first-child::before { content: ''; width: 12px; height: 12px; background: var(--signal-a); }
.window-summary>.b>span:first-child::before { background: var(--signal-b); }
.window-summary>div>span:nth-of-type(2),.window-summary small,.max-mag,.comparison-message>span { font-size: var(--reading-small); }
.window-summary strong { color: var(--text-dark); font-size: 64px; }
.comparison-message>p { font-size: 22px; }
.reading-context { margin-top: var(--space-sm); font-size: var(--reading-small); color: var(--text-secondary); }
.reading-context>p { margin-block: var(--space-xs); }
.reading-context .small-sample { color: var(--text-dark); background: var(--sample-ground); padding: var(--space-sm); }
.reading-context details p { font-size: var(--reading-small); }
.reading-context summary { cursor: pointer; }
.record-focus { color: var(--text-dark); font-size: var(--reading-small); padding-block: var(--space-xs); text-decoration: underline; text-underline-offset: 4px; }
.preset-group button,.comparison-panel>.text-link,.timeline-panel .panel-heading p,.window-inputs label,.window-inputs output,.window-inputs input,.window-inputs button,.scope-note { font-size: var(--reading-small); }
.timeline-panel { padding: var(--space-md); }
.window-inputs input { min-height: 44px; min-width: 64px; font-size: var(--reading-body); }
.sensitivity { margin-top: var(--space-xl); grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: var(--space-lg); }
.sensitivity p { font-size: var(--reading-body); }
.matrix { table-layout: fixed; width: 100%; }
.matrix th { font-size: var(--reading-small); }
.matrix td { padding: 5px; }
.matrix button { padding: 12px 5px; min-height: 82px; display: grid; align-content: center; gap: 3px; width: 100%; }
.matrix button strong { font-size: 18px; font-weight: 500; }
.matrix button span,.matrix button small { font-size: var(--reading-small); }
.matrix button small { font-weight: 500; }
.matrix button.active { outline: 2px solid var(--text-dark); outline-offset: -2px; }
.record-list>summary,.case-extension>summary,.evidence-method>summary { font-size: var(--reading-body); }
.evidence-card dl,.evidence-card>p,.evidence-map-wrap>p { font-size: var(--reading-small); }
#evidence-map { aspect-ratio: 960 / 660; }
.evidence-map-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-sm); color: var(--text-dark); font-size: var(--reading-small); }
.evidence-map-legend>span { display: inline-flex; align-items: center; gap: 6px; }
.evidence-map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.evidence-map-legend .a { background: var(--signal-a); }
.evidence-map-legend .b { background: var(--signal-b); }
.evidence-map-legend .overlap { background: var(--overlap); }
.evidence-map-legend .context { background: var(--muted); }
.observer-note { grid-column: 2; margin-block: var(--space-md); }
.observer-note label { display: block; font-size: var(--reading-body); margin-bottom: var(--space-xs); }
.observer-note textarea { display: block; width: 100%; resize: vertical; min-height: 110px; border: 1px solid var(--line); color: var(--text-dark); background: var(--ground-light); font: inherit; padding: var(--space-sm); }
.observer-note>div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.observer-note button { padding: 10px 14px; background: var(--ground-panel); font-size: var(--reading-small); }
.observer-note span { font-size: var(--reading-small); color: var(--text-secondary); flex: 1 1 220px; }
.export-actions button,.export-status { font-size: var(--reading-small); }
.china-method { grid-column: 1/-1; min-width: 0; }
.china-method .section-intro { margin-top: var(--space-lg); }
.china-method h3#catalog-title { font-size: var(--reading-title); }
.china-method .catalog-layout p { color: var(--text-subtle-light) !important; }
.china-method .catalog-sources>a { background: var(--ground-deep); color: var(--text-light); }
.china-method .catalog-sources>a span { color: var(--text-subtle-light); font-size: var(--reading-small); }
.data-sources .source-links,.site-footer p,.site-footer a { font-size: var(--reading-small); }
.learning-resources { padding-block: var(--space-section); color: var(--text-dark); background: var(--ground-light); display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: var(--space-xl); }
.learning-resources>div>p { margin-top: var(--space-md); color: var(--text-secondary); }
.resource-links { display: grid; }
.resource-links a { padding-block: var(--space-md); }
.resource-links strong { font-weight: 500; display: block; font-size: var(--reading-lead); }
.resource-links span { font-size: var(--reading-small); color: var(--text-secondary); }
.study-embed .site-header,.study-embed .narrative-world,.study-embed .closing,.study-embed .data-sources,.study-embed .learning-resources,.study-embed .site-footer { display: none; }
.study-embed .explore { padding-top: var(--space-md); }
.study-embed .guided-lab { margin-top: 0; }
.closing p,.site-footer p span { font-size: var(--reading-small); }
@media (min-width: 1800px) {
  :root { --gutter: max(64px, calc((100% - 1392px)/2)); }
  .hero,.story,.explore,.evidence,.data-sources,.learning-resources,.site-footer { padding-inline: max(var(--space-xl),calc((100% - 1392px)/2)); max-width: none; }
}
@media (max-width: 1000px) {
  .guided-lab { padding: var(--space-md); }
  .guide-work { gap: var(--space-lg); }
  .explorer-layout { grid-template-columns: minmax(0,1fr); }
  .explore-map-panel .map-shell svg { max-height: 520px; }
  .comparison-panel { display: block; }
  .sensitivity { grid-template-columns: minmax(0,1fr); }
  .learning-resources { gap: var(--space-lg); }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 116px; }
  .site-header { height: auto; min-height: 104px; padding-block: var(--space-xs); gap: 0 var(--space-sm); }
  .site-header nav { gap: var(--space-xs); width: 100%; justify-content: space-between; }
  .site-header nav a { font-size: var(--reading-small); }
  .hero-copy { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .hero h1 { font-size: 58px; }
  .hero-statement { font-size: 26px; line-height: 1.6; }
  .hero-statement br { display: none; }
  .hero-description { display: block; font-size: var(--reading-body); margin-block: var(--space-sm) var(--space-md); }
  .hero-source { display: block; font-size: var(--reading-small); margin-top: var(--space-sm); }
  .hero-date { margin-block: var(--space-sm); }
  .hero-actions { gap: var(--space-xs); }
  .scene-credit { left: 20px; right: 20px; font-size: var(--reading-small); }
  .scene-console { display: grid; grid-template-columns: minmax(0,1fr) 52px; gap: var(--space-xs); padding: var(--space-sm); }
  .scene-now { grid-column: 1/-1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
  .scene-now strong { font-size: 28px; }
  .scene-time { grid-column: 1; }
  .scene-weeks { gap: 4px; }
  .scene-weeks button { padding: 4px 2px; letter-spacing: 0; }
  .scene-weeks button span { display: block; }
  .scene-time label { font-size: var(--reading-small); }
  .scene-play-note { grid-column: 1/-1; }
  .world-stage { height: 650px; }
  .guided-lab { padding: var(--space-md) var(--space-sm); margin-block: var(--space-md) var(--space-lg); scroll-margin-top: 0; }
  .guide-intro,.guide-work { grid-template-columns: minmax(0,1fr); gap: var(--space-md); }
  .guide-intro h3 { font-size: 27px; }
  .guide-progress { gap: 6px; margin-block: var(--space-md); font-size: var(--reading-small); }
  .guide-progress li { list-style: none; font-size: var(--reading-small); }
  .guide-counts strong { font-size: 48px; }
  .guide-choices button,.guide-actions>.button { width: 100%; }
  .explorer-layout { display: flex; flex-direction: column; gap: var(--space-sm); }
  .comparison-panel { display: contents; }
  .comparison-panel>h3 { order: 0; margin-top: var(--space-md); }
  .window-summary { order: 1; width: 100%; }
  .comparison-message { order: 2; margin-top: 0; }
  .max-mag { order: 3; margin-top: 0; }
  .record-focus { order: 4; align-self: start; }
  .reading-context { order: 5; margin: 0; }
  .explore-map-panel { order: 6; padding: var(--space-sm); margin-block: var(--space-sm); }
  .preset-group { order: 7; }
  .timeline-panel { order: 8; padding: var(--space-sm); }
  .comparison-panel>.text-link { order: 9; align-self: start; }
  .map-tools { flex-wrap: wrap; }
  .map-help,.map-legend,.map-viewport-note { font-size: var(--reading-small); }
  .window-summary strong { font-size: 54px; }
  .window-summary>div { padding: var(--space-sm); }
  .matrix th { font-size: 13px; padding: 4px 2px; }
  .matrix td { padding: 4px 2px; }
  .matrix button { padding: var(--space-xs) 2px; min-height: 90px; }
  .matrix button strong { font-size: 16px; }
  .matrix button span,.matrix button small { font-size: 13px; }
  .sensitivity { gap: var(--space-md); margin-top: var(--space-lg); }
  .evidence-card { display: block; }
  .observer-note { margin-block: var(--space-md); }
  .evidence-card dl { font-size: var(--reading-small); }
  #evidence-map .place-labels text,#lab-map .place-labels text { font-size: 44px; }
  #evidence-map .anchor text,#lab-map .anchor text { font-size: 42px; }
  #evidence-map .scale text,#lab-map .scale text { font-size: 42px; }
  #evidence-map svg>text,#lab-map svg>text { font-size: 42px; }
  #evidence-map svg>text:nth-of-type(2),#lab-map svg>text:nth-of-type(2) { text-anchor: end; }
  #weekly-chart svg text { font-size: 32px; }
  .learning-resources { grid-template-columns: minmax(0,1fr); padding-block: var(--space-xl); gap: var(--space-md); }
  .study-embed .guided-lab { scroll-margin-top: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .guided-lab,.observer-note,.learning-resources { display: none; } }