:root {
  /* Design font tokens for compliance: Inter** Grotesk** */
  --porcelain: #FFF4DE;
  --pistachio: #CFE7C6;
  --peach: #F7BFA8;
  --butter: #F6E28B;
  --lilac: #D9C8F2;
  --moss: #405C3A;
  --champagne: #D6A85A;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
  --accent: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--moss);
  background: var(--porcelain);
  overflow-x: hidden;
}

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 16%, rgba(247, 191, 168, .42), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(217, 200, 242, .44), transparent 31%),
    linear-gradient(180deg, #FFF4DE 0%, #fff7e8 46%, #f6eddb 100%);
}

.haze {
  position: absolute;
  width: 44vw;
  height: 44vw;
  border-radius: 41% 59% 68% 32% / 48% 44% 56% 52%;
  filter: blur(18px);
  opacity: .38;
  animation: floatHaze 20s ease-in-out infinite alternate;
}

.haze-lilac { background: #D9C8F2; top: 8%; right: -15%; }
.haze-peach { background: #F7BFA8; bottom: 12%; left: -18%; animation-delay: -7s; }
.haze-pistachio { background: #CFE7C6; top: 42%; left: 32%; animation-delay: -13s; }

.seed-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seed-dot {
  width: 18px;
  height: 28px;
  border: 1px solid rgba(214, 168, 90, .58);
  border-radius: 70% 30% 70% 30% / 60% 40% 60% 40%;
  background: rgba(255, 244, 222, .55);
  padding: 0;
  cursor: pointer;
  transition: transform .5s ease, background .5s ease;
}

.seed-dot span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 9px auto 0;
  border-radius: 50%;
  background: transparent;
  transition: background .5s ease, box-shadow .5s ease;
}

.seed-dot.active { transform: scale(1.18); background: rgba(246, 226, 139, .28); }
.seed-dot.active span { background: #F6E28B; box-shadow: 0 0 20px 8px rgba(246, 226, 139, .5); }

#conservatory { position: relative; z-index: 1; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8vw;
  isolation: isolate;
}

.parallax { will-change: transform; }

.arch, .chamber-blob, .leaf-volume, .blossom-aperture, .seed-husk, .moon-blob {
  position: absolute;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.arch {
  width: 82vw;
  height: 80vh;
  border: 1px solid rgba(214, 168, 90, .35);
  border-bottom: 0;
  border-radius: 50% 50% 18% 18% / 64% 64% 24% 24%;
  box-shadow: inset 0 0 0 22px rgba(255, 244, 222, .32), 0 30px 110px rgba(64, 92, 58, .07);
  opacity: .74;
}

.arch-back { top: 7vh; left: 9vw; background: linear-gradient(135deg, rgba(207, 231, 198, .5), rgba(255, 244, 222, .08)); }
.arch-canopy { top: 9vh; right: 6vw; background: linear-gradient(160deg, rgba(207, 231, 198, .68), rgba(217, 200, 242, .18)); }
.arch-archive { top: 12vh; left: 3vw; background: linear-gradient(130deg, rgba(247, 191, 168, .36), rgba(255, 244, 222, .14)); }
.arch-vault { top: 8vh; right: 10vw; background: linear-gradient(130deg, rgba(246, 226, 139, .28), rgba(207, 231, 198, .25)); }
.arch-moon { top: 11vh; left: 11vw; background: linear-gradient(140deg, rgba(217, 200, 242, .52), rgba(255, 244, 222, .24)); }

.rotunda-blob {
  width: min(72vw, 980px);
  height: min(66vw, 760px);
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.52), transparent 22%), linear-gradient(145deg, #FFF4DE, rgba(247, 191, 168, .26));
  border-radius: 44% 56% 50% 50% / 56% 47% 53% 44%;
  border: 1px solid rgba(214, 168, 90, .35);
  box-shadow: 0 42px 140px rgba(64, 92, 58, .15), inset 0 -30px 70px rgba(214, 168, 90, .11);
  animation: blobMorph 14s ease-in-out infinite alternate;
}

.title-island, .curved-plaque {
  position: relative;
  z-index: 5;
  background: rgba(255, 244, 222, .74);
  border: 1px solid rgba(214, 168, 90, .42);
  box-shadow: 0 26px 90px rgba(64, 92, 58, .12), inset 0 0 35px rgba(255, 255, 255, .35);
  backdrop-filter: blur(4px);
}

.hero-island {
  width: min(760px, 88vw);
  padding: clamp(34px, 6vw, 86px);
  text-align: center;
  border-radius: 42% 58% 50% 50% / 26% 28% 72% 74%;
}

.specimen-tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #405C3A;
  border: 1px solid rgba(214, 168, 90, .58);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(207, 231, 198, .35);
}

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.06em;
  color: #405C3A;
  margin: 20px 0 18px;
}

h1 { font-size: clamp(64px, 13vw, 180px); line-height: .78; }
h2 { font-size: clamp(42px, 7.5vw, 112px); line-height: .88; }

p {
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.75;
  margin: 0;
}

.ceremonial em, .closing-mark {
  font-family: var(--accent);
  color: #D6A85A;
  font-style: italic;
}

.pollen-invite {
  margin: 34px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.pollen-invite span, .pod-main span {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  background: #F6E28B;
  box-shadow: 0 0 0 0 rgba(246, 226, 139, .62);
  animation: pollenPulse 2.8s ease-in-out infinite;
}

.botanical {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.drawing-hero { width: min(78vw, 980px); height: auto; bottom: 4vh; left: 9vw; opacity: .72; }
.fern-screen { width: min(58vw, 720px); right: -4vw; bottom: -2vh; opacity: .7; }
.magnolia { width: min(48vw, 620px); left: 5vw; bottom: 3vh; opacity: .74; }
.citrus { width: min(70vw, 840px); right: 1vw; bottom: 6vh; opacity: .72; }

.draw-path {
  fill: none;
  stroke: #405C3A;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawLine 4.8s ease forwards;
}

.draw-path.slow { stroke: #D6A85A; stroke-width: 2.1; animation-duration: 6.6s; animation-delay: .35s; }
.dew { fill: rgba(246, 226, 139, .72); stroke: #D6A85A; stroke-width: 2; filter: drop-shadow(0 0 12px rgba(246, 226, 139, .65)); }
.citrus-fruit { fill: rgba(247, 191, 168, .58); }

.gold-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #D6A85A;
  z-index: 6;
  box-shadow: 0 0 0 8px rgba(214, 168, 90, .12), 0 0 28px rgba(214, 168, 90, .35);
}

.pin-one { left: 21vw; top: 31vh; }
.pin-two { right: 23vw; bottom: 25vh; }

.canopy { background: linear-gradient(180deg, rgba(207, 231, 198, .26), rgba(255, 244, 222, .08)); }
.leaf-volume {
  width: min(70vw, 900px);
  height: min(66vw, 780px);
  right: 2vw;
  background: linear-gradient(145deg, rgba(207, 231, 198, .72), rgba(255, 244, 222, .34));
  border: 1px solid rgba(64, 92, 58, .12);
  border-radius: 72% 28% 64% 36% / 48% 58% 42% 52%;
  animation: blobMorph 16s ease-in-out infinite alternate-reverse;
}

.curved-plaque {
  padding: clamp(30px, 5vw, 70px);
  max-width: 720px;
  border-radius: 34% 66% 27% 73% / 23% 31% 69% 77%;
}

.plaque-left { justify-self: start; margin-left: 4vw; }

.orbit-label {
  position: absolute;
  z-index: 6;
  padding: 12px 18px;
  border: 1px solid rgba(214, 168, 90, .5);
  border-radius: 999px;
  background: rgba(255, 244, 222, .68);
  font-family: var(--accent);
  font-size: clamp(18px, 2vw, 30px);
  color: #D6A85A;
}

.label-one { top: 18vh; right: 16vw; transform: rotate(9deg); }
.label-two { bottom: 18vh; left: 14vw; transform: rotate(-7deg); }

.archive { background: linear-gradient(180deg, rgba(217, 200, 242, .18), rgba(247, 191, 168, .18)); }
.blossom-aperture {
  width: min(78vw, 980px);
  height: min(64vw, 760px);
  left: 10vw;
  background: radial-gradient(circle at 50% 50%, rgba(255, 244, 222, .92) 0 31%, rgba(247, 191, 168, .28) 32% 58%, transparent 59%);
  border-radius: 50%;
  opacity: .86;
}

.archive-ring { position: absolute; inset: auto; width: min(76vw, 900px); height: min(76vw, 900px); z-index: 2; animation: turnSlow 32s linear infinite; }
.petal { position: absolute; width: 42%; height: 58%; left: 29%; top: 0; background: rgba(247, 191, 168, .3); border: 1px solid rgba(214, 168, 90, .24); border-radius: 58% 42% 54% 46% / 72% 70% 30% 28%; transform-origin: 50% 86%; }
.petal-b { transform: rotate(90deg); background: rgba(217, 200, 242, .28); }
.petal-c { transform: rotate(180deg); background: rgba(207, 231, 198, .32); }
.petal-d { transform: rotate(270deg); background: rgba(246, 226, 139, .22); }
.archive-island { width: min(680px, 86vw); padding: clamp(32px, 5vw, 74px); text-align: left; border-radius: 28% 72% 43% 57% / 62% 36% 64% 38%; }

.vault { background: linear-gradient(180deg, rgba(246, 226, 139, .16), rgba(207, 231, 198, .2)); }
.seed-husk {
  width: min(66vw, 820px);
  height: min(72vw, 880px);
  left: 0;
  background: linear-gradient(150deg, rgba(246, 226, 139, .35), rgba(255, 244, 222, .55));
  border: 1px solid rgba(214, 168, 90, .33);
  border-radius: 74% 26% 67% 33% / 57% 42% 58% 43%;
  animation: blobMorph 18s ease-in-out infinite;
}
.vault-plaque { justify-self: end; max-width: 680px; border-radius: 64% 36% 60% 40% / 36% 32% 68% 64%; }
.seed-diagram { position: absolute; left: 11vw; width: min(43vw, 520px); aspect-ratio: 1; z-index: 5; }
.seed-diagram svg { width: 100%; height: 100%; }
.seed-diagram path { fill: none; stroke: #D6A85A; stroke-width: 2; stroke-dasharray: 9 12; opacity: .72; }
.pod { position: absolute; border: 1px solid #D6A85A; background: rgba(255, 244, 222, .72); box-shadow: inset 0 0 35px rgba(246, 226, 139, .24); }
.pod-main { inset: 35%; border-radius: 70% 30% 68% 32% / 60% 42% 58% 40%; display: grid; place-items: center; }
.pod-small { width: 62px; height: 86px; border-radius: 70% 30% 65% 35% / 62% 38% 62% 38%; }
.pod-small.a { left: 7%; top: 7%; transform: rotate(-24deg); }
.pod-small.b { right: 8%; top: 4%; transform: rotate(24deg); }
.pod-small.c { right: 5%; bottom: 7%; transform: rotate(132deg); }

.orangery { background: linear-gradient(180deg, rgba(217, 200, 242, .24), rgba(255, 244, 222, .82)); }
.moon-blob {
  width: min(74vw, 980px);
  height: min(58vw, 720px);
  background: linear-gradient(140deg, rgba(217, 200, 242, .42), rgba(255, 244, 222, .7));
  border: 1px solid rgba(214, 168, 90, .3);
  border-radius: 38% 62% 45% 55% / 56% 38% 62% 44%;
  box-shadow: 0 36px 130px rgba(64, 92, 58, .13);
  animation: blobMorph 19s ease-in-out infinite alternate;
}
.final-island { width: min(820px, 88vw); padding: clamp(34px, 6vw, 82px); text-align: center; border-radius: 55% 45% 56% 44% / 34% 38% 62% 66%; }
.closing-mark { margin-top: 30px; font-size: clamp(28px, 4vw, 62px); }

@keyframes blobMorph {
  0% { border-radius: 44% 56% 50% 50% / 56% 47% 53% 44%; transform: scale(1); }
  50% { border-radius: 58% 42% 62% 38% / 42% 57% 43% 58%; }
  100% { border-radius: 38% 62% 42% 58% / 63% 35% 65% 37%; transform: scale(1.035); }
}

@keyframes floatHaze {
  from { transform: translate3d(-2vw, -1vh, 0) scale(1); }
  to { transform: translate3d(3vw, 2vh, 0) scale(1.08); }
}

@keyframes pollenPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 226, 139, .64), 0 0 18px rgba(246, 226, 139, .7); transform: scale(.96); }
  50% { box-shadow: 0 0 0 18px rgba(246, 226, 139, 0), 0 0 34px rgba(246, 226, 139, .9); transform: scale(1.14); }
}

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes turnSlow { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .chamber { padding: 24px; }
  .seed-nav { right: 12px; }
  .hero-island, .archive-island, .curved-plaque, .final-island { width: calc(100vw - 56px); }
  .plaque-left, .vault-plaque { justify-self: center; margin-left: 0; }
  .seed-diagram { opacity: .28; width: 78vw; left: 4vw; }
  .fern-screen, .magnolia, .citrus, .drawing-hero { width: 112vw; left: -12vw; right: auto; }
  .orbit-label { display: none; }
}