/* Layout concept: a single luminous stage. Names sit above, the anime bride and groom walk in from
   opposite sides and meet in the middle, soft red hearts drift down over the pages.
   Gold and white only, with one soft-red accent for the hearts. */
:root{
  --ivory:#fffaf0;
  --white:#ffffff;
  --champagne:#f6ead0;
  --gold-deep:#7a5a1a;      /* readable gold for small text */
  --gold:#b58a2c;
  --gold-bright:#e3bf63;
  --gold-pale:#f6e7ac;
  --heart:#e8636f;
  --serif:'Cormorant Garamond','Cormorant',Georgia,serif;
  --script:'Great Vibes','Snell Roundhand',cursive;
  --gold-grad:linear-gradient(100deg,#8a6418 0%,#c2922c 28%,#e6c261 50%,#b7842a 74%,#7d5a14 100%);
  --h:min(62svh,calc((100vw - 32px) / .98),720px);   /* height of the couple */
  --walk:3.8s;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);background:var(--ivory);color:var(--gold-deep);font-family:var(--serif);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}

/* ---------- layers ---------- */
#hearts{pointer-events:none}   /* holds the hearts but is not a layer itself: a screen-sized fixed layer makes Safari tint its bottom bar */
#page{position:relative}   /* no stacking context here, so each section can sit above or below the hearts */

/* ---------- soft red hearts ---------- */
.heart{position:fixed;top:0;left:var(--x);z-index:3;pointer-events:none;width:var(--s);height:var(--s);opacity:0;
  animation:fall var(--d) linear var(--delay) infinite;will-change:transform,opacity}
.heart i{display:block;width:100%;height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cdefs%3E%3CradialGradient id='g' cx='34%25' cy='28%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23ffb3ba'/%3E%3Cstop offset='.55' stop-color='%23ee707b'/%3E%3Cstop offset='1' stop-color='%23d84a5a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M16 28C4 19 1 13 1 8.5 1 4 4.5 1 8.5 1 11.7 1 14.5 2.8 16 5.6 17.5 2.8 20.3 1 23.5 1 27.5 1 31 4 31 8.5 31 13 28 19 16 28Z' fill='url(%23g)'/%3E%3Cellipse cx='9.5' cy='7' rx='3.2' ry='2' fill='%23fff' opacity='.45' transform='rotate(-30 9.5 7)'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:sway calc(var(--d) / 3.2) ease-in-out infinite alternate;filter:blur(var(--b,0px))}
@keyframes fall{
  0%{transform:translate3d(0,-14vh,0);opacity:0}
  8%{opacity:var(--o)}
  92%{opacity:var(--o)}
  100%{transform:translate3d(0,112vh,0);opacity:0}}
@keyframes sway{
  from{transform:translateX(calc(var(--sway) * -1)) rotate(calc(var(--rot) * -1))}
  to{transform:translateX(var(--sway)) rotate(var(--rot))}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;min-height:100svh;background:radial-gradient(ellipse 70% 55% at 50% 72%,rgba(232,196,110,.34),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse at 50% 0%,#fffaf0 0,rgba(255,250,240,0) 60%),
    linear-gradient(180deg,#fffaf0 0%,#fffaf0 45%,#f8edd2 100%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:clamp(44px,9svh,96px) 16px clamp(30px,5svh,64px);overflow:hidden}

.hero{--cw:clamp(185px,34vw,400px);--fi:calc(var(--cw) * .11 - 6px)}
/* the double line starts at the middle of the top-left leaf corner and ends at the middle of the bottom-right one */
.frame{position:absolute;inset:var(--fi);pointer-events:none;z-index:3}
.lines{position:absolute;inset:0;border:1px solid transparent;border-image:linear-gradient(135deg,#b58a2c,#f6e7ac 40%,#b58a2c 70%,#e3bf63) 1;
  --x1:calc(var(--cw) * .15 - var(--fi));--y1:calc(var(--cw) * .125 - var(--fi));
  --x2:calc(var(--cw) * .157 - var(--fi));--y2:calc(var(--cw) * .144 - var(--fi));
  clip-path:polygon(var(--x1) 0,100% 0,100% calc(100% - var(--y2)),calc(100% - var(--x2)) calc(100% - var(--y2)),calc(100% - var(--x2)) 100%,0 100%,0 var(--y1),var(--x1) var(--y1))}
.lines::before{content:"";position:absolute;inset:6px;border:1px solid rgba(181,138,44,.35);
  --st:calc(var(--cw) * .07);
  --a:calc(var(--x1) + var(--st) - 7px);--b:calc(var(--y1) + var(--st) - 7px);--c:calc(var(--x2) + var(--st) - 7px);--d:calc(var(--y2) + var(--st) - 7px);
  clip-path:polygon(var(--a) 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--c)) calc(100% - var(--d)),calc(100% - var(--c)) 100%,0 100%,0 var(--b),var(--a) var(--b))}
.frame i{position:absolute;width:9px;height:9px;background:var(--gold-grad);transform:rotate(45deg)}
.frame i:nth-child(2){top:-5px;right:-5px}
.frame i:nth-child(3){bottom:-5px;left:-5px}

.corner{position:absolute;z-index:3;width:clamp(185px,34vw,400px);height:auto;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(122,90,26,.18))}
.corner.tl{top:0;left:0}
.corner.br{bottom:0;right:0}
.js .hero:not(.go) .corner{opacity:0}
.go .corner{animation:fadein 2.2s ease both}

.sparkles{position:absolute;inset:0;pointer-events:none;z-index:0}
.spk{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);opacity:0;
  background:radial-gradient(circle,#fff 0,#f6e7ac 35%,rgba(227,191,99,0) 70%);border-radius:50%;
  animation:twinkle var(--d) ease-in-out var(--delay) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}

/* titles */
.titles{position:relative;z-index:4;text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.4svh,14px);max-width:1200px}
.names{margin:0;font-family:var(--script);font-weight:400;font-size:clamp(46px,8vw,96px);line-height:1.08;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.28em;row-gap:0;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9))}
.nm,.amp{background:var(--gold-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding:.32em .16em .26em;margin:-.32em -.16em -.26em;animation:shimmer 7s ease-in-out infinite alternate}
.amp{font-size:.62em}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}
.date{margin:0;font-weight:500;font-size:clamp(15px,3.6vw,22px);letter-spacing:.38em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:1.1em}
.date sup{font-size:.62em;letter-spacing:.1em;vertical-align:.38em;line-height:0}
.date::before,.date::after{content:"";width:clamp(28px,9vw,70px);height:1px;background:linear-gradient(90deg,rgba(181,138,44,0),#b58a2c)}
.date::after{transform:scaleX(-1)}

/* stage */
.stage{position:relative;z-index:4;width:calc(var(--h) * .96);height:var(--h);flex:none;margin-top:clamp(16px,3svh,36px)}
.glow{position:absolute;left:50%;bottom:-6%;width:170%;aspect-ratio:1;transform:translateX(-50%);z-index:0;
  background:radial-gradient(circle,rgba(246,231,172,.7) 0,rgba(246,231,172,.18) 38%,rgba(255,255,255,0) 66%);
  animation:glowpulse 6s ease-in-out infinite alternate}
@keyframes glowpulse{from{opacity:.65;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1.04)}}
.floor{position:absolute;left:50%;bottom:-1.6%;width:125%;height:7%;transform:translateX(-50%);z-index:1;
  background:radial-gradient(ellipse at center,rgba(122,90,26,.30) 0,rgba(122,90,26,.10) 50%,rgba(122,90,26,0) 72%)}

.figure{position:absolute;bottom:0;z-index:2;will-change:transform,opacity}
.figure img{width:auto;height:100%;filter:drop-shadow(0 10px 14px rgba(90,60,10,.18))}
.bride{left:0;height:calc(var(--h) * .95)}
.groom{right:calc(var(--h) * .07);height:var(--h)}

/* first-load motion (only when JS is running) */
.js .hero:not(.go) .figure,.js .hero:not(.go) .titles>*{opacity:0}
.js .hero:not(.go) .glow,.js .hero:not(.go) .floor{opacity:0}
.go .bride{animation:inL var(--walk) cubic-bezier(.22,.7,.28,1) both}
.go .groom{animation:inR var(--walk) cubic-bezier(.22,.7,.28,1) both}
@keyframes inL{
  0%{transform:translate3d(calc(-50vw - var(--h) * .6),0,0);opacity:0}
  14%{opacity:1}
  100%{transform:none;opacity:1}}
@keyframes inR{
  0%{transform:translate3d(calc(50vw + var(--h) * .6),0,0);opacity:0}
  14%{opacity:1}
  100%{transform:none;opacity:1}}
.go .figure img{animation:bob .95s ease-in-out 4, breathe 5.5s ease-in-out var(--walk) infinite alternate}
.go .groom img{animation-delay:.18s,var(--walk)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.1%)}}
@keyframes breathe{from{transform:translateY(0)}to{transform:translateY(-.7%)}}
.go .glow,.go .floor{animation:fadein 2s ease both}
.go .glow{animation:fadein 2s ease both,glowpulse 6s ease-in-out 2s infinite alternate}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.go .titles>*{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.go .titles>*:nth-child(1){animation-delay:calc(var(--walk) + .1s)}
.go .titles>*:nth-child(2){animation-delay:calc(var(--walk) + .6s)}
@keyframes rise{from{opacity:0;transform:translateY(16px);letter-spacing:.02em}to{opacity:1;transform:none}}
.go .names .nm,.go .names .amp{animation:shimmer 7s ease-in-out infinite alternate}

/* the moment they meet */
.meet{position:absolute;left:calc(var(--h) * .56);top:calc(var(--h) * .40);width:0;height:0;z-index:5;pointer-events:none}
.burst{position:absolute;left:0;top:0;width:calc(var(--h) * .55);aspect-ratio:1;transform:translate(-50%,-50%) scale(0);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(246,231,172,.7) 22%,rgba(227,191,99,.25) 48%,rgba(227,191,99,0) 70%)}
.go .burst{animation:burst 1.8s ease-out calc(var(--walk) - .4s) both}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(0);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
.spark{position:absolute;left:0;top:0;width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);opacity:0;
  background:radial-gradient(circle,#fff 0,#f6e7ac 40%,rgba(227,191,99,0) 72%);border-radius:50%}
.go .spark{animation:spark 1.9s cubic-bezier(.15,.7,.3,1) calc(var(--walk) - .3s + var(--w)) both}
@keyframes spark{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}

/* ---------- page 2: the families ---------- */
.fam{background:radial-gradient(ellipse 70% 40% at 50% 10%,rgba(232,196,110,.28),rgba(255,255,255,0) 70%),linear-gradient(180deg,#f8edd2 0%,#fffaf0 42%,#ffffff 100%);min-height:0;justify-content:flex-start;gap:clamp(48px,9svh,96px);padding-top:clamp(60px,11svh,130px);padding-bottom:clamp(56px,10svh,110px)}
.fam-body{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(6px,1.6svh,16px)}
.fam-block{display:flex;flex-direction:column;align-items:center;gap:.2em}
.fam-name{margin:0;font-family:var(--script);font-weight:400;font-size:clamp(46px,9vw,84px);line-height:1.08}
.fam .nm{display:inline-block}
.rel{margin:0;font-style:italic;font-weight:500;font-size:clamp(17px,3.4vw,24px);letter-spacing:.06em;color:var(--gold)}
.par{margin:0;font-weight:600;font-size:clamp(19px,4.2vw,30px);line-height:1.35;color:var(--gold-deep);max-width:20em;text-wrap:balance}
.fam-and{margin:0;font-family:var(--script);font-size:clamp(34px,6vw,52px);line-height:1}
.fam-foot{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4svh,24px);padding-bottom:clamp(8px,2svh,24px)}
.invite{margin:0;max-width:30em;text-align:center;font-weight:500;font-size:clamp(17px,3.6vw,23px);line-height:1.6;color:var(--gold-deep);text-wrap:balance}
.together{margin:0;text-align:center;font-weight:500;font-size:clamp(14px,3.2vw,20px);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:1.1em}
.together::before,.together::after{content:"";width:clamp(24px,8vw,64px);height:1px;background:linear-gradient(90deg,rgba(181,138,44,0),#b58a2c)}
.together::after{transform:scaleX(-1)}
.js .fam:not(.go) .fx{opacity:0}
.go .fx{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .45s + .2s) both}

/* ---------- section headings (Location, Schedule) and the reveal-on-scroll effect ---------- */
.story-title{margin:0 0 clamp(36px,7svh,70px);text-align:center;font-family:var(--script);font-weight:400;font-size:clamp(44px,8vw,80px);line-height:1.1}
.story-title span{display:inline-block;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.3em .16em .26em;margin:-.3em -.16em -.26em}
.js .rv:not(.in){opacity:0;transform:translateY(26px)}
.rv{transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}

/* ---------- page 3: countdown (white page, gold text, gold border round the content only) ---------- */
.count{position:relative;z-index:2;background:#fff;padding:clamp(56px,10svh,110px) 16px;display:flex;justify-content:center}
.count-card{position:relative;width:min(100%,820px);padding:clamp(34px,6vw,64px) clamp(14px,4vw,56px);text-align:center;
  border:1px solid transparent;border-image:linear-gradient(135deg,#b58a2c,#f6e7ac 40%,#b58a2c 70%,#e3bf63) 1}
.count-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(181,138,44,.35);pointer-events:none}
.count-title{margin:0 0 clamp(24px,5vw,44px);font-family:var(--script);font-weight:400;font-size:clamp(44px,8vw,76px);line-height:1.1}
.count-title span{display:inline-block;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.3em .16em .26em;margin:-.3em -.16em -.26em}
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,24px)}
.count-grid div{display:flex;flex-direction:column;align-items:center;gap:.5em;position:relative}
.count-grid div + div::before{content:"";position:absolute;left:calc(clamp(6px,2vw,24px) / -2);top:12%;bottom:12%;width:1px;background:linear-gradient(180deg,rgba(181,138,44,0),rgba(181,138,44,.5),rgba(181,138,44,0))}
.count-grid b{font-weight:500;font-size:clamp(34px,9vw,84px);line-height:1;font-variant-numeric:lining-nums tabular-nums;color:var(--gold-deep);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.count-grid span{font-weight:500;font-size:clamp(11px,2.6vw,17px);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-right:-.3em}

/* ---------- page 4: location (soft champagne page) ---------- */
.where{position:relative;z-index:4;background:#f8eed6;padding:clamp(56px,10svh,110px) 20px clamp(64px,10svh,120px);overflow:hidden}
.loc-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(24px,5vw,72px);align-items:stretch}
.loc{display:flex;flex-direction:column;align-items:center;text-align:center}
.loc-line{background:linear-gradient(180deg,rgba(181,138,44,0),rgba(181,138,44,.7) 15%,rgba(181,138,44,.7) 85%,rgba(181,138,44,0))}
.loc-photo{position:relative;display:block;width:100%;max-width:440px;aspect-ratio:4/5;border:1px solid var(--gold);outline:1px solid rgba(181,138,44,.35);outline-offset:6px;overflow:hidden;background:#f1dfa8;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}
.loc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.loc-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 14px 16px;text-align:center;
  background:linear-gradient(0deg,rgba(255,251,242,.96) 0,rgba(255,251,242,.9) 62%,rgba(255,251,242,0) 100%);
  transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.loc-cap b{font-weight:600;font-size:clamp(16px,1.8vw,19px);letter-spacing:.06em;color:var(--gold-deep)}
.loc-cap small{font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.loc-photo:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px}
@media (hover:hover){
  .loc-photo:hover{transform:translateY(-8px);box-shadow:0 18px 34px rgba(122,90,26,.22)}
  .loc-photo:hover img{transform:scale(1.05)}
  .loc-photo:hover .loc-cap{transform:none;opacity:1}
}
.loc-photo:focus-visible .loc-cap,.loc-photo.tapped .loc-cap{transform:none;opacity:1}
.loc-photo.tapped{transform:translateY(-8px);box-shadow:0 18px 34px rgba(122,90,26,.22)}
.loc-photo.tapped img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.loc-photo,.loc-photo img,.loc-cap{transition:none}}
.loc-kind{margin:clamp(22px,3.4vw,34px) 0 .3em;font-weight:600;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.loc h3{margin:0;font-family:var(--script);font-weight:400;font-size:clamp(34px,4.4vw,50px);line-height:1.15;color:var(--gold-deep)}
.loc-addr{font-variant-numeric:lining-nums;margin:.3em 0 0;font-weight:500;font-size:clamp(17px,2vw,20px);color:var(--gold-deep)}
.loc-time{margin:auto 0 1.6em;padding-top:1.1em;display:flex;flex-direction:column;align-items:center;gap:.15em}
.loc-time span{font-weight:500;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.loc-time b{font-weight:500;font-size:clamp(28px,3.4vw,38px);line-height:1.1;font-variant-numeric:lining-nums;color:var(--gold-deep)}
.loc-btn{align-self:center;display:inline-block;padding:.85em 2em;font-weight:600;font-size:14px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:#fff;
  background:var(--gold-grad);border:1px solid #8a6418;position:relative;isolation:isolate;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,color .5s ease,border-color .5s ease}
.loc-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;opacity:0;transition:opacity .5s ease}
.loc-btn:hover,.loc-btn:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px rgba(122,90,26,.25);color:var(--gold-deep);border-color:var(--gold)}
.loc-btn:hover::before,.loc-btn:focus-visible::before{opacity:1}
.loc-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
@media (max-width:760px){
  .loc-grid{grid-template-columns:1fr;gap:clamp(36px,8vw,56px);max-width:440px}
  .loc-line{height:1px;background:linear-gradient(90deg,rgba(181,138,44,0),rgba(181,138,44,.7) 20%,rgba(181,138,44,.7) 80%,rgba(181,138,44,0))}
}

/* ---------- page 5: schedule (white page) ---------- */
.sched{position:relative;z-index:2;background:#fff;padding:clamp(56px,10svh,110px) 20px clamp(64px,10svh,120px);overflow:hidden}
.sched-sub{margin:calc(clamp(36px,7svh,70px) * -.55) auto clamp(40px,7svh,72px);max-width:26em;text-align:center;font-style:italic;font-weight:500;font-size:clamp(18px,2.6vw,24px);line-height:1.5;color:var(--gold-deep)}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:980px;position:relative}
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-.5px);
  background:linear-gradient(180deg,rgba(181,138,44,0),rgba(181,138,44,.75) 8%,rgba(181,138,44,.75) 92%,rgba(181,138,44,0))}
.tl{display:grid;grid-template-columns:1fr 44px 1fr;grid-template-areas:"time dot title" "icon . text";column-gap:0;row-gap:clamp(10px,2vw,18px);align-items:center;margin-bottom:clamp(48px,8vw,88px)}
.tl:last-child{margin-bottom:0}
.tl time{grid-area:time;justify-self:end;padding-right:clamp(14px,3vw,40px);text-align:right;font-weight:600;font-size:clamp(22px,2.6vw,30px);letter-spacing:.14em;font-variant-numeric:lining-nums;color:var(--gold-deep)}
.tl-dot{grid-area:dot;justify-self:center;width:13px;height:13px;transform:rotate(45deg);background:var(--gold-grad);box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(181,138,44,.5);position:relative;z-index:1}
.tl h3{grid-area:title;margin:0;padding-left:clamp(14px,3vw,40px);font-family:var(--script);font-weight:400;font-size:clamp(34px,4.2vw,50px);line-height:1.15;color:var(--gold-deep)}
.tl-ic{grid-area:icon;justify-self:end;margin-right:clamp(14px,3vw,40px);width:auto;height:clamp(120px,14vw,170px);max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(122,90,26,.14))}
.tl-text{grid-area:text;align-self:start;padding-left:clamp(14px,3vw,40px)}
.tl-where{font-variant-numeric:lining-nums;margin:0 0 .7em;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tl-desc{margin:0;max-width:24em;font-weight:500;font-size:clamp(17px,2vw,20px);line-height:1.65;color:var(--gold-deep)}
@media (max-width:700px){
  .sched{padding-left:14px;padding-right:14px}
  .timeline::before{left:calc(112px + 14px)}
  .tl{grid-template-columns:112px 28px 1fr}
  .tl time{font-size:16px;letter-spacing:.06em;white-space:nowrap;padding-right:6px}
  .tl-dot{width:9px;height:9px;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(181,138,44,.5)}
  .tl h3{font-size:32px;padding-left:8px}
  .tl-ic{height:auto;width:84px;max-height:100px;margin-right:6px}
  .tl-text{padding-left:8px}
  .tl-where{font-size:12px;letter-spacing:.12em}
  .tl-desc{font-size:17px;line-height:1.55}
}

/* ---------- page 7: footer (warm gold page) ---------- */
.foot{position:relative;z-index:2;background:linear-gradient(180deg,rgba(248,238,214,.9),rgba(240,221,168,.92));padding:clamp(64px,11svh,120px) 20px calc(clamp(56px,9svh,96px) + env(safe-area-inset-bottom));overflow:hidden;text-align:center;border-top:1px solid rgba(181,138,44,.35)}
.foot{font-variant-numeric:lining-nums}
.foot-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.foot-gem{width:12px;height:12px;transform:rotate(45deg);background:var(--gold-grad);box-shadow:0 0 0 5px rgba(255,255,255,.7),0 0 0 6px rgba(181,138,44,.5);margin-bottom:clamp(26px,5vw,40px)}
.foot-title{margin:0 0 clamp(18px,3vw,28px);font-family:var(--script);font-weight:400;font-size:clamp(40px,7.2vw,72px);line-height:1.15;text-wrap:balance}
.foot-title span{display:inline-block;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.3em .16em .26em;margin:-.3em -.16em -.26em}
.foot-text{margin:0;font-weight:500;font-size:clamp(18px,2.4vw,23px);line-height:1.75;color:var(--gold-deep);text-wrap:pretty}
.foot sup,.foot-date sup{font-size:.62em;vertical-align:.38em;line-height:0}
.foot-with{margin:clamp(30px,5vw,44px) 0 .1em;font-style:italic;font-weight:500;font-size:clamp(18px,2.4vw,22px);color:var(--gold)}
.foot-names{margin:0;font-family:var(--script);font-size:clamp(40px,7vw,64px);line-height:1.2;color:var(--gold-deep)}
.foot-names em{font-style:normal;font-size:.7em;color:var(--gold);padding:0 .1em}
.foot-date{margin:clamp(18px,3vw,28px) 0 0;font-weight:600;font-size:clamp(13px,3vw,16px);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- desktop nav: transparent oval that turns solid on hover ---------- */
.topnav{display:none}
@media (min-width:901px){
  html{scroll-behavior:smooth}
  .topnav{position:fixed;top:18px;left:50%;z-index:50;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
    background:rgba(255,255,255,.22);border:1px solid rgba(181,138,44,.45);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 6px 24px rgba(122,90,26,.08);
    opacity:0;transform:translate(-50%,-26px);pointer-events:none;
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),background-color .5s ease,box-shadow .5s ease,border-color .5s ease}
  .topnav.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .topnav:hover,.topnav:focus-within{background:rgba(255,251,242,.98);border-color:var(--gold);box-shadow:0 10px 30px rgba(122,90,26,.2)}
  .topnav a{white-space:nowrap;padding:.6em 1.25em;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--gold-deep);
    text-shadow:0 0 6px rgba(255,255,255,.85);transition:background-color .4s ease,color .4s ease,text-shadow .4s ease}
  .topnav:hover a,.topnav:focus-within a{text-shadow:none}
  .topnav a:hover{background:rgba(181,138,44,.14)}
  .topnav a.on{background:rgba(181,138,44,.2)}
  .topnav a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.topnav{transition:none}}

/* ---------- phone menu: three stripes that open a full-screen menu ---------- */
.menu-btn,.menu{display:none}
@media (max-width:900px){
  html{scroll-behavior:smooth}
  .menu-btn{position:fixed;top:14px;right:14px;z-index:60;width:48px;height:48px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer;
    background:rgba(255,255,255,.55);border:1px solid rgba(181,138,44,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(122,90,26,.14);
    opacity:0;transform:translateY(-20px) scale(.9);pointer-events:none;-webkit-tap-highlight-color:transparent;
    transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),background-color .4s ease}
  .menu-btn.show{opacity:1;transform:none;pointer-events:auto}
  .menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--gold-grad);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
  .menu-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
  .menu-open .menu-btn{background:#fff}
  .menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-open .menu-btn span:nth-child(2){opacity:0}
  .menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at 50% 38%,#fffdf7 0,#fbf1d8 55%,#f3e2b2 100%);
    opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
  .menu-open .menu{opacity:1;visibility:visible;transition:opacity .5s ease}
  .menu nav{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.6svh,22px);padding:0 20px}
  .menu a{font-family:var(--script);font-size:clamp(38px,11vw,52px);line-height:1.2;text-decoration:none;color:var(--gold-deep);padding:.05em .3em;
    opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),color .3s ease}
  .menu-open .menu a{opacity:1;transform:none}
  .menu-open .menu a:nth-child(1){transition-delay:.12s}.menu-open .menu a:nth-child(2){transition-delay:.18s}.menu-open .menu a:nth-child(3){transition-delay:.24s}
  .menu-open .menu a:nth-child(4){transition-delay:.30s}.menu-open .menu a:nth-child(5){transition-delay:.36s}.menu-open .menu a:nth-child(6){transition-delay:.42s}
  .menu a.on{color:var(--gold)}
  .menu a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;border-radius:8px}
  .menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.menu-btn,.menu,.menu a,.menu-btn span{transition:none!important}}

/* ---------- small screens: tighter header ---------- */
@media (max-width:700px){
  .names{flex-direction:column;align-items:center;row-gap:0;font-size:clamp(48px,14vw,76px);line-height:1}
  .amp{font-size:.5em;margin:-.05em 0}
}
@media (max-width:480px){
  .date{letter-spacing:.28em}
  .together{letter-spacing:.2em;font-size:13px;text-align:center;max-width:17em}
  .together::before,.together::after{display:none}
  .hero{--fi:calc(var(--cw) * .11 - 6px)}
}
/* ---------- wide screens ---------- */
@media (min-width:900px){
  .hero{padding-top:clamp(40px,7svh,80px)}
  .stage{margin-top:clamp(10px,2svh,24px)}
}
@media (min-height:1000px) and (min-width:900px){:root{--h:min(66svh,760px)}}

/* ---------- reduced motion: show the finished scene, no falling hearts ---------- */
@media (prefers-reduced-motion:reduce){
  #hearts{display:none}
  .go .fx,.go .figure,.go .figure img,.go .glow,.go .titles>*,.go .burst,.go .spark,.go .corner,.nm,.amp,.spk{animation:none!important}
  .js .hero:not(.go) .fx,.js .hero:not(.go) .figure,.js .hero:not(.go) .titles>*,.js .hero:not(.go) .glow,.js .hero:not(.go) .floor,.js .hero:not(.go) .corner{opacity:1}
  .spk{display:none}
}

/* ---------- music button (appears after the opening animation) ---------- */
.snd{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:55;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:rgba(255,255,255,.6);border:1px solid rgba(181,138,44,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(122,90,26,.16);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;-webkit-tap-highlight-color:transparent;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),background-color .4s ease}
.snd.show{opacity:1;transform:none;pointer-events:auto}
.snd svg{width:22px;height:22px;fill:var(--gold-deep);stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.snd .sp{stroke-width:.8}.snd .wv,.snd .sl{fill:none}
.snd .sl{opacity:0}
.snd.off .wv{opacity:0}.snd.off .sl{opacity:1}
.snd:hover,.snd:focus-visible{background:#fff}
.snd:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.menu-open .snd{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.snd{transition:opacity .2s}}
@media (min-width:901px){.snd{right:56px;bottom:56px}}

/* ---------- RSVP ---------- */
.rsvp{position:relative;z-index:4;background:linear-gradient(180deg,#f8eed6,#f3e3b8);padding:clamp(56px,10svh,110px) 16px clamp(64px,10svh,120px);display:flex;justify-content:center;font-variant-numeric:lining-nums}
.rsvp-card{position:relative;width:min(100%,600px);padding:clamp(54px,9vw,84px) clamp(22px,7vw,76px) clamp(54px,9vw,80px);text-align:center;background:#fff;overflow:hidden;
  border:1px solid transparent;border-image:linear-gradient(135deg,#b58a2c,#f6e7ac 40%,#b58a2c 70%,#e3bf63) 1;box-shadow:0 18px 50px rgba(122,90,26,.14)}
.rsvp-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(181,138,44,.35);pointer-events:none}
.rs-corner{position:absolute;width:clamp(96px,24vw,170px);height:auto;pointer-events:none;z-index:1}
.rs-corner.tl{top:0;left:0}.rs-corner.br{bottom:0;right:0}
.rsvp-card .count-title{margin:0 0 clamp(10px,2vw,16px);position:relative;z-index:2}
.rsvp-sub{margin:0 auto;max-width:24em;font-style:italic;font-weight:500;font-size:clamp(18px,2.4vw,22px);line-height:1.55;color:var(--gold-deep);text-wrap:pretty}
.rs-gem{display:block;width:9px;height:9px;margin:clamp(20px,4vw,28px) auto clamp(26px,5vw,38px);transform:rotate(45deg);background:var(--gold-grad);box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(181,138,44,.5)}
.rsvp-form{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(22px,4vw,30px);text-align:center}
.rf label{display:block;margin-bottom:.2em;font-weight:600;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);margin-right:-.34em}
.rf input,.rf textarea{width:100%;font:inherit;font-size:20px;text-align:center;color:#4d3a12;background:transparent;border:0;border-bottom:1px solid rgba(181,138,44,.55);border-radius:0;padding:.55em .3em;
  background-image:linear-gradient(90deg,#b58a2c,#f6e7ac,#b58a2c);background-repeat:no-repeat;background-position:center bottom;background-size:0 2px;transition:background-size .6s cubic-bezier(.2,.7,.2,1);-webkit-appearance:none;appearance:none}
.rf textarea{resize:none;min-height:3.2em;line-height:1.5}
.rf input::placeholder,.rf textarea::placeholder{color:rgba(122,90,26,.5);font-style:italic}
.rf input:focus,.rf textarea:focus{outline:none;background-size:100% 2px}
.rf input.bad{border-bottom-color:#b3412f}
.step{display:inline-flex;align-items:center;gap:clamp(10px,3vw,18px);margin-top:.5em}
.step button{width:46px;height:46px;border-radius:50%;font:inherit;font-size:24px;line-height:1;color:var(--gold-deep);background:#fffdf7;border:1px solid rgba(181,138,44,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .4s ease,box-shadow .4s ease,transform .4s ease;-webkit-tap-highlight-color:transparent}
.step button:hover,.step button:focus-visible{background:#f8eed6;box-shadow:0 4px 12px rgba(122,90,26,.2);transform:translateY(-1px)}
.step button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.step input{width:3.2em;border-bottom:0;background-image:none;font-weight:500;font-size:34px;line-height:1;padding:.1em 0;color:var(--gold-deep);-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rf-hint{display:block;margin-top:.3em;font-style:italic;font-weight:500;font-size:15px;color:var(--gold)}
.rf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rsvp-msg{margin:-8px 0 0;min-height:1.4em;font-style:italic;font-weight:500;font-size:17px;color:#9a3a28}
.rsvp-btn{align-self:center;border-radius:0;cursor:pointer;font-family:inherit}
.rsvp-btn[disabled]{opacity:.65;cursor:default;transform:none}
.rsvp-done{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.rsvp-done[hidden]{display:none}
.rsvp-thanks{margin:0 0 clamp(14px,3vw,22px);font-family:var(--script);font-weight:400;font-size:clamp(44px,8vw,72px);line-height:1.1}
.rsvp-thanks span{display:inline-block;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.3em .16em .26em;margin:-.3em -.16em -.26em}
@media (prefers-reduced-motion:reduce){.rsvp-done{animation:none}}

.rsvp-card.done .count-title{display:none}
.rsvp-card.done{padding-top:clamp(70px,12vw,110px);padding-bottom:clamp(70px,12vw,110px)}

.rf-choice{border:0;margin:0;padding:0;min-width:0}
.rf-choice legend{display:block;width:100%;padding:0;margin-bottom:.7em;font-weight:600;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep)}
.choices{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.choice{position:relative;margin:0!important;letter-spacing:normal!important;text-transform:none!important}
.choice input{position:absolute;z-index:1;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;border:0;padding:0}
.choice span{display:block;padding:.75em 1.5em;font-style:italic;font-weight:500;font-size:19px;color:var(--gold-deep);background:#fffdf7;border:1px solid rgba(181,138,44,.6);transition:background-color .45s ease,color .45s ease,box-shadow .45s ease,transform .45s ease,border-color .45s ease}
@media (hover:hover){.choice:hover input:not(:checked) + span{background:#f8eed6;transform:translateY(-1px);box-shadow:0 6px 14px rgba(122,90,26,.16)}}
.choice input:focus-visible + span{outline:2px solid var(--gold-deep);outline-offset:3px}
.choice input:checked + span{background:var(--gold-grad);color:#fff;border-color:#8a6418;font-style:normal;box-shadow:0 6px 16px rgba(122,90,26,.22)}
.rf-guests{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .5s ease,margin .6s ease}
.rf-guests > *{min-height:0;overflow:hidden}
.rf-guests.gone{grid-template-rows:0fr;opacity:0;margin-top:calc(clamp(22px,4vw,30px) * -1);pointer-events:none}
@media (max-width:600px){.choices{flex-wrap:nowrap;gap:8px}.choice{flex:1 1 0}.choice span{padding:.6em .3em;font-size:15.5px;line-height:1.25;white-space:nowrap}}
@media (max-width:350px){.choice span{font-size:14px}}
@media (prefers-reduced-motion:reduce){.rf-guests{transition:none}}

/* RSVP labels: larger and bolder so they read clearly */
.rf label,.rf-choice legend{font-size:16px;font-weight:700;letter-spacing:.26em;margin-right:-.26em;color:#6b4c12}
.rf-choice legend{margin-bottom:.8em}
@media (max-width:600px){.rf label,.rf-choice legend{font-size:14.5px;letter-spacing:.22em;margin-right:-.22em}}

/* guest stepper: drawn bars so the + and − sit exactly in the middle of the circles; more room around them */
.step{gap:clamp(18px,5vw,30px);margin-top:1em}
.step button{position:relative;width:52px;height:52px;font-size:0;color:transparent}
.step button::before,.step button::after{content:"";position:absolute;left:50%;top:50%;background:var(--gold-deep);border-radius:1px;transform:translate(-50%,-50%)}
.step button::before{width:16px;height:2px}
.step button::after{width:2px;height:16px}
#gMinus::after{display:none}
.step input{width:2.6em}
.rf-hint{margin-top:.9em}

/* ---------- opening screen (demo): one tap unlocks the music and starts the walk-in ---------- */
html.gated,html.gated body{overflow:hidden;height:100%}
.gate{position:absolute;top:0;left:0;width:100%;height:100vh;height:100svh;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4svh,34px);padding:24px;
  background:linear-gradient(180deg,#fffaf0,#f3e3b8);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),visibility 0s linear 1.1s}
.gate::before{content:"";position:absolute;inset:18px;border:1px solid rgba(181,138,44,.7);pointer-events:none}
.gate::after{content:"";position:absolute;inset:26px;border:1px solid rgba(181,138,44,.32);pointer-events:none}
.gate-logo{width:min(66vw,340px);height:auto;animation:gateIn 1.6s cubic-bezier(.2,.7,.2,1) both}
.gate-btn{position:relative;font:inherit;font-weight:600;font-size:clamp(14px,3.4vw,17px);letter-spacing:.3em;white-space:nowrap;text-transform:uppercase;color:var(--gold-deep);margin-right:-.3em;
  background:transparent;border:1px solid rgba(181,138,44,.7);padding:1em 1.9em;cursor:pointer;animation:gateIn 1.6s .5s cubic-bezier(.2,.7,.2,1) both;-webkit-tap-highlight-color:transparent;transition:background-color .5s ease,color .5s ease}
.gate-btn span{margin-right:-.3em}
.gate-btn::after{content:"";position:absolute;inset:-1px;border:1px solid rgba(181,138,44,.55);animation:gatePulse 2.4s ease-out 2s infinite;pointer-events:none}
.gate-btn:hover,.gate-btn:focus-visible{background:var(--gold-grad);color:#fff}
.gate-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.gate.open{opacity:0;transform:scale(1.04);visibility:hidden;pointer-events:none}
@keyframes gateIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gatePulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.22,1.5)}}
@media (prefers-reduced-motion:reduce){.gate,.gate-logo,.gate-btn{animation:none!important;transition:opacity .3s ease}.gate-btn::after{display:none}}

.js .gate{display:flex}   /* without scripts the opening screen would never close, so it stays hidden */