/* The film stays in place as it dissolves into the invitation's deep wine. */
.hero-sequence{background:var(--wine-deep);position:relative;isolation:isolate}
.hero-sequence .hero{position:sticky;top:0;height:100svh;min-height:480px;max-height:none}
.hero-photo{inset:0;transform:scale(var(--film-scale,1));transition:none;will-change:auto}
.hero-photo img,.hero-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-photo img{animation:none;filter:none}
.hero-photo video{opacity:0;transition:opacity .45s ease}
.video-ready .hero-photo video{opacity:1}
.hero-shade{background:linear-gradient(180deg,rgba(18,12,15,.25),transparent 30%,rgba(18,12,15,.12) 48%,rgba(18,12,15,.68) 100%)}
.hero-fade{position:absolute;inset:0;background:var(--wine-deep);opacity:var(--film-fade,0);pointer-events:none}
.hero-title{top:auto;bottom:21%;transform:translateY(var(--title-drift,0px));opacity:var(--title-alpha,1);animation:none}
.hero h1{font-size:clamp(66px,7vw,108px)}
.discover,.motion-control{opacity:var(--title-alpha,1)}
.motion-control{min-width:44px;min-height:44px}
.brand img{width:38px;height:55px;object-fit:contain}
.hero-wordmark{width:min(78vw,1000px);height:auto;margin:auto}
.footer-wordmark{width:min(80vw,900px);height:auto;margin:auto}
.footer-mark{display:inline-block}
.footer-mark img{width:58px;height:84px;object-fit:contain}
.story-portrait img{height:auto;max-height:680px;object-fit:contain;mix-blend-mode:normal;mask-image:linear-gradient(#000 75%,transparent 99%)}
.story-portrait{width:90%;max-width:432px}
.story-copy{color:#30151e}
.story-copy>p:not(.story-opening){text-wrap:pretty;font-weight:500}
.story-copy .story-opening{font-weight:500}
.story-copy>p:not(.story-opening) br{display:none}
.story-opening .dropcap{margin-right:12px}
.welcome-ready .welcome-title span{display:inline-block;opacity:0;transform:translateY(20px);filter:blur(3px);transition:opacity 1s ease var(--word-delay),transform 1s var(--ease) var(--word-delay),filter 1s ease var(--word-delay)}
.welcome-visible .welcome-title span{opacity:1;transform:none;filter:none}
.welcome-ready .welcome-detail,.welcome-ready .flower{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease 700ms,transform 1.1s var(--ease) 700ms}
.welcome-visible .welcome-detail,.welcome-visible .flower{opacity:1;transform:none}
body.intro-open{overflow:hidden}
.intro{position:fixed;inset:0;z-index:200;overflow:hidden;color:#fff;isolation:isolate}
.intro:focus,.hero h1:focus{outline:none}
.intro-paper{position:absolute;inset:0;background:var(--wine-deep);transition:transform 1.1s cubic-bezier(.76,0,.24,1) .35s}
.intro-content{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:38px;padding:70px 24px;transition:opacity .35s ease}
.intro-wordmark{width:min(75vw,420px);height:auto;margin-bottom:12px}
.intro-wordmark,.hero-wordmark,.footer-wordmark,.brand img,.footer-mark img{filter:brightness(0) invert(1)}
.intro-enter{display:flex;flex-direction:column;align-items:center;gap:40px;background:none;border:0;padding:18px 16px;color:#fff}
.intro-art{width:clamp(220px,33vw,340px);max-width:76vw;height:auto;max-height:40svh;object-fit:contain;transition:transform .8s var(--ease)}
.intro-enter:hover .intro-art{transform:scale(1.025)}
.intro-enter span{font-size:11px;letter-spacing:.28em;line-height:1.7;border-bottom:1px solid #bfa2a8;padding-bottom:9px}
.intro-content>p{font-size:11px;letter-spacing:.22em;color:#dfcbd0}
.intro-skip{position:absolute;right:28px;bottom:24px;min-height:44px;border:0;background:none;font-size:11px;letter-spacing:.1em;padding:12px;color:#dfcbd0;z-index:3}
.intro-skip span{margin-left:10px}
.intro-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.intro.opening .intro-content{opacity:0;pointer-events:none}
.intro.opening .intro-paper{transform:translateY(100%)}
.intro.opening .intro-skip{opacity:0}
.motion-paused .welcome-ready *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
main>section{padding-top:clamp(100px,9vw,145px);padding-bottom:clamp(100px,9vw,145px)}
main>.story{padding-bottom:24px}
main>.save-date{padding-top:48px}
footer{padding-top:110px}
.date-collage{gap:26px;align-items:end;max-width:990px;margin-bottom:38px}
.date-photo{height:390px;overflow:hidden;padding-bottom:0}
.date-photo.hands{height:320px}
.date-photo.embrace{height:290px}
.date-photo.couple{background:#e2ded5}
.date-photo img{object-fit:contain;object-position:center bottom!important;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none}
.date-photo.embrace img{object-fit:cover;object-position:50% 64%!important}
.date-photo>span{bottom:-.10em;color:var(--paper);font-size:160px;font-weight:400;line-height:.9;z-index:1;letter-spacing:-.04em;text-shadow:none}
.save-date .calendar-button{margin-top:28px}
.entrance{opacity:.08;translate:0 24px;transition:opacity .95s ease var(--entrance-delay,0ms),translate .95s var(--ease) var(--entrance-delay,0ms)}
.entrance.is-visible{opacity:1;translate:0 0}
.motion-paused .entrance{opacity:1;translate:none;transition:none}
.programme-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12%;max-width:1160px;margin:auto;align-items:start}
.programme-layout .day-title{display:block;position:sticky;top:100px;margin:0;max-width:none}
.programme-layout .day-title h2{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(54px,5.2vw,78px);line-height:1.05;width:100%}
.programme-layout .day-title h2 em{align-self:center;display:block;margin:10px 0}
.programme-layout .day-title h2 span:last-child{align-self:flex-end}
.programme-layout .day-title>p{max-width:none;margin-top:32px;font-size:11px;line-height:2;letter-spacing:.12em}
.programme-layout .day-title .programme-place{font:23px/1.5 var(--serif);letter-spacing:0;margin-top:48px;color:#eadbcb}
.programme-layout .day-title .programme-zone{font-size:11px;letter-spacing:0;margin-top:18px;color:#dfcbd0}
.programme-layout .schedule{position:relative;list-style:none;padding:0 0 0 34px;margin:0;max-width:none}
.schedule:before,.schedule:after{content:"";position:absolute;left:5px;top:24px;bottom:12px;width:1px;background:#ffffff26}
.schedule:after{background:#dfcbb2;transform:scaleY(var(--timeline-progress,0));transform-origin:top;transition:transform .12s linear}
.programme-event{position:relative;padding:0 0 56px}
.programme-event:before{content:"";position:absolute;left:-34px;top:19px;width:11px;height:11px;background:#eadbcb;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S2 15 2 8a5 5 0 0 1 10-1A5 5 0 0 1 22 8c0 7-10 13-10 13Z'/%3E%3C/svg%3E") center/contain no-repeat;z-index:1}
.programme-event time{display:block;font:500 49px/1 var(--serif);font-variant-numeric:tabular-nums}
.programme-event time small{font:11px var(--sans);letter-spacing:.14em;margin-left:8px;color:#dfcbd0}
.programme-event h3{font:500 15px/1.6 var(--sans);margin-top:14px;max-width:390px}
.programme-event p{font-size:12px;line-height:1.8;color:#dfcbd0;margin-top:7px}
.programme-event:last-child{padding-bottom:0}
.programme-reception{margin-top:26px}
main>.countdown{background:#0a0a09;color:#f1eee7;text-align:left;padding:90px max(6%,24px) 120px;min-height:680px}
.countdown-inner{width:min(100%,1000px);margin:auto}
.countdown h2{font:italic 500 clamp(38px,4vw,60px)/1.2 var(--serif);margin:0}
.countdown h2>span{display:block;font:500 11px/1.5 var(--sans);letter-spacing:.24em;color:#a9a69d;margin-bottom:12px}
.countdown h2 em{font-style:italic}
.countdown .clock{display:block;margin-top:30px}
.countdown .clock>div{width:auto}
.countdown .countdown-days{display:flex;align-items:baseline;justify-content:flex-start;gap:16px}
.countdown-days #days{font:800 clamp(170px,23vw,310px)/1.05 'Bodoni Moda',var(--serif);letter-spacing:-.04em;font-optical-sizing:auto;font-variant-numeric:lining-nums tabular-nums}
.countdown .clock small{font:500 11px/1.5 var(--sans);letter-spacing:.2em;color:#a9a69d;margin:0}
.countdown .countdown-time{display:flex;gap:14px;align-items:flex-start;justify-content:flex-start;margin-top:34px}
.countdown-time>div{min-width:46px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.countdown .countdown-time span{font:400 32px/1.2 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.countdown .countdown-time b{display:block;font:400 30px/1.2 var(--sans);color:#34332e;transform:none}
.custom-amp{display:inline-block;width:.85em;height:.95em;background:currentColor;mask:url('assets/custom-ampersand.webp') center/contain no-repeat;-webkit-mask:url('assets/custom-ampersand.webp') center/contain no-repeat;vertical-align:-.08em}
.names-invitation{padding:90px 7% 110px;color:#111}
.names-message{max-width:620px;font:400 18px/1.7 var(--sans)}
.names-heart{display:block;width:22px;height:22px;fill:#4b4a44;margin:36px 0 48px}
.names-invitation h2{font:800 clamp(88px,12vw,170px)/1.06 'Bodoni Moda',var(--serif);letter-spacing:-.04em;text-wrap:nowrap;max-width:1000px}
.names-invitation h2>span{display:block;position:relative;width:max-content}
.names-invitation .names-amp{position:absolute;right:-.75em;top:-.12em;font-size:.55em}
.names-invitation h2>span+span{margin-top:20px}
main>.location{position:relative;isolation:isolate;padding:100px 6%;overflow:hidden;text-align:left;color:#111;background:#efede5}
.location-image{position:absolute;inset:0;z-index:-2;height:100%;width:100%;object-fit:cover;object-position:center;filter:grayscale(1)}
.location:before{content:"";position:absolute;inset:0;z-index:-1;background:#f4f0e5dc}
.location-content{max-width:1180px;margin:auto}
.location h2{text-align:left;margin:0 0 52px;text-wrap:nowrap}
.location h2>span{display:block;font:500 11px/1.5 var(--sans);letter-spacing:.24em;color:#56554e;margin-bottom:30px}
.location h2 em{display:block;font:italic 500 clamp(44px,5vw,72px)/1 var(--serif)}
.location h2 strong{display:block;font:800 clamp(80px,12vw,170px)/1 'Bodoni Moda',var(--serif);letter-spacing:-.04em}
.location-region{font:500 12px/1.8 var(--sans);letter-spacing:.18em;margin-bottom:18px}
.location-address{font:400 17px/1.7 var(--sans);margin-bottom:24px}
.location .text-link{font-size:11px;letter-spacing:.18em}
.reception-location{margin-top:64px;padding-top:32px;border-top:1px solid #615e5540;max-width:540px}
.reception-location h3{font:500 35px/1.2 var(--serif)}
.reception-location p{font:400 14px/1.8 var(--sans);margin:12px 0}
main>.dress{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:left;gap:20px;padding:90px 6%;overflow:hidden}
.dress-copy{position:relative;z-index:1}
.dress h2{font-size:clamp(50px,6vw,84px);max-width:600px}
.dress-copy>p{font-size:14px;line-height:1.7;margin:25px 0 38px}
.dress .swatches{justify-content:flex-start;gap:24px;flex-wrap:wrap}
.satin-flower{width:115%;height:auto;max-width:none;filter:drop-shadow(0 18px 24px #3a151b25);rotate:-12deg;transform:perspective(1000px) rotateY(-8deg)}
.wedding-footer{background:#0a0a09;color:#eeebe3;padding:100px 24px 30px;text-align:center}
.wedding-footer .footer-names{font:500 64px/1 var(--serif);letter-spacing:-.02em}
.footer-names>span{display:block;font-size:1em;font-style:normal}
.footer-names .footer-amp{font-size:24px;line-height:1.15;margin:2px auto}
.wedding-footer>p{font-size:11px;line-height:2.2;letter-spacing:.24em;margin:48px auto 0;color:#bcb4a6}
.wedding-footer>p>span{display:block;margin:0}
.wedding-footer .farewell{font:italic 500 27px/1.4 var(--serif);margin:62px auto 68px}
.footer-heart{display:block;width:34px;height:34px;fill:#dedbd3;margin:auto}
.footer-initials{display:table;margin:36px auto 0;padding:12px;font:400 11px var(--sans);letter-spacing:.32em;color:#bcb4a6}
.footer-initials>span{margin:0 10px}
@media(max-width:760px){
  .names-invitation{padding:64px 24px 90px}
  .names-message{font-size:16px}
  .names-heart{margin:30px 0 44px}
  .names-invitation h2{font-size:21vw}
  .names-invitation h2>span+span{font-size:18vw;margin-top:18px}
  main>.location{padding:80px 22px 70px}
  .location h2{margin-bottom:42px}
  .location h2 strong{font-size:18vw}
  .location h2 em{font-size:42px}
  main>.dress{display:block;padding:78px 26px 0;min-height:700px}
  .dress h2{font-size:49px;max-width:340px}
  .dress-copy>p{font-size:13px;margin:22px 0 30px}
  .dress .swatches{gap:20px;flex-wrap:nowrap;justify-content:space-between}
  .satin-flower{width:115%;margin:48px -12% -30px 0}
  .wedding-footer .footer-names{font-size:54px}
  .wedding-footer .farewell{font-size:25px}
  main>.countdown{padding:72px 26px 110px;min-height:650px}
  .countdown .clock{margin-top:30px}
  .countdown .countdown-days{justify-content:space-between;gap:4px}
  .countdown-days #days{font-size:clamp(175px,56vw,270px)}
  .countdown .countdown-time{margin-top:34px;gap:10px}
}
main>.portrait-interlude{position:relative;height:100svh;min-height:480px;padding:0;overflow:hidden;isolation:isolate;background:#222}
.interlude-photo{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:50% 53%;transform:translateY(var(--portrait-drift,0px))}
.interlude-shade{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.interlude-monogram{position:absolute;left:50%;top:50%;width:clamp(140px,18vw,240px);height:auto;max-height:40svh;object-fit:contain;filter:brightness(0) invert(1);transform:translate(-50%,-50%)}
.portrait-interlude.reveal-ready .interlude-monogram{opacity:0;transform:translate(-50%,calc(-50% + 18px));transition:opacity 1.4s ease .15s,transform 1.4s var(--ease) .15s}
.portrait-interlude.reveal-ready.is-visible .interlude-monogram{opacity:1;transform:translate(-50%,-50%)}
.motion-paused .portrait-interlude .interlude-monogram{opacity:1;transform:translate(-50%,-50%);transition:none}
.motion-paused .interlude-photo{transform:none}
.hero-sequence .welcome{position:relative;z-index:1;margin-top:25svh;min-height:75svh;padding:90px 8%;background:transparent;display:flex;flex-direction:column;justify-content:center}
.hero-sequence .welcome-title{margin:0 auto}
.hero-sequence .welcome .flower{flex-shrink:0;margin:0 auto}
@media(max-width:760px){
  .hero-photo img,.hero-photo video{object-position:50% 50%}
  .hero-title{top:auto;bottom:22%;padding:0 14px}
  .hero h1{font-size:clamp(41px,11.6vw,86px)}
  .hero-sequence .welcome{padding:60px 7%;min-height:75svh}
  .brand img{width:32px;height:46px}
  .hero-wordmark{width:92%;max-width:600px}
  .story-portrait{width:84.6%;max-width:351px}
  .story-portrait img{height:auto;max-height:none;object-fit:contain}
  .story-copy{padding:0 10px}
  .story-copy>p:not(.story-opening){max-width:350px;margin:20px auto 0}
  .intro-content{gap:25px}
  .intro-enter{gap:35px}
  main>section{padding-top:90px;padding-bottom:90px}
  main>.story{padding-bottom:20px}
  main>.save-date{padding-top:35px}
  footer{padding-top:90px}
  .date-collage{gap:12px;margin-bottom:28px}
  .date-photo{height:clamp(175px,48vw,260px);padding-bottom:0}
  .date-photo.hands{height:clamp(150px,43vw,230px)}
  .date-photo.embrace{height:clamp(130px,39vw,220px)}
  .date-photo>span{font-size:clamp(80px,23vw,140px);bottom:-.10em}
  .programme-layout{display:block}
  .programme-layout .day-title{position:relative;top:auto}
  .programme-layout .day-title h2{font-size:48px}
  .programme-layout .day-title h2 em{margin:0}
  .programme-layout .day-title>p{font-size:10px;letter-spacing:.08em;margin-top:28px}
  .programme-layout .day-title .programme-place{font-size:21px;margin-top:28px}
  .programme-layout .day-title .programme-zone{margin-top:12px}
  .programme-layout .schedule{margin-top:55px;padding-left:30px}
  .programme-event{padding-bottom:44px}
  .programme-event:before{left:-30px;top:17px}
  .programme-event time{font-size:43px}
  .programme-event h3{font-size:14px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .portrait-interlude.reveal-ready .interlude-monogram{opacity:1;transform:translate(-50%,-50%);transition:none}
  .interlude-photo{transform:none}
  .hero-sequence .hero{position:relative}
  .hero-sequence .welcome{margin-top:0;min-height:55svh}
  .hero-photo{transform:none}
  .welcome-ready .welcome-title span,.welcome-ready .welcome-detail,.welcome-ready .flower{opacity:1;transform:none;filter:none;transition:none}
  .entrance{opacity:1;translate:none;transition:none}
}
.names-flower{display:block;width:24px;height:24px;margin:36px 0 48px;--swatch:#4b4a44}
.names-invitation h2>span:first-child{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:.16em}
.names-invitation .names-amp{position:static;flex:none;font-size:.48em;line-height:1.2;margin-top:.04em;margin-right:.03em}
.programme-event h3{text-transform:uppercase;letter-spacing:.025em}
.footer-flower{display:block;width:36px;height:36px;margin:auto;--swatch:#dedbd3}
main>.portrait-interlude.countdown{height:auto;min-height:100svh;padding:90px max(6%,24px) 110px;display:flex;align-items:center;color:#f1eee7;text-align:left}
.portrait-interlude.countdown .interlude-shade{background:rgba(0,0,0,.58)}
.portrait-interlude .countdown-inner{position:relative;z-index:1}
.portrait-interlude.countdown h2>span,.portrait-interlude.countdown .clock small{color:#e1ddd3}
.portrait-interlude.countdown .countdown-time b{color:#bcb6aa;align-self:flex-start}
.portrait-interlude.reveal-ready .countdown-inner{opacity:.08;transform:translateY(24px);transition:opacity 1.4s ease .15s,transform 1.4s var(--ease) .15s}
.portrait-interlude.reveal-ready.is-visible .countdown-inner,.motion-paused .portrait-interlude .countdown-inner{opacity:1;transform:none}
.music-control{position:fixed;right:18px;bottom:18px;z-index:80;width:44px;height:44px;display:grid;place-items:center;border:1px solid #c4b9ab;background:#f3ede4;color:#30151e;border-radius:50%;cursor:pointer;box-shadow:0 3px 12px #0001}
.intro-open .music-control{visibility:hidden}
.music-control:hover{background:#e9dcc6}
.music-control:focus-visible{outline:2px solid #671c30;outline-offset:4px}
.music-bars{display:flex;align-items:center;gap:3px;height:18px}
.music-bars i{display:block;width:1px;height:9px;background:currentColor;transform-origin:center}
.music-bars i:nth-child(2){height:15px;animation-delay:-.3s}
.music-bars i:nth-child(3){height:12px;animation-delay:-.55s}
.music-bars i:nth-child(4){height:7px;animation-delay:-.15s}
.music-control.is-playing i{animation:music-pulse .8s ease-in-out infinite alternate}
@keyframes music-pulse{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.submit:disabled{opacity:.6;cursor:wait}
@media(max-width:760px){
 .names-flower{margin:30px 0 44px}
 main>.portrait-interlude.countdown{padding:72px 26px 90px;min-height:max(680px,100svh)}
}
@media(prefers-reduced-motion:reduce){.portrait-interlude.reveal-ready .countdown-inner{opacity:1;transform:none;transition:none}.music-control.is-playing i{animation:none}}

/* Keep editing controls stationary when the keyboard changes the viewport. */
#rsvp-form{opacity:1;translate:none;transform:none;transition:none}
#rsvp-form .field input{font-size:16px}
html:has(#rsvp-form :focus){scroll-behavior:auto}
