/* Compliance language: IBM Plex Mono (400); IBM Plex Mono label at the top (the "specimen name"; (Google Fonts unavailable by request; Ripple Interaction Effects:**; Intersection Observer with `threshold: 0.3`. Intersection Observer: each card translates from `translateY(30px. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --greenhouse-mist: #f4f1eb;
    --root-bark: #3a3a32;
    --pressed-sage: #8ba48b;
    --morning-blush: #e8d5c4;
    --petal-rose: #d4a0a0;
    --loam: #5c5647;
    --fern-dew: #c5d4b8;
    --condensation: #e9ece6;
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(197, 212, 184, 0.22), transparent 28rem),
        radial-gradient(circle at 86% 42%, rgba(232, 213, 196, 0.28), transparent 30rem),
        linear-gradient(180deg, var(--greenhouse-mist) 0%, var(--condensation) 52%, var(--greenhouse-mist) 100%);
    color: var(--root-bark);
    font-family: Outfit, Inter, Avenir, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: 300;
    line-height: 1.85;
}

.design-token { display: none; }

#nav-glyph {
    position: fixed;
    top: 1.35rem;
    left: 1.35rem;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(139, 164, 139, 0.24);
    border-radius: 999px;
    background: rgba(244, 241, 235, 0.32);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0.82;
    transition: border-color 300ms ease, opacity 300ms ease, transform 300ms ease;
}

#nav-glyph:hover { border-color: rgba(212, 160, 160, 0.65); opacity: 1; transform: rotate(-5deg); }

#nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: grid;
    place-items: center;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 420ms ease;
}

#nav-overlay.hidden { opacity: 0; pointer-events: none; }

#nav-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(244, 241, 235, 0.9);
    backdrop-filter: blur(14px);
}

#nav-vine { position: relative; overflow: visible; }

#vine-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 600ms ease;
}

#nav-overlay:not(.hidden) #vine-line { stroke-dashoffset: 0; }

.vine-node { cursor: pointer; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 300ms ease, scale 300ms ease; }
#nav-overlay:not(.hidden) .vine-node { opacity: 1; }
#nav-overlay:not(.hidden) .vine-node:nth-of-type(1) { transition-delay: 130ms; }
#nav-overlay:not(.hidden) .vine-node:nth-of-type(2) { transition-delay: 230ms; }
#nav-overlay:not(.hidden) .vine-node:nth-of-type(3) { transition-delay: 330ms; }
#nav-overlay:not(.hidden) .vine-node:nth-of-type(4) { transition-delay: 430ms; }
.vine-node path { fill: var(--pressed-sage); opacity: 0.74; transition: fill 300ms ease; }
.vine-node text {
    fill: rgba(58, 58, 50, 0.62);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.vine-node:hover { scale: 1.06; }
.vine-node:hover path { fill: var(--petal-rose); }

section { position: relative; }

#hero {
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--greenhouse-mist);
}

.bokeh-field { position: absolute; inset: 0; overflow: hidden; }
.bokeh-field span { position: absolute; display: block; border-radius: 50%; filter: blur(40px); transform: translateZ(0); will-change: transform; }

.hero-content {
    position: relative;
    z-index: 1;
    width: min(92vw, 980px);
    text-align: center;
}

.specimen-kicker, .specimen-label {
    display: block;
    color: rgba(58, 58, 50, 0.5);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 1.6;
    text-transform: uppercase;
}

#wordmark {
    margin: 0.8rem 0 0.55rem;
    color: var(--root-bark);
    font-family: "Josefin Sans", "Trebuchet MS", Avenir, sans-serif;
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    line-height: 0.95;
    text-transform: lowercase;
}

#wordmark span { display: inline-block; opacity: 0; animation: letterFade 540ms ease forwards; }
@keyframes letterFade { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }

.hero-subtitle {
    max-width: 38rem;
    margin: 0 auto;
    color: rgba(92, 86, 71, 0.72);
    font-family: Outfit, Inter, sans-serif;
    font-size: clamp(1rem, 2vw, 1.35rem);
    opacity: 0;
    animation: subtitleFade 900ms ease 2s forwards;
}
@keyframes subtitleFade { to { opacity: 1; } }

#specimens { min-height: 100vh; padding: clamp(6rem, 12vw, 10rem) 2rem; overflow: hidden; }
#specimens::before {
    content: "";
    position: absolute;
    width: 34rem;
    height: 34rem;
    right: -10rem;
    top: 12rem;
    border-radius: 52% 48% 36% 64% / 56% 42% 58% 44%;
    background: var(--morning-blush);
    opacity: 0.16;
    animation: blobMorph 24s ease-in-out infinite;
}

.section-inner { width: min(1180px, 100%); margin: 0 auto; position: relative; }
.section-heading, .propagation-heading, .roots-heading {
    font-family: "Josefin Sans", "Trebuchet MS", Avenir, sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1.12;
    text-transform: lowercase;
}
.section-heading { max-width: 760px; margin: 0.85rem 0 4rem; font-size: clamp(2.2rem, 5vw, 4.6rem); }

.specimen-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-areas:
        "a a . b b"
        ". c c c ."
        "d d . e e"
        ". . f f f";
    gap: 3rem;
}

.specimen-card {
    min-height: 15rem;
    padding: clamp(1.6rem, 3vw, 2.5rem);
    border: 1px solid rgba(139, 164, 139, 0.3);
    border-radius: 12px;
    background: rgba(244, 241, 235, 0.6);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 300ms ease, background 300ms ease;
}
.specimen-card.visible { opacity: 1; transform: translateY(0); }
.specimen-card:hover { border-color: rgba(212, 160, 160, 0.7); background: rgba(233, 236, 230, 0.66); }
.card-a { grid-area: a; }
.card-b { grid-area: b; margin-top: 4rem; }
.card-c { grid-area: c; }
.card-d { grid-area: d; margin-top: 2rem; }
.card-e { grid-area: e; }
.card-f { grid-area: f; margin-top: -1rem; }
.specimen-label { margin-bottom: 1.15rem; color: rgba(139, 164, 139, 0.88); }
.specimen-card p { color: rgba(92, 86, 71, 0.88); }

#propagation {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 5rem 2rem;
    overflow: hidden;
}
.blob { position: absolute; border-radius: 60% 40% 30% 70% / 50% 60% 70% 40%; opacity: 0.12; transform: translateZ(0); will-change: transform, border-radius; }
.propagation-blob { width: min(500px, 72vw); height: min(500px, 72vw); background: var(--pressed-sage); animation: blobMorph 20s ease-in-out infinite; }
.blush-blob { width: min(360px, 55vw); height: min(360px, 55vw); right: 8%; bottom: 9%; background: var(--petal-rose); opacity: 0.1; animation: blobMorphAlt 22s ease-in-out infinite; }
@keyframes blobMorph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 50% 60% 70% 40%; transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { border-radius: 42% 58% 70% 30% / 60% 39% 61% 40%; transform: translate3d(1rem, -0.7rem, 0) rotate(5deg); }
    50% { border-radius: 54% 46% 45% 55% / 36% 68% 32% 64%; transform: translate3d(-0.6rem, 1rem, 0) rotate(-4deg); }
    75% { border-radius: 72% 28% 55% 45% / 48% 51% 49% 52%; transform: translate3d(0.6rem, 0.8rem, 0) rotate(3deg); }
}
@keyframes blobMorphAlt {
    0%, 100% { border-radius: 45% 55% 58% 42% / 61% 40% 60% 39%; transform: translate3d(0, 0, 0); }
    50% { border-radius: 64% 36% 34% 66% / 41% 64% 36% 59%; transform: translate3d(-1rem, 0.8rem, 0); }
}

.propagation-content { position: relative; z-index: 1; max-width: 600px; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; }
.propagation-content.visible { opacity: 1; transform: translateY(0); }
.propagation-heading { margin: 0.85rem 0 1.65rem; font-size: clamp(2rem, 4vw, 3rem); }
.propagation-text { color: rgba(92, 86, 71, 0.88); }

#roots {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    padding: 5rem 2rem 7rem;
    overflow: hidden;
}
.roots-content { position: relative; z-index: 2; text-align: center; }
.roots-heading { margin-top: 0.7rem; font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: 0.12em; }
#root-svg { position: relative; z-index: 1; width: min(100%, 1100px); min-height: 420px; align-self: stretch; }
.roots-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(92, 86, 71, 0), rgba(92, 86, 71, 0.28)); }
.seed-form { position: relative; z-index: 2; width: min(30rem, 82vw); }
#seed-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(92, 86, 71, 0.55);
    border-radius: 0;
    background: transparent;
    padding: 0.8rem 0;
    color: var(--root-bark);
    font: 300 1.15rem Outfit, Inter, sans-serif;
    letter-spacing: 0.04em;
    outline: 0;
    text-align: center;
    transition: border-color 300ms ease;
}
#seed-input::placeholder { color: rgba(58, 58, 50, 0.42); }
#seed-input:focus { border-color: var(--petal-rose); }

.ripple { position: fixed; border: 1.5px solid var(--pressed-sage); border-radius: 50%; pointer-events: none; z-index: 100; }

@media (max-width: 840px) {
    .specimen-grid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; gap: 1.5rem; }
    .card-b, .card-d, .card-f { margin-top: 0; }
    #nav-vine { width: 230px; }
}