:root {
  /* Compliance phrase from DESIGN.md typography parse: Mono** coordinate labels */
  --graphite: #050609;
  --steel: #151922;
  --chrome: #C9D0D8;
  --mirror: #F4F7FA;
  --glacier: #6F8FA8;
  --acid: #D7FF3F;
  --red: #FF3B2F;
  --nickel: #A99F8D;
  --display: Poppins, Jost, Futura, "Futura PT", "Trebuchet MS", Arial, sans-serif;
  --body: Outfit, Poppins, Inter, Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--mirror);
  background: var(--graphite);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain, .chrome-drift {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.grain {
  opacity: .28;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(244,247,250,.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(106deg, transparent 0 11px, rgba(201,208,216,.05) 12px, transparent 13px 23px);
}
.chrome-drift {
  z-index: 3;
  opacity: .22;
  background: linear-gradient(115deg, transparent 0%, rgba(244,247,250,.04) 28%, rgba(111,143,168,.26) 45%, transparent 62%);
  transform: translate3d(var(--drift-x, 0px), var(--drift-y, 0px), 0);
}

.altimeter {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--mono);
  color: var(--acid);
}
.altimeter__rail {
  width: 3px;
  height: 62vh;
  background: linear-gradient(var(--chrome), var(--steel));
  position: relative;
  box-shadow: 0 0 0 1px rgba(244,247,250,.18), 0 0 22px rgba(215,255,63,.16);
}
.altimeter__rail::before {
  content: "";
  position: absolute;
  inset: 0 -7px;
  background: repeating-linear-gradient(to bottom, transparent 0 18px, rgba(244,247,250,.32) 19px 20px);
}
#altNeedle {
  position: absolute;
  left: -8px;
  top: 0%;
  width: 19px;
  height: 3px;
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
  transition: top .35s ease-out;
}
.altimeter__readout {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .12em;
  font-size: 11px;
}
.altimeter__readout strong { color: var(--mirror); font-family: var(--display); }

.band {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 8vh 8vw;
  isolation: isolate;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(145deg, rgba(244,247,250,.05), transparent 22% 65%, rgba(111,143,168,.12)),
    repeating-linear-gradient(168deg, rgba(201,208,216,.08) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 70% 12%, rgba(111,143,168,.24), transparent 28%);
}
.base { background: linear-gradient(180deg, #050609 0%, #151922 68%, #050609 100%); }
.fault { background: linear-gradient(160deg, #050609, #151922 45%, #050609); }
.ridge { background: radial-gradient(circle at 65% 35%, rgba(169,159,141,.18), transparent 30%), linear-gradient(180deg, #151922, #050609); }
.whiteout { color: var(--graphite); background: linear-gradient(135deg, #F4F7FA, #C9D0D8 38%, #6F8FA8 100%); }
.summit { background: linear-gradient(120deg, #050609 10%, #C9D0D8 52%, #151922 78%); }
.descent { background: linear-gradient(180deg, #151922, #050609 72%); }

.sky-stamp, .stamp, .red-mark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sky-stamp { position: absolute; top: 8vh; left: 9vw; color: var(--glacier); }
.stamp { color: var(--chrome); border: 1px solid currentColor; padding: 5px 8px; display: inline-block; transform: rotate(-2deg); }
.stamp.acid { color: var(--acid); }
.stamp.red, .red-mark { color: var(--red); }
.red-mark { text-decoration: line-through 3px var(--red); }

.wordmark {
  position: absolute;
  left: 6vw;
  bottom: 26vh;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(5rem, 18vw, 18rem);
  letter-spacing: -.085em;
  line-height: .72;
  color: var(--mirror);
  text-shadow: 0 0 1px #050609, 0 18px 60px rgba(244,247,250,.18);
  z-index: 1;
}
.chrome-ridge {
  position: absolute;
  left: -6vw;
  right: -6vw;
  bottom: -4vh;
  height: 43vh;
  z-index: 2;
  background:
    linear-gradient(103deg, transparent 0 6%, #6F8FA8 6.2% 16%, #F4F7FA 16.3% 29%, #A99F8D 29.4% 39%, #C9D0D8 39.4% 54%, #151922 54.4% 63%, #F4F7FA 63.4% 75%, #6F8FA8 75.4% 89%, transparent 89.4%),
    repeating-linear-gradient(12deg, rgba(5,6,9,.28) 0 2px, transparent 2px 12px);
  clip-path: polygon(0 100%, 0 54%, 10% 48%, 17% 24%, 29% 62%, 42% 16%, 57% 53%, 70% 12%, 82% 43%, 94% 29%, 100% 58%, 100% 100%);
  filter: drop-shadow(0 -30px 40px rgba(201,208,216,.16));
}

.contours { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; fill: none; pointer-events: none; }
.contours path, .fracture-lines path, .rope-map path {
  stroke: var(--chrome);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawLine 3.8s ease forwards;
}
.contours path:nth-child(2) { animation-delay: .35s; stroke: var(--glacier); }
.contours path:nth-child(3) { animation-delay: .7s; }
.contours path:nth-child(4) { animation-delay: 1s; stroke: var(--acid); }
.contours path:nth-child(5) { animation-delay: 1.25s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.field-card, .slab, .argument-note, .white-card, .summit-copy, .archive-card {
  position: absolute;
  z-index: 6;
  border: 1px solid rgba(244,247,250,.34);
  background:
    linear-gradient(135deg, rgba(244,247,250,.14), rgba(21,25,34,.86)),
    repeating-linear-gradient(102deg, rgba(244,247,250,.08) 0 1px, transparent 1px 9px);
  box-shadow: 0 26px 80px rgba(0,0,0,.44), inset 0 0 34px rgba(244,247,250,.08);
  padding: 24px;
  max-width: 430px;
  backdrop-filter: blur(4px);
}
.field-card--base { right: 10vw; top: 22vh; transform: rotate(2deg); }
.field-card p, .slab p, .argument-note p, .white-card p, .summit-copy p, .archive-card p { font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.35; }
.artifact-button, .artifact-link {
  position: absolute;
  z-index: 8;
  border: 1px solid var(--acid);
  color: var(--acid);
  background: rgba(5,6,9,.72);
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 18px;
  text-decoration: none;
  cursor: pointer;
}
.artifact-button { left: 11vw; bottom: 15vh; }
.artifact-button:hover, .artifact-link:hover { background: var(--acid); color: var(--graphite); }

.section-title {
  position: absolute;
  z-index: 7;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.04em;
  font-size: clamp(3rem, 10vw, 10rem);
  line-height: .78;
  color: rgba(244,247,250,.92);
  text-shadow: 0 18px 0 rgba(255,59,47,.26);
}
.whiteout .section-title { color: rgba(5,6,9,.86); text-shadow: 0 14px 0 rgba(255,59,47,.32); }
.section-title span { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .28em; color: var(--acid); margin-bottom: 12px; }
.section-title.left { left: 7vw; top: 10vh; }
.section-title.right { right: 7vw; top: 10vh; text-align: right; }
.section-title.center { left: 50%; top: 7vh; transform: translateX(-50%); text-align: center; }
.section-title.vertical { left: 5vw; top: 14vh; writing-mode: vertical-rl; }

.slab-a { right: 9vw; top: 18vh; width: 42vw; transform: rotate(-3deg); }
.slab-b { left: 15vw; bottom: 18vh; width: 32vw; transform: rotate(4deg); }
.slab-c { right: 20vw; bottom: 7vh; width: 30vw; transform: rotate(-1deg); }
.slab h2 { font-family: var(--display); font-size: clamp(2rem, 4.8vw, 5rem); line-height: .86; margin: 16px 0; }
.fracture-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; opacity: .66; }
.fracture-lines path { stroke: var(--red); stroke-width: 2; animation-delay: .4s; }

.rope-map { position: absolute; inset: 8vh 3vw; width: 94vw; height: 84vh; fill: none; z-index: 2; }
.rope-map path { stroke: var(--acid); stroke-width: 3; filter: drop-shadow(0 0 10px rgba(215,255,63,.35)); }
.rope-map circle { fill: var(--red); stroke: var(--mirror); stroke-width: 2; }
.argument-note { width: 320px; background: rgba(5,6,9,.78); }
.argument-note b { font-family: var(--mono); color: var(--acid); }
.note-one { left: 17vw; top: 24vh; transform: rotate(-4deg); }
.note-two { right: 22vw; top: 34vh; transform: rotate(3deg); }
.note-three { right: 7vw; bottom: 13vh; transform: rotate(-2deg); }

.mist {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(244,247,250,.82), transparent 24%), radial-gradient(circle at 70% 40%, rgba(244,247,250,.7), transparent 32%);
  filter: blur(28px);
  animation: mistDrift 9s ease-in-out infinite alternate;
}
@keyframes mistDrift { to { transform: translate3d(-8vw, 5vh, 0) scale(1.08); } }
.notation-cloud { position: absolute; inset: 22vh 8vw; z-index: 4; font-family: var(--mono); color: rgba(5,6,9,.72); }
.notation-cloud span { position: absolute; font-size: clamp(1rem, 2.4vw, 2.4rem); opacity: .18; animation: notation 4s ease-in-out infinite alternate; }
.notation-cloud span:nth-child(1) { left: 2%; top: 14%; }
.notation-cloud span:nth-child(2) { right: 8%; top: 2%; animation-delay: .8s; }
.notation-cloud span:nth-child(3) { left: 20%; bottom: 24%; animation-delay: 1.2s; }
.notation-cloud span:nth-child(4) { right: 25%; bottom: 10%; color: var(--red); animation-delay: .4s; }
.notation-cloud span:nth-child(5) { left: 46%; top: 43%; animation-delay: 1.8s; }
.notation-cloud span:nth-child(6) { left: 4%; bottom: 6%; animation-delay: 2.2s; }
@keyframes notation { to { opacity: .74; transform: translateY(-14px); } }
.white-card { left: 9vw; bottom: 12vh; color: var(--graphite); background: rgba(244,247,250,.68); border-color: rgba(5,6,9,.28); }

.instrument {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(68vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.dial { position: absolute; border-radius: 50%; inset: 0; border: 2px solid var(--mirror); }
.dial-outer { background: conic-gradient(from 40deg, #050609, #F4F7FA, #6F8FA8, #151922, #C9D0D8, #050609); box-shadow: 0 0 70px rgba(244,247,250,.35); }
.dial-mid { inset: 14%; border-style: dashed; background: rgba(5,6,9,.54); }
.dial-inner { inset: 34%; display: grid; place-items: center; text-align: center; font-family: var(--mono); color: var(--acid); background: #050609; box-shadow: inset 0 0 44px rgba(215,255,63,.18); }
.needle { position: absolute; left: 50%; top: 50%; width: 3px; height: 38%; background: var(--red); transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--needle, 25deg)); box-shadow: 0 0 18px var(--red); }
.ticks { position: absolute; inset: 5%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(5,6,9,.9) 0deg 1deg, transparent 1deg 8deg); mask: radial-gradient(transparent 58%, #000 59% 63%, transparent 64%); }
.summit-copy { right: 7vw; bottom: 9vh; max-width: 380px; background: rgba(5,6,9,.72); }

.quiet-ridge { position: absolute; left: -5vw; right: -5vw; bottom: 0; height: 36vh; background: linear-gradient(100deg, #151922, #6F8FA8, #C9D0D8, #050609); clip-path: polygon(0 100%, 0 62%, 15% 44%, 30% 65%, 48% 26%, 64% 59%, 82% 37%, 100% 61%, 100% 100%); opacity: .74; }
.archive-card { background: linear-gradient(135deg, rgba(169,159,141,.78), rgba(244,247,250,.12)); }
.card-one { left: 9vw; top: 28vh; transform: rotate(-7deg); }
.card-two { right: 14vw; top: 34vh; transform: rotate(5deg); }
.card-three { left: 36vw; bottom: 16vh; transform: rotate(-2deg); }
.artifact-link { right: 8vw; bottom: 8vh; }

.reveal { opacity: 0; transform: translate3d(0, 46px, 0) rotate(var(--r, 0deg)); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translate3d(var(--stagger-x, 0), 0, 0) rotate(var(--r, 0deg)); }
.delay-1 { transition-delay: .14s; }
.delay-2 { transition-delay: .28s; }
.band.is-active .chrome-ridge, .parallax { transform: translate3d(0, var(--parallax, 0px), 0); }

@media (max-width: 760px) {
  .altimeter { right: 8px; }
  .band { padding: 7vh 6vw; }
  .field-card, .slab, .argument-note, .white-card, .summit-copy, .archive-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; margin: 18vh 8vw 0 0; }
  .section-title, .section-title.left, .section-title.right, .section-title.center, .section-title.vertical { position: relative; left: auto; right: auto; top: auto; transform: none; writing-mode: horizontal-tb; text-align: left; }
  .wordmark { font-size: 22vw; bottom: 32vh; }
  .artifact-button, .artifact-link { left: 6vw; right: auto; bottom: 6vh; }
}