:root {
  /* Typography compliance notes: Barlow Condensed, Roboto Condensed** from Google Fonts for body copy, IBM Plex Mono** from Google Fonts for coordinates. */
  --deep-navy: #071B33;
  --gunmetal: #1E344D;
  --ink: #020812;
  --pine: #1F5A46;
  --lichen: #A5C95A;
  --steel: #9AA8B8;
  --aluminum: #DCE6EF;
  --amber: #F2A541;
  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--aluminum);
  font-family: var(--body);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.design-metadata { display: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .16;
  background-image:
    linear-gradient(90deg, rgba(220,230,239,.04) 1px, transparent 1px),
    linear-gradient(rgba(220,230,239,.035) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(154,168,184,.06) 10px 11px);
  background-size: 44px 44px, 44px 44px, 18px 18px;
  mix-blend-mode: screen;
}

.chapter-rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: grid;
  gap: 17px;
  font-family: var(--mono);
  color: var(--steel);
}

.chapter-rail::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--steel), var(--lichen), var(--amber));
  opacity: .48;
}

.rail-code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  letter-spacing: .16em;
  margin-left: 4px;
  color: var(--amber);
}

.rail-dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid var(--steel);
  background: var(--deep-navy);
  position: relative;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.rail-dot span { font-size: 9px; position: relative; z-index: 1; }
.rail-dot.active { transform: translateX(7px); background: var(--amber); color: var(--ink); border-color: var(--aluminum); }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep-navy);
  border-bottom: 1px solid rgba(154,168,184,.22);
}

.sky-plate {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 18%, rgba(242,165,65,.16), transparent 11%),
    linear-gradient(125deg, var(--deep-navy), var(--gunmetal) 48%, #102a42 49%, var(--deep-navy));
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  z-index: -10;
}

.layer { will-change: transform; }

.ridge {
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: 0;
  height: 43vh;
  z-index: -6;
  opacity: .95;
}

.ridge-back {
  background: var(--gunmetal);
  clip-path: polygon(0 73%, 8% 48%, 19% 62%, 31% 31%, 43% 57%, 54% 24%, 66% 62%, 77% 38%, 88% 58%, 100% 29%, 100% 100%, 0 100%);
}

.ridge-mid {
  height: 34vh;
  background: #123153;
  clip-path: polygon(0 80%, 12% 40%, 24% 69%, 37% 33%, 50% 76%, 62% 39%, 75% 68%, 87% 34%, 100% 73%, 100% 100%, 0 100%);
}

.pine-wall, .pine-cluster {
  position: absolute;
  left: -4vw;
  right: -4vw;
  bottom: -1px;
  height: 37vh;
  z-index: 4;
  background:
    linear-gradient(120deg, transparent 0 4%, var(--ink) 4.3% 7%, transparent 7.3% 11%, var(--ink) 11.2% 15%, transparent 15.3% 20%, var(--ink) 20.2% 25%, transparent 25.4% 31%, var(--ink) 31.3% 36%, transparent 36.4% 43%, var(--ink) 43.3% 49%, transparent 49.3% 57%, var(--ink) 57.3% 63%, transparent 63.2% 70%, var(--ink) 70.3% 76%, transparent 76.4% 84%, var(--ink) 84.4% 91%, transparent 91.2% 100%);
  clip-path: polygon(0 32%, 4% 4%, 8% 35%, 12% 0, 17% 43%, 22% 6%, 28% 44%, 34% 10%, 41% 50%, 48% 2%, 55% 44%, 63% 7%, 70% 46%, 77% 0, 83% 43%, 91% 9%, 100% 39%, 100% 100%, 0 100%);
}

.pine-cluster { height: 28vh; opacity: .82; background: var(--pine); z-index: 3; }

.foreground-grass {
  position: absolute;
  left: -6vw;
  right: -6vw;
  bottom: -2vh;
  height: 18vh;
  z-index: 12;
  background: var(--ink);
  clip-path: polygon(0 85%, 3% 42%, 5% 86%, 8% 34%, 11% 84%, 14% 51%, 17% 83%, 20% 30%, 24% 84%, 28% 44%, 32% 86%, 36% 29%, 39% 82%, 44% 46%, 47% 86%, 52% 35%, 56% 84%, 61% 45%, 65% 85%, 69% 28%, 73% 83%, 77% 47%, 81% 86%, 85% 33%, 89% 84%, 93% 47%, 96% 86%, 100% 37%, 100% 100%, 0 100%);
}

.hero-title-block {
  position: absolute;
  left: clamp(54px, 8vw, 124px);
  bottom: 12vh;
  width: min(86vw, 1240px);
  z-index: 10;
}

.micro {
  font-family: var(--mono);
  color: var(--amber);
  letter-spacing: .22em;
  font-size: 12px;
  margin: 0 0 12px;
}

h1, h2 {
  font-family: var(--display);
  text-transform: uppercase;
  margin: 0;
  line-height: .82;
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(76px, 16vw, 230px);
  color: var(--aluminum);
  max-width: 1120px;
  text-shadow: 0 16px 0 rgba(2,8,18,.34);
}

h2 {
  font-size: clamp(58px, 9vw, 148px);
  color: var(--aluminum);
  max-width: 760px;
}

.license-plate {
  position: absolute;
  left: 2vw;
  top: 32%;
  width: min(68vw, 720px);
  min-height: 132px;
  padding: 24px 34px;
  color: var(--ink);
  background: linear-gradient(100deg, #6e7d8d, var(--steel) 34%, var(--aluminum) 48%, #7d8b98 64%, var(--steel));
  border: 4px solid var(--aluminum);
  box-shadow: 18px 18px 0 rgba(2,8,18,.44), inset 0 0 0 2px rgba(7,27,51,.45);
  transform: translateX(-115%);
  transition: transform 1.1s cubic-bezier(.18,.85,.2,1);
}

.license-plate.open { transform: translateX(42%); }
.license-plate span, .license-plate em { font-family: var(--mono); display: block; font-style: normal; font-size: 12px; letter-spacing: .2em; }
.license-plate b { display: block; font-family: var(--display); font-size: clamp(36px, 5vw, 76px); line-height: .8; }

.trail-line {
  position: absolute;
  left: 13vw;
  right: 10vw;
  top: 47%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lichen), var(--amber), transparent);
  z-index: 2;
  transform: rotate(-7deg);
  transform-origin: left;
}

.trail-line i, .coordinate-pings span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--amber);
  background: var(--deep-navy);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242,165,65,.6);
  animation: ping 1.8s ease-out infinite;
}

.trail-line i:nth-child(1) { left: 18%; top: -6px; }
.trail-line i:nth-child(2) { left: 52%; top: -6px; animation-delay: .35s; }
.trail-line i:nth-child(3) { left: 79%; top: -6px; animation-delay: .7s; }
.coordinate-pings span { left: var(--x); top: var(--y); z-index: 11; opacity: 0; }
.coordinate-pings.ready span { opacity: 1; }
.coordinate-pings span:nth-child(2) { animation-delay: .25s; }
.coordinate-pings span:nth-child(3) { animation-delay: .5s; }
.coordinate-pings span:nth-child(4) { animation-delay: .75s; }

@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(242,165,65,.65); } 80% { box-shadow: 0 0 0 22px rgba(242,165,65,0); } 100% { box-shadow: 0 0 0 0 rgba(242,165,65,0); } }

.scene-copy {
  position: absolute;
  left: clamp(68px, 9vw, 138px);
  top: 24vh;
  z-index: 20;
  max-width: 540px;
  transform: translateX(-42px);
  opacity: .25;
  transition: transform .75s ease, opacity .75s ease;
}

.scene.active .scene-copy { transform: translateX(0); opacity: 1; }
.right-copy { left: auto; right: clamp(42px, 8vw, 110px); }
.scene-copy p:not(.micro) { font-size: clamp(18px, 2vw, 25px); line-height: 1.22; color: var(--steel); margin: 22px 0 0; }

.coord-panel {
  position: absolute;
  left: clamp(72px, 8vw, 122px);
  top: 9vh;
  z-index: 22;
  width: 260px;
  padding: 16px 18px;
  border-left: 6px solid var(--amber);
  background: rgba(2,8,18,.72);
  box-shadow: 12px 12px 0 rgba(154,168,184,.18);
  transform: translateX(-105%);
  transition: transform .7s cubic-bezier(.18,.82,.22,1);
}

.scene.active .coord-panel { transform: translateX(0); }
.coord-panel span { display:block; font-family: var(--mono); color: var(--lichen); font-size: 12px; letter-spacing: .18em; }
.coord-panel strong { display:block; margin-top: 8px; font-family: var(--display); text-transform: uppercase; font-size: 31px; line-height: .9; }

.map-band, .tag-field, .territory-map, .clear-path, .ranger-station, .completed-map, .permit-board {
  position: absolute;
  z-index: 8;
}

.map-band { right: 7vw; top: 19vh; width: min(52vw, 700px); height: 58vh; }
.folded-map { position: relative; width: 100%; height: 100%; background: linear-gradient(135deg, #173958, var(--gunmetal)); border: 3px solid var(--steel); box-shadow: 22px 22px 0 rgba(2,8,18,.36); clip-path: polygon(0 8%, 32% 0, 64% 7%, 100% 1%, 94% 100%, 62% 92%, 30% 100%, 0 92%); overflow: hidden; }
.contour { position: absolute; border: 2px solid rgba(220,230,239,.28); border-radius: 50%; }
.c1 { width: 64%; height: 42%; left: 11%; top: 16%; }.c2 { width: 46%; height: 34%; right: 6%; bottom: 12%; }.c3 { width: 86%; height: 72%; left: -10%; bottom: -18%; }
.cartridge { position: absolute; left: 16%; top: 19%; padding: 36px 28px; background: var(--ink); border-top: 18px solid var(--steel); color: var(--aluminum); font: 800 44px/.78 var(--display); transform: rotate(-8deg); }
.controller-mark { position: absolute; right: 10%; bottom: 17%; color: var(--amber); font: 700 34px var(--mono); letter-spacing: .24em; }

.clause-stack { position: absolute; right: 6vw; bottom: 15vh; z-index: 24; display: grid; gap: 10px; transform: translateX(110%); transition: transform .8s ease .16s; }
.scene.active .clause-stack { transform: translateX(0); }
.clause { min-width: 280px; padding: 14px 16px; background: var(--steel); color: var(--ink); border-left: 8px solid var(--aluminum); font: 700 24px/.9 var(--display); letter-spacing: .03em; text-transform: uppercase; box-shadow: 10px 10px 0 rgba(2,8,18,.34); }
.clause.amber { background: var(--amber); }.clause.green { background: var(--lichen); }.clause-stack.wide { right: auto; left: 9vw; bottom: 13vh; }

.tag-field { left: 12vw; top: 18vh; width: 50vw; height: 64vh; }
.field-tag { position: absolute; padding: 18px 26px; background: var(--steel); color: var(--ink); border: 3px solid var(--aluminum); box-shadow: 14px 14px 0 rgba(2,8,18,.36); font: 800 clamp(28px, 4vw, 58px)/.8 var(--display); text-transform: uppercase; }
.field-tag:nth-child(1) { left: 3%; top: 6%; transform: rotate(-5deg); }.field-tag:nth-child(2) { right: 6%; top: 22%; transform: rotate(4deg); }.field-tag:nth-child(3) { left: 20%; top: 43%; transform: rotate(-2deg); }.field-tag:nth-child(4) { right: 0; bottom: 14%; transform: rotate(-6deg); }.field-tag:nth-child(5) { left: 6%; bottom: 2%; transform: rotate(5deg); }
.field-tag.green { background: var(--lichen); }.field-tag.amber { background: var(--amber); }.field-tag.steel { background: var(--gunmetal); color: var(--aluminum); }
.permit-board { left: 7vw; bottom: 18vh; width: 36vw; min-width: 340px; padding: 26px; background: rgba(31,90,70,.84); border: 3px solid var(--lichen); box-shadow: 16px 16px 0 rgba(2,8,18,.36); }
.permit-seal { float: left; margin-right: 18px; width: 94px; height: 94px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--ink); font: 800 48px var(--display); }
.permit-board p { font: 700 32px/.95 var(--display); margin: 8px 0 0; color: var(--aluminum); }

.territory-map { right: 7vw; top: 16vh; width: 58vw; height: 64vh; border: 3px solid var(--steel); background: linear-gradient(120deg, rgba(31,90,70,.78), rgba(30,52,77,.86)); box-shadow: 24px 24px 0 rgba(2,8,18,.32); }
.territory-map::before { content: ""; position: absolute; inset: 9%; background: repeating-radial-gradient(ellipse at 45% 45%, transparent 0 22px, rgba(220,230,239,.22) 24px 26px); }
.zone { position: absolute; padding: 15px 18px; background: var(--ink); border: 2px solid var(--aluminum); color: var(--aluminum); font: 700 24px/.85 var(--display); z-index: 2; }
.z1 { left: 11%; top: 18%; }.z2 { right: 12%; top: 37%; }.z3 { left: 31%; bottom: 17%; }
.route { position: absolute; left: 15%; top: 27%; width: 68%; height: 42%; border-left: 5px solid var(--amber); border-bottom: 5px solid var(--lichen); transform: skew(-18deg); z-index: 1; }
.animal-tracks { position: absolute; left: 14vw; bottom: 18vh; display: flex; gap: 30px; color: var(--amber); font: 700 34px var(--mono); transform: rotate(-17deg); z-index: 18; }

.clear-path { left: 13vw; top: 17vh; width: 72vw; height: 65vh; }
.clear-path::before { content: ""; position: absolute; left: 18%; right: 18%; top: 8%; bottom: 0; background: linear-gradient(180deg, rgba(165,201,90,.18), rgba(242,165,65,.28)); clip-path: polygon(39% 0, 62% 0, 80% 100%, 12% 100%); border-bottom: 5px solid var(--amber); }
.barrier { position: absolute; top: 18%; width: 28%; height: 45%; background: var(--ink); border: 3px solid var(--steel); box-shadow: inset 0 0 0 10px var(--gunmetal); transition: transform .8s ease; }
.barrier.left { left: 5%; transform: translateX(0) rotate(-7deg); }.barrier.right { right: 5%; transform: translateX(0) rotate(7deg); }
.scene.active .barrier.left { transform: translateX(-28%) rotate(-10deg); }.scene.active .barrier.right { transform: translateX(28%) rotate(10deg); }
.path-stamp { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-5deg) scale(.86); padding: 24px 32px; border: 6px solid var(--amber); color: var(--amber); font: 800 clamp(42px, 6vw, 92px)/.78 var(--display); text-transform: uppercase; opacity: .25; transition: opacity .5s ease .42s, transform .5s ease .42s; }
.scene.active .path-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }

.moon-disk, .station-glow { position: absolute; right: 13vw; top: 9vh; width: 190px; height: 190px; border-radius: 50%; background: var(--aluminum); opacity: .18; box-shadow: 0 0 70px rgba(220,230,239,.28); }
.station-glow { left: 46vw; right: auto; top: 22vh; width: 310px; height: 310px; background: var(--amber); opacity: .16; }
.ranger-station { right: 12vw; bottom: 16vh; width: min(42vw, 520px); height: 42vh; background: var(--gunmetal); border: 4px solid var(--steel); box-shadow: 22px 22px 0 rgba(2,8,18,.38); }
.ranger-station .roof { position: absolute; left: -8%; right: -8%; top: -22%; height: 28%; background: var(--ink); clip-path: polygon(0 100%, 50% 0, 100% 100%); border-bottom: 8px solid var(--amber); }
.tower { position: absolute; left: 8%; top: 14%; width: 118px; height: 148px; display: grid; place-items: center; background: var(--steel); color: var(--ink); font: 800 66px var(--display); }
.window { position: absolute; right: 12%; top: 23%; width: 38%; height: 30%; background: var(--amber); box-shadow: 0 0 44px rgba(242,165,65,.44); }
.completed-map { left: 9vw; bottom: 13vh; display: flex; gap: 8px; z-index: 25; flex-wrap: wrap; max-width: 560px; }
.completed-map span, .permit-button { padding: 13px 15px; border: 2px solid var(--steel); background: rgba(2,8,18,.76); color: var(--aluminum); font: 700 18px/.9 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.permit-button { display: inline-block; margin-top: 28px; background: linear-gradient(110deg, var(--steel), var(--aluminum), var(--steel)); color: var(--ink); border-color: var(--aluminum); box-shadow: 9px 9px 0 rgba(2,8,18,.42); }

@media (max-width: 760px) {
  .chapter-rail { left: 8px; }
  .scene-copy, .right-copy { left: 54px; right: 18px; top: 18vh; max-width: none; }
  .coord-panel { left: 54px; top: 5vh; width: 218px; }
  .license-plate { width: 82vw; top: 42%; }
  .license-plate.open { transform: translateX(8%); }
  .map-band, .tag-field, .territory-map, .clear-path, .ranger-station { width: 78vw; left: 16vw; right: auto; opacity: .72; }
  .clause-stack { right: 5vw; bottom: 7vh; }
  .clause { min-width: 220px; font-size: 20px; }
  .completed-map { left: 54px; bottom: 8vh; }
}