:root {
  /* Implementation tokens: IntersectionObserver threshold trigger `opacity` `transform: (Google */
  --abyss: #0D0A0B;
  --oxblood: #4A0E1B;
  --rose: #8B2D3A;
  --gold: #C4975A;
  --ivory: #F0E6D3;
  --smoke: #A69585;
  --parchment: #F5EDE0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--ivory);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.8;
  letter-spacing: 0.015em;
  overflow-x: hidden;
}

.grain-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  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.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.75'/%3E%3C/svg%3E");
  animation: grain-drift 0.5s steps(1) infinite;
}

.page-descent { position: relative; isolation: isolate; }

.tableau {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem) clamp(1.3rem, 7vw, 8rem);
  background:
    radial-gradient(circle at 76% 48%, rgba(196, 151, 90, 0.14), transparent 18rem),
    radial-gradient(circle at 30% 25%, rgba(139, 45, 58, 0.4), transparent 30rem),
    linear-gradient(135deg, #4A0E1B 0%, #21080e 42%, #0D0A0B 100%);
  position: relative;
  overflow: hidden;
}

.vignette { box-shadow: inset 0 0 10rem rgba(0, 0, 0, 0.62); }

.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 1.5rem;
}

.hero-title,
.chapter-title,
.coda-title {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
  margin: 0;
}

.hero-title {
  font-size: clamp(3.5rem, 10vw, 9rem);
  max-width: 11ch;
  color: var(--ivory);
  text-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.75);
  transform-origin: left center;
}

.hero-prose {
  max-width: 34ch;
  margin: 2rem 0 0 clamp(0rem, 18vw, 18rem);
  color: var(--smoke);
}

.botanical {
  fill: none;
  stroke: var(--ivory);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.86;
}

.hero-bloom {
  position: absolute;
  right: clamp(-2rem, 8vw, 9rem);
  bottom: clamp(1rem, 5vw, 5rem);
  width: clamp(9rem, 23vw, 19rem);
  transform-origin: center;
  filter: drop-shadow(0 0 2rem rgba(240, 230, 211, 0.13));
}

.chapter {
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 9vw, 9rem);
  padding: clamp(5rem, 10vw, 12rem) clamp(1.5rem, 10vw, 12rem);
  background:
    radial-gradient(circle at 17% 38%, rgba(74, 14, 27, 0.62), transparent 24rem),
    linear-gradient(180deg, #0D0A0B, #120b0d 56%, #0D0A0B);
  overflow: hidden;
}

.wide-breath .chapter-copy { max-width: 58rem; position: relative; z-index: 2; }

.reverse { justify-content: flex-end; }

.chapter-title {
  font-size: clamp(2rem, 5vw, 5rem);
  color: var(--ivory);
  max-width: 12ch;
}

.large-prose {
  font-size: clamp(1.45rem, 2.8vw, 3rem);
  line-height: 1.25;
  max-width: 25ch;
  margin: 2rem 0 0;
  color: var(--smoke);
}

.prose {
  margin: 1.8rem 0 0;
  color: var(--ivory);
}

.narrow-focus {
  display: block;
  max-width: 42ch;
  min-height: auto;
  margin: 0 auto;
  padding: clamp(6rem, 12vw, 14rem) 1.5rem;
  background: transparent;
  box-shadow: none;
}

.narrow-focus .chapter-title { max-width: 9ch; }

.side-bloom {
  width: clamp(13rem, 27vw, 27rem);
  min-width: 12rem;
  stroke: var(--rose);
  margin-right: clamp(-10rem, -7vw, -2rem);
  filter: drop-shadow(0 0 1.6rem rgba(139, 45, 58, 0.25));
}

.side-bloom.left {
  margin-left: clamp(-11rem, -8vw, -3rem);
  margin-right: 0;
  stroke: var(--ivory);
  opacity: 0.54;
}

.floral-divider {
  height: 30vh;
  display: flex;
  align-items: center;
  padding: 0 clamp(1rem, 5vw, 5rem);
  background: linear-gradient(180deg, #0D0A0B 0%, #16090d 50%, #0D0A0B 100%);
}

.garland {
  width: 100%;
  height: 10rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.68;
}

.gradient-zone {
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0D0A0B 0%, #4A0E1B 40%, #8B2D3A 60%, #4A0E1B 80%, #0D0A0B 100%);
  overflow: hidden;
}

.gradient-zone.second { background: linear-gradient(180deg, #0D0A0B 0%, #2a0b12 35%, #4A0E1B 55%, #8B2D3A 68%, #0D0A0B 100%); }

.vignette-flower {
  width: min(80vw, 40rem);
  stroke: var(--ivory);
  opacity: 0.38;
}

.coda {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(5rem, 10vw, 11rem) clamp(1.4rem, 8vw, 8rem);
  text-align: center;
  background: var(--parchment);
  color: var(--oxblood);
  overflow: hidden;
}

.coda .eyebrow { color: var(--rose); }

.coda-title {
  max-width: 11ch;
  font-size: clamp(2.8rem, 8vw, 7.5rem);
  color: var(--oxblood);
  transform-origin: center;
}

.coda-prose {
  max-width: 32ch;
  margin: 2rem auto 0;
  color: var(--rose);
}

.coda-frame { position: absolute; inset: 0; pointer-events: none; }

.corner {
  position: absolute;
  width: clamp(8rem, 18vw, 16rem);
  height: clamp(8rem, 18vw, 16rem);
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.top-left { top: 2rem; left: 2rem; }
.top-right { top: 2rem; right: 2rem; }
.bottom-left { bottom: 2rem; left: 2rem; }
.bottom-right { bottom: 2rem; right: 2rem; }

.reveal-item,
.reveal-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.draw-svg path {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 2600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.draw-svg.is-drawn path { stroke-dashoffset: 0; }

.pulse-breathe { animation: breathe 5s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { transform: scale(0.985); opacity: 0.9; }
  50% { transform: scale(1.015); opacity: 1; }
}

@keyframes grain-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5%, -5%); }
  50% { transform: translate(5%, 3%); }
  75% { transform: translate(-3%, 5%); }
}

@media (max-width: 760px) {
  .grain-overlay { display: none; }
  .tableau { min-height: 100svh; }
  .hero-prose { margin-left: 0; }
  .hero-bloom { opacity: 0.45; right: -4rem; bottom: 1rem; }
  .chapter { display: block; min-height: auto; padding-block: 6rem; }
  .side-bloom, .side-bloom.left { width: 70vw; margin: 3rem 0 0 20vw; opacity: 0.5; }
  .reverse .side-bloom { margin: 0 0 3rem -20vw; }
  .floral-divider { height: 24vh; }
  .corner { opacity: 0.38; }
}