:root {
  /* DESIGN TRACE: IntersectionObserver` to apply `.is-visible` for gentle fade-reveal transitions: opacity from 0 to 1. */
  --sky-glass: #8FD7D2;
  --pond-highlight: #D8FFF6;
  --moss: #5F7F55;
  --clay: #B9794A;
  --loam: #4B3324;
  --parchment: #F3E6C8;
  --sepia: #9A6F4D;
  --ink: #24362E;
  --bubble: #F8FFF9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "EB Garamond", Garamond, serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(216, 255, 246, .9), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(143, 215, 210, .55), transparent 25%),
    linear-gradient(135deg, #D8FFF6 0%, #8FD7D2 48%, #F3E6C8 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(45deg, rgba(75, 51, 36, .05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(95, 127, 85, .05) 25%, transparent 25%);
  background-size: 34px 34px;
  mix-blend-mode: multiply;
}

.stage { width: 100%; }

.act {
  min-height: 100vh;
  position: relative;
  padding: clamp(24px, 5vw, 64px);
  display: grid;
  align-content: center;
  gap: 34px;
}

.specimen-tabs {
  position: fixed;
  z-index: 20;
  top: 22px;
  left: 24px;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(248, 255, 249, .45);
  border: 1px solid rgba(248, 255, 249, .72);
  box-shadow: inset 0 1px 8px rgba(255,255,255,.7), 0 18px 45px rgba(75,51,36,.16);
  backdrop-filter: blur(16px);
}

.specimen-tabs a, .label {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.specimen-tabs a {
  color: var(--loam);
  text-decoration: none;
  font-size: .72rem;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(243, 230, 200, .4);
}

.bento-table {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: clamp(24px, 3vw, 40px);
}

.cell, .photo-card, .map-table {
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  border: 1px solid rgba(248, 255, 249, .68);
  background:
    radial-gradient(circle at 18% 12%, rgba(248,255,249,.85), transparent 24%),
    linear-gradient(145deg, rgba(216,255,246,.68), rgba(243,230,200,.72) 58%, rgba(185,121,74,.24));
  box-shadow:
    inset 0 2px 3px rgba(248,255,249,.95),
    inset 0 -18px 35px rgba(75,51,36,.08),
    0 24px 58px rgba(75,51,36,.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.cell::before, .photo-card::before, .map-table::before {
  content: "";
  position: absolute;
  width: 46%;
  height: 24%;
  top: 12px;
  left: 18px;
  border-radius: 50%;
  border-top: 16px solid rgba(248,255,249,.72);
  transform: rotate(-12deg);
  pointer-events: none;
}

.cell { padding: clamp(22px, 3vw, 38px); }
.span-4 { grid-column: span 4; }
.span-2 { grid-column: span 2; }
.span-row-2 { grid-row: span 2; }

.hero-table { min-height: 76vh; padding-top: 42px; }
.pond-cell { display: grid; align-content: end; min-height: 560px; color: var(--ink); }
.pond-cell h1, .section-heading h2 {
  font-family: "Cormorant Garamond", Garamond, serif;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .82;
  margin: 0;
}
.pond-cell h1 { font-size: clamp(4rem, 12vw, 11rem); text-shadow: 0 3px 0 rgba(248,255,249,.45); }
.intro { max-width: 760px; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.35; margin: 18px 0 0; }
.label { font-size: .72rem; color: var(--moss); margin: 0 0 12px; }

.pond-surface {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 28% 24%, rgba(248,255,249,.8), transparent 13%),
    radial-gradient(ellipse at 72% 64%, rgba(216,255,246,.78), transparent 18%),
    linear-gradient(135deg, #D8FFF6 0%, #8FD7D2 48%, #F3E6C8 100%);
}
.ripple { position: absolute; border: 2px solid rgba(248,255,249,.55); border-radius: 50%; animation: ripple 7s ease-in-out infinite; }
.r1 { width: 260px; height: 110px; left: 16%; top: 18%; }
.r2 { width: 360px; height: 150px; right: 12%; bottom: 24%; animation-delay: -3s; }
.agent, .floating-agent {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #F8FFF9 0 12%, #D8FFF6 18%, #B9794A 58%, #4B3324 100%);
  box-shadow: inset 0 2px 4px rgba(248,255,249,.8), 0 10px 20px rgba(75,51,36,.22);
}
.bead-a { left: 18%; top: 30%; animation: driftA 18s ease-in-out infinite; }
.bead-b { left: 44%; top: 18%; animation: driftB 22s ease-in-out infinite; background: radial-gradient(circle at 30% 25%, #F8FFF9, #D8FFF6 25%, #5F7F55 70%); }
.bead-c { right: 20%; top: 42%; animation: driftC 20s ease-in-out infinite; }
.bead-d { left: 36%; bottom: 24%; animation: driftA 24s ease-in-out infinite reverse; background: radial-gradient(circle at 30% 25%, #F8FFF9, #F3E6C8 25%, #9A6F4D 72%); }
.bead-e { right: 32%; bottom: 18%; animation: driftB 19s ease-in-out infinite reverse; }

.mini h2, .cell h3 { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 3vw, 3.5rem); line-height: .95; margin: 0 0 14px; color: var(--loam); }
.mini p, .cell p, .section-heading p, .caption { font-size: 1.18rem; line-height: 1.45; }
.mini { min-height: 210px; }
.archive-mini { background-color: rgba(154,111,77,.18); }
.ritual-mini { background-color: rgba(95,127,85,.18); }
.weather-mini { background-color: rgba(143,215,210,.25); }

.bubble-note {
  position: absolute;
  z-index: 4;
  max-width: 220px;
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  border-radius: 50%;
  font-size: 1.05rem;
  background: radial-gradient(circle at 30% 20%, rgba(248,255,249,.95), rgba(216,255,246,.38) 54%, rgba(143,215,210,.25));
  border: 1px solid rgba(248,255,249,.75);
  box-shadow: inset 0 4px 16px rgba(248,255,249,.78), 0 18px 42px rgba(75,51,36,.18);
}
.note-one { right: 6vw; bottom: 7vh; }
.note-two { left: 7vw; bottom: 8vh; }

.section-heading { max-width: 920px; margin: 0 auto; text-align: center; }
.section-heading h2 { font-size: clamp(3.4rem, 11vw, 10rem); color: var(--loam); }
.section-heading p:last-child { font-size: clamp(1.25rem, 2vw, 1.75rem); }

.village-grid { max-width: 1180px; margin: 0 auto; }
.tile-people { background-image: radial-gradient(circle at 18% 20%, rgba(248,255,249,.8), transparent 20%), linear-gradient(145deg, rgba(216,255,246,.72), rgba(243,230,200,.78)); }
.tile-memory { background-image: repeating-linear-gradient(45deg, rgba(75,51,36,.08) 0 6px, transparent 6px 18px), linear-gradient(145deg, rgba(243,230,200,.92), rgba(185,121,74,.32)); }
.tile-story { background-image: radial-gradient(circle at 80% 18%, rgba(248,255,249,.7), transparent 18%), linear-gradient(145deg, rgba(216,255,246,.5), rgba(95,127,85,.28)); }
.token-row { display: flex; gap: 12px; margin-top: 24px; }
.token-row span, .clay-stamps i {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #F8FFF9, #D8FFF6 22%, #B9794A 72%);
  box-shadow: inset 0 2px 5px rgba(248,255,249,.8), 0 8px 18px rgba(75,51,36,.18);
}
.clay-stamps { display: grid; grid-template-columns: repeat(2, 52px); gap: 18px; margin-top: 30px; }
.clay-stamps i { border-radius: 16px; background: rgba(185,121,74,.42); border: 2px solid rgba(75,51,36,.18); }

.archive-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  max-width: 1180px;
  margin: 0 auto;
}
.photo-card { padding: 16px; transform: rotate(var(--tilt)); }
.photo-card:nth-child(1) { --tilt: -2deg; }
.photo-card:nth-child(2) { --tilt: 1.5deg; margin-top: 54px; }
.photo-card:nth-child(3) { --tilt: -1deg; }
.photo-image {
  height: 360px;
  border-radius: 28px;
  filter: sepia(.32) saturate(.82) contrast(.95);
  box-shadow: inset 0 0 0 999px rgba(143,215,210,.12);
  background-size: cover;
}
.market .photo-image { background-image: linear-gradient(135deg, rgba(154,111,77,.28), rgba(216,255,246,.18)), repeating-linear-gradient(90deg, #9A6F4D 0 24px, #F3E6C8 24px 34px, #B9794A 34px 58px); }
.meal .photo-image { background-image: radial-gradient(circle at 50% 42%, #F3E6C8 0 16%, #9A6F4D 17% 20%, transparent 21%), radial-gradient(circle at 28% 58%, #B9794A 0 10%, transparent 11%), linear-gradient(135deg, #5F7F55, #F3E6C8); }
.classroom .photo-image { background-image: linear-gradient(90deg, rgba(75,51,36,.22) 1px, transparent 1px), linear-gradient(#F3E6C8, #9A6F4D); background-size: 42px 100%, cover; }
.caption {
  margin: -28px 18px 8px;
  position: relative;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(243,230,200,.88);
  color: var(--loam);
}

.map-table {
  min-height: 620px;
  max-width: 1180px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 28% 30%, rgba(216,255,246,.6), transparent 20%),
    radial-gradient(circle at 72% 60%, rgba(95,127,85,.24), transparent 18%),
    linear-gradient(145deg, rgba(243,230,200,.88), rgba(143,215,210,.44));
}
.field-paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.field-paths path { fill: none; stroke: #5F7F55; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 11 14; opacity: .7; }
.map-cell {
  position: absolute;
  width: 170px;
  min-height: 120px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  background: rgba(248,255,249,.48);
  border: 1px solid rgba(248,255,249,.78);
  box-shadow: inset 0 2px 8px rgba(248,255,249,.72), 0 18px 34px rgba(75,51,36,.16);
}
.map-cell span { width: 44px; height: 36px; border-radius: 14px 14px 8px 8px; background: linear-gradient(145deg, #B9794A, #F3E6C8); box-shadow: inset 0 2px 5px rgba(248,255,249,.7); }
.map-cell p { margin: 8px 0 0; font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--loam); }
.house-a { left: 9%; top: 58%; }
.pond-a { left: 39%; top: 38%; }
.market-a { right: 10%; top: 24%; }
.grove-a { right: 16%; bottom: 12%; }
.archive-a { left: 15%; top: 16%; }
.floating-agent { z-index: 3; animation: mapFloat 16s ease-in-out infinite; }
.fa1 { left: 26%; top: 48%; }
.fa2 { left: 58%; top: 26%; animation-delay: -5s; background: radial-gradient(circle at 30% 25%, #F8FFF9, #D8FFF6 25%, #5F7F55 70%); }
.fa3 { right: 28%; bottom: 24%; animation-delay: -9s; background: radial-gradient(circle at 30% 25%, #F8FFF9, #F3E6C8 25%, #9A6F4D 72%); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

@keyframes ripple { 0%,100% { transform: scale(.94); opacity: .38; } 50% { transform: scale(1.12); opacity: .75; } }
@keyframes driftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(110px, 48px); } }
@keyframes driftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-80px, 82px); } }
@keyframes driftC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-120px, -36px); } }
@keyframes mapFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(42px, -22px); } }

@media (max-width: 900px) {
  .bento-table, .archive-rail { grid-template-columns: 1fr; }
  .span-4, .span-2 { grid-column: span 1; }
  .span-row-2 { grid-row: span 1; }
  .specimen-tabs { position: absolute; }
  .pond-cell { min-height: 620px; }
  .archive-rail { gap: 18px; }
  .photo-card:nth-child(2) { margin-top: 0; }
  .map-cell { width: 138px; }
}