:root {
  /* Typography source notes: Inter Tight** Tight*X from Google Fonts for large concise summit statements; IBM Plex Sans Condensed** Condensed*X from Google Fonts for altitude labels. */
  --glacier-blue: #DDF3FF;
  --alpine-mist: #EEF8FC;
  --summit-navy: #102A43;
  --corporate-blue: #2F80ED;
  --neon-cyan: #56F6FF;
  --periwinkle: #8EA7FF;
  --meadow-sage: #9DBFA3;
  --rose-dusk: #F2B8C6;
  --sidebar-width: 252px;
  --body-font: "Noto Sans", "Inter", "Segoe UI", Frutiger, Arial, sans-serif;
  --display-font: "Inter Tight", "Inter", "Arial Narrow", sans-serif;
  --condensed-font: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--summit-navy);
  font-family: var(--body-font);
  background:
    radial-gradient(circle at 78% 12%, rgba(86, 246, 255, 0.32), transparent 34vw),
    linear-gradient(140deg, var(--alpine-mist) 0%, var(--glacier-blue) 52%, #ffffff 100%);
  overflow-x: hidden;
}

.fog {
  position: fixed;
  left: var(--sidebar-width);
  right: -20vw;
  height: 32vh;
  pointer-events: none;
  z-index: 7;
  opacity: 0.72;
  filter: blur(24px);
  background: linear-gradient(90deg, rgba(238,248,252,0), rgba(238,248,252,0.9), rgba(221,243,255,0.2));
  animation: fogDrift 18s ease-in-out infinite alternate;
}

.fog-one { top: 12vh; }
.fog-two { bottom: 9vh; animation-duration: 24s; animation-delay: -8s; opacity: 0.56; }

.expedition-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  z-index: 20;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(238,248,252,0.76), rgba(221,243,255,0.46));
  border-right: 1px solid rgba(86, 246, 255, 0.58);
  box-shadow: 18px 0 48px rgba(47,128,237,0.14), inset -1px 0 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(18px);
}

.expedition-sidebar::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 10%;
  width: 1px;
  height: 78%;
  background: var(--neon-cyan);
  box-shadow: 0 0 18px var(--neon-cyan), 0 0 48px rgba(86,246,255,0.7);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 18px var(--neon-cyan);
}

.trail-ledger {
  position: relative;
  display: grid;
  gap: 26px;
  padding: 22px 0 22px 5px;
}

.trail-line {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 13px;
  width: 1px;
  background: rgba(16, 42, 67, 0.13);
  overflow: hidden;
}

.trail-line span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(var(--corporate-blue), var(--neon-cyan));
  box-shadow: 0 0 14px var(--neon-cyan);
  transition: height 0.7s cubic-bezier(.2,.8,.2,1);
}

.trail-stop {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 54px;
  color: rgba(16,42,67,0.66);
  text-decoration: none;
  transition: transform 0.35s ease, color 0.35s ease;
}

.trail-stop .marker {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(47,128,237,0.45);
  border-radius: 50%;
  background: rgba(238,248,252,0.9);
  z-index: 1;
  transition: all 0.35s ease;
}

.trail-stop b,
.trail-stop em { display: block; }
.trail-stop b { font-weight: 600; letter-spacing: 0.01em; }
.trail-stop em {
  margin-top: 2px;
  font-family: var(--condensed-font);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.trail-stop.active { color: var(--summit-navy); transform: translateX(5px); }
.trail-stop.active .marker {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 6px rgba(86,246,255,0.18), 0 0 22px var(--neon-cyan);
}

.coordinate-card {
  border: 1px solid rgba(47,128,237,0.18);
  background: rgba(255,255,255,0.44);
  border-radius: 18px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.coordinate-card span,
.coordinate-card small {
  display: block;
  font-family: var(--condensed-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.coordinate-card strong {
  display: block;
  margin: 6px 0;
  font-family: var(--display-font);
  font-size: 36px;
  letter-spacing: -0.06em;
}

.coordinate-card small { color: rgba(16,42,67,0.54); font-size: 11px; }

.quest-canvas { margin-left: var(--sidebar-width); }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 11vh 7vw 9vh;
  display: grid;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(238,248,252,0.3), rgba(221,243,255,0.76)),
    radial-gradient(circle at 86% 18%, rgba(242,184,198,0.26), transparent 30vw);
  border-bottom: 1px solid rgba(142,167,255,0.22);
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0.24) 0 1px, transparent 1px 180px),
    radial-gradient(circle, rgba(86,246,255,0.48) 0 1px, transparent 2px);
  background-size: 260px 260px, 160px 160px;
  opacity: 0.28;
}

.hero { padding-top: 8vh; }

.sky-glow {
  position: absolute;
  width: 62vw;
  height: 62vw;
  right: -19vw;
  top: -26vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86,246,255,0.28), transparent 66%);
}
.sky-glow.rose { background: radial-gradient(circle, rgba(242,184,198,0.48), rgba(221,243,255,0.18) 42%, transparent 68%); }
.sky-glow.periwinkle { background: radial-gradient(circle, rgba(142,167,255,0.42), transparent 68%); }
.sky-glow.cyan { background: radial-gradient(circle, rgba(86,246,255,0.42), transparent 68%); }
.sky-glow.sage { background: radial-gradient(circle, rgba(157,191,163,0.38), transparent 68%); }
.sky-glow.summit-light { background: radial-gradient(circle, rgba(221,243,255,0.82), rgba(86,246,255,0.24), transparent 68%); }

.mountain-layer {
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: 0;
  height: 43vh;
  transform: translateX(var(--drift, 0));
  transition: transform 0.25s linear;
  clip-path: polygon(0 78%, 9% 60%, 19% 70%, 31% 35%, 43% 58%, 54% 26%, 65% 61%, 77% 42%, 88% 65%, 100% 46%, 100% 100%, 0 100%);
}
.ridge-back { bottom: 18vh; opacity: 0.42; background: linear-gradient(180deg, var(--periwinkle), rgba(142,167,255,0)); }
.ridge-mid { bottom: 8vh; opacity: 0.58; background: linear-gradient(180deg, #8EA7FF, rgba(221,243,255,0.15)); clip-path: polygon(0 65%, 8% 48%, 18% 56%, 29% 30%, 39% 55%, 48% 38%, 60% 62%, 71% 28%, 83% 54%, 100% 35%, 100% 100%, 0 100%); }
.ridge-front { opacity: 0.88; height: 36vh; background: linear-gradient(180deg, rgba(16,42,67,0.72), rgba(16,42,67,0.06)); clip-path: polygon(0 74%, 10% 56%, 20% 68%, 33% 42%, 48% 72%, 60% 50%, 72% 70%, 86% 38%, 100% 62%, 100% 100%, 0 100%); }
.ridge-b { background: linear-gradient(180deg, rgba(47,128,237,0.32), rgba(221,243,255,0)); }
.ridge-c { background: linear-gradient(180deg, rgba(16,42,67,0.54), rgba(16,42,67,0.04)); }
.ridge-d { background: linear-gradient(180deg, rgba(142,167,255,0.46), rgba(221,243,255,0)); }
.ridge-e { background: linear-gradient(180deg, rgba(47,128,237,0.46), rgba(16,42,67,0.03)); }
.ridge-f { background: linear-gradient(180deg, rgba(157,191,163,0.48), rgba(221,243,255,0)); }
.ridge-g { background: linear-gradient(180deg, rgba(16,42,67,0.72), rgba(47,128,237,0.08)); }

.contour-lines,
.compass-arc {
  position: absolute;
  inset: auto 4vw 4vh auto;
  width: 50vw;
  max-width: 720px;
  fill: none;
  stroke: rgba(47,128,237,0.28);
  stroke-width: 2;
}
.compass-arc { inset: 16vh auto auto 16vw; width: 34vw; stroke: rgba(86,246,255,0.52); filter: drop-shadow(0 0 8px rgba(86,246,255,0.42)); }

.trail-curve {
  position: absolute;
  left: -2vw;
  top: 48%;
  width: 46vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  box-shadow: 0 0 18px var(--neon-cyan);
  transform: rotate(-8deg);
  opacity: 0.8;
}
.curve-two { top: 36%; transform: rotate(9deg); }
.curve-three { top: 60%; transform: rotate(-14deg); }
.curve-four { top: 44%; transform: rotate(5deg); }
.curve-five { top: 50%; width: 58vw; transform: rotate(-5deg); }

.hero-title-wrap,
.content-terrace,
.summit-statement,
.field-note,
.trail-decision,
.signal-stack {
  position: relative;
  z-index: 3;
}

.hero-title-wrap { max-width: 920px; }

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--condensed-font);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--corporate-blue);
}

h1, h2 {
  margin: 0;
  font-family: var(--display-font);
  letter-spacing: -0.085em;
  color: var(--summit-navy);
}

h1 {
  font-size: clamp(82px, 16vw, 220px);
  line-height: 0.78;
  text-shadow: 0 24px 44px rgba(47,128,237,0.15);
}

h2 { font-size: clamp(48px, 7vw, 108px); line-height: 0.9; }

.hero-line,
.content-terrace p:not(.eyebrow),
.summit-statement p {
  max-width: 560px;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.45;
  font-weight: 300;
}

.content-terrace,
.summit-statement {
  width: min(690px, 58vw);
  padding: 34px;
  border: 1px solid rgba(86,246,255,0.34);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(238,248,252,0.78), rgba(221,243,255,0.42));
  box-shadow: 0 30px 80px rgba(47,128,237,0.13), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
}

.terrace-right { justify-self: end; }

.field-note,
.trail-decision,
.signal-stack {
  width: min(390px, 38vw);
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(47,128,237,0.18);
  background: rgba(255,255,255,0.48);
  box-shadow: 0 18px 54px rgba(16,42,67,0.08);
  backdrop-filter: blur(14px);
}

.note-hero { margin: 8vh 0 0 43vw; }
.clearing-note { position: absolute; right: 8vw; bottom: 16vh; }

.field-note span,
.trail-decision span {
  font-family: var(--condensed-font);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--meadow-sage);
}

.trail-decision {
  cursor: pointer;
  text-align: left;
  color: var(--summit-navy);
  font-family: var(--body-font);
}
.trail-decision strong { display: block; margin: 8px 0; font-size: 22px; }
.trail-decision em { display: block; min-height: 20px; font-style: normal; color: var(--corporate-blue); }
.trail-decision.revealed { border-color: rgba(86,246,255,0.78); box-shadow: 0 0 34px rgba(86,246,255,0.28); }

.signal-stack { justify-self: start; margin-top: 34px; display: grid; gap: 12px; }
.signal-stack div { border-left: 2px solid var(--neon-cyan); padding-left: 14px; }
.signal-stack span { font-family: var(--condensed-font); color: var(--corporate-blue); margin-right: 12px; }

.folded-map {
  position: absolute;
  right: 11vw;
  top: 18vh;
  width: 34vw;
  height: 45vh;
  opacity: 0.22;
  background: repeating-linear-gradient(90deg, transparent 0 80px, rgba(47,128,237,0.38) 81px, transparent 82px), repeating-linear-gradient(0deg, transparent 0 80px, rgba(86,246,255,0.38) 81px, transparent 82px);
  transform: rotate(-7deg);
}

.altitude-ticks {
  position: absolute;
  right: 7vw;
  top: 18vh;
  display: grid;
  gap: 34px;
}
.altitude-ticks span { width: 70px; height: 1px; background: rgba(16,42,67,0.28); box-shadow: -10px 0 0 var(--neon-cyan); }

.lake-surface {
  position: absolute;
  left: 14vw;
  right: 8vw;
  bottom: 12vh;
  height: 17vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(221,243,255,0.72), rgba(86,246,255,0.18) 48%, transparent 70%);
  border-top: 1px solid rgba(86,246,255,0.32);
}

.dew-field i {
  position: absolute;
  bottom: calc(8vh + var(--d, 0px));
  left: var(--x);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 16px var(--neon-cyan);
}
.dew-field i:nth-child(1) { --x: 22%; --d: 12px; }
.dew-field i:nth-child(2) { --x: 35%; --d: 32px; }
.dew-field i:nth-child(3) { --x: 51%; --d: 5px; }
.dew-field i:nth-child(4) { --x: 66%; --d: 48px; }
.dew-field i:nth-child(5) { --x: 77%; --d: 19px; }
.dew-field i:nth-child(6) { --x: 86%; --d: 40px; }

.meadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12vh;
  background: linear-gradient(180deg, transparent, rgba(157,191,163,0.36));
}

.summit-flag {
  position: absolute;
  right: 22vw;
  top: 22vh;
  width: 2px;
  height: 140px;
  background: var(--summit-navy);
  box-shadow: 0 0 16px rgba(86,246,255,0.5);
}
.summit-flag::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 92px;
  height: 52px;
  background: linear-gradient(135deg, rgba(86,246,255,0.72), rgba(242,184,198,0.5));
  clip-path: polygon(0 0, 100% 16%, 76% 52%, 100% 88%, 0 74%);
}

.summit-statement h2 { font-size: clamp(68px, 10vw, 150px); }
.summit-signal { margin-top: 28px; justify-self: end; }

.reveal-plaque {
  opacity: 0;
  transform: translateX(-90px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.16,.84,.22,1);
}
.delay-one { transition-delay: 0.18s; }
.chapter-active .reveal-plaque,
.reveal-plaque.visible { opacity: 1; transform: translateX(0); }

@keyframes fogDrift {
  from { transform: translateX(-12vw) translateY(0); }
  to { transform: translateX(11vw) translateY(3vh); }
}

@media (max-width: 820px) {
  :root { --sidebar-width: 116px; }
  .expedition-sidebar { padding: 18px 10px; }
  .brand-mark span:last-child, .stop-copy em, .coordinate-card small { display: none; }
  .trail-stop { gap: 10px; }
  .trail-stop b { font-size: 12px; }
  .coordinate-card { padding: 10px; }
  .coordinate-card strong { font-size: 20px; }
  .chapter { padding: 12vh 5vw 8vh; }
  .content-terrace, .summit-statement, .field-note, .trail-decision, .signal-stack { width: 100%; }
  .note-hero { margin-left: 0; }
  .clearing-note { position: relative; right: auto; bottom: auto; margin-top: 22px; }
}