:root{
  --navy:#101426;--burgundy:#54283e;--rose:#d99aa8;--ivory:#fff6ec;--gold:#d9bd8a;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--script:"Caveat","Segoe Script",cursive;
  --fs-body:clamp(1rem,.95rem + .3vw,1.125rem);
  --fs-h1:clamp(1.9rem,1.3rem + 3vw,3.6rem);
  --fs-h2:clamp(1.8rem,1.3rem + 2.4vw,3.2rem);
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  --pad:clamp(1rem,4vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--navy);color:var(--ivory);font:400 var(--fs-body)/1.7 var(--sans)}
img{max-width:100%;display:block}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0 0 1rem}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2);color:var(--gold)}
p{margin:0 0 1rem}
.script{font-family:var(--script)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ivory);color:var(--navy);padding:.75rem 1rem;border-radius:.5rem}
.skip:focus{top:calc(1rem + var(--safe-t))}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Gate: chapters appear only after the envelope is opened (JS only; without JS everything shows) */
.js body:not(.opened) :is(.chapter,.site-foot,.dots,.bar){display:none!important}

/* Background */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at 15% 0,rgba(84,40,62,.55),transparent 60%),radial-gradient(ellipse at 90% 100%,rgba(84,40,62,.45),transparent 55%),var(--navy)}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--ivory);opacity:.6;animation:twinkle var(--d,4s) ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.08}}
.petals{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-5%;width:10px;height:12px;border-radius:80% 0 80% 0;background:linear-gradient(var(--rose),#b8657b);opacity:.55;animation:fall var(--d,14s) linear var(--delay,0s) infinite}
@keyframes fall{to{transform:translate3d(var(--x,40px),110svh,0) rotate(540deg)}}
.burst{position:fixed;inset:0;z-index:150;pointer-events:none;overflow:hidden}
.burst .petal{opacity:.9;animation:fall var(--d,6s) ease-in var(--delay,0s) 1 forwards}
.spark{position:absolute;color:var(--gold);animation:spark 1.6s ease-out var(--delay,0s) forwards;opacity:0}
@keyframes spark{0%{transform:scale(0);opacity:0}40%{opacity:1}100%{transform:scale(1.4) translateY(-30px);opacity:0}}
.bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,var(--rose),var(--gold));transform:scaleX(0);transform-origin:left}

/* Layout */
.scene{min-height:100svh;display:flex;align-items:center;padding:calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-r)) calc(var(--pad) + var(--safe-b)) calc(var(--pad) + var(--safe-l))}
.wrap{width:100%;max-width:70rem;margin:0 auto}
.wrap.narrow{max-width:42rem}
.center{text-align:center}
.num{font:600 .85rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:.75rem}
.num::before{content:"Chapter "}
.chapter:focus{outline:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease var(--d,0s),transform 1.1s ease var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.line{display:block}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:.75rem 1.6rem;border-radius:999px;border:1px solid var(--gold);font:500 1rem/1.2 var(--sans);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s,transform .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(217,154,168,.3)}
.btn-primary{background:var(--gold);color:var(--navy)}.btn-primary:hover{background:var(--ivory)}
.btn-ghost{background:transparent;color:var(--ivory)}.btn-ghost:hover{background:rgba(255,246,236,.08)}
.link-btn{background:none;border:0;color:var(--rose);text-decoration:underline;font:inherit;min-height:44px;padding:.5rem 1rem;cursor:pointer}

/* Opening */
.envelope-scene{flex-direction:column;justify-content:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#1d2342,transparent 70%)}
.moon{position:absolute;top:calc(8% + var(--safe-t));right:12%;width:clamp(56px,9vw,96px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffaf0,#e8dcc0 60%,#cdbf9f);box-shadow:0 0 60px 18px rgba(255,246,236,.16),0 0 160px 60px rgba(217,189,138,.12);animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 80px 26px rgba(255,246,236,.22),0 0 200px 80px rgba(217,189,138,.16)}}
.eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
.envelope{position:relative;width:min(70vw,19rem);aspect-ratio:3/2;margin:0 0 2rem;cursor:pointer;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.env-back,.env-front,.env-flap{position:absolute;inset:0;border-radius:6px}
.env-back{background:#6a3350}
.env-paper{position:absolute;left:6%;right:6%;top:8%;bottom:8%;background:var(--ivory);color:var(--burgundy);border-radius:4px;display:grid;place-items:center;padding:.5rem;font-size:clamp(1.1rem,4vw,1.5rem);line-height:1.1;transition:transform .9s cubic-bezier(.2,.8,.2,1) .35s}
.env-paper p{margin:0}
.env-front{background:linear-gradient(to top right,#7a3c5c 50%,transparent 50.5%) left/50.5% 100% no-repeat,linear-gradient(to top left,#7a3c5c 50%,transparent 50.5%) right/50.5% 100% no-repeat,linear-gradient(#8a4668,#8a4668) bottom/100% 45% no-repeat;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.env-flap{background:linear-gradient(#8f4a6c,var(--burgundy));clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .7s ease}
.env-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);width:2.8rem;height:2.8rem;border-radius:50%;background:var(--gold);color:var(--burgundy);display:grid;place-items:center;font:600 1.4rem var(--serif);box-shadow:0 2px 8px rgba(0,0,0,.35);animation:beat 3s ease-in-out infinite;transition:opacity .3s}
@keyframes beat{50%{transform:translate(-50%,-30%) scale(1.1)}}
.envelope[data-open=true] .env-flap{transform:rotateX(180deg);z-index:0}
.envelope[data-open=true] .env-seal{opacity:0;animation:none}
.envelope[data-open=true] .env-paper{transform:translateY(-48%)}
.env-line{max-width:18em;font-style:italic;font-weight:400}
.env-sub{color:var(--rose);letter-spacing:.04em;margin-bottom:1.8rem}

/* Chapter 1 */
#reason{background:linear-gradient(rgba(16,20,38,0),rgba(42,29,53,.65))}
.reason-grid{display:grid;gap:2.5rem}
.prose p{margin-bottom:1.6rem;font-size:clamp(1.1rem,1rem + .6vw,1.35rem)}
.prose .line{margin-bottom:.35rem}
.photo-frame{margin:0;width:100%;max-width:22rem;justify-self:center;padding:10px;border:1px solid var(--gold);border-radius:999px 999px 28px 28px;background:rgba(84,40,62,.28);box-shadow:0 0 90px rgba(217,154,168,.28),0 30px 60px rgba(0,0,0,.4)}
.photo-frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:999px 999px 20px 20px}

/* Chapter 2 */
#poem{background:radial-gradient(ellipse at 50% 38%,rgba(217,189,138,.15),transparent 60%)}
.flowers{width:min(260px,68%);margin:0 auto 2rem;color:var(--rose)}
blockquote{margin:0;font:italic 400 clamp(1.45rem,1.1rem + 1.9vw,2.4rem)/1.45 var(--serif)}
.q-after{margin-top:2.2rem;color:var(--gold);letter-spacing:.06em}

/* Chapter 3 */
#letter{background:linear-gradient(#1a1530,var(--ivory) 12%,var(--ivory) 88%,var(--burgundy));color:#2a1a24}
#letter .num{color:var(--burgundy)}#letter h2{color:var(--burgundy);text-align:center}
.paper{background:repeating-linear-gradient(#fffaf2 0 calc(1.8em - 1px),rgba(84,40,62,.1) calc(1.8em - 1px) 1.8em);border:1px solid #e6d6bf;border-radius:6px;padding:clamp(1.25rem,5vw,3.5rem);box-shadow:0 24px 60px rgba(84,40,62,.22);font:400 clamp(1.15rem,1rem + .7vw,1.4rem)/1.8 var(--serif);overflow-wrap:anywhere}
.paper p{margin-bottom:1.8em}
.paper .greet{font-weight:600;color:var(--burgundy);font-size:1.15em}
.paper .closing{margin:0;font-style:italic}
.signature{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.1rem);color:var(--burgundy);margin:.2rem 0 0;line-height:1.3}

/* Chapter 4 */
#question{background:linear-gradient(var(--burgundy),#2b1730 50%,var(--navy))}
.heart{width:56px;fill:none;stroke:var(--rose);stroke-width:1.4;margin:0 auto 1.5rem;filter:drop-shadow(0 0 12px rgba(217,154,168,.7));animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
#question h2{color:var(--ivory);font-size:clamp(2.2rem,1.4rem + 5vw,4.6rem)}
.q-text{font:italic 400 clamp(1.6rem,1.1rem + 2.4vw,3rem)/1.25 var(--serif)}
.q-note{max-width:30em;margin:0 auto 1rem;color:#f0dcd6}
.q-buttons{display:grid;grid-template-columns:1fr;gap:1rem;max-width:30rem;margin:2rem auto 1.5rem}
.btn-answer{width:100%;min-height:54px;background:rgba(255,246,236,.06);color:var(--ivory);backdrop-filter:blur(8px)}
.btn-answer:hover{background:rgba(217,189,138,.2)}
.q-response{min-height:7rem;font:italic 1.35rem/1.5 var(--serif)}
.q-response p{margin:0 0 .5rem}.q-response p+p{font:400 1rem var(--sans);color:var(--gold)}

/* Chapter 5 */
#plan{background:linear-gradient(var(--navy),#1b1630)}
#plan h2{text-align:center}.plan-intro{text-align:center;color:var(--rose);margin-bottom:2rem}
.plan-form{display:grid;gap:1.4rem}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.opts{display:grid;gap:.8rem}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0}
.opt span{display:block;padding:1.1rem 1.3rem;border:1px solid rgba(217,189,138,.4);border-radius:14px;background:rgba(255,246,236,.05);transition:.3s}
.opt:hover span{background:rgba(255,246,236,.1)}
.opt input:checked+span{border-color:var(--gold);background:rgba(217,189,138,.16);box-shadow:0 0 28px rgba(217,154,168,.2)}
.opt input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}
.note-label{font-weight:500;color:var(--gold);font-size:.95rem;margin-bottom:-.8rem}
textarea{width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid rgba(217,189,138,.5);background:rgba(255,246,236,.07);color:var(--ivory);font:inherit;resize:vertical}
.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.plan-status{text-align:center;color:var(--gold);font:italic 1.2rem/1.5 var(--serif);min-height:1.7em;margin:0}

.site-foot{text-align:center;color:rgba(255,246,236,.6);font-size:.85rem;padding:2rem var(--pad) calc(2rem + var(--safe-b))}
.audio-toggle{position:fixed;z-index:70;right:calc(.75rem + var(--safe-r));top:calc(.75rem + var(--safe-t));min-height:44px;min-width:44px;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(217,189,138,.6);background:rgba(16,20,38,.75);color:var(--ivory);font:500 .85rem var(--sans);cursor:pointer;backdrop-filter:blur(6px)}

/* Progress dots + cursor: desktop with a mouse only */
.dots,.cursor{display:none}
@media (min-width:640px){.q-buttons{grid-template-columns:1fr 1fr;max-width:38rem}}
@media (min-width:1024px){.reason-grid{grid-template-columns:1.3fr 1fr;align-items:center;gap:4rem}.photo-frame{justify-self:end;max-width:24rem}}
@media (min-width:1024px) and (pointer:fine){
  .dots{display:block;position:fixed;z-index:50;right:calc(1.25rem + var(--safe-r));top:50%;transform:translateY(-50%)}
  .dots ol{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
  .dots a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
  .dots a::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid var(--gold);transition:.2s}
  .dots a[aria-current=true]::before{background:var(--gold);transform:scale(1.3)}
}
@media (pointer:fine){
  .cursor{display:block;position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:22px;height:22px;margin:-11px 0 0 -11px;border:1px solid var(--gold);border-radius:50%;opacity:0;transition:width .2s,height .2s,margin .2s,opacity .3s,background .2s}
  .cursor.on{opacity:1}.cursor.hover{width:42px;height:42px;margin:-21px 0 0 -21px;background:rgba(217,154,168,.15)}
}
@media (max-width:639px){.moon{right:8%}.audio-toggle{font-size:.8rem;padding:.5rem .8rem}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .petals,.cursor,.burst{display:none!important}
}
@media (scripting:none){.reveal{opacity:1;transform:none}}