*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); }
a { color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0 0 1rem; font-family: var(--font-heading); line-height: 1.25; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
.rail-wrap { width: min(100% - clamp(36px, 12vw, 152px), 1240px); margin-inline: auto; }
.rail-header {
  min-height: var(--header-height); position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem clamp(18px, 6vw, 76px); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.rail-header a { text-decoration: none; }
.rail-brand { font-weight: 700; white-space: nowrap; }
.rail-header nav { display: flex; gap: clamp(14px, 3vw, 44px); font: 700 18px var(--font-heading); }
.rail-header a:hover { text-decoration: underline; text-underline-offset: .28em; }
.rail-kicker { color: var(--color-red-dark); font-size: .84rem; font-weight: 700; letter-spacing: .13em; margin-bottom: 1rem; }
.rail-chapter-label { font-size: 25px; }
.rail-section { padding-block: var(--chapter-space); }
.rail-intro, .corridor-layout {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(26px, 6vw, 90px);
}
.rail-intro p:not(.rail-kicker), .section-lead { max-width: 45rem; }
.section-lead { margin-bottom: 2rem; }
.rail-figure { margin: 0; min-width: 0; }
.rail-figure figcaption, .rail-caption { font-size: .81rem; color: #5d594f; line-height: 1.65; margin: .75rem 0 0; }
.rail-map { width: 100%; background: #e8e5dd; }
.historic-map { height: clamp(280px, 36vw, 430px); border: 1px solid var(--color-border); }
.network-band { background: #eee5d6; }
.rail-atlas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 29%);
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-panel);
}
.atlas-map-panel { min-width: 0; }
.map-shell { position: relative; }
.national-map { height: clamp(380px, 47vw, 620px); }
.rail-north { position: absolute; width: 36px; top: 12px; right: 12px; pointer-events: none; }
.atlas-note { padding: clamp(16px, 3vw, 36px); border-left: 1px solid var(--color-border); }
.active-year { margin: 0 0 .35em; color: var(--color-red-dark); font: 700 clamp(46px, 7vw, 86px)/1 var(--font-numeric); }
.rail-switch { display: flex; flex-wrap: wrap; background: #faf6ef; padding: 8px; gap: 6px; border-bottom: 1px solid var(--color-border); }
.rail-switch button, .focus-routes button {
  min-height: 44px; color: #4f3330; background: #eee7dc; border: 1px solid transparent; border-radius: 2px;
  padding: 5px 13px; font-weight: 700; font-size: .88rem;
}
.rail-switch button[aria-pressed="true"], .focus-routes button[aria-pressed="true"] { color: white; background: #842f2b; }
.rail-switch button:not([aria-pressed="true"]):hover, .focus-routes button:not([aria-pressed="true"]):hover { border-color: #842f2b; }
.rail-legend { min-height: 45px; padding: 9px 13px; color: #51443c; font-size: .82rem; }
.swatch { display: inline-block; vertical-align: middle; width: 22px; border-top: 3px solid; margin-right: 6px; }
.swatch.old { color: #a88177; }
.swatch.new { color: #9a3028; }
.swatch + span, .rail-legend .swatch:not(:first-child), figcaption .swatch:not(:first-child) { margin-left: .9rem; }
.focus-routes { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.1rem 0; }
.selected-route { border-top: 1px solid var(--color-border); padding-top: .85rem; font-size: .86rem; }
.corridor-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); }
.corridor-map { height: clamp(300px, 35vw, 460px); border: 1px solid var(--color-border); }
.corridor-note { border-left: 3px solid #9a3028; padding-left: 1.2rem; }
.rail-transition { max-width: 45rem; border-left: 3px solid var(--color-red); padding-left: 1rem; margin: 2rem 0 0; }
.rail-transition a { display: inline-block; color: var(--color-red-dark); font-weight: 700; text-underline-offset: .25em; }
.comparison-legend > span { margin-right: 1.1rem; }
.swatch.baocheng { color: #264b62; }
.swatch.xicheng { color: #912b29; }
.case-band { background: #eae7da; }
.case-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .85fr); gap: clamp(20px, 5vw, 70px); align-items: start; }
.case-figure { position: sticky; top: calc(var(--header-height) + 15px); background: var(--color-surface); border: 1px solid var(--color-border); }
.case-figure figcaption { margin: 0; padding: 9px 12px; }
.case-map { height: min(55vh, 460px); min-height: 280px; }
.case-step { padding: 1.4rem 0; min-height: min(56vh, 430px); border-top: 1px solid #c6beaf; }
.case-step:last-child { min-height: min(60vh, 460px); }
.case-step h3 { margin-bottom: 1.15rem; }
.trip-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1rem 0; }
.trip-times div { background: var(--color-surface); border-top: 3px solid #a88177; padding: .75rem .8rem; }
.trip-times div:last-child { border-color: #9a3028; }
.trip-times span, .trip-times strong { display: block; }
.trip-times span { font-size: .8rem; color: #5d594f; }
.trip-times strong { color: var(--color-red-dark); font-size: clamp(18px, 2.25vw, 34px); }
.grade-diagram { padding: 1rem; background: var(--color-surface); }
.grade-slope { height: 65px; background: #a34334; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.grade-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .2rem .75rem; font-size: .84rem; }
.station-dates { margin: 0; }
.station-dates div { display: grid; grid-template-columns: 4em 1fr; gap: .8rem; border-bottom: 1px solid #c6beaf; padding: .45rem 0; }
.station-dates dt { color: var(--color-red-dark); font-weight: 700; }
.station-dates dd { margin: 0; }
.case-photo { margin: 1.35rem 0 0; }
.case-photo img { display: block; width: 100%; height: auto; }
.case-photo figcaption { margin-top: .5rem; font-size: .8rem; color: #5d594f; }
.rail-archive { margin: 1.35rem 0 0; }
.rail-archive img { display: block; width: 100%; height: auto; }
.rail-archive-ticket { max-width: 360px; }
.rail-archive figcaption { color: #5d594f; margin-top: .5rem; font-size: .81rem; }
.archive-link { color: var(--color-red-dark); font-weight: 700; text-underline-offset: .25em; }
.elevation-legend { border-top: 1px solid var(--color-border); padding: .4rem .65rem .2rem; font-size: .72rem; }
.elevation-legend ul { display: flex; flex-wrap: wrap; gap: .15rem .62rem; padding: 0; margin: .15rem 0 0; list-style: none; }
.elevation-legend li { display: flex; gap: .25rem; align-items: center; white-space: nowrap; }
.elevation-legend li span { width: 1rem; height: .7rem; border: 1px solid #55483445; }
.terrain-profile { margin: 1.2rem 0 1.4rem; padding: .8rem .55rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.terrain-profile h4, .terrain-profile figcaption, .terrain-profile > p { margin: .35rem .5rem; }
.terrain-profile figcaption { color: var(--color-red-dark); font-size: .85rem; min-height: 1.4em; }
#terrain-chart { display: block; width: 100%; height: 183px; cursor: crosshair; }
.map-error { display: grid; place-items: center; padding: 1rem; color: #642b24; }
@media (max-width: 820px) {
  .rail-intro, .rail-atlas, .corridor-layout { grid-template-columns: 1fr; gap: 1rem; }
  .rail-atlas { gap: 0; }
  .atlas-note { border-left: 0; border-top: 1px solid var(--color-border); }
  .case-layout { grid-template-columns: 1fr; gap: 1rem; }
  .case-figure { top: calc(var(--header-height) + 6px); z-index: 1; }
  .case-map { height: clamp(150px, 27svh, 255px); min-height: 0; }
  .case-step { min-height: 48svh; }
  .case-step, #profile-figure, #terrain-chart { scroll-margin-top: calc(clamp(150px, 27svh, 255px) + 120px); }
}
@media (max-width: 540px) {
  :root { --header-height: 84px; }
  .rail-header { flex-wrap: wrap; align-content: center; gap: 4px; }
  .rail-header nav { width: 100%; justify-content: space-between; font-size: 16px; }
  .rail-header nav a { padding-block: 4px; }
  .rail-switch { gap: 4px; padding: 5px; }
  .rail-switch button { padding-inline: 8px; font-size: .8rem; }
  .national-map { height: 340px; }
  .case-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-switch button { padding-inline: 3px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }