:root {
  /* DESIGN font token: Mono** */
  --chalk: #F7F1DF;
  --blue: #1D5DFF;
  --ink: #171717;
  --green: #21A67A;
  --vermilion: #FF4B2E;
  --sun: #FFD447;
  --display: "Fraunces", Georgia, serif;
  --body: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

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

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .42;
  background:
    linear-gradient(90deg, rgba(23,23,23,.05) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(circle at 18% 8%, rgba(255,212,71,.38), transparent 18rem),
    repeating-linear-gradient(-8deg, transparent 0 18px, rgba(23,23,23,.035) 19px 20px);
  mix-blend-mode: multiply;
}

.page-frame {
  position: fixed;
  inset: 16px;
  border: 6px solid var(--ink);
  z-index: 20;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--chalk);
}

.altitude-ruler {
  position: fixed;
  top: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 142px;
  border-right: 4px solid var(--blue);
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
}
.altitude-ruler a {
  color: var(--ink);
  text-decoration: none;
  background: var(--chalk);
  border: 2px solid var(--ink);
  padding: 8px 7px;
  transform: translateX(-5px) skewY(-5deg);
  transition: background .2s, color .2s, transform .2s;
}
.altitude-ruler a.active, .altitude-ruler a:hover { background: var(--blue); color: var(--chalk); transform: translateX(8px) skewY(-5deg); }
.altitude-ruler span { display: block; color: var(--vermilion); }
.altitude-ruler a.active span, .altitude-ruler a:hover span { color: var(--sun); }

.panel {
  position: relative;
  min-height: 100vh;
  padding: 8vw 7vw 7vw 190px;
  border-bottom: 6px solid var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.panel::after {
  content: attr(data-act);
  position: absolute;
  right: 22px;
  top: 26px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
  background: var(--sun);
  border: 3px solid var(--ink);
  padding: 9px 12px;
  z-index: 3;
}
.kicker { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(10px, 1.2vw, 14px); color: var(--blue); font-weight: 700; }
h1, h2 { font-family: var(--display); font-weight: 900; line-height: .78; letter-spacing: -.07em; margin: 0; }
h1 { font-size: clamp(78px, 15vw, 238px); max-width: 11ch; transform: translateX(-.08em); }
h2 { font-size: clamp(68px, 11vw, 176px); }
p { font-size: clamp(18px, 2vw, 28px); line-height: 1.24; }

.basecamp { background: var(--chalk); }
.mountain-wall {
  position: absolute;
  inset: 9vh -8vw -8vh 26vw;
  background:
    linear-gradient(142deg, transparent 0 28%, var(--ink) 28.3% 29.2%, transparent 29.5%),
    linear-gradient(157deg, transparent 0 38%, var(--blue) 38.3% 39.4%, transparent 39.7%),
    linear-gradient(125deg, var(--chalk) 0 52%, var(--sun) 52% 64%, var(--blue) 64% 72%, var(--chalk) 72%);
  clip-path: polygon(0 74%, 13% 42%, 22% 55%, 37% 14%, 49% 45%, 62% 21%, 77% 61%, 88% 31%, 100% 78%, 100% 100%, 0 100%);
  border: 6px solid var(--ink);
  opacity: .92;
  z-index: -2;
}
.hero-copy { position: relative; z-index: 2; max-width: 980px; }
.lead { max-width: 690px; background: var(--chalk); border: 4px solid var(--ink); padding: 18px 22px; box-shadow: 12px 12px 0 var(--vermilion); }
.transect-line { position: absolute; left: 18%; top: 70%; width: 72vw; height: 6px; background: var(--green); transform: rotate(-19deg); border: 2px solid var(--ink); z-index: 0; }

.honeycomb { position: absolute; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; z-index: 4; }
.hero-comb { right: 6vw; bottom: 11vh; width: min(520px, 50vw); transform: rotate(-12deg); }
.slope-comb { right: 4vw; top: 15vh; width: min(640px, 55vw); transform: skewY(-10deg); }
.ridge-comb { right: 5vw; bottom: 8vh; width: min(470px, 44vw); transform: rotate(8deg); }
.horizon-comb { left: 38vw; bottom: 9vh; width: min(780px, 58vw); transform: rotate(-4deg); }
.hex {
  --fill: var(--chalk);
  width: 118px;
  height: 104px;
  border: 0;
  padding: 0;
  background: var(--ink);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  cursor: pointer;
  position: relative;
  color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: 700;
  transition: transform .24s, filter .24s;
}
.hex::before { content: ""; position: absolute; inset: 5px; clip-path: inherit; background: var(--fill); background-image: repeating-linear-gradient(112deg, rgba(23,23,23,.08) 0 1px, transparent 1px 11px); }
.hex span { position: relative; z-index: 2; display: grid; place-items: center; height: 100%; padding: 12px; }
.hex:hover, .hex.stamped { transform: translate(-6px, -6px) rotate(3deg); filter: drop-shadow(10px 10px 0 var(--ink)); }
.hex.stamped::after { content: "STAMPED"; position: absolute; z-index: 3; inset: 35% 8%; border: 3px solid var(--vermilion); color: var(--vermilion); background: rgba(247,241,223,.65); transform: rotate(-12deg); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; }
.hex.sun { --fill: var(--sun); }
.hex.blue { --fill: var(--blue); color: var(--chalk); }
.hex.green { --fill: var(--green); }
.hex.vermilion { --fill: var(--vermilion); color: var(--chalk); }
.hex.ink { --fill: var(--ink); color: var(--chalk); }
.hex.paper { --fill: var(--chalk); }
.hex.large { width: 166px; height: 146px; }
.hex.small { width: 76px; height: 68px; }
.hex.wide { width: 174px; }
.hex.tall { height: 150px; }
.hex.ghost { opacity: .88; }
.active-node { animation: pulseCell 2.4s infinite steps(2, jump-none); }

.ripple-origin, .ripple-origin::before, .ripple-origin::after {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid var(--vermilion);
  right: 29vw;
  bottom: 31vh;
  z-index: 3;
  pointer-events: none;
}
.ripple-origin::before, .ripple-origin::after { content: ""; inset: -4px; right: auto; bottom: auto; animation: ripple 2.6s infinite; }
.ripple-origin::after { animation-delay: .85s; border-color: var(--blue); }

.barter { background: var(--sun); }
.slab { background: var(--blue); color: var(--chalk); border: 6px solid var(--ink); padding: 24px; width: min(560px, 65vw); box-shadow: 18px 18px 0 var(--ink); transform: rotate(-2deg); }
.slab span, .receipt, .ledger-lines, .stamp-seal, .final-stamp, .tag { font-family: var(--mono); text-transform: uppercase; }
.essay { max-width: 560px; margin-top: 42px; background: var(--chalk); border: 4px solid var(--ink); padding: 22px; }
.receipt { position: absolute; background: var(--chalk); border: 3px solid var(--ink); padding: 18px; font-size: 13px; line-height: 1.5; box-shadow: 9px 9px 0 rgba(23,23,23,.25); clip-path: polygon(0 0, 100% 0, 96% 12%, 100% 25%, 97% 43%, 100% 60%, 95% 100%, 0 100%, 4% 82%, 0 63%, 5% 45%, 0 24%); }
.receipt.one { left: 52vw; bottom: 12vh; transform: rotate(7deg); }
.receipt.two { left: 22vw; bottom: 9vh; transform: rotate(-9deg); }

.ledger { background: var(--blue); color: var(--chalk); }
.ledger-paper { width: min(720px, 72vw); background: var(--chalk); color: var(--ink); border: 6px solid var(--ink); padding: 32px; box-shadow: 20px 20px 0 var(--vermilion); background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(29,93,255,.26) 32px 34px); }
.ledger-paper h2 { color: var(--ink); }
.ledger-lines { margin-top: 26px; display: grid; gap: 12px; font-size: 13px; }
.ledger-lines div { display: grid; grid-template-columns: 86px 1fr 1.2fr; gap: 14px; border-top: 3px solid var(--ink); padding-top: 8px; }
.ledger-lines span { color: var(--vermilion); font-weight: 700; }
.ledger-lines em { font-style: normal; color: var(--blue); }
.stamp-seal { position: absolute; right: 15vw; top: 15vh; color: var(--vermilion); border: 8px double var(--vermilion); border-radius: 50%; width: 190px; height: 190px; display: grid; place-items: center; font-weight: 700; font-size: 24px; transform: rotate(16deg); background: rgba(247,241,223,.72); }

.trust { background: var(--chalk); min-height: 105vh; }
.pass-copy { max-width: 660px; margin-left: auto; position: relative; z-index: 4; }
.pass-copy h2 { color: var(--green); text-shadow: 5px 5px 0 var(--ink); }
.contour-field { position: absolute; inset: 12vh 10vw 10vh 170px; border: 6px solid var(--ink); background: var(--chalk); overflow: hidden; z-index: 0; }
.contour-field span { position: absolute; border: 5px solid var(--blue); border-radius: 50%; opacity: .9; animation: contourDrift 5s infinite alternate ease-in-out; }
.contour-field span:nth-child(1) { width: 38vw; height: 21vw; left: 8%; top: 16%; }
.contour-field span:nth-child(2) { width: 52vw; height: 30vw; left: 16%; top: 27%; border-color: var(--green); animation-delay: -.8s; }
.contour-field span:nth-child(3) { width: 24vw; height: 14vw; right: 9%; top: 12%; border-color: var(--vermilion); animation-delay: -1.4s; }
.contour-field span:nth-child(4) { width: 62vw; height: 39vw; left: -3%; bottom: -12%; border-color: var(--sun); animation-delay: -2s; }
.field-tags { position: absolute; left: 220px; bottom: 13vh; display: flex; gap: 12px; flex-wrap: wrap; z-index: 5; }
.tag { border: 3px solid var(--ink); background: var(--sun); padding: 14px 16px; font-weight: 700; box-shadow: 7px 7px 0 var(--ink); cursor: pointer; }
.tag:hover, .tag.stamped { background: var(--vermilion); color: var(--chalk); transform: rotate(-4deg); }

.summit { min-height: 108vh; background: linear-gradient(180deg, var(--sun) 0 28%, var(--chalk) 28% 64%, var(--green) 64% 100%); }
.sun-disc { position: absolute; width: 42vw; height: 42vw; background: radial-gradient(circle, var(--sun) 0 45%, var(--vermilion) 45% 48%, transparent 48%); border-radius: 50%; right: -8vw; top: 7vh; opacity: .9; }
.summit-title { position: relative; z-index: 4; width: min(780px, 72vw); background: var(--chalk); border: 6px solid var(--ink); padding: 26px; box-shadow: 22px 22px 0 var(--blue); }
.final-stamp { position: absolute; left: 26vw; bottom: 12vh; z-index: 6; background: var(--vermilion); color: var(--chalk); border: 5px solid var(--ink); padding: 18px 28px; font-size: clamp(22px, 4vw, 56px); font-weight: 700; transform: rotate(-8deg); }

.note-panel { position: fixed; right: 28px; bottom: 28px; z-index: 40; max-width: 310px; min-height: 54px; background: var(--chalk); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--blue); padding: 13px 15px; font-family: var(--mono); text-transform: uppercase; font-size: 12px; }

@keyframes ripple { from { transform: scale(.4); opacity: .85; } to { transform: scale(9); opacity: 0; } }
@keyframes pulseCell { 0%, 100% { filter: saturate(1); } 50% { filter: saturate(1.8) drop-shadow(0 0 0 var(--sun)); } }
@keyframes contourDrift { from { transform: translate(-10px, 8px) rotate(-2deg); } to { transform: translate(16px, -12px) rotate(3deg); } }

@media (max-width: 860px) {
  .altitude-ruler { display: none; }
  .panel { padding: 88px 24px 44px; }
  .page-frame { inset: 8px; border-width: 4px; }
  .honeycomb { position: relative; inset: auto; width: 100%; margin-top: 36px; transform: none; }
  .receipt, .stamp-seal, .final-stamp { position: relative; inset: auto; display: inline-grid; margin: 18px 10px 0 0; }
  .contour-field { inset: 220px 20px 120px 20px; }
  .field-tags { left: 30px; right: 30px; }
  .ledger-lines div { grid-template-columns: 1fr; }
}