:root {
  /* Compliance trace: IntersectionObserver: the active section or block scales to `1.04–1.12`. */
  --bog-ink: #24180F;
  --old-ledger: #E8D3A7;
  --mushroom-umber: #7A4E2B;
  --moss-credit: #6F7F3A;
  --coin-verdigris: #3E8F77;
  --foxfire-gold: #F2A93B;
  --bruised-plum: #4B2638;
  --dust: #B88A55;
  --display-weight: 860;
  --loupe-x: 50%;
  --loupe-y: 50%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--bog-ink);
  background: var(--old-ledger);
  font-family: "Newsreader", Georgia, serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 13% 19%, rgba(36,24,15,.16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 69% 77%, rgba(122,78,43,.15) 0 1px, transparent 1.7px),
    repeating-linear-gradient(17deg, rgba(36,24,15,.045) 0 1px, transparent 1px 7px);
  background-size: 29px 31px, 37px 41px, 100% 100%;
}

.cursor-loupe {
  position: fixed;
  left: var(--loupe-x);
  top: var(--loupe-y);
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(242,169,59,.36);
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(62,143,119,.16), 0 0 45px rgba(242,169,59,.13);
  pointer-events: none;
  z-index: 29;
  opacity: .55;
}

.field-guide { position: relative; isolation: isolate; }

.habitat {
  position: relative;
  min-height: 100vh;
  padding: clamp(1.5rem, 4vw, 4.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--old-ledger);
}

.mesh {
  position: absolute;
  inset: -12%;
  z-index: -2;
  transition: filter .8s ease, transform 1.2s ease;
}

.mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(36,24,15,.18) 78%);
}

.mesh-honey { background: radial-gradient(circle at 20% 15%, rgba(242,169,59,0.18), transparent 32%), radial-gradient(circle at 80% 65%, rgba(62,143,119,0.22), transparent 34%), linear-gradient(135deg, #E8D3A7 0%, #B88A55 52%, #4B2638 100%); }
.mesh-olive { background: radial-gradient(circle at 18% 70%, rgba(111,127,58,.48), transparent 28%), radial-gradient(circle at 76% 22%, rgba(242,169,59,.19), transparent 34%), linear-gradient(120deg, #E8D3A7 0%, #7A4E2B 58%, #6F7F3A 130%); }
.mesh-plum { background: radial-gradient(circle at 24% 20%, rgba(75,38,56,.54), transparent 34%), radial-gradient(circle at 82% 72%, rgba(122,78,43,.52), transparent 32%), linear-gradient(145deg, #B88A55 0%, #4B2638 58%, #24180F 120%); }
.mesh-green { background: radial-gradient(circle at 16% 76%, rgba(62,143,119,.48), transparent 32%), radial-gradient(circle at 68% 28%, rgba(111,127,58,.55), transparent 36%), linear-gradient(135deg, #24180F 0%, #7A4E2B 44%, #E8D3A7 118%); }
.mesh-foxfire { background: radial-gradient(circle at 30% 20%, rgba(242,169,59,.62), transparent 30%), radial-gradient(circle at 80% 68%, rgba(62,143,119,.38), transparent 36%), linear-gradient(135deg, #4B2638 0%, #B88A55 48%, #E8D3A7 100%); }

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.8rem, 1.7vw, 1.5rem);
  width: min(1480px, 100%);
  margin: 0 auto;
}

.hero-grid { align-items: end; }

.specimen-block,
.curio {
  position: relative;
  background:
    radial-gradient(circle at 18% 12%, rgba(242,169,59,.23), transparent 25%),
    radial-gradient(circle at 84% 86%, rgba(62,143,119,.13), transparent 30%),
    linear-gradient(135deg, rgba(232,211,167,.96), rgba(184,138,85,.82));
  border: 4px solid var(--mushroom-umber);
  box-shadow: 0 18px 0 rgba(36,24,15,.20), 0 28px 55px rgba(36,24,15,.25), inset 0 0 0 2px rgba(36,24,15,.12);
  padding: clamp(1rem, 2vw, 2rem);
  color: var(--bog-ink);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease, box-shadow .7s ease, opacity .7s ease;
  transform-origin: center;
}

.specimen-block::before,
.curio::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 2px dotted rgba(122,78,43,.72);
  pointer-events: none;
}

.specimen-block::after {
  content: attr(data-label);
  position: absolute;
  right: .85rem;
  bottom: .55rem;
  font-family: "Recursive", monospace;
  font-variation-settings: "MONO" 1, "CASL" .8;
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(36,24,15,.58);
}

.stamp,
.eyebrow,
.curio span,
.microcopy {
  font-family: "Recursive", monospace;
  font-variation-settings: "MONO" 1, "CASL" .9, "wght" 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stamp,
.eyebrow,
.curio span {
  display: inline-block;
  color: var(--old-ledger);
  background: var(--mushroom-umber);
  border: 2px solid rgba(36,24,15,.45);
  padding: .38rem .55rem .28rem;
  transform: rotate(-1.5deg);
  box-shadow: 4px 5px 0 rgba(36,24,15,.16);
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 86, "wght" var(--display-weight);
  margin: .35em 0 .18em;
  letter-spacing: -.055em;
  line-height: .88;
}

h1 { font-size: clamp(4rem, 12vw, 11rem); }
h2 { font-size: clamp(2.4rem, 6vw, 6.8rem); max-width: 11ch; }
h3 { font-size: clamp(1.7rem, 3.1vw, 3.4rem); }

p {
  font-size: clamp(1.06rem, 1.55vw, 1.55rem);
  line-height: 1.28;
  margin: .7rem 0 0;
  max-width: 39rem;
}

.title-block { grid-column: span 8; min-height: 58vh; transform: rotate(-1.1deg); }
.note-block { grid-column: span 4; transform: translateY(-4vh) rotate(2deg); }
.slip-block { grid-column: 4 / span 5; transform: translateY(-2vh) rotate(.8deg); }

.chapter-title { width: min(1220px, 100%); margin: 0 auto clamp(1.4rem, 4vw, 3rem); position: relative; z-index: 2; }
.chapter-title h2 { max-width: 13ch; }
.angled { transform: rotate(-1.6deg); }

.ledger-wide { grid-column: span 7; min-height: 42vh; transform: rotate(.8deg); }
.token-tray { grid-column: span 5; transform: translateY(12vh) rotate(-2deg); }
.crate-label { grid-column: 3 / span 6; transform: rotate(1.4deg); }

.ledger-lines { display: grid; gap: .65rem; margin-top: 1.4rem; }
.ledger-lines span { height: 10px; border-bottom: 2px dashed var(--mushroom-umber); background: linear-gradient(90deg, rgba(111,127,58,.45), transparent); }
.tokens { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.tokens b { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; border-radius: 48% 52% 46% 54%; background: var(--foxfire-gold); border: 3px solid var(--bog-ink); box-shadow: inset -10px -12px 0 rgba(122,78,43,.22); font-family: "Recursive", monospace; }

.bog-stack { position: relative; min-height: 64vh; width: min(1200px, 100%); margin: 0 auto; }
.receipt-card { position: absolute; width: min(630px, 82vw); }
.r-one { left: 2%; top: 4%; transform: rotate(-4deg); }
.r-two { right: 7%; top: 17%; transform: rotate(3deg); }
.r-three { left: 28%; bottom: 2%; transform: rotate(-1deg); }

.network-grid { margin-top: 10vh; }
.node-card:nth-child(1) { grid-column: span 4; transform: rotate(-1deg); }
.node-card:nth-child(2) { grid-column: span 4; transform: translateY(12vh) rotate(1.7deg); }
.node-card:nth-child(3) { grid-column: span 4; transform: translateY(-4vh) rotate(-2.2deg); }

.route-map,
.mycelium-web { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.route-line,
.beetle-path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 18; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s ease, opacity .8s ease; }
.route-line { stroke: var(--coin-verdigris); stroke-width: 6; filter: drop-shadow(0 0 13px rgba(62,143,119,.55)); opacity: .38; }
.route-line.secondary { stroke: var(--moss-credit); stroke-width: 4; }
.beetle-path { stroke: var(--bog-ink); stroke-width: 4; stroke-dasharray: 2 18; opacity: .4; }
.node { fill: var(--foxfire-gold); stroke: var(--bog-ink); stroke-width: 4; filter: drop-shadow(0 0 12px rgba(242,169,59,.55)); }
.habitat.active .route-line,
.habitat.active .beetle-path { stroke-dashoffset: 0; opacity: .88; }

.artifact {
  position: absolute;
  z-index: 3;
  font-family: "Recursive", monospace;
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 800;
  animation: bob 5.5s ease-in-out infinite;
}

.coin { width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 24%, #F2A93B, #B88A55 58%, #7A4E2B); border: 4px solid var(--bog-ink); box-shadow: inset -10px -13px 0 rgba(36,24,15,.14), 0 15px 22px rgba(36,24,15,.22); font-size: 2rem; color: var(--bog-ink); }
.coin::after { content: ""; position: absolute; right: -.18rem; top: 1.1rem; width: 1.15rem; height: 1.45rem; border-radius: 50%; background: var(--old-ledger); border-left: 3px solid var(--bog-ink); }
.coin-a { top: 13%; left: 74%; animation-delay: -.6s; }
.coin-b { top: 73%; left: 9%; animation-delay: -2s; }
.coin-c { top: 48%; right: 8%; animation-delay: -3.3s; }
.mushroom { padding: 1.1rem 1.4rem; border-radius: 58% 42% 48% 52% / 64% 65% 35% 36%; background: var(--moss-credit); color: var(--old-ledger); border: 4px solid var(--mushroom-umber); box-shadow: 0 14px 0 rgba(36,24,15,.16); }
.seal-a { top: 20%; left: 5%; transform: rotate(-12deg); }
.seal-b { bottom: 10%; right: 18%; transform: rotate(9deg); animation-delay: -1.4s; }
.receipt-strip { background: var(--old-ledger); border: 3px solid var(--mushroom-umber); padding: .65rem 1rem; box-shadow: 0 13px 0 rgba(36,24,15,.15); color: var(--bog-ink); }
.receipt-a { top: 7%; left: 39%; transform: rotate(3deg); }
.receipt-b { bottom: 24%; left: 56%; transform: rotate(-4deg); animation-delay: -2.6s; }
.twine { left: 24%; bottom: 12%; font-size: 4rem; color: var(--mushroom-umber); text-shadow: 4px 4px 0 rgba(232,211,167,.55); }

.cabinet {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.9rem, 1.7vw, 1.5rem);
  width: min(1320px, 100%);
  margin: 0 auto;
  align-items: stretch;
}
.archive-title { grid-column: 1 / span 7; margin: 0; }
.curio { min-height: 12rem; display: flex; flex-direction: column; justify-content: space-between; }
.curio b, .curio strong { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.45rem, 2.4vw, 2.8rem); line-height: .95; letter-spacing: -.04em; margin-top: 1rem; }
.curio:nth-of-type(1) { grid-column: 8 / span 3; transform: rotate(2deg); }
.curio:nth-of-type(2) { grid-column: 2 / span 3; transform: rotate(-2deg); }
.curio:nth-of-type(3) { grid-column: 5 / span 4; transform: translateY(2rem) rotate(1deg); }
.curio:nth-of-type(4) { grid-column: 9 / span 4; transform: rotate(-1.5deg); }
.curio:nth-of-type(5) { grid-column: 1 / span 4; transform: rotate(1.8deg); }
.final-line { grid-column: 6 / span 6; background: radial-gradient(circle at 25% 30%, rgba(242,169,59,.42), transparent 35%), linear-gradient(135deg, #24180F, #4B2638); color: var(--old-ledger); border-color: var(--foxfire-gold); }
.final-line::before { border-color: rgba(242,169,59,.55); }

.zoom-target.is-soft { filter: blur(1.5px) sepia(.2) saturate(.78); opacity: .7; transform: scale(.965) rotate(var(--soft-rotate, 0deg)); }
.zoom-target.is-focused { filter: contrast(1.13) saturate(1.12); transform: scale(1.08) rotate(0deg) translateY(0); z-index: 8; box-shadow: 0 20px 0 rgba(36,24,15,.22), 0 0 0 7px rgba(62,143,119,.22), 0 34px 80px rgba(36,24,15,.34), inset 0 0 38px rgba(242,169,59,.18); }
.habitat.active .mesh { filter: saturate(1.08) contrast(1.06); transform: scale(1.025); }

@keyframes bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -18px; rotate: 5deg; }
}

@media (max-width: 860px) {
  .habitat { padding: 1rem; }
  .chapter-grid, .cabinet { grid-template-columns: 1fr; }
  .title-block, .note-block, .slip-block, .ledger-wide, .token-tray, .crate-label, .node-card:nth-child(n), .archive-title, .curio:nth-of-type(n), .final-line { grid-column: auto; transform: none; }
  .title-block { min-height: auto; padding-top: 5rem; }
  .artifact { transform: scale(.72); opacity: .72; }
  .receipt-card { position: relative; inset: auto; width: 100%; margin: 1rem 0; transform: none; }
  .bog-stack { min-height: auto; }
  .cursor-loupe { display: none; }
}