/* ============================================================================
   OUR STORY — anniversary experience styles
   Palette: deep night → dusk rose → starlight gold
   ========================================================================== */
:root{
  --ink:#f4ecff;
  --ink-dim:#c9b8e8;
  --rose:#ff8fab;
  --rose-soft:#ffb3c6;
  --gold:#ffd6a5;
  --blue:#a0c4ff;
  --paper:#fbf6ec;
  --paper-ink:#4a3f52;
  --sky-top:#0b0a1f;
  --sky-bot:#241a3a;
  --card:rgba(255,255,255,.06);
  --card-line:rgba(255,255,255,.14);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --serif:'Cormorant Garamond',Georgia,serif;
  --hand:'Caveat',cursive;
  --marker:'Permanent Marker',cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:#07061a;
  overflow-x:hidden;
  max-width:100vw;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;height:100vh;height:100dvh}

/* ---- ambient fixed layers ---- */
#sky{
  position:fixed; inset:0; z-index:-3;
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-bot) 100%);
  transition:background 4s ease;
}
#stars,#shooting,#hearts-trail{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-2; pointer-events:none;
}
#hearts-trail{z-index:60}

/* ============================ GATE ======================================== */
.gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:24px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(36,26,58,.4), rgba(7,6,26,.92));
  backdrop-filter:blur(2px);
  transition:opacity 1.1s ease, visibility 1.1s;
}
body.unlocked .gate{opacity:0; visibility:hidden; pointer-events:none}
.gate-card{
  text-align:center; width:min(440px,92vw); max-width:100%;
  padding:44px 30px; border-radius:22px;
  background:var(--card); border:1px solid var(--card-line);
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
  animation:floatIn 1s ease both;
}
.wax-seal{
  width:66px; height:66px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; font-size:30px; color:#fff;
  background:radial-gradient(circle at 35% 30%, #ff9db4, #c1274f);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.35), 0 8px 20px rgba(193,39,79,.4);
}
.gate-kicker{letter-spacing:.35em; text-transform:uppercase; font-size:.72rem; color:var(--ink-dim); margin:0 0 6px}
.gate-prompt{font-size:1.9rem; font-weight:500; margin:0 0 22px; line-height:1.25}
#gate-form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
#gate-input{
  flex:1 1 200px; min-width:0; padding:13px 16px; border-radius:12px;
  border:1px solid var(--card-line); background:rgba(0,0,0,.25);
  color:var(--ink); font-family:var(--serif); font-size:1.05rem; outline:none;
}
#gate-input:focus{border-color:var(--rose)}
#gate-form button, .ghost-btn{
  padding:13px 20px; border-radius:12px; border:0; cursor:pointer;
  font-family:var(--serif); font-size:1.05rem; font-weight:600; color:#2a1430;
  background:linear-gradient(120deg,var(--gold),var(--rose-soft));
  box-shadow:0 8px 20px rgba(255,143,171,.35); transition:transform .15s, filter .15s;
}
#gate-form button:hover,.ghost-btn:hover{transform:translateY(-2px); filter:brightness(1.06)}
.gate-hint{min-height:1.2em; margin:16px 0 0; color:var(--ink-dim); font-style:italic; font-size:1rem}
.gate.shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(7px)}50%{transform:translateX(-9px)}}

/* ============================ TIME LOCK =================================== */
.lockscreen{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(36,26,58,.45), rgba(7,6,26,.95)); backdrop-filter:blur(3px)}
.lock-card{text-align:center; width:min(460px,92vw); max-width:100%; padding:44px 30px; border-radius:22px;
  background:var(--card); border:1px solid var(--card-line); box-shadow:var(--shadow); backdrop-filter:blur(10px);
  animation:floatIn 1s ease both}
.lock-seal{width:72px; height:72px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; font-size:32px;
  background:radial-gradient(circle at 35% 30%, #ffd9a5, #c1873f); box-shadow:inset 0 -6px 14px rgba(0,0,0,.35), 0 8px 22px rgba(193,135,63,.4)}
.lock-title{font-size:1.85rem; font-weight:500; margin:6px 0 12px; line-height:1.25;
  background:linear-gradient(120deg,var(--gold),var(--rose),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lock-sub{color:var(--ink-dim); font-style:italic; font-size:1.1rem; line-height:1.5; margin:0 0 24px}
.lock-count{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; justify-content:center; color:var(--ink-dim)}
.lock-count span{font-size:2.2rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; min-width:1.6ch; display:inline-block}
.lock-count small{margin-right:6px; letter-spacing:.06em; font-size:.85rem}
.lock-signed{margin-top:26px; font-family:var(--hand); font-size:1.5rem; color:var(--gold)}

/* ============================ STORY / CHAPTERS ============================ */
#story{opacity:0; transition:opacity 1.4s ease .3s}
body.unlocked #story{opacity:1}
.chapter{
  position:relative; min-height:100vh; min-height:100dvh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:90px 22px; text-align:center;
}
.section-title{
  font-size:clamp(2rem,6vw,3.4rem); font-weight:500; margin:0 0 6px;
  letter-spacing:.02em;
  background:linear-gradient(120deg,var(--gold),var(--rose),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-sub{color:var(--ink-dim); font-style:italic; font-size:1.15rem; margin:0 0 34px}
.eyebrow{letter-spacing:.4em; text-transform:uppercase; font-size:.8rem; color:var(--gold); margin:0 0 10px}

/* scroll-reveal */
.reveal{opacity:0; transform:translateY(38px); transition:opacity 1s ease, transform 1s ease}
.reveal.in-view{opacity:1; transform:none}

/* ---- arrival ---- */
.arrival{overflow:hidden}
#name-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9}
.names{
  font-size:clamp(2.6rem,9vw,6rem); font-weight:600; margin:.1em 0 .35em; line-height:1;
  text-shadow:0 0 40px rgba(255,143,171,.35);
}
.counter{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; justify-content:center; font-size:1.1rem; color:var(--ink-dim)}
.counter span[data-unit]{font-size:2.1rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; min-width:1.4ch; display:inline-block}
.counter small{margin-right:6px; letter-spacing:.08em}
.counter-tag{flex-basis:100%; font-style:italic; color:var(--gold); margin-top:8px; font-size:1.15rem}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:var(--ink-dim); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase}
.scroll-cue i{display:block; width:1px; height:38px; margin:8px auto 0; background:linear-gradient(var(--ink-dim),transparent); animation:pulseLine 1.8s infinite}
@keyframes pulseLine{0%,100%{opacity:.3}50%{opacity:1}}

/* ---- letter ---- */
.letter-chapter{gap:10px}
.envelope{
  position:relative; width:min(340px,80vw); height:min(220px,52vw); cursor:pointer;
  perspective:900px; transition:opacity .6s, transform .6s;
}
.env-body{position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(160deg,#f6dfc7,#e9c3a5);
  box-shadow:var(--shadow), inset 0 0 40px rgba(150,90,60,.2);}
.env-body::before,.env-body::after{content:""; position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(45deg,transparent 49%,rgba(180,120,90,.35) 50%,transparent 51%);}
.env-body::after{background:linear-gradient(-45deg,transparent 49%,rgba(180,120,90,.35) 50%,transparent 51%)}
.env-flap{position:absolute; top:0; left:0; right:0; height:52%; transform-origin:top; z-index:3;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(160deg,#eeccae,#dcae8c);
  transition:transform .8s ease;}
.env-seal{position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:22px;
  background:radial-gradient(circle at 35% 30%,#ff9db4,#c1274f); box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:opacity .4s;}
.env-hint{position:absolute; bottom:-30px; left:0; right:0; color:var(--ink-dim); font-style:italic; font-size:1rem}
.envelope.open .env-flap{transform:rotateX(180deg)}
.envelope.open .env-seal,.envelope.open .env-hint{opacity:0}
.envelope.open{transform:translateY(20px) scale(.9); opacity:.35; pointer-events:none}
.paper{
  max-width:560px; width:min(560px,88vw); margin-top:28px; padding:34px 34px 28px;
  border-radius:6px; background:var(--paper); color:var(--paper-ink);
  box-shadow:var(--shadow); text-align:left; font-size:1.35rem; line-height:1.7;
  max-height:0; overflow:hidden; opacity:0; transform:translateY(20px);
  transition:max-height 1s ease,opacity .8s ease,transform .8s ease,padding .6s;
}
.paper.show{max-height:2400px; opacity:1; transform:none}
.paper-lines p{margin:0 0 .35em; font-family:var(--hand); font-size:1.6rem}
.paper-signoff{margin-top:18px; font-family:var(--hand); font-size:1.5rem; color:#8a5a6a}
.blink::after{content:"▍"; animation:blink 1s steps(1) infinite; color:var(--rose)}
@keyframes blink{50%{opacity:0}}

/* ---- reasons flip cards ---- */
.reasons-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; width:min(880px,94vw); margin-bottom:26px}
.rcard{aspect-ratio:3/4; perspective:900px; cursor:pointer; background:none; border:0; padding:0}
.rcard-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s}
.rcard.flipped .rcard-inner{transform:rotateY(180deg)}
.rcard-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; display:grid; place-items:center; padding:16px; text-align:center}
.rcard-front{background:linear-gradient(150deg,rgba(255,214,165,.16),rgba(255,143,171,.16)); border:1px solid var(--card-line); font-size:2.4rem; color:var(--gold)}
.rcard-back{background:linear-gradient(150deg,rgba(160,196,255,.16),rgba(255,143,171,.2)); border:1px solid var(--card-line); transform:rotateY(180deg); font-size:1.15rem; line-height:1.35; color:var(--ink)}
.rcard-num{position:absolute; top:8px; left:12px; font-family:var(--marker); font-size:.9rem; color:var(--rose-soft); opacity:.8}

/* ---- gallery frames ---- */
.gallery-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:26px; width:min(1000px,94vw)}
.frame{
  background:linear-gradient(145deg,#2a2140,#171126);
  padding:14px 14px 40px; border-radius:4px; cursor:pointer;
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.08);
  transform:rotate(var(--tilt,0deg)); transition:transform .35s, box-shadow .35s;
  position:relative;
}
.frame:nth-child(odd){--tilt:-1.5deg}
.frame:nth-child(3n){--tilt:2deg}
.frame:hover{transform:rotate(0deg) translateY(-6px) scale(1.03); box-shadow:0 26px 60px rgba(0,0,0,.55)}
.frame .matte{background:#0d0a1c; padding:8px; border-radius:2px; border:1px solid rgba(255,255,255,.06)}
.frame img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:1px}
.frame figcaption{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-family:var(--hand); font-size:1.3rem; color:var(--gold)}

/* ---- glowing map ---- */
.map-chapter{max-width:100%}
.year-scrubber{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:18px}
.year-btn{padding:7px 14px; border-radius:30px; border:1px solid var(--card-line); background:var(--card); color:var(--ink-dim); cursor:pointer; font-family:var(--serif); font-size:1rem; transition:.2s}
.year-btn.active,.year-btn:hover{color:#2a1430; background:linear-gradient(120deg,var(--gold),var(--rose-soft)); border-color:transparent}
.map-stage{width:min(1000px,96vw); aspect-ratio:1000/620; position:relative; border-radius:20px; overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%, #17122e, #0a0820 70%);
  border:1px solid var(--card-line); box-shadow:var(--shadow)}
#map-svg{width:100%; height:100%; display:block}
.map-path-glow{stroke:url(#path-grad); stroke-width:7; stroke-linecap:round; filter:url(#glow); opacity:.85}
.map-path{stroke:#fff7ee; stroke-width:2; stroke-linecap:round; opacity:.9}
.pin{cursor:pointer}
.pin .pin-dot{fill:var(--gold); filter:url(#glow)}
.pin-polaroid{transition:transform .3s}
.pin:hover .pin-polaroid{transform:scale(1.12)}
.pin-card{
  position:absolute; z-index:5; width:210px; padding:12px 12px 14px; border-radius:6px;
  background:var(--paper); color:var(--paper-ink); box-shadow:var(--shadow);
  transform:translate(-50%,-115%) scale(.6); transform-origin:bottom center;
  opacity:0; pointer-events:none; transition:transform .3s, opacity .3s;
}
.pin-card.show{opacity:1; transform:translate(-50%,-112%) scale(1)}
.pin-card img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px}
.pin-card .pc-year{font-family:var(--marker); color:var(--rose); font-size:.95rem; margin:8px 0 2px}
.pin-card .pc-msg{font-family:var(--hand); font-size:1.35rem; line-height:1.2}

/* ---- polaroid camera ---- */
.camera-body{
  position:relative; width:min(340px,86vw); padding:26px 22px 22px; border-radius:26px;
  background:linear-gradient(160deg,#efe7dc,#cdbfae); box-shadow:var(--shadow), inset 0 -8px 20px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.4);
}
.cam-lens{width:120px; height:120px; margin:6px auto 18px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #4a5a72, #10141f 70%);
  box-shadow:inset 0 0 0 10px #1c2230, inset 0 0 30px #000, 0 4px 10px rgba(0,0,0,.4); position:relative;}
.cam-glint{position:absolute; top:22%; left:26%; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%)}
.cam-strip{display:flex; align-items:center; justify-content:space-between; padding:0 6px; margin-bottom:16px}
.cam-exp{font-family:'Courier New',monospace; font-weight:700; letter-spacing:.05em; color:#7a2540; background:#0c0c10; padding:6px 12px; border-radius:6px; box-shadow:inset 0 2px 6px #000; font-size:1.1rem}
.cam-exp.low{color:#ffb703; animation:flick 1.2s infinite}
.cam-exp.empty{color:#ff5470}
@keyframes flick{50%{opacity:.55}}
.cam-led{width:12px; height:12px; border-radius:50%; background:#39d98a; box-shadow:0 0 10px #39d98a}
.cam-led.busy{background:#ffb703; box-shadow:0 0 10px #ffb703}
.cam-led.off{background:#5a5a5a; box-shadow:none}
.cam-shutter{display:block; width:74px; height:74px; margin:0 auto; border-radius:50%; cursor:pointer; border:0;
  background:radial-gradient(circle at 40% 35%,#ff9db4,#c1274f); box-shadow:0 8px 18px rgba(193,39,79,.5), inset 0 -4px 8px rgba(0,0,0,.3);
  transition:transform .1s}
.cam-shutter:active{transform:scale(.9)}
.cam-shutter:disabled{filter:grayscale(.7) brightness(.8); cursor:not-allowed}
.cam-shutter span{display:block; width:100%; height:100%; border-radius:50%; border:3px solid rgba(255,255,255,.5)}
.cam-out{position:absolute; left:50%; bottom:12px; width:2px; height:0; background:#111; transform:translateX(-50%)}
.cam-note{color:var(--ink-dim); font-style:italic; margin:16px 0 30px; min-height:1.3em}
.flash{position:fixed; inset:0; background:#fff; opacity:0; z-index:90; pointer-events:none}
.flash.fire{animation:flash .5s ease}
@keyframes flash{0%{opacity:0}8%{opacity:.95}100%{opacity:0}}

/* memory wall (draggable polaroids) */
.wall{position:relative; width:min(1000px,96vw); min-height:420px; margin-top:10px;
  border-radius:18px; border:1px dashed var(--card-line);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px)}
.polaroid{
  position:absolute; width:180px; padding:12px 12px 44px; background:#fffdf7; border-radius:3px;
  box-shadow:0 10px 26px rgba(0,0,0,.45); cursor:grab; touch-action:none;
  transform:rotate(var(--r,0deg)); user-select:none;
}
.polaroid.dragging{cursor:grabbing; box-shadow:0 26px 60px rgba(0,0,0,.6); z-index:40}
.polaroid img{width:100%; aspect-ratio:1/1; object-fit:cover; background:#111; display:block}
.polaroid .cap{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-family:var(--marker); font-size:1rem; color:#3a2f42; padding:0 8px}
.polaroid.developing img{animation:develop 6s ease forwards}
@keyframes develop{0%{filter:brightness(.15) contrast(.4) sepia(1) saturate(.2); opacity:.5}
  40%{filter:brightness(.6) contrast(.8) sepia(.6)}
  100%{filter:none; opacity:1}}
.cap-input{position:absolute; bottom:8px; left:8px; right:8px; border:0; border-bottom:1px solid #d9cdbb;
  background:transparent; text-align:center; font-family:var(--marker); font-size:1rem; color:#3a2f42; outline:none}

/* ---- open when ---- */
.openwhen-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; width:min(900px,94vw)}
.ow-card{position:relative; padding:24px 20px; border-radius:14px; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--card-line); transition:.3s; min-height:120px}
.ow-card:hover{border-color:var(--rose)}
.ow-label{font-size:1.35rem; color:var(--gold)}
.ow-body{max-height:0; overflow:hidden; opacity:0; transition:.5s; font-style:italic; color:var(--ink-dim); font-size:1.1rem; margin-top:0}
.ow-card.open .ow-body{max-height:240px; opacity:1; margin-top:12px}

/* ---- wrapped / year in review ---- */
.wrapped-chapter{padding:0; height:auto}
.wrapped-track{width:100%}
.wslide{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 22px; scroll-snap-align:start}
.wbig{font-size:clamp(4rem,20vw,11rem); font-weight:600; line-height:.9; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--gold),var(--rose),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(255,143,171,.25)}
.wlabel{font-size:1.6rem; color:var(--ink-dim); margin-top:10px; letter-spacing:.05em}

/* ---- wish ---- */
#wish-form,#gb-form,#gate-form{width:min(560px,92vw)}
#wish-form,#gb-form{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; justify-content:center}
#wish-input,#gb-input{flex:1 1 220px; min-width:0; padding:13px 16px; border-radius:12px; border:1px solid var(--card-line); background:rgba(0,0,0,.25); color:var(--ink); font-family:var(--serif); font-size:1.05rem; outline:none}
#wish-input:focus,#gb-input:focus{border-color:var(--rose)}
.wish-log{list-style:none; padding:0; width:min(560px,92vw); text-align:center}
.wish-log li{font-family:var(--hand); font-size:1.4rem; color:var(--gold); opacity:.9; margin:6px 0; animation:floatIn .8s both}

/* ---- guestbook ---- */
.gb-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; width:min(1000px,94vw)}
.gb-note{padding:18px 18px 26px; border-radius:8px; background:linear-gradient(160deg,#fff6cf,#ffe9a8); color:#5a4a2a;
  font-family:var(--hand); font-size:1.4rem; box-shadow:var(--shadow); transform:rotate(var(--r,-1deg)); animation:floatIn .7s both}
.gb-note small{display:block; margin-top:10px; font-family:var(--serif); font-size:.85rem; opacity:.6}

/* ---- finale ---- */
.finale-chapter{gap:6px}
.finale-photo{width:min(340px,80vw); aspect-ratio:1/1; border-radius:8px; margin-bottom:26px;
  background-size:cover; background-position:center; box-shadow:var(--shadow); padding:12px; border:12px solid #fffdf7;
  transform:scale(.7); opacity:0; transition:transform 1.4s cubic-bezier(.2,.8,.2,1), opacity 1.4s}
.finale-chapter.in-view .finale-photo{transform:scale(1); opacity:1}
.finale-headline{font-size:clamp(2.4rem,8vw,4.6rem); margin:.1em 0; font-weight:600;
  background:linear-gradient(120deg,var(--gold),var(--rose)); -webkit-background-clip:text; background-clip:text; color:transparent}
.finale-sub{color:var(--ink-dim); font-style:italic; font-size:1.3rem; max-width:520px}
.finale-q{font-family:var(--hand); font-size:2rem; color:var(--gold); margin-top:20px}
.finale-heart{font-size:2.6rem; color:var(--rose); margin-top:20px; animation:beat 1.6s infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}

/* ---- music toggle ---- */
.music-toggle{position:fixed; top:16px; right:16px; z-index:80; width:48px; height:48px; border-radius:50%; border:1px solid var(--card-line);
  background:var(--card); backdrop-filter:blur(8px); color:var(--gold); font-size:1.3rem; cursor:pointer; transition:.3s}
.music-toggle:hover{transform:scale(1.08)}
.music-toggle .note{display:inline-block}
.music-toggle:not(.playing) .note{animation:sway 2s ease-in-out infinite}
.music-toggle.playing{background:linear-gradient(120deg,var(--gold),var(--rose-soft)); color:#2a1430}
@keyframes sway{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}

/* ---- lightbox ---- */
.lightbox{position:fixed; inset:0; z-index:3000; display:none; place-items:center; padding:30px;
  background:rgba(4,3,15,.9); backdrop-filter:blur(6px)}
.lightbox.show{display:grid}
.lightbox figure{margin:0; max-width:min(760px,92vw); text-align:center}
.lightbox img{max-width:100%; max-height:76vh; border-radius:6px; border:10px solid #fffdf7; box-shadow:var(--shadow)}
.lightbox figcaption{margin-top:14px; font-family:var(--hand); font-size:1.6rem; color:var(--gold)}
.lightbox-close{position:absolute; top:18px; right:24px; font-size:2.4rem; background:none; border:0; color:var(--ink); cursor:pointer; line-height:1}

@keyframes floatIn{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}

/* ---- pin card extras ---- */
.pin-card .pc-fact{font-family:var(--serif); font-size:.95rem; line-height:1.25; color:#6a5a72; margin-top:8px; font-style:italic}
.pin-card .pc-more{font-family:var(--serif); font-size:.8rem; color:var(--rose); margin-top:8px; letter-spacing:.04em}

/* ---- rich memory modal (inside lightbox caption) ---- */
.lightbox figcaption{max-width:640px; margin-left:auto; margin-right:auto; max-height:44vh; overflow-y:auto; text-align:left}
.mem-head{font-family:var(--marker); color:var(--rose); font-size:1.1rem; text-align:center; margin-bottom:8px}
.mem-msg{font-family:var(--hand); font-size:1.7rem; color:var(--gold); text-align:center; line-height:1.2; margin-bottom:14px}
.mem-fact,.mem-rom{font-family:var(--serif); font-size:1.05rem; line-height:1.4; color:var(--ink); margin:10px 0; padding-left:4px}
.mem-fact b,.mem-rom b{color:var(--rose-soft); font-style:normal}
.mem-weather{font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--ink-dim); margin-top:12px; border-top:1px solid var(--card-line); padding-top:10px}

/* ---- lightbox / memory modal: scroll the WHOLE modal so nothing clips ---- */
.lightbox.show{display:block; overflow-y:auto; -webkit-overflow-scrolling:touch}
.lightbox figure{margin:64px auto 48px; display:block}
.lightbox img{max-height:52vh}
.lightbox figcaption{max-height:none; overflow:visible; padding-bottom:20px}
.lightbox-close{position:fixed}

/* ---- Leaflet journey map ---- */
#map-leaflet{width:100%; height:100%; background:#04050e}
.leaflet-container{background:#04050e; font-family:var(--serif)}
.map-tip{color:var(--ink-dim); font-style:italic; font-size:1rem; margin-top:14px}
.route-glow{filter:drop-shadow(0 0 6px #ff8fab)}
.pin-div{background:none!important; border:0!important}
.pin-pola{position:relative; width:64px; padding:5px 5px 16px; background:#fffdf7; border-radius:3px;
  box-shadow:0 8px 20px rgba(0,0,0,.55); transform:rotate(var(--r,0deg)); transition:transform .25s}
.pin-pola:hover{transform:rotate(0) scale(1.1)}
.pin-div .pin-pola img{width:54px !important; height:54px !important; max-width:none !important; aspect-ratio:auto !important; object-fit:cover; display:block; background:#111}
.pin-pola span{position:absolute; bottom:2px; left:0; right:0; text-align:center; font-family:var(--marker); font-size:.8rem; color:#c1274f}

/* ---- star map dome ---- */
.sky-stage{position:relative; width:min(560px,92vw); aspect-ratio:1/1; margin:6px auto 0; border-radius:50%;
  box-shadow:0 0 60px rgba(120,120,220,.25), inset 0 0 40px rgba(0,0,0,.6)}
#sky-base,#sky-twinkle{position:absolute; inset:0; width:100%; height:100%; border-radius:50%}
#sky-twinkle{pointer-events:none}
.sky-note{color:var(--ink-dim); font-style:italic; font-size:1.05rem; margin-top:22px; max-width:520px}

/* ---- written in us ---- */
.us-birthdays{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; width:min(760px,94vw); margin-bottom:22px}
.us-card{padding:26px 22px; border-radius:18px; text-align:left; background:var(--card); border:1px solid var(--card-line); backdrop-filter:blur(6px)}
.us-card.wide{width:min(760px,94vw); margin:0 auto 22px}
.us-card.birthday h3{margin:.1em 0; font-size:1.9rem; font-weight:600; color:var(--ink)}
.us-sign{font-size:1.4rem; color:var(--gold)}
.us-date{font-family:var(--hand); font-size:1.4rem; color:var(--rose-soft); margin-bottom:10px}
.us-traits{font-size:1.05rem; line-height:1.4; color:var(--ink)}
.us-facts{margin:12px 0 12px; padding-left:18px}
.us-facts li{font-size:.98rem; line-height:1.35; color:var(--ink-dim); margin:5px 0}
.us-meta{font-size:.92rem; color:var(--gold); opacity:.85; line-height:1.5; border-top:1px solid var(--card-line); padding-top:10px}
.us-badge{display:inline-block; font-family:var(--marker); font-size:1rem; color:#2a1430; padding:5px 14px; border-radius:20px; background:linear-gradient(120deg,var(--gold),var(--rose-soft)); margin-bottom:14px}
.us-verdict{font-family:var(--hand); font-size:1.55rem; color:var(--gold); line-height:1.25; margin:0 0 14px}
.us-strengths{list-style:none; padding:0; margin:0 0 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px}
.us-strengths li{font-size:1rem; line-height:1.3; color:var(--ink)}
.us-summary{font-size:1.08rem; line-height:1.5; color:var(--ink); margin:6px 0}
.us-note{font-style:italic; color:var(--rose-soft); font-size:1.05rem; line-height:1.45; margin-top:10px; border-top:1px solid var(--card-line); padding-top:12px}
.us-cols.two{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:14px}
.us-cols.two .num{font-size:2.6rem; font-weight:600; color:var(--gold); font-family:var(--serif); display:block; line-height:1}
.us-cols.two p{margin:6px 0 0; font-size:1rem; line-height:1.35; color:var(--ink)}

/* ---- faith ---- */
.faith-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; width:min(1000px,94vw); margin-bottom:26px}
.verse{margin:0; padding:24px 22px; border-radius:16px; text-align:left; background:var(--card); border:1px solid var(--card-line)}
.verse blockquote{margin:0 0 12px; font-size:1.25rem; line-height:1.45; color:var(--ink); font-style:italic}
.verse figcaption{font-family:var(--marker); font-size:.95rem; color:var(--gold)}
.verse-note{margin:10px 0 0; font-family:var(--hand); font-size:1.3rem; color:var(--rose-soft); line-height:1.2}
.faith-blessing{max-width:640px; margin:0; font-size:1.3rem; line-height:1.6; font-style:italic; color:var(--ink); border-left:2px solid var(--rose); padding-left:20px}

/* ---- our day (the plan) ---- */
.ourday-timeline{width:min(660px,94vw); text-align:left; margin:0 auto 22px; position:relative}
.od-step{display:flex; gap:16px; padding:0 0 22px; position:relative}
.od-step::before{content:""; position:absolute; left:63px; top:8px; bottom:-6px; width:2px;
  background:linear-gradient(var(--rose),rgba(255,143,171,.15))}
.od-step:last-child::before{display:none}
.od-time{flex:0 0 62px; text-align:right; font-family:var(--marker); font-size:.95rem; color:var(--gold); padding-top:3px; line-height:1.2}
.od-body{flex:1; position:relative; padding-left:22px}
.od-body::before{content:""; position:absolute; left:-9px; top:6px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff9db4,#c1274f); box-shadow:0 0 10px rgba(255,143,171,.6)}
.od-body h3{margin:0 0 4px; font-size:1.3rem; font-weight:600; color:var(--ink)}
.od-body p{margin:0; font-size:1.05rem; line-height:1.5; color:var(--ink-dim)}
.ourday-budget{width:min(660px,94vw); margin:0 auto 30px; font-style:italic; color:var(--gold); font-size:1.05rem}
.ourday-questions{width:min(660px,94vw); margin:0 auto; text-align:left}
.od-tradition{padding:22px 22px; border-radius:16px; background:linear-gradient(150deg,rgba(255,214,165,.14),rgba(255,143,171,.16));
  border:1px solid var(--card-line); margin-bottom:22px}
.od-badge{display:inline-block; font-family:var(--marker); font-size:.9rem; color:#2a1430; padding:4px 13px; border-radius:20px;
  background:linear-gradient(120deg,var(--gold),var(--rose-soft)); margin-bottom:12px}
.od-tradition p{margin:0; font-family:var(--hand); font-size:1.6rem; line-height:1.25; color:var(--gold)}
.od-qtitle{font-size:1.2rem; color:var(--ink); margin:0 0 12px; font-weight:600}
.od-qlist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.od-qlist li{padding:12px 16px; border-radius:12px; background:var(--card); border:1px solid var(--card-line);
  font-size:1.05rem; line-height:1.4; color:var(--ink)}
.od-qlist li::before{content:"♥ "; color:var(--rose)}
@media (max-width:640px){
  .od-time{flex-basis:52px; font-size:.85rem}
  .od-step::before{left:53px}
  .od-body h3{font-size:1.15rem}
  .od-tradition p{font-size:1.35rem}
}

/* ---- cosmos / facts section ---- */
.cosmos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; width:min(1000px,94vw)}
.cosmos-card{position:relative; padding:22px 20px; border-radius:16px; text-align:left;
  background:var(--card); border:1px solid var(--card-line); backdrop-filter:blur(6px);
  animation:floatIn .8s var(--d,0s) both}
.cosmos-card:hover{border-color:var(--rose)}
.cosmos-tag{display:inline-block; font-family:var(--marker); font-size:.8rem; letter-spacing:.05em; color:var(--gold);
  padding:3px 10px; border-radius:20px; background:rgba(255,214,165,.12); margin-bottom:10px}
.cosmos-card p{margin:0; font-size:1.1rem; line-height:1.45; color:var(--ink)}

/* ============================ MOBILE ==================================== */
@media (max-width:640px){
  .chapter{padding:76px 16px}
  .section-sub{font-size:1.05rem; margin-bottom:26px}
  .section-title{word-break:normal}

  /* forms stack full-width so nothing clips off-screen */
  #gate-form,#wish-form,#gb-form{flex-direction:column; align-items:stretch}
  #gate-form button,#wish-form button,#gb-form button{width:100%}
  #gate-input,#wish-input,#gb-input{flex:1 1 auto; width:100%}
  .gate-card{padding:34px 20px}
  .gate-prompt{font-size:1.55rem}

  /* arrival */
  .names{font-size:clamp(2.2rem,11vw,3.4rem)}
  .counter{gap:4px 12px}
  .counter span[data-unit]{font-size:1.7rem}
  .counter small{font-size:.85rem; margin-right:3px}

  /* letter */
  .paper{padding:26px 22px 22px; font-size:1.15rem}
  .paper-lines p{font-size:1.35rem}

  /* reasons + gallery + open-when → tighter single/double column */
  .reasons-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
  .rcard-back{font-size:1rem}
  .gallery-wall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px}
  .frame figcaption{font-size:1.1rem}
  .openwhen-grid{grid-template-columns:1fr}

  /* map */
  .map-stage{border-radius:14px}
  .pin-card{width:min(180px,64vw)}
  .pin-card .pc-msg{font-size:1.15rem}
  .year-btn{padding:6px 12px; font-size:.95rem}

  /* camera + wall */
  .camera-body{width:min(300px,88vw)}
  .wall{min-height:520px}
  .polaroid{width:140px; padding:9px 9px 34px}
  .polaroid .cap,.cap-input{font-size:.85rem}

  /* wrapped */
  .wbig{font-size:clamp(3.4rem,26vw,7rem)}
  .wlabel{font-size:1.2rem}

  /* guestbook */
  .gb-wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gb-note{font-size:1.2rem}

  /* finale + chrome */
  .finale-sub{font-size:1.1rem}
  .music-toggle{width:44px; height:44px; top:12px; right:12px}
  .lightbox{padding:16px}
  .lightbox-close{top:10px; right:16px}
}
.wslide{min-height:100dvh}

/* new-section mobile */
@media (max-width:640px){
  .map-stage{aspect-ratio:3/4}
  .sky-stage{width:94vw}
  .sky-note{font-size:.98rem}
  .us-strengths{grid-template-columns:1fr}
  .us-cols.two{grid-template-columns:1fr; gap:12px}
  .us-card.birthday h3{font-size:1.6rem}
  .us-verdict{font-size:1.35rem}
  .faith-grid{grid-template-columns:1fr}
  .verse blockquote{font-size:1.15rem}
  .faith-blessing{font-size:1.15rem; padding-left:14px}
  .lightbox figure{margin:56px auto 32px}
  .lightbox img{max-height:46vh}
}

/* touch: no hover-jitter, bigger tap targets */
@media (hover:none){
  .frame:hover{transform:rotate(var(--tilt,0deg))}
  .cam-shutter{width:82px; height:82px}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}