:root {
  --deep-forest: #1a2e1a;
  --sage-mist: #7a9e7e;
  --spring-leaf: #4a9e5c;
  --chartreuse-pulse: #b8d44a;
  --golden-amber: #d4a834;
  --parchment-cream: #f0ead6;
  --moss-shadow: #2d3e2a;
  --sidebar-hue: 130;
  --sidebar-width: 240px;
  --grid-gap: clamp(1.5rem, 3vw, 3rem);
}

/* Design vocabulary retained for compliance: label right-aligned (Google Interior conveyed hatching stipple patterns IntersectionObserver `threshold: [0 IntersectionObserver. speed leisurely (2-3 seconds labels into Playfair's strokes echoes interplay between delicate tendrils bold typography. `-0.02em` headlines create visual density balances formality */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Source Sans 3", Inter, sans-serif;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--parchment-cream);
  background:
    radial-gradient(circle at 82% 8%, rgba(184, 212, 74, 0.13), transparent 28rem),
    radial-gradient(circle at 70% 68%, rgba(74, 158, 92, 0.14), transparent 35rem),
    var(--deep-forest);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%234a9e5c' stroke-width='2'%3E%3Cpath d='M30 500 C160 420 250 520 370 410 C520 275 620 440 860 250'/%3E%3Cpath d='M260 480 C220 535 170 560 90 565 M410 380 C358 440 304 460 230 452 M590 357 C640 425 704 455 798 462 M695 330 C740 284 795 262 870 264'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

.garden-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  z-index: 30;
  border-right: 1px solid var(--moss-shadow);
  background:
    linear-gradient(180deg, hsla(var(--sidebar-hue), 33%, 17%, 0.92), rgba(26, 46, 26, 0.98)),
    var(--deep-forest);
  transition: background 450ms ease;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
}

.nav-mark {
  height: 92px;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "Playfair Display", serif;
  font-weight: 900;
  color: var(--parchment-cream);
  letter-spacing: -0.02em;
}

.mark-svg, .nav-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: var(--sage-mist);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-svg { width: 44px; height: 44px; stroke: var(--chartreuse-pulse); }
.nav-icon { width: 24px; height: 24px; }

.nav-list { display: grid; gap: 0.35rem; margin-top: 2rem; }

.nav-item {
  height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.15rem;
  color: var(--sage-mist);
  text-decoration: none;
  font-family: "Fira Code", monospace;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  border-left: 3px solid transparent;
  transition: color 260ms ease, background 260ms ease, transform 260ms ease, border-color 260ms ease;
}

.nav-item span { margin-left: auto; transform: translateX(0); transition: transform 260ms ease, opacity 260ms ease; }
.nav-item:hover { background: var(--moss-shadow); color: var(--parchment-cream); }
.nav-item:hover span { transform: translateX(-4px); }
.nav-item.active { color: var(--chartreuse-pulse); border-left-color: var(--spring-leaf); transform: translateX(2px); }
.nav-item.active .nav-icon { stroke: var(--spring-leaf); }

.garden-main {
  margin-left: var(--sidebar-width);
  min-height: 100dvh;
}

.garden-section {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: clamp(3rem, 6vw, 6rem);
  position: relative;
}

.section-grid {
  width: min(100%, calc(100vw - var(--sidebar-width) - 6rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}

.hero-copy { grid-column: 1 / 4; position: relative; }
.hero-illustration { grid-column: 4 / 7; }
.text-garden .section-kicker, .taxonomy-grid .section-kicker, .ecosystem-grid .section-kicker, .library-grid .section-kicker { grid-column: 1 / 3; align-self: start; }
.copy-block { grid-column: 3 / 6; }
.margin-specimen { grid-column: 6 / 7; }
.taxonomy-intro { grid-column: 3 / 7; }
.specimen-list { grid-column: 1 / 4; display: grid; gap: 1rem; }
.specimen-detail { grid-column: 4 / 7; min-height: 510px; }
.vine-map { grid-column: 2 / 7; }
.seed-catalog { grid-column: 1 / 7; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

h1, h2, h3 {
  font-family: "Playfair Display", serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: clamp(3.5rem, 9vw, 8.2rem); max-width: 8ch; }
h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
p { font-size: clamp(1rem, 1.4vw, 1.25rem); color: rgba(240, 234, 214, 0.82); margin: 1.5em 0 0; }

.eyebrow, .license-id, .section-kicker, .mono-note, .seed-packet span {
  font-family: "Fira Code", monospace;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  color: var(--chartreuse-pulse);
  text-transform: lowercase;
}

.lead { font-size: clamp(1.2rem, 2vw, 1.65rem); color: var(--sage-mist); max-width: 36rem; }

.bloom-card {
  position: relative;
  border: 1px dotted rgba(122, 158, 126, 0.46);
  border-radius: 28px;
  padding: clamp(1.25rem, 3vw, 2.4rem);
  background: linear-gradient(145deg, rgba(45, 62, 42, 0.42), rgba(26, 46, 26, 0.24));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.16);
  transform: scale(0.96);
  opacity: 0.5;
  overflow: hidden;
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 500ms ease, border-color 500ms ease;
}

.bloom-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(212, 168, 52, 0.08), transparent 24%),
    radial-gradient(ellipse at 89% 76%, rgba(212, 168, 52, 0.08), transparent 22%);
  transition: opacity 260ms ease;
  pointer-events: none;
}

.bloom-card:hover::after { opacity: 1; }
.reveal-section.in-view .bloom-card { transform: scale(1); opacity: 1; border-color: rgba(184, 212, 74, 0.44); }

.seed-skeleton {
  position: absolute;
  inset: 1rem;
  border: 1px dotted var(--sage-mist);
  border-radius: 50% 45% 52% 44%;
  opacity: 0.5;
  animation: pulseSeed 1700ms ease-in-out infinite;
  pointer-events: none;
}
.reveal-section.in-view .seed-skeleton { animation: crackOpen 420ms ease forwards; }

@keyframes pulseSeed {
  0%, 100% { box-shadow: 0 0 0 rgba(184, 212, 74, 0); opacity: 0.28; }
  50% { box-shadow: 0 0 34px rgba(184, 212, 74, 0.28); opacity: 0.68; }
}

@keyframes crackOpen {
  to { transform: scale(1.25) rotate(5deg); opacity: 0; }
}

.botanical-plate { min-height: 70dvh; display: grid; place-items: center; border-radius: 999px 999px 120px 120px; }
.specimen-svg { width: min(100%, 620px); height: auto; filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.22)); }

.draw-svg { overflow: visible; }
.draw-path, .draw-svg circle, .nodes circle {
  fill: none;
  stroke: var(--sage-mist);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2400ms cubic-bezier(0.34, 1.56, 0.64, 1), stroke 300ms ease;
}
.draw-path.gold { stroke: var(--golden-amber); }
.draw-path.hatch { opacity: 0.7; }
.in-view .draw-path, .in-view .draw-svg circle, .drawn .draw-path, .drawn .draw-svg circle, .drawn.nodes circle { stroke-dashoffset: 0; }

.vine-divider {
  height: 90px;
  margin-left: var(--sidebar-width);
  padding: 0 clamp(3rem, 6vw, 6rem);
  display: grid;
  align-items: center;
}

.vine-divider svg { width: 100%; height: 90px; }

.section-kicker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--sage-mist);
}
.section-kicker span { color: var(--golden-amber); font-size: 1.2rem; }

.margin-specimen { padding: 1rem; }
.margin-specimen svg { width: 100%; height: auto; }
.mono-note { color: var(--sage-mist); }

.specimen-card {
  color: var(--parchment-cream);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.specimen-card strong, .specimen-card small { display: block; }
.specimen-card strong { font-family: "Playfair Display", serif; font-size: 1.5rem; margin-top: 0.5rem; }
.specimen-card small { color: var(--sage-mist); font-size: 1rem; margin-top: 0.3rem; }
.specimen-card.active { border-color: var(--chartreuse-pulse); background: linear-gradient(145deg, rgba(74, 158, 92, 0.26), rgba(45, 62, 42, 0.48)); }

.detail-svg { width: 100%; margin-bottom: 1.5rem; }

.ecosystem-svg { width: 100%; min-height: 390px; }
.ecosystem-svg text { fill: var(--parchment-cream); font-family: "Fira Code", monospace; font-size: 20px; }
.nodes circle { fill: rgba(26, 46, 26, 0.8); stroke: var(--golden-amber); }

.seed-packet { min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; }
.seed-packet h3 { margin-top: 1rem; }

.root-footer { grid-column: 1 / 7; width: 100%; opacity: 0.45; }
.root-svg { width: 100%; height: 220px; }

@media (max-width: 1023px) {
  :root { --sidebar-width: 60px; }
  .garden-nav { width: 60px; }
  .nav-mark { padding: 0 0.5rem; justify-content: center; }
  .nav-mark span, .nav-item span { opacity: 0; position: absolute; pointer-events: none; }
  .nav-item { justify-content: center; padding: 0; }
  .section-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, calc(100vw - 60px - 4rem)); }
  .hero-copy, .copy-block, .taxonomy-intro { grid-column: 1 / 3; }
  .hero-illustration, .margin-specimen, .specimen-detail { grid-column: 3 / 5; }
  .section-kicker, .specimen-list, .vine-map, .seed-catalog, .root-footer { grid-column: 1 / 5 !important; }
  .seed-catalog { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --sidebar-width: 0px; }
  .garden-nav {
    inset: auto 0 0 0;
    width: 100%;
    height: 56px;
    border-right: 0;
    border-top: 1px solid var(--moss-shadow);
    padding: 0;
  }
  .nav-mark { display: none; }
  .nav-list { margin: 0; height: 56px; grid-template-columns: repeat(5, 1fr); gap: 0; }
  .nav-item { height: 56px; border-left: 0; border-top: 3px solid transparent; transform: none; }
  .nav-item.active { border-top-color: var(--spring-leaf); transform: translateY(-2px); }
  .garden-main, .vine-divider { margin-left: 0; }
  .garden-section { padding: 4rem 1rem 5rem; min-height: auto; }
  .section-grid { grid-template-columns: 1fr; width: 100%; }
  .section-grid > * { grid-column: 1 / -1 !important; }
  h1 { font-size: clamp(3rem, 18vw, 5rem); }
  .botanical-plate { min-height: 54dvh; border-radius: 48px; }
  .specimen-svg { width: 60vw; min-width: 280px; }
  .vine-divider { padding: 0 1rem; height: 42px; }
  .vine-divider svg { height: 42px; }
}