/* $OAK — NIGHT IN SHERWOOD · v2 monumental */
:root{
  --night:#07090c; --bark:#191410; --bone:#e9e2d0; --lincoln:#195905; --lincoln-lit:#2f8a0e;
  --chain:#00C805; --rust:#b4552a; --rust-lit:#d97b4a; --ash:#8b8b84; --gold:#c9a227; --gold-dim:rgba(201,162,39,.4);
  --panel:rgba(6,8,11,.82); --line:rgba(233,226,208,.14);
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.9,.28,1);
  /* scene variables driven by act */
  --sky1:#05070d; --sky2:#0b1220; --star-o:.9; --fog-o:.5; --tree:#241c14; --aurora-o:0;
  --moon-o:.85; --moon-c:#e9e2d0; --oak-glow:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:linear-gradient(var(--sky1),var(--sky2) 70%,#0a0c10);color:var(--bone);
  font-family:var(--serif);font-size:18px;line-height:1.55;overflow-x:hidden;
  transition:background 1.6s var(--ease)}
a{color:var(--chain);text-underline-offset:3px}
a:hover{color:#4fe36a}
mark{background:rgba(180,85,42,.35);color:var(--bone);padding:0 .15em}
::selection{background:rgba(25,89,5,.6);color:#eaf7e0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── header bar ── */
#bar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:1rem;
  padding:.6rem 1rem;background:rgba(5,7,10,.66);backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em}
.bar-name{color:var(--bone);font-weight:500}
.bar-ca{color:var(--ash)}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:.85rem}
.bar-ticker{color:var(--chain);font-weight:500}
.bar-cta{color:#06120a;background:var(--lincoln-lit);text-decoration:none;padding:.4rem .75rem;
  border-radius:3px;font-weight:600;transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.bar-cta:hover{background:var(--chain);color:#03210a;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,200,5,.25)}

/* ── the scene ── */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#stars{position:absolute;inset:0;opacity:var(--star-o);transition:opacity 1.6s var(--ease);
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 34% 8%,#fff6,transparent),
  radial-gradient(1.5px 1.5px at 58% 22%,#fff9,transparent),radial-gradient(1px 1px at 71% 12%,#fff5,transparent),
  radial-gradient(1px 1px at 87% 27%,#fff7,transparent),radial-gradient(1.5px 1.5px at 22% 31%,#fff6,transparent),
  radial-gradient(1px 1px at 44% 15%,#fff8,transparent),radial-gradient(1px 1px at 92% 7%,#fff6,transparent),
  radial-gradient(1px 1px at 5% 9%,#fff7,transparent),radial-gradient(1.2px 1.2px at 66% 33%,#fff5,transparent);
  background-size:733px 521px,613px 447px,829px 577px,547px 419px,761px 491px,673px 533px,587px 461px,709px 401px,641px 509px,777px 439px}
#moon{position:absolute;top:9%;right:14%;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,var(--moon-c),rgba(233,226,208,.75) 58%,rgba(233,226,208,.12) 78%,transparent 82%);
  box-shadow:0 0 70px 22px rgba(233,226,208,.14),0 0 160px 60px rgba(233,226,208,.06);
  opacity:var(--moon-o);transition:opacity 1.6s var(--ease),filter 1.6s var(--ease)}
#aurora{position:absolute;inset:-20% -10%;opacity:var(--aurora-o);transition:opacity 2.4s var(--ease);
  background:
    radial-gradient(60% 38% at 30% 22%,rgba(25,89,5,.55),transparent 70%),
    radial-gradient(50% 32% at 70% 15%,rgba(0,200,5,.38),transparent 70%);
  filter:blur(34px);animation:auroraDrift 14s ease-in-out infinite alternate}
@keyframes auroraDrift{from{transform:translateX(-2.5%) translateY(-1%)}to{transform:translateX(2.5%) translateY(1.5%)}}
#oak{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:92vh;width:auto;max-width:none;
  filter:var(--oak-glow);transition:filter 1.6s var(--ease);will-change:transform}
#oak .limb{stroke:var(--tree);fill:none;stroke-linecap:round;transition:stroke 1.6s var(--ease)}
#oak #treeGroup{transform-origin:500px 1000px}
#oak .prop{stroke:#4a3527;stroke-width:5;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s var(--ease),stroke .9s var(--ease),filter .9s var(--ease)}
body[data-act="2"] #oak .prop{stroke-dashoffset:0;stroke:var(--rust);filter:drop-shadow(0 0 7px rgba(180,85,42,.85))}
body[data-act="3"] #oak .prop,body[data-act="4"] #oak .prop{stroke-dashoffset:0;stroke:#5a4a3f}
#oak .hollow{fill:#020303;cursor:pointer;pointer-events:all;transition:filter .4s var(--ease)}
#oak .hollow:hover{fill:#000;filter:drop-shadow(0 0 8px rgba(201,162,39,.5))}
#oak .leaf{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 1s cubic-bezier(.2,1.4,.4,1)}
#oak .leaf.grown{transform:scale(1)}
#oak .leaf.mine{animation:minePulse 2.6s var(--ease) .9s 2}
@keyframes minePulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 14px rgba(0,200,5,.95)) brightness(1.5)}}
#fog{position:absolute;inset:auto 0 0 0;height:45vh;opacity:var(--fog-o);transition:opacity 1.6s var(--ease);
  background:linear-gradient(transparent,rgba(120,130,140,.16) 40%,rgba(120,130,140,.28))}
#ground{position:absolute;inset:auto 0 0 0;height:7vh;background:linear-gradient(transparent,#04050a 80%)}

/* particles (built by JS; hidden per act) */
.pl{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.pl i{position:absolute;display:block;will-change:transform,opacity}
#embers i{width:3px;height:3px;border-radius:50%;background:var(--rust-lit);box-shadow:0 0 6px rgba(217,123,74,.9);
  bottom:-2vh;animation:emberRise linear infinite}
@keyframes emberRise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.9}85%{opacity:.5}100%{transform:translateY(-105vh) translateX(6vw);opacity:0}}
#ashfall i{width:2.5px;height:2.5px;border-radius:50%;background:#a9a9a2;opacity:.7;top:-2vh;animation:ashFall linear infinite}
@keyframes ashFall{0%{transform:translateY(0) translateX(0)}100%{transform:translateY(108vh) translateX(-4vw)}}
#leaffall i{width:11px;height:11px;background:var(--lincoln-lit);border-radius:0 100% 0 100%;opacity:.85;top:-3vh;
  animation:leafFall ease-in-out infinite}
#leaffall i:nth-child(3n){background:var(--chain)}
@keyframes leafFall{0%{transform:translateY(0) rotate(0deg) translateX(0)}25%{transform:translateY(28vh) rotate(120deg) translateX(3vw)}50%{transform:translateY(55vh) rotate(220deg) translateX(-2vw)}75%{transform:translateY(82vh) rotate(320deg) translateX(2.5vw)}100%{transform:translateY(110vh) rotate(420deg) translateX(-1vw)}}
body[data-act="2"] #embers{opacity:1}
body[data-act="3"] #ashfall{opacity:1}
body[data-act="4"] #leaffall{opacity:.9}

/* act lighting */
body[data-act="1"]{--sky1:#05070d;--sky2:#0b1220;--star-o:.9;--fog-o:.5;--tree:#241c14;--aurora-o:0;--moon-o:.85;--oak-glow:none}
body[data-act="2"]{--sky1:#120b08;--sky2:#2a150c;--star-o:.25;--fog-o:.35;--tree:#2a1f15;--aurora-o:0;--moon-o:.4;--oak-glow:drop-shadow(0 0 24px rgba(180,85,42,.16))}
body[data-act="3"]{--sky1:#181a1a;--sky2:#2e2f2c;--star-o:0;--fog-o:.8;--tree:#3d3b36;--aurora-o:0;--moon-o:.22;--oak-glow:grayscale(.3)}
body[data-act="4"]{--sky1:#04120a;--sky2:#062e12;--star-o:.5;--fog-o:.3;--tree:#1d2415;--aurora-o:1;--moon-o:.6;--oak-glow:drop-shadow(0 0 26px rgba(0,200,5,.22))}

@keyframes sway{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.6deg)}}
#oak #treeGroup{animation:sway 9s ease-in-out infinite}

/* ── wayfinder ── */
#wayfinder{position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;gap:.55rem}
#wayfinder a{font-family:var(--mono);font-size:.6rem;color:var(--ash);text-decoration:none;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(5,7,10,.5);
  transition:all .3s var(--ease)}
#wayfinder a:hover{color:var(--bone);border-color:var(--gold-dim)}
body[data-here="act1"] #wayfinder a[data-w="act1"],
body[data-here="rings"] #wayfinder a[data-w="act1"],
body[data-here="act2"] #wayfinder a[data-w="act2"],
body[data-here="beat-props"] #wayfinder a[data-w="act2"],
body[data-here="act3"] #wayfinder a[data-w="act3"],
body[data-here="beat-dates"] #wayfinder a[data-w="act3"],
body[data-here="act4"] #wayfinder a[data-w="act4"],
body[data-here="beat-final"] #wayfinder a[data-w="act4"],
body[data-here="grove"] #wayfinder a[data-w="grove"],
body[data-here="record"] #wayfinder a[data-w="record"],
body[data-here="token"] #wayfinder a[data-w="record"]{
  color:#06120a;background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(201,162,39,.35)}

/* ── content ── */
main{position:relative;z-index:10}
.act{min-height:100vh;display:flex;align-items:center;justify-content:flex-start;padding:15vh 6vw}
.panel{flex:1 1 auto;min-width:0;max-width:35rem;background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--gold-dim);border-radius:10px;
  padding:1.9rem 2rem 1.7rem;backdrop-filter:blur(8px);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.panel.wide{max-width:64rem}
.panel.side{margin-left:auto}
.kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--gold);margin:0 0 1rem;
  display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";display:inline-block;width:1.4rem;height:1px;background:var(--gold-dim)}
h1{font-size:clamp(1.7rem,4.4vw,2.6rem);font-weight:600;line-height:1.18;margin:.1rem 0 1rem}
h2{font-size:clamp(1.45rem,3.6vw,2.15rem);font-weight:600;line-height:1.2;margin:.1rem 0 .95rem;letter-spacing:.005em}
.lede{font-size:1.03rem;color:#d9d2bf;margin:.65rem 0}
.lede.quiet{color:var(--ash);font-size:.95rem}
.scroll-hint{font-family:var(--mono);font-size:.7rem;color:var(--ash);margin-top:2rem;display:flex;gap:.5rem;align-items:center;justify-content:center;letter-spacing:.2em}
.scroll-hint .chev{animation:chev 2s ease-in-out infinite;display:inline-block}
@keyframes chev{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
.src{color:var(--ash)}
.quote{margin:1.15rem 0;padding:1rem 1.2rem;border-left:3px solid var(--rust);background:rgba(180,85,42,.08);border-radius:0 6px 6px 0}
.quote p{margin:0 0 .55rem;font-size:1.06rem;font-style:italic;line-height:1.5}
.quote cite{font-family:var(--mono);font-size:.68rem;font-style:normal}
.quote cite a{color:var(--ash)}

/* ── epitaph hero ── */
.act.hero{align-items:flex-start;justify-content:center;text-align:center;padding-top:16vh}
.lockup{max-width:52rem}
.lk-kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.34em;color:var(--gold);margin:0 0 1.6rem}
.lk-title{font-size:clamp(2.6rem,9vw,6.2rem);font-weight:600;letter-spacing:.08em;line-height:1;margin:0 0 1.1rem;
  color:var(--bone);text-shadow:0 4px 42px rgba(0,0,0,.85),0 1px 0 rgba(0,0,0,.6)}
.lk-dates{font-family:var(--mono);font-size:clamp(.85rem,2vw,1.05rem);letter-spacing:.42em;color:var(--gold);
  display:flex;align-items:center;justify-content:center;gap:1.1rem;margin:0 0 2.1rem}
.lk-dates .rule{display:inline-block;width:clamp(2rem,8vw,5.5rem);height:1px;background:var(--gold-dim)}
.lk-line{font-size:clamp(1.15rem,2.6vw,1.55rem);font-style:italic;color:#e2dbc8;margin:0 auto 1.1rem;max-width:34rem;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.lk-sub{font-size:.99rem;color:#b9b2a0;max-width:37rem;margin:0 auto;line-height:1.6;text-shadow:0 2px 18px rgba(0,0,0,.8)}

/* ── monument beats ── */
.beat{min-height:88vh;display:grid;place-items:center;text-align:center;padding:18vh 6vw;position:relative;z-index:10}
.beat.tall{min-height:100vh}
.beat-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;color:var(--ash);margin:0 0 1.4rem}
.beat-k b{font-weight:500}
.beat-k .d-dead,.beat-k b.d-dead{color:var(--ash)}
.beat-k .d-live,.beat-k b.d-live{color:var(--chain)}
.beat-big{font-size:clamp(2.4rem,8vw,5.4rem);font-weight:600;line-height:1.06;margin:0;letter-spacing:.005em}
.beat-big.rust{color:var(--rust-lit);font-style:italic;text-shadow:0 0 60px rgba(180,85,42,.35)}
.beat-big.ash{color:#cfcfc6;text-shadow:0 0 50px rgba(139,139,132,.3)}
.beat-big.grail{background:linear-gradient(100deg,#8fd47a 0%,var(--chain) 55%,#bff5c4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(0,200,5,.3))}
.beat-s{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2.2vw,1.3rem);color:#c9c2ae;margin:1.4rem 0 0}

/* headline stamp */
.headline{border:2px solid var(--bone);border-radius:4px;padding:1.05rem 1.25rem;margin:1rem 0;background:rgba(233,226,208,.04)}
.hl-src{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;color:var(--ash);margin:0 0 .5rem}
.hl-text{font-size:1.17rem;font-weight:600;margin:0 0 .6rem;line-height:1.35}
.hl-link{font-family:var(--mono);font-size:.75rem}
.stamp-target{transform:scale(1.6);opacity:0;transition:transform .5s cubic-bezier(.2,1.2,.3,1),opacity .4s ease}
.stamp-target.stamped{transform:scale(1);opacity:1}

/* rings */
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem}
.ring{border:1px solid var(--line);border-top:2px solid var(--gold-dim);border-radius:8px;padding:.9rem 1rem;
  background:linear-gradient(180deg,rgba(201,162,39,.05),rgba(7,9,12,.4));
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ring:hover{transform:translateY(-3px);border-top-color:var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.ring b{font-family:var(--mono);font-size:.74rem;color:var(--gold);letter-spacing:.06em}
.ring p{font-size:.87rem;color:#d9d2bf;margin:.5rem 0}
.ring a{font-family:var(--mono);font-size:.65rem;color:var(--ash)}
.ring.dead{border-top-color:rgba(139,139,132,.6)}
.ring.dead b{color:var(--ash)}
.ring.chain{border-top-color:rgba(0,200,5,.55)}
.ring.chain b{color:var(--chain)}

/* two greens */
.g{padding:.06em .38em;border-radius:3px;font-weight:600;white-space:nowrap}
.g.lin{background:#195905;color:#dff3d0}
.g.chn{background:#00C805;color:#03210a}
.sw{display:inline-block;width:.85em;height:.85em;border-radius:2px;vertical-align:-.08em;margin-right:.25em}
.sw.lin{background:#195905}
.sw.chn{background:#00C805}

/* grove */
#plantForm{display:flex;gap:.65rem;margin:1.1rem 0 .6rem;flex-wrap:wrap}
#leafName{flex:1;min-width:12rem;background:rgba(233,226,208,.06);border:1px solid var(--line);border-radius:5px;
  color:var(--bone);font-family:var(--mono);font-size:.9rem;padding:.75rem .9rem;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
#leafName::placeholder{color:#6f6e66}
#leafName:focus{outline:none;border-color:var(--lincoln-lit);box-shadow:0 0 0 3px rgba(47,138,14,.25)}
#plantBtn,#cardBtn,#tweetBtn{font-family:var(--mono);font-size:.78rem;letter-spacing:.07em;border:none;border-radius:5px;
  padding:.78rem 1.1rem;cursor:pointer;background:var(--lincoln-lit);color:#06120a;font-weight:600;text-decoration:none;display:inline-block;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
#plantBtn:hover,#cardBtn:hover,#tweetBtn:hover{background:var(--chain);transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,200,5,.28)}
#plantBtn:focus-visible,#cardBtn:focus-visible,#tweetBtn:focus-visible,#leafName:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#planted{margin:.9rem 0}
.planted-msg{color:#d7f3c8}
.planted-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.55rem}
.planted-hint{font-style:italic;color:var(--ash);font-size:.88rem;margin:.9rem 0 0}
.grove-meta{font-family:var(--mono);font-size:.72rem;color:var(--ash);margin-top:1.1rem}
.grove-meta .sep{margin:0 .5rem}
#heartbeat{color:var(--chain)}

/* receipts */
.receipts{list-style:none;margin:0;padding:0}
.receipts li{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.95rem;align-items:baseline;
  padding:.85rem .2rem;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.receipts li:hover{background:rgba(201,162,39,.04)}
.r-date{font-family:var(--mono);font-size:.7rem;color:var(--gold);letter-spacing:.05em}
.r-quote{margin:0;font-size:.96rem;color:#d9d2bf}
.receipts a{font-family:var(--mono);font-size:.72rem;white-space:nowrap}
@media(max-width:640px){.receipts li{grid-template-columns:1fr;gap:.3rem}.receipts a{justify-self:start}}

/* token */
.token-slots{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.slot{font-family:var(--mono);font-size:.75rem;padding:.7rem 1.05rem;border:1px dashed var(--line);
  border-radius:5px;color:var(--ash);text-decoration:none;cursor:not-allowed}

/* footer */
footer{position:relative;z-index:10;padding:2.4rem 6vw 3.2rem;color:var(--ash);font-size:.83rem;max-width:48rem}
.foot-mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em}
footer a{color:var(--ash)}

/* ── reveals: visible by default (JS-off safe); JS gates then IO reveals with stagger ── */
html.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal>*{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in>*{opacity:1;transform:none}
html.js .reveal.in>*:nth-child(1){transition-delay:.05s}
html.js .reveal.in>*:nth-child(2){transition-delay:.14s}
html.js .reveal.in>*:nth-child(3){transition-delay:.23s}
html.js .reveal.in>*:nth-child(4){transition-delay:.32s}
html.js .reveal.in>*:nth-child(5){transition-delay:.41s}
html.js .reveal.in>*:nth-child(6){transition-delay:.5s}
html.js .beat .reveal, html.js .beat.reveal{transform:none}
html.js .beat .beat-big{filter:blur(10px) ;opacity:0;transform:scale(.965);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
html.js .beat .reveal.in .beat-big, html.js .beat.reveal.in .beat-big{opacity:1;transform:none}
html.js .beat .reveal.in .beat-big.rust{filter:blur(0) drop-shadow(0 0 40px rgba(180,85,42,.25))}
html.js .beat .reveal.in .beat-big.ash{filter:blur(0)}
html.js .beat .reveal.in .beat-big.grail{filter:blur(0) drop-shadow(0 0 34px rgba(0,200,5,.3))}

/* reduced motion: final states, no theater */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  #oak #treeGroup{animation:none}
  #aurora{animation:none}
  .scroll-hint .chev{animation:none}
  html.js .reveal,html.js .reveal>*,html.js .beat .beat-big{opacity:1;transform:none;transition:none;filter:none}
  .stamp-target{transform:none;opacity:1;transition:none}
  #oak .leaf{transform:scale(1);transition:none}
  #oak .leaf.mine{animation:none}
  #oak .prop{transition:none}
  body,#stars,#aurora,#fog,#moon,#oak{transition:none}
  .pl{display:none}
}

@media(max-width:640px){
  body{font-size:16px}
  .act{padding:13vh 5vw}
  .panel{padding:1.35rem 1.2rem}
  .panel.side{margin-left:0}
  #oak{height:70vh}
  #bar{font-size:.62rem;gap:.5rem}
  .bar-ca{display:none}
  #wayfinder{display:none}
  #moon{width:72px;height:72px;right:9%;top:7%}
  .beat{min-height:72vh;padding:14vh 6vw}
  .lk-sub{font-size:.92rem}
}