:root {
  /* Typography source notes: IBM Plex Mono** wordmark; Inter** concise explanatory copy. */
  --navy: #0A2342;
  --cream: #F7F0DF;
  --blue: #BFD7EA;
  --brass: #C7A45D;
  --rose: #D9907E;
  --steel: #6F8FA8;
  --graphite: #5E6472;
  --white: #FFFDF6;
  --sidebar: 292px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--navy);
  background:
    radial-gradient(circle at 72% 10%, rgba(191, 215, 234, 0.65), transparent 34rem),
    linear-gradient(90deg, rgba(10, 35, 66, 0.08) 0 1px, transparent 1px 72px),
    linear-gradient(0deg, rgba(94, 100, 114, 0.08) 0 1px, transparent 1px 72px),
    var(--cream);
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
}

.atlas-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 34px 26px 30px 32px;
  background:
    linear-gradient(90deg, rgba(255,253,246,0.94), rgba(247,240,223,0.88)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(10,35,66,0.05) 31px);
  border-right: 1px solid rgba(10,35,66,0.16);
  z-index: 20;
  box-shadow: 18px 0 42px rgba(10,35,66,0.08);
}

.sidebar-rule {
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 21px;
  width: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, #8e7132, var(--brass), #fff0b8, var(--brass));
  opacity: 0.86;
}

.mark-head { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.field-label {
  display: block;
  color: var(--steel);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
}
.mark-head strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.chapter-index {
  display: grid;
  gap: 13px;
  margin-top: 54px;
}

.chapter-link {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  padding: 10px 16px 10px 0;
  color: var(--graphite);
  text-decoration: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  transition: color 220ms ease, transform 220ms ease;
}
.chapter-link::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--steel);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.chapter-link span { color: var(--brass); font-size: 12px; }
.chapter-link b { font-size: 14px; color: inherit; }
.chapter-link em { grid-column: 2; font-size: 10px; font-style: normal; letter-spacing: 0.06em; }
.chapter-link.active { color: var(--navy); transform: translateX(6px); }
.chapter-link.active::after { background: var(--brass); border-color: var(--navy); transform: scale(1.18); }

.altimeter {
  position: absolute;
  left: 32px;
  right: 46px;
  bottom: 112px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--graphite);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.altimeter-track { height: 7px; margin: 12px 0; border-radius: 999px; background: rgba(111,143,168,0.22); overflow: hidden; }
#altitudeNeedle { display: block; width: 12%; height: 100%; background: linear-gradient(90deg, var(--brass), var(--rose)); border-radius: inherit; transition: width 420ms ease; }

.compass-rose {
  position: absolute;
  bottom: 28px;
  left: 42px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(10,35,66,0.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 11px "IBM Plex Mono", monospace;
}
.compass-rose i, .compass-rose b { position: absolute; width: 1px; height: 42px; background: var(--brass); }
.compass-rose b { transform: rotate(90deg); background: var(--steel); }

.atlas-main { margin-left: var(--sidebar); }

.plate {
  min-height: 100vh;
  padding: 42px clamp(24px, 5vw, 70px);
  display: grid;
  place-items: center;
  perspective: 1400px;
}

.plate-paper {
  position: relative;
  width: min(1180px, 100%);
  min-height: calc(100vh - 84px);
  padding: clamp(34px, 5vw, 72px);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,253,246,0.98), transparent 25rem),
    repeating-linear-gradient(115deg, rgba(94,100,114,0.035) 0 1px, transparent 1px 18px),
    var(--white);
  border: 1px solid rgba(10,35,66,0.16);
  border-radius: 4px 22px 6px 18px;
  box-shadow: 0 28px 70px rgba(10,35,66,0.14), inset 0 0 0 1px rgba(199,164,93,0.18);
  transform: scale(0.94);
  opacity: 0.62;
  filter: blur(1.1px);
  transition: transform 720ms cubic-bezier(.2,.8,.2,1), opacity 720ms ease, filter 720ms ease;
  overflow: hidden;
}
.plate.current .plate-paper { transform: scale(1); opacity: 1; filter: blur(0); }

.paper-tab {
  position: absolute;
  top: 20px;
  left: 38px;
  padding: 7px 14px;
  background: linear-gradient(90deg, rgba(199,164,93,0.3), rgba(255,253,246,0.85));
  border: 1px solid rgba(199,164,93,0.42);
  font: 600 11px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: var(--graphite);
}

.coordinate-strip {
  position: absolute;
  right: 36px;
  top: 28px;
  color: var(--steel);
  font: 600 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}

.kicker {
  margin: 0 0 18px;
  color: var(--rose);
  font: 600 12px "IBM Plex Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.055em;
}
h1 { font-size: clamp(48px, 8.5vw, 118px); line-height: 0.88; }
h2 { font-size: clamp(46px, 7vw, 92px); line-height: 0.92; }
p { color: var(--graphite); font-size: clamp(17px, 1.55vw, 21px); line-height: 1.68; }
.lead { max-width: 720px; font-size: clamp(20px, 2vw, 28px); color: var(--navy); }

.hero-copy { position: relative; z-index: 3; padding-top: 72px; }
.mountain-stage { position: absolute; left: 5%; right: 4%; bottom: 0; height: 58%; }
.mountain-svg, .trail-map, .overlook svg { width: 100%; height: 100%; overflow: visible; }
.wash { fill: url(#skyWash); stroke: none; }
.ridge, .horizon, .final { fill: none; stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.88; }
.ridge-main { stroke-width: 5; }
.contour { fill: none; stroke: var(--steel); stroke-width: 2.2; stroke-dasharray: 9 10; opacity: 0.72; }
.contour.wide { stroke-width: 3; }
.graph-path, .trail-line, .rose-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.plate.current .draw, .plate.current #heroGraph { animation: drawLine 1800ms ease forwards 180ms; }
.pins circle, .event-pins circle, .pin-large { fill: var(--brass); stroke: var(--navy); stroke-width: 3; }

.hand-note, .marginal {
  font-family: "Caveat", cursive;
  color: var(--navy);
  font-size: clamp(22px, 2vw, 32px);
}
.hand-note { position: absolute; transform: rotate(-3deg); opacity: 0; transition: opacity 500ms ease 300ms, transform 500ms ease 300ms; }
.plate.current .hand-note { opacity: 1; transform: rotate(-3deg) translateY(-8px); }
.note-one { left: 14%; top: 10%; }
.note-two { right: 9%; bottom: 42%; color: var(--rose); }
.note-three { right: 11%; bottom: 16%; color: var(--navy); }

.split-plate, .pass-plate { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 42px; align-items: center; }
.text-gutter, .pass-copy, .trail-copy, .range-copy { position: relative; z-index: 2; }
.map-figure, .intersection-map { min-height: 520px; position: relative; }
.map-figure svg, .intersection-map svg { width: 100%; height: 100%; }
.sheet-grid { fill: none; stroke: rgba(111,143,168,0.28); stroke-width: 1; }
.label-card {
  position: absolute;
  right: 8%;
  bottom: 12%;
  background: rgba(255,253,246,0.88);
  border: 1px solid rgba(199,164,93,0.5);
  padding: 14px 18px;
  color: var(--navy);
  font: 600 13px "IBM Plex Mono", monospace;
  box-shadow: 0 10px 24px rgba(10,35,66,0.12);
}

.trail-plate { padding-top: 100px; }
.trail-copy { max-width: 650px; }
.trail-map { position: absolute; inset: auto 4% 7% 4%; height: 62%; }
.flag path { fill: rgba(217,144,126,0.82); stroke: var(--navy); stroke-width: 2; }
.flag text { font: 600 24px "IBM Plex Mono", monospace; fill: var(--navy); }
.pass-ring { fill: rgba(191,215,234,0.25); stroke: var(--rose); stroke-width: 3; stroke-dasharray: 7 9; }
.range-plate { display: grid; align-content: space-between; }
.range-copy { max-width: 760px; }
.overlook { height: 48vh; margin-top: 20px; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  :root { --sidebar: 0px; }
  .atlas-sidebar { position: sticky; top: 0; width: 100%; height: auto; padding: 14px 18px; display: block; }
  .sidebar-rule, .altimeter, .compass-rose { display: none; }
  .mark-head strong { font-size: 13px; }
  .chapter-index { margin-top: 12px; display: flex; overflow: auto; gap: 10px; }
  .chapter-link { min-width: 132px; padding: 8px; grid-template-columns: 30px 1fr; background: rgba(255,253,246,0.72); }
  .chapter-link::after { display: none; }
  .atlas-main { margin-left: 0; }
  .plate { padding: 20px; }
  .plate-paper { min-height: 86vh; padding: 72px 24px 32px; }
  .split-plate, .pass-plate { grid-template-columns: 1fr; }
  .mountain-stage, .trail-map { position: relative; inset: auto; height: 360px; margin-top: 20px; }
  .coordinate-strip { display: none; }
}