:root {
  --aged-paper: #f4e9d8;
  --parchment: #efe2cc;
  --charcoal: #25251f;
  --ink: #171914;
  --forest: #355e3b;
  --gold: #c9a66b;
  --rust: #8c4f36;
  --night: #111612;
  --muted: #746a58;
  --paper-line: rgba(65, 50, 31, 0.2);
  --dark-line: rgba(201, 166, 107, 0.25);
  --map-scale: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input { font: inherit; }
a, button, input { outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.expedition-body {
  min-width: 320px;
  color: var(--aged-paper);
  background: #090c0a;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.expedition-body::after {
  content: "";
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background: url("/static/texture/paper-grain.webp") repeat;
  background-size: 480px;
  mix-blend-mode: multiply;
}
.expedition-shell {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 64fr) minmax(430px, 36fr);
  background: var(--night);
}
.archive-stage { min-width: 0; background: #101512; border-right: 1px solid rgba(201, 166, 107, 0.35); }

/* Left-side global header */
.archive-header {
  position: relative;
  z-index: 40;
  height: 58px;
  padding: 0 2.1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  background: rgba(14, 18, 15, 0.97);
  border-bottom: 1px solid var(--dark-line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.archive-brand {
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--parchment);
  text-decoration: none;
}
.archive-mark { color: var(--gold); font: 2.15rem Georgia, serif; }
.archive-brand strong { display: block; font: 500 1.08rem Merriweather, Georgia, serif; letter-spacing: 0.035em; white-space: nowrap; }
.archive-brand small { display: block; margin-top: 0.1rem; color: #a99a82; font: italic 0.72rem "Cormorant Garamond", Georgia, serif; }
.archive-header nav { flex: 1; display: flex; justify-content: center; gap: clamp(0.75rem, 1.4vw, 1.55rem); }
.archive-header nav a {
  padding: 1.25rem 0;
  color: #d7cbb7;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.archive-header nav a:hover, .archive-header nav a.active { color: var(--gold); border-bottom: 1px solid var(--gold); }
.preview-chip { display: none; }

/* Art-directed hero and map */
.map-hero { position: relative; height: 452px; overflow: hidden; isolation: isolate; background: #18201a; }
.map-canvas {
  position: absolute;
  z-index: 0;
  inset: -2%;
  transform: scale(var(--map-scale));
  transform-origin: 61% 48%;
  transition: transform 300ms ease;
  background: url("/static/maps/archival-us-map-v2.webp") 52% center / cover no-repeat;
}
.hero-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244, 233, 216, 0.05) 0 30%, transparent 56%, rgba(8, 12, 9, 0.28)),
    radial-gradient(ellipse at center, transparent 35%, rgba(5, 8, 6, 0.48) 100%);
}
.hero-copy {
  position: relative;
  z-index: 8;
  width: 48%;
  min-width: 420px;
  height: 100%;
  padding: 3.15rem 1.8rem 1.6rem 4.2rem;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 250, 240, 0.3);
}
.eyebrow { margin: 0 0 0.6rem; color: var(--rust); font: 700 0.66rem "Cormorant Garamond", Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-copy h1 { max-width: 13ch; margin: 0; font: 500 clamp(2.1rem, 2.9vw, 3rem)/1.02 Merriweather, Georgia, serif; letter-spacing: -0.035em; }
.hero-copy > p:not(.eyebrow, .search-notice) { max-width: 33rem; margin: 1rem 0 0; font: 1rem/1.5 "Cormorant Garamond", Georgia, serif; }
.hero-search { width: min(100%, 330px); height: 42px; margin-top: 1.2rem; display: flex; background: rgba(255, 250, 240, 0.9); border: 1px solid rgba(71, 53, 32, 0.35); border-radius: 3px; box-shadow: 0 7px 20px rgba(45, 31, 17, 0.2); }
.hero-search input { min-width: 0; flex: 1; padding: 0.75rem 0.9rem; color: var(--ink); background: transparent; border: 0; font-size: 0.76rem; }
.hero-search button { width: 42px; color: var(--ink); background: transparent; border: 0; cursor: pointer; font-size: 1.15rem; }
.search-notice { min-height: 1rem; margin: 0.35rem 0 0; color: var(--rust); font-size: 0.61rem; font-weight: 700; }
.hero-actions { display: flex; gap: 0.4rem; flex-wrap: nowrap; }
.action { min-width: 0; min-height: 34px; padding: 0.67rem 0.72rem; color: white; border: 0; border-radius: 2px; cursor: pointer; font-size: 0.53rem; font-weight: 800; letter-spacing: 0.05em; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.action:hover { filter: brightness(1.12); }
.forest { background: var(--forest); }
.charcoal { background: var(--charcoal); }
.rust { background: var(--rust); }

.map-points { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.map-marker {
  position: absolute;
  width: 11px;
  height: 11px;
  padding: 0;
  pointer-events: auto;
  cursor: help;
  border: 1.5px solid #f8ecd7;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(17, 22, 18, 0.7);
  transition: opacity 180ms ease, transform 180ms ease;
}
.map-marker:hover, .map-marker:focus-visible { z-index: 30; transform: scale(1.25); }
.map-marker[hidden] { display: none; }
.marker-rust { background: #c35f24; }
.marker-gold { background: #d6a327; }
.marker-forest { background: #709985; }
.marker-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 150px;
  padding: 0.65rem;
  display: none;
  color: var(--ink);
  background: rgba(244, 233, 216, 0.97);
  border: 1px solid var(--gold);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom center;
  text-align: left;
}
.marker-card b, .marker-card small { display: block; }
.marker-card b { color: var(--rust); font: 700 0.65rem Merriweather, Georgia, serif; }
.marker-card small { margin-top: 0.3rem; font-size: 0.56rem; line-height: 1.4; }
.map-marker:hover .marker-card, .map-marker:focus-visible .marker-card { display: block; }
.p1 { left: 47%; top: 30%; }.p2 { left: 53%; top: 42%; }.p3 { left: 59%; top: 28%; }.p4 { left: 63%; top: 53%; }
.p5 { left: 67%; top: 35%; }.p6 { left: 71%; top: 61%; }.p7 { left: 75%; top: 26%; }.p8 { left: 79%; top: 43%; }
.p9 { left: 83%; top: 56%; }.p10 { left: 87%; top: 31%; }.p11 { left: 91%; top: 46%; }.p12 { left: 72%; top: 18%; }
.p13 { left: 49%; top: 61%; }.p14 { left: 55%; top: 20%; }.p15 { left: 58%; top: 68%; }.p16 { left: 62%; top: 23%; }
.p17 { left: 66%; top: 72%; }.p18 { left: 70%; top: 46%; }.p19 { left: 76%; top: 76%; }.p20 { left: 81%; top: 19%; }
.p21 { left: 85%; top: 69%; }.p22 { left: 89%; top: 59%; }

.featured-map-card {
  position: absolute;
  z-index: 10;
  left: 61%;
  top: 45%;
  width: 165px;
  padding: 0.85rem;
  color: var(--ink);
  background: rgba(244, 233, 216, 0.96);
  border: 1px solid var(--gold);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}
.map-card-label { color: var(--rust); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.featured-map-card h2 { margin: 0.35rem 0 0.6rem; font: 600 0.95rem Merriweather, Georgia, serif; }
.featured-map-card dl { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem; margin: 0; font-size: 0.55rem; }
.featured-map-card dt { font-weight: 750; }.featured-map-card dd { margin: 0; }
.featured-map-card a { margin-top: 0.7rem; padding: 0.55rem; display: block; color: white; background: var(--rust); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em; text-align: center; text-decoration: none; text-transform: uppercase; }
.featured-map-card small { display: block; margin-top: 0.45rem; color: var(--muted); font-size: 0.49rem; line-height: 1.35; }
.map-layers { position: absolute; z-index: 9; top: 114px; right: 0.55rem; width: 148px; padding: 0.75rem; display: grid; gap: 0.45rem; color: #ebdfcb; background: rgba(14, 19, 15, 0.93); border: 1px solid var(--dark-line); box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 0.55rem; }
.map-layers div { padding-bottom: 0.45rem; display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--dark-line); text-transform: uppercase; }.map-layers div strong { color: var(--gold); }.map-layers div small { color: #8f846f; font-size: 0.45rem; }
.map-layers label { display: flex; align-items: center; gap: 0.38rem; }.map-layers input { accent-color: var(--gold); }
.map-controls { position: absolute; z-index: 12; right: 0.65rem; bottom: 0.8rem; display: grid; gap: 2px; }
.map-controls button { width: 28px; height: 28px; color: var(--ink); background: var(--parchment); border: 1px solid rgba(30, 27, 21, 0.4); cursor: pointer; font-weight: 800; }
.map-disclaimer { position: absolute; z-index: 7; right: 3.5rem; bottom: 0.55rem; margin: 0; padding: 0.32rem 0.48rem; color: #d8ccb7; background: rgba(14, 18, 15, 0.75); font-size: 0.48rem; letter-spacing: 0.04em; }

/* Discovery row */
.discovery-story-row { min-height: 290px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(245px, 0.95fr); background: #111713; border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); }
.recent-panel, .happened-panel { min-width: 0; padding: 0.8rem 1.4rem; }
.happened-panel { border-left: 1px solid var(--dark-line); }
.section-bar { min-height: 27px; display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.section-bar h2 { margin: 0; color: #eadcc4; font: 500 0.82rem Merriweather, Georgia, serif; letter-spacing: 0.04em; text-transform: uppercase; }
.section-bar span { color: var(--gold); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; }
.discovery-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.discovery-item { min-width: 0; overflow: hidden; background: #151b17; border: 1px solid rgba(201, 166, 107, 0.28); border-radius: 3px; }
.discovery-image { position: relative; height: 102px; background: url("/static/archive/discovery-strip-v1.webp") 0 center / 400% 100% no-repeat; }
.sprite-2 { background-position: 33.333% center; }.sprite-3 { background-position: 66.666% center; }.sprite-4 { background-position: 100% center; }
.discovery-image span { position: absolute; top: 0.4rem; left: 0.4rem; padding: 0.22rem 0.35rem; color: white; background: var(--rust); font-size: 0.48rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.discovery-body { min-height: 120px; padding: 0.65rem; display: flex; flex-direction: column; }
.discovery-body p { margin: 0; color: var(--gold); font-size: 0.46rem; letter-spacing: 0.08em; text-transform: uppercase; }
.discovery-body h3 { margin: 0.45rem 0; color: #f0e4cf; font: 500 0.76rem/1.25 Merriweather, Georgia, serif; }
.discovery-body b { color: #cbc0ac; font-size: 0.56rem; font-weight: 500; line-height: 1.35; }
.discovery-body small { margin-top: auto; padding-top: 0.45rem; color: #827a6b; font-size: 0.5rem; line-height: 1.35; }
.mini-compare { --reveal: 50%; position: relative; height: 145px; overflow: hidden; border: 1px solid rgba(201,166,107,.35); }
.mini-current, .mini-then { position: absolute; inset: 0; padding: 0.55rem; background-size: cover; background-position: center; }
.mini-current { background: linear-gradient(25deg, transparent 45%, rgba(80, 80, 74, 0.75) 46% 50%, transparent 51%), repeating-linear-gradient(90deg, #596a45 0 46px, #7a825a 47px 98px); }
.mini-then { clip-path: inset(0 0 0 var(--reveal)); background-image: linear-gradient(rgba(20, 15, 10, 0.12), rgba(20, 15, 10, 0.12)), url("/static/archive/fictional-oil-town-v1.webp"); }
.mini-current span, .mini-then span { padding: 0.3rem 0.4rem; color: white; background: rgba(13, 17, 14, 0.75); font-size: 0.49rem; font-weight: 800; text-transform: uppercase; }
.mini-then { text-align: right; }.mini-rule { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--reveal); width: 2px; background: white; }
.mini-compare input { position: absolute; z-index: 4; left: 0.5rem; right: 0.5rem; bottom: 0.45rem; width: calc(100% - 1rem); accent-color: var(--gold); }
.happened-panel > p { margin: 0.55rem 0 0.2rem; color: #c0b6a4; font-size: 0.58rem; line-height: 1.4; }.happened-panel > small { color: #827866; font-size: 0.48rem; }.happened-panel > a { float: right; margin-top: 0.45rem; padding: 0.5rem 0.75rem; color: white; background: var(--forest); font-size: 0.5rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }

/* Pathways and memorial */
.pathways { min-height: 142px; display: grid; grid-template-columns: repeat(3, 1fr); background: linear-gradient(110deg, #172019, #111512); border-bottom: 1px solid var(--dark-line); }
.pathways article { padding: 1.15rem 1.6rem; display: flex; gap: 0.85rem; border-right: 1px solid var(--dark-line); }.pathways article:last-child { border-right: 0; }
.pathways article > span { color: var(--gold); font: 2rem Georgia, serif; }
.pathways h2 { margin: 0; color: #e7d7bd; font: 500 0.78rem Merriweather, Georgia, serif; text-transform: uppercase; }.pathways p { margin: 0.45rem 0; color: #b8ad9a; font-size: 0.59rem; line-height: 1.45; }.pathways a { color: var(--gold); font-size: 0.51rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.memorial { min-height: 82px; padding: 1.35rem 2rem; display: grid; place-content: center; text-align: center; background: linear-gradient(rgba(11, 15, 12, 0.82), rgba(11, 15, 12, 0.88)), url("/static/archive/fictional-oil-town-v1.webp") center 58% / cover; }
.memorial blockquote { margin: 0; color: #d9c4a3; font: italic 1.08rem "Cormorant Garamond", Georgia, serif; }.memorial small { margin-top: 0.4rem; color: #817765; font-size: 0.47rem; text-transform: uppercase; }

/* Persistent featured-town rail */
.featured-rail { position: sticky; top: 0; min-width: 0; height: 100vh; overflow-y: auto; color: var(--ink); background: var(--aged-paper); scrollbar-color: var(--gold) var(--parchment); }
.featured-rail::before { content: ""; position: fixed; inset: 0 0 0 64%; pointer-events: none; opacity: 0.1; background: url("/static/texture/paper-grain.webp") repeat; background-size: 420px; mix-blend-mode: multiply; }
.rail-utility { position: relative; z-index: 2; height: 42px; padding: 0 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #b9ad99; background: #101411; border-bottom: 1px solid var(--dark-line); font-size: 0.52rem; }
.rail-utility a { padding: 0.4rem 0.55rem; color: var(--gold); border: 1px solid rgba(201,166,107,.35); text-decoration: none; text-transform: uppercase; }
.rail-town-hero { position: relative; min-height: 176px; display: flex; align-items: end; background: linear-gradient(0deg, rgba(11, 14, 11, 0.84), rgba(11, 14, 11, 0.08)), url("/static/archive/fictional-oil-town-v1.webp") center 55% / cover; }
.rail-town-hero > div { width: 100%; padding: 1.1rem 1.6rem; color: #fff1d7; }.rail-town-hero span { color: var(--gold); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }.rail-town-hero h2 { margin: 0.25rem 0; font: 500 clamp(1.55rem, 2.25vw, 2.25rem) Merriweather, Georgia, serif; }.rail-town-hero p { margin: 0; color: #d2c0a2; font: 0.72rem "Cormorant Garamond", Georgia, serif; }.rail-town-hero small { position: absolute; right: 0.7rem; bottom: 0.45rem; color: #b7aa94; font-size: 0.43rem; text-transform: uppercase; }
.rail-tabs { position: sticky; z-index: 20; top: 0; min-height: 40px; padding: 0 1rem; display: flex; align-items: stretch; overflow-x: auto; color: #ded0ba; background: #111612; border-bottom: 1px solid var(--dark-line); }
.rail-tabs a { padding: 0.8rem 0.7rem 0.65rem; color: inherit; border-bottom: 2px solid transparent; font-size: 0.49rem; font-weight: 800; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }.rail-tabs a:hover, .rail-tabs a.active { color: var(--gold); border-bottom-color: var(--gold); }
.rail-overview { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; border-bottom: 1px solid var(--paper-line); }
.rail-facts { margin: 0; padding: 1.1rem 1.2rem; border-right: 1px solid var(--paper-line); background: rgba(239, 226, 204, 0.55); }
.rail-facts div { padding: 0.32rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; border-bottom: 1px solid rgba(67,55,38,.1); font-size: 0.58rem; }.rail-facts dt { font-weight: 800; }.rail-facts dd { margin: 0; }
.rail-summary { padding: 1.1rem 1.25rem; }.rail-kicker { margin: 0; color: var(--rust); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }.rail-summary h3 { margin: 0.45rem 0; font: 500 0.95rem/1.25 Merriweather, Georgia, serif; }.rail-summary > p:not(.rail-kicker) { margin: 0; color: #4b453a; font: 0.72rem/1.55 "Cormorant Garamond", Georgia, serif; }.rail-summary small { display: block; margin-top: 0.55rem; color: var(--rust); font-size: 0.48rem; font-weight: 800; }
.rail-module { position: relative; padding: 1.05rem 1.35rem; border-bottom: 1px solid var(--paper-line); box-shadow: inset 0 0 30px rgba(79, 58, 32, 0.025); }.rail-module > header { margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.rail-module > header h2 { margin: 0; font: 500 0.88rem Merriweather, Georgia, serif; text-transform: uppercase; }.rail-module > header span, .rail-module > header a { color: var(--rust); font-size: 0.47rem; font-weight: 800; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; }
.history-callout { padding: 0.7rem 0.85rem; background: rgba(239, 226, 204, 0.7); border-left: 3px solid var(--forest); }.history-callout strong { color: var(--forest); font-size: 0.65rem; }.history-callout p { margin: 0.25rem 0 0; color: #524b40; font-size: 0.6rem; line-height: 1.45; }
.rail-timeline { position: relative; margin: 0.9rem 0 0; padding: 0.75rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border-top: 1px solid var(--gold); }.rail-timeline li { position: relative; padding: 0.35rem; text-align: center; }.rail-timeline li::before { content: ""; position: absolute; top: -1.02rem; left: calc(50% - 4px); width: 8px; height: 8px; background: var(--ink); border: 2px solid var(--aged-paper); border-radius: 50%; }.rail-timeline b, .rail-timeline small { display: block; }.rail-timeline b { font-size: 0.55rem; }.rail-timeline small { margin-top: 0.25rem; color: var(--muted); font-size: 0.47rem; }
.rail-records { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; }.rail-records span { min-height: 62px; padding: 0.55rem 0.25rem; display: grid; place-content: center; gap: 0.22rem; text-align: center; background: rgba(239,226,204,.72); border: 1px solid rgba(67,55,38,.12); font-size: 1rem; }.rail-records b { font-size: 0.47rem; }
.rail-geo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }.rail-geo article { min-width: 0; }.rail-geo article > div { height: 100px; border: 1px solid rgba(67,55,38,.18); }.geo-historic { background: url("/static/maps/vintage-map-overlay.webp") center / cover; filter: sepia(0.45); }.geo-modern { background: linear-gradient(25deg, transparent 44%, #777 45% 48%, transparent 49%), repeating-linear-gradient(90deg, #5c7048 0 28px, #74845d 29px 62px); }.geo-certainty { display: grid; place-content: center; background: radial-gradient(circle, var(--aged-paper) 0 31%, transparent 32%), conic-gradient(var(--gold) 0 35%, rgba(113,104,86,.22) 35% 100%); border-radius: 50%; }.geo-certainty strong { font: 700 0.7rem Merriweather, Georgia, serif; }.rail-geo b, .rail-geo small { display: block; }.rail-geo b { margin-top: 0.4rem; font-size: 0.55rem; }.rail-geo small { margin-top: 0.18rem; color: var(--muted); font-size: 0.46rem; line-height: 1.3; }
.rail-discovery > div { display: flex; gap: 0.45rem; flex-wrap: wrap; }.rail-identity { padding: 0.55rem 0.7rem; display: grid; gap: 0.18rem; background: rgba(239,226,204,.7); border-left: 3px solid var(--gold); }.rail-identity.verified { border-left-color: var(--forest); }.rail-identity b { font: 600 0.66rem Merriweather, Georgia, serif; }.rail-identity small { color: var(--muted); font-size: 0.47rem; }.rail-cta { margin-top: 0.8rem; padding: 0.7rem; display: block; color: white; background: var(--rust); font-size: 0.55rem; font-weight: 800; text-align: center; text-decoration: none; text-transform: uppercase; }

@media (max-width: 1250px) {
  .archive-header { padding-inline: 1.2rem; gap: 1rem; }
  .archive-header nav { gap: 0.75rem; }
  .archive-header nav a:nth-last-child(-n+2) { display: none; }
  .hero-copy { min-width: 390px; padding-left: 2.4rem; }
  .featured-map-card { left: 58%; }
  .map-layers { width: 135px; }
}

@media (max-width: 1020px) {
  .expedition-shell { grid-template-columns: 1fr; }
  .archive-stage { border-right: 0; }
  .featured-rail { position: relative; height: auto; overflow: visible; }
  .featured-rail::before { position: absolute; inset: 0; }
  .archive-header nav { display: none; }
  .preview-chip { margin-left: auto; }
  .rail-tabs { top: 0; }
}

@media (max-width: 720px) {
  .archive-header { height: 64px; }
  .map-hero { height: 680px; }
  .map-canvas { background-position: 66% center; }
  .hero-copy { width: 100%; min-width: 0; height: auto; padding: 2.6rem 1.2rem; background: linear-gradient(90deg, rgba(244,233,216,.92), rgba(244,233,216,.68) 72%, transparent); }
  .hero-copy h1 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
  .featured-map-card { left: 1rem; right: auto; top: auto; bottom: 1.2rem; width: 180px; }
  .map-layers { top: auto; right: 0.8rem; bottom: 1.2rem; }
  .map-controls, .map-disclaimer { display: none; }
  .discovery-story-row { grid-template-columns: 1fr; }
  .happened-panel { border-left: 0; border-top: 1px solid var(--dark-line); }
  .discovery-cards { grid-template-columns: repeat(2, 1fr); }
  .pathways { grid-template-columns: 1fr; }
  .pathways article { border-right: 0; border-bottom: 1px solid var(--dark-line); }
  .rail-overview { grid-template-columns: 1fr; }
  .rail-facts { border-right: 0; border-bottom: 1px solid var(--paper-line); }
  .rail-records { grid-template-columns: repeat(3, 1fr); }
  .rail-geo { grid-template-columns: 1fr; }
  .rail-geo article > div { height: 170px; }
}

@media (max-width: 440px) {
  .archive-header { padding-inline: 0.8rem; }
  .archive-brand { min-width: 0; }
  .preview-chip { display: none; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-actions .action { padding-inline: 0.35rem; font-size: 0.49rem; }
  .hero-actions .action:last-child { grid-column: 1 / -1; text-align: center; }
  .map-layers { display: none; }
  .featured-map-card { left: 1rem; right: 1rem; width: auto; }
  .discovery-cards { grid-template-columns: 1fr; }
  .rail-utility span { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-timeline { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--gold); }
  .rail-timeline li { text-align: left; padding-left: 1rem; }.rail-timeline li::before { top: 0.55rem; left: -0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}