/* =========================================================
   Johana — visual system  (forest / walnut / burgundy / ivory / gold)
   ========================================================= */
:root{
  --forest-deep:#0a1611; --forest:#12261c; --forest-mid:#1b3628; --forest-soft:#2c4c39;
  --walnut:#6b4a32; --walnut-dark:#42301f;
  --burgundy:#7b1e2b; --burgundy-bright:#a63142;
  --ivory:#f4efe3; --ivory-dim:#cfc7b6;
  --gold:#c9a24a; --gold-soft:#e0c079;
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --shadow-md:0 10px 30px rgba(0,0,0,.4);
  --ring:0 0 0 2px var(--forest-deep),0 0 0 4px var(--gold);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hand:"Caveat","Segoe Script",cursive;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--sans);color:var(--ivory);background:var(--forest-deep);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
body.locked{overflow:hidden;}
main{flex:1 0 auto;position:relative;z-index:3;}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0 0 .5em;}
h1{font-size:clamp(2.6rem,8vw,5.4rem);}
h2{font-size:clamp(2rem,5vw,3.4rem);}
h3{font-size:clamp(1.3rem,2.6vw,1.9rem);}
p{margin:0 0 1em;}
a{color:var(--gold-soft);}
::selection{background:var(--burgundy);color:var(--ivory);}
:focus{outline:none;}
:focus-visible{box-shadow:var(--ring);border-radius:4px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:999;background:var(--gold);color:var(--forest-deep);padding:.75rem 1.25rem;border-radius:6px;font-weight:700;transition:top .2s;}
.skip-link:focus{top:1rem;}

.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.28;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;}
#petals{position:fixed;inset:0;pointer-events:none;z-index:1;}

/* ---------- page transitions ---------- */
/* fade OUT only, on a real click — a fade-in can strand the page invisible */
body.page-out{animation:none;opacity:0;transition:opacity .3s ease;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:1rem;
  font-weight:600;letter-spacing:.02em;padding:.95rem 2rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold);text-decoration:none;
  background:linear-gradient(180deg,rgba(201,162,74,.16),rgba(201,162,74,.04));color:var(--gold-soft);
  transition:transform .25s,background .25s,color .25s,box-shadow .25s;}
.btn:hover{background:var(--gold);color:var(--forest-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,162,74,.25);}
.btn--solid{background:var(--burgundy);border-color:var(--burgundy-bright);color:var(--ivory);}
.btn--solid:hover{background:var(--burgundy-bright);color:var(--ivory);}
.btn--ghost{border-color:rgba(244,239,227,.25);background:transparent;color:var(--ivory-dim);padding:.6rem 1.2rem;font-size:.85rem;}
.btn--ghost:hover{background:rgba(244,239,227,.08);color:var(--ivory);box-shadow:none;transform:none;}

/* ---------- nav ---------- */
#nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(10,22,17,.86);backdrop-filter:blur(10px);
  border:1px solid transparent;border-bottom-color:rgba(244,239,227,.06);
  transition:top .34s cubic-bezier(.22,1,.36,1),margin .34s cubic-bezier(.22,1,.36,1),padding .34s cubic-bezier(.22,1,.36,1),border-radius .34s cubic-bezier(.22,1,.36,1),background .34s ease,box-shadow .34s ease;}
body.is-cover #nav{position:fixed;left:0;right:0;background:transparent;border:0;backdrop-filter:none;}
#nav.nav-scrolled{top:12px;margin-inline:clamp(12px,2.2vw,34px);padding-block:.62rem;border:1px solid rgba(179,222,205,.18);border-radius:8px;background:rgba(4,25,29,.92);box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:blur(18px) saturate(1.25);}
body.is-cover #nav.nav-scrolled{left:clamp(12px,2.2vw,34px);right:clamp(12px,2.2vw,34px);margin-inline:0;background:rgba(4,25,29,.92);border:1px solid rgba(179,222,205,.18);}
#nav.nav-scrolled .brand{font-size:1.18rem;}
.brand{font-family:var(--serif);font-size:1.35rem;color:var(--gold);text-decoration:none;letter-spacing:.06em;}
.brand span{color:var(--ivory-dim);font-size:.7em;letter-spacing:.2em;text-transform:uppercase;}
.nav-links{display:flex;gap:.25rem;flex-wrap:wrap;}
.nav-links a{color:var(--ivory-dim);text-decoration:none;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.5rem .7rem;border-radius:999px;transition:.2s;}
.nav-links a:hover,.nav-links a.active{color:var(--gold);background:rgba(201,162,74,.1);}
.nav-tools{display:flex;align-items:center;gap:.5rem;}
#navToggle{display:none;}
@media(max-width:900px){
  .nav-links{position:fixed;top:0;right:0;bottom:0;width:min(78vw,20rem);flex-direction:column;
    gap:.2rem;justify-content:center;background:var(--forest);padding:2rem;
    transform:translateX(100%);transition:transform .35s ease;box-shadow:var(--shadow-lg);z-index:70;}
  .nav-links.open{transform:none;}
  .nav-links a{font-size:1rem;padding:.8rem;}
  #navToggle{display:inline-flex;}
}

/* ---------- sections ---------- */
.section{padding:clamp(3.5rem,9vw,7rem) var(--pad);position:relative;}
.wrap{max-width:var(--maxw);margin:0 auto;}
.section--alt{background:linear-gradient(180deg,var(--forest-deep),var(--forest) 50%,var(--forest-deep));}
.eyebrow{font-family:var(--hand);color:var(--gold);font-size:1.5rem;margin-bottom:.2rem;}
.lede{color:var(--ivory-dim);max-width:44rem;font-size:1.05rem;}
.section-head{margin-bottom:clamp(2rem,5vw,3.5rem);}

/* page header block */
.page-head{padding:clamp(3rem,8vw,5.5rem) var(--pad) 0;}
.page-head .wrap{max-width:var(--maxw);}
.page-num{font-family:var(--hand);color:var(--gold);font-size:1.4rem;letter-spacing:.1em;}

html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;}
html.js .reveal.in{opacity:1;transform:none;}

/* ---------- cover (index) ---------- */
.cover{min-height:100vh;display:grid;place-items:center;text-align:center;padding:var(--pad);
  position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 10%,#1e3d2c 0%,var(--forest) 45%,var(--forest-deep) 100%);}
.cover-inner{max-width:46rem;position:relative;z-index:2;}
.kicker{font-family:var(--hand);font-size:clamp(1.4rem,4vw,2rem);color:var(--gold);margin-bottom:.4rem;}
.cover h1{background:linear-gradient(180deg,var(--ivory),var(--ivory-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.35em;}
.cover .lede{margin:0 auto 2.4rem;max-width:34rem;}
.cover-note{font-size:.82rem;color:rgba(207,199,182,.55);margin-top:2rem;}
.cover-arch{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;opacity:.42;}
.cover-arch svg{position:absolute;bottom:-2%;left:50%;transform:translateX(-50%);width:min(140vh,190vw);}
.cover-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;}

/* ---------- since counter ---------- */
.since{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:2rem 0;}
.since-unit{min-width:76px;padding:.9rem .6rem;border-radius:12px;
  background:linear-gradient(160deg,rgba(43,76,57,.55),rgba(12,27,20,.55));
  border:1px solid rgba(201,162,74,.18);}
.since-unit b{display:block;font-family:var(--serif);font-size:2rem;color:var(--ivory);line-height:1;}
.since-unit span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}

/* ---------- distance ---------- */
.dist{display:grid;gap:1.5rem;align-items:center;grid-template-columns:1fr;
  padding:clamp(1.5rem,4vw,2.5rem);border-radius:18px;
  background:linear-gradient(160deg,rgba(43,76,57,.4),rgba(12,27,20,.6));
  border:1px solid rgba(244,239,227,.08);}
@media(min-width:780px){.dist{grid-template-columns:1fr auto 1fr;}}
.dist-end{text-align:center;}
.dist-end .who{font-family:var(--serif);font-size:1.6rem;color:var(--ivory);letter-spacing:.02em;}
.dist-end .place{color:var(--gold);font-size:.95rem;}
.dist-end .state{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-dim);}
.dist-mid{text-align:center;position:relative;padding:1rem 2rem;}
.dist-mid .miles{font-family:var(--serif);font-size:2.4rem;color:var(--gold);line-height:1;}
.dist-mid .mnote{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);}
.dist-line{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:.8rem 0;}
.dist-close{text-align:center;color:var(--ivory-dim);font-family:var(--hand);font-size:1.4rem;margin-top:1.2rem;}

/* ---------- garden ---------- */
#gardenStage{position:relative;width:100%;aspect-ratio:16/9;min-height:440px;border-radius:20px;
  overflow:hidden;border:1px solid rgba(201,162,74,.18);
  background:radial-gradient(60% 50% at 50% 105%,rgba(44,76,57,.9),transparent 70%),
             radial-gradient(90% 70% at 50% -10%,rgba(30,61,44,.8),transparent 65%),
             linear-gradient(180deg,#0c1b14,#0a1611);
  box-shadow:var(--shadow-lg);}
.garden-fog{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 40% at var(--mx,50%) var(--my,50%),rgba(201,162,74,.09),transparent 70%);
  transition:background .4s;}
.garden-ground{position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(10,22,17,.85));}
.spot{position:absolute;transform:translate(-50%,-50%);
  width:clamp(46px,6vw,74px);height:clamp(46px,6vw,74px);display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;border-radius:50%;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));}
.spot::after{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,74,.3),transparent 65%);opacity:0;transition:opacity .35s;}
.spot:hover,.spot:focus-visible{transform:translate(-50%,-50%) scale(1.16);}
.spot:hover::after,.spot:focus-visible::after{opacity:1;}
.spot svg{width:100%;height:100%;position:relative;z-index:1;}
.firefly{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold-soft);
  pointer-events:none;box-shadow:0 0 8px 2px rgba(224,192,121,.55);animation:drift linear infinite;}
@keyframes drift{0%{transform:translate(0,0);opacity:0;}10%,90%{opacity:.85;}100%{transform:translate(var(--dx),var(--dy));opacity:0;}}
.garden-hint{text-align:center;color:var(--ivory-dim);font-family:var(--hand);font-size:1.35rem;margin-top:1.2rem;}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:var(--pad);
  background:rgba(6,14,10,.86);backdrop-filter:blur(6px);}
#modal.open{display:grid;}
.modal-card{position:relative;max-width:34rem;width:100%;
  background:linear-gradient(165deg,#1b3628,#12261c);border:1px solid rgba(201,162,74,.3);
  border-radius:18px;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-lg);
  animation:pop .35s cubic-bezier(.34,1.4,.64,1);max-height:85vh;overflow-y:auto;}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px);}to{opacity:1;transform:none;}}
.modal-card h3{color:var(--ivory);margin-bottom:.4rem;}
.modal-close{position:absolute;top:.7rem;right:.7rem;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.3);border:1px solid rgba(244,239,227,.15);color:var(--ivory-dim);
  font-size:1.3rem;line-height:1;cursor:pointer;}
.modal-close:hover{background:var(--burgundy);color:var(--ivory);}
.modal-emblem{width:64px;height:64px;margin-bottom:.8rem;}

.ph{position:relative;display:grid;place-items:center;text-align:center;min-height:200px;padding:1.5rem;
  border-radius:10px;color:var(--ivory-dim);font-size:.85rem;
  background:repeating-linear-gradient(45deg,rgba(107,74,50,.18) 0 12px,transparent 12px 24px),rgba(18,38,28,.6);
  border:1px dashed rgba(201,162,74,.45);}
.ph b{display:block;font-family:var(--hand);font-size:1.3rem;color:var(--gold);margin-bottom:.3rem;}

/* ---------- music ---------- */
.feature{display:grid;gap:1.5rem;align-items:center;grid-template-columns:1fr;margin-bottom:2.5rem;
  padding:clamp(1.5rem,4vw,2.5rem);border-radius:18px;
  background:linear-gradient(160deg,rgba(123,30,43,.35),rgba(12,27,20,.6));
  border:1px solid rgba(201,162,74,.25);}
@media(min-width:700px){.feature{grid-template-columns:auto 1fr;}}
.feature .bigdisc{width:130px;height:130px;border-radius:50%;justify-self:center;
  background:radial-gradient(circle,#0a1611 0 16%,#7b1e2b 17% 100%);box-shadow:var(--shadow-md);}
body:not(.no-motion) .feature:hover .bigdisc{animation:spin 4s linear infinite;}
.feature .lab{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.feature h3{margin:.2rem 0 .1rem;}
.feature .artist{color:var(--ivory-dim);}
.records{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.record{position:relative;padding:1.3rem;border-radius:12px;display:flex;gap:1rem;align-items:center;
  background:linear-gradient(160deg,rgba(27,54,40,.7),rgba(12,27,20,.7));
  border:1px solid rgba(244,239,227,.08);text-decoration:none;color:inherit;
  transition:transform .3s,border-color .3s;}
.record:hover{transform:translateY(-4px);border-color:rgba(201,162,74,.4);}
.disc{flex:0 0 auto;width:56px;height:56px;border-radius:50%;position:relative;
  background:radial-gradient(circle,#0a1611 0 18%,var(--c,#7b1e2b) 19% 100%);box-shadow:0 4px 12px rgba(0,0,0,.5);}
.disc::after{content:"";position:absolute;inset:26%;border-radius:50%;border:1px solid rgba(0,0,0,.35);}
body:not(.no-motion) .record:hover .disc{animation:spin 3s linear infinite;}
body:not(.no-motion) .feature.is-playing .bigdisc,body:not(.no-motion) .record.is-playing .disc{animation:spin 2.8s linear infinite;animation-play-state:running;}
@keyframes spin{to{transform:rotate(360deg);}}
.record .a{font-family:var(--serif);font-size:1.25rem;color:var(--ivory);line-height:1.15;}
.record .n{font-size:.82rem;color:var(--ivory-dim);}
.record .no-link{font-size:.7rem;color:rgba(201,162,74,.7);letter-spacing:.1em;text-transform:uppercase;}

/* ---------- gallery ---------- */
#lightbox{position:fixed;inset:0;z-index:210;display:none;place-items:center;
  background:rgba(4,10,7,.94);padding:var(--pad);}
#lightbox.open{display:grid;}
#lightbox figure{margin:0;max-width:min(70rem,100%);text-align:center;}
#lightbox img{max-width:100%;max-height:74vh;border-radius:6px;box-shadow:var(--shadow-lg);}
#lightbox figcaption{font-family:var(--hand);font-size:1.6rem;color:var(--gold-soft);margin-top:1rem;}

/* her-photo frame */
.hers{margin-top:3rem;display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:center;}
@media(min-width:760px){.hers{grid-template-columns:300px 1fr;}}
#dropFrame{background:var(--ivory);padding:.8rem .8rem 2.6rem;border-radius:3px;box-shadow:var(--shadow-md);
  cursor:pointer;border:0;width:100%;display:block;}
#dropFrame .frame{aspect-ratio:1;overflow:hidden;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#2c4c39 0 10px,#243d2f 10px 20px);}
#dropFrame .frame img{width:100%;height:100%;object-fit:cover;}
#dropFrame .cap{font-family:var(--hand);font-size:1.2rem;color:#2b2b2b;margin:.5rem 0 0;text-align:center;}

/* ---------- side quest ---------- */
.quest{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.quest-step{padding:1.4rem;border-radius:14px;background:rgba(27,54,40,.45);border:1px solid rgba(244,239,227,.08);}
.quest-step h4{font-family:var(--serif);color:var(--gold);font-size:1.3rem;margin-bottom:.8rem;}
.opt{display:block;width:100%;text-align:left;margin-bottom:.5rem;padding:.7rem 1rem;border-radius:8px;
  cursor:pointer;background:rgba(10,22,17,.5);border:1px solid rgba(244,239,227,.1);
  color:var(--ivory-dim);font-family:var(--sans);font-size:.92rem;transition:.2s;}
.opt:hover{border-color:var(--gold);color:var(--ivory);}
.opt.on{background:var(--burgundy);border-color:var(--burgundy-bright);color:var(--ivory);}
.quest-out{margin-top:1.6rem;padding:1.4rem;border-radius:12px;text-align:center;
  border:1px dashed rgba(201,162,74,.4);color:var(--ivory-dim);font-family:var(--hand);font-size:1.5rem;}
.quest-out b{color:var(--gold);}

/* ---------- games ---------- */
.game-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.tab{padding:.6rem 1.2rem;border-radius:999px;cursor:pointer;font-size:.85rem;background:transparent;
  border:1px solid rgba(244,239,227,.18);color:var(--ivory-dim);font-family:var(--sans);transition:.2s;}
.tab:hover{border-color:var(--gold);color:var(--ivory);}
.tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--forest-deep);font-weight:700;}
.panel{display:none;}
.panel.on{display:block;animation:fade .4s;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.game-box{padding:clamp(1.2rem,3vw,2rem);border-radius:16px;
  background:linear-gradient(165deg,rgba(27,54,40,.55),rgba(12,27,20,.55));border:1px solid rgba(244,239,227,.08);}
.game-help{font-size:.85rem;color:var(--ivory-dim);margin-bottom:1rem;}
canvas.game{width:100%;display:block;border-radius:12px;background:#0c1b14;
  border:1px solid rgba(201,162,74,.15);touch-action:none;}
.game-bar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1rem;font-size:.85rem;color:var(--ivory-dim);}
.game-bar .score{color:var(--gold);font-weight:700;}
.field-wrap{max-width:520px;margin:0 auto 1.2rem;}
.field-wrap svg{width:100%;display:block;border-radius:8px;}
.q-text{font-size:1.05rem;color:var(--ivory);max-width:44rem;}
.q-opts{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:1.2rem 0;}
.q-opts .opt{margin:0;text-align:center;font-weight:600;}
.opt.right{background:rgba(44,110,70,.55);border-color:#4caf7d;color:#eafff2;}
.opt.wrong{background:rgba(123,30,43,.55);border-color:var(--burgundy-bright);color:#ffe6ea;}
.q-why{padding:1rem;border-radius:10px;background:rgba(10,22,17,.6);border-left:3px solid var(--gold);
  font-size:.92rem;color:var(--ivory-dim);}
.vase-area{position:relative;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);}
@media(min-width:820px){.vase-area{grid-template-columns:1fr 1.1fr;}}
.flower-tray{display:flex;gap:.8rem;flex-wrap:wrap;align-content:flex-start;padding:1rem;border-radius:12px;
  background:rgba(10,22,17,.4);border:1px dashed rgba(201,162,74,.3);}
.bloom{width:56px;height:56px;border:0;background:none;cursor:grab;padding:0;border-radius:50%;transition:transform .2s;}
.bloom:hover,.bloom:focus-visible{transform:scale(1.15) rotate(6deg);}
#vase{position:relative;min-height:340px;border-radius:12px;overflow:hidden;
  background:radial-gradient(70% 50% at 50% 100%,rgba(107,74,50,.4),transparent 70%),rgba(10,22,17,.4);
  border:1px solid rgba(244,239,227,.08);}
#vase .placed{position:absolute;width:56px;height:56px;transform:translate(-50%,-50%);pointer-events:none;}
.vase-shape{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;opacity:.9;}

/* ---------- footer ---------- */
footer{flex-shrink:0;padding:2.5rem var(--pad) 3rem;text-align:center;color:rgba(207,199,182,.4);
  font-size:.8rem;border-top:1px solid rgba(244,239,227,.06);position:relative;z-index:3;}
footer .clock{font-family:var(--serif);font-size:1.1rem;color:rgba(201,162,74,.6);letter-spacing:.1em;}
.egg{cursor:pointer;border:0;background:none;color:inherit;font:inherit;padding:0;}
.egg:hover{color:var(--gold);}
.pager{display:flex;justify-content:space-between;gap:1rem;max-width:var(--maxw);margin:0 auto 2.5rem;}
.pager-link{text-decoration:none;color:var(--ivory-dim);padding:1rem 1.4rem;border-radius:12px;
  border:1px solid rgba(244,239,227,.1);transition:.25s;text-align:left;min-width:9rem;}
.pager-link:hover{border-color:var(--gold);color:var(--ivory);background:rgba(201,162,74,.06);}
.pager-link span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.pager-link b{font-family:var(--serif);font-size:1.3rem;font-weight:600;}
.pager-next{text-align:right;}

#toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,150%);z-index:300;
  padding:.8rem 1.5rem;border-radius:999px;background:var(--forest-mid);border:1px solid var(--gold);
  color:var(--gold-soft);font-size:.9rem;box-shadow:var(--shadow-md);
  transition:transform .4s cubic-bezier(.34,1.4,.64,1);}
#toast.show{transform:translate(-50%,0);}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1!important;transform:none!important;}
  .firefly{display:none;}
  body{opacity:1!important;}
}
body.no-motion .firefly,body.no-motion #petals{display:none;}
body.no-motion .reveal{opacity:1!important;transform:none!important;}

/* =========================================================
   2026 refinement — quiet paper, ink, and jade
   ========================================================= */
:root{
  --forest-deep:#f1f2ed;--forest:#e8ece5;--forest-mid:#d9e0d8;--forest-soft:#bdc9be;
  --walnut:#766a5c;--walnut-dark:#51483e;
  --burgundy:#176b57;--burgundy-bright:#2b806a;
  --ivory:#211f1c;--ivory-dim:#6e6961;
  --gold:#176b57;--gold-soft:#267863;
  --shadow-lg:0 28px 70px rgba(55,44,35,.12);
  --shadow-md:0 14px 35px rgba(55,44,35,.09);
  --ring:0 0 0 2px #f1f2ed,0 0 0 4px #176b57;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hand:"Instrument Serif",Georgia,serif;
  --maxw:1240px;
}
body{background:var(--forest-deep);color:var(--ivory);font-size:15px;letter-spacing:-.005em;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");}
.grain{display:none;}
h1,h2,h3,h4{font-family:var(--sans);font-weight:650;letter-spacing:-.055em;text-wrap:balance;}
h1{font-size:clamp(3.5rem,8vw,7.7rem);line-height:.91;}
h2{font-size:clamp(2.45rem,5.5vw,5rem);line-height:.96;}
h3{font-size:clamp(1.45rem,2.8vw,2rem);}
p{text-wrap:pretty;}
a{color:var(--burgundy);}
::selection{background:#bdd8ce;color:#102a23;}

.btn{min-height:48px;padding:.8rem 1.35rem;border-radius:4px;border:1px solid var(--burgundy);background:var(--burgundy);color:#fffaf7;font-size:.82rem;letter-spacing:.01em;box-shadow:none;}
.btn:hover{background:#0f4f40;color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,107,87,.16);}
.btn:active{transform:scale(.98);}
.btn--ghost{border-color:#cfc7bc;background:transparent;color:var(--ivory);padding:.8rem 1.2rem;font-size:.78rem;}
.btn--ghost:hover{background:#e6e0d7;color:var(--ivory);border-color:#b6ac9e;transform:translateY(-2px);}

#nav{min-height:72px;padding:.9rem clamp(1.1rem,4vw,3rem);background:rgba(243,240,233,.9);border-bottom:1px solid rgba(66,54,44,.1);backdrop-filter:blur(16px);}
body.is-cover #nav{background:rgba(243,240,233,.82);border-bottom:1px solid rgba(66,54,44,.08);backdrop-filter:blur(14px);}
.brand{font-family:var(--sans);font-size:1rem;font-weight:750;letter-spacing:-.03em;color:var(--ivory);}
.brand span{font-family:var(--serif);font-size:1.05em;font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;color:var(--burgundy);margin-left:.25rem;}
.nav-links{gap:1.6rem;}
.nav-links a{padding:.35rem 0;border-radius:0;color:var(--ivory-dim);font-size:.68rem;font-weight:650;letter-spacing:.04em;text-transform:none;border-bottom:1px solid transparent;}
.nav-links a:hover,.nav-links a.active{color:var(--ivory);background:none;border-bottom-color:var(--burgundy);}

.section{padding:clamp(5rem,11vw,10rem) var(--pad);}
.section--alt{background:#e8e3da;}
.eyebrow,.page-num{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--burgundy);letter-spacing:0;text-transform:none;}
.eyebrow{font-size:1.4rem;}
.lede{max-width:39rem;color:var(--ivory-dim);font-size:clamp(1rem,1.7vw,1.15rem);line-height:1.7;}
.page-head{padding:clamp(8rem,14vw,12rem) var(--pad) 1rem;}
.page-head .wrap{border-top:1px solid #c9c1b5;padding-top:1.5rem;}
.page-num{font-size:1.1rem;margin-bottom:clamp(2rem,6vw,5rem);}
.page-head h1{max-width:10ch;}

.cover{min-height:100dvh;text-align:left;place-items:end start;padding:clamp(8rem,14vw,12rem) max(var(--pad),calc((100vw - var(--maxw))/2));background:var(--forest-deep);}
.cover::before{content:"for the person I keep choosing";position:absolute;right:max(var(--pad),calc((100vw - var(--maxw))/2));top:16%;max-width:12rem;padding-top:.65rem;border-top:1px solid #c9c1b5;color:var(--ivory-dim);font:italic 1.05rem/1.4 var(--serif);}
.cover-inner{max-width:68rem;}
.kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);margin-bottom:1.7rem;}
.cover h1{max-width:10ch;background:none;color:var(--ivory);margin-bottom:.28em;}
.cover .lede{margin:0 0 2.4rem;max-width:35rem;}
.cover-cta{justify-content:flex-start;}
.cover-note{font-size:.74rem;color:#8b857d;margin-top:1.5rem;}
.cover-arch{opacity:1;inset:auto -3vw -12vh auto;width:min(46vw,650px);height:min(56vw,760px);border:1px solid #cec6ba;border-radius:50% 50% 0 0;transform:rotate(3deg);}
.cover-arch svg{display:none;}
.cover-arch::before,.cover-arch::after{content:"";position:absolute;border:1px solid rgba(23,107,87,.3);border-radius:50%;}
.cover-arch::before{width:55%;aspect-ratio:1;right:8%;top:14%;}
.cover-arch::after{width:18%;aspect-ratio:1;left:12%;bottom:17%;background:var(--burgundy);border:0;}

.since{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;max-width:60rem;margin:3rem auto;}
.since-unit{min-width:0;padding:1.4rem .7rem;border:0;border-left:1px solid #c9c1b5;border-radius:0;background:none;}
.since-unit:last-child{border-right:1px solid #c9c1b5;}
.since-unit b{font-family:var(--sans);font-size:clamp(2.2rem,5vw,4.8rem);font-weight:650;letter-spacing:-.06em;color:var(--ivory);font-variant-numeric:tabular-nums;}
.since-unit span{font-size:.61rem;color:var(--ivory-dim);letter-spacing:.08em;}

.dist{grid-template-columns:1fr auto 1fr;padding:clamp(2rem,5vw,4.5rem);border:0;border-radius:3px;background:#e6ded2;box-shadow:none;}
.dist-end .who{font-family:var(--sans);font-weight:650;letter-spacing:-.04em;color:var(--ivory);}
.dist-end .place{color:var(--burgundy);}
.dist-end .state,.dist-mid .mnote{color:var(--ivory-dim);}
.dist-mid .miles{font-family:var(--sans);font-weight:650;letter-spacing:-.05em;color:var(--burgundy);}
.dist-line{background:#aa9e90;}
.dist-close{font:italic 1.25rem var(--serif);color:var(--ivory-dim);}
.car-route{display:grid;grid-template-columns:auto minmax(9rem,18rem) auto;align-items:center;gap:.7rem;margin:1.6rem -4rem .9rem;color:#67736b;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.route-road{position:relative;height:30px;display:block;overflow:visible;}
.route-road::before{content:"";position:absolute;left:0;right:0;top:17px;height:1px;background:repeating-linear-gradient(90deg,#8ba096 0 8px,transparent 8px 14px);}
.route-road::after{content:"";position:absolute;right:-2px;top:13px;width:6px;height:6px;border-top:1px solid #789084;border-right:1px solid #789084;transform:rotate(45deg);}
.route-car{position:absolute;z-index:1;left:0;top:0;width:40px;color:var(--burgundy);filter:drop-shadow(0 4px 5px rgba(23,107,87,.16));animation:queens-to-staten 6.5s cubic-bezier(.65,0,.35,1) infinite;}
.route-car svg{display:block;width:100%;overflow:visible;}
.route-car path{fill:#e8ece5;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.route-car circle{fill:#f1f2ed;stroke:currentColor;stroke-width:1.5;}
@keyframes queens-to-staten{
  0%,12%{left:0;transform:translateX(0);}
  45%{transform:translateY(-3px);}
  82%,100%{left:100%;transform:translateX(-100%);}
}
body.no-motion .route-car{animation:none;left:50%;transform:translateX(-50%);}

#gardenStage{aspect-ratio:16/8;min-height:460px;border:0;border-radius:3px;background:linear-gradient(180deg,#ded8cd,#d7cfc3);box-shadow:none;}
#gardenStage::before{content:"";position:absolute;inset:8%;border:1px solid rgba(77,65,54,.13);}
.garden-fog{background:radial-gradient(45% 40% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 72%);}
.garden-ground{display:none;}
.spot{width:clamp(50px,6vw,72px);height:clamp(50px,6vw,72px);color:#5b5147;filter:none;border:1px solid rgba(81,72,62,.22);background:rgba(243,240,233,.72);padding:12px;border-radius:50%;}
.spot::after{inset:-7px;border:1px solid rgba(23,107,87,.25);background:none;}
.spot:hover,.spot:focus-visible{color:var(--burgundy);transform:translate(-50%,-50%) scale(1.08);background:#f8f5ef;}
.firefly{background:var(--burgundy);box-shadow:none;width:2px;height:2px;}
.garden-hint{font:italic 1.15rem var(--serif);color:var(--ivory-dim);}

.feature,.record,.quest-step,.game-box,.modal-card{border:0;border-radius:3px;background:#e8e3da;box-shadow:none;}
.feature .lab,.record .no-link,.game-bar .score{color:var(--burgundy);}
.feature h3,.record .a,.q-text{color:var(--ivory);font-family:var(--sans);font-weight:620;letter-spacing:-.035em;}
.feature .artist,.record .n,.game-help{color:var(--ivory-dim);}
.ph{border:1px solid #c2b8aa;border-radius:3px;background:none;color:var(--ivory-dim);}.ph b{font-family:var(--serif);font-style:italic;color:var(--burgundy);}
.feature{background:#ded4c8;}.feature .bigdisc,.disc{box-shadow:none;}
#lightbox figcaption,#dropFrame .cap{font-family:var(--serif);font-style:italic;}
.quest-step h4{font-family:var(--sans);color:var(--ivory);}.opt{border-radius:2px;background:#f2eee7;border-color:#d0c7bb;color:var(--ivory-dim);}.opt:hover{border-color:var(--burgundy);color:var(--ivory);}.opt.on{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}.quest-out{border-color:#b7ab9b;border-radius:2px;font:italic 1.3rem var(--serif);color:var(--ivory-dim);}.quest-out b{color:var(--burgundy);}
.tab{border-radius:2px;border-color:#c9c1b5;color:var(--ivory-dim);}.tab:hover{border-color:var(--burgundy);color:var(--ivory);}.tab[aria-selected="true"]{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
canvas.game{border:0;border-radius:2px;background:#282824;}.q-why{background:#ddd6cc;border-left-color:var(--burgundy);color:var(--ivory-dim);}
.flower-tray,#vase{background:#ddd6cc;border-color:#bdb2a4;border-radius:2px;}
.modal-card{background:#eff1ec;border:1px solid #c3cbc2;}.modal-card h3{color:var(--ivory);}.modal-close{background:transparent;border-color:#c3cbc2;color:var(--ivory-dim);}.modal-close:hover{background:var(--burgundy);color:#fff;}.modal-emblem{color:var(--burgundy);}
#modal{background:rgba(45,39,34,.55);}
footer{color:#8a8379;border-top-color:#d0c8bd;}footer .clock{font-family:var(--sans);color:var(--burgundy);}.egg:hover{color:var(--burgundy);}.pager-link{border-radius:2px;border-color:#ccc3b7;color:var(--ivory-dim);}.pager-link:hover{border-color:var(--burgundy);color:var(--ivory);background:#ebe5dc;}.pager-link span{color:var(--burgundy);}.pager-link b{font-family:var(--sans);font-size:1rem;}
#toast{border-radius:3px;background:#2f2a26;border:0;color:#fff;box-shadow:var(--shadow-md);}

@media(max-width:900px){
  .nav-links{background:#eee9e1;box-shadow:-20px 0 60px rgba(55,44,35,.12);}
  .nav-links a{font-size:1rem;padding:.75rem 0;}
  .cover::before{display:none;}
}
@media(max-width:700px){
  h1{font-size:clamp(3.2rem,15vw,5rem);}
  .cover{padding-bottom:7rem;}
  .cover-arch{width:68vw;height:82vw;right:-30vw;bottom:-8vw;opacity:.65;}
  .since{grid-template-columns:repeat(6,1fr);}
  .since-unit{grid-column:span 2;border-bottom:1px solid #c9c1b5;}
  .since-unit:nth-child(-n+2){grid-column:span 3;}
  .since-unit:nth-child(2){border-right:1px solid #c9c1b5;}
  .dist{grid-template-columns:1fr;padding:2rem 1.2rem;}
  .car-route{margin:1.5rem 0 .75rem;grid-template-columns:auto minmax(7rem,1fr) auto;}
  #gardenStage{min-height:540px;aspect-ratio:auto;}
}

/* =========================================================
   Room identities — depth without losing the clean system
   ========================================================= */
body:not(.page-index) main::before{content:"";position:absolute;top:5.5rem;right:-8rem;width:30rem;height:30rem;border:1px solid rgba(23,107,87,.1);border-radius:48% 52% 43% 57%;pointer-events:none;transform:rotate(18deg);}
body:not(.page-index) main::after{content:"";position:absolute;top:12rem;right:5vw;width:9rem;height:9rem;border-radius:50%;background:rgba(23,107,87,.055);pointer-events:none;}
.page-head .wrap{position:relative;min-height:22rem;display:flex;flex-direction:column;justify-content:flex-end;}
.page-head .wrap::after{position:absolute;right:0;bottom:0;width:min(34vw,22rem);padding:1rem 0;border-top:1px solid #b9c2b8;color:#728078;font:italic 1rem/1.5 var(--serif);text-align:right;}
.page-garden .page-head .wrap::after{content:"fourteen details, planted one by one";}
.page-little .page-head .wrap::after{content:"the things worth remembering are rarely the obvious ones";}
.page-music .page-head .wrap::after{content:"a room for the songs that say it better";}
.page-gallery .page-head .wrap::after{content:"proof that ordinary days do not stay ordinary";}
.page-games .page-head .wrap::after{content:"four small detours, no instruction manual required";}

/* garden: layered paper landscape and botanical marks */
.page-garden .section{padding-top:3rem;}
#gardenStage{isolation:isolate;overflow:hidden;}
#gardenStage::after{content:"";position:absolute;z-index:-1;inset:-10% -5% 0;background:
  radial-gradient(ellipse at 9% 88%,transparent 0 29%,rgba(23,107,87,.09) 30% 30.5%,transparent 31%),
  radial-gradient(ellipse at 39% 110%,transparent 0 38%,rgba(23,107,87,.08) 39% 39.5%,transparent 40%),
  radial-gradient(ellipse at 78% 93%,transparent 0 34%,rgba(23,107,87,.07) 35% 35.5%,transparent 36%),
  linear-gradient(118deg,transparent 46%,rgba(255,255,255,.32) 46.2% 53%,transparent 53.2%);}
.page-garden #gardenStage{box-shadow:0 30px 70px rgba(43,64,53,.12),inset 0 0 0 12px rgba(255,255,255,.2);}

/* little things: a long-form portrait, not a card grid */
.page-little .section{padding-top:clamp(4rem,8vw,8rem);}
.portrait-intro{display:grid;grid-template-columns:minmax(15rem,.7fr) 1.3fr;column-gap:clamp(2rem,8vw,8rem);row-gap:2rem;align-items:start;padding-bottom:clamp(3rem,7vw,6rem);border-bottom:1px solid rgba(197,224,211,.2);}
.portrait-intro .eyebrow{grid-column:1;grid-row:1;}
.portrait-intro h2{max-width:8ch;font-size:clamp(3.2rem,7vw,7.4rem);line-height:.88;letter-spacing:-.055em;}
.portrait-intro h2{grid-column:2;grid-row:1 / span 2;}
.portrait-intro .lede{grid-column:1;grid-row:2;max-width:30rem;}
.story-chapters{display:grid;}
.story-chapter{display:grid;grid-template-columns:minmax(3rem,.18fr) minmax(0,1fr);gap:clamp(1.5rem,6vw,7rem);padding:clamp(3rem,7vw,6rem) 0;border-bottom:1px solid rgba(197,224,211,.18);}
.chapter-num{font-size:.7rem;letter-spacing:.2em;color:#65d6b1;font-variant-numeric:tabular-nums;}
.story-chapter>div{max-width:49rem;}
.story-chapter:nth-child(even)>div{margin-left:auto;width:min(100%,40rem);}
.chapter-label{margin-bottom:1rem;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#d5b86d;}
.story-chapter h3{max-width:18ch;margin-bottom:1.25rem;font-size:clamp(2rem,4.5vw,4.4rem);line-height:.98;letter-spacing:-.045em;text-wrap:balance;}
.story-chapter div>p:last-child{max-width:62ch;color:#b9c8c1;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.9;text-wrap:pretty;}
.detail-section{position:relative;overflow:hidden;background:#321822;}
.detail-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 10%,rgba(173,44,70,.24),transparent 28rem),radial-gradient(circle at 10% 85%,rgba(16,92,82,.23),transparent 30rem);pointer-events:none;}
.detail-section .wrap{position:relative;}
.detail-heading{display:grid;grid-template-columns:.65fr 1.35fr;gap:2rem;align-items:end;margin-bottom:clamp(3rem,7vw,6rem);}
.detail-heading h2{font-size:clamp(3rem,6.5vw,6.5rem);line-height:.9;letter-spacing:-.05em;}
.detail-cloud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,8vw,8rem);}
.detail-cloud p{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;margin:0;padding:1.25rem 0;border-top:1px solid rgba(245,240,229,.16);color:#f5f0e5;line-height:1.55;}
.detail-cloud span{padding-top:.2rem;color:#e6bd78;font-size:.62rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;}

/* music: record-store depth and staggered album tiles */
.page-music .section{padding-top:3rem;}
.page-music .feature{min-height:390px;grid-template-columns:minmax(240px,.75fr) 1.25fr;padding:clamp(2rem,5vw,5rem);position:relative;overflow:hidden;background:#d7e0d8;}
.page-music .feature::after{content:"SIDE A";position:absolute;right:1.5rem;top:1.2rem;font:700 .6rem var(--sans);letter-spacing:.2em;color:#718077;}
.page-music .feature .bigdisc{width:min(270px,30vw);height:auto;aspect-ratio:1;background:repeating-radial-gradient(circle,#151816 0 4px,#252a27 5px 7px);box-shadow:18px 22px 45px rgba(25,33,29,.19);}
.song-carousel{margin-top:clamp(5rem,10vw,9rem);padding:clamp(1.4rem,4vw,3rem);background:#092c34;border:1px solid rgba(121,204,181,.16);}
.song-carousel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(190,219,205,.16);}
.song-nav{display:flex;align-items:center;gap:1rem;}.song-nav>p{color:#83a79a;font-size:.65rem;letter-spacing:.14em;}
.page-music .records{display:block;}
.page-music .record{width:100%;min-height:260px;padding:clamp(2rem,5vw,4rem);background:linear-gradient(135deg,#123f36,#0b3548);}
.page-music .record.song-forward{animation:song-forward .38s cubic-bezier(.22,1,.36,1);}
.page-music .record.song-back{animation:song-back .38s cubic-bezier(.22,1,.36,1);}
@keyframes song-forward{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}}
@keyframes song-back{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:none;}}
.song-arrows{display:flex;gap:.55rem;}
.song-arrows button{width:54px;height:54px;border:1px solid rgba(125,208,184,.25);background:#071f27;color:#dce9e2;font-size:1.2rem;cursor:pointer;transition:.2s;}
.song-arrows button:hover{border-color:#65d6b1;color:#65d6b1;}.song-arrows button:disabled{opacity:.25;cursor:default;}
.page-music .disc{width:76px;height:76px;}

/* gallery: taped, overlapping contact sheet */
.page-gallery .section:first-of-type{padding-top:3rem;}
.memory-book-section{padding:clamp(4rem,8vw,8rem) var(--pad) clamp(7rem,12vw,11rem);background:radial-gradient(circle at 50% 16%,rgba(26,108,85,.2),transparent 32rem),#06181e;}
.book-intro{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2rem;color:#a9bdb5;}
.book-intro>p:last-child{max-width:32rem;text-align:right;}
.memory-book{perspective:1800px;}
.book-spread{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:clamp(620px,65vw,790px);background:#e8e1d2;border-radius:4px 9px 9px 4px;box-shadow:0 40px 100px rgba(0,0,0,.42),0 8px 20px rgba(0,0,0,.24);transform-origin:center;overflow:hidden;}
.book-spread::before{content:"";position:absolute;z-index:4;left:50%;top:0;bottom:0;width:34px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(58,42,27,.13),rgba(255,255,255,.18) 47%,rgba(54,39,26,.16));pointer-events:none;}
.book-spread.turn-forward{animation:book-forward .45s cubic-bezier(.22,1,.36,1);}
.book-spread.turn-back{animation:book-back .45s cubic-bezier(.22,1,.36,1);}
@keyframes book-forward{from{opacity:.45;transform:rotateY(-4deg) translateX(18px);}to{opacity:1;transform:none;}}
@keyframes book-back{from{opacity:.45;transform:rotateY(4deg) translateX(-18px);}to{opacity:1;transform:none;}}
.book-page{position:relative;min-width:0;padding:clamp(1.6rem,3.5vw,3.5rem);color:#19352d;}
.book-page--photos{display:flex;flex-direction:column;background:linear-gradient(100deg,#d9d0bf,#eee8dc 82%);}
.book-page--story{display:flex;flex-direction:column;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(32,75,61,.075) 32px),linear-gradient(100deg,#f0eadf,#e5dccb);}
.page-label{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid rgba(35,67,56,.2);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;}
.page-label span{color:#147b60;font-weight:800;}
.book-photos{display:grid;flex:1;min-height:0;gap:.7rem;}
.book-photos button{position:relative;min-height:0;padding:0;overflow:hidden;border:0;background:#173b32;cursor:zoom-in;box-shadow:0 10px 24px rgba(58,43,28,.2);}
.book-photos img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.book-photos button:hover img{transform:scale(1.025);}
.book-photos button span{position:absolute;left:.8rem;bottom:.7rem;padding:.35rem .5rem;background:rgba(4,20,18,.72);color:#f3eee3;font-size:.62rem;letter-spacing:.04em;}
.book-photos--1{grid-template-columns:1fr;}
.book-photos--2{grid-template-columns:1fr 1fr;}.book-photos--2 button:first-child{transform:rotate(-.7deg);}.book-photos--2 button:last-child{transform:rotate(.7deg);}
.book-photos--3{grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;}.book-photos--3 button:first-child{grid-row:1/-1;}.book-photos--3 button:nth-child(2){transform:rotate(.6deg);}.book-photos--3 button:nth-child(3){transform:rotate(-.5deg);}
.story-kicker{margin-bottom:2rem;color:#19765e;font-size:.65rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;}
.story-date{margin:-1rem 0 1.35rem;color:#6c8077;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.book-page--story h2{max-width:10ch;margin-bottom:2rem;color:#17372e;font-size:clamp(2.5rem,4vw,4.6rem);line-height:.92;letter-spacing:-.045em;}
#bookStory{flex:1;width:100%;min-height:18rem;resize:none;border:0;background:transparent;color:#29453d;font:1.25rem/1.62 var(--serif);outline:0;}
#bookStory::placeholder{color:#74877e;opacity:.65;}
#bookStory:focus{box-shadow:inset 3px 0 #27866d;padding-left:1rem;}
.story-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(35,67,56,.16);}
.story-save{margin:0;color:#687d73;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;}
.book-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:1.5rem;}
.book-controls button,.book-chapters button{border:0;background:none;color:#9eb6ad;font:650 .72rem var(--sans);letter-spacing:.08em;cursor:pointer;transition:color .2s;}
.book-controls button:hover,.book-chapters button:hover{color:#65d6b1;}.book-controls button:disabled{opacity:.25;cursor:default;}.book-controls button:last-child{text-align:right;}.book-controls p{color:#77968a;font-size:.65rem;letter-spacing:.14em;}
.book-chapters{display:flex;justify-content:center;gap:clamp(1rem,3vw,2.5rem);margin-top:2.2rem;flex-wrap:wrap;}
.book-chapters button{padding:.7rem 0;border-bottom:1px solid transparent;}.book-chapters button span{margin-right:.5rem;color:#4da88b;}.book-chapters button.active{color:#f1f3ec;border-color:#65d6b1;}
.next-date-form{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3rem;padding:1px;background:rgba(101,214,177,.24);}
.next-date-form label{display:flex;min-height:160px;flex-direction:column;gap:1rem;padding:1.4rem;background:#08282d;}
.next-date-form label span{color:#69caae;font-size:.65rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;}
.next-date-form input,.next-date-form textarea{flex:1;width:100%;resize:none;border:0;background:transparent;color:#f1f3ed;font:1rem/1.6 var(--sans);outline:0;}
.next-date-form input::placeholder,.next-date-form textarea::placeholder{color:#78968d;}.next-date-form label:focus-within{background:#0c3435;}
.next-date-form .btn{grid-column:1/-1;border-radius:0;min-height:64px;}
.next-date-status{min-height:1.5rem;margin-top:1rem;color:#8eb1a5;font-size:.78rem;}
.page-gallery .hers{margin-top:7rem;grid-template-columns:minmax(260px,.7fr) 1.3fr;gap:clamp(2rem,7vw,7rem);}
.video-memory{margin-top:clamp(7rem,13vw,12rem);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,8vw,8rem);align-items:center;padding:clamp(2rem,6vw,5rem);background:linear-gradient(145deg,#123f36,#0b3044);position:relative;overflow:hidden;}
.video-memory::before{content:"";position:absolute;width:22rem;height:22rem;right:-8rem;top:-8rem;border:1px solid rgba(101,214,177,.2);border-radius:50%;}
.video-memory-copy{position:relative;z-index:1;}
.video-memory-copy h2{max-width:9ch;font-size:clamp(2.6rem,5vw,5rem);}
.video-meta{margin-top:2rem;color:#7ed5b7;font-size:.64rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;}
.video-frame{width:min(100%,28rem);justify-self:center;padding:.75rem;background:#e9e5da;box-shadow:28px 32px 70px rgba(0,0,0,.28);transform:rotate(1.5deg);}
.video-frame video{display:block;width:100%;aspect-ratio:1078/1838;object-fit:cover;background:#06181e;accent-color:#1f9876;}

/* games: a composed play table */
.page-games .section{padding-top:3rem;}
.page-games .game-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#bdc8be;border:1px solid #bdc8be;margin:0;}
.page-games .tab{min-height:76px;border:0;background:#edf0eb;text-align:left;padding:1rem 1.2rem;}
.page-games .tab[aria-selected="true"]{background:var(--burgundy);color:#fff;}
.page-games .game-box{border-radius:0;padding:clamp(2rem,5vw,4.5rem);background:#dfe5df;min-height:540px;box-shadow:0 28px 65px rgba(42,59,49,.1);}
.page-games canvas.game{box-shadow:0 18px 45px rgba(23,32,27,.18);}
.page-games .q-opts .opt{min-height:58px;}

@media(max-width:850px){
  .page-head .wrap::after{display:none;}
  .page-head .wrap{min-height:17rem;}
  .page-music .feature,.page-gallery .hers{grid-template-columns:1fr;}
  .video-memory{grid-template-columns:1fr;}
  .page-games .game-tabs{grid-template-columns:1fr 1fr;}
  .book-spread{grid-template-columns:1fr;min-height:0;}
  .book-spread::before{display:none;}
  .book-page{min-height:650px;}
  .next-date-form{grid-template-columns:1fr;}
  .next-date-form .btn{grid-column:1;}
}
@media(max-width:560px){
  .portrait-intro,.detail-heading{grid-template-columns:1fr;}
  .portrait-intro .eyebrow,.portrait-intro h2,.portrait-intro .lede{grid-column:1;grid-row:auto;}
  .story-chapter{grid-template-columns:2.2rem 1fr;gap:1rem;}
  .detail-cloud{grid-template-columns:1fr;}
  .page-games .game-tabs{grid-template-columns:1fr;}
  .page-games .tab{min-height:56px;}
  .book-intro{display:block;}.book-intro>p:last-child{margin-top:1rem;text-align:left;}
  .book-page{min-height:560px;padding:1.25rem;}
  .book-photos--2,.book-photos--3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
  .book-photos--2 button{grid-column:1/-1;}.book-photos--3 button:first-child{grid-row:auto;grid-column:1/-1;}
  .book-chapters{justify-content:flex-start;}
}

/* floral garden — every discovery is hidden inside the bouquet */
.page-garden #gardenStage{min-height:620px;background:
  radial-gradient(ellipse at 50% 108%,rgba(80,122,90,.38),transparent 55%),
  radial-gradient(circle at 18% 12%,rgba(255,255,255,.07),transparent 24%),
  linear-gradient(165deg,#173d31,#0c291f 72%);box-shadow:0 38px 90px rgba(21,48,37,.22),inset 0 0 0 12px rgba(238,242,234,.06);}
.page-garden #gardenStage::before{inset:1.25rem;border-color:rgba(236,241,233,.12);}
.page-garden #gardenStage::after{z-index:0;inset:0;background:
  radial-gradient(ellipse at 8% 105%,transparent 0 34%,rgba(138,177,143,.12) 34.5% 35%,transparent 35.5%),
  radial-gradient(ellipse at 31% 112%,transparent 0 40%,rgba(138,177,143,.1) 40.5% 41%,transparent 41.5%),
  radial-gradient(ellipse at 64% 108%,transparent 0 36%,rgba(138,177,143,.11) 36.5% 37%,transparent 37.5%),
  radial-gradient(ellipse at 92% 108%,transparent 0 42%,rgba(138,177,143,.1) 42.5% 43%,transparent 43.5%);}
.page-garden .garden-fog{z-index:1;background:radial-gradient(42% 36% at var(--mx,50%) var(--my,50%),rgba(231,239,228,.12),transparent 72%);}
.page-garden .spot{z-index:3;width:clamp(68px,8vw,100px);height:clamp(88px,11vw,132px);padding:0;border:0;border-radius:0;background:none;color:inherit;filter:drop-shadow(0 13px 12px rgba(0,0,0,.24));transform:translate(-50%,-50%) rotate(var(--tilt)) scale(var(--scale));transform-origin:50% 90%;}
.page-garden .spot::after{inset:3% 2% 30%;border:1px solid rgba(245,240,228,.24);background:radial-gradient(circle,rgba(245,240,228,.1),transparent 70%);}
.page-garden .spot:hover,.page-garden .spot:focus-visible{background:none;color:inherit;transform:translate(-50%,-50%) rotate(0) scale(1.13);filter:drop-shadow(0 18px 16px rgba(0,0,0,.3));}
.garden-flower{width:100%;height:100%;overflow:visible;}
.garden-flower .stem{fill:rgba(39,92,66,.72);stroke:#75a17e;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.garden-flower .petals>*{stroke-width:1.1;stroke-linejoin:round;}
.rose-red .garden-flower .petals>*{fill:#6f1f2d;stroke:#a94c59;}
.rose-red .garden-flower .petals>*:nth-child(2){fill:#8b2c3b;}
.rose-red .garden-flower .petals>*:nth-child(3){fill:#50151f;}
.rose-white .garden-flower .petals>*{fill:#f2efe5;stroke:#d6d1c3;}
.rose-white .garden-flower .petals>*:nth-child(2){fill:#fffdf6;}
.rose-white .garden-flower .petals>*:nth-child(3){fill:#ded8c8;}
.peony .garden-flower .petals>*{fill:#d9aaa9;stroke:#efd2cd;fill-opacity:.88;}
.peony .garden-flower .petals>*:nth-child(n+4){fill:#ebc9c3;}
.peony .garden-flower .petals circle{fill:#c98b88;stroke:#f1d8ce;}
.page-garden .firefly{z-index:2;background:#e7d99f;box-shadow:0 0 9px 2px rgba(231,217,159,.38);}
.page-garden .garden-hint{font-size:1.35rem;color:#55665c;}
@media(max-width:700px){
  .page-garden #gardenStage{min-height:720px;}
  .page-garden .spot{width:70px;height:94px;}
}

/* saturated visual world — midnight blue, jade, wine, and clear ivory */
:root{
  --forest-deep:#06181e;--forest:#0b352f;--forest-mid:#124b3e;--forest-soft:#1c7059;
  --burgundy:#1f9876;--burgundy-bright:#36b88f;
  --ivory:#f5f0e5;--ivory-dim:#b9c8c1;
  --gold:#d5b86d;--gold-soft:#ead58f;
  --ring:0 0 0 2px #06181e,0 0 0 4px #65d6b1;
}
body{background:var(--forest-deep);color:var(--ivory);}
body::before{opacity:.32;mix-blend-mode:soft-light;}
main{background:
  radial-gradient(circle at 88% 8%,rgba(19,102,118,.28),transparent 29rem),
  radial-gradient(circle at 3% 38%,rgba(20,111,74,.18),transparent 32rem),var(--forest-deep);}
#nav,body.is-cover #nav{background:rgba(4,19,24,.9);border-color:rgba(197,224,211,.13);}
.brand,.nav-links a:hover,.nav-links a.active{color:var(--ivory);}
.brand span,.nav-links a.active{color:#65d6b1;}
.nav-links a{color:#9fb7ae;}
.nav-links a:hover,.nav-links a.active{border-bottom-color:#65d6b1;}
.btn{background:#1c8c6d;border-color:#34ac87;color:#fff;}
.btn:hover{background:#2db18a;color:#041c17;box-shadow:0 13px 30px rgba(25,185,139,.22);}
.btn--ghost{background:rgba(255,255,255,.035);border-color:rgba(218,235,226,.25);color:#e1e9e3;}
.btn--ghost:hover{background:rgba(68,179,143,.13);border-color:#49b994;color:#fff;}
.page-head .wrap{border-color:rgba(195,222,209,.22);}
.page-head .wrap::after{border-color:rgba(195,222,209,.22);color:#8ea69c;}
.page-num,.eyebrow,.kicker{color:#55c7a3;}
.lede{color:var(--ivory-dim);}
.section--alt{background:#0b2929;}
.cover{background:
  radial-gradient(circle at 76% 28%,rgba(14,112,127,.42),transparent 28%),
  radial-gradient(circle at 88% 78%,rgba(16,123,76,.34),transparent 33%),
  linear-gradient(135deg,#05151b,#082b32 48%,#092c25);}
.cover::before{border-color:rgba(206,228,217,.23);color:#a8bbb3;}
.cover h1{color:#f7f3e9;}
.cover-note{color:#94aaa1;}
.cover-arch{border-color:rgba(106,218,180,.33);background:rgba(3,24,26,.2);}
.cover-arch::before{border-color:rgba(100,220,181,.45);}
.cover-arch::after{background:#a62f49;box-shadow:0 0 60px rgba(197,50,82,.35);}
.since-unit{border-color:rgba(191,219,206,.2);}
.since-unit:last-child{border-color:rgba(191,219,206,.2);}
.since-unit b{color:#f5f0e5;}
.since-unit span{color:#61c5a4;}
.dist{background:linear-gradient(135deg,#0e3d3a,#082d36);box-shadow:0 28px 70px rgba(0,0,0,.2);}
.dist-end .who,.dist-mid .miles{color:#f5f0e5;}
.dist-end .place,.game-bar .score{color:#69d2b0;}
.dist-line{background:linear-gradient(90deg,transparent,#4cb998,transparent);}
.route-car path{fill:#0b352f;}.route-car circle{fill:#06181e;}.route-car{color:#79dfbc;}
.route-road::before{background:repeating-linear-gradient(90deg,#4b8b78 0 8px,transparent 8px 14px);}
.route-start,.route-end{color:#a9beb6;}
.borough-map{display:block;width:clamp(92px,10vw,138px);height:auto;margin:0 auto 1.2rem;overflow:visible;filter:drop-shadow(0 12px 20px rgba(0,0,0,.18));}
.borough-map>path:first-child{fill:rgba(31,152,118,.16);stroke:#58caa7;stroke-width:1.5;stroke-linejoin:round;}
.borough-map--staten>path:first-child{fill:rgba(50,119,150,.18);stroke:#83c8df;}
.borough-map .map-road{fill:none;stroke:rgba(245,240,229,.7);stroke-width:1.2;stroke-dasharray:3 4;stroke-linecap:round;}
.borough-map .map-pin{fill:#d7a94c;stroke:#f7f3e9;stroke-width:1.5;}
.dist-end{position:relative;}
.dist-end::after{content:"";position:absolute;left:50%;top:clamp(92px,10vw,138px);width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#f2d48b;box-shadow:0 0 14px rgba(242,212,139,.75);}
.page-index main>.section:last-child .cover-cta{justify-content:center;}
.feature,.record,.quest-step,.game-box,.modal-card{background:#0d3433;color:var(--ivory);}
.feature h3,.record .a,.q-text,.quest-step h4{color:#f5f0e5;}
.feature .artist,.record .n,.game-help{color:#a9bdb5;}
.page-music .feature{background:linear-gradient(135deg,#123e58,#15523d);}
.page-music .feature::after{color:#a1c3b7;}
.record.has-audio{flex-wrap:wrap;align-content:center;}
.record.has-audio audio{flex:1 0 100%;width:100%;height:34px;margin-top:.65rem;accent-color:#36b88f;filter:saturate(1.2);}
.page-gallery .hers{color:#eef3ed;}
.page-games .game-tabs{background:#1a5848;border-color:#1a5848;}
.page-games .tab{background:#0c3035;color:#b2c3bc;}.page-games .tab[aria-selected="true"]{background:#168565;color:#fff;}
.page-games .game-box{background:linear-gradient(145deg,#0d3c38,#0a3040);box-shadow:0 30px 70px rgba(0,0,0,.22);}
.opt{background:#0a292e;border-color:#326155;color:#b7c8c1;}.opt:hover{color:#fff;border-color:#43b28d;}.opt.on{background:#168565;color:#fff;}.q-why{background:#08292d;color:#b7c8c1;}.flower-tray,#vase{background:#0a2b2d;border-color:#386456;}
.modal-card{background:#0c302f;border-color:#3a695c;}.modal-card h3{color:#f5f0e5;}.modal-close{border-color:#456f64;color:#b6c6c0;}
footer{background:#041318;color:#7f9b91;border-color:rgba(190,219,205,.12);}.pager-link{border-color:rgba(189,217,204,.2);color:#adc0b8;}.pager-link:hover{background:#0c302e;color:#fff;border-color:#42ae89;}
#toast{background:#e8efe9;color:#0a2a23;}
@media(max-width:900px){.nav-links{background:#08272b;}}

/* homepage portrait and floating hearts */
.page-index .cover-arch{width:min(43vw,620px);height:min(64vw,760px);right:max(-2rem,calc((100vw - var(--maxw))/2));bottom:-6rem;border:0;border-radius:52% 52% 3px 3px;transform:rotate(2deg);overflow:visible;background:#102f31;box-shadow:0 40px 100px rgba(0,0,0,.35);}
.page-index .cover-arch::before{z-index:2;width:calc(100% - 1.5rem);height:calc(100% - 1.5rem);aspect-ratio:auto;inset:.75rem;border:1px solid rgba(245,240,229,.35);border-radius:inherit;pointer-events:none;}
.page-index .cover-arch::after{display:none;}
.page-index .cover-arch>img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% center;border-radius:inherit;filter:saturate(1.16) contrast(1.04);}
.heart-stream{position:absolute;z-index:4;inset:-5rem 0 auto 0;height:22rem;pointer-events:none;}
.heart-stream i{--drift:0px;position:absolute;left:50%;bottom:0;color:#b53451;font-style:normal;font-size:clamp(1rem,2vw,1.8rem);text-shadow:0 7px 20px rgba(0,0,0,.3);opacity:0;animation:heart-rise 5.8s cubic-bezier(.22,.61,.36,1) infinite;}
.heart-stream i:nth-child(1){left:18%;--drift:-32px;animation-delay:0s;color:#c94160;}
.heart-stream i:nth-child(2){left:33%;--drift:24px;animation-delay:.8s;color:#f1d5d4;font-size:1.1rem;}
.heart-stream i:nth-child(3){left:51%;--drift:-18px;animation-delay:1.65s;color:#d85b73;}
.heart-stream i:nth-child(4){left:68%;--drift:30px;animation-delay:2.5s;color:#58c5a1;font-size:1.25rem;}
.heart-stream i:nth-child(5){left:82%;--drift:-20px;animation-delay:3.2s;color:#a92746;}
.heart-stream i:nth-child(6){left:42%;--drift:42px;animation-delay:4s;color:#f0c6cb;font-size:.9rem;}
.heart-stream i:nth-child(7){left:62%;--drift:-38px;animation-delay:4.75s;color:#ca3657;font-size:1.45rem;}
@keyframes heart-rise{
  0%{opacity:0;transform:translate(0,30px) scale(.65) rotate(-8deg);}
  14%{opacity:.9;}
  72%{opacity:.7;}
  100%{opacity:0;transform:translate(var(--drift),-190px) scale(1.08) rotate(12deg);}
}
body.no-motion .heart-stream i{animation:none;opacity:.7;transform:none;}
@media(prefers-reduced-motion:reduce){.heart-stream i{animation:none;opacity:.7;}}
@media(max-width:900px){
  .page-index .cover{padding-bottom:clamp(24rem,88vw,42rem);}
  .page-index .cover-arch{width:min(82vw,560px);height:min(92vw,620px);right:-7vw;bottom:-2rem;opacity:1;}
  .heart-stream{height:14rem;top:-2rem;}
}

/* ocean room — quiet silhouettes embedded in the water */
.page-ocean main{background:#020d17;}
.page-ocean .page-head .wrap::after{content:"the creatures beneath the surface have their own sky";}
.ocean-head{position:relative;z-index:2;background:linear-gradient(180deg,#06181e,#063442);}
.ocean-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:5rem;background:linear-gradient(175deg,transparent 48%,#052b3b 49%);pointer-events:none;}
.ocean-head .wrap{border-color:rgba(147,220,218,.22);}
.ocean-head h1{max-width:8ch;color:#f0f4ef;}
.ocean-head .lede{max-width:44rem;color:#acc9c6;}
.ocean-room{position:relative;background:#020d17;padding-bottom:clamp(7rem,13vw,12rem);}
.ocean-stage{position:relative;isolation:isolate;height:clamp(680px,82vh,920px);min-height:680px;overflow:hidden;background:
  radial-gradient(ellipse at 48% -10%,rgba(43,180,180,.24),transparent 43%),
  radial-gradient(ellipse at 85% 50%,rgba(22,79,111,.22),transparent 42%),
  linear-gradient(180deg,#073e50 0%,#052a40 36%,#031829 68%,#010910 100%);border-top:1px solid rgba(151,224,216,.15);border-bottom:1px solid rgba(151,224,216,.12);}
.ocean-stage::before{content:"";position:absolute;z-index:0;inset:-15% -10% 50%;opacity:.3;background:
  repeating-radial-gradient(ellipse at 50% -30%,transparent 0 37px,rgba(124,230,219,.12) 39px 40px,transparent 42px 68px);filter:blur(1px);transform:perspective(500px) rotateX(52deg);transform-origin:top;}
.ocean-stage::after{content:"";position:absolute;z-index:0;left:-5%;right:-5%;bottom:-8%;height:29%;background:
  radial-gradient(ellipse at 14% 100%,#081c20 0 19%,transparent 20%),
  radial-gradient(ellipse at 42% 108%,#07191d 0 25%,transparent 26%),
  radial-gradient(ellipse at 72% 106%,#06161b 0 22%,transparent 23%),
  radial-gradient(ellipse at 96% 105%,#07191d 0 29%,transparent 30%);opacity:.96;}
.ocean-fauna{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
.ocean-fauna g{fill:rgba(26,105,120,.12);stroke:rgba(151,221,211,.32);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.ocean-fauna .fauna-whale{fill:rgba(22,91,111,.16);stroke:rgba(129,204,207,.27);}
.ocean-fauna .fauna-turtle{fill:rgba(26,111,91,.14);stroke:rgba(148,220,188,.34);}
.ocean-fauna .fauna-shark{fill:rgba(19,72,100,.19);stroke:rgba(127,189,211,.3);}
.ocean-fauna .fauna-shark--far{opacity:.5;}
.ocean-fauna .fauna-ray{fill:rgba(19,68,92,.2);stroke:rgba(130,191,206,.25);}
.ocean-fauna .fauna-seahorse{fill:none;stroke:rgba(215,188,116,.46);stroke-width:3;}
.ocean-fauna .fauna-seahorse--small{opacity:.58;}
.ocean-copy{position:absolute;z-index:2;left:max(var(--pad),calc((100vw - var(--maxw))/2));top:clamp(3rem,8vh,6rem);max-width:32rem;pointer-events:none;}
.ocean-copy .eyebrow{color:#9bdacb;}
.ocean-copy h2{color:#f2f4ec;font-size:clamp(2.8rem,5.5vw,5.7rem);text-shadow:0 10px 35px rgba(0,13,23,.55);}
.ocean-depth{position:absolute;z-index:2;right:clamp(1rem,4vw,3rem);top:12%;bottom:13%;display:flex;flex-direction:column;align-items:center;color:rgba(176,215,210,.48);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;writing-mode:vertical-rl;pointer-events:none;}
.ocean-depth i{width:1px;flex:1;margin:.8rem 0;background:linear-gradient(transparent,rgba(174,222,216,.45),transparent);}
.ocean-hint{position:absolute;z-index:2;left:50%;bottom:2rem;transform:translateX(-50%);margin:0;color:rgba(192,222,218,.56);font:italic 1.05rem var(--serif);white-space:nowrap;}
@media(max-width:700px){
  .ocean-stage{height:760px;min-height:760px;}
  .ocean-copy{top:2.5rem;right:3rem;}
  .ocean-copy h2{font-size:clamp(2.8rem,13vw,4.2rem);}
  .ocean-depth{display:none;}
  .ocean-hint{font-size:.9rem;max-width:80%;text-align:center;white-space:normal;}
}

/* final palette: jade, bottle green, moss, and near-black forest */
:root{
  --forest-deep:#05150f;--forest:#09291c;--forest-mid:#12452f;--forest-soft:#246c4c;
  --burgundy:#25835d;--burgundy-bright:#45a77c;
  --ivory-dim:#b7c5ba;--ring:0 0 0 2px #05150f,0 0 0 4px #69bf95;
}
body{background:#05150f;}
main{background:radial-gradient(circle at 88% 8%,rgba(36,108,76,.2),transparent 29rem),radial-gradient(circle at 3% 38%,rgba(49,120,77,.14),transparent 32rem),#05150f;}
#nav,body.is-cover #nav{background:rgba(4,20,13,.91);border-color:rgba(188,218,198,.13);}
#nav.nav-scrolled,body.is-cover #nav.nav-scrolled{background:rgba(5,27,18,.95);border-color:rgba(142,197,164,.22);}
.brand span,.nav-links a.active,.page-num,.eyebrow,.kicker{color:#69bf95;}
.nav-links a{color:#a5b8aa;}.nav-links a:hover,.nav-links a.active{border-bottom-color:#69bf95;}
.cover{background:radial-gradient(circle at 76% 28%,rgba(40,112,72,.34),transparent 28%),radial-gradient(circle at 88% 78%,rgba(51,124,79,.25),transparent 33%),linear-gradient(135deg,#04120c,#09291b 48%,#103823);}
.cover-arch{background:#123527;}
.section--alt{background:#0a281c;}
.dist{background:linear-gradient(135deg,#123b29,#08271b);}
.borough-map--staten>path:first-child{fill:rgba(48,126,79,.18);stroke:#79bd91;}
.route-car circle{fill:#05150f;}
.feature,.record,.quest-step,.game-box,.modal-card{background:#0d3223;}
.page-music .feature{background:linear-gradient(135deg,#123827,#1a5137);}
.song-carousel{background:#09281c;border-color:rgba(126,193,151,.18);}
.page-music .record{background:linear-gradient(135deg,#143e2a,#0b3020);}
.song-arrows button{background:#071f15;color:#dce8df;}
.memory-book-section{background:radial-gradient(circle at 50% 16%,rgba(39,116,78,.2),transparent 32rem),#05150f;}
.video-memory{background:linear-gradient(145deg,#123c28,#0b2d1e);}
.next-date-form label{background:#08271b;}.next-date-form label:focus-within{background:#0c3323;}
.page-games .tab{background:#0c2d20;}.page-games .game-box{background:linear-gradient(145deg,#0e3927,#092b1d);}
.opt{background:#09271b;}.q-why{background:#08271b;}.flower-tray,#vase{background:#09291c;}
.modal-card{background:#0c3021;}
footer{background:#04130d;}.pager-link:hover{background:#0c3021;}
@media(max-width:900px){.nav-links{background:#08271b;}}
.page-ocean main,.ocean-room{background:#03130f;}
.ocean-head{background:linear-gradient(180deg,#05150f,#0a382b);}
.ocean-head::after{background:linear-gradient(175deg,transparent 48%,#0a3428 49%);}
.ocean-stage{background:radial-gradient(ellipse at 48% -10%,rgba(57,141,103,.25),transparent 43%),radial-gradient(ellipse at 85% 50%,rgba(29,91,64,.22),transparent 42%),linear-gradient(180deg,#0d4a37 0%,#093527 36%,#061f18 68%,#020d09 100%);}

/* light jade edition */
:root{
  --forest-deep:#edf3e8;--forest:#dce8d9;--forest-mid:#c8dbc9;--forest-soft:#a9c9b2;
  --ivory:#17362a;--ivory-dim:#60776b;--gold:#297b59;--gold-soft:#4d936f;
  --ring:0 0 0 2px #edf3e8,0 0 0 4px #277f5b;
}
body{background:#edf3e8;color:#17362a;}
main{background:radial-gradient(circle at 88% 8%,rgba(73,139,95,.12),transparent 29rem),radial-gradient(circle at 3% 38%,rgba(124,164,121,.12),transparent 32rem),#edf3e8;}
#nav,body.is-cover #nav{background:rgba(242,247,238,.94);border-color:rgba(31,86,60,.14);}
#nav.nav-scrolled,body.is-cover #nav.nav-scrolled{background:rgba(246,249,242,.97);border-color:rgba(40,112,78,.2);box-shadow:0 16px 45px rgba(28,66,45,.14);}
.brand,.nav-links a:hover,.nav-links a.active{color:#173d2d;}.brand span,.nav-links a.active,.page-num,.eyebrow,.kicker{color:#277f5b;}.nav-links a{color:#587064;}
.cover{background:radial-gradient(circle at 76% 28%,rgba(109,166,123,.24),transparent 30%),radial-gradient(circle at 88% 78%,rgba(173,200,164,.3),transparent 34%),linear-gradient(135deg,#eef4e9,#dfead9 52%,#cfe2d1);}
.cover h1,.since-unit b,.dist-end .who,.dist-mid .miles{color:#17392b;}.cover-note,.lede,.route-start,.route-end{color:#60776b;}.cover::before{border-color:rgba(36,104,71,.2);color:#577064;}.cover-arch{background:#c7ddca;box-shadow:0 35px 85px rgba(31,75,49,.18);}
.section--alt{background:#dce8d9;}.since-unit{border-color:rgba(39,104,71,.18);}.since-unit span{color:#277f5b;}
.dist{background:linear-gradient(135deg,#d3e5d5,#c4ddca);border-color:rgba(39,104,71,.14);box-shadow:0 24px 60px rgba(38,78,52,.12);}.dist-end .place,.game-bar .score{color:#267655;}.route-car circle{fill:#eff5ea;}
.page-head .wrap,.page-head .wrap::after{border-color:rgba(39,104,71,.18);}.page-head .wrap::after{color:#64796d;}
.story-chapter{border-color:rgba(39,104,71,.16);}.story-chapter h3{color:#17362a;}.story-chapter div>p:last-child{color:#5e7468;}.chapter-num{color:#277f5b;}.detail-section{background:#cbdccb;}.detail-heading h2{color:#17362a;}.detail-cloud p{color:#29473a;border-color:rgba(32,91,61,.18);}.detail-cloud span{color:#287957;}
.page-music .feature{background:linear-gradient(135deg,#c6ddca,#a9cfb5);}.page-music .feature h3,.page-music .feature .artist{color:#17362a;}.page-music .feature::after{color:#4e7260;}
.song-carousel{background:#d5e5d6;border-color:rgba(41,108,73,.18);}.song-carousel-head{border-color:rgba(39,104,71,.17);}.song-nav>p{color:#5f786b;}.page-music .record{background:linear-gradient(135deg,#bfd9c4,#a8ceb5);}.record .a,.record .n{color:#17362a;}.song-arrows button{background:#eff5ec;color:#255e45;border-color:rgba(39,104,71,.22);}
.memory-book-section{background:radial-gradient(circle at 50% 16%,rgba(75,137,94,.14),transparent 32rem),#e5eee1;}.book-intro,.book-controls button,.book-chapters button{color:#587165;}.book-chapters button.active{color:#17362a;}
.video-memory{background:linear-gradient(145deg,#bed8c2,#9fc8ad);}.video-memory h2,.video-memory .lede{color:#17362a;}.video-meta{color:#287555;}
.hers{color:#17362a;}.next-date-form{background:rgba(44,116,78,.25);}.next-date-form label,.next-date-form label:focus-within{background:#edf4e9;}.next-date-form label span{color:#277f5b;}.next-date-form input,.next-date-form textarea{color:#17362a;}.next-date-form input::placeholder,.next-date-form textarea::placeholder{color:#71867a;}.next-date-status{color:#587165;}
.page-games .game-tabs{background:#a9c8b0;border-color:#a9c8b0;}.page-games .tab{background:#e8f0e4;color:#4f695c;}.page-games .game-box{background:linear-gradient(145deg,#d4e5d4,#c3dcc8);box-shadow:0 28px 65px rgba(39,79,53,.12);}.q-text,.quest-step h4{color:#17362a;}.opt{background:#edf4e9;border-color:#b0c9b7;color:#4e685b;}.q-why{background:#d9e8d8;color:#50695d;}.flower-tray,#vase{background:#d8e6d6;border-color:#adc5b2;}
.modal-card{background:#eef5eb;border-color:#b3cbb9;}.modal-card h3{color:#17362a;}#modal{background:rgba(30,57,42,.55);}
footer{background:#d4e2d2;color:#60766a;border-color:rgba(40,99,69,.16);}.pager-link{color:#4f685b;border-color:rgba(38,97,66,.2);}.pager-link:hover{background:#c4d9c6;color:#17362a;}
@media(max-width:900px){.nav-links{background:#edf4e9;box-shadow:-20px 0 60px rgba(34,72,48,.14);}}
.page-ocean main{background:#edf3e8;}.ocean-head{background:linear-gradient(180deg,#edf3e8,#d5e7d8);}.ocean-head h1{color:#17362a;}.ocean-head .lede{color:#5d7568;}.ocean-head::after{background:linear-gradient(175deg,transparent 48%,#a9cdb8 49%);}.ocean-room{background:#d4e4d4;}
.btn--ghost,.game-bar .btn--ghost{background:#eef5eb;border-color:#8fb69d;color:#245e45;}
.btn--ghost:hover,.game-bar .btn--ghost:hover{background:#cfe3d1;border-color:#277f5b;color:#17362a;box-shadow:none;}
.btn--ghost:active,.game-bar .btn--ghost:active{transform:translateY(1px);}
.btn--ghost:focus-visible,.opt:focus-visible{outline:3px solid rgba(39,127,91,.28);outline-offset:3px;}
.game-bar .btn--ghost:disabled{opacity:.42;color:#64776d;border-color:#b5c9ba;cursor:not-allowed;}
.opt:hover{background:#d2e5d4;border-color:#3f9a70;color:#17362a;}.opt.on{background:#277f5b;border-color:#277f5b;color:#fff;}
[hidden]{display:none!important;}

/* Rounded site voice; editorial italics and the memory book stay intact */
:root{--sans:"Nunito","Manrope",sans-serif;}
.memory-book,.book-intro,.book-controls,.book-chapters{font-family:"Manrope",sans-serif;}
.book-page h2,.book-photos button span,.page-label,.story-kicker,.story-date,.story-save{font-family:"Manrope",sans-serif;}
#bookStory{font-family:"Instrument Serif","Iowan Old Style",Georgia,serif;}

.site-song{position:fixed;z-index:55;left:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,24px);display:flex;align-items:center;gap:.8rem;padding:.45rem;background:rgba(242,247,238,.92);border:1px solid rgba(34,104,70,.18);box-shadow:0 12px 35px rgba(31,71,47,.13);backdrop-filter:blur(14px);color:#5f756a;}
.site-song>p{margin:0 .45rem 0 0;font-family:"Instrument Serif",Georgia,serif;font-size:.9rem;font-style:italic;}
#openingSongToggle{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border:1px solid rgba(34,104,70,.2);background:rgba(246,249,242,.7);color:#1b6045;font:400 .8rem var(--sans);cursor:pointer;transition:.2s;}
#openingSongToggle:hover{background:#f7faf4;border-color:#277f5b;}
.song-pulse{display:flex;align-items:center;gap:2px;height:13px;}
.song-pulse i{display:block;width:2px;height:5px;background:#277f5b;transform-origin:center;}
#openingSongToggle.is-playing .song-pulse i{animation:opening-wave .72s ease-in-out infinite alternate;}
#openingSongToggle.is-playing .song-pulse i:nth-child(2){animation-delay:-.38s;height:11px;}
#openingSongToggle.is-playing .song-pulse i:nth-child(3){animation-delay:-.16s;height:8px;}
@keyframes opening-wave{to{transform:scaleY(2);}}
@media(prefers-reduced-motion:reduce){#openingSongToggle.is-playing .song-pulse i{animation:none;}}
@media(max-width:600px){.site-song>p{display:none;}.site-song{z-index:65;}}

/* =========================================================
   Responsive finish — phones, tablets, touch, and safe areas
   ========================================================= */
img,video,svg,canvas{max-width:100%;}
button,input,textarea,select{font:inherit;}

@media(max-width:900px){
  body.menu-open{overflow:hidden;}
  #nav{min-height:64px;padding-top:max(.65rem,env(safe-area-inset-top));}
  #nav.nav-scrolled{top:max(8px,env(safe-area-inset-top));}
  .nav-links{width:min(86vw,22rem);padding:calc(4.75rem + env(safe-area-inset-top)) 1.5rem max(2rem,env(safe-area-inset-bottom));justify-content:flex-start;overflow-y:auto;}
  .nav-links a{display:flex;align-items:center;min-height:48px;}
  .page-head{padding-top:clamp(6.5rem,18vw,8rem);}
  .page-head .wrap{min-height:13rem;}
  .page-num{margin-bottom:clamp(1.5rem,5vw,2.5rem);}
  .page-music .feature{min-height:0;}
  .page-music .feature .bigdisc{width:min(15rem,58vw);}
  .book-page{min-height:min(650px,78vh);}
  .video-frame video{max-height:72vh;object-fit:contain;}
}

@media(max-width:600px){
  :root{--pad:clamp(1rem,5vw,1.35rem);}
  body{font-size:14px;}
  h1{font-size:clamp(2.75rem,14vw,4.15rem);}
  h2{font-size:clamp(2.2rem,11vw,3.35rem);}
  .section{padding-block:clamp(3.75rem,15vw,5.5rem);}
  .page-head{padding-top:6rem;}
  .page-head .wrap{min-height:10.5rem;padding-top:1rem;}
  .page-head h1{max-width:100%;}
  .page-num{margin-bottom:1.25rem;}
  .lede{font-size:1rem;line-height:1.65;}

  .cover{align-items:end;padding-top:7.5rem;padding-bottom:clamp(21rem,100vw,29rem);}
  .cover h1{font-size:clamp(3.25rem,16vw,4.6rem);}
  .cover-cta{display:grid;width:100%;}
  .cover-cta .btn{justify-content:center;width:100%;}
  .page-index .cover-arch{width:95vw;height:105vw;right:-18vw;bottom:-1rem;}
  .since{margin-block:2rem;}
  .since-unit{padding:1rem .35rem;}
  .since-unit b{font-size:clamp(1.7rem,9vw,2.5rem);}
  .dist{padding:1.5rem 1rem;}
  .dist-mid{padding:.5rem 0;}
  .car-route{grid-template-columns:auto minmax(4rem,1fr) auto;gap:.4rem;font-size:.5rem;}

  .portrait-intro h2,.detail-heading h2{font-size:clamp(2.75rem,14vw,4rem);}
  .story-chapter{grid-template-columns:1fr;gap:.75rem;padding-block:2.5rem;}
  .chapter-num{font-size:.65rem;}
  .detail-cloud p{grid-template-columns:2rem 1fr;gap:.65rem;}

  .page-garden .section,.page-music .section{padding-top:2rem;}
  .page-garden #gardenStage{min-height:min(640px,76dvh);border-radius:2px;box-shadow:0 20px 45px rgba(21,48,37,.17),inset 0 0 0 7px rgba(238,242,234,.06);}
  .page-garden #gardenStage::before{inset:.7rem;}
  .page-garden .spot{width:60px;height:82px;}

  .page-music .feature{gap:1.25rem;padding:1.35rem;}
  .page-music .feature .bigdisc{width:min(12rem,54vw);}
  .song-carousel{margin-top:3.5rem;padding:1rem;}
  .song-carousel-head{align-items:flex-end;gap:1rem;}
  .song-arrows button{width:48px;height:48px;}
  .page-music .record{min-height:210px;padding:1.4rem;}

  .memory-book-section{padding-top:3rem;padding-bottom:5rem;}
  .book-spread{display:block;}
  .book-page{min-height:0;}
  .book-page--photos{height:min(128vw,31rem);}
  .book-page--story{height:auto;min-height:30rem;}
  .book-page--story h2{font-size:clamp(2.25rem,11vw,3.2rem);margin-bottom:1.4rem;}
  #bookStory{min-height:13rem;font-size:1.1rem;}
  .book-controls{gap:.75rem;}
  .book-controls button{min-height:44px;}
  .book-chapters{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem;}
  .book-chapters button{min-height:44px;text-align:left;}
  .video-memory{margin-top:5rem;gap:2rem;padding:1.25rem;}
  .video-memory-copy h2{font-size:clamp(2.25rem,11vw,3.35rem);}
  .page-gallery .hers{margin-top:5rem;}
  .next-date-form label{min-height:130px;padding:1.15rem;}

  .page-games .game-tabs{display:flex;gap:.5rem;margin-bottom:.75rem;padding-bottom:.35rem;overflow-x:auto;background:transparent;border:0;scroll-snap-type:x proximity;scrollbar-width:none;}
  .page-games .game-tabs::-webkit-scrollbar{display:none;}
  .page-games .tab{flex:0 0 auto;min-height:48px;padding:.75rem 1rem;white-space:nowrap;scroll-snap-align:start;border:1px solid #a9c8b0;}
  .page-games .game-box{min-height:0;padding:1rem;}
  .game-bar{gap:.65rem;}
  .game-bar .btn{flex:1 1 9rem;justify-content:center;}
  .q-opts{grid-template-columns:1fr;}
  #vase{min-height:290px;}

  .ocean-head .lede{max-width:100%;}
  .ocean-stage{height:min(720px,82dvh);min-height:580px;}
  .ocean-copy{left:var(--pad);right:var(--pad);top:2rem;}
  .ocean-copy h2{font-size:clamp(2.65rem,13vw,3.8rem);}

  .pager{gap:.65rem;}
  .pager-link{min-width:0;flex:1;padding:.85rem;}
  .pager-link b{font-size:.9rem;}
  footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom));}
  .site-song{left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));}
  #toast{bottom:calc(4.5rem + env(safe-area-inset-bottom));width:calc(100% - 2rem);text-align:center;}
}

@media(max-width:380px){
  .brand{font-size:.92rem;}
  #navToggle{padding-inline:.9rem;}
  .book-chapters{grid-template-columns:1fr;}
  .car-route{font-size:.46rem;}
}

@media(hover:none){
  .btn:hover,.record:hover,.pager-link:hover{transform:none;box-shadow:none;}
  .book-photos button:hover img{transform:none;}
}

@media(orientation:landscape) and (max-height:520px){
  .nav-links{padding-top:4.5rem;justify-content:flex-start;}
  .nav-links a{min-height:42px;}
  .page-head .wrap{min-height:8rem;}
  .page-garden #gardenStage{min-height:30rem;}
  .ocean-stage{min-height:32rem;}
}