:root{
    --soil:#1A1814;          /* background, mud */
    --soil-raised:#221E18;   /* card surface */
    --soil-2:#2A251D;        /* hover surface */
    --line:#332D24;          /* hairlines / borders */
    --bone:#F0EADF;          /* primary text */
    --bone-dim:#AAA192;      /* secondary text */
    --bone-faint:#736B5E;    /* tertiary / labels at rest */
    --tan:#C69256;           /* accent, brighter light brown */
    --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{
    background:var(--soil);color:var(--bone);
    font-family:Georgia,'Times New Roman',serif;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.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;
}
/* the highlight-colour shimmer rides on top; if text-clip is unsupported it simply hides, title stays solid white */
.wordmark .swp::after{
    content:"death is a verb";position:absolute;left:0;top:0;white-space:nowrap;
    color:var(--tan);-webkit-text-fill-color:var(--tan);opacity:.5;
    -webkit-mask-image:linear-gradient(100deg,transparent 42%,#000 48%,#000 52%,transparent 58%);
    mask-image:linear-gradient(100deg,transparent 42%,#000 48%,#000 52%,transparent 58%);
    -webkit-mask-size:320% 100%;mask-size:320% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:135% 0;mask-position:135% 0;
    animation:titleSweep 18s ease-in-out 3.5s infinite;pointer-events:none;
}
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
    .wordmark .swp::after{display:none}
}
body.mo-reduced .wordmark .swp::after{display:none}
/* 'verb' stays white, haloed in the chosen highlight colour */
.wordmark .verb{color:#FFFFFF;-webkit-text-fill-color:currentColor;background:none;
    animation:phosphor 9s ease-in-out infinite}
@keyframes phosphor{0%,100%{text-shadow:0 0 4px var(--warm)}50%{text-shadow:0 0 10px var(--tan-soft),0 0 18px var(--warm)}}
@keyframes titleSweep{0%{-webkit-mask-position:135% 0;mask-position:135% 0}28%{-webkit-mask-position:-35% 0;mask-position:-35% 0}100%{-webkit-mask-position:-35% 0;mask-position:-35% 0}}

/* ---------- 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}
.ufCat{
    position:absolute;right:clamp(-46px,-4vw,-30px);bottom:9%;z-index:3;pointer-events:none;
    width:clamp(116px,15vw,168px);aspect-ratio:760/659;
    background:url('/img/krista-caterpillar.png') center/contain no-repeat;opacity:.94;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
/* 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;
}
.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(20px,2.5vw,30px);line-height:1.4;
    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(32px,4.6vw,56px);font-style:italic;max-width:none}
.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:19px}.ufPoem .e-hi{font-size:30px}}
.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}
.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}
body.mo-reduced .ufArrowHead,body.energy-low .ufArrowHead{animation: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}}
.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}
.driving{font-size:clamp(22px,3.4vw,30px);line-height:1.4;max-width:20ch;color:var(--bone)}
.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}
.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:hover .heap-more,.heap-ethos.reveal .heap-more{max-height:420px;opacity:1;margin-top:12px}
.heap-ethos.reveal .heap-more-btn,.heap-ethos:hover .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}
.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 ---------- */
.field{column-count:3;column-gap:18px;margin-top:16px}
@media(max-width:820px){.field{column-count:2}}
@media(max-width:520px){.field{column-count:1}}
.field.aslist{column-count:1}

.card{
    break-inside:avoid;display:block;width:100%;text-align:left;
    background:var(--soil-raised);border:1px solid var(--line);border-radius:6px;
    padding:15px 16px 14px;margin:0 0 18px;cursor:pointer;position:relative;color:var(--bone);
    font-family:inherit;
    transition:background .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease,opacity .3s ease;
}
.card:hover,.card:focus-visible{background:var(--soil-2);border-color:var(--tan-deep);outline:none}
.card:focus-visible{box-shadow:0 0 0 2px var(--tan)}
/* a woken trace: warms / highlights in place, no movement */
.card.resonant{background:var(--warm);border-color:var(--tan);box-shadow:inset 0 0 0 1px rgba(198,146,86,0.25)}
.card.active{border-color:var(--tan);box-shadow:0 0 0 1px var(--tan)}
.card.dimmed{opacity:.24}

.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}
.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:.85}
.sph.secondary{color:var(--bone-faint);border-color:var(--line)}
.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 */
.wake-tag{min-height:0;overflow:hidden;margin-top:0;
    display:flex;gap:6px;flex-wrap:wrap;
    max-height:0;opacity:0;transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease}
.card.resonant .wake-tag,.card.active .wake-tag{max-height:60px;opacity:1;margin-top:11px}
.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;gap:8px}
.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}
body.contrast-high .card{border-color:#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 .swp::after{display:none}
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)}


/* ============ 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)}
.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}}

/* User dropdown */
.user-dropdown {
    position: fixed;
    top: 68px;
    right: 18px;
    z-index: 57;
    background: var(--soil-raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 0;
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s ease;
}
.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.user-dropdown .user-info {
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.user-dropdown .user-name {
    display: block;
    font-family: 'Times New Roman', serif;
    font-size: 16px;
    color: var(--bone);
}
.user-dropdown .user-email {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--bone-faint);
    margin-top: 2px;
}
.user-dropdown a {
    display: block;
    padding: 8px 16px;
    color: var(--bone-dim);
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    transition: all 0.2s ease;
}
.user-dropdown a:hover {
    background: var(--soil-2);
    color: var(--bone);
}
.user-dropdown .logout-dropdown {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    color: var(--bone-faint);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
}
.user-dropdown .logout-dropdown:hover {
    background: var(--soil-2);
    color: #E57373;
}

/* Contribution form status messages */
.cp-status {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
}
.cp-status.success {
    background: rgba(124, 179, 66, 0.15);
    border: 1px solid var(--admin-success);
    color: var(--admin-success);
}
.cp-status.error {
    background: rgba(229, 115, 115, 0.15);
    border: 1px solid #E57373;
    color: #E57373;
}

/* Login panel in top-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 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
    box-shadow: -20px 0 50px rgba(0,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;
    color: var(--bone);
}
.login-drawer .sub {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.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: 0.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 0.2s ease;
}
.login-drawer input:focus {
    border-color: var(--tan);
}
.login-drawer .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 0.2s ease;
}
.login-drawer .login-btn:hover {
    background: var(--tan-soft);
}
.login-drawer .login-toggle {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--bone-dim);
}
.login-drawer .login-toggle a {
    color: var(--tan);
    text-decoration: none;
}
.login-drawer .login-toggle a:hover {
    text-decoration: underline;
}
.login-drawer .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;
}

/* CP Login prompt */
.cp-login-prompt .cp-login-btn:hover {
    background: var(--tan-soft) !important;
}

/* Overlay for modals */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 54;
    background: rgba(10, 9, 7, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.overlay.show {
    opacity: 1;
    visibility: visible;
}

/* NEW */
: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: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, unlabelled, felt rather than announced. */
.soil-horizon{display:none;position:absolute;left:0;right:0;top:96vh;height:1px;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(198,146,86,.22) 12%,rgba(198,146,86,.28) 50%,rgba(198,146,86,.22) 88%,transparent);
    box-shadow:0 1px 14px rgba(198,146,86,.10)}
@media(prefers-reduced-motion:reduce){.soil-horizon{opacity:.7}}
.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;
}
/* the highlight-colour shimmer rides on top; if text-clip is unsupported it simply hides, title stays solid white */
.wordmark .swp::after{
    content:"death is a verb";position:absolute;left:0;top:0;white-space:nowrap;
    color:var(--tan);-webkit-text-fill-color:var(--tan);opacity:.5;
    -webkit-mask-image:linear-gradient(100deg,transparent 42%,#000 48%,#000 52%,transparent 58%);
    mask-image:linear-gradient(100deg,transparent 42%,#000 48%,#000 52%,transparent 58%);
    -webkit-mask-size:320% 100%;mask-size:320% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:135% 0;mask-position:135% 0;
    animation:titleSweep 18s ease-in-out 3.5s infinite;pointer-events:none;
}
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
    .wordmark .swp::after{display:none}
}
body.mo-reduced .wordmark .swp::after{display:none}
/* 'verb' stays white, haloed in the chosen highlight colour */
.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)}}
@keyframes titleSweep{0%{-webkit-mask-position:135% 0;mask-position:135% 0}28%{-webkit-mask-position:-35% 0;mask-position:-35% 0}100%{-webkit-mask-position:-35% 0;mask-position:-35% 0}}

/* ---------- 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}
.ufCat{
    position:absolute;right:clamp(-46px,-4vw,-30px);bottom:9%;z-index:3;pointer-events:none;
    width:clamp(116px,15vw,168px);aspect-ratio:760/659;
    background:url('/public/img/krista-caterpillar.png') center/contain no-repeat;opacity:.94;
    filter:saturate(.5) brightness(1.18) contrast(1.04) drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
/* the drawing itself, one bright strip, unfolded by hand */
.ufArt{
    position:relative;flex:0 0 auto;height:100%;width:min(196vw,1820px);
    background:url('/public/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-motif{display:block;width:230px;height:230px;margin:34px auto 0;
    background:url('/public/img/krista-caterpillar.png') center/contain no-repeat;
    filter:saturate(.5) brightness(1.12) contrast(1.05);
    clip-path:polygon(6% 20%,24% 4%,44% 15%,64% 2%,86% 15%,98% 38%,90% 62%,99% 84%,76% 97%,56% 87%,
    36% 99%,15% 85%,2% 64%,10% 40%);
    opacity:.94}
.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:300px;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:188px;left:70px;top:44px;transform:rotate(-8deg);z-index:2}        /* blue fly — large anchor, centred in the space */
.heap-mini .hm2{width:120px;left:0;top:150px;transform:rotate(5deg);z-index:1;animation-delay:.6s}  /* amanita/mushroom — bigger, low & toward the text */
.heap-mini .hm3{width:128px;left:278px;top:8px;transform:rotate(10deg);z-index:1;opacity:.92;animation-delay:1.1s}  /* green jellies — drifting past the fly, not touching */
.heap-mini .hm5{width:108px;left:262px;top:158px;transform:rotate(9deg);z-index:1;opacity:.6;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(--warm);box-shadow:inset 0 0 0 1px rgba(198,146,86,0.25)}
.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 */
.wake-tag{min-height:0;overflow:hidden;margin-top:0;
    display:flex;gap:6px;flex-wrap:wrap;
    max-height:0;opacity:0;transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease}
.card.resonant .wake-tag,.card.active .wake-tag{max-height:60px;opacity:1;margin-top:11px}
.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 .swp::after{display:none}
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/contain 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));}
.rad-item:nth-of-type(3n) .rad-ic{--r:-5deg;}
.rad-item:nth-of-type(3n+1) .rad-ic{--r:4deg;}
.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}


:root{ --void:#0B0906; --bone:#F4F0E6; --tan:#C69256; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--void)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;overflow-x:hidden}

/* ── THE CABINET ─────────────────────────────────────────────────────────
   The Entangled Life principle: specimens crowd the EDGES, the centre is
   void, and the title sits in the hole they leave. Density at the rim is
   what makes the emptiness feel like a clearing rather than a blank. */
.cabinet{position:relative;min-height:100vh;overflow:hidden;
    background:
            radial-gradient(120% 90% at 50% 46%, #14100B 0%, #0B0906 55%, #050403 100%);}

/* every specimen sits in the same lit world */
.s{position:absolute;pointer-events:none;
    filter:drop-shadow(0 10px 30px rgba(0,0,0,.85)) saturate(1.04) contrast(1.03);
    will-change:transform}
.s img{display:block;width:100%;height:auto}

/* the light comes from the middle — things at the rim are in shadow.
   This is what makes a collage look like one photograph instead of fifteen. */
.s::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(var(--shade,180deg), rgba(5,4,3,.55), rgba(5,4,3,0) 62%);
    mix-blend-mode:multiply}

/* nothing is level. a real cabinet is arranged by hand. */
.s{transform:rotate(var(--r,0deg))}

/* ── THE ASCENT ──────────────────────────────────────────────────────────
   On load the whole cabinet rises into being from below and fades in —
   you watch it assemble all at once, in one screen, rather than scrolling
   to discover it. The page opens on "endlessly becoming": not a finished
   specimen case, but a world still coming into form. Staggered by --ein so
   it arrives as a wave, not a snap. */
@keyframes ch-riseIn{
    from{opacity:0; transform:rotate(var(--r,0deg)) translateY(96px)}
    to  {opacity:1; transform:rotate(var(--r,0deg)) translateY(0)}}
.s{animation:ch-riseIn var(--rin,2.1s) cubic-bezier(.16,.82,.24,1) backwards;
    animation-delay:var(--ein,0s)}

/* the slow breath of a thing that is alive but still — now on the inner
   image, so it layers cleanly on top of the (rotated) ascent. It begins
   only after this specimen has finished rising. */
@keyframes ch-breathe{0%,100%{transform:translateY(0)}
    50%{transform:translateY(var(--lift,-9px))}}
.s.live img{animation:ch-breathe var(--dur,18s) ease-in-out infinite;
    animation-delay:calc(var(--ein,0s) + var(--rin,2.1s))}

/* the words surface last, after the world has risen around them, and stay */
.ch-well>*{animation:ch-wordUp 1.5s cubic-bezier(.16,.82,.24,1) both}
.ch-eyebrow{animation-delay:1.5s}
.cabinet-hero h1{animation-delay:1.7s}
.ch-sub{animation-delay:2.0s}
.cue{animation-delay:2.35s}
@keyframes ch-wordUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── the void, and the words in it ── */
.cabinet::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
    background:radial-gradient(46% 42% at 50% 48%, rgba(6,5,3,.94) 0%, rgba(6,5,3,.78) 40%, rgba(6,5,3,0) 72%)}
.ch-well{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:0 24px;pointer-events:none}
.ch-well a{pointer-events:auto}
.ch-eyebrow{font-family:"Courier New",monospace;font-size:clamp(9px,1vw,11px);letter-spacing:.22em;
    text-transform:uppercase;color:#8A8072;margin:0 0 26px}
.cabinet-hero h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
    font-weight:700;font-size:clamp(44px,7.6vw,104px);line-height:.95;letter-spacing:-.012em;
    color:#FFFDF8;margin:0;
    text-shadow:0 0 30px rgba(255,247,224,.28), 0 0 80px rgba(198,146,86,.16)}
.cabinet-hero h1 .ch-verb{animation:ch-emberGlow 4s ease-in-out infinite}
@keyframes ch-emberGlow{
    0%,100%{text-shadow:0 0 16px rgba(255,247,224,.3), 0 0 44px rgba(198,146,86,.16)}
    50%{text-shadow:0 0 26px rgba(255,250,236,.95), 0 0 64px rgba(224,187,131,.55), 0 0 120px rgba(198,146,86,.3)}}
.ch-sub{font-family:"Iowan Old Style",Palatino,"Times New Roman",serif;
    font-size:clamp(15px,1.7vw,21px);line-height:1.55;color:#D6CFC0;max-width:34ch;margin:30px 0 0}
.cue{margin:46px 0 0;font-family:"Courier New",monospace;font-size:10.5px;letter-spacing:.2em;
    color:#7E7466;
    animation:ch-wordUp 1.5s cubic-bezier(.16,.82,.24,1) 2.35s both,
    ch-pulse 3s ease-in-out 3.85s infinite}
@keyframes ch-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* the one interactive specimen: the plankton lens links to its field guide */
.specimen-link{display:block;text-decoration:none;pointer-events:auto;cursor:pointer}
.specimen-link .cap{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);
    width:max-content;max-width:70vw;font-family:"Courier New",monospace;font-size:11px;
    letter-spacing:.06em;color:#CDBE9E;background:rgba(6,5,3,.72);padding:5px 10px;border-radius:2px;
    opacity:0;transition:opacity .35s ease;pointer-events:none;text-align:center}
.specimen-link:hover .cap,.specimen-link:focus-visible .cap{opacity:1}
.specimen-link:focus-visible{outline:2px solid var(--tan);outline-offset:4px;border-radius:3px}
.specimen-link:hover img{filter:brightness(1.06)}

@media (prefers-reduced-motion:reduce){*{animation:none!important}
    .s,.ch-well>*{opacity:1!important;transform:rotate(var(--r,0deg))!important}}

/* the ascent waits one beat for JS to assign each specimen its place in the
   wave; if JS never runs, this class is simply never added and everything
   rises together — a safe fallback, never stuck hidden. */
body.hold .s,body.hold .ch-well>*,body.hold .s.live img{animation-play-state:paused}
@media (max-width:820px){ .s.drop{display:none} .s{min-width:92px} }

.cabinet-hero{position:relative}
.cabinet-hero .cabinet{min-height:100vh}
.cabinet-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11vh;z-index:6;pointer-events:none;background:linear-gradient(to bottom, rgba(30,23,18,0) 0%, rgba(30,23,18,.82) 100%)}


/* Lightbox body text */
.lb-body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 1.8;
    color: var(--bone);
    max-width: 68ch;
    margin: 16px auto 0;
    padding: 0 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.lb-body p {
    margin-bottom: 1em;
}

.lb-body:empty {
    display: none;
}

/* Lightbox meta (materials/verbs) */
.lb-meta {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--bone-faint);
    margin-top: 12px;
    max-width: 68ch;
    padding: 0 10px;
}

/* Lightbox controls */
.lb-controls {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    background: rgba(26, 24, 20, 0.85);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
}

.lb-controls button {
    background: none;
    border: 1px solid var(--line);
    color: var(--bone-dim);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    transition: all 0.2s ease;
}

.lb-controls button:hover {
    border-color: var(--tan);
    color: var(--tan);
}

.lb-controls .lb-az {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-faint);
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 10;
    background: none;
    border: none;
    color: var(--bone-dim);
    font-size: 32px;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

.lb-close:hover {
    color: var(--tan);
}

/* Card media */
.card-media {
    margin: 8px 0 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--soil);
}

.card-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.card-media audio,
.card-media video {
    width: 100%;
    display: block;
    border-radius: 6px;
}

.card-media.file-link {
    padding: 10px 12px;
    background: var(--soil);
    border-radius: 6px;
    border: 1px solid var(--line);
}

.card-media.file-link a {
    color: var(--tan);
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.card-media.file-link a:hover {
    color: var(--tan-soft);
    text-decoration: underline;
}

/* Modal media */
.vm-media {
    margin: 12px 0 16px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--soil);
}

.vm-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    max-height: 500px;
    object-fit: contain;
}

.vm-media audio,
.vm-media video {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.vm-media.file-link {
    padding: 12px 16px;
    background: var(--soil);
    border-radius: 8px;
    border: 1px solid var(--line);
}

.vm-media.file-link a {
    color: var(--tan);
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.vm-media.file-link a:hover {
    color: var(--tan-soft);
    text-decoration: underline;
}

/* Lightbox media display */
.lb-media-display {
    margin: 12px 0 16px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--soil);
    max-width: 100%;
}

.lb-media-display img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    max-height: 500px;
    object-fit: contain;
}

.lb-media-display audio,
.lb-media-display video {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.lb-media-display.file-link {
    padding: 12px 16px;
    background: var(--soil);
    border-radius: 8px;
    border: 1px solid var(--line);
}

.lb-media-display.file-link a {
    color: var(--tan);
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.lb-media-display.file-link a:hover {
    color: var(--tan-soft);
    text-decoration: underline;
}

/* Search results */
.search-result:hover {
    border-color: var(--tan) !important;
    background: var(--soil-2) !important;
}

.search-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.search-status.pending {
    background: rgba(249, 168, 37, 0.2);
    color: var(--admin-warning);
}
.search-status.approved {
    background: rgba(124, 179, 66, 0.2);
    color: var(--admin-success);
}
.search-status.humus {
    background: rgba(198, 146, 86, 0.2);
    color: var(--admin-accent);
}

.search-filter {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--bone-dim);
    cursor: pointer;
    transition: all 0.2s ease;
}
.search-filter:hover {
    border-color: var(--tan-deep);
    color: var(--bone);
}
.search-filter.active {
    background: var(--tan);
    color: var(--soil);
    border-color: var(--tan);
}
.search-filter.active:hover {
    background: var(--tan-soft);
    border-color: var(--tan-soft);
}

#searchResults {
    scrollbar-width: thin;
}
#searchResults::-webkit-scrollbar {
    width: 4px;
}
#searchResults::-webkit-scrollbar-track {
    background: var(--soil);
}
#searchResults::-webkit-scrollbar-thumb {
    background: var(--tan-deep);
    border-radius: 2px;
}

/* Comment styles */
.lb-comment-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.lb-comment-title {
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    color: var(--bone);
    margin-bottom: 10px;
}

.lb-comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--soil);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--bone);
    font-family: Georgia, serif;
    font-size: 14px;
    min-height: 60px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.lb-comment-form textarea:focus {
    border-color: var(--tan);
    outline: none;
}

.lb-comment-submit {
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--tan);
    color: var(--soil);
    border: none;
    border-radius: 6px;
    font-family: 'Times New Roman', serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lb-comment-submit:hover {
    background: var(--tan-soft);
}

.lb-comment-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lb-comment-status {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    display: none;
}

.lb-comment-status.success {
    display: block;
    background: rgba(124, 179, 66, 0.15);
    border: 1px solid var(--admin-success);
    color: var(--admin-success);
}

.lb-comment-status.error {
    display: block;
    background: rgba(229, 115, 115, 0.15);
    border: 1px solid #E57373;
    color: #E57373;
}

.lb-comments-list {
    margin-top: 12px;
}

.lb-comment-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.lb-comment-item:last-child {
    border-bottom: none;
}

.lb-comment-meta {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: var(--bone-faint);
    margin-bottom: 4px;
}

.lb-comment-meta strong {
    color: var(--tan);
}

.lb-comment-body {
    font-size: 14px;
    color: var(--bone-dim);
    line-height: 1.6;
}