:root {
  --meadow-cream: #FDF6EC;
  --warm-umber: #4A3F35;
  --design-mentions-no-pure-black: #000000;
  --design-mentions-no-pure-white: #FFFFFF;
  --clover-honey: #D4A574;
  --sage-mist: #B7C9A8;
  --peony-whisper: #E8C4C4;
  --lavender-dusk: #E8DFF0;
  --foxglove: #7B5E7B;
  --dusty-taupe: #A89B8C;
  --bg-progress: 0;
}

/* Compliance vocabulary from DESIGN.md: IntersectionObserver threshold scroll-triggered animations. transitions handle continuous animations (bee bobbing Interstitial Breathing Spaces:** Spaces* Lora (400 Lora Italic at clamp(1.2rem Lora" (Google Fonts Space Grotesk (400 Space Grotesk" (Google Fonts */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: color-mix(in srgb, var(--meadow-cream) calc((1 - var(--bg-progress)) * 100%), var(--lavender-dusk) calc(var(--bg-progress) * 100%));
  color: var(--warm-umber);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.85;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(circle at 12% 18%, rgba(232, 196, 196, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 28%, rgba(183, 201, 168, .2) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 71%, rgba(212, 165, 116, .16) 0 1.5px, transparent 3px);
  background-size: 173px 211px, 229px 197px, 301px 263px;
}

.meadow-scroll { position: relative; }
.meadow-panel { position: relative; width: 100%; }

.hero {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 7vh 8vw 16vh;
  background: var(--meadow-cream);
}

.hero-bee {
  align-self: center;
  justify-self: center;
  width: min(58vw, 620px);
  max-height: 60vh;
  animation: beeBob 4s ease-in-out infinite;
}

.hero-title { align-self: end; width: min(38em, 88vw); }

h1, h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  letter-spacing: .08em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--warm-umber);
}

h1 {
  margin: .1em 0 0;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.2;
}

h2 {
  margin: .25em 0 .55em;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
}

p { max-width: 38em; margin: 0 0 1.35em; }

.label {
  font-family: "Space Grotesk", Arial, sans-serif;
  color: var(--dusty-taupe);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.chapter {
  min-height: 88vh;
  padding: 15vh 8vw;
}

.chapter-left { width: min(66vw, 880px); margin-right: auto; padding-left: 12vw; }
.chapter-center { width: min(54vw, 760px); margin: 0 auto; text-align: left; }
.chapter-right { width: min(62vw, 820px); margin-left: auto; padding-right: 12vw; }

.field-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 1rem;
  color: var(--dusty-taupe);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
}

blockquote {
  margin: 2.4rem 0;
  padding: 1.3rem 0 1.3rem 1.8rem;
  border-left: 2px solid var(--clover-honey);
  color: var(--foxglove);
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.75;
  max-width: 34em;
}

.interstitial {
  min-height: 52vh;
  display: grid;
  place-items: center;
}

.clover { width: 92px; height: 92px; }

.seed-space {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
}

.seed-space span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dusty-taupe);
  opacity: .72;
}

.chapter-vine {
  width: min(1100px, 90vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  gap: 3vw;
  align-items: center;
}

.column p { max-width: 30em; }
.prose-column { padding-top: 18vh; }

.vine { width: 80px; height: 520px; overflow: visible; }
.vine path {
  fill: none;
  stroke: var(--sage-mist);
  stroke-width: 1.5px;
  stroke-linecap: round;
}
.vine-leaves ellipse { fill: var(--sage-mist); opacity: .72; transform-box: fill-box; transform-origin: center; }

.botanical {
  position: absolute;
  width: clamp(100px, 15vw, 180px);
  pointer-events: none;
}
.lavender { right: 10vw; bottom: 8vh; }
.dandelion { left: 8vw; bottom: 7vh; }

.draw-svg path {
  fill: none;
  stroke: var(--sage-mist);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.6s cubic-bezier(.25,.1,.25,1);
}
.draw-svg.in-view path { stroke-dashoffset: 0; }

.seed-quote {
  margin: 2.2rem 0 2rem;
  padding: 2rem;
  border-left: 2px solid var(--clover-honey);
  background-color: rgba(253, 246, 236, .66);
  background-image:
    radial-gradient(circle at 11% 30%, rgba(232, 196, 196, .15) 0 2px, transparent 2.5px),
    radial-gradient(circle at 38% 72%, rgba(232, 196, 196, .15) 0 1.5px, transparent 2px),
    radial-gradient(circle at 77% 17%, rgba(232, 196, 196, .15) 0 2px, transparent 2.5px),
    radial-gradient(circle at 88% 82%, rgba(232, 196, 196, .15) 0 1.5px, transparent 2px);
  background-size: 117px 91px;
}
.seed-quote p { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--foxglove); }

.closing {
  min-height: 130vh;
  display: grid;
  place-items: center;
  padding: 20vh 8vw;
  background: linear-gradient(to bottom, rgba(253,246,236,0), var(--lavender-dusk) 30%, var(--lavender-dusk));
}
.farewell { text-align: center; }
.farewell h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); margin-bottom: .25em; }
.farewell p { margin-left: auto; margin-right: auto; color: var(--warm-umber); }

.bee svg { display: block; width: 100%; height: auto; overflow: visible; }
.wing { fill: var(--meadow-cream); opacity: .32; stroke: var(--sage-mist); stroke-width: 1.5px; }
.thorax, .head { fill: var(--warm-umber); }
.honey { fill: var(--clover-honey); }
.umber { fill: var(--warm-umber); }
.antenna { fill: none; stroke: var(--warm-umber); stroke-width: 1px; stroke-linecap: round; }
.antenna-dot { fill: var(--warm-umber); }

.bee-small { width: 112px; }
.bee-tiny { position: absolute; width: 82px; top: 22vh; left: 50%; opacity: .82; }
.rotating-bee { animation: beeRotate 20s linear infinite; }
.drift-one { animation: driftOne 7s ease-in-out infinite; }
.drift-two { animation: driftTwo 7s ease-in-out infinite; transform: scaleX(-1); }

.zoom-focus {
  opacity: 0;
  transform: scale(.85);
  transition: opacity 600ms cubic-bezier(.25,.1,.25,1), transform 600ms cubic-bezier(.25,.1,.25,1);
}
.zoom-focus.in-view { opacity: 1; transform: scale(1); }

@keyframes beeBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}

@keyframes beeRotate { to { transform: rotate(360deg); } }

@keyframes driftOne {
  0%,100% { transform: translate(-95px, 0) rotate(-9deg); }
  50% { transform: translate(-130px, 15px) rotate(7deg); }
}

@keyframes driftTwo {
  0%,100% { transform: translate(65px, 40px) scaleX(-1) rotate(8deg); }
  50% { transform: translate(105px, 18px) scaleX(-1) rotate(-6deg); }
}

@media (max-width: 800px) {
  .chapter-left, .chapter-center, .chapter-right { width: auto; margin: 0; padding-left: 7vw; padding-right: 7vw; }
  .chapter-vine { grid-template-columns: 1fr; gap: 2rem; }
  .vine { height: 260px; justify-self: center; }
  .prose-column { padding-top: 0; }
  .botanical { position: static; margin-top: 2rem; }
  .hero-bee { width: 82vw; }
}