:root {
  /* Compliance note: IBM Plex Mono* / Mono** for directory listings, checksum marks, and circuit IDs. */
  --paper: #D9CBA7;
  --fiber: #8F7A55;
  --chrome: #D7DEE8;
  --ink: #151922;
  --mercury: #8AB8C8;
  --alarm: #D7263D;
  --acid: #B6FF3B;
  --plate-turn: 0deg;
  --scan-weight: 620;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 22%, rgba(215, 38, 61, .12), transparent 26%),
    radial-gradient(circle at 78% 12%, rgba(138, 184, 200, .22), transparent 30%),
    linear-gradient(135deg, #cab98f 0%, var(--paper) 42%, #e5d9b8 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(143, 122, 85, .16) 49% 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 88%, rgba(21, 25, 34, .08) 90%, transparent 92%);
  background-size: 83px 83px, 100% 34px;
  mix-blend-mode: multiply;
  opacity: .55;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(21, 25, 34, .17) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(143, 122, 85, .22) 1px, transparent 1.7px),
    linear-gradient(110deg, transparent 0 46%, rgba(255,255,255,.18) 47% 48%, transparent 49%);
  background-size: 17px 19px, 29px 31px, 100% 100%;
  opacity: .32;
}

.cursor-readout {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 20;
  padding: 9px 12px;
  color: var(--acid);
  background: rgba(21, 25, 34, .88);
  border: 1px solid rgba(182, 255, 59, .45);
  box-shadow: 0 0 24px rgba(182, 255, 59, .2);
  font-size: 11px;
  letter-spacing: .08em;
}

.inventory-tag {
  position: fixed;
  top: 32px;
  left: clamp(18px, 4vw, 56px);
  z-index: 15;
  width: min(420px, calc(100vw - 36px));
  padding: 19px 26px 20px 72px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(215,222,232,.68) 35%, rgba(94,108,119,.52) 50%, rgba(247,250,252,.88) 68%, rgba(175,187,197,.72)),
    var(--chrome);
  border: 1px solid rgba(21,25,34,.35);
  clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%, 5% 50%);
  box-shadow: 18px 22px 36px rgba(21,25,34,.28), inset 0 1px 0 rgba(255,255,255,.85);
  transform: translateX(-120%) rotate(-2deg);
  animation: tagSlide .9s cubic-bezier(.17,.84,.3,1.2) .25s forwards;
}

.tag-holes { position: absolute; left: 24px; top: 22px; display: grid; gap: 20px; }
.tag-holes span { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 2px 6px rgba(21,25,34,.45); }
.tag-kicker, .tag-command, .mono-label { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tag-kicker { font-family: "Syne", system-ui, sans-serif; color: rgba(21,25,34,.62); }
.tag-command { color: var(--alarm); }

h1, h2 {
  margin: 0;
  font-family: "Recursive", "Syne", system-ui, sans-serif;
  font-variation-settings: "wght" var(--scan-weight), "CASL" .25, "MONO" .25, "slnt" -5;
  line-height: .9;
}

h1 { font-size: clamp(2.7rem, 8vw, 5.8rem); letter-spacing: -.08em; }
h2 { font-size: clamp(3rem, 9vw, 8.6rem); letter-spacing: -.075em; text-transform: lowercase; }

.atlas { position: relative; z-index: 1; }

.map-plate {
  position: relative;
  min-height: 100vh;
  padding: clamp(120px, 16vh, 190px) clamp(18px, 5vw, 72px) clamp(60px, 8vh, 110px);
  isolation: isolate;
  transform-style: preserve-3d;
}

.hero-plate { min-height: 112vh; }

.hero-plate::after,
.layer-plate::after {
  content: "";
  position: absolute;
  inset: 8% 3% 6%;
  z-index: -1;
  background: linear-gradient(135deg, transparent 0 12%, rgba(255,255,255,.18) 13%, transparent 14% 100%);
  border: 1px dashed rgba(143,122,85,.42);
  clip-path: polygon(3% 0, 100% 0, 96% 87%, 88% 100%, 0 96%, 0 8%);
}

.command-ledger {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  bottom: 8vh;
  width: min(430px, 82vw);
  padding: 24px;
  background: rgba(217,203,167,.82);
  border: 1px solid rgba(21,25,34,.35);
  box-shadow: 14px 18px 0 rgba(143,122,85,.24), inset 0 0 0 1px rgba(255,255,255,.35);
  transform: rotate(-3deg);
}

.ledger-stamp, .paper-tab {
  display: inline-block;
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--alarm);
  border: 2px solid currentColor;
  padding: 5px 8px;
  transform: rotate(-2deg);
}

.command-ledger h2 { margin: 18px 0; font-size: clamp(2rem, 5vw, 4.2rem); }
.command-ledger p, .chapter-copy p { font-size: clamp(.95rem, 1.4vw, 1.2rem); line-height: 1.55; }
.ledger-lines { display: grid; gap: 8px; color: var(--ink); }
.ledger-lines span { border-bottom: 1px solid rgba(21,25,34,.22); padding-bottom: 4px; }

.district {
  position: absolute;
  top: 13vh;
  right: -2vw;
  width: min(860px, 82vw);
  height: 660px;
  transform: rotateX(58deg) rotateZ(calc(31deg + var(--plate-turn))) skewX(-7deg);
  transform-origin: 60% 48%;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.hex {
  position: absolute;
  width: 178px;
  height: 154px;
  padding: 34px 22px;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(215,222,232,.82) 38%, rgba(138,184,200,.42) 44%, rgba(217,203,167,.9)),
    var(--chrome);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: 0 28px 0 rgba(21,25,34,.22), inset 0 0 0 2px rgba(21,25,34,.38), inset 0 16px 24px rgba(255,255,255,.45);
  transform: translateZ(0);
  transition: transform .38s cubic-bezier(.17,.84,.34,1.3), filter .38s, background .38s;
}

.hex::before {
  content: "";
  position: absolute;
  inset: 22px;
  clip-path: inherit;
  background: repeating-linear-gradient(60deg, transparent 0 11px, rgba(21,25,34,.14) 12px, transparent 13px);
  opacity: .45;
}

.hex::after {
  content: attr(data-code);
  position: absolute;
  right: 26px;
  bottom: 24px;
  font: 600 10px "IBM Plex Mono", monospace;
  color: var(--alarm);
}

.hex span, .hex em { position: relative; display: block; transform: rotateZ(-31deg) skewX(7deg); }
.hex span { font: 800 20px "Syne", system-ui, sans-serif; text-transform: uppercase; }
.hex em { margin-top: 8px; font: 500 11px "IBM Plex Mono", monospace; font-style: normal; }
.hex:nth-child(1) { left: 66px; top: 230px; }
.hex:nth-child(2) { left: 210px; top: 150px; }
.hex:nth-child(3) { left: 354px; top: 230px; }
.hex:nth-child(4) { left: 498px; top: 150px; }
.hex:nth-child(5) { left: 642px; top: 230px; }
.hex:nth-child(6) { left: 210px; top: 310px; }
.hex:nth-child(7) { left: 498px; top: 310px; }
.hex:hover, .hex.active { transform: translateY(-24px) translateZ(48px); filter: drop-shadow(0 0 14px rgba(182,255,59,.65)); background: linear-gradient(145deg, var(--acid), rgba(215,222,232,.95) 34%, rgba(215,38,61,.34) 42%, var(--chrome)); }
.hex.ripple { transform: translateY(-11px) translateZ(24px) rotateZ(1.5deg); }

.route-svg {
  position: absolute;
  top: 14vh;
  right: 2vw;
  width: min(860px, 82vw);
  height: 620px;
  transform: rotate(-15deg);
  pointer-events: none;
  overflow: visible;
}

.route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  stroke-dasharray: 18 12;
  stroke-dashoffset: 420;
  filter: drop-shadow(0 0 8px rgba(215,38,61,.55));
  animation: routeTrace 5s linear infinite;
}
.route-a { stroke: var(--alarm); }
.route-b { stroke: var(--mercury); animation-delay: -1.6s; }
.route-c { stroke: var(--acid); animation-delay: -3s; opacity: .75; }

.paper-tab { background: var(--paper); box-shadow: 7px 8px 0 rgba(143,122,85,.24); }
.chapter-copy { width: min(820px, 90vw); margin-left: auto; padding-top: 16vh; }
.chapter-copy .mono-label { color: var(--alarm); }
.diagram-strip {
  margin: 10vh auto 0;
  width: min(900px, 92vw);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  transform: rotate(-4deg);
}
.diagram-strip span {
  padding: 18px 24px;
  background: rgba(21,25,34,.9);
  color: var(--chrome);
  border-left: 6px solid var(--acid);
  box-shadow: 12px 12px 0 rgba(143,122,85,.25);
}

.fault { background: linear-gradient(160deg, rgba(215,38,61,.12), transparent 55%); }
.chrome-card {
  padding: clamp(24px, 5vw, 58px);
  background: linear-gradient(135deg, rgba(215,222,232,.9), rgba(255,255,255,.34), rgba(138,184,200,.38));
  border: 1px solid rgba(21,25,34,.35);
  box-shadow: 22px 28px 0 rgba(21,25,34,.2), inset 0 1px 0 rgba(255,255,255,.8);
  clip-path: polygon(0 0, 96% 0, 100% 18%, 94% 100%, 0 100%);
}
.redaction-stack { position: absolute; left: 7vw; top: 36vh; display: grid; gap: 22px; transform: rotate(-12deg); }
.redaction-stack i { display: block; width: clamp(210px, 29vw, 410px); height: 34px; background: var(--ink); box-shadow: 16px 12px 0 rgba(215,38,61,.4); }

.mirror-shards { position: absolute; right: 10vw; bottom: 15vh; width: 420px; height: 300px; transform: rotate(20deg); }
.mirror-shards span { position: absolute; background: linear-gradient(135deg, var(--chrome), rgba(138,184,200,.35), rgba(255,255,255,.8)); border: 1px solid rgba(21,25,34,.3); box-shadow: 0 18px 28px rgba(21,25,34,.18); }
.mirror-shards span:nth-child(1) { inset: 0 58% 42% 0; clip-path: polygon(0 0, 100% 14%, 72% 100%, 5% 80%); }
.mirror-shards span:nth-child(2) { inset: 22% 20% 12% 36%; clip-path: polygon(12% 0, 100% 10%, 80% 88%, 0 100%); }
.mirror-shards span:nth-child(3) { inset: 56% 0 0 62%; clip-path: polygon(0 12%, 92% 0, 100% 100%, 18% 84%); }

.final-plate { display: grid; place-items: center; min-height: 106vh; }
.unlock-node {
  position: relative;
  width: min(760px, 90vw);
  padding: clamp(32px, 6vw, 74px);
  text-align: center;
  background: rgba(21,25,34,.92);
  color: var(--chrome);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  box-shadow: 0 0 0 10px rgba(215,222,232,.35), 0 34px 70px rgba(21,25,34,.42);
}
.unlock-node h2 { color: var(--acid); }
.unlock-node code { display: inline-block; margin-top: 22px; padding: 12px 16px; color: var(--acid); background: rgba(0,0,0,.32); border: 1px solid rgba(182,255,59,.35); }
.node-ring { position: absolute; inset: -28px; border: 2px dashed var(--alarm); clip-path: inherit; animation: ringPulse 2.8s ease-in-out infinite; }

.map-plate.in-view h2 { --scan-weight: 930; }
.map-plate.in-view .paper-tab { animation: foldTab .7s ease both; }

@keyframes tagSlide { to { transform: translateX(0) rotate(-2deg); } }
@keyframes routeTrace { to { stroke-dashoffset: 0; } }
@keyframes ringPulse { 50% { transform: scale(1.035); border-color: var(--acid); } }
@keyframes foldTab { from { transform: rotate(-2deg) rotateX(80deg); } to { transform: rotate(-2deg) rotateX(0); } }

@media (max-width: 820px) {
  .inventory-tag { position: absolute; }
  .district { top: 36vh; right: -220px; transform: scale(.72) rotateX(58deg) rotateZ(calc(31deg + var(--plate-turn))) skewX(-7deg); }
  .route-svg { top: 39vh; right: -160px; width: 760px; }
  .command-ledger { position: relative; left: auto; bottom: auto; margin-top: 24vh; }
  .chapter-copy { margin-left: 0; padding-top: 22vh; }
  .mirror-shards { opacity: .42; right: -90px; }
}