:root {
  /* Compliance vocabulary from DESIGN.md: Interlude via `@keyframes` (translateX oscillation 15-25s duration Interlude** — narrow transitional band (20vh Intersection Observer fade-reveal triggers apply `.visible` that `opacity: → 1` `ease-out` IntersectionObserver` toggles classes which update `--wash-hue` custom properties (Google */
  --parchment: #FDF6EE;
  --rose: #E8B4B8;
  --sage: #B5C7A3;
  --apricot: #F0C987;
  --sepia: #3D3229;
  --lavender: #8E7B94;
  --twilight: #6B5B7B;
  --dew: #E4F0E2;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--sepia);
  background: var(--parchment);
  font-family: "Lora", serif;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.85;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(232, 180, 184, 0.18), transparent 46%),
    radial-gradient(ellipse at 75% 38%, rgba(181, 199, 163, 0.16), transparent 50%),
    radial-gradient(ellipse at 48% 86%, rgba(240, 201, 135, 0.14), transparent 56%),
    var(--parchment);
  transition: background 1.8s var(--ease);
}

body.wash-rose::before {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(232, 180, 184, 0.38), transparent 70%),
    radial-gradient(ellipse at 70% 30%, rgba(240, 201, 135, 0.25), transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(181, 199, 163, 0.28), transparent 65%),
    var(--parchment);
}

body.wash-honey::before {
  background:
    radial-gradient(ellipse at 18% 42%, rgba(240, 201, 135, 0.26), transparent 58%),
    radial-gradient(ellipse at 82% 55%, rgba(232, 180, 184, 0.22), transparent 62%),
    radial-gradient(ellipse at 52% 28%, rgba(228, 240, 226, 0.36), transparent 50%),
    var(--parchment);
}

body.wash-sage::before {
  background:
    radial-gradient(ellipse at 22% 30%, rgba(181, 199, 163, 0.32), transparent 62%),
    radial-gradient(ellipse at 76% 72%, rgba(232, 180, 184, 0.18), transparent 58%),
    radial-gradient(ellipse at 46% 48%, rgba(228, 240, 226, 0.4), transparent 60%),
    var(--parchment);
}

body.wash-apricot::before {
  background:
    radial-gradient(ellipse at 35% 25%, rgba(240, 201, 135, 0.32), transparent 58%),
    radial-gradient(ellipse at 75% 62%, rgba(142, 123, 148, 0.14), transparent 56%),
    radial-gradient(ellipse at 20% 80%, rgba(181, 199, 163, 0.2), transparent 60%),
    var(--parchment);
}

body.wash-twilight::before {
  background:
    radial-gradient(ellipse at 32% 35%, rgba(107, 91, 123, 0.58), transparent 64%),
    radial-gradient(ellipse at 72% 68%, rgba(232, 180, 184, 0.28), transparent 58%),
    radial-gradient(ellipse at 42% 88%, rgba(61, 50, 41, 0.24), transparent 62%),
    var(--twilight);
}

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

.wash-section {
  position: relative;
  isolation: isolate;
}

.wash-section::before,
.wash-section::after {
  content: "";
  position: absolute;
  left: -10vw;
  right: -10vw;
  height: 28vh;
  pointer-events: none;
  filter: blur(24px);
  mix-blend-mode: multiply;
  opacity: 0.55;
  z-index: -1;
}

.wash-section::before { top: -12vh; }
.wash-section::after { bottom: -13vh; }

.hero-canvas {
  min-height: 100vh;
  overflow: hidden;
  background: var(--parchment);
}

.hero-canvas::after {
  background: radial-gradient(ellipse at 50% 40%, rgba(232, 180, 184, 0.35), transparent 68%);
}

.wash-layer {
  position: absolute;
  inset: -18vh -12vw;
  filter: blur(28px);
  mix-blend-mode: multiply;
  animation: breathe 8s var(--ease) infinite alternate;
}

.wash-rose {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(232, 180, 184, 0.52), transparent 70%),
    radial-gradient(ellipse at 60% 12%, rgba(232, 180, 184, 0.20), transparent 46%);
}

.wash-sage {
  animation-delay: -2s;
  background: radial-gradient(ellipse at 50% 80%, rgba(181, 199, 163, 0.36), transparent 65%);
}

.wash-honey {
  animation-delay: -4s;
  background: radial-gradient(ellipse at 70% 30%, rgba(240, 201, 135, 0.3), transparent 60%);
}

@keyframes breathe {
  from { opacity: 0.88; transform: scale(1) rotate(0deg); }
  to { opacity: 0.93; transform: scale(1.025) rotate(0.4deg); }
}

.hero-copy {
  position: absolute;
  left: 15vw;
  right: 15vw;
  bottom: 19vh;
}

.site-title,
.section-heading,
.closing-whisper {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  text-transform: lowercase;
}

.site-title {
  margin: 0 0 0.35em;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0.15em;
  color: var(--sepia);
  text-shadow: 0 14px 40px rgba(142, 123, 148, 0.14);
}

.epigraph {
  width: max-content;
  max-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--lavender);
  font-family: "Dancing Script", cursive;
  font-size: clamp(1.4rem, 3.2vw, 2.5rem);
  animation: writeLine 4.8s steps(31, end) 1.1s forwards;
}

@keyframes writeLine { to { max-width: 31ch; } }

.petal-drift {
  height: 20vh;
  min-height: 150px;
  overflow: hidden;
}

.petal-drift::before {
  background: radial-gradient(ellipse at 70% 30%, rgba(240, 201, 135, 0.22), transparent 64%);
}

.petal {
  position: absolute;
  right: -8vw;
  top: 50%;
  width: var(--size, 24px);
  height: calc(var(--size, 24px) * 1.35);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background: rgba(232, 180, 184, var(--alpha, 0.62));
  box-shadow: inset 5px 7px 12px rgba(253, 246, 238, 0.32), 0 8px 18px rgba(142, 123, 148, 0.08);
  filter: blur(0.2px);
  animation: petalFloat var(--dur, 20s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.petal-1 { --size: 18px; --dur: 18s; --delay: -1s; top: 22%; }
.petal-2 { --size: 31px; --dur: 24s; --delay: -9s; top: 66%; --alpha: 0.5; }
.petal-3 { --size: 23px; --dur: 20s; --delay: -14s; top: 43%; }
.petal-4 { --size: 16px; --dur: 16s; --delay: -6s; top: 74%; }
.petal-5 { --size: 29px; --dur: 25s; --delay: -19s; top: 30%; --alpha: 0.55; }
.petal-6 { --size: 21px; --dur: 19s; --delay: -3s; top: 58%; }
.petal-7 { --size: 35px; --dur: 25s; --delay: -12s; top: 13%; --alpha: 0.48; }
.petal-8 { --size: 19px; --dur: 21s; --delay: -17s; top: 82%; }
.petal-9 { --size: 26px; --dur: 22s; --delay: -7s; top: 38%; }
.petal-10 { --size: 15px; --dur: 15s; --delay: -11s; top: 51%; }
.petal-11 { --size: 28px; --dur: 23s; --delay: -5s; top: 20%; --alpha: 0.6; }
.petal-12 { --size: 22px; --dur: 18s; --delay: -15s; top: 69%; }
.petal-13 { --size: 17px; --dur: 17s; --delay: -8s; top: 34%; }
.petal-14 { --size: 33px; --dur: 25s; --delay: -21s; top: 77%; --alpha: 0.5; }
.petal-15 { --size: 24px; --dur: 20s; --delay: -4s; top: 47%; }

@keyframes petalFloat {
  0% { transform: translateX(8vw) translateY(0) rotate(0deg); }
  25% { transform: translateX(-30vw) translateY(-18px) rotate(96deg); }
  50% { transform: translateX(-62vw) translateY(15px) rotate(185deg); }
  75% { transform: translateX(-98vw) translateY(-12px) rotate(276deg); }
  100% { transform: translateX(-128vw) translateY(6px) rotate(360deg); }
}

.prose-garden {
  max-width: 680px;
  margin: 0 auto;
  padding: 12vh 0 8vh;
}

.prose-garden::before {
  background: radial-gradient(ellipse at 18% 70%, rgba(181, 199, 163, 0.28), transparent 68%);
}

.prose-passage {
  position: relative;
  margin: 0 0 13vh;
}

.vine-wrap {
  position: relative;
  margin: 0 0 4.2vh;
  min-height: 90px;
}

.vine-divider {
  width: 100%;
  height: auto;
  overflow: visible;
}

.vine-path,
.leaf {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaf {
  fill: rgba(181, 199, 163, 0.18);
}

.vine-path {
  stroke-dasharray: var(--path-length, 720);
  stroke-dashoffset: var(--path-length, 720);
  transition: stroke-dashoffset 2s var(--ease);
}

.visible .vine-path,
.vine-wrap.visible .vine-path {
  stroke-dashoffset: var(--draw-offset, 0);
}

.dew {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgba(228,240,226,0.4));
  box-shadow: 0 0 8px rgba(228,240,226,0.5);
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.5s;
}

.visible .dew { opacity: 1; }
.dew-a { left: 19%; top: 32px; }
.dew-b { left: 73%; top: 50px; }
.dew-c { left: 11%; top: 55px; }
.dew-d { left: 66%; top: 33px; }
.dew-e { left: 46%; top: 59px; }
.dew-f { left: 87%; top: 49px; }

.dropcap {
  position: relative;
  margin: 0;
  max-width: 65ch;
}

.dropcap::first-letter {
  float: left;
  margin-right: 0.15em;
  font-family: "Dancing Script", cursive;
  font-size: 3.5em;
  line-height: 0.82;
  color: var(--apricot);
}

.dropcap::before {
  content: "";
  position: absolute;
  width: 4.3em;
  height: 4.3em;
  left: -0.9em;
  top: -0.8em;
  z-index: -1;
  opacity: 0.72;
  background:
    radial-gradient(circle at 72% 18%, rgba(232, 180, 184, 0.45) 0 5px, transparent 6px),
    radial-gradient(circle at 14% 70%, rgba(181, 199, 163, 0.4) 0 7px, transparent 8px),
    conic-gradient(from 210deg, transparent 0 48deg, rgba(181, 199, 163, 0.4) 49deg 83deg, transparent 84deg 360deg);
  border-radius: 50%;
  filter: blur(0.4px);
}

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

.reveal-item.visible,
.visible > .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

.watercolor-gallery {
  min-height: 100vh;
  padding: 13vh 15vw 15vh;
}

.watercolor-gallery::before {
  background: radial-gradient(ellipse at 60% 10%, rgba(240, 201, 135, 0.32), transparent 64%);
}

.section-heading {
  margin: 0 0 8vh;
  color: var(--lavender);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.gallery-panel {
  position: relative;
  min-height: clamp(260px, 34vw, 430px);
  margin: 0;
  padding: 22px;
  background: rgba(253, 246, 238, 0.56);
  box-shadow: 0 26px 50px rgba(61, 50, 41, 0.12), inset 0 0 42px rgba(255,255,255,0.36);
  transform: rotate(var(--rotate, 0deg));
  overflow: hidden;
  z-index: var(--z, 1);
}

.gallery-panel + .gallery-panel { margin-left: -15%; }
.panel-rose { --rotate: -2deg; --z: 1; }
.panel-sage { --rotate: 1.4deg; --z: 2; }
.panel-honey { --rotate: -0.8deg; --z: 3; }
.panel-mauve { --rotate: 2deg; --z: 4; }

.paint-bloom {
  position: absolute;
  inset: 18px;
  filter: blur(16px);
  mix-blend-mode: multiply;
}

.panel-rose .paint-bloom {
  background:
    radial-gradient(ellipse at 42% 35%, rgba(232, 180, 184, 0.72), transparent 48%),
    radial-gradient(ellipse at 62% 68%, rgba(240, 201, 135, 0.28), transparent 54%);
}

.panel-sage .paint-bloom {
  background:
    radial-gradient(ellipse at 44% 54%, rgba(181, 199, 163, 0.72), transparent 54%),
    radial-gradient(ellipse at 70% 25%, rgba(228, 240, 226, 0.55), transparent 48%);
}

.panel-honey .paint-bloom {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(240, 201, 135, 0.68), transparent 50%),
    radial-gradient(ellipse at 34% 72%, rgba(232, 180, 184, 0.28), transparent 56%);
}

.panel-mauve .paint-bloom {
  background:
    radial-gradient(ellipse at 42% 38%, rgba(142, 123, 148, 0.56), transparent 52%),
    radial-gradient(ellipse at 65% 72%, rgba(107, 91, 123, 0.32), transparent 58%);
}

.gallery-panel figcaption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: var(--lavender);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.08em;
}

.closing-garden {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 15vh 15vw;
  color: var(--parchment);
  background:
    radial-gradient(ellipse at 34% 38%, rgba(232, 180, 184, 0.26), transparent 54%),
    radial-gradient(ellipse at 68% 64%, rgba(61, 50, 41, 0.22), transparent 62%),
    linear-gradient(150deg, rgba(107, 91, 123, 0.92), rgba(61, 50, 41, 0.72));
}

.closing-line {
  max-width: 36ch;
  margin: 0 auto 1.4em;
  color: rgba(253, 246, 238, 0.86);
  font-style: italic;
  text-align: center;
}

.closing-whisper {
  margin: 0;
  color: rgba(253, 246, 238, 0.22);
  font-size: clamp(2.2rem, 7vw, 5.8rem);
  letter-spacing: 0.18em;
  text-align: center;
}

@media (max-width: 860px) {
  .hero-copy,
  .watercolor-gallery,
  .closing-garden { left: auto; right: auto; padding-left: 9vw; padding-right: 9vw; }
  .hero-copy { left: 9vw; right: 9vw; }
  .prose-garden { max-width: none; margin: 0 9vw; }
  .gallery-grid { grid-template-columns: 1fr; gap: 24px; }
  .gallery-panel + .gallery-panel { margin-left: 0; margin-top: -9%; }
}