@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Montserrat:wght@300;400;500&display=swap');

:root{
  --paper:#dad0c6;
  --paper-hi:#e5ddd5;
  --paper-lo:#cfc3b8;
  --wine:#741923;
  --wine-deep:#5f111a;
  --gold:#9b793f;
  --gold-soft:#b29258;
  --ink:#49372f;
  --muted:#705548;
  --olive:#657044;
  --line:rgba(112,85,72,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
html,body{margin:0;padding:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:"Cormorant Garamond",Georgia,serif;overflow-x:hidden}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}

.stage{position:relative;width:100%;height:100svh;min-height:560px;overflow:hidden;background:var(--paper)}
.intro-poster,.intro-video,.handoff{position:absolute;inset:0;width:100%;height:100%;background:var(--paper)}
.intro-poster{z-index:3}
.intro-poster>img,.handoff>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none}
.seal-hotspot{position:absolute;z-index:5;left:50%;top:48.5%;width:min(31vw,160px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer}
.seal-hotspot:focus-visible{outline:2px solid rgba(116,25,35,.6);outline-offset:6px}
.tap-hint{position:absolute;z-index:4;left:50%;bottom:max(28px,4.5svh);transform:translateX(-50%);color:rgba(88,68,55,.72);font:500 10px Montserrat,Arial,sans-serif;letter-spacing:.22em;white-space:nowrap;animation:hintBreathe 2.2s ease-in-out infinite;text-shadow:0 1px 0 rgba(255,255,255,.55)}
@keyframes hintBreathe{50%{opacity:.48;transform:translate(-50%,3px)}}
.intro-video{z-index:2;object-fit:cover;object-position:center;opacity:0;visibility:hidden;transition:opacity .12s linear}
.stage.playing .intro-video{z-index:4;opacity:1;visibility:visible}
.stage.playing .intro-poster{opacity:0;visibility:hidden;pointer-events:none}
.handoff{z-index:1;opacity:0;visibility:hidden;transition:opacity .28s ease}
.stage.finished .intro-video{opacity:0;pointer-events:none}
.stage.finished .handoff{z-index:5;opacity:1;visibility:visible}
.continue-cue{position:absolute;z-index:6;left:50%;bottom:max(26px,4svh);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 22px;border:0;background:rgba(218,208,198,.16);color:#745d45;cursor:pointer;opacity:0;animation:cueIn .75s .55s ease forwards;backdrop-filter:blur(1px)}
.continue-cue span:first-child{font:500 10px Montserrat,Arial,sans-serif;letter-spacing:.19em;white-space:nowrap}
.cue-line{display:block;width:78px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cue-arrow{font-size:21px;line-height:.7;color:var(--gold);animation:arrowBreathe 1.8s ease-in-out infinite}
@keyframes cueIn{to{opacity:1}}
@keyframes arrowBreathe{50%{transform:translateY(4px);opacity:.55}}

.site{display:none;background:var(--paper)}
.site.visible{display:block}
.panel{position:relative;width:min(100%,560px);min-height:100svh;margin:0 auto;padding:max(58px,7svh) 28px max(42px,5svh);overflow:hidden;background:linear-gradient(rgba(218,208,198,.88),rgba(218,208,198,.88)),url("assets/paper_texture.webp") center/760px auto repeat}
.paper-grain{position:absolute;inset:0;pointer-events:none;background:url("assets/paper_texture.webp") center/700px auto repeat;opacity:.14;mix-blend-mode:multiply}
.section-inner{position:relative;z-index:1;width:100%;min-height:calc(100svh - 110px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.section-inner.narrow{max-width:430px;margin:auto}
.eyebrow{margin:0;color:var(--gold);font:500 10px Montserrat,Arial,sans-serif;letter-spacing:.24em}
.monogram{display:block;object-fit:contain;mix-blend-mode:multiply;filter:saturate(.72) contrast(.94) sepia(.035);opacity:.94}
.small-mark{width:min(18vw,80px);margin-bottom:14px}
.ornamental-star{color:var(--gold);font-size:15px;margin-bottom:21px}
.scroll-cue{position:absolute;bottom:-17px;color:var(--gold);font-size:24px;animation:arrowBreathe 2s ease-in-out infinite}

/* 06 */
.history-inner{justify-content:center}
.history .eyebrow{margin-bottom:15px}
.tower{display:block;object-fit:contain;mix-blend-mode:multiply}
.tower-integrated{width:min(119%,540px);max-height:47svh;margin:0 -8% 14px;opacity:.84;filter:saturate(.66) contrast(.90) sepia(.07) brightness(1.02)}
blockquote{margin:4px auto 0;max-width:380px;font-size:clamp(26px,7vw,37px);font-style:italic;line-height:1.16;color:#624b3d}

/* 07 */
.countdown{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:42px 0 24px}
.countdown div{padding:17px 2px 14px;border-top:1px solid rgba(155,121,63,.48);border-bottom:1px solid rgba(155,121,63,.28)}
.countdown strong{display:block;color:var(--wine);font-weight:500;font-size:clamp(28px,8vw,40px);line-height:1}
.countdown span{display:block;margin-top:9px;color:var(--muted);font:500 clamp(7px,2vw,9px) Montserrat,Arial,sans-serif;letter-spacing:.10em}
.countdown-copy{margin:0;font-size:19px;color:#5b463a}
.countdown-copy strong{font-weight:600;color:var(--wine)}

/* 08 */
.display-date{font-size:clamp(45px,12vw,65px);font-weight:400;color:var(--wine);letter-spacing:.02em;margin:23px 0 33px}
.timeline-day{width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.timeline-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:17px 2px;font-size:20px;text-align:left}
.timeline-row+.timeline-row{border-top:1px solid var(--line)}
.timeline-row strong{color:var(--gold);font-weight:500;letter-spacing:.08em}
.tower-mini{width:min(70%,300px);margin:33px auto 0;opacity:.50;filter:saturate(.55) contrast(.86) sepia(.1);mix-blend-mode:multiply}

/* 09 */
.venue-mark{width:min(20vw,86px);margin-bottom:23px;filter:sepia(.55) saturate(.88) hue-rotate(350deg) brightness(.88)}
.where-panel h2,.rsvp-panel h2,.closing-panel h2{font-weight:500;color:var(--wine);font-size:clamp(42px,11vw,58px);line-height:1;margin:20px 0 0}
.button-outline,.detail-button,.submit-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid rgba(116,25,35,.62);background:transparent;color:var(--wine);padding:13px 24px;text-decoration:none;font:500 10px Montserrat,Arial,sans-serif;letter-spacing:.18em;cursor:pointer}
.button-outline{margin-top:45px}

/* 10 */
.info-inner{justify-content:flex-start;padding-top:8px;padding-bottom:20px}
.info-panel .eyebrow{margin:7px 0 18px}
.tower-accent{width:min(62%,270px);max-height:150px;object-fit:contain;opacity:.38;filter:saturate(.50) contrast(.83) sepia(.1);mix-blend-mode:multiply;margin:0 auto 9px}
.accordion{width:100%;max-width:470px;margin-top:5px;border-top:1px solid var(--line)}
.accordion-item{border-bottom:1px solid var(--line)}
.accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:19px 2px;border:0;background:transparent;color:#5e4638;cursor:pointer;font:500 11px Montserrat,Arial,sans-serif;letter-spacing:.20em;text-align:left}
.plus{color:var(--gold);font-family:Georgia,serif;font-size:22px;font-weight:400;line-height:1;transition:transform .28s ease}
.accordion-trigger[aria-expanded="true"] .plus{transform:rotate(45deg)}
.accordion-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s cubic-bezier(.2,.75,.2,1),opacity .28s ease;text-align:left}
.accordion-content>*{overflow:hidden}
.accordion-item.open .accordion-content{grid-template-rows:1fr;opacity:1;padding-bottom:22px}
.accordion-content p{font-size:18px;line-height:1.47;margin:0 0 13px;color:#59453a}
.accordion-content p strong{color:#4f382e;font-weight:600}
.ornament-line{display:flex!important;align-items:center;justify-content:center;gap:10px;color:var(--gold);padding-top:5px;overflow:visible!important}
.ornament-line::before,.ornament-line::after{content:"";width:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(155,121,63,.48))}
.ornament-line::after{transform:scaleX(-1)}
.ornament-line span{font-size:10px}
.dress-title{letter-spacing:.08em;color:var(--wine)!important}
.dress-figure{margin:20px 0 3px;overflow:hidden;border:1px solid rgba(125,92,64,.13);background:rgba(255,255,255,.08)}
.dress-figure img{display:block;width:100%;height:auto}
.detail-button{margin:10px 0 3px;width:100%}
.gift-details{margin-top:20px;padding:22px 18px;border:1px solid rgba(155,121,63,.24);background:rgba(255,255,255,.08);text-align:center}
.gift-details p{margin-bottom:18px;text-align:center}
.gift-details dl{margin:0;text-align:left}
.gift-details dl div{display:grid;grid-template-columns:115px 1fr;gap:14px;padding:10px 0;border-top:1px solid rgba(112,85,72,.15)}
.gift-details dt{font:500 9px Montserrat,Arial,sans-serif;letter-spacing:.16em;color:var(--gold)}
.gift-details dd{margin:0;font-size:17px;color:#59453a}

/* 11 RSVP */
.rsvp-inner{max-width:455px;margin:auto;justify-content:flex-start;padding-top:9px;padding-bottom:26px}
.rsvp-mark{width:min(19vw,82px);margin-bottom:15px}
.rsvp-panel h2{margin-top:18px}
.deadline{font-size:18px;line-height:1.45;margin:21px auto 30px;max-width:360px;color:#624b3d}
#rsvpForm{width:100%;text-align:left}
.choice-fieldset{border:0;padding:0;margin:0 0 28px}
.choice-fieldset legend,.text-field>span{display:block;width:100%;font-size:19px;color:#514036;margin-bottom:12px}
.choice-grid{display:grid;gap:9px}.choice-grid.two{grid-template-columns:1fr 1fr}
.choice-grid label{display:block;position:relative}.choice-grid input{position:absolute;opacity:0;pointer-events:none}
.choice-grid span{display:flex;align-items:center;justify-content:center;min-height:45px;border:1px solid rgba(112,85,72,.28);color:#665044;background:rgba(255,255,255,.06);font:500 10px Montserrat,Arial,sans-serif;letter-spacing:.16em;cursor:pointer;transition:.2s ease}
.choice-grid input:checked+span{border-color:var(--wine);color:#fff;background:var(--wine)}
.conditional-fields{animation:softIn .45s ease both}@keyframes softIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.text-field{display:block;margin-bottom:27px}
.text-field em{font-size:.8em;color:#8a7164;font-weight:400}
.text-field input,.text-field textarea{width:100%;border:0;border-bottom:1px solid rgba(112,85,72,.32);border-radius:0;background:transparent;color:#49372f;padding:11px 2px;font-size:18px;outline:none;resize:vertical}
.text-field input:focus,.text-field textarea:focus{border-bottom-color:var(--wine)}
.submit-button{width:100%;margin-top:4px}
.submit-button:disabled{opacity:.34;cursor:not-allowed}
.rsvp-thanks{width:100%;margin-top:24px;padding:27px 18px;border-top:1px solid rgba(155,121,63,.30);border-bottom:1px solid rgba(155,121,63,.30);text-align:center;font-size:23px;line-height:1.35;color:var(--wine)}

/* 12 */
.closing-inner{max-width:430px;margin:auto}
.closing-mark{width:min(24vw,105px);animation:sealFloat 5s ease-in-out infinite}
@keyframes sealFloat{50%{transform:translateY(-5px) scale(1.012)}}
.closing-tower{width:min(104%,470px);max-height:37svh;margin:15px -2% 9px;opacity:.63;filter:saturate(.56) contrast(.88) sepia(.08)}
.closing-panel h2{margin:4px 0 18px}
.closing-inner>p{font-size:21px;line-height:1.45;margin:0 auto 10px;max-width:380px}
.closing-venue{color:var(--wine)}
.closing-date{margin-top:25px!important;color:var(--gold);font:500 11px Montserrat,Arial,sans-serif!important;letter-spacing:.20em}

@media (min-aspect-ratio:9/16){.intro-poster>img,.handoff>img,.intro-video{object-fit:contain;background:var(--paper)}}
@media (max-width:360px){.panel{padding-left:20px;padding-right:20px}.countdown{gap:3px}.countdown span{letter-spacing:.06em}.accordion-trigger{letter-spacing:.15em}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   v6.1 — ornamental layout refinement from approved mockup
   ========================================================= */
.tower-sketch{
  display:block;
  object-fit:contain;
  opacity:.72;
  filter:saturate(.82) contrast(.94);
}
.history-sketch{width:min(49%,205px);margin:24px auto 22px;opacity:.68}
.olive-sprig{display:block;width:min(42%,170px);height:auto;margin:22px auto 0;opacity:.78;object-fit:contain}

/* Countdown is intentionally shorter so El Día appears sooner on scroll. */
.countdown-panel{min-height:76svh}
.countdown-panel .section-inner{min-height:calc(76svh - 92px)}
.countdown-panel .countdown{margin:34px 0 8px}

/* Small decorative line drawing, as in the approved mobile mockup. */
.tower-mini{width:min(47%,195px);margin:30px auto 0;opacity:.66;filter:none;mix-blend-mode:normal}

/* Dónde: monogram is the lower decorative anchor, not a heading ornament. */
.where-panel .venue-mark{width:min(24vw,96px);margin:46px auto 0;filter:sepia(.55) saturate(.88) hue-rotate(350deg) brightness(.88)}

/* Information: accordion reads as one compact stack, with the tower beneath it. */
.info-panel .info-inner{justify-content:flex-start;padding-top:8px;padding-bottom:20px}
.info-panel .eyebrow{margin:7px 0 24px}
.accordion{
  margin-top:0;
  border:1px solid rgba(112,85,72,.20);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.055);
}
.accordion-item{border-bottom:1px solid rgba(112,85,72,.18);margin:0!important}
.accordion-item:last-child{border-bottom:0}
.accordion-trigger{padding:14px 14px;min-height:48px}
.accordion-item.open .accordion-content{padding:0 14px 16px}
.accordion-content p{font-size:17px;line-height:1.45}
.tower-accent{width:min(43%,180px);max-height:none;margin:28px auto 0;opacity:.58;filter:none;mix-blend-mode:normal}

.rsvp-sketch{width:min(45%,185px);margin:34px auto 0;opacity:.58}
.closing-tower{width:min(48%,205px);max-height:none;margin:20px auto 12px;opacity:.64;filter:none;mix-blend-mode:normal}

@media(max-width:380px){
  .countdown-panel{min-height:72svh}
  .countdown-panel .section-inner{min-height:calc(72svh - 82px)}
  .accordion-trigger{padding:13px 12px}
}

/* =========================================================
   v6.2 — decorative assets from the approved illustration sheet
   ========================================================= */
.history .eyebrow{margin-bottom:20px}
.history blockquote{margin:0 auto;max-width:370px}
.history-sketch{
  width:min(76%,330px);
  margin:34px auto 6px;
  opacity:.70;
  filter:none;
  mix-blend-mode:normal;
}
.olive-sprig{
  display:block;
  width:min(31%,126px);
  height:auto;
  margin:18px auto 0;
  opacity:.88;
  filter:none;
}
.tower-mini{
  width:min(74%,320px);
  margin:34px auto 0;
  opacity:.66;
  filter:none;
  mix-blend-mode:normal;
}
.where-panel .venue-mark{
  width:min(31vw,118px);
  margin:42px auto 0;
  filter:none;
  mix-blend-mode:normal;
  opacity:.90;
}
.tower-accent{
  width:min(67%,280px);
  margin:28px auto 0;
  opacity:.64;
  filter:none;
  mix-blend-mode:normal;
}
.rsvp-inner .eyebrow,
.closing-inner .eyebrow{margin-top:2px}
.rsvp-sketch{
  width:min(73%,318px);
  margin:36px auto 0;
  opacity:.62;
  filter:none;
  mix-blend-mode:normal;
}
.closing-tower{
  width:min(73%,318px);
  max-height:none;
  margin:18px auto 12px;
  opacity:.62;
  filter:none;
  mix-blend-mode:normal;
}

/* =========================================================
   v6.4 — fine polish requested by user
   ========================================================= */
.history-sketch{
  width:min(73%,312px);
  margin:30px auto 8px;
}

.where-panel .venue-mark{
  width:min(28vw,106px);
  margin:40px auto 0;
}

/* Countdown: tighter block, smaller decorative illustration, less gap to next panel */
.countdown-panel{
  min-height:62svh;
  padding-top:max(46px,5.5svh);
  padding-bottom:max(12px,1.8svh);
}
.countdown-panel .section-inner{
  min-height:calc(62svh - 62px);
}
.countdown-panel .countdown{
  margin:28px 0 6px;
}
.countdown-panel .olive-sprig{
  width:min(22%,88px);
  margin:10px auto 0;
  opacity:.84;
}

/* Accordion: visually flush, no extra dead space when closed */
.info-panel .eyebrow{
  margin:7px 0 20px;
}
.accordion{
  gap:0;
  border-radius:0;
}
.accordion-item{
  margin:0;
}
.accordion-trigger{
  padding:12px 14px;
  min-height:0;
}
.accordion-content{
  margin:0;
  padding:0 !important;
}
.accordion-item.open .accordion-content{
  padding:0 14px 14px !important;
}
.accordion-content p:last-of-type{
  margin-bottom:0;
}
.tower-accent{
  margin:20px auto 0;
}

@media(max-width:380px){
  .countdown-panel{min-height:58svh;padding-top:max(42px,5svh);padding-bottom:10px}
  .countdown-panel .section-inner{min-height:calc(58svh - 54px)}
  .countdown-panel .olive-sprig{width:min(24%,82px)}
  .accordion-trigger{padding:11px 12px}
}


/* =========================================================
   v6.5 — final fine-tuning
   ========================================================= */
/* History / Dónde: use the cleaned crops and keep them a touch tighter. */
.history-sketch{
  width:min(71%,300px);
  margin:28px auto 6px;
}
.where-panel .venue-mark{
  width:min(26vw,100px);
  margin:38px auto 0;
}

/* Countdown: smaller olive sprig and less vertical gap before next panel. */
.countdown-panel{
  min-height:56svh;
  padding-top:max(42px,5svh);
  padding-bottom:6px;
}
.countdown-panel .section-inner{
  min-height:calc(56svh - 48px);
}
.countdown-panel .countdown{
  margin:24px 0 4px;
}
.countdown-panel .olive-sprig{
  width:min(17%,64px);
  margin:8px auto 0;
  opacity:.82;
}

/* Accordion: fully compact closed state, no visible gaps between items. */
.info-panel .eyebrow{
  margin:7px 0 18px;
}
.accordion{
  margin-top:0;
  border:1px solid rgba(112,85,72,.18);
  border-radius:0;
  overflow:hidden;
  background:rgba(255,255,255,.045);
}
.accordion-item{
  display:block;
  margin:0 !important;
  border-bottom:1px solid rgba(112,85,72,.17);
}
.accordion-item:last-child{
  border-bottom:0;
}
.accordion-trigger{
  padding:12px 14px 11px;
  min-height:auto;
}
.accordion-content{
  display:block;
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin:0;
  padding:0 !important;
  transition:max-height .42s cubic-bezier(.2,.75,.2,1),opacity .22s ease;
}
.accordion-content > *{
  overflow:visible;
}
.accordion-item.open .accordion-content{
  max-height:1800px;
  opacity:1;
  padding:0 14px 14px !important;
}
.accordion-content p{
  margin:0 0 10px;
}
.accordion-content p:last-of-type{
  margin-bottom:0;
}
.tower-accent{
  margin:18px auto 0;
}

@media(max-width:380px){
  .countdown-panel{min-height:53svh;padding-top:max(38px,4.6svh);padding-bottom:4px}
  .countdown-panel .section-inner{min-height:calc(53svh - 42px)}
  .countdown-panel .olive-sprig{width:min(18%,58px)}
  .accordion-trigger{padding:11px 12px 10px}
}