:root {
  --peat-black: #17110C;
  --wet-basalt: #25211C;
  --moss-umber: #3A2F18;
  --lantern-amber: #F2A93B;
  --crystal-honey: #FFD36A;
  --rust-copper: #B85C2E;
  --lichen-green: #7B8B45;
  --quartz-cream: #F5E7C8;
  --garnet-shadow: #5A1E18;
}

/* Compliance typography tokens: IBM Plex Mono* Mono** for event IDs can drift slowly across the void like fireflies. IBM Plex Sans* Sans** from Google Fonts for readable explanations. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--peat-black);
  color: var(--quartz-cream);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .22;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 211, 106, .08), transparent 20%),
    radial-gradient(circle at 80% 50%, rgba(123, 139, 69, .07), transparent 24%),
    repeating-radial-gradient(circle at 30% 40%, rgba(245, 231, 200, .045) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.specimen-drawer {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 8px;
  background: rgba(37, 33, 28, .72);
  border: 1px solid rgba(184, 92, 46, .55);
  box-shadow: 0 0 35px rgba(23, 17, 12, .9);
}

.specimen-drawer a {
  writing-mode: vertical-rl;
  text-decoration: none;
  color: var(--crystal-honey);
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
}

.chamber {
  position: relative;
  min-height: 100vh;
  padding: 8vw 9vw 7vw 12vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 24%, rgba(90, 30, 24, .28), transparent 28%),
    radial-gradient(circle at 18% 84%, rgba(58, 47, 24, .55), transparent 34%),
    var(--peat-black);
}

.cavern h1, .chamber h2 {
  font-family: "Bowlby One SC", "Archivo Black", Impact, sans-serif;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -.055em;
  line-height: .82;
}

.cavern h1 {
  font-size: clamp(4.3rem, 12vw, 13.5rem);
  color: var(--quartz-cream);
  text-shadow: 0 18px 0 rgba(58, 47, 24, .8), 0 0 35px rgba(242, 169, 59, .1);
}

.cavern h1 span { color: var(--rust-copper); }

.hero-copy {
  position: absolute;
  left: 11vw;
  bottom: 8vh;
  max-width: 60vw;
}

.vertical-label {
  margin: 0 0 22px;
  color: var(--lichen-green);
  font: 600 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: .28em;
}

.field-note, .queue-ledger, .engraved-notes, .torn-label {
  background: linear-gradient(135deg, rgba(58, 47, 24, .94), rgba(37, 33, 28, .9));
  border: 1px solid rgba(184, 92, 46, .7);
  color: var(--quartz-cream);
  box-shadow: 0 18px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,211,106,.12);
}

.note-hero {
  width: min(380px, 82vw);
  margin-top: 26px;
  padding: 18px 20px;
  transform: rotate(-2deg);
}

.field-note span, .mono-tag {
  display: block;
  color: var(--crystal-honey);
  font: 600 12px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  margin-bottom: 8px;
}

.shard-field {
  position: absolute;
  right: 11vw;
  top: 12vh;
  width: min(35vw, 420px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 30px rgba(242,169,59,.22));
}

.mineral-border, .plate-border {
  position: absolute;
  inset: 0;
  clip-path: polygon(12% 5%, 88% 11%, 98% 58%, 75% 95%, 18% 84%, 4% 37%);
  border: 2px solid var(--crystal-honey);
  animation: borderPulse 4s ease-in-out infinite;
}

.mineral-border::before, .plate-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from var(--angle), transparent 0 62%, var(--crystal-honey), var(--rust-copper), transparent 76%);
  animation: trace 5s linear infinite;
  opacity: .7;
}

.quartz-shard {
  position: absolute;
  background: linear-gradient(145deg, var(--crystal-honey), var(--lantern-amber) 45%, var(--garnet-shadow));
  clip-path: polygon(48% 0, 100% 38%, 75% 100%, 20% 88%, 0 32%);
  box-shadow: inset 18px -20px 32px rgba(90,30,24,.38), 0 0 28px rgba(242,169,59,.45);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.shard-a { width: 42%; height: 58%; left: 31%; top: 17%; }
.shard-b { width: 24%; height: 31%; left: 15%; top: 53%; transform: rotate(-22deg); }
.shard-c { width: 21%; height: 27%; right: 12%; top: 60%; transform: rotate(28deg); }
.shard-field.locked .shard-b { transform: translate(42px, -32px) rotate(-4deg); }
.shard-field.locked .shard-c { transform: translate(-38px, -22px) rotate(5deg); }
.shard-field .mono-tag { position: absolute; left: 12%; bottom: -34px; }

.event-firefly {
  position: absolute;
  color: var(--crystal-honey);
  font: 500 11px/1 "IBM Plex Mono", monospace;
  opacity: .55;
  text-shadow: 0 0 14px var(--lantern-amber);
  animation: drift var(--speed) linear infinite;
}

.collage { position: absolute; opacity: .8; }
.leaf-one { right: 31vw; bottom: 16vh; width: 115px; height: 52px; background: var(--lichen-green); clip-path: polygon(0 50%, 18% 8%, 62% 0, 100% 47%, 65% 100%, 19% 85%); transform: rotate(18deg); }
.mushroom { right: 7vw; bottom: 10vh; width: 95px; height: 72px; border-radius: 80px 80px 18px 18px; background: radial-gradient(circle at 30% 28%, var(--crystal-honey) 0 5px, transparent 6px), var(--rust-copper); }

.right-title { position: absolute; right: 8vw; top: 11vh; text-align: right; }
.chamber h2 { font-size: clamp(3.2rem, 8.5vw, 9.5rem); color: var(--quartz-cream); }

.root-map { position: absolute; inset: 18vh 3vw 8vh 8vw; width: 89vw; height: 70vh; }
.root-line { fill: none; stroke: var(--lichen-green); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1500; stroke-dashoffset: 1500; filter: drop-shadow(0 0 14px rgba(123,139,69,.55)); animation: growRoot 4.8s ease forwards; }
.root-branch { stroke-width: 4; animation-delay: .7s; }
.root-branch.two { stroke: var(--rust-copper); animation-delay: 1.1s; }
.root-branch.three { animation-delay: 1.5s; }

.queue-ledger {
  position: absolute;
  left: 13vw;
  bottom: 12vh;
  width: min(430px, 74vw);
  padding: 26px;
  transform: rotate(1.5deg);
}
.queue-ledger h3 { margin: 0 0 12px; font: 400 1.7rem/1 "Archivo Black", sans-serif; text-transform: uppercase; color: var(--crystal-honey); }
.queue-ledger p { line-height: 1.55; }
.queue-ledger ol { padding-left: 20px; margin-bottom: 0; }
.queue-ledger li { margin: 10px 0; }
.queue-ledger span { color: var(--lantern-amber); font-family: "IBM Plex Mono", monospace; }
.beetle-scheduler { position: absolute; left: 51vw; top: 36vh; padding: 13px 18px; border-radius: 50% 48% 44% 52%; background: var(--garnet-shadow); border: 2px solid var(--rust-copper); color: var(--crystal-honey); font: 600 12px/1.2 "IBM Plex Mono", monospace; text-align: center; transform: rotate(-11deg); }

.cabinet-copy { position: absolute; left: 12vw; top: 12vh; }
.facet-cabinet { position: absolute; right: 9vw; bottom: 10vh; width: min(610px, 76vw); height: 62vh; }
.specimen-plate { position: absolute; background: rgba(37,33,28,.72); border: 1px solid rgba(184,92,46,.5); }
.plate-one { inset: 0 18% 24% 0; }
.plate-two { right: 0; bottom: 0; width: 47%; height: 42%; transform: rotate(4deg); }
.facet-cluster { position: absolute; inset: 17%; }
.facet-cluster span { position: absolute; background: linear-gradient(135deg, var(--lantern-amber), var(--crystal-honey), var(--rust-copper)); clip-path: polygon(50% 0, 100% 30%, 80% 100%, 22% 88%, 0 34%); box-shadow: 0 0 24px rgba(242,169,59,.28); }
.facet-cluster span:nth-child(1) { width: 34%; height: 52%; left: 26%; top: 8%; }
.facet-cluster span:nth-child(2) { width: 26%; height: 40%; left: 52%; top: 31%; transform: rotate(21deg); }
.facet-cluster span:nth-child(3) { width: 24%; height: 34%; left: 16%; top: 48%; transform: rotate(-18deg); }
.facet-cluster span:nth-child(4) { width: 18%; height: 26%; left: 43%; top: 62%; transform: rotate(9deg); }
.specimen-plate .mono-tag { position: absolute; left: 18px; bottom: 14px; }
.code-scrap { margin: 28px; font: 500 15px/1.55 "IBM Plex Mono", monospace; color: var(--crystal-honey); }
.clay-seal { position: absolute; right: 18px; bottom: 18px; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--rust-copper); color: var(--peat-black); font: 400 17px/1 "Archivo Black", sans-serif; box-shadow: inset 0 0 0 5px rgba(90,30,24,.34); }
.torn-label { position: absolute; left: 22vw; bottom: 16vh; padding: 14px 18px; font: 600 13px/1.3 "IBM Plex Mono", monospace; color: var(--crystal-honey); transform: rotate(-5deg); }

.authority { display: grid; place-items: center; }
.engraved-notes { width: min(760px, 78vw); padding: clamp(28px, 5vw, 62px); clip-path: polygon(2% 7%, 96% 0, 100% 88%, 86% 100%, 0 94%); }
.engraved-notes h2 { font-size: clamp(3rem, 7vw, 7.4rem); margin-bottom: 28px; }
.engraved-notes p:not(.vertical-label) { max-width: 560px; font-size: 1.1rem; line-height: 1.7; }
.brass-seal { display: inline-block; margin-top: 24px; padding: 13px 19px; background: var(--rust-copper); color: var(--peat-black); text-decoration: none; font: 400 13px/1 "Archivo Black", sans-serif; letter-spacing: .08em; box-shadow: 0 8px 0 var(--garnet-shadow); }
.lantern-clock { position: absolute; right: 12vw; top: 14vh; width: 160px; height: 160px; border-radius: 50%; border: 2px solid var(--lantern-amber); display: grid; place-items: center; color: var(--crystal-honey); font-family: "IBM Plex Mono", monospace; box-shadow: 0 0 38px rgba(242,169,59,.18); }
.lantern-clock span { position: absolute; width: 2px; height: 58px; background: var(--lantern-amber); bottom: 50%; transform-origin: bottom; animation: clockHand 8s linear infinite; }
.fossil-loop { position: absolute; left: 12vw; bottom: 13vh; color: rgba(245,231,200,.55); font: 500 14px/1.6 "IBM Plex Mono", monospace; transform: rotate(-4deg); }

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes trace { to { --angle: 360deg; } }
@keyframes borderPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,211,106,0); } 50% { box-shadow: 0 0 30px rgba(255,211,106,.25); } }
@keyframes growRoot { to { stroke-dashoffset: 0; } }
@keyframes drift { from { transform: translate3d(-12vw, 0, 0); } to { transform: translate3d(112vw, -18vh, 0); } }
@keyframes clockHand { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .specimen-drawer { left: 8px; }
  .chamber { padding-left: 17vw; }
  .hero-copy, .cabinet-copy, .right-title { position: relative; left: auto; right: auto; top: auto; bottom: auto; text-align: left; max-width: 82vw; }
  .shard-field { position: relative; right: auto; top: auto; margin: 10vh 0 0 6vw; width: 68vw; }
  .queue-ledger, .facet-cabinet, .torn-label { position: relative; left: auto; right: auto; bottom: auto; margin-top: 10vh; }
  .root-map { inset: auto; position: relative; width: 100%; height: 50vh; margin-top: 8vh; }
  .facet-cabinet { height: 54vh; width: 78vw; }
}