@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Great Vibes;src:url('/assets/fonts/great-vibes.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Mussica Swash';src:url('/assets/fonts/mussica-swash.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#f9f8f3;--ink:#47576a;--blue:#9eb8cf;--blue-dark:#6c8baa;--gold:#a49571;--serif:'Cormorant Garamond',Georgia,serif;--script:'Great Vibes',cursive;--names:'Mussica Swash','Great Vibes',cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;color:var(--ink);background:#eaece7;font-family:var(--serif);font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased}body.invitation-closed{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--blue-dark);outline-offset:7px}a{color:inherit}button[hidden],[hidden]{display:none!important}button{border:0}p,h1,h2,h3{margin:0}main{max-width:680px;margin:auto;background:var(--paper);overflow:clip;box-shadow:0 0 90px #586b7412}.desktop-caption{position:fixed;left:calc((100vw - 680px)/4);top:50%;display:flex;align-items:center;gap:28px;writing-mode:vertical-rl;transform:translate(-50%,-50%);font:9px/1.5 var(--serif);letter-spacing:3px;color:#7c8786}.desktop-caption i{font:20px var(--serif);letter-spacing:1px}.desktop-caption:after{content:'';height:70px;width:1px;background:#a8aaa040}
.hero{position:relative;height:100svh;min-height:680px;max-height:1100px;text-align:center;isolation:isolate}.hero-art{position:absolute;inset:0;z-index:-1;background:url('/assets/terrace.webp') center/cover}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(#f9f8f20a 12%,#eff3f444 35%,transparent 70%,#f9f8f3 100%)}.hero-copy{position:absolute;top:14%;left:5%;width:90%;opacity:0;transform:translateY(20px);transition:opacity 1.7s ease,transform 1.7s ease}.invitation-open .hero-copy{opacity:1;transform:translateY(0)}.eyebrow{font:9px/1.8 var(--serif);font-weight:400;letter-spacing:2.8px;color:#7c8b96}.tiny-sun{display:block;color:#a5915f;font-size:35px;line-height:1;margin:30px auto 20px}.hero-prelude{font-size:23px;font-style:italic;color:#56667b;letter-spacing:.3px}.hero h1{font-family:var(--names);font-weight:400;font-size:clamp(70px,11vw,96px);line-height:1.13;letter-spacing:1px;margin:20px 0 15px;text-shadow:0 1px 6px #f0f4f8c9;display:flex;justify-content:center;align-items:baseline;gap:19px}.hero h1 em{font-size:.52em;color:#9c926e;font-style:normal}.hero-forever{font:italic 25px var(--serif);color:#56667b}.hero-rule{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);font-size:19px;margin:22px auto 14px}.hero-rule span{width:36px;height:1px;background:#9e9c8866}.hero-subtitle{font-size:18px;line-height:1.4;color:#67788b;letter-spacing:.2px}.scroll-invitation{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:13px;text-decoration:none;font:8px var(--serif);letter-spacing:2.5px;white-space:nowrap}.scroll-line{width:1px;height:35px;background:linear-gradient(#798a96,#798a9600);animation:scroll-breathe 2.5s infinite}@keyframes scroll-breathe{50%{transform:translateY(6px);opacity:.4}}.section{text-align:center;position:relative;padding:85px 45px}.script-heading{font:400 53px/1.2 var(--script);color:#4d647c;margin:15px 0 14px}.section-intro{font-size:22px;line-height:1.45;color:#7b8791}.section-ornament{color:var(--gold);font-size:30px;margin-bottom:25px}.date-section{padding-top:55px;padding-bottom:90px}.date-section:before,.closing-section:before{content:'';position:absolute;inset:0;pointer-events:none;background:url('/assets/embossed-paper.webp') center/100% 100%;opacity:.18}.scratch-date{display:flex;align-items:center;justify-content:center;gap:9px;margin:35px auto 21px;position:relative;max-width:460px}.scratch-cell{width:32%;height:116px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.scratch-cell canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:2px;touch-action:pan-y;cursor:crosshair;transition:opacity .7s}.scratch-cell canvas.scratching{touch-action:none}.scratch-cell.complete canvas{opacity:0;pointer-events:none}.date-value{font-size:43px;line-height:1.1;color:#506b86}.date-month{font-style:italic;font-size:29px}.date-unit{font:8px var(--serif);letter-spacing:2px;color:#8b949c}.date-dot{color:#9c9d91}.text-button{position:relative;background:none;border:0;color:#84909a;font:italic 16px/1.5 var(--serif);padding:10px 8px}.text-button:hover{color:#4f6680}.scratch-hand{color:#9faebb;margin-right:5px}.outline-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:18px;margin:22px auto 0;text-decoration:none;font:9px/1.5 var(--serif);letter-spacing:2px;border:1px solid #acb6b571;padding:17px 25px;min-height:48px;transition:background .3s,color .3s}.outline-button:hover{background:#e8edf0;color:#3d5773}.outline-button span{font-size:18px;line-height:12px}.countdown{margin:55px auto 0;padding-top:30px;position:relative;border-top:1px solid #d7d9d165;max-width:330px}.countdown>p{font:italic 21px var(--serif);margin-bottom:23px;color:#87909a}.countdown-values{display:flex;justify-content:center;gap:17px;align-items:flex-start}.countdown-values>div{min-width:41px}.countdown-values span{display:block;font-size:31px;line-height:1.2;font-variant-numeric:tabular-nums}.countdown-values small{font:7px var(--serif);letter-spacing:1.8px;color:#8c98a0}.countdown-values i{font:20px var(--serif);opacity:.4;margin-top:3px}.letter-section{padding-top:45px;padding-bottom:90px;background:linear-gradient(var(--paper),#f1f5f7 90%,var(--paper))}.intertwined-hearts{font-size:40px;line-height:1.3;color:#93a8b8;transform:rotate(-15deg);margin:30px 0 45px}.intertwined-hearts span{display:inline-block;transform:translate(-15px,6px) rotate(26deg);font-size:33px}.letter-envelope{--letter-offset:300px;overflow:clip;position:relative;padding:40px 14px 155px;margin:20px auto 0;max-width:480px;isolation:isolate}.letter-back{position:absolute;left:0;right:0;bottom:0;height:420px;background:#9eb7ce;clip-path:polygon(0 29%,50% 0,100% 29%,100% 100%,0 100%);z-index:-1}.invitation-letter{position:relative;background:#fffef9;padding:37px 30px 30px;box-shadow:0 0 18px #465f7310,0 3px 8px #465f7310;border:1px solid #eeeee5;transform:translate3d(0,calc(var(--letter-offset) * .20),0);z-index:1}.invitation-letter:before{content:'';position:absolute;inset:9px;border:1px solid #c4c8be70;pointer-events:none}.letter-bismillah{font:22px Georgia,serif;color:#879482;line-height:1.8;margin-bottom:25px}.invitation-letter h3{font:400 28px var(--script);color:#62778a;margin-bottom:22px}.invitation-letter>p:not(.letter-bismillah){font-size:20px;line-height:1.55;color:#687686}.invitation-letter em{color:#758568;font-size:23px}.letter-divider{color:#b8ac8e;margin:18px auto}.letter-signoff{margin-top:25px}.letter-signoff>span{display:block;font:31px var(--script);color:#678097;padding:10px 0 13px}.letter-signoff small{font:25px var(--serif)}.letter-front{position:absolute;left:0;right:0;bottom:0;height:220px;clip-path:polygon(0 0,50% 43%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#a2bcd3,#90adc8);z-index:2;padding-top:105px;filter:drop-shadow(0 -2px 3px #7a92aa22)}.letter-front:before,.letter-front:after{content:'';position:absolute;inset:0;background:#ffffff08;clip-path:polygon(0 0,50% 60%,0 100%)}.letter-front:after{transform:scaleX(-1);background:#00000003}.letter-front>span{display:block;font:33px var(--script);color:#f0f1e8;letter-spacing:5px}.letter-front>span i{font-size:22px;letter-spacing:0}.letter-front small{display:block;font:7px var(--serif);letter-spacing:2px;color:#edf2f5;margin-top:5px}.celebration-section{padding-top:50px;padding-bottom:60px}.event-timeline{position:relative;padding-top:20px;margin:10px auto 0;max-width:400px}.event-timeline:before{content:'';position:absolute;top:67px;bottom:85px;left:50%;width:1px;background:#aebbc780}.event{position:relative;margin:15px 0;padding:15px 0 40px}.event-icon{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 auto 20px;background:var(--paper);border:1px solid #c0c7c4;border-radius:50%;font-size:31px;color:#94a5b6;z-index:1}.event>.eyebrow,.event>h3,.event>p,.event-caption{position:relative;background:var(--paper)}.event h3{font:36px var(--script);margin:12px 0 8px}.event>p:not(.eyebrow){font-size:23px;line-height:1.5}.event-caption{display:block;font:italic 17px var(--serif);color:#8d959a;padding:8px 0}.venue-section{padding:80px 45px 100px;isolation:isolate;min-height:640px}.venue-art{position:absolute;inset:0;z-index:-1;background:linear-gradient(#f9f8f3 1%,#f9f8f3b5 20%,#f9f8f3bb 80%,#f9f8f3 100%),url('/assets/terrace.webp') center 80%/cover;opacity:.8}.venue-arch{border:1px solid #a7b3b980;border-radius:180px 180px 3px 3px;max-width:370px;margin:28px auto 0;padding:43px 20px 35px;background:#fcfbf5b3;box-shadow:0 5px 30px #5b759308;backdrop-filter:blur(5px)}.venue-arch>span{font-size:38px;color:#a49774}.venue-arch h3{font:36px var(--serif);color:#4d637b;line-height:1.2;margin:12px 0 10px}.venue-arch p{font-size:21px;color:#778794}.venue-rule{height:1px;width:38px;background:#b4b5a8;margin:23px auto}.venue-arch .venue-time{font-style:italic;font-size:18px;margin-top:5px}.venue-arch .outline-button{margin-top:25px}.closing-section{padding-top:55px;padding-bottom:0}.closing-section .tiny-sun{margin-bottom:32px}.closing-section h2{max-width:400px;margin:0 auto 32px;font-size:48px}.closing-section>p:not(.eyebrow):not(.closing-love){font-size:21px;line-height:1.65;max-width:440px;margin:0 auto 20px;position:relative;color:#75818b}.closing-love{font-size:20px;font-style:italic;margin:35px 0}.closing-love>span{display:block;font:39px var(--script);margin-top:12px;color:#62798e}.footer-monogram{font:64px var(--script);color:#a79a73;letter-spacing:-9px;margin:55px 0 18px}.footer-monogram>span{font-size:32px}.closing-section>.text-button{margin:24px 0 45px;font-size:17px}footer{position:relative;border-top:1px solid #c7cbc65e;padding:24px 0 30px;font:italic 14px var(--serif);color:#9b9e95}footer>span{display:block;margin-top:12px;font:8px var(--serif);letter-spacing:3px}.music-toggle{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));right:max(22px,calc((100vw - 680px)/2 + 20px));z-index:20;display:flex;align-items:center;gap:9px;padding:12px 13px;border:1px solid #a8b6c055;border-radius:28px;background:#f8f9f3e6;backdrop-filter:blur(12px);box-shadow:0 2px 15px #3f566410}.music-label{font:7px var(--serif);letter-spacing:1.2px}.music-bars{display:flex;align-items:center;height:17px;gap:3px}.music-bars i{display:block;width:2px;height:5px;border-radius:2px;background:#8aa0b3}.music-toggle[aria-pressed=true] .music-bars i{animation:music-bar 1.3s ease-in-out infinite}.music-bars i:nth-child(2){height:13px;animation-delay:-.7s!important}.music-bars i:nth-child(3){height:9px;animation-delay:-.3s!important}.music-bars i:nth-child(4){animation-delay:-1s!important}@keyframes music-bar{50%{height:4px}100%,0%{height:15px}}.reveal{opacity:0;translate:0 20px;transition:opacity 1.1s ease,translate 1.1s cubic-bezier(.2,.65,.3,1)}.reveal.visible{opacity:1;translate:0 0}.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}.petal{position:absolute;top:-30px;width:9px;height:15px;border-radius:80% 0 80% 10%;background:#d1c4a2;opacity:0;animation:petal-fall 5s ease-in forwards}@keyframes petal-fall{5%{opacity:.7}95%{opacity:.5}100%{transform:translate3d(var(--drift),105svh,0) rotate(var(--spin));opacity:0}}.noscript-message{position:fixed;inset:0;z-index:100;background:var(--paper);padding:20vh 10%;font-size:24px;text-align:center}
@media(min-width:1000px){.opening{box-shadow:0 0 80px #586b741a}.hero-copy{top:13%}.hero h1{font-size:100px}.gate-half{background-size:200% 100%}.envelope-heading{top:17%}}
@media(max-width:760px){.desktop-caption{display:none}.opening,main{max-width:100%}.music-toggle{right:17px}.hero{min-height:640px;max-height:none}.hero-copy{top:15%}.hero h1{font-size:clamp(65px,15vw,98px);gap:14px}.hero-copy>.eyebrow{font-size:7px;letter-spacing:2px}.hero-prelude{font-size:21px}.hero-forever{font-size:23px}.hero-subtitle{font-size:18px}.hero .tiny-sun{font-size:30px;margin-top:26px;margin-bottom:16px}.hero-rule{margin-top:18px}.section{padding-left:27px;padding-right:27px}.script-heading{font-size:46px}.section-intro{font-size:21px}.scratch-date{gap:6px;max-width:380px}.scratch-cell{height:104px}.date-value{font-size:39px}.date-month{font-size:26px}.text-button{font-size:15px}.letter-section{padding-left:20px;padding-right:20px}.letter-envelope{padding-left:13px;padding-right:13px}.invitation-letter{padding:32px 24px 28px}.invitation-letter h3{font-size:27px}.invitation-letter>p:not(.letter-bismillah){font-size:19px}.letter-front{height:200px;padding-top:93px}.closing-section>p:not(.eyebrow):not(.closing-love){font-size:20px}.closing-section h2{font-size:43px}.wax-seal{width:105px;height:105px}.wax-inner{width:85px;height:85px}.monogram{font-size:47px}.envelope-heading p{font-size:46px}.open-hint{top:63%}.gate-half{background-size:200% auto}.gate-ribbon{top:41%}}
@media(max-width:370px){.hero h1{font-size:62px}.hero-copy{top:14%}.hero-copy>.eyebrow{font-size:6px}.section{padding-left:20px;padding-right:20px}.script-heading{font-size:41px}.date-month{font-size:23px}.invitation-letter{padding:28px 20px}.invitation-letter>p:not(.letter-bismillah){font-size:18px}.invitation-letter h3{font-size:24px}.letter-section{padding-left:13px;padding-right:13px}.music-label{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;translate:0 0}.invitation-letter{transform:none}.hero-copy{transform:none}}

.letter-signoff>span,.closing-love>span{font-family:var(--names);font-style:normal}

/* Give the supplied swash capitals room on narrow screens. */
@media(max-width:760px){.hero h1{font-size:clamp(42px,13vw,82px);gap:10px;letter-spacing:0}}

/* Match the initials to the couple's Mussica Swash names. */
.letter-front>span,.footer-monogram{font-family:var(--names);font-style:normal;letter-spacing:1px}
.letter-front>span i{font-family:inherit;font-style:normal}

/* The envelope stays in view while scrolling extracts the paper. */
.letter-scroll{--letter-scene-height:min(calc(100svh - 32px),calc(clamp(200px,30svh,280px) + 220px));--letter-pin-top:max(16px,calc(100svh - var(--letter-scene-height) - 24px));position:relative;height:calc(var(--letter-scene-height) + var(--letter-scroll-distance,900px));margin:20px auto 0;max-width:480px}
.letter-envelope{position:sticky;top:var(--letter-pin-top);height:var(--letter-scene-height);max-width:none;margin:0;padding:0;overflow:visible;clip-path:inset(calc(16px - var(--letter-pin-top)) 0 0);isolation:isolate}
.invitation-letter{position:absolute;top:0;left:14px;right:14px;transform:translate3d(0,var(--letter-offset,500px),0)}
.letter-back{bottom:0;height:calc(clamp(200px,30svh,280px) + 185px);z-index:0;transform:none}
.letter-front{bottom:0;height:clamp(200px,30svh,280px);padding-top:calc(clamp(200px,30svh,280px) * .52);transform:none}
@media(prefers-reduced-motion:reduce){
 .letter-scroll{height:auto}
 .letter-envelope{position:relative;top:auto;height:auto;padding:35px 14px 240px;overflow:visible;clip-path:none}
 .invitation-letter{position:relative;top:auto;left:auto;right:auto;transform:none}
}

/* Reveal the blessing first, then the story, names, and invitation details. */
#home .hero-copy{opacity:1;transform:none;transition:none}
#home .hero-copy>*,#home h1>*,#home .scroll-invitation{opacity:0}
#home .hero-copy>h1{opacity:1}
#home .hero-copy>.eyebrow{margin-bottom:30px;font-size:13px;font-weight:700;letter-spacing:2px;text-wrap:balance}
@media(max-width:760px){#home .hero-copy>.eyebrow{font-size:12px;letter-spacing:1.5px}}
#home .hero-forever{margin-top:10px}
#home h1{margin-top:36px;margin-bottom:0;padding-inline:8px}
#home .hero-subtitle{margin-top:42px}
/* Wait for the envelope's 1.1s exit fade before revealing the first line. */
.invitation-open #home .hero-copy>*,.invitation-open #home h1>*,.invitation-open #home .scroll-invitation{animation:hero-text-arrive 1.1s cubic-bezier(.22,1,.36,1) both;animation-delay:8.4s}
.invitation-open #home .hero-copy>.eyebrow{animation-delay:1.1s}
.invitation-open #home .hero-prelude{animation-delay:2.25s}
.invitation-open #home .hero-forever{animation-delay:3.55s}
.invitation-open #home .hero-copy>h1{animation:none;opacity:1}
.invitation-open #home h1>span:first-child{animation-delay:5s}
.invitation-open #home h1>em{animation-delay:6.1s}
.invitation-open #home h1>span:last-child{animation-delay:6.9s}
.invitation-open #home .scroll-invitation{animation-name:hero-text-opacity;animation-delay:8.9s}
/* Swashes extend outside the font's line box. Give each animated name room,
   and avoid blur filters that crop those strokes on mobile Safari. */
#home h1>*{padding-block:.3em .5em;margin-block:-.3em -.5em;overflow:visible}
.invitation-open #home h1>*{animation-name:hero-name-arrive}
@keyframes hero-name-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

@keyframes hero-text-arrive{from{opacity:0;translate:0 14px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes hero-text-opacity{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .invitation-open #home .hero-copy>*,.invitation-open #home h1>*,.invitation-open #home .scroll-invitation{animation:none;opacity:1;translate:none;filter:none}
}

/* Family names belong to the formal invitation, paired with each partner. */
.letter-families{position:relative;margin:20px auto 10px;text-align:center}
.family-name{font:400 37px/1.35 var(--names);color:#678097;margin-bottom:7px}
.family-parents{font:400 18px/1.5 var(--serif);color:#687686;text-wrap:balance}
.family-ampersand{display:block;font:400 27px/1.3 var(--names);color:var(--gold);margin:18px auto}
@media(max-width:370px){.family-name{font-size:34px}.family-parents{font-size:17px}}

/* Let the revealed date cards settle before showing the calendar action. */
#calendar-link.reveal.visible{transition-delay:.8s}

#reveal-date{display:block;margin:20px auto 0}
#reveal-date:disabled{cursor:default}

.closing-section{padding-bottom:45px}

.closing-tagline{position:relative;margin:24px auto 0;color:#75818b;font:italic 21px/1.6 var(--serif)}
.closing-tagline .closing-hashtag{margin-top:8px;color:#8b805f;font-style:normal;font-size:18px;letter-spacing:1px}

/* Keep the music control available during the envelope opening too. */
.music-toggle{z-index:35}