/* sustaining.quest — wabi-sabi forest organic / bioluminescent mycelium */

:root {
    --bg-linen: #faf6f0;
    --bg-cool: #f5f5f0;
    --moss-cream: #f0ebe0;
    --forest-floor: #2c3a28;
    --sage: #7a8a6e;
    --deep-moss: #3d5a3a;
    --amber-sap: #c48b2c;
    --bio-green: #7ec87e;
    --terra-root: #8b6543;
    --soil: #3a2e22;

    --font-head: "Playfair Display", "Lora", Georgia, serif;
    --font-body: "Lora", Georgia, serif;
    --font-hand: "Caveat", "Lora", cursive;
    --font-meta: "Nunito Sans", "Inter", system-ui, sans-serif;

    --max-content: 720px;
    --node-pad-y: 64px;
    --gap-y: 140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    background: var(--bg-linen);
    color: var(--forest-floor);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.78;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    animation: seasonal-shift 60s ease-in-out infinite alternate;
}

@keyframes seasonal-shift {
    0%   { background-color: var(--bg-linen); }
    100% { background-color: var(--bg-cool); }
}

/* Ambient layered canvas */
.ambient-canvas {
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 20% 10%, rgba(126,200,126,0.05) 0%, transparent 35%),
        radial-gradient(circle at 80% 30%, rgba(196,139,44,0.04) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(61,90,58,0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Leaf shadow drift */
.leaf-shadow-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}
.leaf-shadow-layer .leaf {
    position: absolute;
    width: 320px;
    height: 320px;
    fill: var(--forest-floor);
    fill-opacity: 0.025;
    stroke: var(--forest-floor);
    stroke-opacity: 0.02;
    stroke-width: 0.5;
    filter: blur(2px);
}
.leaf-1 { top: 8%;  left: -6%;  animation: drift-a 24s ease-in-out infinite alternate; }
.leaf-2 { top: 32%; right: -8%; animation: drift-b 28s ease-in-out infinite alternate; }
.leaf-3 { top: 58%; left: 12%;  animation: drift-c 22s ease-in-out infinite alternate; }
.leaf-4 { top: 78%; right: 6%;  animation: drift-d 26s ease-in-out infinite alternate; }

@keyframes drift-a { from { transform: translate(0,0) rotate(-4deg);}   to { transform: translate(28px, 22px) rotate(2deg);} }
@keyframes drift-b { from { transform: translate(0,0) rotate(6deg);}    to { transform: translate(-30px, 18px) rotate(-3deg);} }
@keyframes drift-c { from { transform: translate(0,0) rotate(-2deg);}   to { transform: translate(22px, -26px) rotate(4deg);} }
@keyframes drift-d { from { transform: translate(0,0) rotate(3deg);}    to { transform: translate(-24px, -20px) rotate(-5deg);} }

/* Mycelium background */
.mycelium-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
.mycelium-bg path {
    fill: none;
    stroke: var(--deep-moss);
    stroke-opacity: 0.15;
    stroke-width: 0.5;
    stroke-linecap: round;
}

/* Germination opening overlay */
.germination {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--bg-linen);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1.4s ease 2.6s, visibility 0s linear 4s;
}
.germination.done {
    opacity: 0;
    visibility: hidden;
}
.germination-svg {
    width: min(90vw, 800px);
    height: min(90vh, 600px);
}
.germination-svg .seed {
    fill: var(--deep-moss);
    opacity: 0;
    animation: seed-appear 0.5s ease forwards 0.1s;
}
.germination-svg .stem,
.germination-svg .root,
.germination-svg .bloom {
    fill: none;
    stroke: var(--deep-moss);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}
.germination-svg .stem {
    animation: grow-stem 1.6s ease-out forwards 0.5s;
}
.germination-svg .root { stroke-opacity: 0.7; }
.germination-svg .root-l { animation: grow-stem 1.4s ease-out forwards 0.7s; }
.germination-svg .root-r { animation: grow-stem 1.4s ease-out forwards 0.8s; }
.germination-svg .root-c { animation: grow-stem 1.4s ease-out forwards 0.9s; }
.germination-svg .bloom  { stroke-opacity: 0.55; }
.germination-svg .bloom-1 { animation: grow-stem 1.6s ease-out forwards 1.6s; }
.germination-svg .bloom-2 { animation: grow-stem 1.6s ease-out forwards 1.7s; }
.germination-svg .bloom-3 { animation: grow-stem 1.6s ease-out forwards 1.8s; }
.germination-svg .bloom-4 { animation: grow-stem 1.6s ease-out forwards 1.9s; }

@keyframes seed-appear {
    from { opacity: 0; transform: scale(0.2); transform-origin: 400px 320px; }
    to   { opacity: 1; transform: scale(1);  transform-origin: 400px 320px; }
}
@keyframes grow-stem {
    from { stroke-dashoffset: 800; }
    to   { stroke-dashoffset: 0; }
}

.germination-title {
    position: absolute;
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(38px, 6vw, 72px);
    color: var(--forest-floor);
    letter-spacing: 0.5px;
    margin: 0;
    opacity: 0;
    animation: title-fade 1.4s ease forwards 2.0s;
}
.germination-title .title-dot { color: var(--amber-sap); }

@keyframes title-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Top-left mark */
.site-mark {
    position: fixed;
    top: 28px;
    left: 32px;
    z-index: 30;
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--deep-moss);
    text-decoration: none;
    letter-spacing: 0.3px;
    border-bottom: 1px dashed rgba(61,90,58,0.4);
    padding-bottom: 1px;
    transition: color 0.4s ease, border-color 0.4s ease;
}
.site-mark:hover {
    color: var(--amber-sap);
    border-color: var(--amber-sap);
}

/* Central taproot */
.taproot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.taproot path.trunk {
    fill: none;
    stroke: var(--deep-moss);
    stroke-opacity: 0.40;
    stroke-width: 2;
    stroke-linecap: round;
}
.taproot path.lateral {
    fill: none;
    stroke: var(--deep-moss);
    stroke-opacity: 0.30;
    stroke-width: 1.2;
}

/* Page wrapper */
.page {
    position: relative;
    z-index: 1;
    padding: 140px 24px 0;
    max-width: 1280px;
    margin: 0 auto;
}

/* Hero */
.hero {
    text-align: center;
    max-width: 760px;
    margin: 40px auto 80px;
    padding: 40px 32px 72px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s;
}
.hero.visible { opacity: 1; transform: none; }

.kicker {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.32em;
    color: var(--sage);
    text-transform: uppercase;
    margin: 0 0 28px;
}
.hero-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 68px);
    line-height: 1.12;
    letter-spacing: -0.4px;
    margin: 0 0 32px;
    color: var(--forest-floor);
}
.hero-title em {
    font-style: italic;
    color: var(--deep-moss);
}
.hero-lede {
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.85;
    color: var(--forest-floor);
    max-width: 600px;
    margin: 0 auto 28px;
}
.hero-meta {
    font-family: var(--font-meta);
    font-size: 13px;
    color: var(--sage);
    letter-spacing: 0.12em;
    margin: 0;
}

/* Tree-ring dividers */
.ring-divider {
    position: relative;
    width: 100%;
    height: 220px;
    margin: 24px 0;
    pointer-events: none;
    overflow: hidden;
}
.ring-divider svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 480px;
    height: 320px;
}
.ring-left svg { left: -180px; }
.ring-right svg { right: -180px; }
.ring-divider circle {
    fill: none;
    stroke: var(--amber-sap);
    stroke-width: 1;
}
.ring-divider circle:nth-child(1) { stroke-opacity: 0.30; }
.ring-divider circle:nth-child(2) { stroke-opacity: 0.26; }
.ring-divider circle:nth-child(3) { stroke-opacity: 0.22; }
.ring-divider circle:nth-child(4) { stroke-opacity: 0.18; }
.ring-divider circle:nth-child(5) { stroke-opacity: 0.14; }
.ring-divider circle:nth-child(6) { stroke-opacity: 0.10; }

/* Content nodes */
.node {
    position: relative;
    max-width: var(--max-content);
    background: var(--moss-cream);
    padding: var(--node-pad-y) 56px;
    margin: 0 auto var(--gap-y);
    border: 1px solid rgba(61,90,58,0.10);
    -webkit-clip-path: polygon(2% 1%, 96% 0%, 99% 4%, 100% 96%, 97% 100%, 4% 99%, 1% 95%, 0% 4%);
    clip-path: polygon(2% 1%, 96% 0%, 99% 4%, 100% 96%, 97% 100%, 4% 99%, 1% 95%, 0% 4%);
    box-shadow: 0 1px 0 rgba(61,90,58,0.05);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease;
}
.node.visible { opacity: 1; transform: none; }
.node.wide { max-width: 920px; }
.node:hover { box-shadow: 0 0 24px rgba(126,200,126,0.18); }

.node-left { margin-left: max(24px, calc(50% - 480px - var(--max-content)/2 + 60px)); }
.node-right { margin-right: max(24px, calc(50% - 480px - var(--max-content)/2 + 60px)); }

@media (max-width: 1100px) {
    .node-left, .node-right { margin-left: auto; margin-right: auto; }
}

.node-marker {
    position: absolute;
    top: 36px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-linen);
    border: 1px solid rgba(61,90,58,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.node-left .node-marker { left: -32px; }
.node-right .node-marker { right: -32px; }
.node-marker::after {
    content: attr(data-stage-label);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-hand);
    font-size: 14px;
    color: var(--sage);
    white-space: nowrap;
}
.node:hover .node-marker {
    transform: scale(1.06);
    box-shadow: 0 0 16px rgba(126,200,126,0.30);
}
.stage-icon {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--deep-moss);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.5;
    transition: opacity 0.5s ease, stroke 0.5s ease;
}
.node:hover .stage-icon { opacity: 1; stroke: var(--bio-green); }

.node-eyebrow {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.30em;
    color: var(--sage);
    text-transform: uppercase;
    margin: 0 0 12px;
}
.node-title {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.18;
    color: var(--forest-floor);
    margin: 0 0 28px;
}
.node-title em {
    font-style: italic;
    color: var(--deep-moss);
}
.node-body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.85;
    color: var(--forest-floor);
    margin: 0 0 22px;
}
.emph {
    font-style: italic;
    font-weight: 600;
    color: var(--deep-moss);
}

.margin-note {
    font-family: var(--font-hand);
    font-size: 17px;
    color: var(--sage);
    margin: 28px 0 0;
    padding-left: 18px;
    border-left: 1px dashed rgba(122,138,110,0.5);
    line-height: 1.4;
}

/* Annotated list */
.annotated-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}
.annotated-list li {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--forest-floor);
    padding: 8px 0 8px 0;
    border-top: 1px dashed rgba(61,90,58,0.16);
}
.annotated-list li:last-child { border-bottom: 1px dashed rgba(61,90,58,0.16); }
.annotated-list .caveat {
    font-family: var(--font-hand);
    color: var(--amber-sap);
    margin-right: 10px;
    font-size: 18px;
}

/* Practice list */
.practice-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    counter-reset: practice;
}
.practice-list li {
    counter-increment: practice;
    position: relative;
    padding: 18px 0 22px 60px;
    border-top: 1px dashed rgba(61,90,58,0.16);
}
.practice-list li:last-child { border-bottom: 1px dashed rgba(61,90,58,0.16); }
.practice-list li::before {
    content: counter(practice, decimal-leading-zero);
    position: absolute;
    top: 22px;
    left: 0;
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    font-size: 24px;
    color: var(--amber-sap);
}
.practice-list h3 {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    font-size: 21px;
    color: var(--forest-floor);
    margin: 0 0 6px;
    line-height: 1.3;
}
.practice-list p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--forest-floor);
    margin: 0;
}

/* Letters */
.letter-from {
    display: block;
    margin: 0 0 14px;
    font-size: 20px;
    color: var(--terra-root);
}

/* Almanac */
.almanac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    margin-top: 36px;
}
.almanac-card {
    background: var(--bg-linen);
    padding: 28px 28px 24px;
    border: 1px solid rgba(61,90,58,0.12);
    -webkit-clip-path: polygon(3% 2%, 97% 0%, 100% 4%, 99% 96%, 96% 100%, 4% 99%, 0% 96%, 1% 3%);
    clip-path: polygon(3% 2%, 97% 0%, 100% 4%, 99% 96%, 96% 100%, 4% 99%, 0% 96%, 1% 3%);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.almanac-card:hover {
    box-shadow: 0 0 18px rgba(126,200,126,0.22);
    transform: translateY(-2px);
}
.card-stage {
    font-family: var(--font-hand);
    font-size: 18px;
    color: var(--amber-sap);
    margin: 0 0 10px;
}
.almanac-card h3 {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    color: var(--forest-floor);
    margin: 0 0 10px;
    line-height: 1.25;
}
.almanac-card p:not(.card-stage):not(.card-meta) {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--forest-floor);
    margin: 0 0 14px;
}
.card-meta {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--sage);
    text-transform: uppercase;
    margin: 0;
}

/* Soil layer */
.soil {
    position: relative;
    margin: 60px -24px 0;
    padding: 140px 24px 100px;
    background: linear-gradient(180deg, var(--bg-linen) 0%, var(--soil) 28%, var(--soil) 100%);
    color: var(--bg-linen);
    overflow: hidden;
}
.soil-mycelium {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.soil-mycelium path {
    fill: none;
    stroke: var(--bio-green);
    stroke-opacity: 0.18;
    stroke-width: 0.6;
    stroke-linecap: round;
}
.soil-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 24px;
}
.soil-eyebrow {
    font-family: var(--font-hand);
    font-size: 18px;
    color: var(--bio-green);
    margin: 0 0 18px;
    letter-spacing: 0.2px;
}
.soil-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(36px, 4.8vw, 56px);
    margin: 0 0 24px;
    line-height: 1.15;
    color: var(--bg-linen);
}
.soil-title em { font-style: italic; color: var(--bg-linen); }
.soil-body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.85;
    color: var(--moss-cream);
    margin: 0 0 26px;
}
.soil-sign {
    font-family: var(--font-hand);
    font-size: 20px;
    color: var(--amber-sap);
    margin: 0 0 36px;
}
.soil-links {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    justify-content: center;
}
.soil-links a {
    font-family: var(--font-meta);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--bg-linen);
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.4s ease;
}
.soil-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--bio-green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s ease;
}
.soil-links a:hover { color: var(--bio-green); }
.soil-links a:hover::after { transform: scaleX(1); }
.soil-meta {
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--sage);
    text-transform: uppercase;
    margin: 0;
}

/* Floating root navigation */
.root-nav {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 40;
    width: 48px;
    height: 48px;
}
.root-nav.expanded {
    width: 320px;
    height: 320px;
    transform: translate(calc(-50% + 24px), calc(-50% + 24px));
}
.root-nav-button {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(61,90,58,0.30);
    background: rgba(250,246,240,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-soft 4s ease-in-out infinite;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.root-nav-button:hover {
    box-shadow: 0 0 18px rgba(126,200,126,0.30);
    border-color: var(--bio-green);
}
.root-nav-icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--deep-moss);
    stroke-width: 1.4;
    stroke-linecap: round;
    transition: stroke 0.4s ease, transform 0.6s ease;
}
.root-nav-icon circle { fill: var(--deep-moss); stroke: none; }
.root-nav.expanded .root-nav-icon { transform: rotate(45deg); stroke: var(--amber-sap); }
.root-nav.expanded .root-nav-icon circle { fill: var(--amber-sap); }

@keyframes pulse-soft {
    0%, 100% { transform: scale(1.0); }
    50%      { transform: scale(1.05); }
}

.root-nav-menu {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}
.root-nav-menu li {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.root-nav.expanded .root-nav-menu li { opacity: 1; pointer-events: auto; }
.root-nav-menu a {
    font-family: var(--font-hand);
    font-size: 17px;
    color: var(--deep-moss);
    background: rgba(240,235,224,0.92);
    padding: 6px 14px;
    border-radius: 18px;
    border: 1px solid rgba(61,90,58,0.20);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.root-nav-menu a:hover {
    color: var(--amber-sap);
    background: var(--bg-linen);
    box-shadow: 0 0 12px rgba(126,200,126,0.30);
}

.root-nav-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.root-nav.expanded .root-nav-lines { opacity: 1; }
.root-nav-lines path {
    fill: none;
    stroke: var(--deep-moss);
    stroke-opacity: 0.45;
    stroke-width: 1;
    stroke-linecap: round;
}

/* Responsive */
@media (max-width: 720px) {
    .page { padding: 100px 16px 0; }
    .node { padding: 44px 26px; }
    .node-left .node-marker, .node-right .node-marker {
        left: 50%; right: auto;
        transform: translateX(-50%);
        top: -32px;
    }
    .node:hover .node-marker {
        transform: translateX(-50%) scale(1.06);
    }
    .site-mark { top: 18px; left: 18px; font-size: 18px; }
    .root-nav { bottom: 18px; right: 18px; }
}