:root{
  --bg:#090c12;
  --bg2:#111725;
  --text:#f7f4ef;
  --muted:#d7d2ca;
  --gold:#d7b06a;
  --gold-soft:#f0d9ad;
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.08);
  --shadow:0 30px 90px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:'Inter',sans-serif; overflow-x:hidden;
  background: radial-gradient(circle at top right, rgba(215,176,106,.12), transparent 25%), linear-gradient(180deg,#090c12 0%, #0f1520 45%, #090d13 100%);
}
.film-grain,.vignette,.glow{position:fixed; inset:0; pointer-events:none}
.film-grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; opacity:.32; z-index:2}
.vignette{background:radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.4) 100%); z-index:1}
.glow-1{background:radial-gradient(circle at 15% 15%, rgba(215,176,106,.18), transparent 25%)}
.glow-2{background:radial-gradient(circle at 85% 25%, rgba(255,255,255,.08), transparent 20%)}

.hero{min-height:100vh; position:relative; display:grid; place-items:center; padding:24px}
.hero-media{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,11,18,.35), rgba(8,11,18,.8)), url('assets/img2.png') center 20%/cover no-repeat; filter:saturate(.92)}
.hero-content{position:relative; z-index:3; max-width:960px; text-align:center; padding:44px 28px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(9,12,18,.36), rgba(9,12,18,.6)); backdrop-filter: blur(10px); border-radius:30px; box-shadow:var(--shadow)}
.eyebrow,.section-title p{letter-spacing:.28em; text-transform:uppercase; font-size:.78rem; color:var(--gold-soft)}
.small-script{font-family:'Great Vibes',cursive; font-size:1.6rem; color:#f5e6c8; margin:.2rem 0 0}
.hero h1,.wish-card h2,.ending-card h2{font-family:'Cormorant Garamond',serif}
.hero h1{font-size:clamp(3.2rem,7vw,6rem); line-height:.95; margin:.15em 0}
.subtitle{max-width:760px; margin:0 auto; line-height:1.9; color:var(--muted); font-size:1.05rem}
.hero-meta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:24px}
.hero-meta span{padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:#f0e5d0}
.cta,#openBtn{display:inline-flex; align-items:center; justify-content:center; margin-top:28px; padding:14px 28px; border-radius:999px; text-decoration:none; border:none; cursor:pointer; font-weight:700; color:#0d1118; background:linear-gradient(135deg,var(--gold-soft),var(--gold)); box-shadow:0 18px 40px rgba(215,176,106,.28)}
.section{padding:90px 20px; position:relative; z-index:3}
.section-title{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:34px}
.section-title span{height:1px; width:90px; background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.letter-card,.wish-card,.ending-card,.intro-card{max-width:920px; margin:0 auto; padding:34px 28px; border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter: blur(10px)}
.opening{font-family:'Great Vibes',cursive; font-size:2rem; color:#fff0cb}
.letter-card p,.wish-card li,.ending-card p,.intro-card p,.intro-card small{line-height:1.95; color:var(--muted); font-size:1.03rem}
.signature,.closing-line,.from{color:#fff0cb !important}
.cinematic-strip{padding-top:10px}
.frame{max-width:1120px; margin:0 auto; overflow:hidden; border-radius:28px; border:1px solid var(--line); background:#0d121b; box-shadow:var(--shadow); position:relative}
.frame img{width:100%; height:100%; display:block; object-fit:cover}
.frame-large{height:min(78vh,760px)}
.frame-large .caption{position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.78)); color:#f5e6c8; font-size:1rem; letter-spacing:.08em; text-transform:uppercase}
.gallery-grid{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:18px}
.gallery-grid .portrait{min-height:620px}
.gallery-grid .frame:not(.portrait){min-height:300px}
.wish-card h2,.ending-card h2{font-size:2.5rem; text-align:center; margin:.2em 0 .5em}
.wish-card ul{margin:0; padding-left:20px}
.wish-card li{padding:10px 0}
.ending{padding-bottom:120px}
.intro-screen{position:fixed; inset:0; z-index:50; background:rgba(6,8,12,.76); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:20px; transition:.6s ease}
.intro-screen.hide{opacity:0; visibility:hidden}
.intro-card{text-align:center; max-width:620px}
.intro-card h1{font-family:'Cormorant Garamond',serif; font-size:3.4rem; margin:.2em 0}
.intro-kicker{letter-spacing:.2em; text-transform:uppercase; font-size:.75rem; color:var(--gold-soft)}
.reveal{opacity:0; transform:translateY(32px); transition:all .9s ease}
.reveal.show{opacity:1; transform:none}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid .portrait,.gallery-grid .frame:not(.portrait){min-height:380px}
  .hero-content{padding:32px 20px}
}