/* ============================================================
   Boda Javier & Melisa — 18 octubre 2026
   Sistema visual otoñal · cálido · romántico
   ============================================================ */

:root{
  /* Color */
  --cream:      #f7efe1;   /* fondo principal */
  --cream-2:    #f2e6d3;   /* fondo alterno */
  --paper:      #ece0cb;   /* tarjetas */
  --ink:        #3a2516;   /* texto principal marrón oscuro */
  --ink-soft:   #6f5740;   /* texto secundario */
  --terracotta: #b15a2b;
  --rust:       #8d3a25;
  --gold:       #bd8736;
  --gold-soft:  #cda35a;
  --olive:      #6e6736;
  --line:       rgba(58,37,22,.18);

  /* Type */
  --script: "Pinyon Script", cursive;
  --serif:  "Cormorant Garamond", Georgia, serif;
  --body:   "EB Garamond", Georgia, serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Tipografía utilitaria ---------- */
.eyebrow{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.74rem;
  font-weight:600;
  color:var(--terracotta);
  margin:0 0 1.1rem;
  display:inline-block;
}
.script{
  font-family:var(--script);
  font-weight:400;
  line-height:.95;
  color:var(--rust);
}
h2.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1.05;
  margin:0 0 1.4rem;
  letter-spacing:.01em;
}
p{ text-wrap:pretty; }
.lead{ font-size:1.18rem; color:var(--ink-soft); }

/* ---------- Layout ---------- */
section{ position:relative; }
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(4.5rem,9vw,8rem) clamp(1.4rem,5vw,3rem);
}
.center{ text-align:center; }
.alt{ background:var(--cream-2); }
.dark{ background:var(--ink); color:#f3e7d4; }
.dark .section-title{ color:#fbf3e4; }
.dark .lead{ color:#d9c4a8; }
.dark .eyebrow{ color:var(--gold-soft); }

/* ---------- Ornamento (divisor) ---------- */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin:0 auto 2.4rem; max-width:230px; color:var(--gold);
}
.divider::before,.divider::after{
  content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line));
}
.divider::after{ background:linear-gradient(90deg,var(--line),transparent); }
.leaf{ width:22px; height:22px; color:var(--terracotta); flex:0 0 auto; }
.center .divider{ margin-left:auto; margin-right:auto; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.4rem,5vw,3rem);
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.scrolled{
  background:rgba(247,239,225,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding-top:.7rem; padding-bottom:.7rem;
}
.nav .brand{
  font-family:var(--script); font-size:1.7rem; color:var(--rust);
  line-height:1; opacity:0; transition:opacity .4s ease;
}
.nav.scrolled .brand{ opacity:1; }
.nav .links{ display:flex; gap:1.7rem; align-items:center; }
.nav .links a{
  font-family:var(--serif); text-decoration:none; font-weight:600;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); opacity:.78; transition:opacity .25s, color .25s;
}
.nav.scrolled .links a{ color:var(--ink); }
.nav .links a:hover{ opacity:1; color:var(--rust); }
.nav .cta{
  font-family:var(--serif); font-weight:600; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  padding:.6rem 1.2rem; border:1px solid var(--rust); color:var(--rust);
  border-radius:50px; transition:background .25s,color .25s;
}
.nav .cta:hover{ background:var(--rust); color:var(--cream); }
.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:7rem 1.4rem 3rem; position:relative; overflow:hidden;
  background:
    radial-gradient(125% 95% at 50% -5%, #faf2e6 0%, #f1e1c8 55%, #e8d2ad 100%);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:140px;
  background:linear-gradient(transparent,var(--cream));
}
.hero-inner{ position:relative; z-index:2; }
.hero .eyebrow{ color:var(--rust); }
.hero .amp{ font-size:.5em; vertical-align:middle; color:var(--gold); }
.hero .names{
  font-family:var(--script);
  font-size:clamp(4.2rem,16vw,12rem);
  color:var(--rust); line-height:.82; margin:.4rem 0 .2rem;
}
.hero .sub{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.36em;
  font-size:clamp(.9rem,2.4vw,1.25rem); color:var(--ink); margin:1.2rem 0 0;
  font-weight:600;
}
.hero .datebar{
  display:flex; align-items:center; justify-content:center; gap:1.3rem;
  margin-top:1.6rem; font-family:var(--serif); font-size:1.25rem;
  letter-spacing:.06em; color:var(--ink-soft);
}
.hero .datebar span.dot{ width:6px; height:6px; border-radius:50%; background:var(--terracotta); }
.scroll-hint{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:3; font-family:var(--serif); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-soft); display:flex;
  flex-direction:column; align-items:center; gap:.5rem; opacity:.8;
}
.scroll-hint .arr{ width:1px; height:34px; background:var(--terracotta); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scaleY(.5); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

/* floating leaves decor */
.leaf-decor{ position:absolute; z-index:1; opacity:.5; color:var(--terracotta); }
.leaf-decor.l1{ top:16%;  left:8%;  width:54px; transform:rotate(-18deg); color:var(--gold); }
.leaf-decor.l2{ top:24%;  right:10%; width:70px; transform:rotate(28deg);  color:var(--rust); opacity:.4;}
.leaf-decor.l3{ bottom:26%;left:14%;  width:44px; transform:rotate(40deg);  color:var(--terracotta); opacity:.45;}
.leaf-decor.l4{ bottom:30%;right:14%; width:60px; transform:rotate(-32deg); color:var(--olive); opacity:.4;}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.count{ display:flex; gap:clamp(1rem,4vw,3.4rem); justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.count .unit{ min-width:92px; }
.count .num{
  font-family:var(--serif); font-weight:500; line-height:1;
  font-size:clamp(3rem,7vw,5.2rem); color:var(--gold-soft);
  font-variant-numeric:tabular-nums;
}
.dark .count .num{ color:var(--gold-soft); }
.count .lbl{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.28em;
  font-size:.74rem; margin-top:.5rem; color:#cdb591;
}

/* ============================================================
   HISTORIA
   ============================================================ */
.story-grid{ display:grid; grid-template-columns:minmax(0,0.82fr) 1.18fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.story-photo{ position:relative; max-width:380px; }
.story-photo image-slot{ width:100%; aspect-ratio:4/5; box-shadow:0 30px 60px -30px rgba(58,37,22,.5); }
.story-photo .frame-tag{
  position:absolute; bottom:-18px; right:-18px; background:var(--rust); color:var(--cream);
  font-family:var(--script); font-size:1.9rem; padding:.2rem 1.4rem; border-radius:6px;
  box-shadow:0 14px 30px -12px rgba(141,58,37,.7);
}
.timeline{ margin-top:2.4rem; border-left:2px solid var(--line); padding-left:1.8rem; display:flex; flex-direction:column; gap:1.8rem; }
.timeline .t-item{ position:relative; }
.timeline .t-item::before{
  content:""; position:absolute; left:-2.27rem; top:.45rem; width:13px; height:13px;
  background:var(--terracotta); border-radius:50%; box-shadow:0 0 0 4px var(--cream);
}
.timeline .t-year{ font-family:var(--serif); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color:var(--terracotta); }
.timeline .t-head{ font-family:var(--serif); font-size:1.5rem; font-weight:500; margin:.1rem 0 .3rem; }
.timeline p{ margin:0; color:var(--ink-soft); font-size:1.02rem; }

/* ============================================================
   HORARIOS
   ============================================================ */
.schedule{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.6vw,2rem); margin-top:1rem; }
.sch-card{
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:2.2rem 1.6rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.dark .sch-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.sch-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -28px rgba(58,37,22,.55); }
.sch-ico{ width:40px; height:40px; margin:0 auto 1rem; color:var(--gold-soft); }
.sch-time{ font-family:var(--serif); font-size:2rem; font-weight:500; color:var(--gold-soft); line-height:1; }
.sch-name{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.16em; font-size:.92rem; margin:.7rem 0 .4rem; font-weight:600; }
.sch-desc{ font-size:.98rem; color:#cdb591; margin:0; }
.dark .sch-desc{ color:#cdb591; }

/* ============================================================
   LUGAR
   ============================================================ */
.venue-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.venue-map image-slot{ width:100%; aspect-ratio:5/4; box-shadow:0 30px 60px -34px rgba(58,37,22,.5); }
.venue-info h3{ font-family:var(--serif); font-size:1.8rem; font-weight:500; margin:.2rem 0 .3rem; }
.venue-info .addr{ color:var(--ink-soft); margin:0 0 1.6rem; }
.venue-list{ list-style:none; padding:0; margin:0 0 2rem; display:flex; flex-direction:column; gap:1.1rem; }
.venue-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.venue-list .vi{ width:22px; height:22px; flex:0 0 auto; color:var(--terracotta); margin-top:.25rem; }
.venue-list b{ font-family:var(--serif); font-weight:600; letter-spacing:.04em; }
.btn{
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--serif);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.84rem;
  text-decoration:none; padding:.85rem 1.7rem; border-radius:50px; cursor:pointer; border:none;
  background:var(--rust); color:var(--cream); transition:background .25s, transform .2s;
}
.btn:hover{ background:#742d1c; transform:translateY(-2px); }
.btn.ghost{ background:transparent; border:1px solid var(--rust); color:var(--rust); }
.btn.ghost:hover{ background:var(--rust); color:var(--cream); }

/* ============================================================
   MENÚ
   ============================================================ */
.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,4vw,3.4rem); margin-top:1rem; }
.menu-col h3{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; text-align:center; margin:0 0 .4rem; color:var(--gold-soft);
}
.menu-col .col-sub{ text-align:center; font-family:var(--script); font-size:1.7rem; color:var(--rust); margin:-.2rem 0 1.6rem; }
.menu-item{ text-align:center; padding:1rem 0; border-bottom:1px dashed var(--line); }
.menu-item:last-child{ border-bottom:none; }
.menu-item .mi-name{ font-family:var(--serif); font-size:1.35rem; font-weight:500; }
.menu-item .mi-desc{ font-size:.96rem; color:#cdb591; margin:.2rem 0 0; }
.dark .menu-item .mi-desc{ color:#cdb591; }

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; margin-top:1rem; }
.gallery image-slot{ width:100%; height:100%; }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 2; }

/* ---------- Carrusel de los novios (fundido cruzado) ---------- */
.carousel{ position:relative; max-width:920px; margin:1rem auto 0; }
.car-viewport{ position:relative; overflow:hidden; border-radius:16px; box-shadow:0 36px 70px -38px rgba(58,37,22,.55); }
.car-track{ position:relative; aspect-ratio:3/2; }
.car-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .9s ease;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  background:linear-gradient(135deg,#e6cd9f 0%,#cda35a 55%,#b15a2b 130%);
}
.car-slide.active{ opacity:1; pointer-events:auto; }
.car-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; }
.car-ph{ font-family:var(--script); font-size:clamp(2rem,5vw,3rem); color:#fff7ea; opacity:.9; z-index:0; user-select:none; }
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(247,239,225,.92); color:var(--rust); display:grid; place-items:center;
  box-shadow:0 12px 28px -14px rgba(58,37,22,.7); transition:background .2s, transform .2s;
}
.car-btn:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.car-btn.prev{ left:-16px; } .car-btn.next{ right:-16px; }
.car-dots{ display:flex; gap:.55rem; justify-content:center; margin-top:1.3rem; }
.car-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; background:var(--line); cursor:pointer; transition:background .25s, transform .25s; }
.car-dot.active{ background:var(--rust); transform:scale(1.35); }
@media (max-width:560px){
  .car-btn.prev{ left:8px; } .car-btn.next{ right:8px; }
  .car-btn{ width:42px; height:42px; }
}

/* Variante vertical dentro de "Nuestra historia" */
.car-story{ width:100%; margin:0; }
.car-story .car-viewport{ border-radius:10px; }
.car-story .car-track{ aspect-ratio:4/5; }
.car-story .car-viewport::after{
  content:""; position:absolute; inset:auto 0 0 0; height:90px; z-index:4; pointer-events:none;
  background:linear-gradient(transparent, rgba(58,37,22,.42));
}
.car-story .car-btn{ width:42px; height:42px; }
.car-story .car-btn.prev{ left:10px; }
.car-story .car-btn.next{ right:10px; }
.car-story .car-dots{ position:absolute; left:0; right:0; bottom:14px; margin:0; z-index:6; }
.car-story .car-dot{ background:rgba(255,247,234,.55); }
.car-story .car-dot.active{ background:#fff; }

/* ============================================================
   DRESS CODE
   ============================================================ */
.dress-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.swatches{ display:flex; gap:0; margin:1.6rem 0; border-radius:10px; overflow:hidden; box-shadow:0 18px 40px -24px rgba(58,37,22,.6); }
.swatches span{ flex:1; height:96px; }
.palette-note{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.4rem; }
.palette-note .pn{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; color:var(--ink-soft); }
.palette-note .dotc{ width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.dress-card{ background:var(--paper); border-radius:16px; padding:2.4rem; }
.dress-card h3{ font-family:var(--serif); font-size:1.6rem; font-weight:500; margin:0 0 .6rem; }
.dress-card .tag{ display:inline-block; font-family:var(--serif); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--terracotta); font-weight:600; margin-bottom:1rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:1.4rem; font-weight:500; color:var(--ink);
  padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-q .pm{ font-size:1.6rem; color:var(--terracotta); transition:transform .3s; flex:0 0 auto; line-height:1; }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a p{ margin:0 0 1.5rem; color:var(--ink-soft); font-size:1.05rem; }

/* ============================================================
   RSVP
   ============================================================ */
.rsvp-card{
  max-width:720px; margin:2rem auto 0; background:var(--cream);
  border:1px solid var(--line); border-radius:20px; padding:clamp(1.8rem,4vw,3.2rem);
  box-shadow:0 40px 80px -50px rgba(58,37,22,.7);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:1.3rem; }
.field.full{ grid-column:1/-1; }
.field label{
  display:block; font-family:var(--serif); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:.76rem; color:var(--ink-soft); margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:1.05rem; color:var(--ink);
  background:#fffaf1; border:1px solid var(--line); border-radius:10px;
  padding:.8rem 1rem; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(177,90,43,.15);
}
.field.err input, .field.err select{ border-color:var(--rust); box-shadow:0 0 0 3px rgba(141,58,37,.14); }
.field .msg{ font-size:.82rem; color:var(--rust); margin-top:.35rem; min-height:1em; }

.choice-group{ display:flex; gap:.8rem; flex-wrap:wrap; }
.choice{ position:relative; flex:1; min-width:120px; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice label{
  display:block; text-align:center; cursor:pointer; padding:.85rem .6rem; border-radius:12px;
  border:1.5px solid var(--line); background:#fffaf1; font-family:var(--serif);
  font-size:1.05rem; letter-spacing:.02em; text-transform:none; font-weight:500; color:var(--ink);
  margin:0; transition:all .2s;
}
.choice input:checked + label{ border-color:var(--rust); background:var(--rust); color:var(--cream); box-shadow:0 10px 22px -12px rgba(141,58,37,.7); }
.choice label:hover{ border-color:var(--terracotta); }

.menu-fieldset{ transition:opacity .3s, max-height .4s; overflow:hidden; }
.menu-fieldset.hidden{ opacity:0; max-height:0; margin:0; pointer-events:none; }

.submit-row{ text-align:center; margin-top:.6rem; }
.submit-row .btn{ font-size:.92rem; padding:1rem 2.6rem; }
.form-note{ text-align:center; font-size:.92rem; color:var(--ink-soft); margin:1.2rem 0 0; }

.rsvp-done{ text-align:center; padding:2rem 1rem; }
.rsvp-done .check{ width:64px; height:64px; margin:0 auto 1.2rem; color:var(--terracotta); }
.rsvp-done h3{ font-family:var(--script); font-size:3rem; color:var(--rust); margin:0 0 .4rem; }
.rsvp-done p{ color:var(--ink-soft); }
.hidden{ display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ text-align:center; padding:4.5rem 1.4rem 3.5rem; background:var(--ink); color:#e7d4ba; }
.foot .names{ font-family:var(--script); font-size:clamp(3rem,9vw,5.5rem); color:var(--gold-soft); line-height:.9; }
.foot .date{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.34em; font-size:.9rem; margin-top:1rem; color:#c7ab86; }
.foot .hash{ margin-top:1.8rem; font-family:var(--serif); letter-spacing:.1em; color:var(--terracotta); font-size:1.05rem; }

/* ============================================================
   HOJAS CAYENDO (capa ambiental)
   ============================================================ */
#leaves{ position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.leaf{ position:absolute; top:-12%; will-change:transform; animation:fall var(--dur,12s) linear infinite; }
.leaf svg{ display:block; animation:spin var(--spin,2.6s) ease-in-out infinite; opacity:.92; filter:drop-shadow(0 2px 3px rgba(58,37,22,.16)); }
@keyframes fall{
  0%{ transform:translate(0,-12vh); }
  25%{ transform:translate(var(--sx,30px),25vh); }
  50%{ transform:translate(0,55vh); }
  75%{ transform:translate(calc(var(--sx,30px)*-1),82vh); }
  100%{ transform:translate(0,114vh); }
}
@keyframes spin{ from{ transform:rotate(-14deg); } 50%{ transform:rotate(14deg); } to{ transform:rotate(-14deg); } }
@media (prefers-reduced-motion:reduce){ .leaf{ display:none; } }

/* ============================================================
   BOTÓN DE MÚSICA
   ============================================================ */
.music-btn{
  position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:70;
  width:54px; height:54px; border-radius:50%; cursor:pointer; border:none;
  background:var(--rust); color:var(--cream); display:grid; place-items:center;
  box-shadow:0 14px 30px -12px rgba(141,58,37,.75); transition:transform .25s, background .25s;
}
.music-btn:hover{ transform:scale(1.07); background:#742d1c; }
.music-btn svg{ width:24px; height:24px; }
.music-btn .ico-pause{ display:none; }
.music-btn.playing .ico-play{ display:none; }
.music-btn.playing .ico-pause{ display:block; }
/* ondas animadas cuando suena */
.music-btn .bars{ display:none; gap:2px; align-items:flex-end; height:18px; }
.music-btn.playing .bars{ display:flex; }
.music-btn.playing .ico-pause{ display:none; }
.music-btn .bars i{ width:3px; background:currentColor; border-radius:2px; animation:eq .9s ease-in-out infinite; }
.music-btn .bars i:nth-child(1){ height:40%; animation-delay:-.2s; }
.music-btn .bars i:nth-child(2){ height:90%; animation-delay:-.5s; }
.music-btn .bars i:nth-child(3){ height:60%; animation-delay:-.1s; }
.music-btn .bars i:nth-child(4){ height:100%; animation-delay:-.7s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
.music-hint{
  position:fixed; right:calc(clamp(1rem,3vw,1.8rem) + 64px); bottom:calc(clamp(1rem,3vw,1.8rem) + 12px);
  z-index:70; background:var(--ink); color:var(--cream); font-family:var(--serif);
  font-size:.82rem; letter-spacing:.04em; padding:.55rem .9rem; border-radius:9px; white-space:nowrap;
  box-shadow:0 12px 26px -14px rgba(58,37,22,.7); opacity:0; transform:translateX(8px);
  transition:opacity .4s, transform .4s; pointer-events:none;
}
.music-hint.show{ opacity:1; transform:none; }
.music-hint::after{ content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%) rotate(45deg); width:10px; height:10px; background:var(--ink); }
@media (prefers-reduced-motion:reduce){ .music-btn .bars i{ animation:none; } }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .story-grid,.venue-grid,.dress-grid{ grid-template-columns:1fr; }
  .story-photo{ max-width:440px; margin:0 auto; }
  .schedule{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
  .menu-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .nav .links{ display:none; }
  .nav .links.open{
    display:flex; flex-direction:column; position:absolute; top:100%; right:clamp(1.4rem,5vw,3rem);
    background:var(--cream); padding:1.4rem 1.8rem; border-radius:14px; gap:1.1rem;
    box-shadow:0 24px 50px -24px rgba(58,37,22,.55); border:1px solid var(--line);
  }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
  .nav-toggle span{ width:26px; height:2px; background:var(--ink); display:block; }
  .nav .cta{ display:none; }
}
@media (max-width:560px){
  .form-row{ grid-template-columns:1fr; }
  .hero .datebar{ flex-direction:column; gap:.5rem; }
  .hero .datebar span.dot{ display:none; }
}