:root {
    /* Design tokens: IntersectionObserver` instance with thresholds `{threshold: [0 IntersectionObserver` on each seam element to trigger a CSS class that animates opacity to `0.35` and width from `200px` to `400px` over `2.5s ease-out` IntersectionObserver` threshold is set to `0.4` IntersectionObserver`. Space Mono" (Google Fonts */
    --deep-loam: #2a2118;
    --moss-vein: #7b9e6f;
    --amethyst-shard: #8b6f9e;
    --lichen-pale: #e8e0d2;
    --mycelium-thread: #b8964e;
    --quartz-face: #c4bfb6;
    --spore-dark: #1e2a1b;
    --crystal-flash: #a8d4a0;
    --mud-line: #5a4e3a;
    --ease-earth: cubic-bezier(0.22, 1, 0.36, 1);
    --threshold-list-marker: "[0";
}

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

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--lichen-pale);
    background:
        radial-gradient(ellipse at 12% 8%, rgba(139, 111, 158, 0.16), transparent 38rem),
        radial-gradient(ellipse at 90% 22%, rgba(123, 158, 111, 0.13), transparent 34rem),
        linear-gradient(180deg, var(--spore-dark), var(--deep-loam) 44%, var(--spore-dark));
    font-family: "Space Mono", monospace;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.75;
    letter-spacing: 0.02em;
}

#spore-field {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.page-vein {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        linear-gradient(115deg, transparent 0 48%, rgba(184, 150, 78, 0.05) 48.1% 48.35%, transparent 48.45% 100%),
        radial-gradient(circle at 20% 60%, rgba(168, 212, 160, 0.08), transparent 18rem);
}

.strata {
    position: relative;
    padding: clamp(1rem, 2vh, 2rem) 0 clamp(3rem, 6vh, 5rem);
}

.stratum {
    position: relative;
    min-height: 104vh;
    margin: clamp(1.2rem, 4vh, 3rem) 0;
    padding: clamp(5rem, 8vh, 8rem) clamp(2rem, 5vw, 6rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
}

.stratum.alternate {
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

.stratum-loam {
    background:
        radial-gradient(ellipse at 18% 15%, rgba(90, 78, 58, 0.52), transparent 34rem),
        linear-gradient(140deg, #2a2118 0%, #21180f 52%, #2a2118 100%);
}

.stratum-forest {
    background:
        radial-gradient(ellipse at 78% 18%, rgba(123, 158, 111, 0.13), transparent 32rem),
        linear-gradient(140deg, #1e2a1b 0%, #172014 50%, #1e2a1b 100%);
}

.stratum::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.24;
    background:
        repeating-linear-gradient(105deg, transparent 0 23px, rgba(196, 191, 182, 0.025) 24px 25px, transparent 26px 54px),
        radial-gradient(circle at 62% 74%, rgba(139, 111, 158, 0.12), transparent 21rem);
}

.crystal-pattern {
    position: absolute;
    inset: -8%;
    z-index: -1;
    opacity: 0.72;
    transform: rotate(-4deg) scale(1.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180' viewBox='0 0 220 180'%3E%3Cg fill='none' stroke='%237b9e6f' stroke-width='.5'%3E%3Cpath opacity='.12' d='M52 9 91 29v44L52 95 13 73V29Z'/%3E%3Cpath opacity='.06' d='M152 38 198 63v51l-46 26-46-26V63Z'/%3E%3Cpath opacity='.09' d='M101 96 132 112v36l-31 18-31-18v-36Z'/%3E%3Cpath opacity='.04' d='M22 126 48 140v30l-26 15-26-15v-30Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%238b6f9e' stroke-width='.45' opacity='.06'%3E%3Cpath d='m13 29 39 66 39-66M106 63l46 77 46-77M70 112l31 54 31-54'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 220px 180px;
}

.grid-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    position: relative;
}

.copy-block {
    position: relative;
    z-index: 2;
    grid-column: 1 / span 4;
    opacity: 0.15;
    transform: translateY(20px) scale(0.97);
    transition: opacity 900ms var(--ease-earth), transform 900ms var(--ease-earth), filter 900ms var(--ease-earth);
    filter: blur(0.7px);
}

.align-right .copy-block {
    grid-column: 3 / span 4;
}

.stratum.is-near .copy-block {
    opacity: 0.5;
    transform: translateY(8px) scale(0.985);
}

.stratum.is-visible .copy-block {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.hero-block {
    padding-top: clamp(2rem, 6vh, 5rem);
    padding-bottom: clamp(2rem, 6vh, 5rem);
}

.specimen-code {
    margin-bottom: 1.3rem;
    color: var(--quartz-face);
    font-size: clamp(0.72rem, 0.86vw, 0.86rem);
    text-transform: uppercase;
    letter-spacing: 0.17em;
}

h1,
h2 {
    max-width: 11ch;
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.6rem);
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(135deg, var(--moss-vein), var(--amethyst-shard), var(--crystal-flash), var(--moss-vein));
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: shimmer 8s linear infinite;
    text-shadow: 0 0 34px rgba(168, 212, 160, 0.08);
}

h1 {
    font-size: clamp(2.45rem, 9vw, 7rem);
}

p {
    max-width: 48rem;
    margin-top: 1.35rem;
    color: var(--lichen-pale);
}

.copy-block p:not(.specimen-code):not(.epigraph) {
    color: var(--quartz-face);
}

.copy-block span {
    color: var(--crystal-flash);
}

.epigraph {
    max-width: 42rem;
    color: var(--lichen-pale);
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.55;
    letter-spacing: 0.01em;
}

.mycelium {
    position: absolute;
    width: min(52vw, 520px);
    height: auto;
    right: -2rem;
    bottom: -4rem;
    z-index: 1;
    overflow: visible;
}

.align-right .mycelium {
    right: auto;
    left: -2rem;
}

.mycelium path {
    fill: none;
    stroke: var(--mycelium-thread);
    stroke-width: 0.8px;
    opacity: 0.12;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.seam {
    position: relative;
    height: clamp(6rem, 12vh, 10rem);
    margin: -4.5rem 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.seam::before {
    content: "";
    position: absolute;
    left: 5vw;
    right: 5vw;
    top: 50%;
    height: 24px;
    transform: translateY(-50%);
    opacity: 0.85;
    background-image: radial-gradient(closest-side, rgba(90, 78, 58, 0.2) 98%, transparent 100%);
    background-size: 16px 16px;
    background-position: center;
}

.seam::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--flare-x, 50%);
    width: 200px;
    height: 150px;
    transform: translate(-50%, -50%) rotate(-7deg);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(ellipse 300px 150px at center, var(--crystal-flash) 0%, transparent 70%);
    mix-blend-mode: screen;
    transition: opacity 1500ms ease-out, width 2500ms ease-out;
}

.seam[data-flare="left"] { --flare-x: 28%; }
.seam[data-flare="right"] { --flare-x: 72%; }
.seam[data-flare="center"] { --flare-x: 50%; }

.seam.flare::after {
    width: 400px;
    opacity: 0.35;
    animation: flare-bloom 2.5s ease-out forwards;
}

.mushroom-divider,
.diamond-chain {
    position: relative;
    z-index: 2;
    width: 78px;
    height: 28px;
    opacity: 0.8;
}

.mushroom-divider {
    border-radius: 80px 80px 8px 8px;
    background: repeating-conic-gradient(from 180deg, rgba(90, 78, 58, 0.08) 0deg 8deg, rgba(184, 150, 78, 0.12) 9deg 11deg, rgba(90, 78, 58, 0.08) 12deg 18deg);
    border-bottom: 1px solid rgba(184, 150, 78, 0.16);
}

.diamond-chain::before {
    content: "";
    position: absolute;
    inset: 9px 0;
    background: repeating-linear-gradient(90deg, rgba(184, 150, 78, 0.0) 0 7px, rgba(184, 150, 78, 0.22) 8px 12px, rgba(184, 150, 78, 0.0) 13px 16px);
    transform: rotate(45deg) scaleY(0.65);
}

.crystal-toggle {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 40;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(168, 212, 160, 0.22);
    background: rgba(42, 33, 24, 0.62);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.crystal-toggle span {
    width: 24px;
    height: 24px;
    display: block;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--moss-vein);
    box-shadow: 0 0 18px rgba(168, 212, 160, 0.42);
    animation: breathe 4s ease-in-out infinite;
}

.field-journal {
    position: fixed;
    right: 2rem;
    bottom: 6rem;
    z-index: 39;
    width: min(270px, calc(100vw - 4rem));
    padding: 1.2rem;
    border: 1px solid rgba(184, 150, 78, 0.28);
    background:
        linear-gradient(135deg, rgba(42, 33, 24, 0.94), rgba(30, 42, 27, 0.94)),
        radial-gradient(circle at 20% 20%, rgba(123, 158, 111, 0.18), transparent 9rem);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    transition: opacity 450ms var(--ease-earth), transform 450ms var(--ease-earth);
}

.field-journal.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.field-journal p {
    margin: 0 0 0.8rem;
    color: var(--quartz-face);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.17em;
}

.field-journal a {
    display: block;
    padding: 0.55rem 0;
    color: var(--lichen-pale);
    font-size: 0.86rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-top: 1px solid rgba(196, 191, 182, 0.08);
    transition: color 260ms ease, padding-left 260ms ease;
}

.field-journal a:hover,
.field-journal a.active {
    color: var(--crystal-flash);
    padding-left: 0.45rem;
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes flare-bloom {
    0% { opacity: 0; width: 200px; }
    35% { opacity: 0.35; width: 400px; }
    100% { opacity: 0; width: 400px; }
}

@media (max-width: 820px) {
    .stratum {
        min-height: 96vh;
        padding: clamp(4.5rem, 9vh, 7rem) 1.35rem;
    }

    .grid-shell {
        grid-template-columns: 1fr;
    }

    .copy-block,
    .align-right .copy-block {
        grid-column: 1;
    }

    .mycelium {
        width: 86vw;
        right: -24vw;
        bottom: -2rem;
    }

    .align-right .mycelium {
        left: -24vw;
    }

    .crystal-toggle {
        right: 1rem;
        bottom: 1rem;
    }

    .field-journal {
        right: 1rem;
        bottom: 5rem;
    }
}