:root{
    --wine:#651f35;
    --wine2:#3b101e;
    --cream:#f5eee7;
    --sand:#cdb9a6;
    --ink:#251a1d;
    --muted:#8d747b;
    --gold:#7a36f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}
.stories{height:auto}
.story{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  overflow:hidden;
}
.progress{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,.18);z-index:99999}
.progress span{display:block;height:100%;width:0;background:var(--sand);transition:width .1s linear}
.sound{
  position:fixed;right:18px;top:18px;z-index:60;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.25);color:white;
  backdrop-filter:blur(12px);font-size:20px
}
.hero img,.photo-card img,.editorial img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:slowZoom 12s ease-in-out infinite alternate}
@keyframes slowZoom{to{transform:scale(1.14)}}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(20,0,8,.82))}
.hero-text{position:relative;text-align:center;padding-top:34px}
.kicker{text-transform:uppercase;letter-spacing:6px;font-size:11px;color:rgba(255,255,255,.72);font-weight:500}
.kicker.dark{color:var(--muted)}
h1,h2{font-family:"Cormorant Garamond",serif;font-weight:500;margin:0}
h1{font-size:clamp(62px,18vw,132px);line-height:.78;letter-spacing:1px}
h1 span{font-family:"Great Vibes",cursive;font-size:.62em;color:var(--gold)}
.date{letter-spacing:8px;margin-top:28px;font-size:13px}
.scroll-hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.68)}
.cream{background:var(--cream);color:var(--ink)}
.number{position:absolute;top:0px;left:30px;font-family:"Cormorant Garamond",serif;font-size:86px;color:rgba(101,31,53,.12)}
.content{max-width:720px;text-align:left}
.content h2{font-size:clamp(42px,10vw,80px);line-height:.95;margin:18px 0}
.content p{font-size:17px;line-height:1.8;color:#6c565c}
.wine{background:var(--wine)}
.photo-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(31,5,14,.9))}
.caption{position:absolute;left:24px;right:24px;bottom:58px;text-align:left}
.caption p{text-transform:uppercase;letter-spacing:5px;font-size:12px;color:#eed9c8}
.caption h2{font-size:76px;line-height:.8}
.caption span{font-family:"Cormorant Garamond",serif;font-size:48px;color:var(--gold)}
.countdown-page{background:radial-gradient(circle at top,#fff,var(--cream));color:var(--ink)}
.countdown{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:14px;margin-top:28px;max-width:520px}
.countdown div{border:1px solid rgba(101,31,53,.24);border-radius:28px;padding:24px 18px;background:rgba(255,255,255,.48)}
.countdown b{display:block;font-family:"Cormorant Garamond",serif;font-size:58px;color:var(--wine);font-weight:500}
.countdown span{text-transform:uppercase;letter-spacing:4px;color:var(--muted);font-size:11px}
.program{background:linear-gradient(160deg,var(--wine2),#12070b);color:#fff}
.program h2{font-size:56px;margin:12px 0 30px}
.timeline{width:min(560px,88vw)}
.timeline div{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.timeline time{font-family:"Cormorant Garamond",serif;font-size:34px;color:var(--gold)}
.timeline p{margin:8px 0 0;color:#ead8dd}
.editorial{background:#0f0d0d;align-items:flex-end;justify-content:flex-start}
.editorial:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),transparent 60%)}
.mag{position:relative;z-index:1;width:min(520px,88vw);padding-bottom:44px}
.mag span{font-family:"Cormorant Garamond",serif;font-size:96px;color:var(--gold)}
.mag h2{font-size:64px}
.mag p{line-height:1.7;color:#eee}
.gallery{background:var(--cream);color:var(--ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(760px,90vw)}
.grid img{width:100%;height:34vh;object-fit:cover;border-radius:28px}
.grid img:nth-child(3){grid-column:1/3;height:28vh}
.gallery-title{position:absolute;bottom:20px;font-size:72px;color:rgba(101,31,53,.13);font-family:"Great Vibes",cursive}
.rsvp{background:linear-gradient(180deg,#2a0a14,var(--wine));text-align:center}
.script{font-family:"Great Vibes",cursive;font-size:42px;color:var(--gold);margin:0 0 10px}
.rsvp h2{font-size:62px;line-height:.86;margin-bottom:28px}
.rsvp p{color:#f2dfe5;line-height:1.6}
.buttons{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.buttons a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:17px 30px;letter-spacing:2px;text-transform:uppercase;font-size:12px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.buttons a:first-child{background:#fff;color:var(--wine)}
.reveal{opacity:0;transform:translateY(35px);transition:1s ease}
.reveal.show{opacity:1;transform:none}
@media(min-width:850px){
  .story{padding:60px}
  .countdown{grid-template-columns:repeat(4,1fr);max-width:900px}
  .caption{left:80px;bottom:80px}
  .grid{grid-template-columns:1fr 1fr 1fr}.grid img,.grid img:nth-child(3){grid-column:auto;height:64vh}
}
.map-link{display:inline-block;margin-top:18px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:15px 24px;letter-spacing:2px;text-transform:uppercase;font-size:12px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.gifts h2{font-size:clamp(34px,8vw,62px)}
.no-kids:after{background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18) 65%)}
.rsvp-form{
    max-width:420px;
    margin:40px auto 0;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.rsvp-form input[type=text]{
    width:100%;
    padding:16px 20px;
    border:none;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:17px;
    text-align:center;
    outline:none;
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);
}

.rsvp-form input::placeholder{
    color:rgba(255,255,255,.65);
}

.choice{
    display:flex;
    flex-direction:column;
    gap:14px;
    text-align:left;
}

.choice label{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}

.choice input{
    accent-color:#d8bca4;
    width:18px;
    height:18px;
}

.rsvp-form button{
    margin-top:10px;
    border:none;
    border-radius:50px;
    padding:16px;
    background:#d8bca4;
    color:#4d1424;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.rsvp-form button:hover{
    transform:translateY(-2px);
    background:#e5ccb7;
}

#result{
    color:#fff;
    margin-top:5px;
    min-height:22px;
    font-size:16px;
}
