:root {
  --honey-cream: #F8EBCF;
  --oat-milk: #FFF8EA;
  --moss-ink: #2F3A28;
  --pollen-gold: #D9A441;
  --guppy-coral: #E88968;
  --tetra-blue: #5FA8A6;
  --fern-shadow: #8D9B73;
  --line: rgba(47, 58, 40, 0.12);
  --soft-line: rgba(141, 155, 115, 0.24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--moss-ink);
  background: var(--honey-cream);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}

.lagoon-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(217,164,65,0.22), transparent 42%),
    radial-gradient(circle at 78% 18%, rgba(95,168,166,0.14), transparent 35%),
    radial-gradient(circle at 12% 82%, rgba(232,137,104,0.11), transparent 34%),
    radial-gradient(circle at 92% 80%, rgba(141,155,115,0.18), transparent 38%);
}

.lagoon-texture::before,
.lagoon-texture::after {
  content: "";
  position: absolute;
  width: 32rem;
  height: 32rem;
  opacity: 0.12;
  background: repeating-radial-gradient(ellipse at center, transparent 0 18px, #2F3A28 19px 20px, transparent 21px 46px);
  border-radius: 50%;
}

.lagoon-texture::before { left: -11rem; top: 8vh; transform: rotate(-18deg) scaleY(1.6); }
.lagoon-texture::after { right: -14rem; bottom: 2vh; transform: rotate(24deg) scaleY(1.45); }

main, .pond-markers { position: relative; z-index: 1; }

.pond-markers {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 13px;
  z-index: 9;
}

.marker {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(47,58,40,0.16);
  background: rgba(255,248,234,0.58);
  text-decoration: none;
  color: var(--fern-shadow);
  transition: background 400ms ease, transform 400ms ease, border-color 400ms ease;
}

.marker span { font: 500 9px/1 "Nunito", sans-serif; opacity: 0; transition: opacity 300ms ease; }
.marker.is-active { background: var(--oat-milk); border-color: rgba(217,164,65,0.7); transform: scale(1.24); }
.marker.is-active span { opacity: 1; }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 9vh clamp(28px, 6vw, 92px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  left: clamp(24px, 4vw, 62px);
  top: 28px;
  font: 500 12px/1 "Nunito", sans-serif;
  color: var(--fern-shadow);
  letter-spacing: 0.16em;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  width: 100%;
}

.stone {
  position: relative;
  background: rgba(255,248,234,0.78);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.52), 0 28px 90px rgba(47,58,40,0.07);
  backdrop-filter: blur(9px);
}

.stone::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dotted rgba(141,155,115,0.2);
  border-radius: inherit;
  pointer-events: none;
}

.specimen-label {
  margin: 0 0 18px;
  font: 500 12px/1.2 "Nunito", sans-serif;
  color: var(--fern-shadow);
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

h1, h2, h3 {
  font-family: "Nunito Sans", sans-serif;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  color: var(--moss-ink);
}

h1 { font-size: clamp(4rem, 11vw, 10.6rem); max-width: 11ch; }
h2 { font-size: clamp(2.5rem, 6.6vw, 6.8rem); max-width: 10.5ch; }
h3 { font-size: clamp(1.45rem, 2vw, 2.1rem); line-height: 1; }
p { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.7; }

.hero-statement {
  width: min(82vw, 970px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: 54px 96px 48px 76px;
  margin-left: 3vw;
}

.quiet-copy { max-width: 520px; color: rgba(47,58,40,0.72); margin-top: 28px; }

.coordinate-lines {
  position: absolute;
  inset: 9vh 7vw;
  opacity: 0.24;
  background-image: linear-gradient(rgba(47,58,40,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(47,58,40,0.12) 1px, transparent 1px);
  background-size: 140px 140px;
  mask-image: radial-gradient(circle at 40% 50%, black, transparent 70%);
}

.ambient-lines, .fish-path-svg, .pond-map { overflow: visible; }
.ambient-lines { position: absolute; inset: 11vh 0 auto 0; width: 100%; height: 72vh; pointer-events: none; }
.ambient-lines path, .fish-path-svg path, .pond-map path { fill: none; stroke: var(--tetra-blue); stroke-width: 1.5; stroke-dasharray: 3 12; opacity: 0.68; }
.path-beads circle, .fish-path-svg circle, .nodes circle { fill: var(--pollen-gold); filter: drop-shadow(0 0 8px rgba(217,164,65,0.36)); }

.reed-note {
  position: absolute;
  right: clamp(74px, 11vw, 160px);
  bottom: 12vh;
  width: 166px;
  min-height: 320px;
  padding: 24px 18px;
  border-radius: 80px;
  background: rgba(255,248,234,0.72);
  border: 1px solid rgba(47,58,40,0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--fern-shadow);
}
.reed-note span { font: 500 11px/1 "Nunito", sans-serif; letter-spacing: 0.14em; }
.reed-note strong { font: 700 1.6rem/1 "Nunito Sans", sans-serif; color: var(--moss-ink); letter-spacing: -0.035em; }
.reed-note em { font-style: normal; font-size: 0.86rem; line-height: 1.55; }

.current-grid { align-items: center; }
.current-band { grid-column: 2 / span 8; border-radius: 48px 120px 44px 76px; padding: clamp(28px, 5vw, 66px); }
.current-band h2 { max-width: 13ch; }
.current-band p:not(.specimen-label) { width: min(620px, 86%); color: rgba(47,58,40,0.72); }
.specimen-tile { grid-column: 9 / span 3; grid-row: 1; align-self: end; border-radius: 42px; padding: 32px; aspect-ratio: 1; transform: translateY(34%); }
.mini-node { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--pollen-gold); box-shadow: 0 0 0 14px rgba(217,164,65,0.12); margin-bottom: 42px; }
.fish-window { grid-column: 3 / span 5; grid-row: 2; height: 180px; border-radius: 999px; padding: 10px 34px; transform: translateY(-18px); }

.fish, .circling-fish {
  position: absolute;
  width: 28px;
  height: 16px;
  pointer-events: auto;
  z-index: 4;
  filter: drop-shadow(0 3px 8px rgba(47,58,40,0.12));
}
.fish span, .circling-fish span {
  position: absolute;
  inset: 3px 5px 3px 0;
  border-radius: 55% 48% 48% 55%;
  background: var(--tetra-blue);
}
.fish span::before, .circling-fish span::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 1px;
  border-left: 10px solid var(--pollen-gold);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.fish span::after, .circling-fish span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--moss-ink);
}
.fish-one { left: 10%; top: 63%; }
.school { left: 8%; top: 44%; width: 84px; }
.school span:nth-child(2) { transform: translate(28px, -11px) scale(0.82); background: var(--guppy-coral); }
.school span:nth-child(3) { transform: translate(53px, 9px) scale(0.72); background: var(--tetra-blue); }

.companion-grid { align-items: center; }
.listening-block { grid-column: 2 / span 5; border-radius: 62px 44px 90px 46px; padding: clamp(28px, 4.5vw, 58px); }
.presence-block { grid-column: 7 / span 4; border-radius: 50%; aspect-ratio: 1; padding: clamp(34px, 5vw, 70px); display: grid; align-content: center; transform: translateY(62px); }
.presence-block p:not(.specimen-label) { color: rgba(47,58,40,0.68); }
.dew-ring { position: absolute; inset: -28px; border: 1px solid rgba(95,168,166,0.22); border-radius: 50%; box-shadow: inset 0 0 0 44px rgba(95,168,166,0.04); }
.annotation-stem { grid-column: 5 / span 3; grid-row: 1; align-self: start; margin-top: 2vh; padding-top: 72px; border-left: 1px solid rgba(141,155,115,0.38); font: 500 12px/1.5 "Nunito", sans-serif; color: var(--fern-shadow); letter-spacing: 0.12em; }

.map-shell {
  position: relative;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 58px);
  min-height: 620px;
  border-radius: 86px 44px 112px 54px;
  background: rgba(255,248,234,0.5);
  border: 1px solid rgba(47,58,40,0.12);
}
.map-shell h2 { max-width: 13ch; }
.pond-map { position: absolute; left: 5%; right: 5%; bottom: 6%; width: 90%; height: 58%; }
.pond-map .coral-path { stroke: var(--guppy-coral); stroke-dasharray: 1 15; opacity: 0.48; }
.ripples circle { fill: none; stroke: rgba(95,168,166,0.26); stroke-width: 1; animation: breathe 5.5s ease-in-out infinite; }
.map-fish { left: 8%; bottom: 29%; }
.map-label { position: absolute; padding: 10px 14px; border-radius: 999px; background: rgba(255,248,234,0.82); border: 1px solid rgba(47,58,40,0.12); font: 500 12px/1 "Nunito", sans-serif; color: var(--fern-shadow); }
.label-one { left: 43%; bottom: 34%; }
.label-two { right: 10%; bottom: 48%; }

.clearing-composition {
  position: relative;
  width: min(760px, 90vw);
  margin: 0 auto;
  text-align: left;
  padding: clamp(34px, 7vw, 86px);
  border-radius: 48px 48px 160px 48px;
  background: rgba(255,248,234,0.78);
  border: 1px solid rgba(47,58,40,0.12);
}
.clearing-composition h2 { max-width: 9.5ch; }
.clearing-composition p:not(.specimen-label) { max-width: 460px; color: rgba(47,58,40,0.7); }
.gold-node { position: absolute; right: 17%; top: 23%; width: 20px; height: 20px; border-radius: 50%; background: var(--pollen-gold); box-shadow: 0 0 0 18px rgba(217,164,65,0.12), 0 0 34px rgba(217,164,65,0.46); }
.circling-fish { right: 14%; top: 21%; animation: orbit 8s linear infinite; transform-origin: -42px 24px; }
.continuation-link { display: inline-block; margin-top: 26px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(47,58,40,0.14); color: var(--moss-ink); text-decoration: none; font: 500 13px/1 "Nunito", sans-serif; background: rgba(248,235,207,0.6); }

.water-ripple {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(95,168,166,0.65);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}
.water-ripple.is-visible { animation: touchWater 760ms ease-out forwards; }

.reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 900ms ease, transform 900ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.reveal.delay-a { transition-delay: 140ms; }
.reveal.delay-b { transition-delay: 280ms; }

@keyframes breathe { 0%, 100% { transform: scale(0.86); opacity: 0.26; } 50% { transform: scale(1.1); opacity: 0.58; } }
@keyframes touchWater { 0% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(9); } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  .pond-markers { right: 12px; }
  .chapter { padding: 9vh 22px; }
  .hero-statement { width: calc(100vw - 60px); margin-left: 0; border-radius: 36px 58px 36px 50px; }
  .reed-note { position: relative; right: auto; bottom: auto; margin-top: 22px; width: 100%; min-height: 160px; border-radius: 34px; }
  .chapter-grid { grid-template-columns: 1fr; }
  .current-band, .specimen-tile, .fish-window, .listening-block, .presence-block, .annotation-stem { grid-column: 1; grid-row: auto; transform: none; }
  .presence-block { border-radius: 46px; aspect-ratio: auto; }
  .annotation-stem { margin-top: 0; }
  .map-shell { min-height: 720px; border-radius: 52px; }
  .pond-map { bottom: 14%; height: 44%; }
}