:root{
  --cream:#FBF4EF;
  --cream-deep:#F3E6DE;
  --blush:#E7B9BE;
  --blush-deep:#C98D93;
  --rose:#A9636E;
  --gold:#C9A65E;
  --gold-deep:#9C7A3C;
  --gold-light:#E7D2A4;
  --ink:#4A3733;
  --ink-soft:#7A625C;
  --paper: radial-gradient(120% 140% at 50% -10%, #FFFCF9 0%, #FBF4EF 55%, #F5E7DD 100%);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
::selection{background:var(--blush);color:var(--ink);}

h1,h2,h3,.serif{font-family:'Cormorant Garamond', serif;}
.script{font-family:'Parisienne', cursive; font-weight:400;}
.eyebrow{
  font-family:'Jost',sans-serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--gold-deep);
  font-weight:500;
}
a{color:inherit;}

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

/* ================= ENVELOPE INTRO ================= */
#envelope-screen{
  position:fixed; inset:0; z-index:999;
  background: linear-gradient(180deg,#2b201c 0%, #1c1512 100%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .9s ease, visibility .9s ease;
}
#envelope-screen.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.env-wrap{
  position:relative;
  width:min(320px, 78vw);
  aspect-ratio: 1.42 / 1;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.env-hint{
  position:absolute; top:-46px; left:0; right:0; text-align:center;
  color:#E9D9C8; font-family:'Jost',sans-serif; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase;
  opacity:.85;
}
.env-body{
  position:absolute; inset:0;
  background: linear-gradient(160deg,#F6ECE1,#EAD9C6);
  border-radius:3px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.env-flap{
  position:absolute; top:0; left:0; right:0; height:62%;
  background: linear-gradient(160deg,#F1E2D0,#E2CBAE);
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  transform-origin: top center;
  transition: transform 1s cubic-bezier(.6,.05,.2,1);
  box-shadow: 0 6px 18px rgba(0,0,0,.12) inset;
  z-index:3;
}
.env-wrap.open .env-flap{ transform: rotateX(178deg); }
.env-shadow-fold{
  position:absolute; left:0; right:0; bottom:0; top:34%;
  background: linear-gradient(200deg, transparent 48%, rgba(0,0,0,.06) 50%, transparent 52%),
              linear-gradient(160deg, transparent 48%, rgba(0,0,0,.06) 50%, transparent 52%);
  z-index:2;
}
.env-seal{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #E3C36F, #B98A3C 70%, #8f6a2c 100%);
  box-shadow: 0 8px 16px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  transition: transform .6s ease, opacity .6s ease;
}
.env-wrap.open .env-seal{ transform:translate(-50%,-50%) scale(.4); opacity:0; }
.env-seal span{ font-family:'Cormorant Garamond',serif; font-size:20px; color:#3a2a12; letter-spacing:1px; }
.env-card{
  position:absolute; left:8%; right:8%; bottom:6%; top:14%;
  background: var(--paper);
  border:1px solid var(--gold-light);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:16px;
  transform: translateY(0%);
  transition: transform 1s cubic-bezier(.6,.05,.2,1) .15s;
  z-index:1;
}
.env-wrap.open .env-card{ transform: translateY(-46%); }
.env-card p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--ink-soft); margin:0; }

/* ================= LAYOUT ================= */
main{ opacity:0; transition:opacity .8s ease; }
main.show{ opacity:1; }

section{
  position:relative;
  padding:120px 24px;
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.divider{
  width:1px; height:64px; background:linear-gradient(var(--gold-deep), transparent);
  margin:0 auto 34px;
}
.divider.flip{ background:linear-gradient(transparent, var(--gold-deep)); margin:34px auto 0; }

/* ---------- HERO ---------- */
#hero{
  background: var(--paper);
  padding-top:70px;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.arch-illustration{ width:min(280px,70vw); height:auto; margin-bottom:8px; color:var(--gold-deep); }
.hero-names{
  font-size:clamp(48px,11vw,76px);
  line-height:1;
  margin:6px 0 10px;
  color:var(--rose);
}
.hero-sub{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:19px;
  color:var(--ink-soft);
  letter-spacing:.02em;
}
.palm{ position:absolute; bottom:26px; width:70px; opacity:.55; color:var(--gold-deep); }
.palm.left{ left:14px; transform:scaleX(-1); }
.palm.right{ right:14px; }
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue::after{
  content:''; width:1px; height:26px; background:var(--gold-deep);
  animation: cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{ 0%,100%{ transform:scaleY(.4); opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }

/* ---------- GALLERY ---------- */
#gallery{ background:var(--cream); }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px 18px;
  margin:40px 0 18px;
}
.photo-frame{
  position:relative;
  aspect-ratio:4/5;
  background:#fff;
  padding:8px 8px 22px;
  box-shadow:0 12px 24px rgba(74,55,51,.14);
  transition: transform .3s ease;
}
.photo-frame:nth-child(odd){ transform:rotate(-2.5deg); }
.photo-frame:nth-child(even){ transform:rotate(2deg); }
.photo-frame:hover{ transform:rotate(0) scale(1.04); z-index:2; }
.photo-frame .inner{
  width:100%; height:100%;
  background: linear-gradient(150deg, var(--cream-deep), var(--blush) 130%);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep);
}
.photo-frame .inner svg{ width:34px; height:34px; opacity:.65; }
.photo-frame figcaption{
  position:absolute; bottom:4px; left:0; right:0; text-align:center;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; color:var(--ink-soft);
}
.gallery-note{ font-size:12px; color:var(--ink-soft); max-width:420px; margin:8px auto 0; line-height:1.7; }
@media (max-width:480px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
}

/* ---------- SCRATCH REVEAL ---------- */
#reveal{ background:var(--paper); }
.scratch-row{
  display:flex; justify-content:center; gap:18px; margin:36px 0 8px; flex-wrap:wrap;
}
.scratch-tile{
  position:relative; width:96px; height:96px; border-radius:50%;
  box-shadow: 0 10px 24px rgba(169,99,110,.18);
}
.scratch-tile canvas{ position:absolute; inset:0; border-radius:50%; cursor:grab; touch-action:none; }
.scratch-under{
  position:absolute; inset:0; border-radius:50%;
  background:var(--cream);
  border:1px solid var(--gold-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.scratch-under .val{ font-family:'Cormorant Garamond',serif; font-size:30px; color:var(--rose); font-weight:600;}
.scratch-under .lbl{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); margin-top:2px;}
.scratch-caption{ margin-top:18px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.date-reveal{
  margin-top:38px; font-family:'Cormorant Garamond',serif; font-size:30px; color:var(--ink);
  opacity:0; transform:translateY(10px);
  transition: opacity .8s ease, transform .8s ease;
}
.date-reveal.show{ opacity:1; transform:translateY(0); }

/* ---------- COUNTDOWN ---------- */
#countdown{ background:var(--cream); }
.count-grid{ display:flex; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; }
.count-cell{
  width:82px; padding:16px 0; border:1px solid var(--gold-light);
  background:#fff;
}
.count-cell .n{ font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--rose); display:block; }
.count-cell .l{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.lights{ width:100%; max-width:420px; margin:40px auto 0; display:block; color:var(--gold); }

/* ---------- DETAILS ---------- */
#details{ background:var(--paper); }
.crest{ width:120px; margin:0 auto 22px; color:var(--gold-deep); }
.venue-name{ font-size:26px; margin:0 0 6px; }
.venue-addr{ color:var(--ink-soft); font-size:15px; margin:0 0 26px; line-height:1.7; }
.btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--gold-deep); background:transparent; color:var(--ink);
  cursor:pointer; text-decoration:none; display:inline-block; transition:background .3s, color .3s;
}
.btn.solid{ background:var(--rose); border-color:var(--rose); color:#fff; }
.btn:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
.btn.solid:hover{ background:var(--ink); border-color:var(--ink); }

/* ---------- TIMELINE ---------- */
#timeline{ background:var(--cream); }
.tl-list{ position:relative; margin-top:40px; padding-left:0; }
.tl-item{ position:relative; padding:26px 0; }
.tl-time{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.tl-title{ font-size:24px; margin:4px 0 4px; }
.tl-desc{ font-size:14px; color:var(--ink-soft); font-family:'Cormorant Garamond',serif; font-style:italic; }
.tl-dot{ width:7px; height:7px; border-radius:50%; background:var(--rose); margin:0 auto 10px; }

/* ---------- DRESS CODE ---------- */
#dress{ background:var(--paper); }
.dress-note{ color:var(--ink-soft); font-size:15px; line-height:1.8; max-width:440px; margin:0 auto; }
.palette-dots{ display:flex; justify-content:center; gap:12px; margin-top:26px; }
.palette-dots span{ width:22px; height:22px; border-radius:50%; display:inline-block; box-shadow:0 2px 6px rgba(0,0,0,.15); }

/* ---------- GIFTS ---------- */
#gifts{ background:var(--cream); }
.env-icon{ width:70px; margin:0 auto 20px; color:var(--gold-deep); }
.gift-note{ color:var(--ink-soft); font-size:15px; line-height:1.8; max-width:440px; margin:0 auto 22px; }
.gift-box{
  border:1px dashed var(--gold-deep); padding:18px 22px; display:inline-block;
  font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--ink);
}

/* ---------- RSVP ---------- */
#rsvp{ background:var(--paper); }
form{ margin-top:32px; text-align:left; display:grid; gap:18px; }
.attend-toggle{ display:flex; gap:12px; justify-content:center; margin-bottom:6px; }
.attend-toggle button{
  flex:1; max-width:220px; padding:14px 10px; border:1px solid var(--gold-deep);
  background:#fff; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; color:var(--ink); transition:.25s;
}
.attend-toggle button.active{ background:var(--rose); border-color:var(--rose); color:#fff; }
label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:6px; }
input, textarea{
  width:100%; border:none; border-bottom:1px solid var(--blush-deep); background:transparent;
  font-family:'Jost',sans-serif; font-size:15px; color:var(--ink); padding:8px 2px; outline:none;
}
input:focus, textarea:focus{ border-color:var(--rose); }
textarea{ resize:vertical; min-height:64px; }
.submit-btn{
  margin-top:8px; padding:16px; border:none; background:var(--rose); color:#fff;
  font-family:'Jost',sans-serif; letter-spacing:.2em; text-transform:uppercase; font-size:12px;
  cursor:pointer; transition:background .3s;
}
.submit-btn:hover{ background:var(--ink); }
.rsvp-success{ display:none; text-align:center; padding:30px 10px; font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--rose); }
.rsvp-success.show{ display:block; }
form.hide{ display:none; }

/* ---------- FOOTER ---------- */
footer{ text-align:center; padding:90px 24px 60px; background:var(--cream); }
.footer-names{ font-size:34px; color:var(--rose); margin-bottom:26px; }
.door{ width:120px; margin:0 auto; color:var(--gold-deep); }
.footer-note{ margin-top:22px; font-size:12px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase; }

@media (max-width:480px){
  section{ padding:90px 18px; }
  .count-cell{ width:70px; }
}