:root{
  --navy:#101522; --plum:#241C2B; --gold:#E6C78B; --blush:#DDA6AC;
  --ivory:#FFF7EF; --muted:#CEC3C7; --paper:#F6EBDD; --ink:#352A2C;
  --serif:"EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --gutter:clamp(20px, 5.5vw, 48px);
  --col:min(640px, 100%);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  background:
    radial-gradient(120% 60% at 50% 0%, #1b1a2e 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--plum) 38%, #1a1624 70%, var(--navy) 100%);
  color:var(--ivory); font-family:var(--sans);
  font-size:clamp(17px, 1.1vw + 13px, 19px); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
main{overflow-x:clip}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.15; margin:0; text-wrap:balance; letter-spacing:.005em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:6px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:.8em 1.6em; border-radius:999px;
  font:500 1rem/1.2 var(--sans); letter-spacing:.01em; text-decoration:none;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .25s ease, box-shadow .35s ease, background-color .35s ease;
}
.btn-gold{background:var(--gold); color:#2a2130; box-shadow:0 0 0 1px rgba(255,247,239,.25) inset, 0 10px 40px -10px rgba(230,199,139,.55)}
.btn-gold:hover{box-shadow:0 0 0 1px rgba(255,247,239,.35) inset, 0 12px 50px -8px rgba(230,199,139,.75)}
.btn:active{transform:scale(.98)}
.btn-blush{padding:.8em 1.15em; font-size:.94rem; letter-spacing:0; background:transparent; color:var(--ivory); border:1px solid rgba(221,166,172,.7); box-shadow:0 0 30px -12px rgba(221,166,172,.6)}
.btn-blush:hover{background:rgba(221,166,172,.08)}

/* ---------- A. opening ---------- */
.opening{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; place-items:center; padding:max(48px, env(safe-area-inset-top)) var(--gutter) max(40px, env(safe-area-inset-bottom));
  isolation:isolate; overflow:hidden;
}
.opening::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(70% 55% at 50% 45%, rgba(230,199,139,.10), transparent 70%);
}
.lights{position:absolute; inset:0; z-index:-1; pointer-events:none}
.light{
  position:absolute; left:var(--x); top:var(--y); width:0; height:0;
  transition:left 1s cubic-bezier(.6,.05,.25,1), top 1s cubic-bezier(.6,.05,.25,1), opacity .6s ease;
}
.light i{
  position:absolute; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%; background:radial-gradient(circle, #fff3dc 0%, var(--gold) 35%, rgba(230,199,139,0) 72%);
  opacity:var(--o); filter:blur(.3px);
  animation:drift var(--d) ease-in-out var(--delay) infinite alternate;
  transition:opacity .5s ease, transform .6s ease, width .6s ease, height .6s ease;
}
@keyframes drift{
  from{transform:translate(0,0)}
  to{transform:translate(var(--dx), var(--dy))}
}
.opening.paused .light i{animation-play-state:paused}
.gathering .light i{animation:none; transform:none; opacity:.95}
.glowing .light i{transform:scale(1.7); opacity:1; box-shadow:0 0 18px 4px rgba(230,199,139,.35)}
.fading .light{opacity:0}
.opening-inner{max-width:34rem; text-align:center; transition:opacity .6s ease}
.gathering .opening-inner{opacity:.1}
.label{font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem}
.opening h1{font-size:clamp(1.95rem, 6vw, 3.3rem); font-weight:400; color:var(--ivory)}
.opening-actions{margin-top:2.4rem; display:flex; flex-direction:column; align-items:center; gap:1rem}
.skip{
  display:inline-flex; align-items:center; min-height:44px; padding:0 .75rem;
  font-size:.85rem; color:var(--muted); text-decoration:underline; text-decoration-color:rgba(206,195,199,.4); text-underline-offset:4px;
}
.skip:hover{color:var(--ivory)}

/* ---------- reveal on scroll (only when JS is running) ---------- */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform .9s ease}
.js .reveal.in{opacity:1; transform:none}

/* ---------- B. photo ---------- */
.reveal-photo{
  padding:clamp(72px, 12vw, 120px) var(--gutter) clamp(72px, 10vw, 110px);
  display:flex; flex-direction:column; align-items:center; text-align:center; outline:none;
}
.line-above,.line-below{font-family:var(--serif); font-weight:400; font-size:clamp(1.75rem, 5.6vw, 2.7rem); line-height:1.2}
.line-above{margin-bottom:clamp(28px, 5vw, 40px)}
.line-below{margin-top:clamp(28px, 5vw, 40px)}
.photo{
  margin:0; width:min(520px, 100%); aspect-ratio:1152/1206; position:relative;
  border-radius:22px; padding:6px;
  background:linear-gradient(145deg, rgba(230,199,139,.55), rgba(221,166,172,.35) 55%, rgba(230,199,139,.25));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 70px -20px rgba(230,199,139,.35);
}
.photo picture,.photo img{display:block; width:100%; height:100%}
.photo img{border-radius:17px; object-fit:cover; object-position:50% 60%}
.js .photo.reveal{transform:scale(1.035); transition:opacity 1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js .photo.reveal.in{transform:scale(1)}
.support{margin-top:1rem; color:var(--muted); font-size:1.05rem; letter-spacing:.02em}

/* ---------- B2. the day we met ---------- */
.begin{padding:clamp(30px, 6vw, 60px) var(--gutter) clamp(60px, 10vw, 100px); text-align:center; position:relative}
.begin::before{
  content:""; display:block; width:1px; height:clamp(48px, 9vw, 80px); margin:0 auto clamp(26px, 5vw, 40px);
  background:linear-gradient(180deg, rgba(230,199,139,0), var(--gold));
}
.begin .label{margin-bottom:.9rem}
.begin-date{font-weight:400; font-size:clamp(2.3rem, 8.5vw, 4.2rem); color:var(--gold); letter-spacing:.01em; text-shadow:0 0 40px rgba(230,199,139,.25)}
.begin-line{margin-top:.8rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem, 4vw, 1.6rem); color:var(--ivory)}
.begin-count{margin-top:1.2rem; color:var(--muted); font-size:1rem; letter-spacing:.02em}
.begin-count strong{color:var(--ivory); font-weight:500}

/* ---------- C. feelings ---------- */
.feelings{padding:clamp(40px, 8vw, 90px) var(--gutter) clamp(60px, 10vw, 110px); max-width:calc(680px + 2 * var(--gutter)); margin:0 auto}
.section-title{font-size:clamp(2rem, 5.6vw, 2.8rem); text-align:center; margin-bottom:clamp(40px, 8vw, 72px); color:var(--ivory)}
.section-title::after{content:""; display:block; width:48px; height:1px; margin:1.1rem auto 0; background:var(--gold); opacity:.7}
.passage{display:grid; grid-template-columns:56px 1fr; gap:clamp(16px, 4vw, 28px); align-items:start; padding:clamp(22px, 4vw, 30px) 0}
.passage + .passage{border-top:1px solid rgba(206,195,199,.14)}
.passage h3{font-size:clamp(1.6rem, 4.6vw, 2.05rem); color:var(--gold); margin-bottom:.6rem}
.passage p{color:#efe6e8}
.mark{position:relative; width:56px; height:56px; margin-top:.2rem}
/* 1: a light that brightens */
.glow{position:absolute; inset:14px; border-radius:50%; background:radial-gradient(circle, #fff4de, var(--gold) 45%, rgba(230,199,139,0) 72%); opacity:.15; transform:scale(.6); transition:opacity 1.6s ease .3s, transform 1.6s ease .3s}
.p-smile.in .glow{opacity:1; transform:scale(1.25)}
/* 2: ripples that settle */
.dot{position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--blush)}
.ring{position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; border-radius:50%; border:1px solid var(--blush); opacity:0}
.p-touch.in .r1{animation:ripple 2.2s ease-out .3s forwards}
.p-touch.in .r2{animation:ripple2 2.6s ease-out .9s forwards}
@keyframes ripple{0%{transform:scale(.6); opacity:0}30%{opacity:.8}100%{transform:scale(2.6); opacity:.28}}
@keyframes ripple2{0%{transform:scale(.6); opacity:0}30%{opacity:.6}100%{transform:scale(3.8); opacity:.12}}
/* 3: two lights that come together */
.twin{position:absolute; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; transition:left 1.8s cubic-bezier(.3,.1,.2,1) .3s, box-shadow 1s ease 1.6s}
.twin.a{left:2px; background:var(--gold)}
.twin.b{left:42px; background:var(--blush)}
.p-love.in .twin.a{left:17px; box-shadow:0 0 16px 3px rgba(230,199,139,.45)}
.p-love.in .twin.b{left:27px; box-shadow:0 0 16px 3px rgba(221,166,172,.45)}

/* ---------- D. letter ---------- */
.letter-wrap{padding:clamp(30px, 6vw, 60px) var(--gutter) clamp(70px, 10vw, 110px)}
.letter{
  width:var(--col); margin:0 auto; background:var(--paper); color:var(--ink);
  padding:clamp(30px, 7vw, 64px) clamp(24px, 7vw, 60px);
  border-radius:6px 6px 10px 10px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(230,199,139,.25);
  background-image:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%), radial-gradient(120% 80% at 100% 100%, rgba(221,166,172,.14), transparent 60%);
}
.letter p + p{margin-top:1.1em}
.letter .salutation{font-family:var(--serif); font-style:italic; font-size:1.7rem; line-height:1.2; margin-bottom:.2em}
.letter .letter-heart{font-family:var(--serif); font-style:italic; font-size:1.45rem; line-height:1.35; color:#5b3e44; padding:.2em 0 .2em 1rem; border-left:2px solid var(--blush)}
.letter .closing{margin-top:1.8em}
.letter .signature{margin-top:.2em; font-family:var(--serif); font-style:italic; font-weight:500; font-size:2rem; line-height:1.1}

/* ---------- E. saudade ---------- */
.saudade{padding:0 var(--gutter) max(90px, calc(60px + env(safe-area-inset-bottom))); text-align:center}
.saudade-box{max-width:560px; margin:0 auto}
.saudade-box summary{list-style:none}
.saudade-box summary::-webkit-details-marker{display:none}
.saudade-box[open] summary{box-shadow:0 0 50px -8px rgba(221,166,172,.75); border-color:var(--blush)}
.saudade-note{
  margin-top:1.6rem; font-family:var(--serif); font-size:clamp(1.5rem, 4.6vw, 1.9rem); line-height:1.35; color:var(--ivory);
  text-shadow:0 0 30px rgba(221,166,172,.35);
}
.saudade-box[open] .saudade-note{animation:noteIn 1.1s ease both}
@keyframes noteIn{from{opacity:0; transform:translateY(8px); filter:blur(3px)} to{opacity:1; transform:none; filter:none}}
.made{margin-top:clamp(70px, 12vw, 110px); color:var(--muted); font-size:.95rem; letter-spacing:.04em}
.final-sign{margin-top:.4rem; font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--gold)}
.sr-live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.replay{
  margin-top:1.1rem; min-height:44px; padding:.5em 1.2em; border-radius:999px; cursor:pointer;
  border:1px solid rgba(230,199,139,.45); background:transparent; color:var(--gold); font:500 .9rem var(--sans);
}
.replay.playing{background:rgba(230,199,139,.1)}
.replay:hover{border-color:var(--gold)}

/* ---------- "keep going" cue ---------- */
.scroll-cue{
  position:fixed; left:50%; bottom:max(18px, calc(10px + env(safe-area-inset-bottom))); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:2px; min-height:44px; min-width:44px;
  padding:.55em 1.1em .35em; border:0; border-radius:999px; cursor:pointer;
  background:rgba(16,21,34,.72); color:var(--gold); font:500 .8rem/1.2 var(--sans); letter-spacing:.06em;
  box-shadow:0 0 0 1px rgba(230,199,139,.3), 0 10px 30px -10px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:translate(-50%, 8px); pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
}
.scroll-cue.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
.scroll-cue svg{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- audio control (only exists when a track is configured) ---------- */
.audio-btn{
  position:fixed; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom)); z-index:5;
  min-height:44px; padding:.55em 1.1em; border-radius:999px; border:1px solid rgba(230,199,139,.5);
  background:rgba(16,21,34,.78); color:var(--ivory); font:500 .85rem var(--sans); cursor:pointer; backdrop-filter:blur(6px);
}

/* ---------- desktop ---------- */
@media (min-width:760px){
  .passage{grid-template-columns:72px 1fr}
  .mark{transform:scale(1.15); transform-origin:left top}
}

/* ---------- reduced motion: same page, no travel ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important}
  .js .reveal{opacity:1; transform:none}
  .js .photo.reveal{transform:none}
  .glow{opacity:1; transform:scale(1.25)}
  .ring{opacity:.25}
  .r1{transform:scale(2.6)} .r2{transform:scale(3.8)}
  .twin.a{left:17px} .twin.b{left:27px}
  .scroll-cue svg{animation:none}
}