:root{--bg:#120509;--bg2:#2a0b16;--rose:#d98a9b;--gold:#d8b878;--ivory:#f6ecd9;--ink:#3a2326;--serif:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(ellipse at 50% 0,var(--bg2),var(--bg) 70%) fixed;color:var(--ivory);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
body.locked{overflow:hidden;height:100vh}
img,video{max-width:100%;display:block}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0 0 1rem;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,11vw,5.5rem);color:var(--gold)}
h2{font-size:clamp(1.8rem,6.5vw,3rem);text-align:center}
#glow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#hearts{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
#hearts span{position:absolute;bottom:-2rem;color:var(--rose);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.3}90%{opacity:.2}100%{transform:translateY(-110vh) translateX(20px);opacity:0}}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.scene{position:relative;z-index:2;padding:4.5rem max(1.25rem,env(safe-area-inset-right)) 4.5rem max(1.25rem,env(safe-area-inset-left));max-width:1100px;margin:0 auto;text-align:center}
.intro{position:fixed;inset:0;max-width:none;display:grid;place-items:center;z-index:20;background:radial-gradient(circle at 50% 40%,#3a0f1e,var(--bg) 75%);transition:opacity .7s,transform .7s}
.intro[hidden]{display:none}
.intro.leaving{opacity:0;transform:scale(1.04)}
.intro-line{font-family:var(--serif);font-size:clamp(1.7rem,7vw,3rem);margin:0 0 1.2rem}
.intro-line.sub{color:var(--gold);font-size:clamp(1.3rem,5.5vw,2.2rem)}
.intro .l{opacity:0;display:inline-block;white-space:pre;animation:letter .6s forwards}
@keyframes letter{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
#openBtn{opacity:0;animation:letter .8s forwards;margin-top:1.5rem}
.btn{font:inherit;font-size:1.05rem;padding:.9rem 1.7rem;min-height:48px;border-radius:999px;cursor:pointer;border:1px solid var(--gold);transition:transform .2s,box-shadow .2s,background .2s}
.btn.gold{background:linear-gradient(135deg,#e6c98c,#b98f4b);color:#2a0b16;font-weight:600;box-shadow:0 0 24px rgba(216,184,120,.3)}
.btn.ghost{background:transparent;color:var(--gold);margin-top:1.5rem}
.btn:hover{transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.hero{min-height:100vh;display:grid;place-items:center}
.cake{width:96px;margin:0 auto 1rem}
.flame{transform-origin:60px 28px;animation:flick 1.4s ease-in-out infinite alternate}
@keyframes flick{to{transform:scale(.9,1.08) rotate(3deg)}}
.hero-sub{font-family:var(--serif);font-size:clamp(1.4rem,5.5vw,2.2rem);margin:.5rem 0}
.made-for{color:#d9c9ad;margin:0 0 1.8rem}
.photo-frame{width:min(220px,60vw);aspect-ratio:3/4;margin:1.2rem auto;border-radius:120px 120px 16px 16px;border:1px solid var(--gold);overflow:hidden;box-shadow:0 0 40px rgba(217,138,155,.25);display:grid;place-items:center;background:rgba(255,255,255,.04)}
.photo-frame.small{width:min(170px,50vw)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.ph{padding:1rem;font-size:.85rem;color:#d9c9ad;text-align:center;border:1px dashed var(--gold);border-radius:12px;margin:.5rem}
.paper{position:relative;max-width:640px;margin:0 auto;padding:2.2rem 1.4rem;background:linear-gradient(160deg,#fbf3e2,#efdfc0);color:var(--ink);border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.55);text-align:left}
.paper h2{color:#7a1f33;text-align:center}
.paper p{font-family:var(--serif);font-size:clamp(1.15rem,4.4vw,1.4rem);line-height:1.7;margin:0 0 1.3rem;white-space:pre-wrap;overflow-wrap:anywhere}
.paper strong{color:#8c2640;font-weight:700;background:linear-gradient(transparent 62%,rgba(216,184,120,.45) 0)}
.paper .btn{display:block;margin-left:auto;margin-right:auto}
.paper.small{text-align:center}
.paper .sign{font-style:italic;color:#7a1f33;margin-top:1.5rem}
.heart-beat{position:absolute;top:.8rem;right:1rem;color:#c43c5a;animation:beat 1.6s infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}}
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s,transform .9s}
.rv.in{opacity:1;transform:none}
.wide{max-width:1100px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1rem;margin-top:1.5rem}
.tile{all:unset;box-sizing:border-box;cursor:pointer;position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(216,184,120,.4);background:rgba(255,255,255,.04);aspect-ratio:4/5;display:grid}
.tile.landscape{aspect-ratio:4/3}
.tile:focus-visible{outline:3px solid var(--rose)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.05)}
.tile .ph{align-self:center}
.cap{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .7rem .6rem;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:.9rem;text-align:left}
.cap small{display:block;color:var(--gold)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.2rem;margin-top:1.5rem}
.vid video{width:100%;border-radius:10px;background:#000;border:1px solid rgba(216,184,120,.4)}
.vid p{font-size:.9rem;color:#d9c9ad;margin:.4rem 0 0}
.vid .ph{margin:.4rem 0}
.envelope{all:unset;cursor:pointer;display:block;position:relative;width:min(300px,80vw);height:200px;margin:2rem auto 0;perspective:800px}
.envelope:focus-visible{outline:3px solid var(--rose);outline-offset:6px}
.env-body{position:absolute;inset:0;background:linear-gradient(160deg,#e8d3a8,#cfb27a);border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.env-body::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.5%,rgba(122,31,51,.25) 50%) left/50% 100% no-repeat,linear-gradient(to top left,transparent 49.5%,rgba(122,31,51,.25) 50%) right/50% 100% no-repeat}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;background:#c4a46a;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s;z-index:3}
.seal{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9506d,#7a1f33);display:grid;place-items:center;font-size:1.4rem;color:#f6ecd9;z-index:4;box-shadow:0 3px 8px rgba(0,0,0,.5);transition:opacity .4s}
.envelope[aria-expanded=true] .env-flap{transform:rotateX(180deg);z-index:1}
.envelope[aria-expanded=true] .seal{opacity:0}
.hint{color:#d9c9ad;margin-top:1rem}
.env-letter{max-height:0;overflow:hidden;opacity:0;transition:max-height 1s,opacity 1s}
.env-letter.show{max-height:900px;opacity:1;margin-top:1.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.finale{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(217,138,155,.16),transparent 65%)}
.finale h2{color:var(--gold);font-size:clamp(2rem,8vw,3.8rem)}
.finale p{font-family:var(--serif);font-size:clamp(1.2rem,5vw,1.8rem);max-width:30ch;margin:.6rem auto}
.finale .love{color:var(--rose);margin-bottom:2rem}
.player{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:max(.8rem,env(safe-area-inset-bottom));display:flex;align-items:center;gap:.6rem;padding:.4rem .9rem .4rem .4rem;background:rgba(18,5,9,.88);border:1px solid var(--gold);border-radius:999px;backdrop-filter:blur(8px);max-width:calc(100vw - 1.5rem)}
.player[hidden]{display:none}
.player button{width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:#2a0b16;font-size:1rem;cursor:pointer}
.player span{font-size:.8rem;white-space:nowrap}
.player input{width:70px;accent-color:var(--gold)}
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(8,2,4,.95);display:flex;align-items:center;justify-content:center;padding:3.5rem 3.2rem}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;text-align:center;max-width:100%;transition:opacity .35s}
.lightbox figure.fade{opacity:0}
.lightbox img{max-height:76vh;margin:0 auto;border-radius:6px}
.lightbox figcaption{margin-top:.8rem}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);background:rgba(0,0,0,.5);color:var(--ivory);font-size:1.5rem;cursor:pointer}
.lb-btn.close{top:.8rem;right:.8rem}.lb-btn.prev{left:.5rem;top:50%}.lb-btn.next{right:.5rem;top:50%}
@media (min-width:768px){.scene{padding-top:6rem;padding-bottom:6rem}.paper{padding:3rem}.player input{width:100px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv,.intro .l,#openBtn{opacity:1!important;transform:none!important}#hearts,#glow{display:none}}
/* ===== SIX LOVE LETTERS ===== */
.love-letters {
  padding: 80px 20px;
  background: #100b12;
  color: #fff5e9;
  text-align: center;
}

.letters-heading {
  max-width: 650px;
  margin: 0 auto 42px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  opacity: .7;
}

.letters-heading h2 {
  font-family: Georgia, serif;
  font-size: clamp(28px, 5vw, 46px);
  margin: 16px 0;
}

.letters-heading p {
  line-height: 1.8;
}

.envelope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: auto;
}

.love-envelope {
  --paper: #f9e8d6;
  --ink: #52212a;
  --accent: #d6ac65;
  --seal: #782637;

  position: relative;
  min-width: 0;
  padding: 26px 18px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 35px #0004;
  overflow: hidden;
  transition: transform .35s ease,
              box-shadow .35s ease;
}

.love-envelope:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px #0006;
}

.love-envelope[data-theme="burgundy"] {
  --paper: #3a101f;
  --ink: #ffe7bd;
  --accent: #d7ae67;
  --seal: #a92e48;
}

.love-envelope[data-theme="pink"] {
  --paper: #f9e1e9;
  --ink: #762e4b;
  --accent: #bd7b91;
  --seal: #c65c81;
}

.love-envelope[data-theme="midnight"] {
  --paper: #101d38;
  --ink: #edf1ff;
  --accent: #a7b9e4;
  --seal: #526da7;
}

.love-envelope[data-theme="lavender"] {
  --paper: #e9def7;
  --ink: #50386b;
  --accent: #b49bd8;
  --seal: #8561b4;
}

.love-envelope[data-theme="emerald"] {
  --paper: #102e27;
  --ink: #f5e8c9;
  --accent: #d1b16c;
  --seal: #37745b;
}

.love-envelope[data-theme="ivory"] {
  --paper: #fff6e5;
  --ink: #64492c;
  --accent: #c6a267;
  --seal: #ad7856;
}

.envelope-number {
  font-size: 11px;
  letter-spacing: 3px;
  opacity: .75;
}

.envelope-icon {
  display: grid;
  place-items: center;
  width: 100px;
  height: 76px;
  margin: 22px auto;
  font-size: 48px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper), white 8%);
  cursor: pointer;
}

.envelope-title {
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  margin: 16px 0 10px;
}

.envelope-hint {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .8;
}

.envelope-letter {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s ease,
              opacity .4s ease,
              margin .4s ease;
  margin-top: 0;
}

.envelope-letter.show {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 20px;
}

.envelope-letter-inner {
  overflow: hidden;
  min-height: 0;
}

.envelope-note {
  white-space: pre-line;
  line-height: 1.9;
  font-size: 14px;
  text-align: left;
  border-top: 1px solid var(--accent);
  padding-top: 18px;
}

.envelope-signoff {
  font-family: Georgia, serif;
  font-style: italic;
  text-align: right;
  line-height: 1.8;
  margin-top: 20px;
}

.envelope-open {
  border: 1px solid var(--accent);
  background: transparent;
  color: inherit;
  padding: 11px 16px;
  border-radius: 30px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  margin-top: 14px;
}

.envelope-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.letter-footer {
  margin-top: 40px;
  font-family: Georgia, serif;
  font-style: italic;
}

@media (max-width: 560px) {
  .envelope-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    gap: 18px;
  }

  .love-letters {
    padding: 60px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .love-envelope,
  .envelope-letter {
    transition: none;
  }
}