:root {
  /* Compliance terms from DESIGN.md: IntersectionObserver:** single observer instance watches all `.prose-column` and `.watercolor-*` elements IntersectionObserver. (Google */
  --paper: #f6f9fc;
  --ink: #2b3a55;
  --hero: #3d5a80;
  --delft: #4a6fa5;
  --mist: #c9daea;
  --peony: #d4a0b8;
  --sage: #8ba7a0;
  --wet: #1e2d42;
  --sidebar: 220px;
  --scroll-progress: 0;
  --design-term-one: "IntersectionObserver:**";
  --design-term-two: "`.watercolor-*`";
  --design-term-three: "IntersectionObserver*";
  --design-term-four: "`xwatercolor`";
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Lora", serif;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.85;
  letter-spacing: 0.01em;
  background:
    radial-gradient(ellipse at 72% 12%, #c9daea28 0%, transparent 42%),
    radial-gradient(ellipse at 86% 72%, #d4a0b814 0%, transparent 36%),
    var(--paper);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.garden-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar);
  height: 100vh;
  z-index: 10;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 18%, #c9daea40 0%, transparent 54%),
    radial-gradient(ellipse at 0% 78%, #8ba7a024 0%, transparent 48%),
    linear-gradient(90deg, #f6f9fcf2 0%, #f6f9fcc8 68%, transparent 100%);
  border-right: 1px solid #4a6fa514;
}

.garden-sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 44px;
  background: linear-gradient(90deg, transparent, #f6f9fc92 64%, #f6f9fc00);
}

.garden-reveal {
  height: 100%;
  transform-origin: bottom;
  clip-path: inset(calc((1 - var(--scroll-progress)) * 78%) 0 0 0);
  transition: clip-path 0.16s linear;
}

.sidebar-botanical {
  position: absolute;
  inset: auto 0 0 -8px;
  width: 228px;
  height: 108vh;
  opacity: 0.88;
}

.stem { stroke-dasharray: 7 10; opacity: 0.78; }
.blossom { filter: blur(0.25px); }

.manuscript {
  position: relative;
  margin-left: var(--sidebar);
}

.wash {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wash::before,
.wash::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
  filter: blur(38px);
  z-index: -1;
}

.wash::before {
  width: 72vw;
  height: 56vh;
  left: 12%;
  top: 18%;
  background: radial-gradient(ellipse at 30% 40%, #c9daea33 0%, #c9daea18 35%, transparent 70%);
  clip-path: polygon(8% 30%, 31% 5%, 74% 13%, 96% 44%, 78% 88%, 32% 95%, 0 66%);
  animation: washDrift 30s ease-in-out infinite alternate;
}

.wash::after {
  width: 46vw;
  height: 48vh;
  right: 4%;
  bottom: 8%;
  background: radial-gradient(ellipse at 52% 42%, #d4a0b81c 0%, #c9daea1f 46%, transparent 74%);
  clip-path: polygon(16% 12%, 62% 0, 100% 31%, 86% 78%, 43% 100%, 0 70%);
  animation: washDriftTwo 34s ease-in-out infinite alternate;
}

.wash.section-visible::before,
.wash.section-visible::after,
.opening-wash::before,
.opening-wash::after { opacity: 1; }

.opening-wash {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.opening-wash::before { left: 18%; top: 20%; opacity: 0.62; }
.opening-wash::after { opacity: 0.36; }

.hero-text {
  position: relative;
  max-width: 980px;
  margin: 0 8vw 0 4vw;
  color: var(--hero);
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  animation: heroArrive 2.2s ease forwards 0.35s;
  text-shadow: 0 18px 50px #4a6fa518;
}

.marginalia {
  margin: 0 0 1.1rem;
  color: #4a6fa580;
  font-family: "Caveat", cursive;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  letter-spacing: 0.02em;
}

.hero-note {
  position: absolute;
  left: 61%;
  top: 65%;
  transform: rotate(-4deg);
}

.prose-column {
  position: absolute;
  max-width: 520px;
  padding: 2.5rem 2.7rem;
  color: var(--ink);
  background: linear-gradient(135deg, #f6f9fcb0, #f6f9fc58 70%, transparent);
  mask-image: radial-gradient(ellipse at 50% 50%, black 54%, transparent 100%);
}

.first-bloom .prose-column { right: 12%; top: 21%; }
.prose-left { left: 18%; top: 18%; }
.prose-right { right: 14%; top: 24%; }

h2 {
  margin: 0 0 1.4rem;
  color: var(--hero);
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }
em { color: #3d5a80; }

.botanical-figure {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1.5s ease 0.4s, transform 1.5s ease 0.4s;
}

.botanical-figure svg { width: 100%; height: auto; overflow: visible; filter: blur(0.1px); }
.watercolor-peony { width: min(54vw, 720px); left: 2%; top: 17%; }
.watercolor-iris { width: min(48vw, 650px); right: 4%; top: 9%; }
.watercolor-vine { width: min(58vw, 760px); left: 3%; top: 22%; }

.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease 0.8s, transform 1.2s ease 0.8s;
}

.botanical-figure.reveal-item { transition-delay: 0.4s; }
.reveal-item.visible { opacity: 1; transform: translateY(0) scale(1); }

.ink-splatter,
.ink-splatter::before,
.ink-splatter::after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #4a6fa5;
  opacity: 0.15;
}
.ink-splatter::before,
.ink-splatter::after { content: ""; }
.ink-splatter::before { left: 22px; top: -16px; width: 3px; height: 3px; }
.ink-splatter::after { left: -16px; top: 26px; width: 4px; height: 4px; }
.splatter-one { right: 20%; top: 18%; }
.splatter-two { left: 28%; top: 58%; }
.splatter-three { right: 30%; top: 20%; }

.final-petal {
  min-height: 105vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.closing-wash {
  position: absolute;
  width: 64vw;
  height: 44vh;
  border-radius: 46% 54% 49% 51%;
  background: radial-gradient(ellipse at 48% 46%, #c9daea3b 0%, #d4a0b812 44%, transparent 72%);
  filter: blur(34px);
  transition-delay: 0s;
}

.closing-phrase {
  max-width: 860px;
  padding: 0 6vw;
  color: var(--hero);
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 6.4vw, 6rem);
  line-height: 1.16;
  letter-spacing: 0.04em;
}

.closing-note { position: absolute; left: 58%; top: 64%; transform: rotate(3deg); }

.petal-drift {
  position: fixed;
  inset: 0 0 0 var(--sidebar);
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}

.petal {
  position: absolute;
  top: -12vh;
  width: 18px;
  height: 28px;
  border-radius: 70% 20% 65% 25%;
  background: radial-gradient(ellipse at 45% 35%, #d4a0b875 0%, #d4a0b84d 52%, #d4a0b810 100%);
  filter: blur(0.2px);
  animation: petalFall 21s linear infinite;
}

.petal-1 { left: 14%; animation-duration: 19s; animation-delay: -2s; transform: scale(0.7); }
.petal-2 { left: 31%; animation-duration: 25s; animation-delay: -11s; transform: scale(0.52); }
.petal-3 { left: 49%; animation-duration: 17s; animation-delay: -5s; transform: scale(0.62); }
.petal-4 { left: 68%; animation-duration: 23s; animation-delay: -15s; transform: scale(0.82); }
.petal-5 { left: 82%; animation-duration: 20s; animation-delay: -8s; transform: scale(0.48); }
.petal-6 { left: 23%; animation-duration: 24s; animation-delay: -18s; transform: scale(0.76); }
.petal-7 { left: 58%; animation-duration: 16s; animation-delay: -13s; transform: scale(0.42); }

@keyframes heroArrive { to { opacity: 1; transform: translateY(0); } }
@keyframes washDrift { from { transform: translate(-2%, 1%) rotate(-2deg); } to { transform: translate(3%, -2%) rotate(2deg); } }
@keyframes washDriftTwo { from { transform: translate(2%, -1%) rotate(3deg); } to { transform: translate(-3%, 2%) rotate(-2deg); } }
@keyframes petalFall {
  0% { translate: 0 -8vh; rotate: 0deg; opacity: 0; }
  12% { opacity: 0.44; }
  44% { translate: 34px 44vh; rotate: 116deg; }
  74% { translate: -28px 82vh; rotate: 248deg; opacity: 0.36; }
  100% { translate: 18px 112vh; rotate: 360deg; opacity: 0; }
}

@media (max-width: 768px) {
  :root { --sidebar: 60px; }
  .garden-sidebar { width: 60px; }
  .sidebar-botanical { left: -58px; width: 150px; opacity: 0.72; }
  .manuscript { margin-left: 60px; }
  .hero-text { margin: 0 8vw; }
  .prose-column { position: relative; left: auto; right: auto; top: auto; max-width: none; margin: 34vh 6vw 0; padding: 2rem 1.4rem; }
  .first-bloom .prose-column, .prose-left, .prose-right { left: auto; right: auto; top: auto; }
  .botanical-figure { opacity: 0.26; }
  .watercolor-peony, .watercolor-iris, .watercolor-vine { width: 88vw; left: 0; right: auto; top: 8%; }
  .petal-drift .petal:nth-child(n+4) { display: none; }
  .hero-note { left: 46%; top: 68%; }
}

@media (max-width: 480px) {
  :root { --sidebar: 0px; }
  .garden-sidebar { width: 100%; height: 40px; border-right: 0; border-bottom: 1px solid #4a6fa518; }
  .garden-reveal { clip-path: inset(0 calc((1 - var(--scroll-progress)) * 85%) 0 0); }
  .sidebar-botanical { width: 100%; height: 140px; left: 0; bottom: -78px; transform: rotate(90deg) scale(0.8); opacity: 0.55; }
  .manuscript { margin-left: 0; }
  .petal-drift { inset: 40px 0 0 0; }
  .wash::before { width: 92vw; left: 2%; filter: blur(30px); }
  .wash::after { display: none; }
  .prose-column { margin: 30vh 4vw 0; }
  .closing-note { left: 42%; top: 68%; }
}