:root {
  /* compliance trace: Interaction should feel like touching objects in a woodland archive: hover over a node to reveal a hand-written note */
  --bog: #172015;
  --moss: #33472A;
  --lichen: #6F7D3A;
  --ochre: #B99A45;
  --flare: #F2C96B;
  --clay: #9A5F3E;
  --cream: #E8DDB6;
  --display: "DynaPuff", "Comic Sans MS", system-ui, sans-serif;
  --head: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --tag: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--body);
  background:
    radial-gradient(circle at 62% 10%, rgba(242, 201, 107, .18), transparent 18rem),
    radial-gradient(circle at 18% 28%, rgba(111, 125, 58, .26), transparent 25rem),
    linear-gradient(180deg, #11190f 0%, var(--bog) 33%, #10170e 67%, #0b110a 100%);
  overflow-x: hidden;
}

body::before, body::after, .canopy {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  opacity: .24;
  background-image:
    radial-gradient(circle, var(--cream) 0 1px, transparent 1.5px),
    radial-gradient(circle, var(--ochre) 0 1px, transparent 1.5px);
  background-size: 83px 97px, 137px 151px;
  animation: drift 18s linear infinite;
}
body::after {
  background:
    linear-gradient(100deg, transparent 0 58%, rgba(242, 201, 107, .12) 59%, transparent 71%),
    repeating-linear-gradient(88deg, transparent 0 46px, rgba(51, 71, 42, .18) 48px 52px);
  mix-blend-mode: screen;
  opacity: .46;
}
.canopy {
  z-index: 0;
  background:
    radial-gradient(ellipse at 5% 0, rgba(51, 71, 42, .8), transparent 34%),
    radial-gradient(ellipse at 88% -4%, rgba(51, 71, 42, .68), transparent 31%);
}

.trail-markers {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  gap: .55rem;
}
.trail-markers a {
  font-family: var(--tag);
  color: var(--bog);
  text-decoration: none;
  background: var(--ochre);
  border: 2px solid rgba(23, 32, 21, .5);
  border-radius: 49% 41% 53% 36%;
  padding: .28rem .62rem;
  box-shadow: 0 5px 0 rgba(23, 32, 21, .45);
  transform: rotate(var(--twist, -2deg));
}
.trail-markers a:nth-child(even) { --twist: 3deg; background: var(--cream); }

.root-scroll { position: relative; z-index: 1; }
.root-line {
  position: absolute;
  left: 50%;
  top: 18vh;
  width: 18px;
  height: calc(100% - 30vh);
  transform: translateX(-50%);
  border-radius: 999px 35px 999px 55px;
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(23,32,21,.38) 22% 30%, transparent 32%),
    linear-gradient(180deg, var(--moss), var(--lichen) 19%, var(--moss) 37%, var(--ochre) 38%, var(--moss) 42%, var(--lichen) 68%, var(--moss));
  box-shadow: inset 4px 0 0 rgba(232,221,182,.08), 0 0 34px rgba(111,125,58,.35);
}
.root-line::before, .root-line::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 280px;
  border: solid var(--moss);
  border-width: 0 0 5px 5px;
  border-radius: 0 0 0 100%;
  opacity: .55;
}
.root-line::before { left: -121px; top: 22%; transform: rotate(9deg); }
.root-line::after { right: -125px; top: 55%; transform: scaleX(-1) rotate(12deg); }
.travel-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--flare), rgba(242,201,107,.45) 40%, transparent 70%);
  filter: blur(.5px);
}
.travel-glow.running { opacity: 1; animation: travel 2.7s ease-in-out; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8vw;
}
.opening { justify-content: center; text-align: center; }
.left { justify-content: flex-start; }
.right { justify-content: flex-end; }
.archive { justify-content: center; min-height: 112vh; }

.hero-clump {
  position: relative;
  max-width: 980px;
  padding: 4rem 3rem;
}
.hero-clump::before {
  content: "";
  position: absolute;
  inset: 9% 5%;
  background: radial-gradient(ellipse, rgba(51,71,42,.72), rgba(23,32,21,.1) 68%, transparent);
  border-radius: 48% 52% 45% 55%;
  z-index: -1;
}
.stamp, .label {
  font-family: var(--tag);
  color: var(--flare);
  letter-spacing: .08em;
  text-transform: uppercase;
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 15rem);
  line-height: .82;
  color: var(--cream);
  text-shadow: 0 8px 0 #0d130c, 0 0 26px rgba(111,125,58,.65);
}
h1::first-letter { color: var(--lichen); }
.flare {
  position: absolute;
  right: 27%;
  top: 28%;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,201,107,.96), rgba(242,201,107,.28) 33%, transparent 68%);
  filter: blur(4px);
  z-index: -1;
  animation: flarebreath 4s ease-in-out infinite;
}
.intro {
  max-width: 660px;
  margin: 1.4rem auto 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: rgba(232, 221, 182, .88);
}

.specimen, .archive-board {
  position: relative;
  width: min(42rem, 42vw);
  padding: 2.2rem;
  background:
    linear-gradient(135deg, rgba(232,221,182,.1), transparent 38%),
    var(--moss);
  border: 3px solid rgba(185, 154, 69, .72);
  border-radius: 38px 24px 42px 21px;
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 0 0 2px rgba(232,221,182,.07);
  transform: rotate(var(--tilt, -1deg));
}
.right .specimen { --tilt: 1.4deg; }
.specimen::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  background: radial-gradient(circle at 85% 18%, rgba(242,201,107,.35), transparent 28%);
  z-index: -1;
}
.node {
  position: absolute;
  top: 50%;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 0 0 9px var(--bog), 0 0 28px rgba(242,201,107,.5);
}
.left .node { right: calc(-8vw - 33px); }
.right .node { left: calc(-8vw - 33px); }
.pebble { border-radius: 55% 42% 49% 61%; background: linear-gradient(135deg, var(--clay), var(--ochre)); }
.leaf-node { border-radius: 90% 0 90% 0; background: linear-gradient(135deg, var(--lichen), var(--flare)); transform: rotate(42deg); }
.screw-node { background: repeating-radial-gradient(circle, var(--ochre) 0 5px, var(--clay) 6px 9px); }
.chip-node { border-radius: 16px; background: linear-gradient(135deg, var(--flare), var(--lichen)); }

h2 {
  margin: .45rem 0 .75rem;
  font-family: var(--display);
  color: var(--cream);
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: .95;
}
p { font-size: 1.12rem; line-height: 1.65; }
.twig-button, .error-charm {
  cursor: pointer;
  border: 0;
  margin-top: 1.4rem;
  padding: .9rem 1.25rem;
  border-radius: 999px 52% 999px 44%;
  background: var(--ochre);
  color: var(--bog);
  font: 700 1rem var(--head);
  box-shadow: 0 7px 0 rgba(23,32,21,.62);
}
.error-charm { background: var(--clay); color: var(--cream); }
.shake { animation: clayShake .58s cubic-bezier(.36,.07,.19,.97); outline: 4px solid var(--ochre); }
.shake::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: -22px; height: 24px;
  background-image: radial-gradient(circle, var(--clay) 0 3px, transparent 4px);
  background-size: 24px 18px;
  animation: dirtfall .58s ease-out;
}

.circuit-map { position: relative; height: 110px; margin-top: 1.4rem; }
.circuit-map i, .circuit-map b {
  position: absolute;
  display: block;
  background: var(--ochre);
}
.circuit-map i { height: 5px; border-radius: 8px; box-shadow: 0 0 12px var(--flare); }
.circuit-map b { width: 15px; height: 15px; border-radius: 50%; background: var(--flare); }
.circuit-map i:nth-child(1){ width: 55%; left: 5%; top: 30px; transform: rotate(3deg); }
.circuit-map i:nth-child(2){ width: 34%; left: 39%; top: 62px; transform: rotate(28deg); }
.circuit-map i:nth-child(3){ width: 38%; left: 52%; top: 36px; transform: rotate(-19deg); }
.circuit-map b:nth-child(4){ left: 4%; top: 24px; }
.circuit-map b:nth-child(5){ left: 48%; top: 55px; }
.circuit-map b:nth-child(6){ right: 8%; top: 28px; }
.tag-row, .archive-grid { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.tag-row span, .archive-grid span {
  font-family: var(--tag);
  padding: .36rem .8rem;
  color: var(--bog);
  background: var(--cream);
  border-radius: 44% 56% 50% 42%;
}
.washer-stack { display: flex; gap: .85rem; margin-top: 1.2rem; }
.washer-stack span { width: 58px; height: 58px; border: 13px solid var(--ochre); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--bog); }
.archive-board { width: min(760px, 72vw); text-align: center; background: linear-gradient(180deg, rgba(51,71,42,.94), rgba(23,32,21,.96)); }
.archive-grid { justify-content: center; }

.note-pop {
  position: fixed;
  z-index: 20;
  max-width: 280px;
  padding: .85rem 1rem;
  color: var(--bog);
  background: var(--cream);
  border: 3px solid var(--ochre);
  border-radius: 25px 18px 28px 16px;
  font-family: var(--head);
  opacity: 0;
  transform: translate(-50%, -120%) rotate(-1deg) scale(.96);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.note-pop.show { opacity: 1; transform: translate(-50%, -120%) rotate(-1deg) scale(1); }
.spore {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--flare);
  opacity: .42;
  pointer-events: none;
}

@keyframes drift { to { background-position: 83px 97px, -137px 151px; } }
@keyframes flarebreath { 50% { transform: scale(1.08); opacity: .82; } }
@keyframes travel { 0% { top: 0; } 100% { top: 100%; } }
@keyframes clayShake { 10%, 90% { transform: translateX(-2px) rotate(-1deg); } 20%, 80% { transform: translateX(4px) rotate(1deg); } 30%, 50%, 70% { transform: translateX(-7px) rotate(-2deg); } 40%, 60% { transform: translateX(7px) rotate(2deg); } }
@keyframes dirtfall { from { opacity: 1; transform: translateY(-9px); } to { opacity: 0; transform: translateY(18px); } }

@media (max-width: 820px) {
  .trail-markers { display: none; }
  .root-line { left: 1.6rem; }
  .chapter { padding: 6rem 1.3rem 6rem 4rem; justify-content: flex-start; }
  .specimen, .archive-board { width: 100%; }
  .left .node, .right .node { left: -3.55rem; right: auto; width: 48px; height: 48px; }
  h1 { font-size: 22vw; }
}