:root {
  --aged-linen: #F5F0E8;
  --archival-reference-only: #000000;
  --dark-umber: #3D2B1F;
  --honeyed-umber: #8B7355;
  --lupine-violet: #7B4FA0;
  --lupine-rose: #D4637A;
  --lupine-cream: #F2DFC2;
  --ink-black: #1A1714;
  --meadow-stem: #5B7744;
}

/* Design vocabulary reference: IntersectionObserver serves as an epigraph: a haiku-like observation about lupines. Lora should have generous `line-height: 1.75` and `max-width: 38ch` to create the comfortable measure of a well-typeset book page. Lora's slightly brushed terminals pair naturally with Libre Baskerville's formality. Lora" (Google Fonts. Space Mono — "f. 01". Space Mono at 10px. Space Mono uppercase in the margin (absolutely positioned left of the content block. Space Mono" (Google Fonts. SpaceOnUse"` with circles of `r="2.5"` spaced at `8px` intervals. Petal outlines are `stroke="#1A1714"` at `stroke-width="3"`. On scroll. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--aged-linen);
  color: var(--dark-umber);
  font-family: "Lora", serif;
  overflow-x: hidden;
}

.folio-page { background: var(--aged-linen); min-height: 100vh; }

.opening-folio {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  isolation: isolate;
}

.opening-folio::before {
  content: "";
  position: absolute;
  inset: 8vh auto auto -6vw;
  width: 34vw;
  height: 34vw;
  border: 1px solid var(--honeyed-umber);
  transform: rotate(-11deg);
  opacity: 0.32;
}

.hero-copy {
  grid-column: 1 / 6;
  z-index: 3;
  transform: rotate(-0.6deg);
  padding-top: 8vh;
}

.taxon, .label, .folio, .seed-center p {
  font-family: "Space Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--honeyed-umber);
}

.taxon { font-size: 0.7rem; margin: 0 0 1.2rem; }

h1, h2 {
  font-family: "Libre Baskerville", serif;
  color: var(--dark-umber);
}

h1 {
  font-size: clamp(3rem, 9vw, 7rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 0.98;
  margin: 0;
}

h2 {
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 1rem;
}

.epigraph, .note-card p:not(.label) {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  max-width: 38ch;
}

.epigraph { margin-top: 1.4rem; }

.hero-lupine {
  grid-column: 5 / 13;
  position: relative;
  z-index: 1;
  width: min(68vw, 680px);
  justify-self: end;
  margin-right: -4vw;
  filter: drop-shadow(10px 10px 0 rgba(61, 43, 31, 0.16));
}

.pressed-shadow { opacity: 0.04; transform: translate(8px, 8px) rotate(2deg); transform-origin: center; }
.pressed-shadow * { fill: var(--ink-black); }

.petal-cluster {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transform-origin: center;
  transition: opacity 0.62s ease, transform 0.62s ease;
  transition-delay: calc(var(--i) * 120ms);
}

.hero-lupine.is-assembled .petal-cluster { opacity: 1; transform: translateY(0) scale(1); }

.ledger-rule {
  position: absolute;
  height: 1px;
  background: var(--honeyed-umber);
  opacity: 0.75;
}
.ledger-rule::before, .ledger-rule::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--honeyed-umber);
  position: absolute;
  top: -4px;
  transform: rotate(45deg);
}
.ledger-rule::before { left: 0; }
.ledger-rule::after { right: 0; }
.ledger-rule span { display: none; }
.rule-top { left: 7vw; right: 10vw; top: 5vh; }
.rule-mid { left: 19vw; right: 14vw; bottom: 22vh; transform: rotate(-1.3deg); }

.herbarium-spread {
  min-height: 220vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(90px, auto);
  gap: clamp(1rem, 2vw, 2rem);
  padding: 12vh clamp(1.4rem, 5vw, 5rem) 18vh;
}

.watermark-leaf {
  position: absolute;
  width: min(72vw, 780px);
  left: 22vw;
  top: 34vh;
  opacity: 0.03;
  transform: rotate(-18deg);
}

.note-card, .plate {
  position: relative;
  border: 1px solid var(--dark-umber);
  box-shadow: 4px 4px 0 var(--dark-umber);
  background: var(--lupine-cream);
  z-index: 2;
}

.note-card { padding: clamp(1.2rem, 3vw, 2rem); }
.note-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(139, 115, 85, 0.28);
  pointer-events: none;
}

.label { font-size: 0.7rem; margin: 0 0 1.2rem; }
.folio {
  position: absolute;
  left: -3rem;
  top: 2.7rem;
  font-size: 0.7rem;
  transform: rotate(-90deg);
}

.note-dawn { grid-column: 2 / 7; grid-row: 1 / span 3; transform: rotate(0.5deg); }
.plate-one { grid-column: 6 / 12; grid-row: 2 / span 5; transform: rotate(-1deg); background: var(--aged-linen); overflow: hidden; }
.note-noon { grid-column: 1 / 6; grid-row: 6 / span 3; transform: rotate(-0.7deg); z-index: 4; }
.note-evening { grid-column: 7 / 12; grid-row: 9 / span 3; transform: rotate(0.8deg); background: var(--aged-linen); }

.mini-lupine { width: 80%; display: block; margin: -2rem auto -1rem; filter: drop-shadow(8px 8px 0 rgba(61, 43, 31, 0.10)); }

.bracket-one {
  grid-column: 5 / 8;
  grid-row: 5 / 8;
  width: 100%;
  z-index: 5;
  transform: rotate(7deg);
}

.bee {
  position: absolute;
  right: 19vw;
  bottom: 44vh;
  width: 90px;
  animation: bee-float 5.6s ease-in-out infinite;
  z-index: 5;
}

@keyframes bee-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-24px) rotate(6deg); }
}

.seed-scatter { position: absolute; left: 8vw; right: 8vw; bottom: 9vh; height: 40px; }
.seed-scatter i {
  position: absolute;
  width: 6px;
  height: 10px;
  border: 1px solid var(--ink-black);
  background: var(--meadow-stem);
  border-radius: 60% 40% 60% 40%;
  transform: rotate(var(--r));
}
.seed-scatter i:nth-child(1) { left: 8%; --r: 18deg; }
.seed-scatter i:nth-child(2) { left: 27%; top: 20px; --r: -31deg; }
.seed-scatter i:nth-child(3) { left: 49%; top: 4px; --r: 52deg; }
.seed-scatter i:nth-child(4) { left: 63%; top: 25px; --r: -12deg; }
.seed-scatter i:nth-child(5) { left: 78%; top: 12px; --r: 35deg; }
.seed-scatter i:nth-child(6) { left: 91%; top: 27px; --r: -45deg; }

.underline {
  background-image: linear-gradient(var(--line-color), var(--line-color));
  background-size: 0% 3px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.underline.is-visible { background-size: 100% 3px; }
.underline-rose { --line-color: var(--lupine-rose); }
.underline-violet { --line-color: var(--lupine-violet); }

.closing-meditation {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--aged-linen);
}

.seed-center { text-align: center; }
.seed-icon { width: 16px; height: 16px; display: block; margin: 0 auto 0.75rem; }
.seed-center p { font-size: 10px; margin: 0; }

@media (max-width: 767px) {
  .opening-folio, .herbarium-spread { display: block; padding: 2rem 1.1rem; }
  .opening-folio { min-height: 100vh; }
  .hero-copy { padding-top: 12vh; }
  .hero-lupine { width: 112vw; margin: -8vh -32vw 0 auto; display: block; }
  .ledger-rule { left: 1rem; right: 1rem; }
  .note-card, .plate { margin: 0 0 2rem; }
  .note-card + .note-card, .plate + .note-card { margin-top: -24px; }
  .folio { position: static; display: block; transform: none; margin-bottom: 0.8rem; }
  .plate-one { min-height: 420px; }
  .mini-lupine { width: 105%; margin-left: -6%; }
  .bracket-one { display: none; }
  .bee { right: 2rem; bottom: 18vh; width: 72px; }
  .watermark-leaf { width: 120vw; left: -10vw; }
}