:root {
  --seafoam: #D8EFE8;
  --gold: #B9A44C;
  --ink: #102B32;
  --coral: #E07A5F;
  --sand: #F2E6C8;
  --violet: #4B3B61;
  --kelp: #2F6F63;
}

/* Typography compliance notes: Inter** Source Serif 4** IBM Plex Sans Condensed** tag pins marginalia create scholarly field-guide interface that avoids highly frequent mono-tech typography pattern. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(216, 239, 232, .9), transparent 24rem),
    radial-gradient(circle at 80% 32%, rgba(185, 164, 76, .16), transparent 22rem),
    linear-gradient(180deg, var(--seafoam) 0%, var(--sand) 28%, #dceee6 58%, var(--violet) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image:
    radial-gradient(var(--ink) .7px, transparent .7px),
    radial-gradient(var(--kelp) .6px, transparent .6px);
  background-size: 34px 34px, 57px 57px;
  mix-blend-mode: multiply;
}

.mist-layer {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.52), transparent 36%), radial-gradient(ellipse at 20% 70%, rgba(216,239,232,.42), transparent 34%);
  animation: mistDrift 18s ease-in-out infinite alternate;
}

.field-book { position: relative; z-index: 1; min-height: 4300px; }

.estuary {
  position: absolute;
  left: 50%;
  top: 0;
  width: 220px;
  height: 100%;
  transform: translateX(-50%);
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(16, 43, 50, .18));
}

#estuaryPath {
  fill: none;
  stroke: var(--kelp);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.shell-index {
  position: fixed;
  z-index: 10;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shell-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(16,43,50,.62);
  text-decoration: none;
  font: 600 12px/1 "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .3s, transform .3s;
}

.shell-link span {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 60% 40% 55% 45%;
  background: var(--sand);
  transform: rotate(-20deg);
}

.shell-link.active { color: var(--coral); transform: translateX(6px); }
.shell-link.active span { box-shadow: 0 0 0 5px rgba(224,122,95,.15); }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 8vh 9vw;
}

.chapter.left { justify-items: start; }
.chapter.right { justify-items: end; }

.notebook-page, .specimen, .dusk-plate {
  position: relative;
  width: min(620px, 86vw);
  border: 1px solid rgba(16,43,50,.18);
  border-radius: 34px 22px 42px 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), transparent 38%),
    linear-gradient(180deg, var(--sand), #f7eccf);
  box-shadow: 0 30px 70px rgba(16,43,50,.16), inset 0 0 0 1px rgba(255,255,255,.35);
  padding: clamp(32px, 5vw, 62px);
}

.notebook-page::after, .specimen::after, .dusk-plate::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(47,111,99,.25);
  border-radius: inherit;
  pointer-events: none;
}

.hero { justify-items: center; text-align: center; }

.kicker {
  margin: 0 0 14px;
  color: var(--kelp);
  font: 600 13px/1.1 "IBM Plex Sans Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
}

h1, h2 {
  margin: 0;
  font-family: "Nunito Sans", "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .9;
}

h1 { font-size: clamp(4.2rem, 13vw, 10.5rem); color: var(--ink); }
h2 { font-size: clamp(3rem, 7vw, 7rem); color: var(--ink); }

p { font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.65; }
.lede { max-width: 720px; margin: 24px auto 0; }

.margin-note {
  position: absolute;
  right: 7vw;
  bottom: 11vh;
  max-width: 290px;
  font: italic 1.05rem/1.45 "Source Serif 4", serif;
  color: var(--violet);
}

.crab {
  position: absolute;
  left: -70px;
  bottom: 24px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--coral);
  color: var(--sand);
  font: 600 14px/1 "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .16em;
  animation: crabWalk 5.8s ease-in-out forwards;
}

.claw { color: var(--ink); font-weight: 900; }

.marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand);
  border: 3px solid var(--kelp);
  box-shadow: 0 0 0 12px rgba(216,239,232,.55), 0 14px 26px rgba(16,43,50,.18);
}

.marker span { width: 24px; height: 24px; background: var(--gold); border-radius: 62% 38% 46% 54%; }
.mushroom-marker span { border-radius: 50% 50% 34% 34%; background: var(--coral); }
.pin-marker span { width: 12px; border-radius: 2px 2px 10px 10px; background: var(--gold); }
.float-marker span { border-radius: 50%; background: var(--violet); }
.bloom-marker span { background: radial-gradient(circle, var(--coral) 30%, var(--gold) 32% 45%, transparent 48%); }
.stone-marker span { background: var(--ink); }

.specimen { margin-left: 6vw; }
.right .specimen { margin-left: 0; margin-right: 6vw; }
.tray { background: linear-gradient(180deg, var(--seafoam), var(--sand)); }
.slide { background: linear-gradient(145deg, #fff6dc, var(--sand)); }
.tidepool { background: radial-gradient(circle at 75% 30%, rgba(224,122,95,.26), transparent 19rem), linear-gradient(180deg, var(--ink), var(--violet)); color: var(--seafoam); }
.tidepool h2, .tidepool .kicker { color: var(--sand); }
.card { background: linear-gradient(180deg, #f8ead0, var(--seafoam)); }

.root-illustration {
  height: 150px;
  margin: 26px 0;
  position: relative;
  border-bottom: 3px dotted rgba(47,111,99,.35);
}
.root-illustration i { position: absolute; left: 45%; top: 6px; width: 6px; height: 130px; background: var(--kelp); border-radius: 99px; transform-origin: top; }
.root-illustration i:nth-child(1) { transform: rotate(26deg); }
.root-illustration i:nth-child(2) { transform: rotate(-38deg); height: 116px; }
.root-illustration i:nth-child(3) { transform: rotate(62deg); height: 92px; background: var(--gold); }
.root-illustration i:nth-child(4) { transform: rotate(-68deg); height: 80px; background: var(--coral); }

.counter-line {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 24px;
  border-top: 1px solid rgba(47,111,99,.24);
  padding-top: 18px;
}
.counter { font: 600 clamp(2.6rem, 5vw, 5rem)/1 "IBM Plex Sans Condensed", sans-serif; color: var(--kelp); }
.counter-line em { font-family: "Source Serif 4", serif; color: var(--violet); }
.counter-line.coral .counter { color: var(--coral); }
.tidepool .counter-line em { color: var(--seafoam); }

.tag-strand { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0; }
.tag-strand span {
  position: relative;
  padding: 13px 18px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 4px 18px 18px 4px;
  font: 600 18px/1 "IBM Plex Sans Condensed", sans-serif;
  transform-origin: 8px -18px;
  animation: swing 4s ease-in-out infinite;
}
.tag-strand span:nth-child(even) { animation-delay: -1.6s; }

.lantern-scene { position: relative; height: 240px; margin: 10px 0 18px; }
.lantern-glow { position: absolute; inset: 10px 24% 0; border-radius: 50%; background: radial-gradient(circle, rgba(242,230,200,.72), rgba(224,122,95,.18) 38%, transparent 70%); animation: breathe 3s ease-in-out infinite; }
.lantern-body { position: absolute; left: 46%; top: 80px; width: 70px; height: 98px; border: 5px solid var(--gold); border-radius: 28px 28px 16px 16px; background: rgba(242,230,200,.18); }
.moth { position: absolute; width: 18px; height: 11px; background: var(--sand); border-radius: 50%; animation: orbit 6s linear infinite; }
.m1 { left: 34%; top: 80px; } .m2 { left: 62%; top: 56px; animation-delay: -2s; } .m3 { left: 52%; top: 34px; animation-delay: -4s; }

.spore-bed { height: 170px; position: relative; margin: 28px 0; }
.spore-bed span { position: absolute; bottom: 10px; width: 28px; height: 28px; border-radius: 50% 50% 48% 0; background: var(--coral); transform: rotate(45deg); animation: spore 4.5s ease-in-out infinite; }
.spore-bed span:nth-child(1) { left: 8%; }
.spore-bed span:nth-child(2) { left: 24%; animation-delay: -.8s; background: var(--gold); }
.spore-bed span:nth-child(3) { left: 43%; animation-delay: -1.7s; }
.spore-bed span:nth-child(4) { left: 61%; animation-delay: -2.4s; background: var(--kelp); }
.spore-bed span:nth-child(5) { left: 76%; animation-delay: -3.1s; }
.spore-bed span:nth-child(6) { left: 88%; animation-delay: -3.7s; background: var(--violet); }

.final { min-height: 110vh; justify-items: center; }
.dusk-plate { background: linear-gradient(160deg, rgba(75,59,97,.96), var(--ink)); color: var(--seafoam); text-align: center; }
.dusk-plate h2, .dusk-plate .kicker { color: var(--sand); }
.permit-row { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 34px; }
.permit { color: var(--ink); background: var(--gold); text-decoration: none; padding: 14px 22px; border-radius: 999px; font-weight: 700; box-shadow: 0 12px 22px rgba(0,0,0,.2); }
.permit-row span { font-family: "Source Serif 4", serif; font-style: italic; }

.tooltip {
  position: fixed;
  z-index: 20;
  max-width: 250px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--sand);
  font: italic 15px/1.35 "Source Serif 4", serif;
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 12px);
  transition: opacity .2s;
}

.inspectable { cursor: crosshair; }
.chapter.in-view .specimen, .chapter.in-view .dusk-plate, .chapter.in-view .notebook-page { animation: noteArrive .9s ease both; }

@keyframes mistDrift { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
@keyframes crabWalk { 0% { transform: translateX(0) rotate(-3deg); } 70% { transform: translateX(330px) rotate(3deg); } 100% { transform: translateX(330px) rotate(0); } }
@keyframes swing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes breathe { 0%,100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes orbit { to { transform: translate(36px, 22px) rotate(360deg); } }
@keyframes spore { 0%,100% { transform: translateY(0) rotate(45deg) scale(.8); } 50% { transform: translateY(-80px) rotate(80deg) scale(1.2); } }
@keyframes noteArrive { from { opacity: .25; transform: translateY(35px) rotate(-.5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (max-width: 820px) {
  .shell-index { display: none; }
  .estuary { left: 28px; width: 120px; }
  .marker { left: 28px; }
  .chapter, .chapter.left, .chapter.right { justify-items: end; padding: 8vh 5vw 8vh 58px; }
  .specimen, .right .specimen { margin: 0; }
  .margin-note { position: static; margin: 26px 0 0 70px; }
  .crab { left: 12px; bottom: -46px; animation: none; }
}