[hidden] { display: none !important; }

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/canalul-panama/assets/fonts/IBMPlexSans-latin.056e4e2459f5.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/canalul-panama/assets/fonts/IBMPlexSans-latin-ext.ae1d854fefa1.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  src: url("/canalul-panama/assets/fonts/fraunces-normal-latin.48282a415ec2.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/canalul-panama/assets/fonts/fraunces-normal-latin-ext.f120089b9440.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --ink: #10262E;
  --ink-soft: #29414A;
  --water: #4A9C98;
  --water-deep: #27716F;
  --brass: #D8A44D;
  --earth: #8C6046;
  --paper: #F1F2EB;
  --paper-raised: #F8F8F3;
  --text: #182A30;
  --text-muted: #52666A;
  --line: #A6B6B2;
  --line-soft: #CBD4D0;
  --focus: #9A5C1D;
  --hero: #10262E;
  --hero-text: #F1F2EB;
  --hero-muted: #B8C9C4;
  --topbar-h: 4rem;
  --reading-line: 34vh;
  --content-width: 76rem;
  --copy-width: 43rem;
  --shadow: 0 18px 55px rgba(16, 38, 46, .12);
  font-family: "IBM Plex Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #10262E;
  --paper-raised: #19343C;
  --text: #EAF0E9;
  --text-muted: #B5C7C2;
  --line: #536F73;
  --line-soft: #34535A;
  --focus: #F1BD67;
  --hero: #0A1B20;
  --hero-text: #F1F2EB;
  --hero-muted: #B8C9C4;
  --shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 1rem); }
body { margin: 0; background: var(--paper); color: var(--text); line-height: 1.64; }
button, a { font: inherit; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .07em; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--water); color: #071A1D; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: .75rem;
  top: .5rem;
  padding: .65rem .9rem;
  transform: translateY(-150%);
  background: var(--paper-raised);
  color: var(--text);
  border: 1px solid var(--line);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.8rem);
  padding: .35rem max(1.1rem, calc((100vw - var(--content-width)) / 2));
  color: var(--hero-text);
  background: var(--hero);
  border-bottom: 1px solid rgba(184, 201, 196, .18);
  backdrop-filter: none;
}
.home-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .55rem; text-decoration: none; font-weight: 650; letter-spacing: -.015em; }
.home-wordmark-short { display: none; }
.home-mark { display: block; width: 1.9rem; height: 1.25rem; }
.home-mark path, .home-mark rect { vector-effect: non-scaling-stroke; }
.top-links { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: clamp(.6rem, 1.7vw, 1.45rem); min-width: 0; white-space: nowrap; }
.top-links a, .language-switch a { color: var(--hero-muted); text-decoration: none; font-size: .8rem; font-weight: 560; }
.top-links a:hover, .language-switch a:hover { color: var(--hero-text); text-decoration: underline; }
.language-switch { display: flex; flex: 0 0 auto; align-items: center; gap: .35rem; white-space: nowrap; }
.language-switch a { padding: .32rem .4rem; }
.language-switch a[aria-current="page"] { color: var(--hero-text); box-shadow: inset 0 -2px var(--brass); }
.icon-button, .theme-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(184, 201, 196, .35);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.theme-button { color: var(--hero-text); }
.theme-button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.progress-track { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; overflow: visible; background: rgba(74, 156, 152, .22); }
.progress-ship { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--brass); will-change: transform; }
.progress-vessel { position: absolute; top: 50%; left: 0; width: 1rem; height: .55rem; color: var(--brass); fill: currentColor; transform: translate(0, -50%); will-change: transform; }
.progress-vessel .progress-deck { fill: var(--hero-text); }

.page-shell { position: relative; }
.reading-rail {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: calc(50% + var(--content-width) / 2 + 1.25rem);
  display: none;
  flex-direction: column;
  gap: .44rem;
  max-height: calc(100svh - 6rem);
  overflow: visible;
  padding: .55rem;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
@media (min-width: 90rem) {
  .reading-rail { display: flex; }
}
.rail-link { position: relative; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; color: var(--text-muted); text-decoration: none; }
.rail-dot { display: block; width: .42rem; height: .42rem; border: 1px solid currentColor; border-radius: 50%; background: transparent; }
.rail-link[aria-current="location"] .rail-dot { width: .64rem; height: .64rem; border-color: var(--water-deep); background: var(--water-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 25%, transparent); }
.rail-label { position: absolute; top: 50%; left: calc(100% + .25rem); width: max-content; max-width: calc(50vw - var(--content-width) / 2 - 3.25rem); overflow: hidden; padding: .25rem .4rem; color: var(--text); background: var(--paper-raised); border: 1px solid var(--line-soft); border-radius: .2rem; font-size: .74rem; opacity: 0; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; transform: translate(-.2rem, -50%); transition: opacity .12s ease, transform .12s ease; }
.rail-link:hover .rail-label, .rail-link:focus-visible .rail-label { opacity: 1; transform: translate(0, -50%); }

.hero {
  position: relative;
  min-height: min(51rem, calc(100svh - var(--topbar-h)));
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(3.6rem, 8svh, 6rem) max(1.3rem, calc((100vw - var(--content-width)) / 2));
  color: var(--hero-text);
  background: var(--hero);
  isolation: isolate;
}
.hero::before, .hero::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.hero::before { top: -18rem; right: -13rem; width: min(64vw, 60rem); aspect-ratio: 1; border: 1px solid rgba(74, 156, 152, .16); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(74, 156, 152, .035), 0 0 0 9rem rgba(74, 156, 152, .025); }
.hero::after { right: 0; bottom: 0; left: 0; height: 7rem; background: linear-gradient(transparent, rgba(6, 20, 25, .5)); }
.hero-grid { display: grid; grid-template-columns: minmax(19rem, .8fr) minmax(24rem, 1.2fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); width: min(100%, var(--content-width)); margin: 0 auto; }
.hero-copy { position: relative; z-index: 1; max-width: 39rem; }
.eyebrow, .section-kicker { margin: 0 0 .85rem; color: var(--water-deep); font-size: .72rem; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.hero .eyebrow { color: var(--brass); }
h1, h2, h3 { margin-top: 0; font-family: "Fraunces", Georgia, serif; font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
h1 { max-width: 15ch; margin-bottom: 1.15rem; font-size: clamp(2.7rem, 5.5vw, 5.3rem); }
.hero-deck { max-width: 42rem; margin: 0; color: #D9E4DD; font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.52; }
.hero-cold-open { max-width: 39rem; margin: 1.65rem 0 0; padding-left: .9rem; color: var(--hero-muted); border-left: 2px solid var(--brass); font-size: .95rem; }
.hero-art { width: 100%; min-width: 0; filter: drop-shadow(0 25px 25px rgba(0, 0, 0, .2)); }
.hero-art svg { display: block; width: 100%; height: auto; }
.hero-lift-water { transform-box: fill-box; transform-origin: center bottom; }
html[data-js="true"]:not([data-motion="reduce"]) .hero-lift-water { animation: lift-water 2.15s cubic-bezier(.2,.78,.28,1) both; }
@keyframes lift-water { from { transform: translateY(4.4rem); opacity: .62; } to { transform: translateY(0); opacity: 1; } }
.hero-stats { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 2.8rem); margin-top: 1.8rem; }
.hero-stat { display: grid; gap: .12rem; }
.hero-stat strong { color: var(--brass); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.hero-stat span { color: var(--hero-muted); font-size: .73rem; }
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: .42rem; margin-top: 1.4rem; }
.share-label { margin-right: .35rem; color: var(--hero-muted); font-size: .75rem; }
.share-row a, .share-row button { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: currentColor; border: 1px solid var(--line-soft); border-radius: 50%; background: transparent; text-decoration: none; cursor: pointer; }
.hero .share-row a, .hero .share-row button { border-color: rgba(184, 201, 196, .35); }
.share-row a:hover, .share-row button:hover { color: var(--brass); border-color: var(--brass); }
.share-row svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.share-status { min-height: 1.2em; margin: .2rem 0 0; color: var(--hero-muted); font-size: .75rem; }

.story-section { position: relative; padding: clamp(4.5rem, 9vw, 8rem) max(1.3rem, calc((100vw - var(--content-width)) / 2)); border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--topbar-h) + 1.25rem); }
.section-inner { width: min(100%, var(--content-width)); margin: 0 auto; }
.story-section h2 { max-width: 22ch; margin-bottom: 1rem; font-size: clamp(2rem, 3.7vw, 3.55rem); }
.section-intro, .story-copy { max-width: var(--copy-width); }
.story-copy { font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.8; }
.story-copy p { margin: 0 0 1.15rem; }
.story-copy p:last-child { margin-bottom: 0; }
.pull { max-width: var(--copy-width); margin: 2rem 0 0; padding: 1rem 0 0 1rem; color: var(--water-deep); border-left: 3px solid var(--brass); font-family: "Fraunces", Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.38; }
:root[data-theme="dark"] .pull { color: #8BC9C1; }
.citation-links { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: 1.35rem; color: var(--text-muted); font-size: .75rem; }
.citation-links a { padding: .12rem .36rem; border: 1px solid var(--line-soft); border-radius: .15rem; text-decoration: none; }
.citation-links a:hover { color: var(--water-deep); border-color: var(--water); }

.journey-section { background: var(--paper-raised); }
.journey-header { max-width: 58rem; margin: 0 auto 2.1rem; }
.journey-header .section-intro { margin: 0; color: var(--text-muted); }
.journey-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(24rem, 1.05fr); grid-template-areas: "steps visual" "steps state"; align-items: start; column-gap: clamp(2rem, 5vw, 5rem); row-gap: .8rem; width: min(100%, var(--content-width)); margin: 0 auto; }
.journey-visual { grid-area: visual; position: sticky; top: calc(var(--topbar-h) + 1rem); align-self: start; padding: 1rem; background: var(--hero); border: 1px solid rgba(74, 156, 152, .48); box-shadow: var(--shadow); }
.route-svg { display: block; width: 100%; height: auto; overflow: visible; }
.route-svg text { font-family: "IBM Plex Sans", sans-serif; }
.route-svg .ground { fill: #8C6046; opacity: .72; }
.route-svg .waterline { fill: none; stroke: #4A9C98; stroke-width: 3; }
.route-svg .route-line { fill: none; stroke: #8BBFBA; stroke-width: 3; stroke-dasharray: 3 7; }
.route-svg .route-label { fill: #D5E3DD; font-size: 14px; letter-spacing: .02em; }
.route-svg .route-sub { fill: #98B4B2; font-size: 10px; }
.route-svg .route-marker { fill: #173B42; stroke: #7EAAA5; stroke-width: 2; transition: fill .18s ease, stroke .18s ease, r .18s ease; }
.route-svg .route-marker.active { fill: #D8A44D; stroke: #F4D59C; }
.route-svg .route-ship { fill: #F1F2EB; stroke: #D8A44D; stroke-width: 2; transition: transform .45s cubic-bezier(.2,.72,.2,1); }
.route-svg .chamber { fill: #D7DED8; stroke: #96A8A4; stroke-width: 2; }
.route-svg .gate { stroke: #D8A44D; stroke-width: 4; }
.route-svg .chamber-water { fill: #4A9C98; opacity: .72; }
.journey-state { grid-area: state; min-height: 3.25rem; margin: 0; color: var(--text-muted); font-size: .86rem; }
.journey-state strong { color: var(--text); }
.journey-steps { grid-area: steps; min-width: 0; }
.journey-steps > .story-copy { margin-bottom: 1rem; }
.route-step { position: relative; padding: 1.3rem 1rem 1.7rem 1.25rem; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 2rem); }
.route-step:first-child { border-top-color: var(--water); }
.route-step.on { border-left: 3px solid var(--brass); padding-left: calc(1.25rem - 2px); }
.route-step h3 { margin: .25rem 0 .75rem; font-size: clamp(1.45rem, 2.3vw, 2rem); }
.route-step p { max-width: 40rem; margin: 0; color: var(--text-muted); }
.route-step .step-short { color: var(--water-deep); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
:root[data-theme="dark"] .route-step .step-short { color: #8BC9C1; }
.step-nav { display: flex; gap: .55rem; margin-top: 1rem; }
.step-nav button { min-height: 2.7rem; padding: .45rem .8rem; color: var(--text); border: 1px solid var(--line); background: transparent; border-radius: .15rem; cursor: pointer; font-size: .83rem; }
.step-nav button:hover:not(:disabled) { color: var(--water-deep); border-color: var(--water); }
.step-nav button:disabled { opacity: .45; cursor: default; }
.route-step .citation-links { margin-top: .85rem; }

.timeline-section { background: var(--ink); color: var(--hero-text); }
.timeline-section .section-kicker { color: var(--brass); }
.timeline-section .story-copy, .timeline-section .section-intro { color: #D9E4DD; }
.timeline-section .pull { color: #8BC9C1; }
.campaign-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; margin-top: 2.5rem; }
.campaign-lane { min-width: 0; padding: clamp(1.2rem, 2.6vw, 2.3rem); border: 1px solid rgba(184, 201, 196, .3); background: rgba(255,255,255,.025); }
.campaign-lane h3 { margin-bottom: 1.1rem; color: var(--brass); font-size: clamp(1.55rem, 2.4vw, 2.25rem); }
.campaign-lane .lane-sub { color: #B8C9C4; font-size: .83rem; }
.campaign-event { display: grid; grid-template-columns: minmax(6.8rem, .36fr) minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(184, 201, 196, .23); }
.campaign-event time { color: var(--brass); font-size: .87rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.campaign-event p { margin: 0; color: #D9E4DD; font-size: .9rem; }
.post-opening { margin-top: 1.3rem; padding: clamp(1.2rem, 2.6vw, 2.3rem); border: 1px solid rgba(184, 201, 196, .3); background: rgba(255,255,255,.025); }
.post-opening h3 { margin: 0 0 .9rem; color: var(--water); font-size: clamp(1.25rem, 2vw, 1.65rem); }
.post-opening ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.post-opening .campaign-event { display: block; border-top: 1px solid rgba(184, 201, 196, .23); }
.post-opening .campaign-event time { display: block; margin-bottom: .35rem; }
.post-opening .citation-links { margin-top: 1rem; }
.campaign-note { margin: 1.25rem 0 0; color: #B8C9C4; font-size: .78rem; }
.timeline-figure { margin: 2.4rem 0 0; }
.timeline-figure > figcaption, .water-figure > figcaption { display: grid; gap: .35rem; max-width: 56rem; color: var(--hero-text); }
.timeline-figure > figcaption strong, .water-figure > figcaption strong { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 500; }
.timeline-figure > figcaption span, .water-figure > figcaption span { color: #B8C9C4; font-size: .82rem; }
.campaign-lane ol { margin: 0; padding: 0; list-style: none; }
.campaign-lane .campaign-event:first-child { border-top-color: var(--brass); }
.campaign-note { color: #B8C9C4; }

.evidence-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 2.2rem 0; }
.evidence-card { min-width: 0; padding: 1.1rem; background: var(--paper-raised); border-top: 3px solid var(--water); box-shadow: var(--shadow); }
.evidence-card .evidence-label { display: block; color: var(--text-muted); font-size: .76rem; }
.evidence-card strong { display: block; margin: .55rem 0; color: var(--water-deep); font-size: clamp(1.3rem, 2.2vw, 2rem); font-variant-numeric: tabular-nums; line-height: 1.12; }
.evidence-card p { margin: 0; font-size: .83rem; }
:root[data-theme="dark"] .evidence-card strong { color: #8BC9C1; }

.date-ledger { margin: 2rem 0; border-top: 1px solid var(--line); }
.date-ledger article { display: grid; grid-template-columns: minmax(9rem, .28fr) minmax(0, 1fr); gap: 1.4rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.date-ledger time { color: var(--water-deep); font-weight: 680; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .date-ledger time { color: #8BC9C1; }
.date-ledger p { max-width: 52rem; margin: 0; }

.dimension-figure, .water-figure, .treaty-card {
  max-width: 58rem;
  margin: 2.5rem 0;
  padding: clamp(1.1rem, 2.6vw, 2rem);
  background: var(--paper-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
}
.dimension-figure > figcaption, .water-figure > figcaption { display: grid; gap: .35rem; margin-bottom: 1.4rem; }
.dimension-figure > figcaption:first-child { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; }
.dimension-rows { display: grid; gap: 1rem; }
.dimension-row { display: grid; grid-template-columns: minmax(9rem, .9fr) minmax(5rem, 1fr) minmax(9.5rem, .75fr); align-items: center; gap: .8rem; font-size: .82rem; }
.dimension-row strong { font-weight: 650; }
.dimension-row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dimension-bar { display: block; height: .56rem; background: var(--water); border-radius: 999px; }
.dimension-bar.old-chamber { width: 71.4%; }
.dimension-bar.panamax-vessel { width: 68.9%; background: var(--earth); }
.dimension-bar.new-chamber { width: 100%; background: var(--brass); }
.figure-note { margin: 1.1rem 0 0; color: var(--text-muted); font-size: .78rem; }
.treaty-card { max-width: 32rem; padding: 2rem; color: var(--hero-text); background: var(--hero); border: 1px solid rgba(74,156,152,.45); }
.treaty-rule { width: 3.6rem; height: .22rem; background: var(--brass); }
.treaty-card .treaty-date { margin: 1.7rem 0 .55rem; color: #B8C9C4; font-size: .75rem; font-variant-numeric: tabular-nums; letter-spacing: .09em; text-transform: uppercase; }
.treaty-card h3 { margin-bottom: .75rem; color: var(--hero-text); font-size: clamp(1.7rem, 3vw, 2.5rem); }
.treaty-card > p:not(.treaty-date) { color: #B8C9C4; font-size: .82rem; }
.treaty-card a { display: inline-block; margin-top: .65rem; color: var(--brass); font-size: .8rem; }
.water-points { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.water-point { display: grid; align-content: start; gap: .45rem; min-width: 0; min-height: 9.5rem; padding: .8rem; background: color-mix(in srgb, var(--water) 8%, var(--paper-raised)); border-top: 2px solid var(--water); }
.water-point time { color: var(--text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.water-point strong { color: var(--water-deep); font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-variant-numeric: tabular-nums; line-height: 1.1; }
.water-point span { color: var(--text-muted); font-size: .73rem; line-height: 1.4; }
:root[data-theme="dark"] .water-point strong { color: #8BC9C1; }

.archive-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 2rem 0; }
.archive-figure { margin: 0; background: var(--hero); color: var(--hero-text); }
.archive-figure img { display: block; width: 100%; height: auto; max-height: min(72svh, 43rem); object-fit: contain; background: var(--hero); }
.archive-figure--modest { justify-self: center; width: min(100%, 687px); }
.archive-figure--modest img { max-width: 687px; max-height: min(72svh, 43rem); margin-inline: auto; }
.archive-figure figcaption { padding: .9rem 1rem; }
.archive-figure .caption { margin: 0 0 .65rem; color: #E8EEE8; font-size: .88rem; }
.image-credit { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; color: #B8C9C4; font-size: .72rem; }
.image-credit a { text-underline-offset: .15em; }
.treaty-document { max-width: 58rem; margin: 2.2rem auto; padding: clamp(.55rem, 2vw, 1rem); border: 1px solid var(--line); background: var(--paper-raised); box-shadow: var(--shadow); }
.treaty-paper { padding: clamp(1.1rem, 3vw, 2rem); color: #10262E; background: #F1F2EB; border: 1px solid #A6B6B2; box-shadow: inset 0 0 0 5px #F1F2EB, inset 0 0 0 6px rgba(16,38,46,.22); }
.treaty-overline { margin: 0 0 1rem; color: #52666A; font: 700 .68rem/1.4 "IBM Plex Sans",sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.treaty-paper h3 { margin: 0 0 1.6rem; padding-bottom: .8rem; border-bottom: 1px solid #A6B6B2; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.treaty-label { margin: 0 0 .4rem; color: #52666A; font: 700 .66rem/1.4 "IBM Plex Sans",sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.treaty-paper blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid #8C6046; font: 400 clamp(.95rem, 1.35vw, 1.12rem)/1.7 "IBM Plex Sans",sans-serif; }
.treaty-paper blockquote p, .treaty-signing { margin: 0; }
.treaty-signing { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #A6B6B2; font: 400 .86rem/1.65 "IBM Plex Sans",sans-serif; }
.treaty-document figcaption { padding: .7rem .25rem 0; color: var(--text-muted); font-size: .78rem; }
.source-kind { display: block; margin: .15rem 0 .35rem 2.8rem; color: var(--text-muted); font-size: .72rem; }

.locator-section { background: var(--paper-raised); }
.locator-figure { max-width: 65rem; margin: 2rem auto 0; padding: 1rem; background: #10262E; border: 1px solid rgba(74, 156, 152, .48); box-shadow: var(--shadow); }
.locator-figure img { display: block; width: 100%; height: auto; }
.locator-figure figcaption { margin-top: .75rem; color: #D1DFD8; font-size: .8rem; }
.locator-credit { display: block; margin-top: .35rem; color: #AFC4BE; font-size: .72rem; }

.sources-section { background: var(--paper-raised); }
.source-list { max-width: 60rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: sources; }
.source-list li { padding: .85rem 0; border-top: 1px solid var(--line-soft); }
.source-list a { text-decoration-thickness: .06em; }
.source-id { display: inline-block; min-width: 2.8rem; color: var(--water-deep); font-size: .74rem; font-variant-numeric: tabular-nums; font-weight: 700; }
:root[data-theme="dark"] .source-id { color: #8BC9C1; }
.source-date-note { max-width: var(--copy-width); color: var(--text-muted); font-size: .86rem; }

.page-footer { padding: 2.5rem max(1.3rem, calc((100vw - var(--content-width)) / 2)); color: var(--hero-muted); background: var(--hero); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; width: min(100%, var(--content-width)); margin: 0 auto; font-size: .78rem; }
.footer-inner a { color: var(--hero-text); }
.to-top { position: fixed; z-index: 35; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); min-width: 3rem; min-height: 3rem; padding: .55rem .75rem; color: #071A1D; background: #F1F2EB; border: 1px solid var(--water-deep); border-radius: 999px; box-shadow: 0 4px 18px rgba(0,0,0,.22); cursor: pointer; font-size: .8rem; font-weight: 700; }
.to-top::before { content: "↑"; margin-right: .25rem; }
.to-top:hover { color: #071A1D; background: var(--brass); }

.section-note { max-width: var(--copy-width); margin: 1.5rem 0; padding: .85rem 1rem; color: var(--text-muted); border-left: 2px solid var(--water); background: color-mix(in srgb, var(--water) 7%, var(--paper)); font-size: .84rem; }

@media (max-width: 68rem) {
  .hero-grid { grid-template-columns: minmax(17rem, .9fr) minmax(21rem, 1.1fr); gap: 2rem; }
  .top-links { gap: .75rem; }
  .top-links a { font-size: .73rem; }
}

@media (max-width: 50rem) {
  :root { --topbar-h: 3.45rem; }
  html { scroll-padding-top: calc(var(--topbar-h) + 1rem); }
  .reading-rail { display: none; }
  .site-header { flex-wrap: nowrap; gap: .3rem; min-height: var(--topbar-h); padding: .25rem .45rem; }
  .home-link { min-width: 0; gap: .22rem; font-size: .68rem; }
  .home-wordmark-full { display: none; }
  .home-wordmark-short { display: block; }
  .home-mark { flex: 0 0 auto; width: 1.25rem; }
  .top-links { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-start; gap: .38rem; width: auto; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .top-links::-webkit-scrollbar { display: none; }
  .top-links a { flex: 0 0 auto; font-size: .67rem; line-height: 1.35; white-space: nowrap; }
  .language-switch { flex: 0 0 auto; gap: .02rem; margin: 0; }
  .language-switch a { display: grid; min-width: 1.4rem; min-height: 2.75rem; place-items: center; padding: .1rem .15rem; font-size: .66rem; }
  .theme-button { width: 2.5rem; height: 2.5rem; }
  .hero { min-height: auto; padding: 3.25rem 1.15rem 3.8rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; width: min(100%, 38rem); }
  .hero-art { grid-row: 1; max-width: 38rem; margin-inline: auto; }
  .hero-copy { grid-row: 2; }
  h1 { max-width: 17ch; font-size: clamp(2.5rem, 11vw, 4.1rem); }
  .hero-deck { font-size: 1.05rem; }
  .hero-cold-open { margin-top: 1rem; }
  .hero-stats { gap: 1.3rem; }
  .story-section { padding: 4.6rem 1.15rem; }
  .journey-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "state" "steps"; gap: .6rem; }
  .journey-visual { position: sticky; top: var(--topbar-h); z-index: 15; height: min(32svh, 16rem); min-height: 0; padding: .45rem; overflow: hidden; }
  .journey-visual .route-svg { width: 100%; height: 100%; }
  .journey-visual .route-svg .route-label { font-size: 12px; }
  .journey-visual .route-svg .route-sub { font-size: 9px; }
  .journey-state { min-height: 3rem; padding: .25rem .15rem .5rem; }
  .route-step { scroll-margin-top: calc(var(--topbar-h) + min(32svh, 16rem) + 1.4rem); }
  .route-step + .route-step { margin-top: calc(min(32svh, 16rem) + 4.5rem); }
  .journey-section { padding-top: 4.8rem; }
  .campaign-board { grid-template-columns: 1fr; }
  .post-opening ol { grid-template-columns: 1fr; }
  .evidence-strip { grid-template-columns: 1fr; }
  .dimension-row { grid-template-columns: minmax(7rem, .75fr) minmax(2.8rem, .6fr) minmax(8.5rem, 1fr); gap: .5rem; font-size: .75rem; }
  .water-points { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .water-point { min-height: 8.5rem; }
  .timeline-figure { margin-top: 1.8rem; }
  .campaign-event { grid-template-columns: 6.4rem minmax(0,1fr); }
  .date-ledger article { grid-template-columns: 1fr; gap: .25rem; }
  .to-top { min-width: 3rem; min-height: 3rem; }
}

@media (max-width: 24rem) {
  .site-header { gap: .2rem; padding-inline: .35rem; }
  .top-links { gap: .28rem; }
  .top-links a { font-size: .64rem; }
  .language-switch a { min-width: 1.28rem; padding-inline: .08rem; }
  .theme-button { width: 2.35rem; height: 2.35rem; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dimension-row { grid-template-columns: 1fr; gap: .3rem; }
  .dimension-bar { max-width: 100%; }
}

@media (pointer: coarse) {
  .share-row a, .share-row button { width: 2.75rem; height: 2.75rem; }
  .rail-link { width: 1.25rem; height: 1.25rem; }
  .step-nav button { min-height: 2.85rem; }
}

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

@media print {
  .site-header, .reading-rail, .share-row, .to-top, .step-nav { display: none !important; }
  .hero { min-height: auto; color: #10262E; background: white; }
  .hero .hero-deck, .hero .hero-cold-open { color: #26383D; }
  .story-section, .timeline-section, .page-footer { color: #10262E; background: white; break-inside: avoid; }
  .campaign-lane { border-color: #738689; }
}

/* Panama retrofit: one moving ship through a varied sequence of full-height scenes. */
.site-header { background: var(--hero); backdrop-filter: none; }
.reading-rail { background: var(--paper-raised); }
.hero::before { display: none; }
.hero::after { height: 3.5rem; background: linear-gradient(transparent, rgba(6, 20, 25, .32)); }

.story-scene {
  position: relative;
  padding: clamp(4rem, 7svh, 6rem) max(1.3rem, calc((100vw - var(--content-width)) / 2)) 4rem;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--topbar-h) + .6rem);
  background: var(--scene-background, var(--paper));
  color: var(--text);
}
.story-scene[data-tone="earth"] { --scene-background: #E9E7DC; }
.story-scene[data-tone="paper"] { --scene-background: #F1F2EB; }
.story-scene[data-tone="ledger"] { --scene-background: #E4EAE3; }
.story-scene[data-tone="treaty"] { --scene-background: #ECE6D7; }
.story-scene[data-tone="water"] { --scene-background: #E3ECE7; }
.story-scene[data-tone="steel"] { --scene-background: #E6E9E2; }
.story-scene[data-tone="deep-water"] { --scene-background: #DDE9E4; }
:root[data-theme="dark"] .story-scene[data-tone="earth"] { --scene-background: #142A30; }
:root[data-theme="dark"] .story-scene[data-tone="paper"] { --scene-background: #10262E; }
:root[data-theme="dark"] .story-scene[data-tone="ledger"] { --scene-background: #1C3336; }
:root[data-theme="dark"] .story-scene[data-tone="treaty"] { --scene-background: #263337; }
:root[data-theme="dark"] .story-scene[data-tone="water"] { --scene-background: #17353A; }
:root[data-theme="dark"] .story-scene[data-tone="steel"] { --scene-background: #20343A; }
:root[data-theme="dark"] .story-scene[data-tone="deep-water"] { --scene-background: #102B31; }
.scene-heading { max-width: 69rem; margin: 0 auto 1.75rem; }
.scene-heading h2 { max-width: 24ch; margin: 0; font-size: clamp(2.05rem, 4.1vw, 3.75rem); }
.scene-heading .section-kicker { margin-bottom: .8rem; }
.scene-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5.2rem);
  width: min(100%, var(--content-width));
  margin: 0 auto;
}
.story-scene.scene--alternate .scene-beats { grid-column: 2; grid-row: 1; }
.story-scene.scene--alternate .scene-stage { grid-column: 1; grid-row: 1; }
.scene-beats { min-width: 0; }
.story-beat {
  position: relative;
  display: flex;
  min-height: 82svh;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.2rem, 6svh, 5rem) 1rem clamp(3rem, 7svh, 5.5rem) 1.3rem;
  border-left: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 2rem);
  transition: border-color .2s ease;
}
.story-beat.on { border-left: 3px solid var(--brass); padding-left: calc(1.3rem - 2px); }
.story-beat + .story-beat { border-top: 1px solid var(--line-soft); }
.beat-kicker { margin: 0 0 .85rem; color: var(--water-deep); font-size: .68rem; font-weight: 720; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
:root[data-theme="dark"] .beat-kicker { color: #8BC9C1; }
.story-beat h3 { max-width: 19ch; margin: 0 0 .65rem; font-size: clamp(1.75rem, 3vw, 2.55rem); }
.beat-subline { max-width: 35rem; margin: 0 0 1.15rem; padding-left: .85rem; color: var(--water-deep); border-left: 2px solid var(--brass); font-family: "Fraunces", Georgia, serif; font-size: clamp(1.08rem, 1.55vw, 1.32rem); line-height: 1.4; }
:root[data-theme="dark"] .beat-subline { color: #B4D4CC; }
.beat-copy { max-width: 43rem; margin: 0; color: var(--text-muted); font-size: clamp(1rem, 1.18vw, 1.1rem); line-height: 1.78; }

.scene-stage {
  position: sticky;
  z-index: 3;
  top: calc(var(--topbar-h) + .65rem);
  display: flex;
  height: calc(100svh - var(--topbar-h) - 1.3rem);
  min-height: 34rem;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.1rem, 2.4vw, 2rem);
  color: #F1F2EB;
  border: 1px solid rgba(74, 156, 152, .36);
  box-shadow: 0 22px 65px rgba(16, 38, 46, .16);
  background: #142C33;
  isolation: isolate;
}
.scene-stage::before, .scene-stage::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.scene-stage::before { inset: 0; opacity: .2; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(184,201,196,.12) 32px, transparent 33px); }
.scene-stage::after { display: none; }
.scene-stage.tone-earth { background: linear-gradient(146deg, #263C3D, #10262E 72%); }
.scene-stage.tone-paper { color: #10262E; background: #E8E9DF; border-color: #A6B6B2; }
.scene-stage.tone-ledger { background: linear-gradient(145deg, #314446, #142A30 72%); }
.scene-stage.tone-treaty { color: #10262E; background: #F1EEE4; border-color: #BBAE94; }
.scene-stage.tone-water { background: linear-gradient(145deg, #24575A, #10262E 82%); }
.scene-stage.tone-steel { background: linear-gradient(145deg, #294951, #10262E 75%); }
.scene-stage.tone-deep-water { background: linear-gradient(145deg, #1C494C, #0A1C21 78%); }
.scene-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; color: #C4D4CE; border-bottom: 1px solid rgba(184,201,196,.28); font-size: .66rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.tone-paper .scene-stage-top, .tone-treaty .scene-stage-top { color: #52666A; border-color: rgba(16,38,46,.2); }
.scene-art { display: block; width: 100%; height: auto; max-height: 49svh; flex: 1 1 auto; min-height: 0; margin: 1rem 0 .6rem; overflow: visible; }
.scene-art .art-frame { fill: none; stroke: rgba(184,201,196,.2); stroke-width: 1; }
.scene-art .art-ridge { fill: rgba(140,96,70,.14); stroke: #C08B62; stroke-width: 3; stroke-linejoin: round; }
.scene-art .art-water, .scene-art .art-feeder, .scene-art .art-drop { fill: none; stroke: #65AAA3; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .art-basin { fill: rgba(74,156,152,.28); stroke: #65AAA3; stroke-width: 2.5; stroke-linejoin: round; }
.scene-art .art-locks { fill: none; stroke: #D8A44D; stroke-width: 3; stroke-linecap: round; }
.scene-art .art-gate, .scene-art .art-rise, .scene-art .art-dimension, .scene-art .art-measure { fill: none; stroke: #D8A44D; stroke-width: 3; stroke-linecap: round; }
.scene-art .art-ship { fill: #F1F2EB; stroke: #D8A44D; stroke-width: 2; }
.scene-art .art-track { fill: none; stroke: rgba(184,201,196,.34); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.scene-art .art-track--second { stroke: #D8A44D; stroke-dasharray: 7 7; }
.scene-art .art-route { fill: none; stroke: #4A9C98; stroke-width: 3; }
.scene-art .art-tick, .scene-art .art-rule, .scene-art .art-ledger-mark { fill: none; stroke: rgba(184,201,196,.52); stroke-width: 2; }
.scene-art .art-ledger { fill: rgba(241,242,235,.035); stroke: #8BBFBA; stroke-width: 2; }
.scene-art .art-paper { fill: #E8E5D8; stroke: #D8A44D; stroke-width: 2; }
.scene-art .art-seal, .scene-art .art-dot, .scene-art .art-runner { fill: #D8A44D; stroke: #F1D49C; stroke-width: 1.5; }
.scene-art .art-platform { fill: rgba(74,156,152,.24); stroke: #8BBFBA; stroke-width: 2; }
.scene-art .art-date-line { fill: none; stroke: #8BBFBA; stroke-width: 2; stroke-dasharray: 5 7; }
.scene-art .art-chamber { fill: rgba(241,242,235,.04); stroke: #D8A44D; stroke-width: 2; }
.scene-art .art-chamber--new { stroke: #65AAA3; }
.scene-art .art-runner { transition: transform .28s ease; }
.scene-stage[data-story-stage="why-locks"] .art-ridge,
.scene-stage[data-story-stage="why-locks"] .art-gate,
.scene-stage[data-story-stage="why-locks"] .art-water { transition: opacity .2s ease, filter .2s ease, stroke-width .2s ease; }
.scene-stage[data-story-stage="why-locks"][data-water-focus="true"] .art-ridge,
.scene-stage[data-story-stage="why-locks"][data-water-focus="true"] .art-gate { opacity: .24; }
.scene-stage[data-story-stage="why-locks"][data-water-focus="true"] .art-water { filter: drop-shadow(0 0 5px rgba(101,170,163,.82)); stroke-width: 8; }
.tone-paper .scene-art .art-track, .tone-treaty .scene-art .art-track { stroke: rgba(16,38,46,.3); }
.tone-paper .scene-art .art-ledger-mark, .tone-treaty .scene-art .art-rule { stroke: rgba(16,38,46,.45); }
.scene-panel { display: grid; gap: .45rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(184,201,196,.28); }
.scene-panel--interactive { grid-template-columns: minmax(0, 1fr) 2.75rem; grid-template-rows: auto 1fr; align-items: center; }
.scene-panel--interactive > span { grid-column: 1; grid-row: 1; }
.scene-panel--interactive > strong { grid-column: 1; grid-row: 2; }
.water-toggle { display: grid; grid-column: 2; grid-row: 1 / span 2; place-items: center; align-self: center; gap: .15rem; width: 2.75rem; min-height: 2.75rem; padding: .25rem; color: #F1F2EB; border: 1px solid rgba(184,201,196,.55); border-radius: .18rem; background: rgba(16,38,46,.42); cursor: pointer; font: inherit; }
.water-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.water-toggle span { font-size: .48rem; font-weight: 750; letter-spacing: .06em; line-height: 1; }
.water-toggle[aria-pressed="true"] { color: #10262E; border-color: #D8A44D; background: #D8A44D; }
.water-toggle:hover { border-color: #D8A44D; }
.water-toggle:focus-visible { outline: 3px solid #D8A44D; outline-offset: 3px; }
.tone-paper .scene-panel, .tone-treaty .scene-panel { border-color: rgba(16,38,46,.2); }
.scene-panel > span { max-width: 38rem; color: #B8C9C4; font-size: .76rem; line-height: 1.42; }
.tone-paper .scene-panel > span, .tone-treaty .scene-panel > span { color: #52666A; }
.scene-panel strong { max-width: 36rem; color: #F1F2EB; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.45rem, 2.35vw, 2.2rem); font-weight: 500; line-height: 1.12; font-variant-numeric: tabular-nums; text-wrap: balance; }
.tone-paper .scene-panel strong, .tone-treaty .scene-panel strong { color: #10262E; }
.scene-progress { display: block; height: 2px; margin-top: 1rem; overflow: hidden; background: rgba(74,156,152,.28); }
.scene-progress span { display: block; width: 100%; height: 100%; transform: scaleX(.1); transform-origin: left; background: var(--brass); transition: transform .24s ease; }
.scene-exhibits { width: min(100%, var(--content-width)); margin: clamp(3rem, 8vw, 6rem) auto 0; padding-top: 2rem; border-top: 1px solid var(--line-soft); }
.scene-exhibits .timeline-figure { margin: 0; padding: clamp(1rem, 3vw, 2.3rem); color: #F1F2EB; background: #10262E; border: 1px solid rgba(74,156,152,.36); }
.scene-exhibits .campaign-lane, .scene-exhibits .post-opening { background: rgba(255,255,255,.025); }
.scene-exhibits .water-figure, .scene-exhibits .dimension-figure { max-width: none; margin: 0; }
.scene-exhibits .archive-gallery { margin: 0; }
.scene-exhibits .evidence-strip { margin: 0; }
.story-scene > .section-inner > .citation-links { width: min(100%, var(--content-width)); margin: 1.5rem auto 0; }

.journey-section { padding: clamp(3rem, 6svh, 5rem) max(1.3rem, calc((100vw - var(--content-width)) / 2)) 4rem; background: #E6EEE8; }
:root[data-theme="dark"] .journey-section { background: #132A30; }
.journey-header { max-width: 67rem; margin: 0 auto 1.6rem; }
.journey-header h2 { max-width: 25ch; margin-bottom: .65rem; font-size: clamp(2.05rem, 4vw, 3.55rem); }
.journey-header .section-intro { margin: 0; color: var(--text-muted); }
.journey-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "steps visual"; align-items: start; gap: clamp(2rem, 5vw, 5rem); width: min(100%, var(--content-width)); margin: 0 auto; }
.journey-steps { grid-area: steps; min-width: 0; }
.journey-visual { grid-area: visual; position: sticky; z-index: 3; top: calc(var(--topbar-h) + .65rem); display: flex; height: calc(100svh - var(--topbar-h) - 1.3rem); min-height: 34rem; flex-direction: column; justify-content: center; overflow: hidden; margin: 0; padding: clamp(.8rem, 2vw, 1.5rem); background: #10262E; border: 1px solid rgba(74,156,152,.44); box-shadow: 0 22px 65px rgba(16,38,46,.15); }
.journey-visual .route-svg { width: 100%; height: auto; max-height: 75svh; flex: 1 1 auto; min-height: 0; }
.route-svg .route-marker { transition: fill .2s ease, stroke .2s ease, r .2s ease; }
.route-svg .route-ship { transition: transform .48s cubic-bezier(.2,.72,.2,1); }
.visual-caption { display: grid; gap: .4rem; padding-top: .65rem; color: #B8C9C4; border-top: 1px solid rgba(184,201,196,.22); font-size: .69rem; line-height: 1.35; }
.journey-state { display: grid; gap: .15rem; min-height: 2.65rem; margin: 0; color: #B8C9C4; font-size: .78rem; }
.journey-state strong { color: #F1F2EB; font-size: .86rem; }
.route-step { display: flex; min-height: 78svh; flex-direction: column; justify-content: center; padding: clamp(2rem, 5svh, 4rem) 1rem clamp(2.5rem, 6svh, 4rem) 1.3rem; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 2rem); }
.route-step.on { border-left: 3px solid var(--brass); padding-left: calc(1.3rem - 2px); }
.route-step.route-pacific-active > .route-stop-copy:first-child { visibility: hidden; }
.route-stop-copy { min-width: 0; }
.route-stop-copy h3, .route-stop-copy h4 { max-width: 20ch; margin: .25rem 0 .7rem; font-size: clamp(1.45rem, 2.25vw, 2rem); }
.route-stop-copy h4 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.route-stop-copy p { max-width: 40rem; margin: 0; color: var(--text-muted); }
.route-stop-copy .step-short { color: var(--water-deep); font-size: .69rem; font-weight: 720; letter-spacing: .13em; text-transform: uppercase; }
:root[data-theme="dark"] .route-stop-copy .step-short { color: #8BC9C1; }
.route-subbeat { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--topbar-h) + 2rem); }
.step-nav { display: flex; gap: .55rem; margin-top: 1.2rem; }
.step-nav button { min-height: 2.75rem; padding: .45rem .8rem; color: var(--text); border: 1px solid var(--line); background: transparent; border-radius: .15rem; cursor: pointer; font-size: .82rem; }
.step-nav button:hover:not(:disabled) { color: var(--water-deep); border-color: var(--water); }
.route-step .citation-links { margin-top: .8rem; }

@media (max-width: 50rem) {
  .story-scene { padding: 3.25rem 1.05rem 2rem; }
  .scene-heading { margin-bottom: 1.25rem; }
  .scene-heading h2 { font-size: clamp(1.9rem, 8.5vw, 2.75rem); }
  .scene-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-scene.scene--alternate .scene-beats, .story-scene.scene--alternate .scene-stage { grid-column: 1; grid-row: auto; }
  .scene-stage { position: sticky; top: var(--topbar-h); order: -1; height: min(32svh, 16rem); min-height: 0; padding: .65rem .8rem .55rem; }
  .scene-stage-top { padding-bottom: .35rem; font-size: .55rem; }
  .scene-art { max-height: 12svh; margin: .2rem 0; }
  .scene-panel { gap: .12rem; padding-top: .35rem; }
  .scene-panel > span { display: -webkit-box; overflow: hidden; font-size: .63rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .scene-panel strong { font-size: clamp(1.05rem, 4.3vw, 1.45rem); }
  .scene-progress { margin-top: .4rem; }
  .story-beat { min-height: 90svh; justify-content: flex-start; padding: 2rem .7rem 3rem 1rem; scroll-margin-top: calc(var(--topbar-h) + min(32svh, 16rem) + 1rem); }
  .story-beat h3 { font-size: clamp(1.65rem, 7vw, 2.3rem); }
  .beat-subline { font-size: 1.1rem; }
  .beat-copy { font-size: 1rem; line-height: 1.7; }
  .scene-exhibits { margin-top: 2rem; padding-top: 1.2rem; }
  .journey-section { padding: 3.2rem 1.05rem 2rem; }
  .journey-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "steps"; gap: 0; }
  .journey-visual { top: var(--topbar-h); height: min(32svh, 16rem); min-height: 0; padding: .45rem .5rem; }
  .journey-visual .route-svg { width: 100%; height: calc(100% - 3.1rem); max-height: none; flex: 1 1 auto; }
  .route-svg .route-label { font-size: 12px; }
  .route-svg .route-sub { font-size: 9px; }
  .visual-caption { gap: .16rem; padding-top: .25rem; font-size: .59rem; }
  .journey-state { min-height: 1.75rem; font-size: .62rem; }
  .journey-state strong { font-size: .7rem; }
  .route-step { min-height: 96svh; justify-content: flex-start; padding: 2rem .7rem 2.5rem 1rem; scroll-margin-top: calc(var(--topbar-h) + min(32svh, 16rem)); }
  .route-step + .route-step { margin-top: 0; }
  .route-stop-copy h3 { font-size: 1.62rem; }
  .route-stop-copy h4 { font-size: 1.35rem; }
  .step-nav { flex-wrap: wrap; }
  .scene--timeline .scene-exhibits .campaign-board { grid-template-columns: 1fr; }
}

@media (max-width: 24rem) {
  .scene-stage { padding-inline: .58rem; }
  .scene-stage-top { font-size: .49rem; }
  .story-beat { padding-inline: .65rem .4rem; }
  .route-step { padding-inline: .65rem .4rem; }
}

@media (max-width: 50rem) and (max-height: 30rem) {
  .scene-stage, .journey-visual { height: min(32svh, 7.2rem); padding: .1rem .6rem; }
  .scene-stage-top { gap: .4rem; padding-bottom: 0; border-bottom: 0; font-size: .43rem; line-height: 1; }
  .scene-art { max-height: 3.6svh; margin: 0; }
  .scene-panel { gap: .05rem; padding-top: .16rem; }
  .scene-panel > span { font-size: .48rem; line-height: 1.05; -webkit-line-clamp: 1; }
  .scene-panel strong { font-size: .82rem; line-height: 1.05; }
  .scene-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; margin: 0; }
  .route-step { padding-top: 2.25rem; scroll-margin-top: calc(var(--topbar-h) + min(32svh, 7.2rem) - 2.25rem); }
  .story-beat { padding-top: .65rem; scroll-margin-top: calc(var(--topbar-h) + min(32svh, 7.2rem) - .5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-stage *, .journey-visual *, .story-beat { transition-duration: .01ms !important; }
}

@media print {
  .scene-stage, .journey-visual { position: static; height: auto; min-height: 0; break-inside: avoid; }
  .scene-art { max-height: 14rem; }
  .story-beat, .route-step { min-height: 0; padding: 1.2rem; break-inside: avoid; }
  .scene-beat.on, .route-step.on { border-left-width: 1px; }
  .story-scene, .journey-section { color: #10262E; background: white; break-before: page; }
}