/* =========================================================
   Velvet Noir - an intimate birthday experience after dark.
   Warm dark palette, candlelight, editorial composition that
   changes per chapter. See THEME_RULES.md for the data
   contract this theme must respect.
   ========================================================= */

:root{
  --bg-0:#151311;
  --bg-1:#1C1917;
  --bg-2:#211D1A;
  --surface:#25211E;
  --surface-2:#2C2622;
  --brown:#4A372C;
  --brown-deep:#604637;
  --champagne:#D6B58A;
  --cream:#EFE4D4;
  --paper:#E8D8C1;
  --gold:#B79468;
  --text:#F3E9DC;
  --text-soft:#B9AA9A;
  --ink:#2B2420;
  --ink-soft:#6b5c4f;

  --font-serif:'Cormorant Garamond', Georgia, serif;
  --font-script:'Alex Brush', cursive;
  --font-ui:'Poppins', system-ui, sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-0);
  font-family:var(--font-ui);
  color:var(--text);
  display:flex;
  justify-content:center;
  padding-block:20px;
}
img{max-width:100%}
button{font:inherit}
button:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- shared type ---------- */
.serif-headline{font-family:var(--font-serif); font-weight:600; font-size:clamp(2.2rem,10vw,3.1rem); line-height:1.12; color:var(--text); margin:0 0 .3em; text-wrap:balance}
.serif-headline.small{font-size:clamp(1.9rem,8vw,2.5rem)}
.serif-headline.light{color:var(--cream)}
.serif-headline.dark{color:var(--ink)}
.script-line{font-family:var(--font-script); font-size:clamp(1.6rem,7vw,2.1rem); color:var(--champagne); margin:.5em 0}
.ui-subtext{font-family:var(--font-ui); font-weight:400; font-size:.95rem; line-height:1.6; color:var(--text-soft); max-width:34ch; margin:0 0 1.2em}
.ui-subtext.light{color:rgba(239,228,212,.82)}
.ui-subtext.dark{color:var(--ink-soft)}
.eyebrow{font-family:var(--font-ui); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); opacity:.85; margin:0 0 .6em}
.eyebrow.light{color:var(--champagne)}
.eyebrow.dark{color:var(--brown-deep)}

/* ---------- buttons ---------- */
.vn-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--font-ui); font-weight:600; font-size:.85rem;
  color:var(--bg-0); background:linear-gradient(155deg, var(--champagne), var(--gold)); border:1px solid var(--gold);
  border-radius:999px; padding:.85em 1.6em; cursor:pointer; box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
  transition:transform .25s ease, box-shadow .25s ease;
}
.vn-btn svg{width:16px; height:16px}
.vn-btn:hover{transform:translateY(-2px)}
.vn-btn.ghost{background:transparent; color:var(--gold); border:1px solid var(--brown); box-shadow:none}
.vn-btn.ghost.light{color:var(--cream); border-color:rgba(239,228,212,.3)}
.vn-btn.ghost.light:hover{background:rgba(239,228,212,.08)}

/* ---------- photo placeholders ---------- */
.photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg, var(--surface-2), var(--brown) 70%, var(--bg-2)); border:1px dashed rgba(239,228,212,.3); color:rgba(239,228,212,.7);
  text-align:center; font-family:var(--font-ui); font-size:.72rem; padding:10px;
}
.photo-placeholder .cam-icon{width:28px; height:28px; stroke:rgba(239,228,212,.7); fill:none; stroke-width:1.6}
.photo-placeholder.filled{background:none; border:none; padding:0}
.photo-placeholder.filled img{width:100%; height:100%; object-fit:cover; display:block}
.photo-fill{position:absolute; inset:0; border:none; z-index:0}
.cinematic-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, var(--bg-0) 5%, rgba(21,19,17,.6) 45%, rgba(21,19,17,.15) 78%)}
.cinematic-overlay.strong{background:linear-gradient(0deg, var(--bg-0) 25%, rgba(21,19,17,.72) 55%, rgba(21,19,17,.35) 100%)}
.grain{position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none; mix-blend-mode:overlay; 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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.brand-mark{position:absolute; top:20px; left:24px; z-index:3; margin:0; font-family:var(--font-serif); font-style:italic; font-size:1.4rem; color:var(--cream); display:flex; flex-direction:column; line-height:1.15}
.brand-mark.center{position:static; align-items:center; margin:0 auto 14px}
.brand-sub{font-family:var(--font-ui); font-style:normal; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); opacity:.8}

/* =========================================================
   OVERLAY (cinematic opening)
   ========================================================= */
.overlay-screen{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; transition:opacity .7s ease; overflow:hidden}
.overlay-screen.fade-out{opacity:0; pointer-events:none}
.overlay-inner{position:relative; z-index:2; width:100%; max-width:360px; text-align:left; padding:0 30px 70px}

/* =========================================================
   JOURNEY (scroll-snap book)
   ========================================================= */
.book{width:100%; max-width:460px; height:min(100dvh - 40px,900px); overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; border-radius:18px; box-shadow:0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(239,228,212,.06); position:relative; scrollbar-width:thin; z-index:2}
.book::-webkit-scrollbar{width:6px}
.book::-webkit-scrollbar-thumb{background:rgba(183,148,104,.3); border-radius:3px}
.chapter{min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative; display:flex; flex-direction:column; justify-content:center; padding:64px 30px; overflow:hidden; background:radial-gradient(120% 70% at 50% -10%, var(--surface), var(--bg-0) 65%)}
.chapter-inner{position:relative; z-index:2; text-align:left}
.chapter-paper{background:linear-gradient(175deg, var(--paper), #ddc7a6)}
.chapter-dark-paper{background:radial-gradient(120% 70% at 50% -10%, var(--surface-2), var(--bg-1) 70%)}
.chapter-black{background:linear-gradient(175deg, var(--bg-1), var(--bg-0))}
.chapter-photo{padding:0; justify-content:flex-end}
.final-inner{padding:0 30px 66px}
.ending-inner{text-align:center; padding:0 30px}

.back-btn{position:absolute; top:20px; left:20px; z-index:5; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--brown); background:rgba(37,33,30,.7); color:var(--gold); cursor:pointer; transition:transform .2s ease}
.back-btn svg{width:16px; height:16px; transform:rotate(180deg)}
.back-btn.light{border-color:rgba(239,228,212,.25); color:var(--cream)}
.back-btn:hover{transform:translateY(-1px)}
.scroll-chevron{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2; width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.6; opacity:.7; animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---------- 2. note before start ---------- */
.paper-note{position:relative; background:linear-gradient(175deg, var(--paper), #ddc7a6); color:var(--ink); padding:34px 26px 26px; border-radius:2px; box-shadow:0 24px 50px -20px rgba(0,0,0,.6); transform:rotate(-.6deg)}
.paper-tape{position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg); width:64px; height:22px; background:rgba(255,255,255,.55); box-shadow:0 1px 2px rgba(0,0,0,.15)}
.paper-flower{position:absolute; top:14px; right:16px; width:32px; height:32px; opacity:.85}
.paper-flower.drift{position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:40px}
.paper-flower.muted{position:relative; display:block; margin:0 auto 14px; width:34px; opacity:.6}
.note-eyebrow{font-family:var(--font-ui); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brown-deep); margin:0 0 .8em}
.note-body{font-family:var(--font-serif); font-style:italic; font-size:1.08rem; line-height:1.6; color:var(--ink); margin:0}
.note-sign{font-family:var(--font-script); font-size:1.5rem; color:var(--brown-deep); margin:.8em 0 0}

/* ---------- 3. choose your journey ---------- */
.journey-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.journey-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-height:110px;
  background:var(--surface); border:1px solid rgba(183,148,104,.22); border-radius:10px; padding:16px;
  color:var(--text); cursor:pointer; text-align:left; transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.journey-card:hover{transform:translateY(-3px); border-color:var(--gold); background:var(--surface-2)}
.journey-card svg{width:26px; height:26px; stroke:var(--champagne); fill:none}
.journey-card span{font-family:var(--font-serif); font-style:italic; font-size:.98rem; line-height:1.25}

/* ---------- 4. our story (timeline) ---------- */
.timeline{list-style:none; margin:20px 0 0; padding:0 0 0 20px; border-left:1px solid rgba(74,55,44,.35)}
.timeline li{position:relative; padding:0 0 26px 20px}
.timeline li:last-child{padding-bottom:0}
.tl-dot{position:absolute; left:-25px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--paper); border:1.5px solid var(--brown-deep)}
.tl-dot.filled{background:var(--gold); border-color:var(--gold)}
.tl-body strong{display:block; font-family:var(--font-serif); font-style:italic; font-size:1.15rem; color:var(--ink); margin-bottom:.15em}
.tl-body small{display:block; font-family:var(--font-ui); font-size:.78rem; color:var(--ink-soft)}
.timeline-quote{font-family:var(--font-script); font-size:1.3rem; color:var(--brown-deep); margin:20px 0 0}

/* ---------- 5. memory gallery (contact sheet) ---------- */
.contact-sheet{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:16px; padding:10px; background:var(--bg-1); border:1px solid rgba(183,148,104,.2)}
.frame{margin:0; aspect-ratio:1; border:1px solid rgba(239,228,212,.15)}
.frame .photo-placeholder{width:100%; height:100%}
.gallery-caption{font-family:var(--font-script); font-size:1.15rem; color:var(--champagne); margin-top:16px}

/* ---------- 6. a letter for you ---------- */
.letter-card{position:relative; background:linear-gradient(175deg, var(--paper), #ddc7a6); color:var(--ink); padding:32px 24px 26px; border-radius:2px; box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.letter-eyebrow{font-family:var(--font-ui); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brown-deep); margin:0 0 1em}
.letter-greeting{font-family:var(--font-script); font-size:1.7rem; color:var(--brown-deep); margin:0 0 .4em}
.letter-body{font-family:var(--font-serif); font-size:1.05rem; line-height:1.7; color:var(--ink); white-space:pre-line; margin:0 0 1.1em}
.letter-sign{font-family:var(--font-script); font-size:1.4rem; color:var(--brown-deep); margin:0; text-align:right}
.letter-sign.light{color:var(--champagne); text-align:left}

/* ---------- 7. our song ---------- */
.audio-player{display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%}
.vinyl-wrap{position:relative; width:min(200px,54vw); aspect-ratio:1; margin:14px auto 20px}
.vinyl-disc{
  width:100%; height:100%; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:repeating-radial-gradient(circle at center, rgba(255,255,255,.04) 0 2px, transparent 2px 6px), radial-gradient(circle at center, var(--brown-deep) 0 14%, #0c0a09 15% 22%, #050403 23% 100%);
  position:relative; animation:spin 7s linear infinite; animation-play-state:paused; box-shadow:0 20px 42px -16px rgba(0,0,0,.8);
}
.vinyl-disc.playing{animation-play-state:running}
.vinyl-label{position:absolute; inset:36%; border-radius:50%; background:var(--gold); overflow:hidden; box-shadow:0 0 0 2px var(--bg-0), inset 0 0 0 1px rgba(0,0,0,.3)}
.vinyl-photo{width:100%; height:100%; border-radius:50%}
.vinyl-arm{position:absolute; top:-6px; right:2%; width:8px; height:52%; transform-origin:top center; background:linear-gradient(var(--cream),var(--gold)); border-radius:6px; transform:rotate(-28deg); transition:transform .6s cubic-bezier(.32,.72,0,1); box-shadow:0 4px 10px rgba(0,0,0,.5)}
.vinyl-disc.playing ~ .vinyl-arm{transform:rotate(-6deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.song-title{font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.25rem; color:var(--cream); margin:0}
.song-artist{font-family:var(--font-ui); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft); margin:.2em 0 18px}
.song-progress{width:100%; height:3px; border-radius:2px; background:rgba(239,228,212,.14); cursor:pointer}
.song-progress-fill{height:100%; width:0%; border-radius:2px; background:var(--gold)}
.song-times{display:flex; align-items:center; gap:20px; margin-top:12px}
.song-times span{font-family:var(--font-ui); font-size:.7rem; color:var(--text-soft); min-width:2.4em}
.song-play{width:42px; height:42px; border-radius:50%; flex:none; cursor:pointer; border:1px solid var(--gold); background:rgba(183,148,104,.1); display:grid; place-items:center; transition:background .2s ease}
.song-play:hover{background:rgba(183,148,104,.2)}
.song-play svg{width:16px; height:16px; fill:var(--cream)}
.song-play .icon-pause{display:none}
.song-play.playing .icon-play{display:none}
.song-play.playing .icon-pause{display:block}
.song-hint{font-family:var(--font-ui); font-size:.7rem; color:var(--champagne); opacity:.85; min-height:1.2em; margin:10px 0 0}
.youtube-wrap{width:100%; margin-top:16px; overflow:hidden; border-radius:10px; background:#000; aspect-ratio:16/9; box-shadow:0 12px 26px rgba(0,0,0,.5)}
.youtube-wrap iframe{display:block; width:100%; height:100%; border:0}

/* ---------- 8. things i love about you ---------- */
.sticky-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.sticky-note{
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:88px;
  background:var(--paper); color:var(--ink); font-family:var(--font-serif); font-style:italic; font-size:.95rem;
  padding:14px 10px; box-shadow:0 12px 22px -12px rgba(0,0,0,.5); transition:transform .2s ease;
}
.sticky-note:hover{transform:translateY(-3px) scale(1.02)}
.rot-1{transform:rotate(-2.5deg)}
.rot-2{transform:rotate(2deg)}
.rot-3{transform:rotate(-1deg)}
.reasons-footer{font-family:var(--font-script); font-size:1.4rem; color:var(--champagne); margin:22px 0 0; text-align:center}

/* ---------- 9. a little surprise ---------- */
.gift-box{position:relative; width:min(220px,58vw); aspect-ratio:120/100; margin:16px auto; background:none; border:none; padding:0; cursor:pointer}
.gift-box svg{position:relative; z-index:2; width:100%; display:block; filter:drop-shadow(0 16px 28px rgba(0,0,0,.55))}
.box-glow{position:absolute; inset:-20%; z-index:1; border-radius:50%; background:radial-gradient(circle, rgba(214,181,138,.35), transparent 65%); opacity:0; transition:opacity .5s ease}
.gift-box.opened .box-glow{opacity:1}
.ribbon{transition:transform .5s cubic-bezier(.22,.8,.25,1), opacity .5s ease; transform-origin:60px 22px}
.gift-box.opened #ribbonLeft{transform:translate(-14px,-10px) rotate(-18deg); opacity:0}
.gift-box.opened #ribbonRight{transform:translate(14px,-10px) rotate(18deg); opacity:0}
.gift-reveal{font-family:var(--font-serif); font-style:italic; font-size:1.15rem; color:var(--cream); text-align:center; max-width:28ch; margin:18px auto 0}

/* ---------- 10. make a wish ---------- */
.cake-wrap{width:170px; margin:16px auto}
.cake-illustration{width:100%; height:auto; filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
.flame{animation:flicker 1.6s ease-in-out infinite; transform-origin:center bottom}
.flame:nth-child(2){animation-delay:.3s}
.flame:nth-child(3){animation-delay:.6s}
@keyframes flicker{0%,100%{opacity:1; transform:scaleY(1)}50%{opacity:.75; transform:scaleY(.92)}}
.wish-made{font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:var(--champagne); max-width:30ch; margin:16px auto 0; text-align:center}

/* ---------- 11. more adventures together ---------- */
.journal-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.journal-stamp{display:inline-flex; align-items:center; padding:9px 18px; border:1px solid var(--brown-deep); border-radius:999px; font-family:var(--font-ui); font-weight:600; font-size:.82rem; color:var(--brown-deep); background:rgba(255,255,255,.3)}
.journal-note{font-family:var(--font-script); font-size:1.3rem; color:var(--brown-deep); margin:20px 0 0}

/* ---------- 13. ending ---------- */
.ending-actions{display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:8px}
.ending-footer{font-family:var(--font-ui); font-size:.72rem; letter-spacing:.06em; color:var(--text-soft); margin-top:26px}

/* ---------- responsive ---------- */
@media (max-width:480px){
  body{padding:0}
  .book{height:100dvh; min-height:600px; border-radius:0; box-shadow:none}
}
@media (max-width:380px){
  .chapter{padding:56px 22px}
  .journey-grid{gap:8px}
  .sticky-grid{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .flame,.vinyl-disc,.scroll-chevron{animation:none !important}
  *{transition-duration:.01ms !important}
}