:root {
    /* DESIGN token variants: hallucination hallucination* hallucination** hallucinationn hallucinationnn hallucinationnn* hallucination*** */
    --parchment: #f5f0e6;
    --inkwell: #2a2520;
    --charcoal: #3e342a;
    --bone: #ebe3d4;
    --lavender: #9e8db5;
    --sage: #7a9178;
    --plum: #6b4f6e;
    --moonbeam: #e8dcc6;
    --tan: #6e6256;
    --phantom: rgba(62, 52, 42, 0.06);
    --display: "Cormorant Garamond", serif;
    --body: "Space Grotesk", sans-serif;
    --mono: "DM Mono", monospace;
    --margin: 48px;
    --gutter: 24px;
    --column: calc((100vw - 2 * 48px - 11 * 24px) / 12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--parchment);
    color: var(--charcoal);
    font-family: var(--body);
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(42,37,32,0.055) 0 2px, transparent 3px),
        radial-gradient(ellipse at 74% 32%, rgba(42,37,32,0.04) 0 4px, transparent 5px),
        radial-gradient(ellipse at 44% 78%, rgba(42,37,32,0.035) 0 3px, transparent 4px);
    background-size: 310px 270px, 460px 390px, 280px 340px;
}

.site-mark {
    position: fixed;
    top: 28px;
    left: var(--margin);
    right: var(--margin);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--bone);
    mix-blend-mode: difference;
    pointer-events: none;
}

.site-mark span {
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.site-mark i {
    display: block;
    height: 1px;
    flex: 1;
    background: currentColor;
    opacity: 0.6;
}

.grid-veil {
    position: fixed;
    inset: 0 var(--margin);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
    background-image: repeating-linear-gradient(90deg, var(--phantom) 0 1px, transparent 1px calc(var(--column) + var(--gutter)));
}

.grid-veil.visible { opacity: 1; }

main { position: relative; z-index: 2; }

.hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--inkwell);
    isolation: isolate;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background: radial-gradient(circle at 55% 45%, #f5f0e6 0%, #ebe3d4 40%, transparent 72%);
    opacity: 0.2;
}

.moon-orb {
    position: absolute;
    width: min(68vw, 720px);
    height: min(68vw, 720px);
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
    background: radial-gradient(circle at 55% 45%, #f5f0e6 0%, #ebe3d4 40%, transparent 72%);
    filter: blur(40px);
    opacity: 0.24;
    animation: morph 20s ease-in-out infinite, moonDrift 180s ease-in-out infinite;
    z-index: -2;
}

@keyframes morph {
    0%, 100% { border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%; }
    50% { border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%; }
}

@keyframes moonDrift {
    0%, 100% { translate: 0 0; }
    50% { translate: 20px -18px; }
}

.hero-lockup {
    position: relative;
    width: min(88vw, 1180px);
    text-align: center;
    z-index: 5;
}

.mono-kicker, .section-number, .mono-line {
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--tan);
}

.hero .mono-kicker { color: rgba(235, 227, 212, 0.68); margin-bottom: 1.1rem; }

h1 {
    font-family: var(--display);
    font-size: clamp(4rem, 12vw, 9rem);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--bone);
    text-shadow: 0 28px 80px rgba(0,0,0,0.25);
}

.domain-tail {
    margin-top: -0.5rem;
    font-family: var(--display);
    font-size: clamp(2rem, 5.8vw, 4.3rem);
    font-weight: 300;
    color: var(--sage);
    letter-spacing: 0.04em;
}

.hero-vine {
    position: absolute;
    z-index: 6;
    width: min(32vw, 380px);
    max-height: 76vh;
    overflow: visible;
    mix-blend-mode: screen;
    opacity: 0.84;
}

.hero-vine-left { left: 10vw; top: 13vh; transform: rotate(-5deg); }
.hero-vine-right { right: 9vw; bottom: 7vh; transform: rotate(5deg); }

svg { overflow: visible; }

.draw-path, .boundary-fern path, .fern-stem {
    fill: none;
    stroke: var(--lavender);
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.draw-path.fine, .boundary-fern path { stroke-width: 1px; opacity: 0.56; }
.draw-path.sage, .boundary-fern path, .fern-stem { stroke: var(--sage); }
.draw-path.petal { fill: rgba(158, 141, 181, 0.08); }
.draw-path.sage-fill { fill: rgba(122, 145, 120, 0.10); stroke: var(--sage); }
ellipse { fill: rgba(158, 141, 181, 0.08); stroke: var(--lavender); stroke-width: 1.2px; }

.parallax-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.parallax-layer svg { position: absolute; width: 72vw; height: 72vw; }
.parallax-far { opacity: 0.04; color: var(--charcoal); }
.parallax-far svg { left: -16vw; top: 112vh; }
.parallax-far path { fill: none; stroke: var(--charcoal); stroke-width: 2px; }
.parallax-mid { opacity: 0.07; }
.parallax-mid svg { right: -12vw; top: 180vh; }
.parallax-mid path { fill: none; stroke: var(--lavender); stroke-width: 2px; }
.parallax-near { opacity: 0.12; }

.pod, .splatter { position: absolute; display: block; border: 1px solid var(--sage); border-radius: 50%; }
.pod::after { content: ""; position: absolute; inset: 28% 14%; border-top: 1px dashed var(--sage); transform: rotate(-18deg); }
.pod-a { width: 46px; height: 18px; left: 72vw; top: 132vh; transform: rotate(31deg); }
.pod-b { width: 36px; height: 16px; left: 12vw; top: 256vh; transform: rotate(-21deg); }
.pod-c { width: 54px; height: 21px; left: 79vw; top: 384vh; transform: rotate(12deg); }
.splatter { background: var(--inkwell); border: 0; opacity: 0.34; }
.splatter-a { width: 13px; height: 7px; left: 23vw; top: 190vh; transform: rotate(28deg); }
.splatter-b { width: 20px; height: 11px; left: 66vw; top: 310vh; transform: rotate(-12deg); }

.breath {
    position: relative;
    min-height: 240px;
    border-left: 1px solid var(--phantom);
    margin-left: var(--margin);
}

.breath-tall { min-height: 390px; }
.boundary-bud { position: absolute; width: 220px; left: 55%; top: 22px; }
.boundary-bud path { fill: none; stroke: var(--plum); stroke-width: 1.25px; opacity: 0; transition: opacity 900ms ease, transform 900ms ease; transform-origin: center bottom; }
.boundary-bud .bud-closed { opacity: 0.55; }
.botanical-boundary.bloomed .bud-closed { opacity: 0; transform: scale(0.94); }
.botanical-boundary.bloomed .bud-open { opacity: 0.72; transform: scale(1.04); }
.boundary-fern { position: absolute; width: min(62vw, 480px); left: 18vw; top: 20px; opacity: 0.7; }
.left-margin-vine { position: absolute; left: -42px; top: -10px; width: 180px; opacity: 0.66; }

.swiss-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    margin-inline: var(--margin);
    position: relative;
}

.panel, .narrow { position: relative; padding: clamp(96px, 13vw, 180px) 0; }
.panel-dark { background: var(--inkwell); color: var(--bone); }
.panel-dark::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(235,227,212,0.055) 0 1px, transparent 1px calc(var(--column) + var(--gutter))); margin-inline: var(--margin); pointer-events: none; }

.section-number { grid-column: 1 / span 1; padding-top: 0.6rem; }
h2 {
    grid-column: 3 / span 6;
    font-family: var(--display);
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--charcoal);
}

.panel-dark h2, .panel-dark .reading p { color: var(--bone); }
.panel-dark .section-number { color: rgba(235,227,212,0.54); }
.reading { grid-column: 3 / span 7; margin-top: 2.2rem; max-width: 760px; }
.wide-panel .reading { grid-column: 6 / span 5; margin-top: 0.35rem; }
.wide-panel h2 { grid-column: 2 / span 4; }
.split-panel .reading { grid-column: 8 / span 4; margin-top: 0; }
.split-panel h2 { grid-column: 2 / span 5; }
.reading p + p { margin-top: 1.25rem; }
.reading p { opacity: 0.92; }

.type-specimen { border-left: 1px solid rgba(62,52,42,0.16); padding-left: 24px; }
.specimen-display { font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--plum); }
.mono-line { color: var(--tan); padding-top: 1rem; }
.palette-story span { font-family: var(--mono); color: var(--plum); }

.specimen-plate {
    position: absolute;
    right: 6vw;
    top: 20%;
    width: min(38vw, 520px);
    opacity: 0.84;
    mix-blend-mode: screen;
}

.closing-panel {
    min-height: 64vh;
    display: grid;
    place-content: center;
    gap: 1rem;
    text-align: center;
    background: var(--moonbeam);
    color: var(--charcoal);
}

.closing-panel p:last-child {
    font-family: var(--display);
    font-size: clamp(2.2rem, 5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    max-width: 880px;
}

.reveal-section h2, .reveal-section .reading p, .closing-panel p { opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-section .reading p { transform: none; transition-duration: 600ms; }
.reveal-section.in-view h2, .reveal-section.in-view .reading p, .closing-panel.in-view p { opacity: 1; transform: translateY(0); }
.reveal-section.in-view .reading p:nth-child(2) { transition-delay: 100ms; }
.reveal-section.in-view .reading p:nth-child(3) { transition-delay: 200ms; }

.grow-vine .draw-path, .grow-vine ellipse, .boundary-fern path { transition: stroke-dashoffset 2500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 700ms ease; }
.grow-vine:not(.grown) ellipse { opacity: 0; }
.grow-vine.grown ellipse { opacity: 1; transition-delay: 1300ms; }

@media (max-width: 900px) {
    :root { --margin: 24px; --gutter: 16px; }
    .swiss-grid { grid-template-columns: repeat(6, 1fr); }
    .section-number, h2, .reading, .wide-panel h2, .wide-panel .reading, .split-panel h2, .split-panel .reading { grid-column: 1 / -1; }
    .reading, .wide-panel .reading, .split-panel .reading { margin-top: 1.5rem; }
    .hero-vine { width: 48vw; opacity: 0.58; }
    .hero-vine-left { left: -7vw; }
    .hero-vine-right { right: -8vw; }
    .specimen-plate { position: relative; grid-column: 1 / -1; right: auto; top: auto; width: 86vw; margin-top: 3rem; }
    .panel-dark::before, .grid-veil { margin-inline: 0; inset-inline: var(--margin); }
}

@media (prefers-color-scheme: dark) {
    :root { --parchment: #2a2520; --charcoal: #ebe3d4; --phantom: rgba(235, 227, 212, 0.09); }
    body { background: var(--parchment); color: var(--charcoal); }
    .moon-orb { opacity: 0.35; }
    .parallax-far { opacity: 0.07; }
    .parallax-mid { opacity: 0.10; }
    .parallax-near { opacity: 0.16; }
    .panel-dark { background: #171410; }
}