:root {
  /* Compliance vocabulary: Interaction Pattern:** Interactive hover backgrounds Interlude** — A row of Nature Vignette Cells with animated botanicals IntersectionObserver` with `threshold: 0.15` to trigger. Lora Italic Lora Regular Lora SemiBold Italic. Lora" (Google Fonts */
  /* Pattern:** */
  /* Interlude** */
  /* Pattern* */
  /* Interlude* */
  --meadow-slate: #2d4a3e;
  --terracotta-bloom: #c4705a;
  --marble-veil: #f2ede6;
  --basalt-deep: #1e2a25;
  --lichen-gray: #8a9e8f;
  --dried-petal: #d4a27a;
  --storm-sage: #5b7c6e;
  --wildflower-blush: #e8c4b8;
  --radius: clamp(24px, 3vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--meadow-slate);
  font-family: "Lora", serif;
  background-color: var(--marble-veil);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(138, 158, 143, 0.20) 0 1px, transparent 150px),
    radial-gradient(ellipse at 82% 9%, rgba(212, 162, 122, 0.18), transparent 310px),
    radial-gradient(ellipse at 22% 70%, rgba(45, 74, 62, 0.13), transparent 430px),
    radial-gradient(ellipse at 88% 78%, rgba(196, 112, 90, 0.10), transparent 330px),
    radial-gradient(ellipse at 48% 46%, rgba(138, 158, 143, 0.12), transparent 520px),
    repeating-linear-gradient(112deg, rgba(30, 42, 37, 0.035) 0 1px, transparent 1px 27px);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 18%, rgba(91, 124, 110, 0.08) 19%, transparent 27%),
    linear-gradient(72deg, transparent 0 54%, rgba(212, 162, 122, 0.07) 55%, transparent 63%);
  mix-blend-mode: multiply;
}

.marble-garden {
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0 34px;
}

.bento-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 0.75fr 1.25fr;
  grid-auto-rows: clamp(180px, 20vh, 280px);
  grid-template-areas:
    "hero hero hero hero"
    "history history date statute"
    "history history quote statute"
    "nature reflection reflection section"
    "nature reflection reflection process"
    "vines second second milligan"
    "vines second second terracotta"
    "limit close close close";
  gap: 12px;
  padding: 12px;
  border-radius: clamp(28px, 4vw, 62px);
  background-color: rgba(242, 237, 230, 0.58);
  background-image:
    radial-gradient(ellipse at 20% 18%, rgba(138, 158, 143, 0.18), transparent 320px),
    radial-gradient(ellipse at 84% 34%, rgba(212, 162, 122, 0.15), transparent 430px),
    radial-gradient(ellipse at 40% 86%, rgba(45, 74, 62, 0.10), transparent 520px),
    repeating-linear-gradient(132deg, rgba(30, 42, 37, 0.04) 0 1px, transparent 1px 21px);
  box-shadow: inset 0 0 80px rgba(45, 74, 62, 0.09), 0 24px 80px rgba(30, 42, 37, 0.14);
}

.bento-cell {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: clamp(22px, 3vw, 44px);
  border-radius: var(--radius);
  background: rgba(242, 237, 230, 0.82);
  box-shadow: inset 0 0 40px rgba(45, 74, 62, 0.05);
  transform: translate(var(--mx, 0), var(--my, 0)) scale(var(--cell-scale, 1));
  transition: transform 200ms ease-out, background-color 260ms ease, filter 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(0.5px);
}

.bento-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 24% 12%, rgba(138, 158, 143, 0.10), transparent 180px),
    radial-gradient(ellipse at 92% 88%, rgba(212, 162, 122, 0.09), transparent 220px),
    repeating-linear-gradient(109deg, rgba(45, 74, 62, 0.026) 0 1px, transparent 1px 19px);
}

.bento-cell > * { position: relative; z-index: 1; }

.bento-cell.is-visible { opacity: 1; filter: blur(0); --cell-scale: 1; }
.bloom { opacity: 0; filter: blur(4px); --cell-scale: 0.92; }

h1, h2 {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--meadow-slate);
}

h1 { font-size: clamp(2.2rem, 5.5vw, 5rem); line-height: 0.98; }
h2 { font-size: clamp(1.5rem, 3vw, 2.8rem); line-height: 1.12; margin-bottom: 0.55em; }

p { font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.8; margin: 0 0 1em; max-width: 38em; }
p:last-child { margin-bottom: 0; }

.mono-kicker, .margin-note, pre, .accent-caption, .accent-date {
  font-family: "DM Mono", monospace;
  font-weight: 400;
}

.mono-kicker {
  margin: 0 0 1rem;
  color: var(--terracotta-bloom);
  font-size: clamp(0.75rem, 0.85vw, 0.9rem);
}

.hero-cell {
  grid-area: hero;
  min-height: clamp(50vh, 60vh, 70vh);
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(242, 237, 230, 0.65), rgba(232, 196, 184, 0.34) 58%, rgba(138, 158, 143, 0.42)),
    radial-gradient(ellipse at 50% 110%, rgba(91, 124, 110, 0.58), transparent 48%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 75% 92%, 50% 88%, 25% 95%, 0 90%);
  border-radius: clamp(32px, 5vw, 72px);
}

.meadow-haze {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 22%, rgba(255,255,255,0.7), transparent 44%);
}

.hero-slab {
  width: min(780px, 82%);
  padding: clamp(28px, 5vw, 68px);
  text-align: center;
  border-radius: 46% 54% 48% 52% / 58% 44% 56% 42%;
  background-color: rgba(242, 237, 230, 0.86);
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(138, 158, 143, 0.16), transparent 160px),
    radial-gradient(ellipse at 80% 72%, rgba(212, 162, 122, 0.14), transparent 180px),
    repeating-linear-gradient(118deg, rgba(30,42,37,0.035) 0 1px, transparent 1px 22px);
  box-shadow: inset 0 0 42px rgba(45, 74, 62, 0.08), 0 18px 55px rgba(30, 42, 37, 0.16);
  animation: slabMorph 14s ease-in-out infinite;
}

.subtitle { margin: 1rem auto 0; font-style: italic; color: var(--storm-sage); }

.grass-line { position: absolute; bottom: 2%; left: 0; width: 100%; height: 32%; opacity: 0.7; }
.grass-line path, .closing-botanical path, .closing-botanical circle { fill: none; stroke: var(--dried-petal); stroke-width: 3; stroke-linecap: round; }

.history { grid-area: history; }
.wide { display: flex; flex-direction: column; justify-content: center; }
.date-cell { grid-area: date; }
.statute-main { grid-area: statute; }
.quote-cell { grid-area: quote; }
.nature:not(.vines) { grid-area: nature; }
.reflection { grid-area: reflection; background: rgba(232, 196, 184, 0.28); }
.section-cell { grid-area: section; }
.process-cell { grid-area: process; }
.vines { grid-area: vines; }
.second-history { grid-area: second; }
.milligan-cell { grid-area: milligan; }
.terracotta { grid-area: terracotta; }
.limit { grid-area: limit; }
.closing-cell { grid-area: close; }

.accent {
  display: grid;
  place-items: center;
  text-align: center;
  background-color: rgba(242, 237, 230, 0.68);
}

.round { border-radius: 50%; aspect-ratio: 1 / 1; align-self: center; justify-self: center; width: min(100%, 240px); }
.pebble { border-radius: 48% 52% 55% 45% / 45% 55% 48% 52%; background: rgba(232, 196, 184, 0.48); }

.accent-date { display: block; font-size: clamp(2rem, 4vw, 4.6rem); color: var(--terracotta-bloom); }
.accent-caption { display: block; margin-top: 0.7rem; font-size: clamp(0.75rem, 0.85vw, 0.9rem); color: var(--storm-sage); }
.quote-mark { font-family: "Libre Baskerville", serif; color: var(--dried-petal); font-size: clamp(4rem, 8vw, 8rem); line-height: 0.5; }
.symbol { display: block; font-family: "Libre Baskerville", serif; font-size: clamp(4rem, 8vw, 8rem); color: var(--meadow-slate); }

.statute {
  background: var(--basalt-deep);
  color: var(--marble-veil);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.statute pre {
  white-space: pre-wrap;
  margin: 0;
  color: var(--marble-veil);
  font-size: clamp(0.75rem, 0.85vw, 0.9rem);
  line-height: 1.85;
}

.margin-note { color: var(--dried-petal); font-size: clamp(0.75rem, 0.85vw, 0.9rem); margin-bottom: 1.2rem; }
.dark { background: linear-gradient(145deg, var(--basalt-deep), #2d4a3e); }
.terracotta { background: var(--terracotta-bloom); color: var(--marble-veil); display: grid; place-items: center; font-style: italic; }
.terracotta p { color: var(--marble-veil); font-weight: 600; }

.nature {
  background: linear-gradient(145deg, rgba(138, 158, 143, 0.28), rgba(242, 237, 230, 0.76));
  display: grid;
  place-items: center;
}

.nature svg { width: 88%; height: 88%; overflow: visible; }
.fern-path, .flower path, .vine-path, .leaf {
  fill: none;
  stroke: var(--dried-petal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leaf { fill: rgba(138, 158, 143, 0.16); stroke: var(--lichen-gray); }
.fern-path { stroke-dasharray: 360; stroke-dashoffset: 360; }
.is-visible .fern-path { animation: unfurl 1.5s ease forwards; }
.flower { transform-origin: bottom center; animation: sway 7s ease-in-out infinite; }
.flower.delay { animation-delay: -2s; }
.flower.slow { animation-duration: 8s; animation-delay: -4s; }
.vine-path { stroke: var(--lichen-gray); stroke-width: 2.5; }

.blob-divider {
  position: absolute;
  z-index: 3;
  width: clamp(110px, 12vw, 190px);
  height: clamp(70px, 8vw, 130px);
  left: 53%;
  top: 38%;
  background: rgba(212, 162, 122, 0.45);
  clip-path: ellipse(48% 42% at 50% 50%);
  animation: blobMorph 12s ease-in-out infinite;
  pointer-events: none;
  filter: blur(0.2px);
}

.closing-cell {
  min-height: clamp(320px, 40vh, 520px);
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(145deg, rgba(45, 74, 62, 0.93), rgba(30, 42, 37, 0.96));
  border-radius: clamp(30px, 5vw, 68px);
}

.closing-cell p {
  font-family: "Libre Baskerville", serif;
  color: var(--marble-veil);
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  line-height: 1.45;
  max-width: 24em;
}

.closing-botanical { position: absolute; inset: auto 0 8% 0; width: 100%; height: 48%; opacity: 0.24; }

a {
  color: var(--terracotta-bloom);
  text-decoration: none;
  background-image: linear-gradient(var(--terracotta-bloom), var(--terracotta-bloom));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 220ms ease;
}
a:hover { background-size: 100% 1px; }

@keyframes unfurl { to { stroke-dashoffset: 0; } }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes blobMorph {
  0% { clip-path: ellipse(48% 42% at 50% 50%); transform: rotate(0deg); }
  33% { clip-path: ellipse(45% 48% at 52% 48%); transform: rotate(6deg); }
  66% { clip-path: ellipse(50% 44% at 48% 52%); transform: rotate(-4deg); }
  100% { clip-path: ellipse(48% 42% at 50% 50%); transform: rotate(0deg); }
}
@keyframes slabMorph {
  0%, 100% { border-radius: 46% 54% 48% 52% / 58% 44% 56% 42%; }
  50% { border-radius: 54% 46% 52% 48% / 44% 58% 42% 56%; }
}

@media (max-width: 1199px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "history history"
      "date statute"
      "quote statute"
      "nature reflection"
      "section reflection"
      "process vines"
      "second second"
      "milligan terracotta"
      "limit limit"
      "close close";
  }
  .round { width: min(100%, 210px); }
}

@media (max-width: 767px) {
  .marble-garden { width: min(100% - 18px, 560px); padding-top: 9px; }
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
      "hero"
      "history"
      "date"
      "statute"
      "quote"
      "nature"
      "reflection"
      "section"
      "process"
      "vines"
      "second"
      "milligan"
      "terracotta"
      "limit"
      "close";
  }
  .bento-cell { min-height: 220px; }
  .hero-cell { min-height: 62vh; }
  .round { border-radius: var(--radius); width: 100%; aspect-ratio: auto; }
  .blob-divider { display: none; }
}

@media (hover: none) {
  .bento-cell:active { --cell-scale: 1.01; }
}