:root {
  /* Design compliance notes: (Google Fonts Interaction Interaction: Interaction:: Interaction:** IntersectionObserver IntersectionObserver(entries => { trigger once when */
  --parchment: #F5E6D0;
  --cream: #EDE0CC;
  --charcoal: #1C1C1E;
  --sepia: #3B2F1E;
  --olive: #7A6A52;
  --tan: #D4C4A8;
  --green: #5B7A5E;
  --rust: #A0522D;
  --bubble: #FFF8EE;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --body: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--parchment); }

body {
  margin: 0;
  color: var(--sepia);
  background: var(--parchment);
  font-family: var(--body);
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 20% 30%, rgba(28,28,30,.34) 0 1px, transparent 1.4px), radial-gradient(circle at 70% 80%, rgba(122,106,82,.30) 0 1px, transparent 1.3px), radial-gradient(circle at 45% 60%, rgba(160,82,45,.20) 0 1px, transparent 1.2px);
  background-size: 88px 92px, 71px 79px, 113px 101px;
  opacity: .04;
  mix-blend-mode: multiply;
  z-index: 9999;
}

a { color: inherit; }

.herbarium { position: relative; }

.stratum {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 4vw, 5rem);
  overflow: hidden;
  background-color: var(--parchment);
  isolation: isolate;
}

.stratum::before {
  content: "";
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: 0;
  height: 4px;
  background: var(--charcoal);
  transform-origin: left center;
  z-index: 3;
}

.stratum-0 { display: grid; align-items: center; }
.stratum-0::before { display: none; }
.stratum-1 { margin-top: -4vw; padding-top: calc(4vw + 5rem); clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw)); background: var(--charcoal); }
.stratum-1::before { transform: rotate(2.35deg); }
.stratum-2 { margin-top: -4vw; padding-top: calc(5vw + 5rem); clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 5vw), 0 100%); background: var(--cream); }
.stratum-2::before { top: 4vw; transform: rotate(-2.3deg); }
.stratum-3 { margin-top: -5vw; padding-top: calc(6vw + 5rem); clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 3vw)); background: var(--sepia); }
.stratum-3::before { transform: rotate(3.45deg); }
.stratum-4 { margin-top: -3vw; padding-top: calc(5vw + 5rem); clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); background: var(--parchment); }
.stratum-4::before { top: 3vw; transform: rotate(-1.7deg); }

.dark { color: var(--tan); }

.content { width: min(1120px, 100%); margin: 0 auto; position: relative; z-index: 2; }
.content.narrow { width: min(780px, 100%); margin-left: clamp(1rem, 10vw, 12rem); }
.content.wide { width: min(1180px, 100%); }

.hero-grid, .two-column, .final-grid {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: -.03em;
  line-height: .92;
  color: var(--charcoal);
  font-variation-settings: "wght" 420;
}

.dark h2 { color: var(--parchment); }

.hero-headline { font-size: clamp(3rem, 9vw, 8.8rem); max-width: 920px; font-variation-settings: "wght" 260; }
h2 { font-size: clamp(2.2rem, 6vw, 5rem); }

p {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  max-width: 67ch;
}

.dark p { color: var(--tan); }
.marginalia, .confession { font-style: italic; font-size: clamp(1.35rem, 3vw, 2.1rem); color: var(--olive); }
.dark .confession { color: var(--parchment); }

.folio-mark, .plate-label, .label, .form-note {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(.7rem, 1vw, .85rem);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--olive);
  margin-bottom: 1rem;
}
.folio-mark.light { color: var(--tan); }

.plate {
  position: relative;
  background: rgba(255,248,238,.54);
  border: 4px solid var(--charcoal);
  box-shadow: 10px 10px 0 var(--charcoal);
  padding: clamp(1rem, 3vw, 2rem);
  transform: rotate(1.5deg);
}

.hero-plate { min-height: 540px; }
.botanical { width: 100%; height: auto; display: block; }
.botanical path, .botanical line, .root-network path, .vine-rule path, .nav-item svg path, .bubble svg path, .bubble svg ellipse, .bubble svg circle {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.botanical { color: var(--sepia); }
.botanical path, .botanical line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.botanical .stem { stroke-width: 3; }
.botanical .spore-dot { fill: var(--green); stroke: var(--sepia); stroke-width: 2; }

.draw-svg path, .draw-svg line, .draw-svg circle, .draw-svg ellipse {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 2s cubic-bezier(.19,1,.22,1);
}
.draw-svg.is-drawn path, .draw-svg.is-drawn line, .draw-svg.is-drawn circle, .draw-svg.is-drawn ellipse { stroke-dashoffset: 0; }
.draw-svg .pinnae path:nth-child(2n) { transition-delay: .12s; }
.draw-svg .pinnae path:nth-child(3n) { transition-delay: .24s; }
.draw-svg .pinnae path:nth-child(4n) { transition-delay: .36s; }

.plate-label { position: absolute; left: 1rem; bottom: 1rem; background: var(--bubble); padding: .45rem .6rem; border: 2px solid var(--charcoal); }

.root-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--olive);
  opacity: .38;
  z-index: 0;
}
.root-network path { stroke-width: 2; vector-effect: non-scaling-stroke; }
.root-network path:nth-child(3n) { stroke-width: .8; }
.root-network path:nth-child(2n) { stroke-width: 1.3; }

.vine-rule { width: min(640px, 100%); height: 60px; color: var(--olive); opacity: .6; margin: 1.4rem 0; }
.vine-rule path { stroke-width: 1.2; }
.vine-rule circle { fill: var(--olive); }

.bubble-field { min-height: 580px; position: relative; }
.bubble {
  --bubble-rotation: 0deg;
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  gap: .6rem;
  width: 220px;
  min-height: 220px;
  padding: 1.4rem;
  border: 3px solid var(--charcoal);
  background: var(--bubble);
  box-shadow: 6px 6px 0 var(--charcoal);
  color: var(--sepia);
  transform: rotate(var(--bubble-rotation));
  transition: box-shadow .18s ease;
  font-family: var(--mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bubble svg { width: 86px; color: var(--green); stroke-width: 2.2; }
.bubble-round { border-radius: 50%; top: 0; left: 10%; }
.bubble-oval { border-radius: 40% 60% 60% 40% / 50% 48% 52% 50%; top: 190px; right: 2%; }
.bubble.small { width: 170px; min-height: 170px; top: 390px; left: 5%; }
.big-spore { font-size: 3rem; color: var(--rust); font-family: var(--display); }
.bubble:hover { animation: shake-error .3s ease-out; box-shadow: 8px 8px 0 var(--charcoal); }

@keyframes shake-error {
  0%,100% { transform: translateX(0) rotate(var(--bubble-rotation)); }
  20% { transform: translateX(-2px) rotate(var(--bubble-rotation)); }
  40% { transform: translateX(2px) rotate(var(--bubble-rotation)); }
  60% { transform: translateX(-1.5px) rotate(var(--bubble-rotation)); }
  80% { transform: translateX(1px) rotate(var(--bubble-rotation)); }
}

.spores { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.spores i {
  position: absolute;
  width: var(--s, 8px);
  height: var(--s, 8px);
  border-radius: 50%;
  background: var(--green);
  opacity: var(--o, .35);
  animation: spore-drift var(--d, 28s) ease-in-out infinite alternate;
}
.spores i:nth-child(1){--s:6px;--o:.3;--d:24s;left:12%;top:26%}.spores i:nth-child(2){--s:10px;--o:.16;--d:31s;left:22%;top:64%}.spores i:nth-child(3){--s:4px;--o:.55;--d:28s;left:44%;top:20%}.spores i:nth-child(4){--s:9px;--o:.24;--d:35s;left:77%;top:33%}.spores i:nth-child(5){--s:12px;--o:.18;--d:40s;left:88%;top:70%}.spores i:nth-child(6){--s:5px;--o:.48;--d:22s;left:62%;top:55%}.spores i:nth-child(7){--s:7px;--o:.4;--d:29s;left:35%;top:80%}.spores i:nth-child(8){--s:4px;--o:.55;--d:27s;left:54%;top:12%}.spores i:nth-child(9){--s:9px;--o:.2;--d:37s;left:7%;top:75%}.spores i:nth-child(10){--s:6px;--o:.34;--d:33s;left:70%;top:84%}
@keyframes spore-drift { to { transform: translate(38px, -31px); } }

.stream { width: min(900px, 100%); }
.stream p { max-width: 28ch; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.35; color: var(--parchment); }
.inline-icon { display: inline-block; width: .9em; height: .9em; border: 2px solid currentColor; vertical-align: -.08em; margin: 0 .14em; color: var(--green); }
.inline-icon.leaf { border-radius: 80% 0 80% 0; transform: rotate(-20deg); }
.inline-icon.root { border-radius: 50%; border-width: 0 0 2px 2px; }
.inline-icon.spore { border-radius: 50%; width: .55em; height: .55em; background: currentColor; opacity: .75; }
.inline-icon.bloom { border-radius: 50% 50% 45% 45%; box-shadow: .28em 0 0 -.08em currentColor, -.28em 0 0 -.08em currentColor; }

.complete-plate { min-height: 620px; transform: rotate(-1deg); }
.complete-plate .label { position: absolute; background: var(--bubble); border: 2px solid var(--charcoal); padding: .35rem .5rem; color: var(--rust); }
.root-label { left: 1rem; bottom: 3.2rem; }
.stem-label { left: 48%; top: 47%; }
.leaf-label { right: 1rem; top: 52%; }
.flower-label { right: 1rem; top: 12%; }

.plant-form { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin-top: 2rem; }
input, button {
  font: 600 clamp(.8rem, 1vw, .95rem)/1 var(--mono);
  letter-spacing: .06em;
  border: 4px solid var(--charcoal);
  background: var(--bubble);
  color: var(--sepia);
  padding: 1.1rem 1rem;
  box-shadow: 6px 6px 0 var(--charcoal);
}
button { cursor: pointer; text-transform: uppercase; background: var(--rust); color: var(--bubble); transition: transform .16s ease, box-shadow .16s ease; }
button:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--charcoal); }
.form-note { opacity: 0; transform: translateY(8px); transition: .28s ease; color: var(--olive); }
.form-note.visible { opacity: 1; transform: translateY(0); }

.radial-nav { position: fixed; right: 1.25rem; top: 1.25rem; width: 150px; height: 150px; z-index: 50; pointer-events: none; }
.nav-bubble, .nav-item {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  border: 3px solid var(--charcoal);
  background: var(--parchment);
  color: var(--charcoal);
  box-shadow: 5px 5px 0 var(--charcoal);
  border-radius: 50%;
  pointer-events: auto;
  text-decoration: none;
}
.nav-bubble { width: 48px; height: 48px; padding: 0; font-family: var(--mono); font-size: 1.2rem; }
.nav-item { width: 36px; height: 36px; opacity: 0; transform: translate(0,0) scale(.7); transition: transform .48s cubic-bezier(.68,-.55,.265,1.55), opacity .2s ease; }
.nav-item svg { width: 23px; height: 23px; stroke-width: 3; color: var(--green); }
.radial-nav.open .nav-item { opacity: 1; }
.radial-nav.open .nav-item:nth-of-type(1) { transform: translate(-60px, 60px) scale(1); }
.radial-nav.open .nav-item:nth-of-type(2) { transform: translate(-85px, 10px) scale(1); }
.radial-nav.open .nav-item:nth-of-type(3) { transform: translate(-60px, -45px) scale(1); }
.radial-nav.open .nav-item:nth-of-type(4) { transform: translate(-10px, -75px) scale(1); }

@media (max-width: 820px) {
  .hero-grid, .two-column, .final-grid { grid-template-columns: 1fr; }
  .content.narrow { margin-left: auto; }
  .hero-plate, .complete-plate { min-height: auto; }
  .bubble-field { min-height: 660px; }
  .plant-form { grid-template-columns: 1fr; }
  .stratum { min-height: auto; padding-left: 1rem; padding-right: 1rem; }
}