@font-face{font-family:Lora;src:url('../assets/fonts/Lora-Regular.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Lora;src:url('../assets/fonts/Lora-Bold.ttf') format('truetype');font-display:swap;font-weight:700}
@font-face{font-family:Lora;src:url('../assets/fonts/Lora-Variable.ttf') format('truetype');font-display:swap;font-weight:600}
@font-face{font-family:Lora;src:url('../assets/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');font-display:swap;font-style:italic;font-weight:400 700}
@font-face{font-family:Sloop;src:url('../assets/fonts/BHN Sloop Script Pro Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:IconScript;src:url('../assets/fonts/New-Icon-Script.otf') format('opentype');font-display:swap}
:root{--blue:#486496;--sky:#bac8dd;--cream:#f8f4ec;--ink:#111;--body-size:clamp(16px,1.736vw,33.333px);--space:clamp(24px,3.86vw,74px)}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--blue);font:var(--body-size)/1.3 Lora,Georgia,serif}h1,h2,h3,p,ol{margin:0}h2,h3{font-weight:400}img{display:block;max-width:100%;height:auto}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:5px}section,header,footer{position:relative}main{max-width:2592px;margin-inline:auto;overflow:clip}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.art-title{font-family:Sloop,serif;font-size:clamp(64px,7.4vw,142px);line-height:1.15;font-weight:400}.script{font-family:IconScript,Sloop,serif;font-weight:400}
.couple{background:var(--sky);padding-top:clamp(24px,7.83vw,150px)}.couple-art{position:relative;aspect-ratio:2591/1322;background:var(--cream) url('../assets/images/background-02.webp') center/cover}.couple-art img{position:absolute;width:23%}.bride{left:28.1%;top:38.2%}.groom{left:48.8%;top:12.3%}.groom-name,.bride-name{position:absolute;text-align:center;width:22%;font-size:clamp(10px,1.35vw,26px);font-weight:700}.groom-name{left:28.5%;top:19.4%}.bride-name{left:50.5%;top:65.7%}.name{font-family:Sloop,serif;font-weight:400;font-size:clamp(35px,4.63vw,89px);line-height:1.2;margin-top:.3em}
.venue{background:var(--sky);text-align:center;padding:clamp(32px,2.5vw,48px) 20px clamp(32px,4.5vw,86px)}.monogram{width:clamp(62px,8.8vw,169px);margin:0 auto clamp(24px,4.59vw,88px)}.venue-date{font-size:clamp(18px,2.7vw,52px)}.venue h2{font-size:clamp(46px,5.79vw,111px);line-height:1.33;margin:.08em 0}.address{font-size:clamp(13px,1.54vw,30px);line-height:1.5}.map-link{display:block;width:clamp(48px,6.79vw,130px);margin:clamp(28px,7.06vw,136px) auto 18px}.map-hint{font-size:clamp(12px,1.35vw,26px)}
.agenda{background:var(--sky);padding:clamp(20px,3.55vw,68px) 16px clamp(32px,3.55vw,68px)}.agenda-card{position:relative;width:min(100%,42.13vw);min-width:288px;aspect-ratio:1092/1570;margin:auto}.agenda-frame{position:absolute;inset:0;width:100%}.agenda-shadow{position:absolute;left:-17%;top:0;width:45%;height:79.3%;object-fit:cover;object-position:27.7%}.agenda-heading{position:absolute;top:13.5%;left:8%;width:84%;text-align:center}.agenda-heading .art-title{font-size:clamp(46px,5.2vw,100px)}.agenda-heading p{font-size:clamp(12px,1.54vw,30px)}.agenda-list{position:absolute;top:29.2%;bottom:19%;left:28%;width:44%;list-style:none;padding:0;display:flex;flex-direction:column;justify-content:space-between;text-align:center}.agenda-list li{display:grid;gap:2px}.agenda-list li::before{content:'…';font-weight:700;font-style:italic;font-size:clamp(17px,1.74vw,33px);line-height:1}.agenda-list time{font-size:clamp(14px,1.54vw,30px);font-weight:700}.agenda-list span{font-size:clamp(11px,1.16vw,22px);font-style:italic}
.dresscode{text-align:center;padding:clamp(35px,4.86vw,93px) 20px clamp(45px,6.94vw,133px)}.dresscode>p{font-size:clamp(15px,1.93vw,37px)}.dresscode>img{width:clamp(260px,39.27vw,754px);margin:clamp(18px,1.31vw,25px) auto 0}
.invitation{background:#fbf3d5;color:var(--ink);text-align:center}.invitation-banner{background:url('../assets/images/invitation-background.webp') center/cover;padding:clamp(26px,3.7vw,71px) 16px clamp(24px,4.5vw,86px);color:var(--blue)}.invitation-banner h2{font-size:clamp(72px,9vw,173px)}.invitation-content{padding:clamp(40px,5.55vw,107px) 20px clamp(40px,9.3vw,178px);max-width:1900px;margin:auto}.families{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:65.62vw;margin:auto;font-size:clamp(13px,2.12vw,41px)}.families>div>p:first-child{font-size:clamp(13px,1.54vw,30px);margin-bottom:1.5em}.families>div>p:last-child{line-height:1.35}.invitation-intro{max-width:57vw;margin:clamp(32px,4.9vw,94px) auto;font-size:clamp(14px,2.12vw,41px)}.wedding-names{font-family:Sloop,serif;color:var(--blue);font-size:clamp(70px,7.72vw,148px);line-height:1.2;margin:clamp(35px,4.9vw,94px) auto}.wedding-names span{display:block;font-size:.5em;line-height:1}.invitation h3{font-size:clamp(18px,2.51vw,48px);margin-bottom:.4em}.wedding-date{margin:clamp(40px,5.55vw,107px) auto 0;max-width:48vw}.hour,.year{font-size:clamp(30px,3.28vw,63px);margin-top:.2em}.date-row{display:grid;grid-template-columns:1fr 1.13fr 1fr;gap:clamp(7px,.8vw,15px);align-items:center}.date-row>span{border-block:2px solid;padding:.65em 0;font-size:clamp(13px,2.12vw,41px)}.date-row strong{font-size:clamp(65px,7.72vw,148px);line-height:1.33}.lunar-date{margin-top:clamp(24px,2.51vw,48px);font-style:italic}.event-times{display:flex;justify-content:center;gap:clamp(16px,4.71vw,90px);margin-top:clamp(20px,1.43vw,27px)}.event-times>span+span{border-left:2px solid;padding-left:clamp(16px,4.71vw,90px)}.honour{font-size:clamp(15px,2.12vw,41px);margin-top:clamp(40px,5.55vw,107px)}.deadline{font-style:italic;margin-top:clamp(22px,2.7vw,52px)}
.rsvp{padding:clamp(24px,5.67vw,109px) 20px clamp(40px,8.53vw,164px)}.envelope{position:relative;width:min(100%,45.2vw);margin:0 auto clamp(38px,7vw,134px)}.envelope>p{position:absolute;left:23.7%;top:31.2%;width:52.8%;height:14.2%;font-style:italic;text-align:center;line-height:1.3}form{width:min(100%,69.33vw);margin:auto;display:flex;flex-direction:column;gap:var(--space)}.form-field{display:grid;gap:clamp(10px,.89vw,17px)}input:not([type=radio]){width:100%;min-height:48px;border:clamp(1px,.116vw,2.2px) solid var(--blue);border-radius:clamp(6px,.77vw,15px);padding:clamp(12px,1.29vw,25px) clamp(15px,1.93vw,37px);background:transparent;color:var(--blue)}input::placeholder{color:#48649699}fieldset{padding:0;border:0;margin:0;min-width:0;display:grid;gap:clamp(14px,1.31vw,25px)}legend{padding:0;margin-bottom:clamp(16px,1.31vw,25px)}.choice{display:flex;align-items:center;gap:clamp(12px,.96vw,19px);cursor:pointer}.choice input{appearance:none;flex-shrink:0;width:clamp(22px,1.89vw,36px);height:clamp(22px,1.89vw,36px);border:1.5px solid var(--blue);border-radius:50%;margin:0;display:grid;place-items:center}.choice input:checked::after{content:'';width:70%;height:70%;border-radius:50%;background:var(--blue)}.choice input:not(:checked)+span{opacity:.65}#companion-list{display:grid;gap:24px}.form-thanks{font-style:italic}.form-thanks::before{content:'';display:block;width:25%;border-top:1.5px solid;margin:0 auto clamp(16px,.89vw,17px)}.submit{align-self:center;background:var(--blue);color:var(--cream);border:0;border-radius:clamp(6px,.77vw,15px);font-weight:700;padding:clamp(14px,1.29vw,25px) clamp(25px,1.93vw,37px);margin-top:clamp(10px,2.28vw,44px)}#form-status:empty{display:none}#form-status{text-align:left;font-size:.8em}input:user-invalid{outline:2px solid #9a4239;outline-offset:2px}[hidden]{display:none!important}
.countdown{background:url('../assets/images/background-02.webp') center/cover;text-align:center;padding:clamp(24px,2.82vw,54px) 16px}.vine{width:58%;margin:auto}.countdown h2{font-size:clamp(15px,1.93vw,37px);margin:clamp(15px,1.89vw,36px) 0 clamp(20px,2.43vw,47px)}.countdown-values{display:flex;align-items:center;justify-content:center;gap:clamp(7px,.54vw,10px)}.countdown-values>div{width:clamp(45px,7.45vw,143px);display:grid;gap:5px}.countdown-values strong,.countdown-values>b{font-size:clamp(28px,3.86vw,74px)}.countdown-values span{font-size:clamp(12px,1.93vw,37px)}.countdown-values>b{align-self:flex-start}.vine-bottom{transform:scaleX(-1);margin-top:clamp(15px,1.89vw,36px)}
.gallery{text-align:center;padding:clamp(38px,5.9vw,113px) 0 clamp(48px,7.72vw,148px)}.gallery h2{font-size:clamp(72px,7.72vw,148px);line-height:1.33;margin-bottom:clamp(25px,3.43vw,66px)}.thanks{text-align:center;padding:clamp(30px,3.43vw,66px) 20px clamp(70px,16vw,307px)}.thanks h2{color:#6888b8;font-size:clamp(66px,8vw,154px)}.thanks p{max-width:50vw;margin:clamp(20px,2.35vw,45px) auto;font-style:italic}.thanks img{width:28.16%;margin:auto}
@media(max-width:767px){.couple-art{aspect-ratio:1.1}.couple-art img{width:43%}.groom{left:48%;top:8%}.bride{left:7%;top:36%}.groom-name{left:5%;top:15%;width:43%}.bride-name{left:50%;top:70%;width:43%}.venue{padding-top:35px}.venue h2{font-size:clamp(30px,9.5vw,70px);white-space:nowrap}.agenda-card{width:min(82%,420px);min-width:0}.agenda-heading .art-title{font-size:clamp(48px,10vw,74px)}.agenda-heading p{font-size:clamp(11px,2.8vw,18px)}.agenda-list time{font-size:clamp(13px,3.2vw,20px)}.agenda-list span{font-size:clamp(10px,2.6vw,16px)}.agenda-list li::before{font-size:18px}.dresscode>img{width:min(100%,480px)}.families{max-width:100%;gap:12px}.invitation-intro{max-width:480px;line-height:1.6}.wedding-date{max-width:420px}.lunar-date,.event-times,.deadline{font-size:14px}.honour{line-height:1.6}.envelope{width:min(100%,390px)}form{width:min(100%,620px)}.vine{width:85%}.thanks p{max-width:520px;line-height:1.65}.thanks img{width:min(70%,340px)}}
/* Two identical image groups meet at the same position on every loop. */
.gallery{container-type:inline-size;--gallery-width:100cqw;--gallery-gap:1.4cqw}
.gallery-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-block:clamp(40px,5vw,110px);touch-action:pan-x pan-y}
.gallery-viewport::-webkit-scrollbar{display:none}
.gallery-viewport:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.gallery-track{display:flex;width:max-content;animation:album-drift 75s linear infinite;will-change:transform}
.gallery-grid{display:grid;flex:none;width:calc((var(--gallery-width) + var(--gallery-gap))*5);padding-right:var(--gallery-gap);grid-template-columns:repeat(20,minmax(0,1fr));gap:var(--gallery-gap);align-items:center}
.gallery-grid img{width:90%;justify-self:center;aspect-ratio:442/738;object-fit:cover;transition:transform .35s ease;transform-origin:center}
.gallery.is-manual .gallery-track{animation:none;transform:none;will-change:auto}
#companion-section,#companion-list{display:grid;gap:var(--space)}
#companion-list:empty{display:none}
@keyframes album-drift{to{transform:translateX(-50%)}}
.gallery-grid img.is-zoomed{transform:scale(1.2);position:relative;z-index:1}
@media(hover:hover){.gallery-grid img:hover{transform:scale(1.2);position:relative;z-index:1}}
@media(max-width:767px){.gallery{--gallery-width:max(100cqw,760px);--gallery-gap:10px}}
@media(prefers-reduced-motion:reduce){.gallery-track{animation:none;transform:none;will-change:auto}.gallery-grid img{transition:none}.gallery-grid img:hover{transform:none}}

.add-guest{display:block;border:2px solid var(--blue);border-radius:50%;background:transparent;color:var(--blue);width:clamp(44px,3.98vw,76px);height:clamp(44px,3.7vw,71px);margin:16px auto 0;font-weight:700;font-size:clamp(25px,2.12vw,41px);line-height:1}

/* Invitation motion and persistent controls. */
body.intro-active{overflow:hidden}
.intro{position:relative;width:100%;height:100vh;height:100svh;background:var(--sky);display:grid;place-items:center;overflow:clip}
.intro>img{position:absolute;width:100%;height:100%;object-fit:cover;pointer-events:none}
.intro>img{z-index:1}
.intro #intro-action{z-index:2}
.intro button{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));border:1px solid var(--blue);border-radius:30px;padding:12px 24px;background:var(--cream);color:var(--blue);font-size:16px;max-width:90%}
.intro button:disabled{cursor:wait;opacity:.8}
.floating-controls{position:fixed;z-index:20;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.floating-controls button{border:0;color:var(--blue);transition:background .2s,color .2s,transform .2s}
#music-toggle{width:48px;height:48px;border-radius:50%;background:#e8edf3;display:grid;place-items:center;position:relative;box-shadow:0 2px 10px #48649620}
.music-slash{position:absolute;font:32px Georgia;pointer-events:none}
#music-toggle[aria-pressed=true] .music-slash{display:none}
.language-toggle{display:flex;border-radius:32px;background:#dce4ef;padding:4px;gap:2px}
.language-toggle button{width:44px;height:44px;border-radius:50%;background:transparent;font-size:14px}
.language-toggle button[aria-pressed=true]{background:var(--blue);color:var(--cream)}
.intro-active .floating-controls{visibility:hidden}
.wedding-date,.lunar-date,.event-times{color:#5C4033}
.event-times{flex-wrap:wrap}.event-times span{max-width:100%}
html[lang=en] .agenda-list{left:24%;width:52%}
@media(max-width:767px){.floating-controls{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));gap:8px}.language-toggle button{width:40px;height:40px}.event-times{gap:12px}.event-times>span+span{padding-left:12px}}
@media(prefers-reduced-motion:reduce){.intro,.floating-controls button{transition:none}}


/* The transparent full-screen button retains keyboard and screen-reader access. */
.intro #intro-action{inset:0;width:100%;height:100%;max-width:none;padding:0;border:0;border-radius:0;background:transparent;color:transparent;font-size:0}
.intro[data-media=retry] #intro-action{color:var(--blue);font-size:16px;display:flex;align-items:flex-end;justify-content:center;padding:24px 20px max(28px,env(safe-area-inset-bottom));text-shadow:0 1px var(--cream)}
.agenda-list span,.event-times span{white-space:pre-line}

/* Independent properties preserve decorative transforms and final geometry.
   No wrappers or overflow masks are introduced around revealed content. */
.scroll-reveal{opacity:0;translate:0 80px;scale:.88}
.scroll-reveal.is-revealed{transition-property:opacity,translate,scale;transition-duration:1250ms;transition-timing-function:cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.reveal-heading{scale:1}
.scroll-reveal.is-revealed{opacity:1;translate:0 0;scale:1}
.scroll-reveal.reveal-interacting{transition:none}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;translate:none;scale:none;filter:none;transition:none}}
@media print{.scroll-reveal{opacity:1;translate:none;scale:none;filter:none;transition:none}}

/* Show every missing RSVP field after a submission attempt. */
#rsvp-form input[aria-invalid=true]{border-color:#9a4239;outline:2px solid #9a4239;outline-offset:2px;background-color:#9a42390a}
#form-status[data-message=incomplete]{color:#9a4239;line-height:1.6}

.required-label::after{content:" *";color:#9a4239}

/* Phrase groups remain atomic when they fit, and wrap inside on narrow screens. */
.keep-together{display:inline-block;max-inline-size:100%;vertical-align:bottom}

/* Invitation copy needs balanced lines, while family names need full columns. */
.venue h2,.dresscode h2,.invitation-banner h2,.invitation-content h3,.thanks h2{ text-wrap:balance }
.invitation-intro,.honour,.thanks>p{text-wrap:pretty}
.families{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,96px);align-items:start;padding:clamp(12px,2vw,32px) clamp(8px,2vw,32px)}
.families>div{text-align:center;color:#486496}
.invitation-intro{text-wrap:balance;padding:clamp(12px,2vw,32px) 0}
.invitation-content>.invitation-intro,.invitation-content>h3{width:100%;max-width:none;padding-inline:0;margin-inline:auto}
.invitation-intro{white-space:pre;text-wrap:nowrap;line-height:1.5}
.families>div,.date-row>span,.form-field,.choice>span{min-width:0}
.parent-name{display:block;max-inline-size:100%;white-space:nowrap;font-weight:600}
.invitation-content>.address{max-width:55ch;margin-inline:auto}
.deadline{line-height:1.6;text-wrap:pretty}
.deadline a{display:inline-block;white-space:nowrap}
.deadline a,.deadline strong{font-weight:600}
#rsvp-form label,#rsvp-form legend,.form-thanks{line-height:1.55}
#form-status{overflow-wrap:anywhere}

/* All envelope lettering shares the new artwork's coordinate system. */
.envelope{--envelope-width:45.2vw}
.envelope-title,.envelope-signature{position:absolute;color:#6888b8;text-align:center;-webkit-text-size-adjust:none;text-size-adjust:none}
.envelope-title{left:21.8%;top:min(calc(7.5% + 14px),10.5%);width:56.4%;font-family:Sloop,serif;font-size:calc(var(--envelope-width) * .114);line-height:.95;white-space:pre-line}
html[lang=en] .envelope-title{font-size:calc(var(--envelope-width) * .1046)}
.envelope>p,html[lang=en] .envelope>p{font-size:calc(var(--envelope-width) * .0291);line-height:1.25;-webkit-text-size-adjust:none;text-size-adjust:none}
.envelope-signature{left:51.8%;top:50.1%;width:24.6%;line-height:1.25}
.envelope-signature>span{display:block}
.envelope-salutation{font-size:calc(var(--envelope-width) * .02455);font-style:italic}
.envelope-names{font-family:Sloop,serif;font-size:calc(var(--envelope-width) * .0473);white-space:nowrap}
@media(max-width:767px){.envelope{--envelope-width:min(100vw - 40px,390px)}}
@media(max-width:767px){
  /* Keep the original centered timeline and coordinates; only fit its type. */
  .agenda-card{container-type:inline-size}
  .agenda-heading .art-title{font-size:clamp(30px,13cqw,74px)}
  .agenda-heading p{font-size:clamp(10px,3.5cqw,18px)}
  .agenda-list time{font-size:clamp(12px,4.1cqw,20px)}
  .agenda-list li>span{font-size:clamp(10px,3cqw,16px)}
  .agenda-list li::before{font-size:clamp(12px,4cqw,18px)}
  .venue h2{white-space:normal}
  .address{font-size:clamp(13px,3.3vw,18px);text-wrap:pretty}
  .invitation-banner h2{font-size:clamp(52px,12vw,92px);line-height:1.3}
  .wedding-names{font-size:clamp(52px,12vw,80px);line-height:1.3}
  .wedding-names>p{text-wrap:balance}
  .invitation-intro{font-size:clamp(14px,2.5vw,18px)}
  .families{font-size:clamp(13px,2.5vw,18px);line-height:1.5}
  .families>div>p:first-child{margin-bottom:.8em}
  .parent-name{font-size:clamp(8px,calc((100vw - 52px) * .032),18px)}
  .event-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center;line-height:1.5}
  .event-times>span{min-width:0}
  .event-times>span+span{padding-left:12px}
  .date-row>span{font-size:clamp(12px,2.7vw,18px)}
  html[lang=en] .lunar-date{white-space:nowrap}
  .thanks h2{font-size:clamp(52px,10vw,72px);line-height:1.3}
}