/* ============================================================================
   COMPONENTS — the handmade parts. Tape, polaroids, torn paper, buttons.
   ========================================================================== */

/* ── BUTTON ─────────────────────────────────────────────────────────────────
   A soft dusty-rose pill. Ink-press on click, light sweep on hover, and the
   arrow walks forward. Nothing hard-edged, nothing "UI".
   ------------------------------------------------------------------------ */
.btn{
  --btn-bg: var(--rose);
  --btn-fg: #FFF9F4;
  position:relative;
  display:inline-flex; align-items:center; gap:.7em;
  padding:.92em 1.7em .96em;
  border-radius:var(--r-pill);
  background:linear-gradient(178deg, color-mix(in oklab,var(--btn-bg) 88%,#fff) 0%, var(--btn-bg) 52%, color-mix(in oklab,var(--btn-bg) 86%,var(--rose-ink)) 100%);
  color:var(--btn-fg);
  font-family:var(--f-hand);
  font-size:clamp(1.02rem,1.15vw,1.2rem);
  font-weight:600; letter-spacing:.015em; line-height:1;
  box-shadow:0 12px 26px -12px rgba(148,86,78,.55), 0 2px 5px rgba(148,86,78,.20), inset 0 1px 0 rgba(255,255,255,.34);
  overflow:hidden; isolation:isolate;
  transition:transform var(--d-fast) var(--e-back), box-shadow var(--d-fast) var(--e-out), filter var(--d-fast);
  -webkit-tap-highlight-color:transparent;
}
.btn::after{                                  /* soft light sweep */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.4) 48%,transparent 64%);
  transform:translateX(-120%);
  transition:transform .75s var(--e-out);
}
.btn:hover{ transform:translateY(-2px) scale(1.017); box-shadow:0 20px 40px -14px rgba(148,86,78,.55), 0 3px 8px rgba(148,86,78,.22), inset 0 1px 0 rgba(255,255,255,.4); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn:focus-visible{ outline:2px solid var(--rose-ink); outline-offset:4px; }
.btn .btn-arrow{ transition:transform .4s var(--e-back); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

.btn--ghost{
  background:transparent; color:var(--rose-deep);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--rose) 55%,transparent);
}
.btn--ghost:hover{ background:color-mix(in oklab,var(--blush) 55%,transparent); box-shadow:inset 0 0 0 1px var(--rose); }
.btn--sm{ padding:.68em 1.25em .72em; font-size:1rem; }
.btn--night{ --btn-bg:#4A5B92; --btn-fg:#F2EADC; box-shadow:0 14px 30px -14px rgba(10,16,34,.9), inset 0 1px 0 rgba(255,255,255,.2); }

/* Ripple dot spawned by JS on click */
.btn .ripple{
  position:absolute; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);
  transform:translate(-50%,-50%) scale(0); pointer-events:none;
  animation:ripple .62s var(--e-out) forwards;
}
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }


/* ── WASHI TAPE ─────────────────────────────────────────────────────────────
   Translucent, fibrous, torn on both short edges. Sits over a corner and
   casts the faintest shadow — that shadow is what sells it.
   ------------------------------------------------------------------------ */
.tape{
  position:absolute; z-index:6;
  width:118px; height:33px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 5px),
    linear-gradient(172deg, color-mix(in oklab,var(--blush) 92%,#fff), var(--blush-deep));
  opacity:.88;
  box-shadow:0 4px 10px -3px rgba(84,58,44,.42);
  /* torn short edges */
  clip-path:polygon(3% 0,97% 2%,100% 16%,98% 34%,100% 62%,97% 84%,99% 100%,
                    4% 98%,0 82%,2% 58%,0 36%,3% 18%);
  transform:rotate(-6deg);
  pointer-events:none;
}
/* The fibre used to be a multiply-blended ::after layer. There are two dozen
   pieces of tape on the page and each one was costing a backdrop pass for a
   texture nobody can see at this size — it is baked into the gradient now. */
.tape--sage{ background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 5px), linear-gradient(172deg,#CBD6BE,var(--sage)); }
.tape--cream{ background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 2px,transparent 2px 6px), linear-gradient(172deg,#F4E7D0,#D9C4A2); }
.tape--gold{ background:linear-gradient(172deg,#F0DCB4,var(--gold-soft)); }
.tape--sm{ width:78px; height:25px; }
.tape--lg{ width:150px; height:38px; }
.tape--v{ transform:rotate(84deg); }

/* Corner placements */
.tape.at-tl{ top:-15px; left:-20px; transform:rotate(-32deg); }
.tape.at-tr{ top:-15px; right:-20px; transform:rotate(31deg); }
.tape.at-bl{ bottom:-15px; left:-20px; transform:rotate(30deg); }
.tape.at-br{ bottom:-15px; right:-20px; transform:rotate(-30deg); }
.tape.at-t { top:-16px; left:50%; margin-left:-59px; transform:rotate(-2.5deg); }

/* Tape is a fixed physical size; on a phone that reads as gaffer tape. */
@media (max-width:700px){
  .tape{ width:80px; height:24px; }
  .tape--lg{ width:104px; height:28px; }
  .tape--sm{ width:58px; height:19px; }
  .tape.at-tl,.tape.at-tr,.tape.at-bl,.tape.at-br{ inset-block:auto; }
  .tape.at-tl{ top:-10px; left:-13px; }
  .tape.at-tr{ top:-10px; right:-13px; }
  .tape.at-bl{ bottom:-10px; left:-13px; }
  .tape.at-br{ bottom:-10px; right:-13px; }
  .tape.at-t { top:-11px; margin-left:-40px; }
}


/* ── PAPER CLIP ─────────────────────────────────────────────────────────── */
.clip{
  position:absolute; top:-16px; left:26px; z-index:7;
  width:19px; height:48px; pointer-events:none;
  transform:rotate(-8deg);
}


/* ── TORN PAPER EDGE ────────────────────────────────────────────────────── */
.torn{
  position:relative;
  background:var(--cream);
  background-image:var(--paper-fibre); background-size:280px 280px;
  background-blend-mode:multiply;
}
.torn--b{ -webkit-mask-image:var(--tear-b); mask-image:var(--tear-b); -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.torn--t{ -webkit-mask-image:var(--tear-t); mask-image:var(--tear-t); -webkit-mask-size:100% 100%; mask-size:100% 100%; }


/* ── POLAROID ───────────────────────────────────────────────────────────────
   Thick bottom lip, faint inner bevel, warm shadow. Hover: it lifts off the
   page, straightens a touch and the image blooms.
   ------------------------------------------------------------------------ */
.polaroid{
  --pol-w: 210px;
  position:relative;
  width:var(--pol-w);
  padding:11px 11px 46px;
  background:linear-gradient(168deg,#FFFDFA 0%,#FBF6EE 58%,#F3EBDF 100%);
  border-radius:3px;
  box-shadow:var(--sh-md), inset 0 0 0 1px rgba(255,255,255,.7);
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
  /* No will-change and no preserve-3d: there are ~30 polaroids, and the tilt
     supplies its own perspective() in the transform it writes. */
}
.polaroid::before{                            /* aged edge */
  content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  box-shadow:inset 0 0 22px rgba(160,128,100,.12);
}
.polaroid__win{
  position:relative; overflow:hidden;
  aspect-ratio:1/1;
  background:var(--sand);
  border-radius:1px;
  box-shadow:inset 0 1px 6px rgba(64,48,38,.28);
}
.polaroid__win > *{
  width:100%; height:100%; object-fit:cover;
  transition:transform .95s var(--e-out), filter .6s var(--e-out);
}
.polaroid__win::after{                        /* chemical sheen */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(158deg,rgba(255,246,232,.22),transparent 42%,rgba(90,64,50,.14));
  mix-blend-mode:soft-light;
}
.polaroid__cap{
  position:absolute; left:0; right:0; bottom:11px;
  text-align:center; padding-inline:10px;
  font-family:var(--f-hand); font-size:1.06rem; font-weight:600;
  color:var(--brown); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.polaroid__date{
  display:block; font-family:var(--f-sans); font-size:.56rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  font-weight:400; margin-top:.18em;
}
.polaroid:hover{ transform:translateY(-11px) rotate(0deg) scale(1.028); box-shadow:var(--sh-lift); z-index:20; }
.polaroid:hover .polaroid__win > *{ transform:scale(1.075); filter:saturate(1.08) brightness(1.03); }

/* A polaroid with no written caption — just the thick bottom lip. */
.polaroid--bare{ padding-bottom:24px; }
.polaroid--wide{ --pol-w:250px; }
.polaroid--wide .polaroid__win{ aspect-ratio:4/3; }
.polaroid--sm{ --pol-w:150px; padding:8px 8px 34px; }
.polaroid--sm .polaroid__cap{ font-size:.9rem; bottom:8px; }


/* ── CLOTHESPIN ─────────────────────────────────────────────────────────── */
.peg{
  position:absolute; top:-19px; left:50%; margin-left:-8px; z-index:8;
  width:16px; height:34px; pointer-events:none;
}


/* ── PAPER CARD ─────────────────────────────────────────────────────────────
   The general-purpose "piece of paper on the table" surface.
   ------------------------------------------------------------------------ */
.card{
  position:relative;
  background:linear-gradient(170deg,#FFFCF7,var(--cream));
  border-radius:var(--r-md);
  box-shadow:var(--sh-md), inset 0 0 0 1px rgba(255,255,255,.62);
  transition:transform .48s var(--e-out), box-shadow .48s var(--e-out);
  isolation:isolate;
}
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background-image:var(--paper-fibre); background-size:260px 260px;
  mix-blend-mode:multiply; opacity:.14;
}
.card--lift:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }

/* Deckled left edge, like a page torn from a journal */
.card--deckle::after{
  content:''; position:absolute; top:0; bottom:0; left:-1px; width:8px;
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(160,128,100,.14) 5px 6px);
  border-radius:inherit;
}


/* ── STICKY NOTE ────────────────────────────────────────────────────────── */
.notecard{
  position:relative;
  padding:2.1rem 1.6rem 2.4rem;
  background:linear-gradient(168deg,#FBF0D8,#F3E3C4);
  box-shadow:var(--sh-md);
  font-family:var(--f-hand); font-size:1.24rem; line-height:1.42; color:#5E4436;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
  /* the very slight curl of a note that has been stuck a while */
  clip-path:polygon(0 0,100% 0,100% 94%,92% 100%,0 100%);
}
.notecard::after{
  content:''; position:absolute; right:0; bottom:0; width:8%; height:6%;
  background:linear-gradient(135deg,rgba(160,128,100,.34),transparent);
}
.notecard--pink{ background:linear-gradient(168deg,#FCE6E2,#F5D2CC); color:#7A4A44; }
.notecard--sage{ background:linear-gradient(168deg,#E8EEE0,#D6E0C9); color:#4E5A42; }
.notecard:hover{ transform:translateY(-7px) rotate(0deg) scale(1.02); box-shadow:var(--sh-lg); z-index:5; }


/* ── STAMP ──────────────────────────────────────────────────────────────── */
.stamp{
  position:relative; width:74px; height:88px;
  background:linear-gradient(160deg,var(--blush),var(--blush-deep));
  padding:6px;
  /* perforated edge */
  -webkit-mask-image:radial-gradient(circle at 6px 6px,transparent 4px,#000 4.5px);
  -webkit-mask-size:12px 12px; mask-image:radial-gradient(circle at 6px 6px,transparent 4px,#000 4.5px); mask-size:12px 12px;
  box-shadow:var(--sh-sm);
  display:grid; place-items:center;
  font-family:var(--f-script); color:var(--rose-ink); font-size:1.5rem;
  transform:rotate(5deg);
}


/* ── COFFEE RING ────────────────────────────────────────────────────────── */
.stain{
  position:absolute; pointer-events:none; z-index:1;
  width:118px; aspect-ratio:1;
  border-radius:50%;
  border:6px solid rgba(146,101,58,.17);
  box-shadow:inset 0 0 26px rgba(146,101,58,.09);
  opacity:.9;
  mix-blend-mode:multiply;
}
.stain::after{
  content:''; position:absolute; inset:7px; border-radius:50%;
  border:2px solid rgba(146,101,58,.10);
}


/* ── LOOSE DECOR ────────────────────────────────────────────────────────────
   Small found objects dropped into the negative space of a section: a leaf,
   a coffee ring, a sprig. Sections are stacking contexts, so z-index:-1 puts
   these above the section's own background but under every word.
   ------------------------------------------------------------------------ */
.decor{ position:absolute; z-index:-1; pointer-events:none; opacity:.85; }
.decor--leaf{ opacity:.5; }
.decor--sprig{ opacity:.42; }
.decor--ring{ opacity:.9; }
/* --dx / --dy are the intended offsets; right-anchored pieces step aside for
   the fixed chapter index so nothing ever sits behind the nav. */
.decor--l{ left:var(--dx,4%); }
.decor--r{ right:var(--dx,4%); }

@media (max-width:900px){ .decor{ display:none; } }


/* ── PRESSED BOTANICALS ─────────────────────────────────────────────────── */
.botanical{
  position:absolute; pointer-events:none; z-index:2;
  opacity:.92;
}
.botanical--back{ z-index:0; opacity:.6; }


/* ── FAIRY LIGHT STRING ─────────────────────────────────────────────────── */
.lights{ position:absolute; pointer-events:none; z-index:3; }
.lights .bulb{ transform-origin:center; animation:bulbGlow 3.4s ease-in-out infinite; }
@keyframes bulbGlow{
  0%,100%{ opacity:.55; }
  50%    { opacity:1; }
}


/* ── CUSTOM CURSOR ──────────────────────────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:9px; height:9px; border-radius:50%;
  background:var(--rose-deep);
  transform:translate(-50%,-50%);
  transition:width .3s var(--e-out), height .3s var(--e-out), background .3s, opacity .3s;
  mix-blend-mode:multiply;
}
.cursor-ring{
  position:fixed; top:0; left:0; z-index:9499; pointer-events:none;
  width:34px; height:34px; border-radius:50%;
  border:1px solid color-mix(in oklab,var(--rose) 62%,transparent);
  transform:translate(-50%,-50%);
  transition:width .38s var(--e-out), height .38s var(--e-out), border-color .3s, opacity .3s;
}
.cursor.is-hot{ width:0; height:0; }
.cursor-ring.is-hot{ width:56px; height:56px; border-color:var(--rose-deep); background:color-mix(in oklab,var(--blush) 40%,transparent); }
.cursor-ring.is-hot::after{
  content:'♡'; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--rose-deep); font-size:15px;
}
body.night-scope .cursor{ background:var(--gold-soft); mix-blend-mode:screen; }
body.night-scope .cursor-ring{ border-color:rgba(226,206,168,.6); }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-ring{ display:none; } }


/* ── FLOATING HEART / PETAL CANVAS ──────────────────────────────────────────
   width/height are NOT redundant with inset:0. <canvas> is a replaced
   element, so offsets alone leave it at its intrinsic 300×150 and every
   particle ends up penned into the top-left corner.
   ------------------------------------------------------------------------ */
.fx-layer{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
}
.fx-layer--fixed{
  position:fixed; width:100vw; height:100vh; z-index:8980;
  transition:opacity .9s var(--e-out);
}
/* Over the night sky, petals read as pale grey debris however you tint them —
   and the sky already has its own weather. They stand down. */
body.night-scope .fx-layer--fixed{ opacity:0; }


/* ── SCROLL CUE ─────────────────────────────────────────────────────────── */
.cue{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  color:var(--ink-faint);
}
.cue__line{
  width:1px; height:52px;
  background:linear-gradient(180deg,transparent,var(--rose));
  position:relative; overflow:hidden;
}
.cue__line::after{
  content:''; position:absolute; left:0; width:100%; height:16px;
  background:var(--rose-deep);
  animation:cueRun 2.1s var(--e-soft) infinite;
}
@keyframes cueRun{ 0%{ top:-16px } 60%,100%{ top:52px } }
.cue span{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; }


/* ── MODAL / LIGHTBOX ───────────────────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:9200;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:color-mix(in oklab,#3A2A22 78%,transparent);
  backdrop-filter:blur(9px) saturate(.85);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--e-out), visibility .45s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__panel{
  position:relative;
  max-width:min(880px,100%); max-height:88vh; overflow:auto;
  pointer-events:none;
  transform:translateY(26px) scale(.96); opacity:0;
  transition:transform .6s var(--e-out), opacity .5s var(--e-out);
  overscroll-behavior:contain;
}
.modal.is-open .modal__panel{ transform:none; opacity:1; }
#modal-body,
.modal__close{ pointer-events:auto; }
.modal__close{
  position:absolute; top:-46px; right:0;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,252,247,.9); color:var(--brown);
  box-shadow:var(--sh-sm);
  transition:transform .3s var(--e-back), background .3s;
}
.modal__close:hover{ transform:rotate(90deg) scale(1.1); background:#fff; }


/* ── MENU BUTTON ────────────────────────────────────────────────────────── */
.menu-btn{
  display:inline-flex; align-items:center; gap:.62rem;
  padding:.5rem .2rem .5rem .5rem;
  color:var(--ink-soft);
  font-size:.63rem; letter-spacing:.24em; text-transform:uppercase;
  transition:color .3s;
}
.menu-btn:hover{ color:var(--rose-ink); }
.menu-btn:focus-visible{ outline:2px solid var(--rose); outline-offset:5px; border-radius:4px; }
.menu-btn__lines{ display:grid; gap:4px; width:22px; }
.menu-btn__lines i{
  display:block; height:1.5px; background:currentColor; border-radius:2px;
  transform-origin:center;
  transition:transform .45s var(--e-back), opacity .3s, width .45s var(--e-out);
}
.menu-btn__lines i:nth-child(1){ width:22px; }
.menu-btn__lines i:nth-child(2){ width:15px; margin-left:auto; }
.menu-btn__lines i:nth-child(3){ width:19px; }
.menu-btn:hover .menu-btn__lines i:nth-child(2){ width:22px; }
/* open → the three rules fold into a cross */
.menu-btn.is-open .menu-btn__lines i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-btn.is-open .menu-btn__lines i:nth-child(2){ opacity:0; transform:scaleX(0); }
.menu-btn.is-open .menu-btn__lines i:nth-child(3){ width:22px; transform:translateY(-5.5px) rotate(-45deg); }
body.night-scope .menu-btn{ color:rgba(220,228,248,.75); }


/* ── CHAPTER MENU ───────────────────────────────────────────────────────────
   A full sheet of paper laid over the page. Fifteen chapters, numbered, in
   the same hand as the rest of the book.
   ------------------------------------------------------------------------ */
.menu{
  position:fixed; inset:0; z-index:8700;
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--e-out), visibility .5s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu__paper{
  position:absolute; inset:0;
  /* Warm sheet, lit from the top left. No turbulence layer here — multiplied
     over a full screen it reads as grey cloud, and the page-wide .grain sits
     above this anyway. */
  background:
    radial-gradient(72% 58% at 20% 8%,  rgba(255,242,222,.9), transparent 60%),
    radial-gradient(64% 54% at 86% 92%, rgba(246,222,216,.75), transparent 62%),
    linear-gradient(168deg,#FCF8F1 0%,#F6EEE1 54%,#F0E5D5 100%);
  transform:scaleY(0); transform-origin:top center;
  transition:transform .62s var(--e-out);
  pointer-events:none;
}
.menu.is-open .menu__paper{ transform:scaleY(1); }

.menu__inner{
  position:relative; z-index:2;
  width:100%; max-width:1080px;
  max-height:100svh; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(5.5rem,10vh,7rem) var(--gut) clamp(2.5rem,6vh,4rem);
  display:flex; flex-direction:column; gap:clamp(1.4rem,3vh,2.4rem);
}
.menu__head{ display:flex; flex-direction:column; gap:.7rem; }
.menu__title{
  font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.04; color:var(--ink);
  max-width:18ch;
}
.menu__foot{ font-size:1.05rem; color:var(--brown-soft); opacity:.8; }

/* Two columns on wide screens, so fifteen items never need scrolling.
   Column-major on purpose: a contents page reads 01→08 down the left and
   then continues down the right, not zig-zagging across. */
.menu__list{
  display:grid; gap:0 clamp(2rem,5vw,5rem);
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .menu__list{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(8,auto);
    grid-auto-flow:column;
  }
}

.menu__item{
  position:relative; display:grid;
  grid-template-columns:2.6rem 1fr auto; align-items:baseline; gap:.9rem;
  width:100%; text-align:left;
  padding:.72rem .4rem .78rem 0;
  border-bottom:1px dashed color-mix(in oklab,var(--linen) 78%,transparent);
  color:var(--ink-soft);
  transition:color .3s var(--e-out), padding-left .42s var(--e-out);
}
.menu__n{
  font-family:var(--f-sans); font-size:.6rem; letter-spacing:.16em;
  color:var(--rose); font-weight:400;
}
.menu__t{
  font-family:var(--f-script);
  font-size:clamp(1.35rem,1.9vw,1.75rem); line-height:1.06; color:var(--ink);
  transition:color .3s;
}
.menu__note{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); opacity:0; transform:translateX(-6px);
  transition:opacity .35s var(--e-out), transform .35s var(--e-out);
}
.menu__item:hover{ padding-left:.75rem; }
.menu__item:hover .menu__t{ color:var(--rose-ink); }
.menu__item:hover .menu__note{ opacity:1; transform:none; }
.menu__item:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:6px; }
/* where you are right now */
.menu__item.is-here .menu__t{ color:var(--rose-deep); }
.menu__item.is-here::before{
  content:'♥'; position:absolute; left:-.1rem; top:50%; translate:0 -50%;
  font-size:.62rem; color:var(--rose);
}
.menu__item.is-here .menu__n{ opacity:0; }
.menu__item.is-locked .menu__t::after{ content:' 🔒'; font-size:.62em; opacity:.7; }

@media (max-width:820px){
  .menu__t{ font-size:1.5rem; }
  .menu__item{ grid-template-columns:2.2rem 1fr; }
  .menu__note{ display:none; }
}

@media (max-width:560px){
  .menu__inner{
    height:100svh;
    max-height:100svh;
    padding:5.1rem .9rem max(2.5rem, calc(env(safe-area-inset-bottom) + 1.25rem));
    gap:1rem;
    align-self:stretch;
  }
  .menu__head{ gap:.45rem; }
  .menu__head .eyebrow{
    font-size:.58rem;
    letter-spacing:.24em;
    gap:.55em;
  }
  .menu__head .eyebrow::before{ width:1.8rem; }
  .menu__title{
    max-width:13ch;
    font-size:2rem;
    line-height:1.08;
  }
  .menu__list{ gap:0; }
  .menu__item{
    grid-template-columns:2rem minmax(0,1fr);
    gap:.55rem;
    min-height:44px;
    padding:.48rem .28rem .52rem 0;
  }
  .menu__t{
    font-size:1.34rem;
    line-height:1.04;
    overflow-wrap:anywhere;
  }
  .menu__n{ font-size:.55rem; }
  .menu__foot{ display:none; }
  .menu__item.is-here::before{ left:-.15rem; }
}


/* ── PROGRESS THREAD (thin line that fills as you travel) ───────────────── */
/* Driven by transform, not width — a width change relayouts, a transform
   is a compositor-only nudge. */
.thread{
  position:fixed; left:0; top:0; width:100%; height:2px; z-index:8600;
  background:linear-gradient(90deg,var(--rose),var(--rose-deep),var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
  box-shadow:0 0 12px rgba(185,115,106,.5);
}
/* The menu owns the viewport while it is open. */
body.menu-open{ overflow:hidden; }


/* ── TOP BAR ────────────────────────────────────────────────────────────── */
.topbar{
  /* Above the menu sheet (8700) so the Close control is always reachable. */
  position:fixed; top:0; left:0; right:0; z-index:8800;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem clamp(1.25rem,3.2vw,2.8rem);
  transition:transform .55s var(--e-out), background .5s, backdrop-filter .5s;
  mix-blend-mode:normal;
}
.topbar.is-tucked{ transform:translateY(-105%); }
.topbar.is-solid{
  background:color-mix(in oklab,var(--ivory) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 color-mix(in oklab,var(--linen) 50%,transparent);
}
.topbar__mark{ font-family:var(--f-script); font-size:1.45rem; color:var(--brown); line-height:1; }
.topbar__right{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
body.night-scope .topbar__mark{ color:#EFE4D3; }
body.night-scope .topbar.is-solid{ background:color-mix(in oklab,var(--night) 76%,transparent); box-shadow:0 1px 0 rgba(190,205,240,.12); }
/* While the menu is open the bar sits on the menu's own paper. */
.topbar.is-menu{ background:none !important; box-shadow:none !important; backdrop-filter:none !important; transform:none !important; }
.topbar.is-menu .topbar__mark{ color:var(--brown); }
.topbar.is-menu .menu-btn,
.topbar.is-menu .sound-toggle{ color:var(--ink-soft); }

.sound-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.sound-toggle .bars{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.sound-toggle .bars i{ width:2px; background:var(--rose); height:3px; border-radius:1px; transition:height .3s; }
.sound-toggle.is-on .bars i{ animation:eq .9s ease-in-out infinite; }
.sound-toggle.is-on .bars i:nth-child(2){ animation-delay:.15s }
.sound-toggle.is-on .bars i:nth-child(3){ animation-delay:.3s }
.sound-toggle.is-on .bars i:nth-child(4){ animation-delay:.45s }
@keyframes eq{ 0%,100%{ height:3px } 50%{ height:11px } }

@media (max-width:560px){
  .topbar{
    padding:max(.72rem, env(safe-area-inset-top)) .7rem .65rem;
    gap:.55rem;
  }
  .topbar__mark{
    flex:1 1 auto;
    min-width:0;
    max-width:calc(100vw - 6.7rem);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:1.18rem;
  }
  .topbar__right{
    flex:0 0 auto;
    gap:.32rem;
  }
  .sound-toggle,
  .menu-btn{
    width:38px;
    height:38px;
    padding:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:color-mix(in oklab,var(--ivory) 68%,transparent);
    box-shadow:0 1px 0 color-mix(in oklab,var(--linen) 46%,transparent);
    letter-spacing:0;
  }
  .topbar.is-menu .sound-toggle,
  .topbar.is-menu .menu-btn{ background:rgba(255,252,247,.62); }
  .sound-toggle__label,
  .menu-btn__label{ display:none; }
  .sound-toggle .bars{ height:13px; }
  .menu-btn__lines{ width:20px; }
  .menu-btn__lines i:nth-child(1),
  .menu-btn:hover .menu-btn__lines i:nth-child(2){ width:20px; }
  .menu-btn__lines i:nth-child(2){ width:13px; }
  .menu-btn__lines i:nth-child(3){ width:17px; }
  .menu-btn.is-open .menu-btn__lines i:nth-child(3){ width:20px; }
}


/* ── PRELOADER ──────────────────────────────────────────────────────────── */
.pre{
  position:fixed; inset:0; z-index:9800;
  display:grid; place-items:center;
  background:var(--ivory);
  background-image:var(--paper-cloud); background-size:700px 700px; background-blend-mode:multiply;
}
.pre__in{ text-align:center; }
.pre__name{
  font-family:var(--f-script); font-size:clamp(3.4rem,9vw,7.2rem);
  color:var(--brown); line-height:1;
  /* revealed left-to-right, like being written */
  clip-path:inset(0 100% -20% 0);
}
.pre__sub{
  margin-top:1.5rem; font-size:.62rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--ink-faint); opacity:0;
}
.pre__bar{ width:min(260px,52vw); height:1px; margin:2.1rem auto 0; background:color-mix(in oklab,var(--linen) 70%,transparent); overflow:hidden; }
.pre__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--rose),var(--rose-deep)); }
.pre__pct{ margin-top:.85rem; font-size:.6rem; letter-spacing:.22em; color:var(--rose-deep); }
.pre__hearts{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* Curtain wipe used for the hero → chapters transition */
.wipe{
  position:fixed; inset:0; z-index:9700; pointer-events:none;
  background:linear-gradient(178deg,var(--cream),var(--blush));
  transform:scaleY(0); transform-origin:bottom;
}


/* ── SMALL SHARED BITS ──────────────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.34em .85em .38em; border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--blush) 60%,transparent);
  color:var(--rose-ink); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
}
.chip-date{
  font-family:var(--f-sans); font-size:.58rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint);
}
.hand-note{
  font-family:var(--f-hand); font-size:1.16rem; color:var(--brown-soft);
  line-height:1.4; transform:rotate(-1.4deg);
}