:root{
    --soil:#1E1712;          /* background, warmer oak-brown mud */
    --soil-raised:#2E2015;   /* card surface, warmer clay */
    --soil-2:#3A2818;        /* hover surface, warmer clay */
    --line:#3B2C1F;          /* hairlines / borders */
    --bone:#F0EADF;          /* primary text */
    --bone-dim:#B7AB97;      /* secondary text, brightened to pop */
    --bone-faint:#948A78;    /* tertiary / labels at rest, brightened to pop */
    --tan:#C69256;           /* accent, soft marigold */
    --tan-soft:#E0BB83;
    --tan-deep:#8B6536;      /* borders, deeper accent */
    --warm:rgba(198,146,86,0.16); /* warm wash on woken cards */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    /* THE DESCENT: the page opens in the hero's cool void (#0B0906) and warms
       down into the Heap's humus (--soil #1E1712) across the first screenful,
       so arriving here feels like sinking through soil, not crossing a seam.
       Below the first screen it settles into steady soil. */
    background:linear-gradient(to bottom, #0B0906 0, #100C09 34vh, var(--soil) 96vh) no-repeat, var(--soil);
    color:var(--bone);
    font-family:Georgia,'Times New Roman',serif;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* the topsoil horizon: a single faint strata line where void gives way to
   humus — a threshold you cross, unlabeled, felt rather than announced. */
/* topsoil: not a line — a band of color where the lit surface gives way to humus.
   A threshold you feel, with a quiet word, then you go under. */
.topsoil{position:relative;z-index:1;pointer-events:none;margin:0;padding:34px 0 40px;text-align:center;
    background:linear-gradient(to bottom,
    rgba(198,146,86,0) 0%, rgba(198,146,86,.05) 26%,
    rgba(120,82,44,.16) 52%, rgba(30,23,18,.55) 78%, var(--soil) 100%)}
.topsoil .ts-word{display:block;font-family:'Courier New',monospace;font-size:11px;letter-spacing:.34em;
    text-transform:uppercase;color:var(--tan-soft)}
.topsoil .ts-sub{display:block;margin-top:8px;font-family:Georgia,serif;font-style:italic;
    font-size:13.5px;letter-spacing:.02em;color:var(--bone-faint)}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
body::before{
    content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
    background:
            var(--day-wash, transparent),
            var(--season-tint, transparent),
            radial-gradient(1200px 600px at 72% -8%, rgba(198,146,86,0.05), transparent 60%),
            radial-gradient(900px 520px at 8% 108%, rgba(198,146,86,0.04), transparent 60%);
    animation:soilDrift 80s ease-in-out infinite;
}
body.mo-reduced::before,body.energy-low::before{animation:none}

/* ---------- masthead ---------- */
header.mast{padding:100px 0 78px;position:relative;overflow:hidden}
header.mast .wrap{position:relative;z-index:1}
.wordmark{
    font-family:'Times New Roman',Times,serif;font-weight:700;
    font-size:clamp(34px,9vw,92px);letter-spacing:.005em;line-height:.98;
    position:relative;cursor:default;white-space:nowrap;display:inline-block;
    text-shadow:0 1px 4px rgba(8,6,4,.6),0 0 26px rgba(10,8,5,.8),0 0 58px rgba(10,8,5,.52);
}
.mast-invite{
    font-family:Georgia,'Times New Roman',serif;font-size:clamp(19px,2.8vw,27px);
    line-height:1.45;color:var(--bone);max-width:26ch;margin:30px 0 0;
}
.art-credit{
    font-family:'Courier New',monospace;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--tan);margin:96px 0 0;
    text-shadow:0 1px 7px rgba(8,6,4,.72);transition:color .3s ease;
}
.art-credit a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .2s}
.art-credit a:hover,.art-credit a:focus-visible{opacity:.72}
/* the sweep: a brighter, wide band crosses the still letters (Option 4, turned up) */
.wordmark .swp{
    display:inline-block;position:relative;
    color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;
}
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
}
/* 'verb' stays white, haloed in the chosen highlight color */
.wordmark .verb{color:#FFFFFF;-webkit-text-fill-color:currentColor;background:none;
    animation:phosphor 5.5s ease-in-out infinite}
@keyframes phosphor{0%,100%{text-shadow:0 0 6px var(--warm)}50%{text-shadow:0 0 18px var(--tan-soft),0 0 34px var(--tan),0 0 50px var(--warm)}}


/* ---------- masthead: THE UNFOLDING ----------
   Krista's accordion opens by the viewer's own hand, intra-active: the piece
   does not pre-exist as "opened"; it comes into being through the relating.
   Low-carbon: ONE image, event-driven only, no animation loop. Idle when still. */
header.mast{padding:0;position:relative;overflow:hidden;height:clamp(520px,76vh,660px)}
.unfold{
    position:absolute;inset:0;z-index:0;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    touch-action:pan-x;-webkit-overflow-scrolling:touch;cursor:grab;
}
.unfold::-webkit-scrollbar{display:none}
.unfold.dragging{cursor:grabbing}
.unfold:focus-visible{outline:2px solid var(--tan);outline-offset:-4px}
.ufStrip{position:relative;height:100%;display:flex;width:max-content}
/* panel one, the closed cover, carrying the title; you unfold the creature out of it */
.ufCover{
    position:relative;flex:0 0 min(92vw,580px);height:100%;
    display:flex;align-items:center;
    padding:0 clamp(24px,6vw,92px);
    background:linear-gradient(102deg,#15120E 0%,var(--soil-raised) 48%,#15120E 100%);
    box-shadow:inset -34px 0 50px -26px #000;
}
.ufCover::before{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--tan-deep);opacity:.5}
.cover-inner{position:relative;z-index:2;max-width:30ch}
/* the drawing itself, one bright strip, unfolded by hand */
.ufArt{
    position:relative;flex:0 0 auto;height:100%;width:min(196vw,1820px);
    background:url('img/krista-bright.png') left center/cover no-repeat;
    filter:saturate(.5) brightness(1.18) contrast(1.04);
}
.ufFold{position:absolute;top:0;bottom:0;width:36px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(0,0,0,.32) 46%,rgba(0,0,0,.32) 54%,transparent),
    linear-gradient(90deg,transparent 48%,rgba(240,233,216,.06) 50%,transparent 52%)}
/* blends the hero into the page below */
.ufBottom{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:4;pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--soil))}
/* the poem floats over the whole hero, decoupled from the scrolling art, so lines linger and overlap */
.ufPoem{position:absolute;inset:0;z-index:3;pointer-events:none}
.ufPoem .ufEmerge{pointer-events:none}
.ufPoem .ufEmerge.lit{pointer-events:auto}
/* propositional lines that emerge as the piece is unfolded */
.ufEmerge{position:absolute;z-index:3;max-width:23ch;margin:0;
    font-family:'Times New Roman',serif;font-style:italic;font-weight:600;font-size:clamp(17px,2vw,24px);line-height:1.45;
    color:#FBF7EF;
    text-shadow:0 2px 5px rgba(8,6,4,.98),0 1px 22px rgba(8,6,4,.95),0 0 38px rgba(8,6,4,.8);
    transform:translateY(16px);opacity:0;transition:opacity 1.8s ease,transform 1.8s ease;pointer-events:none}
.ufEmerge.lit{opacity:1;transform:translateY(0);pointer-events:auto}
.ufEmerge.e-hi{font-size:clamp(22px,2.9vw,36px);font-style:italic;max-width:24ch}
.ufEmerge .verb-i{font-style:italic;color:var(--tan-soft);border-bottom:1px solid var(--tan)}
.ufEmerge .ufWord{color:var(--tan-soft);text-decoration:none;border-bottom:1px solid var(--tan);font-style:italic}
.ufEmerge .ufWord:hover{color:#fff;border-color:var(--tan-soft)}
.ufEmerge::before{content:"";position:absolute;inset:-22px -34px;z-index:-1;border-radius:44%;
    background:radial-gradient(60% 72% at 32% 50%,rgba(10,7,4,.8),rgba(10,7,4,.4) 55%,transparent 80%)}
.ufLink{display:block;margin-top:12px;font-style:normal;font-family:'Courier New',monospace;
    font-size:13px;letter-spacing:.04em;color:var(--tan);text-decoration:none;
    border-bottom:1px solid var(--tan-deep);width:fit-content;padding-bottom:2px}
.ufLink:hover{color:var(--tan-soft);border-color:var(--tan-soft)}
.ufsub{display:block;margin-top:10px;font-style:normal;font-family:'Courier New',monospace;
    font-size:13px;letter-spacing:.05em;line-height:1.5;color:var(--tan-soft)}
@media(max-width:720px){.ufPoem .ufEmerge{left:7%!important;max-width:80vw!important;font-size:16px}.ufPoem .e-hi{font-size:23px}}
.ufCredit{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;margin:0;
    font-family:'Courier New',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--tan);text-shadow:0 1px 8px rgba(8,6,4,.85);white-space:nowrap}
/* unfold hint + progress, how far the piece has opened */
.unfold-hint{font-family:'Courier New',monospace;font-size:14.5px;letter-spacing:.06em;
    color:var(--tan);margin:26px 0 0;display:flex;align-items:center;gap:10px}
.unfold-hint .uh-arrow{font-size:20px;animation:nudge 2.6s ease-in-out infinite}
/* big pulsing arrow that activates the unfolding */
.ufArrow{position:absolute;left:clamp(24px,6vw,92px);bottom:44px;z-index:6;
    display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;
    color:var(--tan);padding:6px 4px;transition:opacity .6s ease}
.ufArrowHead{font-size:46px;line-height:.8;display:block;
    text-shadow:0 0 10px rgba(198,146,86,.5),0 2px 10px rgba(8,6,4,.7);
    animation:nudge 2.2s ease-in-out infinite, ufheadglow 3s ease-in-out infinite}
@keyframes ufheadglow{0%,100%{text-shadow:0 0 8px rgba(198,146,86,.4),0 2px 10px rgba(8,6,4,.7)}50%{text-shadow:0 0 18px rgba(224,187,131,.85),0 0 32px rgba(198,146,86,.4),0 2px 10px rgba(8,6,4,.7)}}
.ufArrowWord{font-family:'Courier New',monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--tan-soft);opacity:.9}
.ufArrow:hover{color:var(--tan-soft)}
.ufArrow:hover .ufArrowHead{text-shadow:0 0 16px rgba(224,187,131,.7),0 2px 10px rgba(8,6,4,.7)}
.ufArrow:focus-visible{outline:2px solid var(--tan);outline-offset:4px;border-radius:6px}
.ufArrowWord{animation:ufglow 3s ease-in-out infinite}
.ufArrow:hover .ufArrowWord{opacity:1;text-shadow:0 0 16px rgba(224,187,131,.9),0 0 30px rgba(224,187,131,.4)}
body.mo-reduced .ufArrowHead,body.energy-low .ufArrowHead{animation:none;text-shadow:0 0 10px rgba(198,146,86,.5),0 2px 10px rgba(8,6,4,.7)}
body.mo-reduced .ufArrowWord,body.energy-low .ufArrowWord{animation:none;opacity:.9;text-shadow:none}
body.mo-reduced .unfold-hint .uh-arrow,body.energy-low .unfold-hint .uh-arrow{animation:none}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(5px);opacity:1}}
@keyframes ufglow{0%,100%{opacity:.66;text-shadow:0 0 3px rgba(224,187,131,.2)}50%{opacity:1;text-shadow:0 0 12px rgba(224,187,131,.95),0 0 24px rgba(224,187,131,.5),0 0 40px rgba(198,146,86,.25)}}
.ufProgress{position:absolute;left:clamp(24px,6vw,92px);right:clamp(24px,6vw,92px);bottom:26px;
    height:3px;background:var(--line);border-radius:2px;z-index:5;pointer-events:none}
.ufProgress span{display:block;height:100%;width:0;background:var(--tan);border-radius:2px}
.ufProgLabel{position:absolute;right:clamp(24px,6vw,92px);bottom:34px;z-index:5;pointer-events:none;
    font-family:'Courier New',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}
body.energy-low .ufArt,body.energy-low .ufCat{opacity:.62}
@media(max-width:720px){
    header.mast{height:clamp(460px,70vh,560px)}
    .ufArt{width:300vw}
    .cover-inner{max-width:26ch}
}
/* each palette re-tints the artwork too (text stays legible) */
body.acc-mustard .ufArt,body.acc-mustard .ufCat{filter:sepia(.32) saturate(1.25) hue-rotate(2deg)}
body.acc-lichen .ufArt,body.acc-lichen .ufCat{filter:sepia(.3) saturate(1.3) hue-rotate(42deg)}
body.acc-coral .ufArt,body.acc-coral .ufCat{filter:sepia(.32) saturate(1.5) hue-rotate(-18deg)}
body.acc-aqua .ufArt,body.acc-aqua .ufCat{filter:sepia(.28) saturate(1.4) hue-rotate(120deg)}
body.acc-cobalt .ufArt,body.acc-cobalt .ufCat{filter:sepia(.3) saturate(1.4) hue-rotate(168deg)}
/* viewer-chosen highlight palettes, agency, vibrancy, contrast */
body.acc-amber{--tan:#E0BD7C;--tan-soft:#EFD49C;--tan-deep:#A8895A;--warm:rgba(224,189,124,.16);--soil:#1A1712;--soil-raised:#221E17;--soil-2:#2A251C;--line:#34291D;--bone:#F2EBDD;--bone-dim:#ADA28F;--bone-faint:#786E5C}
body.acc-mustard{--tan:#ECB914;--tan-soft:#F6D858;--tan-deep:#A07E07;--warm:rgba(236,185,20,.18);--soil:#1A1810;--soil-raised:#221F12;--soil-2:#2A2616;--line:#332E1A;--bone:#F4EED9;--bone-dim:#AFA688;--bone-faint:#797056}
body.acc-ochre{--tan:#D1801E;--tan-soft:#E6A961;--tan-deep:#90560F;--warm:rgba(209,128,30,.18);--soil:#1B160F;--soil-raised:#231D13;--soil-2:#2B2419;--line:#352B1D;--bone:#F3EBDE;--bone-dim:#AEA28E;--bone-faint:#796D5B}
body.acc-olive{--tan:#AE9118;--tan-soft:#CFB33C;--tan-deep:#766009;--warm:rgba(174,145,24,.18);--soil:#18170E;--soil-raised:#201E12;--soil-2:#282518;--line:#312D1C;--bone:#F1EDD9;--bone-dim:#ABA487;--bone-faint:#756E55}
body.acc-mushroom{--tan:#CBB8A0;--tan-soft:#E0D2C0;--tan-deep:#91806A;--warm:rgba(203,184,160,.16);--soil:#1A1815;--soil-raised:#222019;--soil-2:#2A2720;--line:#332E26;--bone:#F1ECE4;--bone-dim:#ABA396;--bone-faint:#756D62}
body.acc-lichen{--tan:#9BD23E;--tan-soft:#BFE57B;--tan-deep:#5F8E18;--warm:rgba(155,210,62,.17);--soil:#16190F;--soil-raised:#1E2214;--soil-2:#262B1A;--line:#2E3421;--bone:#EDF0E2;--bone-dim:#A4A88E;--bone-faint:#6E735C}
/* each palette re-tints the artwork too */
body.acc-mustard .mast-art{filter:none}
.a11y-panel .seg{flex-wrap:wrap}
.sw{color:var(--sw);font-weight:bold}
@keyframes verbHold{
    0%,40%{text-shadow:0 0 6px var(--warm)}
    62%{text-shadow:0 0 16px var(--tan),0 0 30px var(--tan-soft)}
    100%{text-shadow:0 0 11px var(--tan),0 0 22px var(--warm)}
}
.tagline{font-style:italic;color:var(--bone);margin-top:30px;font-size:clamp(19px,2.8vw,27px);line-height:1.4;max-width:24ch}
.eyebrow{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--bone-faint);margin-bottom:14px}

/* ---------- sections / continuous scroll ---------- */
.section{padding:34px 0 0}
/* ---------- heap header: a centered statement, not a justified column ---------- */
.krista-scroll{max-width:860px;margin:26px auto 8px}
.krista-track{overflow-x:auto;overflow-y:hidden;cursor:grab;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%)}
.krista-track::-webkit-scrollbar{height:6px}
.krista-track::-webkit-scrollbar-track{background:transparent}
.krista-track::-webkit-scrollbar-thumb{background:var(--tan-deep);border-radius:4px;opacity:.5}
.krista-track img{display:block;height:330px;width:auto;max-width:none;pointer-events:none;user-select:none}
.krista-track.grabbing{cursor:grabbing}
.krista-track:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
.krista-hint{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.18em;
    color:var(--tan-deep);text-align:center;margin-top:6px}
.krista-scroll figcaption{font-family:'Courier New',monospace;font-size:10.5px;letter-spacing:.14em;
    color:var(--tan-deep);text-align:right;margin-top:2px}
@media(max-width:640px){.krista-track img{height:240px}}
.krista-track{cursor:zoom-in}
.krista-track.grabbing{cursor:grabbing}
/* full-screen lightbox for viewing a trace (Krista's art, and any image trace) */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(8,7,5,.96);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .3s ease}
.lightbox.show{opacity:1;visibility:visible}
.lb-close{position:absolute;top:18px;right:24px;background:none;border:none;color:var(--bone-dim);
    font-size:34px;line-height:1;cursor:pointer;z-index:2;font-family:'Courier New',monospace}
.lb-close:hover{color:var(--tan)}
.lb-stage{width:100%;max-width:97vw;overflow-x:auto;overflow-y:hidden;cursor:grab;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%)}
.lb-stage.grabbing{cursor:grabbing}
.lb-stage::-webkit-scrollbar{height:7px}
.lb-stage::-webkit-scrollbar-thumb{background:var(--tan-deep);border-radius:4px;opacity:.5}
.lb-stage img{display:block;height:min(78vh,600px);width:auto;max-width:none;margin:0 auto;user-select:none;pointer-events:none}
.lb-cap{margin-top:18px;font-family:'Courier New',monospace;font-size:11px;letter-spacing:.12em;color:var(--tan-deep);text-align:center;padding:0 20px}
.lb-inner{--lb-scale:1;max-width:900px;width:92vw;max-height:86vh;overflow-y:auto;padding:10px 6px;text-align:center}
.lb-controls{position:absolute;top:18px;left:24px;display:flex;gap:8px;align-items:center;z-index:2}
.lb-controls button{font-family:'Courier New',monospace;background:rgba(198,146,86,.12);color:var(--tan-soft);
    border:1px solid rgba(198,146,86,.5);border-radius:7px;padding:6px 12px;font-size:13px;cursor:pointer}
.lb-controls button:hover{background:rgba(198,146,86,.24);color:var(--bone)}
.lb-controls .lb-az{font-size:11px;letter-spacing:.1em;color:var(--bone-faint);margin-left:4px}
.lb-media{font-family:'Courier New',monospace;font-size:calc(13px*var(--lb-scale));letter-spacing:.14em;
    text-transform:uppercase;color:var(--tan);margin:0 0 calc(14px*var(--lb-scale))}
.lb-title{font-family:'Times New Roman',serif;font-weight:700;color:var(--bone);
    font-size:calc(40px*var(--lb-scale));line-height:1.15;margin:0 0 calc(18px*var(--lb-scale))}
.lb-meta{font-size:calc(21px*var(--lb-scale));line-height:1.6;color:var(--bone-dim);
    max-width:40ch;margin:0 auto calc(20px*var(--lb-scale))}
.lb-res{border-top:1px solid var(--line);margin-top:26px;padding-top:20px}
.lb-res .lb-res-h{font-family:'Courier New',monospace;font-size:calc(12px*var(--lb-scale));letter-spacing:.12em;
    text-transform:uppercase;color:var(--bone-faint);margin:0 0 14px}
.lb-res .lb-res-item{font-size:calc(17px*var(--lb-scale));color:var(--bone-dim);line-height:1.5;margin:0 0 10px}
.lb-res .lb-res-item b{color:var(--tan-soft);font-weight:400}
.lightbox.paper{background:#F3ECDD}
.lightbox.paper .lb-title{color:#241B12}
.lightbox.paper .lb-meta,.lightbox.paper .lb-res-item{color:#4A3E30}
.lightbox.paper .lb-media{color:#7A5223}
@media(max-width:640px){.lb-title{font-size:calc(30px*var(--lb-scale))}.lb-meta{font-size:calc(18px*var(--lb-scale))}}
.heap-header{text-align:center;max-width:640px;margin:0 auto 30px}
.heap-header .prompt-lead{max-width:640px;margin:22px auto 0}
.prompt-alts{max-width:1040px;margin:26px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left}
.prompt-alts .alt{font-size:14px;color:var(--bone-faint);font-style:italic;line-height:1.6;
    border-top:1px solid var(--line);padding-top:14px}
@media(max-width:820px){.prompt-alts{grid-template-columns:1fr;max-width:600px;gap:16px}}
.heap-header .section-eyebrow,.heap-header .season-line{text-align:center}
.heap-h2{font-family:'Times New Roman',serif;font-weight:700;font-size:clamp(28px,4.6vw,44px);
    line-height:1.28;max-width:none;color:var(--bone);text-wrap:balance;margin:0 auto}
.heap-question{font-family:'Times New Roman',serif;font-size:clamp(23px,3vw,32px);line-height:1.32;
    color:var(--bone);margin:0 0 10px;font-style:italic}
.heap-question-sub{margin:0 0 22px}
.heap-header .prompt{max-width:56ch;margin:22px auto 0;text-align:left}
.prompt{margin-top:22px;color:var(--bone-dim);max-width:54ch;font-size:16px}
.prompt .alt{display:block;margin-top:10px;font-size:14px;color:var(--bone-faint);font-style:italic}
.section-eyebrow{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--bone-faint);margin-bottom:12px}

/* ---------- add to the heap ---------- */
.contribute-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;position:relative}
.heap-mini{position:relative;width:400px;height:330px;margin-left:auto;flex:0 0 auto}
.heap-mini .hm{position:absolute;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));animation:emblemFloat 8s ease-in-out infinite}
.heap-mini .hm1{width:216px;left:52px;top:30px;--wc-rot:-8deg;z-index:2}        /* blue fly — large anchor, centered in the space */
.heap-mini .hm2{width:122px;left:74px;top:198px;--wc-rot:5deg;z-index:3;animation-delay:.6s}  /* amanita/mushroom — bigger, low & toward the text */
.heap-mini .hm3{width:124px;left:276px;top:4px;--wc-rot:10deg;z-index:1;opacity:.92;animation-delay:1.1s}  /* green jellies — drifting past the fly, not touching */
.heap-mini .hm5{width:134px;left:258px;top:190px;--wc-rot:9deg;z-index:1;opacity:.85;animation-delay:.9s}    /* blue comb jelly — floating free in the open space */
@media(max-width:900px){.heap-mini{display:none}}
.add-trace{display:inline-flex;align-items:center;gap:10px;background:var(--tan);color:var(--soil);
    border:none;border-radius:8px;padding:14px 24px;font-family:'Times New Roman',serif;font-weight:700;
    font-size:17px;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .3s ease;
    box-shadow:0 0 0 rgba(198,146,86,0)}
.add-trace:hover{background:var(--tan-soft);transform:translateY(-1px);box-shadow:0 6px 22px rgba(198,146,86,0.16)}
.add-trace .at-plus{font-size:21px;line-height:1;font-weight:400;margin-top:-2px}
.contribute-hint{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.03em;color:var(--bone-faint);
    max-width:42ch;line-height:1.5;font-style:normal}
.heap-ethos{margin-top:30px;max-width:62ch;border-top:1px solid var(--line);padding-top:22px}
.heap-ethos p{font-family:Georgia,serif;font-size:16px;line-height:1.62;color:var(--bone-dim);margin:0 0 12px;text-wrap:pretty}
.heap-ethos p:last-child{margin-bottom:0}
.heap-ethos p:first-child{font-size:17.5px;color:var(--bone)}
.heap-lead{margin-bottom:0 !important}
.heap-more-btn{background:none;border:none;cursor:pointer;color:var(--tan);
    font-family:'Courier New',monospace;font-size:12px;letter-spacing:.05em;padding:0 0 1px;
    border-bottom:1px solid var(--tan-deep);transition:color .2s ease}
.heap-more-btn:hover{color:var(--tan-soft)}
.heap-more{max-height:0;overflow:hidden;opacity:0;
    transition:max-height .6s ease,opacity .5s ease,margin-top .4s ease;margin-top:0}
.heap-ethos.reveal .heap-more{max-height:420px;opacity:1;margin-top:12px}
.heap-ethos.reveal .heap-more-btn{opacity:0;pointer-events:none}
body.mo-reduced .heap-more,body.energy-low .heap-more{transition:none}

/* contribute panel */
.contribute-overlay{position:fixed;inset:0;z-index:70;background:rgba(10,9,7,0.6);opacity:0;visibility:hidden;
    transition:opacity .35s ease,visibility .35s ease}
.contribute-overlay.show{opacity:1;visibility:visible}
.contribute-panel{position:fixed;top:0;right:0;z-index:72;height:100%;width:480px;max-width:94vw;
    background:#1F1B15;border-left:1px solid var(--line);padding:64px 36px 48px;overflow-y:auto;
    transform:translateX(102%);transition:transform .42s cubic-bezier(.22,.61,.36,1);box-shadow:-20px 0 50px rgba(0,0,0,.4)}
.contribute-panel.open{transform:translateX(0)}
.cp-close{position:absolute;top:22px;right:24px;background:none;border:none;color:var(--bone-faint);
    font-family:'Courier New',monospace;font-size:18px;cursor:pointer}
.cp-close:hover{color:var(--tan)}
.cp-eyebrow{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);margin-bottom:10px}
.cp-title{font-family:'Times New Roman',serif;font-weight:700;font-size:28px;margin-bottom:12px}
.cp-intro{font-size:15px;color:var(--bone-dim);margin-bottom:24px;line-height:1.55}
.contribute-panel label,.cp-spherelabel{display:block;font-family:'Courier New',monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--tan);margin:18px 0 8px}
.cp-optional{color:var(--bone-faint);text-transform:none;letter-spacing:0;font-style:italic}
.contribute-panel input,.contribute-panel textarea,.contribute-panel select{width:100%;background:var(--soil);
    border:1px solid var(--line);border-radius:5px;padding:12px 13px;color:var(--bone);font-family:Georgia,serif;
    font-size:15px;outline:none;transition:border-color .2s ease}
.contribute-panel input:focus,.contribute-panel textarea:focus,.contribute-panel select:focus{border-color:var(--tan)}
.contribute-panel textarea{min-height:120px;resize:vertical;line-height:1.5}
.cp-spheres{display:flex;flex-wrap:wrap;gap:8px}
.cp-sphere{background:var(--soil);border:1px solid var(--line);border-radius:20px;padding:7px 14px;
    color:var(--bone-dim);font-family:'Courier New',monospace;font-size:11px;cursor:pointer;transition:all .2s ease}
.cp-sphere:hover{border-color:var(--tan-deep);color:var(--tan)}
.cp-sphere.on{background:var(--warm);border-color:var(--tan);color:var(--tan-soft)}
.cp-send{margin-top:24px;width:100%;background:var(--tan);color:var(--soil);border:none;border-radius:6px;
    padding:14px;font-family:'Times New Roman',serif;font-weight:700;font-size:16px;cursor:pointer;transition:background .2s ease}
.cp-send:hover{background:var(--tan-soft)}
.cp-note{font-size:12px;color:var(--bone-faint);font-style:italic;margin-top:16px;line-height:1.6}
.cp-thanks{margin-top:22px;border-top:1px solid var(--line);padding-top:22px}
.cp-mark{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);margin-bottom:10px}
.cp-thanks p:last-child{font-size:15px;color:var(--bone);font-style:italic;line-height:1.55}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;margin:36px 0 8px;
    padding-top:26px;border-top:1px solid var(--line)}
.ctl-group{display:flex;flex-direction:column;gap:9px}
.ctl-label{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--bone-faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.chip{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.04em;color:var(--bone-dim);
    background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;
    transition:all .25s ease;
    /* faint steady luminescence, a soft tan glow, always on */
    box-shadow:0 0 8px rgba(198,146,86,0.10), inset 0 0 5px rgba(198,146,86,0.05);
    text-shadow:0 0 5px rgba(198,146,86,0.18);
    border-color:rgba(198,146,86,0.22)}
.chip:hover{border-color:var(--tan-deep);color:var(--bone);
    box-shadow:0 0 13px rgba(198,146,86,0.20), inset 0 0 7px rgba(198,146,86,0.07)}
.chip[aria-pressed="true"]{border-color:var(--tan);color:var(--soil);background:var(--tan);
    box-shadow:0 0 16px rgba(198,146,86,0.30);text-shadow:none}
/* at rest, each sphere already hints its color; pressed fills it in */
.chip[data-sphere="atmosphere"]{color:oklch(72% .05 230);border-color:oklch(40% .05 230)}
.chip[data-sphere="hydrosphere"]{color:oklch(72% .05 250);border-color:oklch(40% .05 250)}
.chip[data-sphere="lithosphere"]{color:oklch(72% .05 40);border-color:oklch(40% .05 40)}
.chip[data-sphere="biosphere"]{color:oklch(72% .05 140);border-color:oklch(40% .05 140)}
.chip[data-sphere="atmosphere"][aria-pressed="true"]{border-color:oklch(45% .06 230);background:oklch(78% .07 230);color:var(--soil)}
.chip[data-sphere="hydrosphere"][aria-pressed="true"]{border-color:oklch(45% .06 250);background:oklch(78% .07 250);color:var(--soil)}
.chip[data-sphere="lithosphere"][aria-pressed="true"]{border-color:oklch(45% .06 40);background:oklch(78% .07 40);color:var(--soil)}
.chip[data-sphere="biosphere"][aria-pressed="true"]{border-color:oklch(45% .06 140);background:oklch(78% .07 140);color:var(--soil)}
/* metamorphosphere: a still, metallic shimmer — a butterfly-wing gradient, no motion */
.chip[data-sphere="metamorphosphere"]{color:#C3B2E8;border:1px solid transparent;
    background:linear-gradient(var(--soil),var(--soil)) padding-box,
    linear-gradient(135deg,#7FB0D6,#C3B2E8,#E3B98A,#7FB0D6) border-box;
    box-shadow:0 0 10px rgba(195,178,232,.18)}
.chip[data-sphere="metamorphosphere"][aria-pressed="true"]{color:#1A1410;border-color:transparent;
    background:linear-gradient(135deg,#7FB0D6,#C3B2E8,#E3B98A,#7FB0D6);
    box-shadow:0 0 18px rgba(195,178,232,.35);text-shadow:none}
.chip[data-sphere="atmosphere"][aria-pressed="true"]{border-color:oklch(45% .06 230);background:oklch(78% .07 230)}
.chip[data-sphere="hydrosphere"][aria-pressed="true"]{border-color:oklch(45% .06 250);background:oklch(78% .07 250)}
.chip[data-sphere="lithosphere"][aria-pressed="true"]{border-color:oklch(45% .06 40);background:oklch(78% .07 40)}
.chip[data-sphere="biosphere"][aria-pressed="true"]{border-color:oklch(45% .06 140);background:oklch(78% .07 140)}
.chip[data-sphere="metamorphosphere"][aria-pressed="true"]{border-color:oklch(45% .06 340);background:oklch(78% .07 340)}
.chip:focus-visible{outline:2px solid var(--tan);outline-offset:2px}
/* sphere definition tooltip on hover / focus */
.chip{position:relative}
.chip::after{content:attr(data-def);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);
    width:236px;max-width:70vw;background:#211C15;border:1px solid var(--tan-deep);border-radius:8px;
    padding:10px 13px;font-family:Georgia,serif;font-size:12.5px;line-height:1.5;letter-spacing:0;
    text-transform:none;color:var(--bone);text-align:left;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:40;
    box-shadow:0 10px 30px rgba(0,0,0,.45)}
.chip:hover::after,.chip:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.chip[aria-pressed="true"]::after{color:var(--bone)}
body.energy-low .chip::after,body.mo-reduced .chip::after{transition:none}
@media(max-width:640px){.chip::after{width:200px}}
.views{display:flex;gap:6px}
.vbtn{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.06em;color:var(--bone-dim);
    background:transparent;border:1px solid var(--line);padding:6px 13px;cursor:pointer;border-radius:3px;
    transition:all .25s ease}
.vbtn:hover{border-color:var(--tan-deep);color:var(--bone)}
.vbtn[aria-pressed="true"]{border-color:var(--tan);color:var(--tan)}
.vbtn:focus-visible{outline:2px solid var(--tan);outline-offset:2px}
.hint{font-family:'Courier New',monospace;font-size:11px;color:var(--bone-faint);
    letter-spacing:.06em;margin-top:16px}
.hint b{color:var(--tan)}

/* ---------- field: an editorial collage, not a justified grid ---------- */
.field{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:26px 28px;align-items:start;margin-top:16px}
@media(max-width:820px){.field{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.field{grid-template-columns:1fr}.card--wide{grid-column:span 1 !important}.card--offset{margin-top:0 !important}}
.field.aslist{display:block}
.field.aslist .card{grid-column:auto;margin-top:0 !important}

.card{
    display:block;width:100%;text-align:left;
    background:transparent;border:none;border-radius:0;
    padding:15px 16px 14px;margin:0;cursor:pointer;position:relative;color:var(--bone);
    font-family:inherit;
    transition:background .35s ease,box-shadow .35s ease,opacity .3s ease;
}
.card:hover,.card:focus-visible{background:var(--soil-2);outline:none}
.card:focus-visible{box-shadow:0 0 0 2px var(--tan)}
/* loud: has its own weight — a torn sheet laid on the heap, not a boxed panel */
.card--loud{background:var(--soil-raised);padding:22px 20px 20px}
.card--loud::before,.card--loud::after{content:"";position:absolute;left:0;right:0;height:9px;
    background:var(--soil-raised);pointer-events:none;}
.card--loud::before{top:-8px}
.card--loud::after{bottom:-8px;transform:scaleY(-1)}
.card--loud:hover::before,.card--loud:hover::after,.card--loud:focus-visible::before,.card--loud:focus-visible::after{background:var(--soil-2)}
.card--wide{grid-column:span 2}
.card--wide .thumb{aspect-ratio:21/9}
.card--offset{margin-top:44px}
/* quiet: no box at all — a pull-quote breathing between the loud cards */
.card--quiet{padding:8px 4px 24px}
.card--quiet .ttl{font-family:'Times New Roman',serif;font-weight:700;font-size:23px;line-height:1.32;margin-bottom:12px}
/* a woken trace: warms / highlights in place, no movement */
.card.resonant{background:var(--soil-raised);box-shadow:inset 0 0 0 1px rgba(198,146,86,0.22)}
.card.active{box-shadow:0 0 0 1px var(--tan)}
.card.dimmed{opacity:.24}
/* the pinned trace: Krista's art, the seed stone of the heap. It alone keeps
   its picture forever — every other trace sheds its media as it composts. */
.card--pinned{background:var(--soil-raised);box-shadow:inset 0 0 0 1px rgba(198,146,86,.34)}
.card--pinned .thumb-real{clip-path:none !important;aspect-ratio:auto;background:#0E0B07}
.card--pinned .thumb-real .krista-track img{display:block;height:220px;width:auto;max-width:none;max-height:none;object-fit:none;margin:0;pointer-events:none;user-select:none}
.stage-pill[data-st="pinned"]{color:var(--tan);border-color:var(--tan-deep)}

.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.card .media{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.04em;
    color:var(--bone-faint);text-transform:lowercase;white-space:nowrap}
.card .spheres{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
/* five spheres, five quiet earth hues — same low chroma/lightness family as tan, so it reads as one warm palette, not a rainbow */
.sph{font-family:'Courier New',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--tan);border:1px solid var(--tan-deep);border-radius:999px;padding:2px 7px;opacity:.9}
.sph.secondary{opacity:.6}
.sph[data-s="atmosphere"]{color:oklch(78% .07 230);border-color:oklch(45% .06 230)}
.sph[data-s="hydrosphere"]{color:oklch(78% .07 250);border-color:oklch(45% .06 250)}
.sph[data-s="lithosphere"]{color:oklch(78% .07 40);border-color:oklch(45% .06 40)}
.sph[data-s="biosphere"]{color:oklch(78% .07 140);border-color:oklch(45% .06 140)}
.sph[data-s="metamorphosphere"]{color:#C3B2E8;border:1px solid transparent;
    background:linear-gradient(var(--soil-raised),var(--soil-raised)) padding-box,
    linear-gradient(135deg,#7FB0D6,#C3B2E8,#E3B98A,#7FB0D6) border-box}
.card .ttl{font-size:17px;line-height:1.3;margin-bottom:9px}
.card .rel{font-family:'Courier New',monospace;font-size:10.5px;letter-spacing:.02em;color:var(--bone-faint)}
.card .rel b{color:var(--tan);font-weight:400}
.card .resp-to{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.02em;color:var(--bone-faint);
    margin-bottom:9px;line-height:1.5}
.card .resp-to a{color:var(--tan);text-decoration:none}
.card .resp-to a:hover{color:var(--tan-soft)}

/* the wake-tag: empty at rest, fills + brightens when this trace is woken */
/* reserved space so nothing reflows; only the chip fades + phosphoresces in */
.wake-tag{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;min-height:22px;
    opacity:0;transition:opacity .5s ease}
.card.resonant .wake-tag,.card.active .wake-tag{opacity:1}
/* the phosphorescing tag itself */
.card.resonant .rtag{animation:tagPhosphor 2.6s ease-in-out infinite}
@keyframes tagPhosphor{0%,100%{box-shadow:0 0 4px rgba(198,146,86,.25)}50%{box-shadow:0 0 12px rgba(224,187,131,.6),0 0 22px rgba(198,146,86,.3)}}
body.mo-reduced .card.resonant .rtag,body.energy-low .card.resonant .rtag{animation:none}
@media(prefers-reduced-motion:reduce){.card.resonant .rtag{animation:none}}
.rtag{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.03em;
    padding:3px 9px;border-radius:999px;border:1px solid var(--tan-deep);color:var(--tan)}
.rtag b{font-weight:400;color:var(--tan-soft)}
/* curated link, the precious, hand-drawn conversation, filled & distinct */
.rtag.curated{background:var(--tan);border-color:var(--tan);color:var(--soil)}
.rtag.curated b{color:var(--soil)}

/* ---------- resonance panel ---------- */
.resonance{margin-top:24px;border:1px solid var(--line);border-left:3px solid var(--tan);
    border-radius:6px;background:var(--soil-raised);
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .45s ease,opacity .35s ease,padding .45s ease;padding:0}
.resonance.open{max-height:720px;opacity:1;padding:22px 24px 26px}
.resonance h3{font-family:'Times New Roman',serif;font-weight:700;font-size:20px;margin-bottom:4px}
.resonance .wk{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--tan);margin-bottom:16px}
.res-item{display:grid;gap:3px;padding:11px 0;border-top:1px solid var(--line)}
.res-item .rphrase{font-family:'Courier New',monospace;font-size:10.5px;letter-spacing:.03em;color:var(--bone-faint)}
.res-item .rphrase b{color:var(--tan);font-weight:400}
.res-item .rphrase.curated{color:var(--tan-soft)}
.res-item .rname{font-size:15px;color:var(--bone)}
.res-close{float:right;font-family:'Courier New',monospace;font-size:11px;color:var(--bone-faint);
    background:none;border:none;cursor:pointer;letter-spacing:.1em}
.res-close:hover{color:var(--tan)}

/* ---------- continuous-scroll peek ---------- */
.peek{display:block;text-decoration:none;margin-top:60px;padding:46px 0 34px;position:relative;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, transparent, rgba(198,146,86,0.03));
    text-align:center}
.peek .pk-eyebrow{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--bone-faint)}
.peek .pk-title{font-family:'Times New Roman',serif;font-weight:700;
    font-size:clamp(26px,5vw,40px);color:var(--tan);margin:12px 0 8px;
    transition:color .3s ease}
.peek:hover .pk-title{color:var(--tan-soft)}
.peek .pk-line{color:var(--bone-dim);font-style:italic;max-width:46ch;margin:0 auto;font-size:16px}
.peek .chev{display:block;margin:22px auto 0;width:22px;height:22px;color:var(--tan-deep);
    animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}

/* ---------- why section ---------- */
.why{padding:24px 0 70px}
.why h2{font-family:'Times New Roman',serif;font-weight:700;font-size:clamp(28px,5vw,44px);
    margin-bottom:22px;line-height:1.15}
.why p{max-width:60ch;margin-bottom:18px;font-size:17px;color:var(--bone)}
.why p.lead{font-size:clamp(18px,2.4vw,22px);color:var(--bone);font-style:italic}
.why .small{color:var(--bone-dim);font-size:15px}

/* ---------- implementation pathway ---------- */
.path-section{border-top:1px solid var(--line);padding:54px 0 0;margin-top:20px}
.section-title{font-family:'Times New Roman',serif;font-weight:700;font-size:clamp(24px,4vw,34px);margin-bottom:8px}
.section-sub{color:var(--bone-dim);max-width:62ch;margin-bottom:36px;font-size:16px}
.pathway{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px}
@media(max-width:760px){.pathway{grid-template-columns:1fr}}
.phase{position:relative;padding:26px 22px 30px;border:1px solid var(--line);background:var(--soil-raised);
    transition:background .3s ease,border-color .3s ease}
.phase:not(:first-child){border-left:none}
@media(max-width:760px){.phase:not(:first-child){border-left:1px solid var(--line)}}
.phase:hover{background:var(--soil-2);border-color:var(--tan-deep)}
.phase .num{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.14em;color:var(--tan);margin-bottom:14px}
.phase h4{font-family:'Times New Roman',serif;font-weight:700;font-size:18px;margin-bottom:10px;line-height:1.25}
.phase p{font-size:13.5px;color:var(--bone-dim);line-height:1.6}
.phase .dot{position:absolute;top:-5px;left:26px;width:9px;height:9px;border-radius:50%;
    background:var(--soil);border:1.5px solid var(--tan)}
.phase .dot.filled{background:var(--tan)}
.maturation{height:1px;background:linear-gradient(90deg,var(--tan),var(--tan-deep));
    position:absolute;top:-1px;left:26px;right:26px;z-index:0}
@media(max-width:760px){.maturation{display:none}.phase .dot{display:none}}

.legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}
.legend span{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.06em;color:var(--bone-faint)}
.legend b{color:var(--tan);font-weight:400}
.sw{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:-1px;margin-right:6px;border:1px solid var(--line)}

footer{border-top:1px solid var(--line);padding:34px 0 80px;color:var(--bone-faint);
    font-family:'Courier New',monospace;font-size:11px;letter-spacing:.05em;line-height:2;margin-top:46px}
footer b{color:var(--tan-deep);font-weight:400}

/* ---------- top-right nav cluster ---------- */
.topnav{position:fixed;top:18px;right:18px;z-index:50;display:flex;align-items:center;gap:10px}
.nav-cta{display:inline-flex;align-items:center;gap:8px;height:42px;
    background:rgba(198,146,86,.12);color:var(--tan-soft);
    border:1px solid rgba(198,146,86,.5);border-radius:8px;padding:0 18px;font-family:'Times New Roman',serif;font-weight:700;
    font-size:14px;cursor:pointer;white-space:nowrap;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    transition:background .25s ease,transform .2s ease,box-shadow .3s ease,color .25s ease;
    animation:ctaPulse 3.4s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 8px 1px rgba(198,146,86,.18)}
    50%{box-shadow:0 0 18px 4px rgba(224,187,131,.42)}}
.nav-cta:hover{background:rgba(198,146,86,.24);color:var(--bone);transform:translateY(-1px);
    box-shadow:0 0 20px 4px rgba(224,187,131,.5)}
.nav-cta:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.nav-cta .at-plus{font-size:18px;line-height:1;font-weight:400;margin-top:-2px}
@media(max-width:520px){.nav-cta span.cta-label{display:none}.nav-cta{padding:0 12px}}
.nav-icon{width:42px;height:42px;border-radius:8px;background:rgba(34,30,24,0.7);
    backdrop-filter:blur(6px);border:1px solid var(--line);cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--bone-dim);
    transition:all .22s ease}
.nav-icon:hover{border-color:var(--tan-deep);color:var(--tan);background:var(--soil-2)}
.nav-icon:focus-visible{outline:2px solid var(--tan);outline-offset:2px}
.nav-icon svg{width:21px;height:21px}
/* the menu button phosphoresces in bone-white, drawing the eye to the whole program */
#menuBtn{color:var(--bone);border-color:var(--tan-soft);animation:menuGlow 3.6s ease-in-out infinite}
#menuBtn svg{filter:drop-shadow(0 0 5px rgba(240,234,223,.9)) drop-shadow(0 0 11px rgba(224,187,131,.55))}
#menuBtn:hover{color:#fff;border-color:#fff;background:var(--soil-2)}
@keyframes menuGlow{0%,100%{box-shadow:0 0 9px rgba(240,234,223,.18);border-color:var(--tan-deep)}
    50%{box-shadow:0 0 24px 4px rgba(240,234,223,.5),0 0 40px 8px rgba(224,187,131,.25);border-color:#fff}}
/* the thread that grows from the hero poem toward the menu */
body.mo-reduced #menuBtn,body.energy-low #menuBtn{animation:none}
/* overlay shared by menu/search/login */
.overlay{position:fixed;inset:0;z-index:54;background:rgba(10,9,7,0.55);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.overlay.show{opacity:1;visibility:visible}

/* menu drawer (from right) */
.menu-drawer{position:fixed;top:0;right:0;z-index:56;height:100%;width:360px;max-width:90vw;
    background:#1F1B15;border-left:1px solid var(--line);padding:80px 0 40px;
    transform:translateX(102%);transition:transform .42s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
.menu-drawer.open{transform:translateX(0)}
.menu-drawer .panel-close{position:absolute;top:22px;right:22px;background:none;border:none;
    color:var(--bone-faint);cursor:pointer;font-family:'Courier New',monospace;font-size:18px}
.menu-drawer .panel-close:hover{color:var(--tan)}
.menu-eyebrow{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--bone-faint);padding:0 32px;margin-bottom:14px}
.menu-drawer a{display:block;text-decoration:none;color:var(--bone);padding:13px 32px;
    font-family:'Times New Roman',serif;font-size:21px;border-left:2px solid transparent;
    transition:all .2s ease}
.menu-drawer a:hover{background:var(--soil-2);border-left-color:var(--tan);color:var(--tan-soft);padding-left:38px}
.menu-drawer a .sub{display:block;font-family:'Courier New',monospace;font-size:10px;letter-spacing:.06em;
    color:var(--bone-faint);margin-top:3px;text-transform:lowercase}

/* search panel (drops from top) */
.search-panel{position:fixed;top:0;left:0;right:0;z-index:56;background:#1F1B15;
    border-bottom:1px solid var(--tan-deep);padding:30px 0 26px;
    transform:translateY(-102%);transition:transform .4s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 20px 50px rgba(0,0,0,.4)}
.search-panel.open{transform:translateY(0)}
.search-inner{max-width:680px;margin:0 auto;padding:0 28px}
.search-panel .panel-close{position:absolute;top:18px;right:22px;background:none;border:none;
    color:var(--bone-faint);cursor:pointer;font-family:'Courier New',monospace;font-size:18px}
.search-panel .panel-close:hover{color:var(--tan)}
.search-label{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--tan);margin-bottom:12px;display:block}
.search-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--tan-deep);padding-bottom:10px}
.search-row svg{width:20px;height:20px;color:var(--tan);flex-shrink:0}
#searchInput{flex:1;background:none;border:none;outline:none;color:var(--bone);
    font-family:Georgia,serif;font-size:21px}
#searchInput::placeholder{color:var(--bone-faint);font-style:italic}
.search-hint{font-size:13px;color:var(--bone-dim);margin-top:14px;font-style:italic}
.search-terms{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.search-terms button{font-family:'Courier New',monospace;font-size:11px;color:var(--bone-dim);
    background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;
    transition:all .2s ease}
.search-terms button:hover{border-color:var(--tan);color:var(--tan)}

/* login panel (from right) */
.login-drawer{position:fixed;top:0;right:0;z-index:56;height:100%;width:360px;max-width:90vw;
    background:#1F1B15;border-left:1px solid var(--line);padding:72px 32px 40px;
    transform:translateX(102%);transition:transform .42s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
.login-drawer.open{transform:translateX(0)}
.login-drawer .panel-close{position:absolute;top:22px;right:22px;background:none;border:none;
    color:var(--bone-faint);cursor:pointer;font-family:'Courier New',monospace;font-size:18px}
.login-drawer .panel-close:hover{color:var(--tan)}
.login-drawer h2{font-family:'Times New Roman',serif;font-weight:700;font-size:23px;margin-bottom:4px}
.login-drawer .sub{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--bone-faint);margin-bottom:26px}
.login-drawer label{display:block;font-family:'Courier New',monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--tan);margin:16px 0 7px}
.login-drawer input{width:100%;background:var(--soil);border:1px solid var(--line);border-radius:5px;
    padding:11px 13px;color:var(--bone);font-family:Georgia,serif;font-size:15px;outline:none;transition:border-color .2s ease}
.login-drawer input:focus{border-color:var(--tan)}
.login-btn{width:100%;margin-top:24px;background:var(--tan);color:var(--soil);border:none;border-radius:5px;
    padding:13px;font-family:'Times New Roman',serif;font-weight:700;font-size:16px;cursor:pointer;
    transition:background .2s ease}
.login-btn:hover{background:var(--tan-soft)}
.login-toggle{margin-top:18px;text-align:center;font-size:13px;color:var(--bone-dim)}
.login-toggle button{background:none;border:none;color:var(--tan);cursor:pointer;font-size:13px;
    text-decoration:underline;text-underline-offset:2px;font-family:Georgia,serif}
.login-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
    font-size:11px;color:var(--bone-faint);line-height:1.6;font-style:italic}

/* ---------- accessibility panel ---------- */
.a11y-btn{
    position:fixed;bottom:20px;right:20px;z-index:50;width:46px;height:46px;border-radius:50%;
    background:var(--soil-raised);border:1px solid var(--tan-deep);cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--tan);
    transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.a11y-btn:hover{background:var(--soil-2);border-color:var(--tan);transform:scale(1.05)}
.a11y-btn:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
.a11y-btn svg{width:24px;height:24px}

.a11y-panel{
    position:fixed;top:0;right:0;z-index:55;height:100%;width:330px;max-width:88vw;
    background:#1F1B15;border-left:1px solid var(--line);
    transform:translateX(102%);transition:transform .4s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto;padding:26px 24px 60px;box-shadow:-20px 0 50px rgba(0,0,0,.4);
}
.a11y-panel.open{transform:translateX(0)}
.a11y-panel h2{font-family:'Times New Roman',serif;font-weight:700;font-size:22px;margin-bottom:2px}
.a11y-panel .sub{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--bone-faint);margin-bottom:24px}
.a11y-close{position:absolute;top:22px;right:20px;background:none;border:none;color:var(--bone-faint);
    cursor:pointer;font-family:'Courier New',monospace;font-size:18px;line-height:1}
.a11y-close:hover{color:var(--tan)}
.a11y-group{margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.a11y-group:last-child{border-bottom:none}
.a11y-label{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--tan);margin-bottom:12px;display:block}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button,.lang button{
    font-family:'Courier New',monospace;font-size:12px;letter-spacing:.03em;color:var(--bone-dim);
    background:transparent;border:1px solid var(--line);border-radius:4px;padding:8px 12px;cursor:pointer;
    transition:all .2s ease;flex:1;min-width:60px;text-align:center;
}
.seg button:hover,.lang button:hover{border-color:var(--tan-deep);color:var(--bone)}
.seg button[aria-pressed="true"],.lang button[aria-pressed="true"]{
    border-color:var(--tan);color:var(--soil);background:var(--tan)}
.seg button:focus-visible,.lang button:focus-visible{outline:2px solid var(--tan);outline-offset:2px}
.lang{display:flex;flex-direction:column;gap:7px}
.lang button{flex:none;text-align:left;display:flex;justify-content:space-between;align-items:center}
.lang button .native{color:var(--bone-faint);font-size:11px}
.lang button[aria-pressed="true"] .native{color:var(--soil)}
.a11y-note{font-size:11.5px;color:var(--bone-faint);line-height:1.6;margin-top:4px;font-family:Georgia,serif}

/* reading guide bar */
#readingGuide{position:fixed;left:0;width:100%;height:40px;z-index:48;pointer-events:none;
    background:rgba(198,146,86,0.09);border-top:1px solid var(--tan-deep);border-bottom:1px solid var(--tan-deep);
    display:none}
body.guide-on #readingGuide{display:block}

/* body states the panel controls */
body.txt-large{font-size:118%}
body.txt-xlarge{font-size:134%}
/* dyslexia-friendly reading mode: system sans-serif (Verdana) + open spacing, zero font download */
body.reading-readable, body.reading-readable *:not(svg):not(path):not(circle):not(rect):not(line):not(polygon){font-family:Verdana,Geneva,Tahoma,sans-serif !important}
body.reading-readable p,body.reading-readable li,body.reading-readable .prompt,body.reading-readable .heap-ethos,body.reading-readable .rel,body.reading-readable blockquote{letter-spacing:.03em;word-spacing:.08em;line-height:1.8 !important}
body.reading-readable{letter-spacing:.02em}
body.contrast-high{--bone:#FFFFFF !important;--bone-dim:#E6DECF !important;--bone-faint:#C9BFAD !important;--soil:#0E0C09 !important;--soil-raised:#161310 !important}
/* warm bone: same palette family, flipped to a light paper ground with warm ink text */
body.bg-warm{--soil:#F3ECDD !important;--soil-raised:#E9DFC9 !important;--soil-2:#DED0B2 !important;--line:#D3C4A3 !important;
    --bone:#2B2013 !important;--bone-dim:#5C4C33 !important;--bone-faint:#7D6C4C !important;
    --tan:#B8802E !important;--tan-soft:#8F5E1E !important;--tan-deep:#D9A94F !important;--warm:rgba(184,128,46,0.14) !important}
body.contrast-high .card--loud{border:1px solid #4A4334}
body.contrast-high .card--quiet{border-bottom:1px solid #4A4334}
body.links-hl a:not(.peek),body.links-hl .chip,body.links-hl .vbtn{text-decoration:underline;text-underline-offset:3px}
/* resonance highlighting off */
body.res-off .card.resonant{background:var(--soil-raised) !important;border-color:var(--line) !important;box-shadow:none !important}
body.res-off .card.resonant .wake-tag{max-height:60px;opacity:1;margin-top:11px}

body.mo-reduced *{transition:none !important;animation:none !important}
body.mo-reduced .wordmark .swp{-webkit-text-fill-color:#FFFFFF !important;background:none !important;color:#FFFFFF !important}
body.mo-reduced .wordmark .verb{color:#FFFFFF !important;
    text-shadow:0 0 9px var(--tan)}

@media(prefers-reduced-motion:reduce){
    *{transition:none !important;scroll-behavior:auto;animation:none !important}
    .wordmark .swp{-webkit-text-fill-color:var(--bone);background:none;color:var(--bone)}
    .wordmark .verb{color:#FFFFFF;
        text-shadow:0 0 5px rgba(198,146,86,0.30),0 0 12px rgba(198,146,86,0.14)}
}

/* nested menu groups */
.nd-group{display:flex;flex-direction:column}
.nd-parent{background:none;border:none;cursor:pointer;text-align:left;width:100%;
    color:var(--bone);font-family:'Times New Roman',serif;font-size:21px;padding:13px 32px;
    border-left:2px solid transparent;transition:all .2s ease;display:flex;align-items:center;justify-content:space-between}
.nd-parent:hover{background:var(--soil-2);border-left-color:var(--tan);color:var(--tan-soft);padding-left:38px}
.nd-caret{font-size:13px;color:var(--tan-deep);transition:transform .25s ease}
.nd-parent[aria-expanded="true"] .nd-caret{transform:rotate(90deg);color:var(--tan)}
.nd-children{max-height:0;overflow:hidden;transition:max-height .35s ease}
.nd-children.open{max-height:240px}
.nd-children a{font-size:17px;padding:11px 32px 11px 44px;color:var(--bone-dim)}
.nd-children a:hover{color:var(--tan-soft);padding-left:50px}
.nd-children a.current{color:var(--tan);border-left-color:var(--tan-deep)}
/* radial constellation menu */
#radialMenu{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 120% at 50% 44%, rgba(20,18,14,.90), rgba(12,11,8,.975));
    opacity:0;transition:opacity .4s ease}
#radialMenu.open{opacity:1}
#radialMenu[hidden]{display:none}
.rad-field{position:relative;width:600px;height:600px;transform:scale(1.42);transform-origin:center}
@media(max-width:640px){.rad-field{transform:scale(.6)}
    .rad-ic{width:88px;height:88px}
    .rad-label{font-size:14px}
    .rad-item{width:120px}}
@media(max-width:420px){.rad-field{transform:scale(.5)}
    .rad-ic{width:80px;height:80px}}
@media(max-height:820px){.rad-field{transform:scale(1.05)}}
@media(max-height:640px){.rad-field{transform:scale(.8)}}
.rad-threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rad-threads path.myco{fill:none;stroke:#FCFAF4;stroke-width:2.2;stroke-linecap:round;
    opacity:.95;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 5px rgba(252,250,244,1)) drop-shadow(0 0 12px rgba(255,240,205,.8)) drop-shadow(0 0 26px rgba(224,187,131,.5))}
.rad-threads path.myco.branch{stroke-width:0.8;opacity:.5;filter:drop-shadow(0 0 4px rgba(240,234,223,.7))}
.rad-threads path.myco.tendril{stroke-width:.85;opacity:.6;filter:drop-shadow(0 0 6px rgba(252,250,244,.9)) drop-shadow(0 0 11px rgba(224,187,131,.5))}
.rad-threads path.myco.tendril.fine{stroke-width:.6;opacity:.46;filter:drop-shadow(0 0 5px rgba(240,234,223,.8))}
/* faint words drifting in below the colony */
.rad-bgword{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
    font-family:'Times New Roman',serif;font-style:italic;font-size:clamp(24px,3.4vw,40px);white-space:nowrap;
    color:var(--tan-soft);opacity:0;letter-spacing:.02em;
    animation:bgwordDrift 9s ease-in-out 1.2s infinite}
@keyframes bgwordDrift{
    0%{opacity:0;transform:translate(-50%,-46%)}
    35%{opacity:.22}
    50%{opacity:.24;transform:translate(-50%,-52%)}
    65%{opacity:.22}
    100%{opacity:0;transform:translate(-50%,-56%)}}
body.mo-reduced .rad-bgword,body.energy-low .rad-bgword{animation:none;opacity:.16;transform:translate(-50%,-50%)}
.rad-seed{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;
    transform:translate(-50%,-50%);background:var(--tan);box-shadow:0 0 16px 4px var(--warm)}
.rad-item{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;
    width:170px;text-align:center;text-decoration:none;
    transform:translate(-50%,-50%) scale(.2);opacity:0;
    transition:transform .55s cubic-bezier(.2,.85,.25,1),opacity .4s ease;
    transition-delay:calc(var(--i)*55ms)}
#radialMenu.open .rad-item{transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1);opacity:1}
.rad-ic{width:130px;height:130px;background:var(--mic) center/cover no-repeat;--r:0deg;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)) drop-shadow(0 0 2px rgba(0,0,0,.4));transition:transform .35s ease;
    transform:rotate(var(--r));
    clip-path:polygon(10.6% 10.6%,20.9% 10.3%,29.7% 6.6%,43.5% 17.6%,52.6% 10.7%,63.8% 8.6%,74.1% 9.8%,85.3% 9.3%,88.9% 16.3%,91.5% 25.1%,88.7% 37.1%,91.4% 47.2%,89.1% 57.8%,88.1% 67.8%,88.0% 77.9%,94.9% 94.9%,84.2% 96.6%,72.7% 98.7%,58.7% 93.5%,47.0% 95.2%,36.5% 90.4%,27.1% 88.2%,19.5% 85.2%,8.4% 86.0%,9.9% 74.1%,4.5% 65.2%,8.0% 52.8%,0.6% 40.1%,11.3% 31.9%,17.0% 25.8%)}
.rad-item:nth-of-type(3n) .rad-ic{--r:-5deg;
    clip-path:polygon(7.0% 7.0%,15.2% 2.6%,32.3% 12.0%,42.4% 11.8%,53.0% 5.4%,61.0% 17.1%,76.2% 6.3%,80.2% 15.1%,86.2% 18.6%,84.9% 29.1%,83.8% 38.7%,95.8% 46.9%,91.8% 58.4%,87.4% 67.4%,87.8% 77.7%,94.8% 94.8%,81.0% 92.3%,67.3% 87.0%,56.5% 82.5%,47.4% 88.6%,38.1% 85.7%,29.8% 83.7%,18.4% 86.5%,7.6% 86.8%,13.2% 72.1%,6.7% 64.4%,10.1% 52.7%,17.8% 43.6%,11.2% 31.9%,15.1% 24.4%)}
.rad-item:nth-of-type(3n+1) .rad-ic{--r:4deg;
    clip-path:polygon(2.4% 2.4%,19.6% 8.6%,28.9% 4.8%,42.9% 14.3%,52.8% 8.5%,61.3% 16.0%,75.6% 7.4%,84.2% 10.5%,85.0% 19.7%,91.7% 25.0%,87.6% 37.5%,83.5% 47.8%,85.6% 57.1%,91.7% 69.4%,90.6% 79.8%,91.7% 91.7%,79.3% 90.0%,71.4% 95.8%,57.9% 89.4%,47.2% 91.7%,37.7% 86.9%,25.7% 90.4%,15.2% 90.2%,10.7% 84.1%,4.7% 77.2%,14.5% 61.8%,10.7% 52.6%,3.1% 40.6%,7.5% 30.2%,11.3% 21.6%)}
.rad-item:hover .rad-ic,.rad-item:focus-visible .rad-ic{transform:scale(1.14) rotate(calc(var(--r) - 3deg))}
.rad-label{font-family:'Times New Roman',serif;font-size:16px;color:var(--bone);line-height:1.15}
.rad-item:hover .rad-label,.rad-item:focus-visible .rad-label{color:var(--tan-soft)}
.rad-item:focus-visible{outline:2px solid var(--tan);outline-offset:6px;border-radius:14px}
/* the growing point, a faint glow behind Gatherings, where emphasis will gather in time */
.rad-item:nth-of-type(3)::before{content:"";position:absolute;top:50px;left:50%;
    width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;
    background:radial-gradient(circle,rgba(224,187,131,.34),rgba(224,187,131,.12) 45%,transparent 68%);
    animation:originPulse 5.5s ease-in-out infinite}
@keyframes originPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
body.mo-reduced .rad-item:nth-of-type(3)::before,body.energy-low .rad-item:nth-of-type(3)::before{animation:none;opacity:.7}
.rad-head{position:absolute;top:42px;left:0;width:100%;text-align:center;
    font-family:'Courier New',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
#radialMenu .panel-close{position:absolute;top:22px;right:26px;background:none;border:none;
    color:var(--bone-dim);font-size:26px;cursor:pointer;line-height:1}
#radialMenu .panel-close:hover{color:var(--tan)}

/* ============ DECOMPOSITION, every trace ages toward soil ============ */
.card{transition:background .35s ease,border-color .35s ease,transform .6s ease,box-shadow .35s ease,opacity .5s ease,filter .6s ease}
.card.stage-settling{opacity:.94}
.card.stage-softening{opacity:.82;filter:blur(.35px);transform:translateY(3px)}
.card.stage-softening .ttl{color:var(--bone-dim)}
.card.stage-humus{opacity:.62;filter:blur(.7px) saturate(.7);transform:translateY(6px) scale(.985)}
.card.stage-humus .ttl{color:var(--bone-faint);font-style:italic}
.card.stage-humus .rel{color:var(--tan-deep)}
.card:hover,.card:focus-visible{opacity:1 !important;filter:none !important;transform:none}

/* byline · non-human contributors · nutrient nourishment */
.byrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 9px}
.byline{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.04em;color:var(--bone-faint)}
.byline.nonhuman{color:var(--tan);border:1px solid var(--tan-deep);border-radius:999px;padding:1px 8px}
.nourish{font-family:'Courier New',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--tan-soft);background:var(--warm);border-radius:999px;padding:2px 8px}

/* carbon-weight meter on each trace, lightens as the trace composts */
.weight{display:inline-flex;gap:2px;align-items:center}
.weight i{width:5px;height:5px;border-radius:1px;background:var(--line);transition:background .4s ease}
.weight i.on{background:var(--tan-deep)}
.weight.shed{font-family:'Courier New',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--tan-deep)}
/* a media trace that has returned to soil: its asset is released, only words remain */
.media.shed-label{color:var(--tan-deep);border:1px dashed var(--tan-deep);background:transparent}
.residue{font-family:'Courier New',monospace;font-size:10.5px;line-height:1.5;color:var(--tan-deep);
    font-style:normal;margin:-2px 0 9px;letter-spacing:.01em}

/* respond controls in each card foot */
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;
    padding-top:10px;border-top:1px solid var(--line)}
.stage-pill{font-family:'Courier New',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint)}
/* the heap's own seasons, in color: green sprout → amber → rust → deep soil */
.stage-pill[data-st="fresh"]{color:oklch(78% .09 140)}
.stage-pill[data-st="settling"]{color:oklch(78% .09 80)}
.stage-pill[data-st="softening"]{color:oklch(74% .1 40)}
.stage-pill[data-st="humus"]{color:var(--tan-deep)}
.foot-acts{display:flex;align-items:center;gap:8px}
.ans{font-family:'Courier New',monospace;font-size:9.5px;letter-spacing:.04em;color:var(--tan);opacity:.9}
.resp-btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 9px;cursor:pointer;
    color:var(--bone-faint);font-family:'Courier New',monospace;font-size:10px;transition:all .2s ease}
.resp-btn:hover{border-color:var(--tan);color:var(--tan)}

/* wake-tag variants: a response thread, and a nutrient flow */
.rtag.response{background:var(--tan-soft);border-color:var(--tan-soft);color:var(--soil)}
.rtag.response b{color:var(--soil)}
.rtag.nutrient{border-style:dashed}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:80;
    background:#211C15;border:1px solid var(--tan-deep);color:var(--bone);border-radius:8px;
    padding:12px 20px;font-family:Georgia,serif;font-size:14px;max-width:90vw;text-align:center;
    opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
    box-shadow:0 10px 40px rgba(0,0,0,.4)}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* contribute: responding-to banner */
.cp-responding{background:var(--warm);border:1px solid var(--tan-deep);border-radius:6px;padding:10px 13px;
    font-family:'Courier New',monospace;font-size:12px;color:var(--tan-soft);margin-bottom:18px}
.cp-responding b{color:var(--bone)}

/* live carbon-weight readout under the trace-kind picker */
.cp-weight{display:flex;align-items:flex-start;gap:9px;margin:12px 0 4px;font-size:12.5px;line-height:1.5;color:var(--bone-dim)}
.cp-weight .cw-meter{display:inline-flex;gap:3px;flex:0 0 auto;margin-top:5px}
.cp-weight .cw-meter i{width:6px;height:6px;border-radius:1px;background:var(--line)}
.cp-weight .cw-meter i.on{background:var(--tan)}
.cp-weight b{color:var(--tan-soft);font-weight:400}

/* season + time-of-day line in the masthead */
.season-line{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--bone-faint);margin-top:14px}
.season-line b{color:var(--tan);font-weight:400}

/* ============ THE CIRCLE + GATHERINGS ============ */
.circle-section,.gather-section,.leave-section{border-top:1px solid var(--line);padding:54px 0 0;margin-top:20px}
.circle-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:40px;margin-top:14px}
@media(max-width:760px){.circle-grid{grid-template-columns:1fr;gap:30px}}
/* what-to-leave weight ladder */
.weight-ladder{list-style:none;margin:26px 0 0;max-width:74ch;display:flex;flex-direction:column;gap:2px}
.wl{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.wl:first-child{border-top:none}
.wl-meter{display:inline-flex;gap:3px;margin-top:6px}
.wl-meter i{width:7px;height:7px;border-radius:1px;background:var(--line)}
.wl-meter i.on{background:var(--tan)}
.wl-meter i.no{background:transparent;border:1px solid var(--tan-deep);opacity:.5}
.wl-name{display:block;font-family:'Times New Roman',serif;font-size:18px;color:var(--bone);margin-bottom:4px}
.wl-note{display:block;font-size:14px;line-height:1.6;color:var(--bone-dim);text-wrap:pretty}
.wl-no .wl-name{color:var(--bone-faint)}
.leave-coda{margin:30px 0 0;font-size:15.5px;line-height:1.65;color:var(--bone-dim);max-width:70ch;text-wrap:pretty}
.leave-coda b{color:var(--tan-soft);font-weight:400}
.leave-more{display:inline-block;margin-top:6px;color:var(--tan);text-decoration:none;
    border-bottom:1px solid var(--tan-deep);padding-bottom:1px;font-size:14.5px}
.leave-more:hover{color:var(--tan-soft)}
.log-eyebrow{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan);margin-bottom:18px}
.steward{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.steward:first-of-type{border-top:none}
.st-mark{color:var(--tan);font-size:9px;line-height:2}
.st-name{font-family:'Times New Roman',serif;font-size:17px;color:var(--bone)}
.st-role{font-family:'Courier New',monospace;font-size:10.5px;color:var(--bone-faint);letter-spacing:.02em;margin-top:2px}
.steward-note{font-size:13px;color:var(--bone-dim);line-height:1.6;margin-top:18px;font-style:italic;max-width:42ch}
.heaplog-list{list-style:none}
.log-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.log-item:first-child{border-top:none}
.log-when{font-family:'Courier New',monospace;font-size:10px;color:var(--bone-faint);letter-spacing:.04em;white-space:nowrap}
.log-what{color:var(--bone);font-size:15px}
.log-what .lw-by{font-family:'Courier New',monospace;font-size:10px;color:var(--bone-faint);margin-left:7px}
.log-stage{font-family:'Courier New',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--tan-deep);white-space:nowrap}
.gather-strand{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:14px}
@media(max-width:680px){.gather-strand{grid-template-columns:1fr}}
.gather-card{border:1px solid var(--line);border-left:3px solid var(--tan-deep);border-radius:6px;background:var(--soil-raised);padding:18px 20px}
.gather-name{font-family:'Times New Roman',serif;font-weight:700;font-size:18px;color:var(--bone);margin-bottom:3px}
.gather-meta{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.06em;color:var(--tan);text-transform:uppercase;margin-bottom:12px}
.gather-traces{list-style:none;display:flex;flex-direction:column;gap:7px}
.gather-traces li{font-size:14px;color:var(--bone-dim)}
.gather-traces .gt-by{font-family:'Courier New',monospace;font-size:10px;color:var(--bone-faint);margin-left:6px}
.gather-link{display:inline-block;margin-top:26px;font-family:'Courier New',monospace;font-size:12px;letter-spacing:.06em;
    color:var(--tan);text-decoration:none;border-bottom:1px solid var(--tan-deep);padding-bottom:2px}
.gather-link:hover{color:var(--tan-soft)}

/* ============ SOIL MODE (low energy / low carbon) ============ */
body.energy-low *{animation:none !important;transition:none !important}
body.energy-low .chip{box-shadow:none !important;text-shadow:none !important}

/* slow ambient breathing carried from the hero down the whole page (killed in soil/reduced mode) */
@keyframes soilDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-1.4%,1.4%,0)}}
@keyframes heroBreath{0%,100%{transform:translateY(2%) scale(1)}50%{transform:translateY(1.2%) scale(1.015)}}
/* the flower at the end sways and opens, as if catching air */
@keyframes flowerSway{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-1.5%)}}
@keyframes bloomGlow{0%,100%{opacity:0}50%{opacity:.55}}

/* ---- what the three ways of looking mean, where the choice is made ---- */
.vbtn{position:relative}
.vbtn::after{content:attr(data-def);position:absolute;left:50%;bottom:calc(100% + 11px);
    transform:translateX(-50%) translateY(4px);width:max-content;max-width:250px;
    background:var(--soil-raised);border:1px solid var(--tan-deep);border-radius:5px;
    padding:9px 12px;font-family:Georgia,serif;font-style:italic;font-size:13px;line-height:1.45;
    color:var(--bone);text-align:left;text-decoration:none;letter-spacing:0;
    box-shadow:0 10px 26px -10px rgba(0,0,0,.8);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:40}
.vbtn::before{content:"";position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
    border:5px solid transparent;border-top-color:var(--tan-deep);opacity:0;transition:opacity .22s ease;z-index:41}
.vbtn:hover::after,.vbtn:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.vbtn:hover::before,.vbtn:focus-visible::before{opacity:1}
body.mo-reduced .vbtn::after{transition:none}
@media(max-width:720px){.vbtn::after,.vbtn::before{display:none}}

/* ---- the picture composts before the words do ---- */
.thumb{margin:-2px -2px 12px;overflow:hidden;background:transparent;aspect-ratio:16/10;
    transition:opacity .8s ease, filter .8s ease;}
.card:nth-of-type(3n) .thumb{}
.card:nth-of-type(3n+1) .thumb{}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.95}
.card.stage-settling .thumb{opacity:.84;filter:blur(.3px)}
.thumb.going{opacity:.42;filter:blur(1.6px) grayscale(.6)}
/* placeholder: where a contributor's own photo/audio-waveform/scan will sit once shared — a warm paper wash, not stock art */
.thumb-slot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
    background:
            repeating-linear-gradient(128deg, rgba(240,234,223,.05) 0 2px, transparent 2px 7px),
            linear-gradient(155deg, var(--soil-2), var(--soil-raised) 55%, var(--soil-2));
}
.thumb-slot span{font-family:'Courier New',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--bone-faint);
    max-width:70%;line-height:1.5}
.card:hover .thumb,.card:focus-visible .thumb{opacity:1;filter:none}
body.energy-low .thumb{display:none}

/* a quiet definition for "trace" — on hover or keyboard focus, no new page */
.trace-term{position:relative;color:var(--tan);cursor:help;
    border-bottom:1px dotted var(--tan-deep);outline:none}
.trace-term:focus-visible{outline:2px solid var(--tan);outline-offset:3px;border-radius:3px}
.trace-def{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);
    width:min(300px,78vw);z-index:40;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease;
    padding:20px 22px;color:var(--bone);font-family:Georgia,serif;font-style:normal;font-size:13.5px;
    line-height:1.62;letter-spacing:normal;text-align:left;
    background:radial-gradient(120% 120% at 50% 30%, #241c15 0%, #1b1510 100%);
    box-shadow:0 18px 44px rgba(0,0,0,.6);border-radius:16px 15px 17px 14px}
.trace-def::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
    border:8px solid transparent;border-top-color:#1b1510}
.trace-term:hover .trace-def,.trace-term:focus-visible .trace-def{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.trace-def{transition:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}




                       .wc-hero{position:relative;padding:0 0 8px;background:var(--void)}
.wc-band{position:relative;left:50%;right:50%;margin:0 -50vw;width:100vw;background:none;border:none}
/* the whole band is the scroll surface — easy to find, swipeable anywhere, phone-friendly */
.wc-track{overflow-x:auto;overflow-y:hidden;cursor:grab;background:none;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x;
    padding:14px 0 8px}
.wc-track::-webkit-scrollbar{display:none}
.wc-track.grabbing{cursor:grabbing}
/* Left inset is deliberately small. The artwork's own pale left edge — the white
   coral drawing on bare paper — IS the beginning of the piece: wash before creature.
   But it needs to start close to the viewport edge, and the warm bloom has to stay
   tight, or that pale region reads as fog / a failed image rather than as intention. */
.wc-track img{display:block;height:min(64vh,500px);width:auto;max-width:none;margin:0;padding:0 14vw 0 1.5vw;
    pointer-events:none;user-select:none;
    filter:drop-shadow(0 0 22px rgba(224,187,131,.10)) drop-shadow(0 20px 46px rgba(0,0,0,.55))}
@media(hover:none){.wc-track{cursor:default}}
.wc-drag{display:block;text-align:center;margin-top:10px;font-family:'Courier New',monospace;
    font-size:11px;letter-spacing:.14em;color:var(--bone-faint)}

@media(max-width:640px){.wc-track img{height:360px;padding:0 22vw 0 3vw}}

/* unfold arrow — phosphorescing, like the Dark version */
.wc-stage{position:relative}
.wcArrow{display:flex;align-items:center;gap:11px;margin:18px auto 0;background:none;border:none;cursor:pointer;
    color:var(--tan);width:max-content;padding:8px 16px;border-radius:999px;
    transition:opacity .6s ease,background .3s ease}
.wcArrow:hover{background:rgba(198,146,86,.08)}
.wcArrowHead{font-size:40px;line-height:.8;
    text-shadow:0 0 10px rgba(198,146,86,.5),0 2px 10px rgba(8,6,4,.7);
    animation:wcNudge 2.2s ease-in-out infinite, wcHeadGlow 3s ease-in-out infinite}
.wcArrowWord{font-family:'Courier New',monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--tan-soft);animation:wcGlow 3s ease-in-out infinite}
.wcArrow:hover{color:var(--tan-soft)}
.wcArrow.done{opacity:0;pointer-events:none}
@keyframes wcNudge{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(5px);opacity:1}}
@keyframes wcHeadGlow{0%,100%{text-shadow:0 0 8px rgba(198,146,86,.4),0 2px 10px rgba(8,6,4,.7)}50%{text-shadow:0 0 18px rgba(224,187,131,.85),0 0 32px rgba(198,146,86,.4),0 2px 10px rgba(8,6,4,.7)}}
@keyframes wcGlow{0%,100%{opacity:.66;text-shadow:0 0 3px rgba(224,187,131,.2)}50%{opacity:1;text-shadow:0 0 12px rgba(224,187,131,.95),0 0 24px rgba(224,187,131,.5),0 0 40px rgba(198,146,86,.25)}}
/* heap peek */
.heap-peek-cue{display:block;text-align:center;margin:2px auto 26px;font-family:'Courier New',monospace;
    font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#EFE7D9;opacity:.92;text-shadow:0 1px 10px rgba(8,6,4,.9)}
.heap-peek-cue span{display:block;font-size:19px;margin-top:6px;color:var(--tan-soft);animation:peekNudge 3s ease-in-out infinite}
@keyframes peekNudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
@media(prefers-reduced-motion:reduce){.heap-peek-cue span{animation:none}}

/* the welcome: spare, propositional, generous whitespace — never crowds the title */
.wc-word{max-width:720px;margin:24px auto 0;padding:0 28px;text-align:center}
.wc-word .ch-eyebrow{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--tan);margin-bottom:16px}
.wc-word .wordmark{font-family:'Times New Roman',serif;font-weight:700;letter-spacing:-.01em;
    font-size:clamp(46px,9vw,104px);line-height:.98;color:var(--bone)}
.wc-word .wordmark .verb{font-style:italic;color:var(--tan-soft)}
.wc-hello{font-family:'Times New Roman',serif;font-style:italic;color:var(--tan-soft)}
.wc-prop{max-width:52ch;margin:20px auto 0;color:var(--bone-dim);
    font-size:clamp(15px,1.65vw,18px);line-height:1.7}
.wc-prop b{color:var(--bone);font-weight:400}
.wc-threads{display:inline-flex;align-items:baseline;gap:2px;margin:22px auto 0;text-decoration:none;
    font-family:'Times New Roman',serif;font-size:clamp(18px,2vw,23px);color:var(--bone);
    transition:color .25s ease}
.wc-threads span{font-family:'Courier New',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tan);margin-left:12px;position:relative;top:-1px;transition:color .25s ease}
.wc-threads:hover{color:var(--tan-soft)}
.wc-threads:hover span{color:var(--tan-soft)}
.wc-threads:focus-visible{outline:2px solid var(--tan);outline-offset:4px;border-radius:6px}
.wc-artist{margin:14px auto 0;text-align:center;font-family:'Courier New',monospace;
    font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan-deep)}

/* the welcome that arrives at the end of the scroll — emerges over the last of the art,
   in a soft watercolor pool (no box), then the eye is sent down to the Heap */
.wc-arrival{position:absolute;inset:0;z-index:8;pointer-events:none}
.wcEmerge{position:absolute;z-index:8;margin:0;padding:32px 44px;color:#FFFDF9;font-family:Georgia,serif;
    font-size:clamp(17px,1.8vw,22px);line-height:1.66;opacity:0;transform:translateY(14px);background:none;
    transition:opacity 1.7s ease,transform 1.7s cubic-bezier(.2,.7,.2,1);pointer-events:none;
    text-shadow:0 2px 14px rgba(8,6,4,1),0 0 30px rgba(8,6,4,.95)}
/* each question rests in a soft watercolor pool — an irregular blurred blob, no box, no straight edge */
.wcEmerge::before{content:"";position:absolute;inset:-24% -14%;z-index:-1;
    background:radial-gradient(58% 60% at 50% 50%,rgba(8,6,4,.95) 0%,rgba(8,6,4,.82) 40%,
    rgba(8,6,4,.45) 68%,rgba(8,6,4,0) 100%);
    border-radius:52% 48% 44% 56%/48% 56% 44% 52%;filter:blur(30px)}
.wcEmerge:nth-child(2)::before{border-radius:44% 56% 58% 42%/58% 44% 56% 42%;filter:blur(34px)}
.wcEmerge:nth-child(3)::before{border-radius:58% 42% 46% 54%/42% 58% 42% 58%;filter:blur(28px)}
.wcEmerge:nth-child(4)::before{border-radius:48% 52% 56% 44%/54% 46% 54% 46%;filter:blur(32px)}
.wcEmerge:nth-child(5)::before{border-radius:56% 44% 50% 50%/46% 54% 46% 54%;filter:blur(31px)}
.wcEmerge:nth-child(6)::before{border-radius:50% 50% 42% 58%/56% 44% 58% 42%;filter:blur(29px)}
.wcEmerge:nth-child(7)::before{border-radius:46% 54% 54% 46%/50% 50% 46% 54%;filter:blur(33px)}
.wcEmerge.e-hi{font-size:clamp(22px,2.7vw,33px);font-style:italic;color:var(--tan-soft)}
.wcE-hello{display:block;margin-bottom:12px}
.wcEmerge.lit{opacity:1;transform:translateY(0)}
.wcEmerge.wcE-link{text-decoration:none;color:var(--tan-soft)}
.wcEmerge.wcE-link.lit{pointer-events:auto}
.wcE-sub{display:block;margin-top:12px;font-family:'Courier New',monospace;font-style:normal;
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);
    text-shadow:0 0 10px rgba(224,187,131,.5);animation:wcGlow 3s ease-in-out infinite}
.wcE-link:hover .wcE-sub{color:#fff}
/* the art recedes a little while a line speaks */
.wc-track{transition:opacity .8s ease}
.wc-band.speaking .wc-track{opacity:.62}
.wc-questions-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:820px){.wcEmerge{font-size:15px;padding:24px 30px}.wcEmerge.e-hi{font-size:20px}}
@media(prefers-reduced-motion:reduce){.wcEmerge{transition:none}}

.wc-credit{position:absolute;left:4vw;bottom:8px;z-index:6;font-family:'Courier New',monospace;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tan);opacity:0;
    transition:opacity 1s ease;pointer-events:none;text-shadow:0 1px 10px rgba(8,6,4,.8)}
.wc-credit.lit{opacity:.92}


/* 10/4 — heap header hierarchy: question → purpose → invitation → how */
.heap-header .heap-ask{
    font-family:'Times New Roman',serif;font-weight:700;
    font-size:clamp(30px,5vw,52px);line-height:1.22;color:var(--bone);
    text-wrap:balance;max-width:21ch;margin:26px auto 0;
}
.heap-header .heap-ask em{font-style:italic;color:var(--tan-soft)}
.heap-header .heap-purpose{
    font-family:Georgia,serif;font-size:17px;line-height:1.6;
    color:var(--bone-dim);max-width:52ch;margin:20px auto 0;text-wrap:pretty;
}
.heap-header .heap-how{
    font-family:Georgia,serif;font-size:15px;line-height:1.6;
    color:var(--bone-faint);max-width:52ch;margin:14px auto 0;text-wrap:pretty;
}
.heap-header .heap-question{
    font-family:'Times New Roman',serif;
    font-size:clamp(22px,2.8vw,30px);line-height:1.32;
    color:var(--bone);font-style:italic;
    max-width:30ch;margin:30px auto 8px;
}