:root {
  --bog-black: #080B07;
  --wet-moss: #2F5D38;
  --acid-lichen: #B7FF3C;
  --spore-gold: #D7A83F;
  --bruised-violet: #4B2A63;
  --mud-umber: #5A3A22;
  --bone-parchment: #E7D9B8;
  --rust-red: #B94032;
  --display: "Jost", "Poppins", "Futura", "Futura PT", "Century Gothic", sans-serif;
  --body: "Nunito Sans", "Inter", system-ui, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--bone-parchment);
  background: var(--bog-black);
  font-family: var(--body);
  overflow-x: hidden;
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(183, 255, 60, .08), transparent 22%),
    radial-gradient(circle at 85% 8%, rgba(75, 42, 99, .5), transparent 30%),
    linear-gradient(135deg, #080B07 0%, #2F5D38 38%, #4B2A63 72%, #080B07 100%);
  z-index: -4;
}

.grain, .lichen-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grain {
  z-index: 8;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(231, 217, 184, .18) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(90, 58, 34, .32) 1px, transparent 1.8px);
  background-size: 19px 23px, 41px 37px;
  mix-blend-mode: overlay;
}

.lichen-field { z-index: 2; overflow: hidden; }

.spore {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acid-lichen);
  box-shadow: 0 0 15px var(--acid-lichen);
  opacity: .55;
  transform: translate3d(0, 0, 0);
}

.cursor-spore {
  position: fixed;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(183, 255, 60, .65);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 24px rgba(183, 255, 60, .28);
  transform: translate(-50%, -50%);
}

.field-log {
  position: fixed;
  right: 2rem;
  top: 1.4rem;
  width: min(300px, calc(100vw - 4rem));
  z-index: 10;
  padding: .9rem 1rem 1rem;
  background: rgba(8, 11, 7, .76);
  border: 1px solid rgba(183, 255, 60, .36);
  clip-path: polygon(7% 0, 100% 0, 94% 100%, 0 88%, 0 14%);
  box-shadow: 0 0 34px rgba(183, 255, 60, .08), inset 0 0 28px rgba(47, 93, 56, .34);
}

.log-stamp, .specimen-tag, .found-nav a {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7rem;
}

.field-log p {
  margin: .45rem 0 0;
  font-family: var(--hand);
  color: var(--acid-lichen);
  font-size: 1.12rem;
  line-height: 1.05;
}

.found-nav {
  position: fixed;
  left: 1.1rem;
  top: 50%;
  z-index: 10;
  display: grid;
  gap: .55rem;
  transform: translateY(-50%) rotate(-3deg);
}

.found-nav a {
  color: var(--bone-parchment);
  text-decoration: none;
  background: rgba(90, 58, 34, .72);
  border: 1px dashed rgba(215, 168, 63, .55);
  padding: .35rem .55rem;
  transition: color .25s, background .25s, transform .25s;
}

.found-nav a:hover, .found-nav a.active {
  color: var(--bog-black);
  background: var(--acid-lichen);
  transform: translateX(8px) rotate(2deg);
}

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 7rem 7vw;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

.chapter::after {
  content: "";
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 30% 30%, rgba(90, 58, 34, .24), transparent 35%), radial-gradient(circle at 60% 70%, rgba(8, 11, 7, .72), transparent 50%);
  filter: blur(12px);
  z-index: -2;
}

.intro { min-height: 108vh; }

.typewriter-sign {
  position: relative;
  z-index: 4;
  max-width: 980px;
  margin-left: 8vw;
  transform: rotate(-1.5deg);
}

.overwritten {
  display: inline-block;
  color: var(--spore-gold);
  font-family: var(--hand);
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  transform: rotate(-3deg);
  text-decoration: line-through var(--rust-red) 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  text-transform: lowercase;
  margin: 0;
}

h1 {
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: .78;
  letter-spacing: -.07em;
  color: var(--bone-parchment);
  text-shadow: 0 0 18px rgba(183, 255, 60, .28), 5px 5px 0 rgba(75, 42, 99, .65);
}

.type-cursor {
  color: var(--acid-lichen);
  animation: blink .72s steps(1) infinite;
}

.typed-sub {
  max-width: 510px;
  margin: 1.25rem 0 0 4vw;
  color: var(--acid-lichen);
  font-family: var(--hand);
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  text-shadow: 0 0 20px rgba(183, 255, 60, .22);
}

@keyframes blink { 50% { opacity: 0; } }

.hex {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  border: 0;
  background: radial-gradient(circle at 35% 24%, rgba(183, 255, 60, .22), transparent 18%), linear-gradient(135deg, #080B07 0%, #2F5D38 38%, #4B2A63 72%, #B7FF3C 100%);
  box-shadow: inset 0 0 0 2px rgba(231, 217, 184, .12), 0 0 45px rgba(183, 255, 60, .13);
  color: var(--bone-parchment);
  font-family: var(--display);
}

.hex::before {
  content: "";
  position: absolute;
  inset: 7%;
  clip-path: inherit;
  border: 1px solid rgba(183, 255, 60, .24);
  background-image: radial-gradient(circle, rgba(231,217,184,.12) 1px, transparent 2px);
  background-size: 17px 17px;
  opacity: .7;
}

.hex > * { position: relative; z-index: 1; }
.hex span { position: relative; z-index: 1; letter-spacing: .16em; font-weight: 900; }

.hex-crack-cluster {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(.82) rotate(-8deg);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16, .84, .27, 1.02);
}

.hex-crack-cluster.open { opacity: 1; transform: scale(1) rotate(0); }

.hex-large { width: 36vw; height: 40vw; max-width: 520px; max-height: 580px; left: 49vw; top: 12vh; }
.hex-medium { width: 18vw; height: 20vw; min-width: 190px; min-height: 210px; left: 64vw; top: 56vh; transform: rotate(11deg); }
.hex-small { width: 10vw; height: 11.5vw; min-width: 112px; min-height: 124px; }
.hex-tiny { width: 7vw; height: 8vw; min-width: 80px; min-height: 90px; }
.hex-small.moss { left: 43vw; top: 58vh; transform: rotate(-13deg); background: radial-gradient(circle, #B7FF3C, #2F5D38 38%, #080B07 72%); }
.hex-tiny.gold { left: 80vw; top: 19vh; background: radial-gradient(circle, #D7A83F, #5A3A22 60%, #080B07); }
.hex-small.rust { right: 7vw; bottom: 9vh; background: radial-gradient(circle, #B94032, #5A3A22 52%, #080B07); }

.annotation, .marginalia {
  font-family: var(--hand);
  color: var(--spore-gold);
}

.intro-note { position: absolute; left: 13vw; bottom: 13vh; font-size: 1.6rem; transform: rotate(-8deg); }

.root-map {
  position: absolute;
  inset: auto 0 7% 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
  z-index: 0;
}

.root-map-intro { top: 8%; height: 75%; }

.root-line {
  fill: none;
  stroke: var(--acid-lichen);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 0 12px rgba(183, 255, 60, .55));
  opacity: .78;
}

.root-line-thin, .signal-line.thin { stroke-width: 2; stroke: var(--spore-gold); opacity: .48; }
.root-line.drawn { animation: drawRoot 2.8s ease forwards; }
@keyframes drawRoot { to { stroke-dashoffset: 0; } }

.honey { grid-template-columns: minmax(260px, .85fr) 1.3fr; gap: 4vw; }
.right-heavy { grid-template-columns: 1.25fr minmax(280px, .8fr); background: radial-gradient(circle at 70% 40%, rgba(75, 42, 99, .34), transparent 44%); }
.left-heavy { background: radial-gradient(circle at 35% 68%, #5A3A22, #080B07 62%); }

.chapter-copy { max-width: 560px; z-index: 3; }
.chapter-copy h2, .final-sigil h2 { font-size: clamp(3rem, 7vw, 7rem); line-height: .88; color: var(--bone-parchment); text-shadow: 3px 3px 0 rgba(185, 64, 50, .35); }
.chapter-copy p, .final-sigil p, .rebellion-text { font-size: clamp(1.05rem, 1.4vw, 1.28rem); line-height: 1.65; letter-spacing: .025em; color: rgba(231, 217, 184, .86); }
.specimen-tag { display: inline-block; color: var(--bog-black); background: var(--spore-gold); padding: .42rem .58rem; margin-bottom: 1rem; transform: rotate(-2deg); }
.specimen-tag.red { background: var(--rust-red); color: var(--bone-parchment); }
.marginalia { font-size: 1.5rem; transform: rotate(4deg); }

.honeycomb {
  position: relative;
  min-height: 680px;
  z-index: 2;
  transform: rotate(-4deg);
}

.honeycomb .hex { position: absolute; padding: 2rem; transition: transform .5s ease, filter .5s ease; }
.honeycomb .hex:hover { transform: scale(1.06) rotate(3deg); filter: saturate(1.3); }
.hex.card h3 { font-size: clamp(1.45rem, 2.2vw, 2.4rem); color: var(--acid-lichen); }
.hex.card p { margin: .6rem auto 0; max-width: 18ch; color: rgba(231,217,184,.84); line-height: 1.35; }

.honeycomb .huge { width: 330px; height: 370px; left: 8%; top: 8%; }
.honeycomb .medium { width: 238px; height: 266px; left: 47%; top: 22%; }
.honeycomb .small { width: 168px; height: 188px; left: 34%; top: 58%; background: radial-gradient(circle, #B94032, #5A3A22 60%, #080B07); }
.honeycomb .tall { width: 320px; height: 430px; left: 18%; top: 8%; transform: rotate(8deg); }
.artifact { width: 145px; height: 162px; }
.pebble { left: 2%; top: 58%; background: radial-gradient(circle at 38% 24%, #E7D9B8, #5A3A22 50%, #080B07); }
.gill { left: 68%; top: 55%; background: repeating-radial-gradient(ellipse at center, #D7A83F 0 7px, #5A3A22 8px 15px, #080B07 16px 25px); }
.lichen { left: 57%; top: 5%; background: radial-gradient(circle, #B7FF3C, #2F5D38 48%, #080B07); }
.shell { left: 6%; top: 60%; background: linear-gradient(135deg, #4B2A63, #2F5D38, #D7A83F, #080B07); }
.archive-comb .medium { left: 52%; top: 38%; }
.archive-comb .small { left: 36%; top: 70%; }
.angled-copy { transform: rotate(2deg); }

.rebellion { background: linear-gradient(180deg, #080B07, #2F5D38 52%, #080B07); }
.leaf-banner { z-index: 3; align-self: start; margin-top: 6vh; }
.leaf-banner span { font-family: var(--hand); color: var(--spore-gold); font-size: 1.65rem; display: block; transform: rotate(-5deg); }
.leaf-banner strong { font-family: var(--display); display: block; font-size: clamp(3.4rem, 9vw, 9rem); line-height: .8; text-transform: lowercase; color: var(--bone-parchment); max-width: 900px; }

.swarm { position: absolute; inset: 0; z-index: 1; }
.leafhex { width: 210px; height: 235px; padding: 2rem; font-size: 1.1rem; text-transform: uppercase; }
.leafhex b { z-index: 1; position: relative; color: var(--bog-black); background: var(--acid-lichen); padding: .24rem .4rem; }
.leafhex.one { left: 55%; top: 17%; transform: rotate(13deg); }
.leafhex.two { left: 71%; top: 39%; transform: rotate(-7deg); background: radial-gradient(circle, #B94032, #5A3A22 60%, #080B07); }
.leafhex.three { left: 42%; top: 58%; transform: rotate(21deg); background: radial-gradient(circle, #D7A83F, #2F5D38 55%, #080B07); }
.leafhex.four { left: 16%; top: 48%; transform: rotate(-20deg); }
.leafhex.five { right: 8%; bottom: 4%; transform: rotate(4deg); }
.rebellion-text { z-index: 3; max-width: 590px; align-self: end; margin-bottom: 8vh; }
.forbidden-marker {
  position: absolute;
  right: 16vw;
  bottom: 18vh;
  z-index: 4;
  border: 0;
  padding: .85rem 1.15rem;
  color: var(--bog-black);
  background: var(--acid-lichen);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  clip-path: polygon(6% 0, 100% 8%, 93% 100%, 0 90%);
  box-shadow: 0 0 30px rgba(183, 255, 60, .38);
  cursor: pointer;
}
.forbidden-marker.raised { background: var(--rust-red); color: var(--bone-parchment); transform: rotate(-4deg) scale(1.08); }

.signal { place-items: center; background: radial-gradient(circle at center, #4B2A63 0%, #080B07 58%); }
.signal-web { position: absolute; width: 100%; height: 100%; inset: 0; opacity: .72; }
.final-sigil {
  position: relative;
  width: min(760px, 82vw);
  height: min(700px, 76vw);
  padding: 5rem;
  background: linear-gradient(135deg, #080B07 0%, #2F5D38 38%, #4B2A63 72%, #B7FF3C 100%);
}
.final-note { position: absolute; bottom: 8vh; right: 12vw; font-size: 1.8rem; transform: rotate(7deg); }

.ink-bloom { animation: inkBloom .32s ease; display: inline-block; }
@keyframes inkBloom { 0% { filter: blur(5px); transform: translate(var(--jx), var(--jy)) scale(1.16); color: var(--acid-lichen); } 100% { filter: blur(0); transform: translate(0, 0) scale(1); } }

.puff {
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acid-lichen);
  pointer-events: none;
  z-index: 12;
  animation: puff .8s ease-out forwards;
}
@keyframes puff { to { opacity: 0; transform: translate(var(--px), var(--py)) scale(3.5); } }

@media (max-width: 860px) {
  .found-nav { left: .5rem; top: auto; bottom: .6rem; display: flex; transform: none; max-width: calc(100vw - 1rem); overflow: auto; }
  .field-log { right: 1rem; top: .9rem; }
  .chapter { padding: 7rem 1.1rem 5rem; }
  .typewriter-sign { margin-left: 0; }
  .honey, .right-heavy { grid-template-columns: 1fr; }
  .honeycomb { min-height: 560px; transform: scale(.84) rotate(-4deg); transform-origin: left top; }
  .hex-large { left: 28vw; top: 34vh; }
  .hex-medium { left: 42vw; }
  .leafhex { width: 150px; height: 168px; }
  .leafhex.one { left: 50%; }
  .leafhex.two { left: 60%; }
  .leafhex.three { left: 34%; }
  .forbidden-marker { right: 7vw; bottom: 14vh; }
  .final-sigil { padding: 3rem 2rem; }
}