/* ============================================================
   style.css — Vivek & Sri Harshita wedding site
   Shared by index.html and form.html
   ============================================================ */
:root{
  --maroon:#2f6b5e;
  --maroon-dark:#1f4a40;
  --gold:#5b9bd5;
  --gold-light:#bfe0f5;
  --cream:#f6faf8;
  --blush:#e1f4ec;
  --ink:#2c3b37;
  --shadow: 0 10px 30px rgba(31,74,67,0.15);
  --accent2:#7fc9a3;
  --accent3:#2f6a86;
  --lime:#eef7b0;
  --lime-dark:#c3d64f;
  --sage:#96a687;
  --sage-dark:#6b7d5e;
  --sage-light:#c7d3ba;
  --wax:#e9ddc5;
  --mint:#e3f6e8;
  --mint-mid:#bfe8c9;
  --mint-dark:#6fae80;
  --sky:#e3f1fb;
  --sky-mid:#bfe0f5;
  --sky-dark:#6ba3cf;
  --pastel-ink:#3d4a45;
  --true-gold:#c9a227;
  --true-gold-light:#e6c869;
  --true-gold-dark:#a5811b;
}
body.no-scroll{ overflow:hidden; height:100vh; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  font-family:'Poppins', sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  width:100%;
}
h1,h2,h3, .script{ font-family:'Cormorant Garamond', serif; }
.script-name{ font-family:'Alex Brush', cursive; }
/* ---------- decorative pattern ---------- */
.bg-pattern{
  position:fixed; inset:0; z-index:-1; opacity:0.05; pointer-events:none;
  background-image: radial-gradient(circle, var(--maroon) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
/* ---------- shared particle helpers ---------- */
.particle-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
/* falling rose petals -- Hero */
/* .rose-petal{
  position:absolute; top:-24px;
  background:linear-gradient(135deg,#f7afc9,#e8618f);
  border-radius:0 60% 0 60%; opacity:.85;
  animation:leaf-fall linear infinite;
} */
/* falling leaves -- Mehendi */
.leaf{
  position:absolute; top:-24px;
  background:linear-gradient(135deg,#8fd19e,#4f9d68);
  border-radius:0 60% 0 60%; opacity:.85;
  animation:leaf-fall linear infinite;
}
@keyframes leaf-fall{
  0%{ transform:translate(0,0) rotate(0deg); }
  100%{ transform:translate(var(--drift,40px), 120vh) rotate(360deg); }
}
/* rising bubbles -- Engagement */
.bubble{
  position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), var(--sky-dark) 75%);
  opacity:0; animation:bubble-rise linear infinite;
}
@keyframes bubble-rise{
  0%{ transform:translate(0,0); opacity:0; }
  12%{ opacity:.7; }
  100%{ transform:translate(var(--driftx,20px), -125vh); opacity:0; }
}
/* floating flowers -- Pellikuthuru & Pellikoduku */
.flower-dot{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, var(--sky-mid) 70%);
  opacity:.8; animation:flower-float ease-in-out infinite;
}
@keyframes flower-float{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(var(--driftx,30px), var(--drifty,-20px)); }
}
/* falling turmeric dots -- Haldi */
.lime-dot{
  position:absolute; top:-20px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #f5fac8, var(--lime-dark) 75%);
  opacity:.85; animation:lime-fall linear infinite;
}
@keyframes lime-fall{
  0%{ transform:translate(0,0) rotate(0deg); }
  100%{ transform:translate(var(--drift,30px), 120vh) rotate(180deg); }
}
/* rising sparkles -- Wedding Ceremony */
.sparkle{
  position:absolute; bottom:-20px; width:8px; height:8px; background:#fff;
  clip-path:polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  opacity:0; animation:sparkle-rise linear infinite;
}
@keyframes sparkle-rise{
  0%{ transform:translateY(0) scale(.4) rotate(0deg); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translateY(-115vh) scale(1) rotate(180deg); opacity:0; }
}
/* twinkling stars -- Reception */
.star{
  position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
  opacity:.3; animation:twinkle ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.15; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.8); }
}
/* ---------- confetti burst (scratch card reveal) ---------- */
.confetti-layer{ position:fixed; inset:0; z-index:3000; pointer-events:none; overflow:hidden; }
.confetti-piece{
  position:absolute; width:8px; height:14px; border-radius:2px; opacity:1;
  animation-name:confetti-burst; animation-timing-function:cubic-bezier(.25,.8,.4,1); animation-fill-mode:forwards;
}
.confetti-piece.emoji{ width:auto; height:auto; font-size:1.4rem; background:none !important; }
@keyframes confetti-burst{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); opacity:1; }
  100%{ transform:translate(var(--tx,0px), var(--ty,300px)) rotate(var(--rot,360deg)) scale(.8); opacity:0; }
}
.confetti-piece.rain{ top:-24px !important; animation-name:confetti-rain; animation-timing-function:linear; }
@keyframes confetti-rain{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(115vh) rotate(var(--rot,360deg)); opacity:0; }
}
/* ---------- envelope intro (full-screen backdrop + proportioned envelope + flap-open animation) ---------- */
.envelope-overlay{
  position:fixed; inset:0; z-index:2000; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:4vh 4vw;
  background:radial-gradient(circle at 50% 30%, var(--mint) 0%, var(--sky) 55%, var(--sky-mid) 100%);
  transition:opacity .6s ease .7s, visibility .6s ease .7s;
}
.envelope-overlay.opening{ opacity:0; visibility:hidden; pointer-events:none; }
.envelope-scene{
  position:relative; width:min(92vw, 680px); aspect-ratio:3/2; max-height:88vh;
  perspective:1600px;
}
/* double border frame tracing the envelope, in site colors */
.envelope-border{
  position:absolute; inset:0; border:1.5px solid var(--accent2); border-radius:2px; pointer-events:none;
}
.envelope-border.inner{ inset:10px; border:1px solid var(--sky-mid); }
/* the flap: triangle from the top two corners down to the seal point */
.envelope-flap{
  position:absolute; inset:0;
  clip-path:polygon(1.5% 1.5%, 98.5% 1.5%, 50% 54%);
  background:linear-gradient(200deg, #ffffff 0%, var(--mint) 100%);
  box-shadow:inset 0 -14px 22px -18px rgba(31,74,67,0.2);
  transform-origin:50% 1.5%;
  transition:transform .95s cubic-bezier(.6,0,.32,1) .12s, opacity .5s ease .55s;
}
.envelope-overlay.opening .envelope-flap{ transform:rotateX(-150deg); opacity:0; }
.envelope-flap-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.envelope-seal{
  position:absolute; top:54%; left:50%; transform:translate(-50%,-50%);
  width:19%; aspect-ratio:1; max-width:92px; min-width:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #eaf7ee, var(--accent2) 55%, var(--mint-dark) 100%);
  box-shadow:0 6px 16px rgba(31,74,67,0.3), inset 0 0 0 4px rgba(255,255,255,0.4);
  transition:transform .35s ease, opacity .35s ease; z-index:2;
}
.envelope-overlay.opening .envelope-seal{ transform:translate(-50%,-50%) scale(.3) rotate(25deg); opacity:0; }
.envelope-seal::after{
  content:'HaVi'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-weight:700; letter-spacing:1px; color:#ffffff; font-size:.95rem;
}
.envelope-title{
  position:absolute; top:68%; left:0; right:0; text-align:center;
  font-family:'Alex Brush', cursive; font-size:clamp(1.8rem, 5vw, 2.8rem); color:var(--maroon-dark);
  transition:opacity .35s ease .1s;
}
.envelope-sub{
  text-align:center; font-family:'Cormorant Garamond', serif; font-size:.95rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--maroon-dark); opacity:.65; transition:opacity .35s ease .1s;
}
.envelope-overlay.opening .envelope-title, .envelope-overlay.opening .envelope-sub{ opacity:0; }
/* ---------- music toggle ---------- */
.music-toggle{
  position:fixed; bottom:22px; right:22px; z-index:1500;
  background:linear-gradient(135deg, var(--mint-dark), var(--sky-dark));
  color:#fff; border:none; padding:12px 22px; border-radius:30px;
  font-size:.75rem; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
  box-shadow:0 8px 20px rgba(31,74,67,0.3); transition:transform .2s ease;
}
.music-toggle:hover{ transform:scale(1.05); }
/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6%;
  background:rgba(246,250,248,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gold-light);
  transition:padding .3s ease;
}
nav .monogram{ font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.4rem; color:var(--maroon); letter-spacing:2px;}
nav ul{ list-style:none; display:flex; gap:26px;}
nav a{ text-decoration:none; color:var(--maroon-dark); font-size:.82rem; letter-spacing:1px; text-transform:uppercase; font-weight:500; position:relative;}
nav a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--gold);transition:width .3s;}
nav a:hover::after{width:100%;}
.nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.nav-toggle span{width:24px;height:2px;background:var(--maroon);}
/* ---------- hero ---------- */
.hero{
  min-height:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative;
  padding:150px 20px 50px;
  background-image: url('images/ganesha.png'),
    radial-gradient(ellipse at top, rgba(91,155,213,0.15), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--blush) 100%);
  overflow:hidden;
  background-repeat: no-repeat;
  background-position: center 96px, 10px, 10px;
    background-size: 500px, auto, cover, cover;
}
.corner-ornament{ position:absolute; width:120px; height:120px; opacity:.55; }
.corner-ornament.tl{ top:20px; left:20px; }
.corner-ornament.tr{ top:20px; right:20px; transform:scaleX(-1); }
.corner-ornament.bl{ bottom:20px; left:20px; transform:scaleY(-1); }
.corner-ornament.br{ bottom:20px; right:20px; transform:scale(-1); }
.hero .eyebrow{
  letter-spacing:4px; text-transform:uppercase; font-size:.75rem; color:var(--maroon);
  font-weight:500; margin-bottom:18px;
}
.hero .eyebrow::before, .hero .eyebrow::after{content:'✦'; margin:0 10px; color:var(--gold);}
.hero h1{
  font-size:clamp(3rem, 9vw, 6.5rem);
  color:var(--maroon);
  line-height:1;
}
.hero h1 .amp{ display:block; font-family:'Alex Brush', cursive; font-size:0.55em; color:var(--gold); margin:6px 0; }
.hero .subtitle{
  margin-top:22px; font-size:1.1rem; color:var(--ink); opacity:.85;
  letter-spacing:1px;
}
.hero .date-line{
  margin-top:10px; font-size:1.3rem; font-weight:500; color:var(--maroon-dark);
  letter-spacing:2px;
}
.divider{
  width:70px; height:2px; background:var(--gold); margin:26px auto; position:relative;
}
.divider::before{content:'❖'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--cream); padding:0 10px; color:var(--gold); font-size:1rem;}
/* countdown */
.countdown{ display:flex; gap:18px; margin-top:36px; flex-wrap:wrap; justify-content:center;}
.countdown .box{
  background:rgba(255,255,255,0.6); border:1px solid var(--gold-light);
  border-radius:10px; padding:16px 22px; min-width:90px; box-shadow:var(--shadow);
}
.countdown .num{ font-size:2rem; font-weight:600; color:var(--maroon); font-family:'Cormorant Garamond', serif;}
.countdown .label{ font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--ink); opacity:.7;}
.scroll-cue{
  margin-top:50px; font-size:.75rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--maroon); opacity:.7; animation:bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
/* ---------- section shared ---------- */
section{ padding:100px 6%; position:relative; }
.section-head{ text-align:center; margin-bottom:60px; position:relative; z-index:2; }
.section-head .eyebrow{ letter-spacing:4px; text-transform:uppercase; font-size:.75rem; color:var(--gold); font-weight:600;}
.section-head h2{ font-size:clamp(2.2rem,5vw,3.2rem); color:var(--maroon); margin-top:8px; }
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
/* ---------- scratch card ---------- */
.scratch-section{ background:var(--blush); text-align:center; padding-top:60px; }
.scratch-section .section-head{ margin-bottom:34px; }
.scratch-hint{
  font-size:.9rem; color:var(--maroon-dark); margin-bottom:30px; letter-spacing:.5px;
  animation:hint-glow 2.4s ease-in-out infinite;
}
@keyframes hint-glow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.scratch-wrap{
  position:relative; width:190px; max-width:60vw; aspect-ratio:16/9; margin:0 auto;
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--accent2);
}
.scratch-reveal{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%); color:var(--gold-light);
  padding:24px; text-align:center;
}
.scratch-reveal .r-date{ font-family:'Cormorant Garamond', serif; font-size:1.5rem; font-weight:600; letter-spacing:1.5px; color:var(--cream); }
.scratch-canvas{
  position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none;
  transition:opacity .6s ease;
}
.scratch-canvas.cleared{ opacity:0; pointer-events:none; }
.scratch-again{
  margin-top:22px; background:none; border:1px solid var(--maroon); color:var(--maroon-dark);
  padding:10px 22px; border-radius:20px; font-size:.75rem; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; transition:background .3s ease, color .3s ease;
}
.scratch-again:hover{ background:var(--maroon); color:var(--cream); }
/* ---------- locked date + countdown (revealed after scratching) ---------- */
.locked{
  opacity:0; max-height:0; overflow:hidden; transform:translateY(16px);
  margin-top:0 !important; margin-bottom:0 !important; pointer-events:none;
}
.unlocked{
  opacity:1; max-height:600px; transform:translateY(0); pointer-events:auto;
  transition:opacity .9s ease, transform .9s ease, max-height .9s ease;
}
.date-locked-hint{
  margin-top:18px; font-size:.9rem; letter-spacing:1px; color:var(--maroon-dark);
  opacity:.7; animation:hint-glow 2.4s ease-in-out infinite;
  transition:opacity .5s ease, max-height .5s ease;
}
.date-locked-hint.hidden{ opacity:0; max-height:0; overflow:hidden; margin-top:0; }
/* date + countdown block that appears under the scratch card */
.scratch-unlock{ margin-top:0; }
.scratch-unlock.unlocked{ margin-top:34px; }
.scratch-unlock .unlock-title{
  font-family:'Alex Brush', cursive; font-size:2.2rem; color:var(--maroon); margin-bottom:6px;
}
.scratch-unlock .date-line{
  font-size:1.3rem; font-weight:500; color:var(--maroon-dark); letter-spacing:2px;
}
.scratch-unlock .countdown{ margin-top:22px; }
/* ---------- gallery ---------- */
.gallery-section{ background:linear-gradient(180deg, var(--blush) 0%, var(--cream) 100%); text-align:center; }
/* ---------- story ---------- */
.story{ background:var(--cream); }
.story-content{ max-width:720px; margin:0 auto; text-align:center; }
.story-content p{ font-size:1.15rem; line-height:1.9; color:var(--ink); opacity:.85; }
/* ---------- individual event sections ---------- */
.event-page{
  min-height:46vh; padding:64px 6%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden;
}
.event-bg-icon{
  position:absolute; z-index:0; opacity:.16; pointer-events:none;
  top:50%; left:50%; transform:translate(-50%,-50%); width:60%; max-width:340px; height:auto;
}
.event-page.light{ background:var(--sky); }
.event-page.mint{ background:var(--blush); }
.event-page.pastel{ background:var(--mint); }
.event-page.lime{ background:linear-gradient(160deg, var(--lime) 0%, #dcefa0 100%); }
.event-page.dark{ background:var(--maroon); color:var(--cream); }
.event-page.night{ background:var(--maroon-dark); color:var(--cream); }
.event-page .eyebrow{ letter-spacing:4px; text-transform:uppercase; font-size:.8rem; font-weight:600; position:relative; z-index:2; }
.event-page.light .eyebrow, .event-page.mint .eyebrow, .event-page.pastel .eyebrow, .event-page.lime .eyebrow{ color:var(--accent3); }
.event-page.dark .eyebrow, .event-page.night .eyebrow{ color:var(--gold-light); }
.event-page h2{ font-family:'Alex Brush', cursive; font-size:3.4rem; font-weight:400; margin-top:6px; position:relative; z-index:2; }
.event-page.light h2, .event-page.mint h2, .event-page.pastel h2, .event-page.lime h2{ color:var(--maroon); }
.event-page.dark h2, .event-page.night h2{ color:var(--gold-light); }
.event-detail{ position:relative; z-index:2; margin-top:22px; font-size:1rem; letter-spacing:.5px; }
.event-detail div{ margin-top:8px; }
.event-detail .ed-time{ font-size:1.15rem; font-weight:500; }
/* ---------- gallery coverflow carousel ---------- */
.gallery-stage{
  position:relative; height:350px; max-width:690px; width:100%; margin:0 auto; user-select:none;
  overflow:hidden;
}
.gallery-card{
  position:absolute; top:50%; left:50%; width:240px; height:290px;
  border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--sky-mid);
  box-shadow:0 18px 40px rgba(31,74,67,0.3);
  transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease, filter .6s ease;
  will-change:transform, opacity, filter;
}
.gallery-card img{ display:block; width:100%; height:100%; object-fit:cover; }
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.85);
  border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.3rem;
  color:var(--maroon-dark); line-height:1; display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .25s ease; z-index:20;
}
.gallery-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.12); }
.gallery-nav.prev{ left:0; }
.gallery-nav.next{ right:0; }
.carousel-dots{ display:flex; justify-content:center; gap:7px; margin-top:22px; }
.carousel-dot{
  width:7px; height:7px; border-radius:50%; background:var(--sky-mid); border:none; cursor:pointer; padding:0;
  transition:width .3s ease, background .3s ease;
}
.carousel-dot.active{ background:var(--maroon); width:22px; border-radius:4px; }
/* ---------- event details & links accordion ---------- */
.details-section{ background:var(--cream); }
.details-note{
  text-align:center; max-width:520px; margin:0 auto 30px; font-size:.85rem; color:var(--pastel-ink); opacity:.75;
}
.accordion{ max-width:640px; margin:0 auto; }
.accordion-item{ border-bottom:1px solid var(--mint-mid); }
.accordion-header{
  width:100%; background:none; border:none; padding:18px 4px; display:flex; justify-content:space-between;
  align-items:center; font-family:'Cormorant Garamond', serif; font-size:1.2rem; color:var(--maroon);
  cursor:pointer; text-align:left;
  font-weight: bolder;
}
.accordion-icon{ transition:transform .3s ease; color:var(--sky-dark); font-weight:700; font-size:1.3rem; }
.accordion-item.open .accordion-icon{ transform:rotate(45deg); }
.accordion-body{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  display:flex; flex-direction:column; gap:10px; padding:0 4px;
}
.accordion-item.open .accordion-body{ max-height:fit-content; padding-bottom:18px; }
.accordion-body a{ color:var(--sky-dark); text-decoration:none; font-size:.9rem; }
.accordion-body a:hover{ text-decoration:underline; }
/* ---------- venue ---------- */
.venue{ background:var(--maroon-dark); color:var(--cream); }
.venue .section-head h2{ color:var(--gold-light); }
.venue .eyebrow{ color:var(--gold-light); }
.venue-wrap{ max-width:760px; margin:0 auto; text-align:center; }
.venue-name{ font-size:1.8rem; color:var(--gold-light); margin-bottom:6px; }
.venue-address{ font-size:.95rem; opacity:.8; margin-bottom:28px; letter-spacing:.5px; }
.venue-map{
  position:relative; width:100%; aspect-ratio:16/10; min-height:280px; border-radius:16px; overflow:hidden;
  border:3px solid var(--gold); box-shadow:var(--shadow); background:var(--sage-light);
}
.venue-map iframe{ display:block; width:100%; height:100%; border:0; }
.venue-directions{
  display:inline-block; margin-top:24px; padding:12px 30px; border:1px solid var(--gold);
  color:var(--gold-light); text-decoration:none; border-radius:22px; font-size:.8rem;
  letter-spacing:1.5px; text-transform:uppercase; transition:background .3s ease, color .3s ease;
}
.venue-directions:hover{ background:var(--gold); color:var(--maroon-dark); }
/* ---------- rsvp (pastel) ---------- */
.rsvp-section{ background:linear-gradient(135deg, var(--mint) 0%, var(--sky) 100%); text-align:center; }
.section-inner.narrow{ max-width:560px; margin:0 auto; }
.rsvp-section h2{ font-size:clamp(2.2rem,5vw,3.2rem); color:var(--mint-dark); }
.rsvp-sub{ margin-top:10px; margin-bottom:36px; color:var(--sky-dark); font-size:.95rem; letter-spacing:.5px; }
.rsvp-form{
  text-align:left; background:#ffffff; border:1px solid var(--mint-mid);
  border-radius:16px; padding:44px 36px; box-shadow:0 10px 30px rgba(111,174,128,0.15);
}
.form-row{ margin-bottom:20px; display:flex; flex-direction:column; gap:6px;}
.form-row label{ font-size:.8rem; letter-spacing:1px; text-transform:uppercase; color:var(--pastel-ink); font-weight:500;}
.form-row input, .form-row select, .form-row textarea{
  padding:12px 14px; border:1px solid var(--sky-mid); border-radius:8px; background:var(--mint);
  font-family:'Poppins', sans-serif; font-size:.95rem; color:var(--pastel-ink);
  transition:border-color .3s ease, background .3s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--sky-dark); background:#fff;
}
.form-row textarea{ resize:vertical; min-height:90px; }
.radio-group{ display:flex; flex-wrap:wrap; gap:14px; margin-top:4px; }
.radio-option{
  display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0;
  font-size:.9rem; font-weight:400; color:var(--pastel-ink); cursor:pointer;
}
.radio-option input{ width:auto; accent-color:var(--sky-dark); }
.btn.btn-primary{
  width:100%; padding:14px; background:linear-gradient(135deg, var(--mint-dark), var(--sky-dark));
  color:#fff; border:none;
  border-radius:8px; font-size:.95rem; letter-spacing:2px; text-transform:uppercase; cursor:pointer;
  transition:opacity .3s ease;
}
.btn.btn-primary:hover{ opacity:.88; }
.rsvp-status{
  text-align:center; margin-top:16px; font-size:.9rem; color:var(--mint-dark); min-height:1.2em;
}
/* RSVP call-to-action button on index.html (links to form.html) */
a.btn.btn-primary.rsvp-cta{
  display:inline-block; width:auto; padding:14px 48px; text-decoration:none; text-align:center;
}
/* ---------- form page (form.html) ---------- */
.form-page-body{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:linear-gradient(135deg, var(--mint) 0%, var(--sky) 100%);
  padding:40px 5% 60px;
}
.form-page-head{ text-align:center; margin-bottom:28px; }
.form-page-head .monogram{
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.4rem; color:var(--maroon); letter-spacing:2px;
}
.form-page-head h1{ font-size:clamp(2rem,5vw,2.8rem); color:var(--mint-dark); margin-top:10px; }
.form-page-wrap{ width:100%; max-width:560px; }
.back-link{
  display:inline-block; margin-bottom:18px; color:var(--maroon-dark); text-decoration:none;
  font-size:.85rem; letter-spacing:1px; text-transform:uppercase;
}
.back-link:hover{ text-decoration:underline; }
/* events checklist -- only revealed after "Joyfully accepts" */
.checkbox-group{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.checkbox-option{
  display:flex; align-items:flex-start; gap:10px; text-transform:none; letter-spacing:0;
  font-size:.9rem; font-weight:400; color:var(--pastel-ink); cursor:pointer;
}
.checkbox-option input{ width:auto; margin-top:3px; accent-color:var(--sky-dark); }
.checkbox-option .ev-name{ display:block; font-weight:600; }
.checkbox-option .ev-time{ display:block; font-size:.78rem; opacity:.7; margin-top:2px; }
.form-row input[readonly]{ background:var(--sky); cursor:not-allowed; opacity:.85; }
.events-section{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s ease, opacity .4s ease, margin .5s ease;
}
.events-section.open{ max-height:700px; opacity:1; }
/* ---------- footer ---------- */
footer{
  text-align:center; padding:60px 20px 40px; background:var(--maroon-dark); color:var(--gold-light);
}
footer .script-name{ font-size:2.4rem; color:var(--cream); }
footer p{ margin-top:10px; opacity:.7; font-size:.85rem; letter-spacing:1px;}
@media (max-width:720px){
  nav ul{
    position:fixed; top:64px; right:-100%; height:calc(100vh - 64px); width:70%;
    background:var(--cream); flex-direction:column; padding:40px 30px; gap:26px;
    transition:right .35s ease; box-shadow:-6px 0 20px rgba(0,0,0,0.08);
  }
  nav ul.open{ right:0; }
  .nav-toggle{ display:flex; }
  .event-page h2{ font-size:2.4rem; }
  .countdown{ flex-wrap:nowrap; gap:8px; width:100%; max-width:360px; }
  .countdown .box{ flex:1; min-width:0; padding:8px 4px; border-radius:8px; }
  .countdown .num{ font-size:1.3rem; }
  .countdown .label{ font-size:.55rem; letter-spacing:1px; }
  .scratch-wrap{ width:92%; max-width:none; aspect-ratio:2/1; border-radius:10px; }
  .gallery-stage{ height:270px; }
  .gallery-card{ width:250px; height:250px; border-radius:60px; }
  .gallery-nav{ width:28px; height:28px; font-size:1.05rem; }
  .envelope-seal{ width:66px; height:66px; }
  .envelope-seal::after{ font-size:.85rem; }
  /* tighter spacing between sections on mobile */
  section{ padding:44px 6%; }
  .hero{ padding:110px 20px 36px; min-height:auto; }
  .section-head{ margin-bottom:30px; }
  .event-page{ min-height:auto; padding:36px 6%; }
  .story{ padding-top:44px; padding-bottom:44px; }
  .scratch-hint{ margin-bottom:18px; }
  .countdown{ margin-top:22px; }
  .divider{ margin:16px auto; }
  footer{ padding:36px 20px 26px; }
  .rsvp-form{ padding:32px 22px; }
}