:root{--wine:#900000;--paper:#fff;--ink:#422a30;--font-body:Arial,'Helvetica Neue',system-ui,sans-serif;--font-script:'Monotype Corsiva','URW Chancery L','Palatino Linotype',Georgia,serif;--body-tracking:.035em}
body{font-family:var(--font-body);letter-spacing:var(--body-tracking)}
.script{font-family:var(--font-script);font-style:italic;letter-spacing:0}
.envelope-hint{font-family:var(--font-body);letter-spacing:var(--body-tracking)}
.paper{background-image:none}
.hero{height:700px;min-height:700px;max-height:none}
.portrait-frame{position:absolute;inset:0;overflow:hidden}
.portrait-frame .portrait{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hero .hero-shade{background:linear-gradient(180deg,transparent 30%,#44141900 40%,#44141988 100%)}
.hero .hero-title{position:absolute;top:30px;left:20px;right:20px;z-index:2;margin:0;font:14px/1.5 var(--font-body);letter-spacing:.08em}
.hero-content{width:min(100%,560px);max-width:100%;align-self:end;padding:0 28px 170px}
.hero h1{font-family:var(--font-script);font-size:clamp(44px,6vw,70px);font-style:italic;letter-spacing:0;line-height:1.05;font-weight:400;margin:0;max-width:100%;overflow-wrap:anywhere}
.name-part{display:block;width:max-content;max-width:100%}
.name-part--first{margin-left:0;margin-right:auto}
.name-part--second{margin-left:auto;margin-right:0}
.hero .hero-script{font-size:28px;margin:0 auto 24px}
.scroll-link{margin-top:35px;flex-direction:row;align-items:center;justify-content:center;gap:16px;letter-spacing:.05em;font-size:10px}
.scroll-link b{font-size:32px;font-weight:400}
.welcome{padding:205px 24px 65px}
.welcome #greeting{white-space:pre-line;font-size:clamp(30px,4vw,48px);margin:0 auto 38px;max-width:650px;color:#7c1c26}
.welcome .prose{font-size:17px;line-height:1.85;max-width:500px;white-space:pre-line;text-transform:uppercase;margin:24px auto}
.welcome .invitation-intro{margin-bottom:24px}
.welcome .invitation-date{font-size:clamp(28px,4vw,42px);letter-spacing:.16em;color:#7c1c26;margin:12px auto}
.photo-frame{position:relative;width:min(100%,560px);margin:0 auto;overflow:hidden;isolation:isolate}
.memory-section .photo-frame>img{display:block;width:100%;margin:0}
.photo-frame .photo-tear{left:-1px;right:-1px;width:auto;transform:none;--tear-mask:linear-gradient(#000 0 0) top/100% 55% no-repeat,var(--tear-image) center/130% 100% no-repeat}
.photo-frame .photo-tear.tear-bottom{transform:rotate(180deg)}
.map-open{display:block;width:fit-content;max-width:100%;margin:0 auto 20px;color:inherit;font:12px/1.5 var(--font-body);text-underline-offset:4px}
.date-section{padding:45px 24px 20px}
.calendar-wrap{max-width:330px;margin:0 auto}
.calendar-wrap #month{font-size:clamp(38px,5vw,56px);margin:0 auto 40px;text-transform:capitalize;letter-spacing:0}
.calendar{font-size:18px}.calendar th{height:36px;font-size:11px}.calendar td{height:46px}
.calendar .selected{width:42px;height:42px;background:#fff;color:var(--wine);border:0}
.full-date{font-size:36px;letter-spacing:.14em;margin:36px auto 14px}
.schedule{display:block;margin:10px auto;font:13px/1.7 var(--font-body);text-transform:uppercase}
.schedule span{display:inline;font:inherit;letter-spacing:0}.schedule strong{font:inherit}
#timezone{font-size:10px;margin:18px auto 0}
.venue{padding:40px 24px 45px}
.venue .venue-lead{white-space:pre-line;text-transform:uppercase;font-size:14px;line-height:1.6;margin:0 auto 10px}
.venue #venue-name{font-size:36px;margin:10px auto 22px}
.venue #address{max-width:330px;font-size:14px;text-transform:uppercase;margin:0 auto 22px}
.venue .map-placeholder,.venue iframe{width:min(100%,560px);height:260px;margin:0 auto 18px;border:0}
.venue .map-placeholder{color:#735f56}
.venue .button{background:#fff;color:var(--wine);border:0;min-height:48px;padding:10px 24px;max-width:160px;font:12px/1.5 var(--font-body);letter-spacing:0;text-transform:uppercase}
.countdown-section{padding:32px 24px 40px;min-height:620px;background:#321d1d}
.countdown-section>.script{font-size:40px;max-width:280px;white-space:normal;margin:0 auto 40px}
.countdown{display:flex;flex-direction:column;align-items:center;gap:25px;margin:0 auto}
.countdown strong{font-size:44px;line-height:1.1}.countdown span{font:12px/1.5 var(--font-body);letter-spacing:0;text-transform:uppercase}
.rsvp{padding:38px 24px 48px}
.rsvp>.script{font-size:46px;white-space:pre-line;margin:0 auto 42px}
.rsvp .prose{max-width:300px;font-size:14px;line-height:1.6;text-transform:uppercase;margin:0 auto 28px}
form{max-width:300px;margin:0 auto}
.demo-note{font-size:11px;line-height:1.5;margin:0 0 25px;padding:8px 10px}
.fields{grid-template-columns:1fr;gap:23px;margin:0}
.fields label,fieldset legend{font:15px/1.5 var(--font-body);text-transform:uppercase}
.rsvp input:not([type=radio]){height:45px;padding:10px 14px;background:#fff;border:1px solid #fff;font:16px Arial,sans-serif;margin-top:7px}
.rsvp fieldset{margin:25px 0 22px}.rsvp fieldset legend{margin-bottom:5px}
#choice-hint{font:11px/1.5 var(--font-body);text-transform:uppercase;margin:0 0 10px}
.choice{font:12px/1.5 var(--font-body);text-transform:uppercase;padding:7px 0;display:flex;gap:8px;align-items:center}
.choice input[type=radio]{appearance:none;margin:0;flex-shrink:0;width:18px;height:18px;border:1.5px solid #d8a0a0;border-radius:50%;background:transparent;accent-color:#fff}
.choice input[type=radio]:checked{background:radial-gradient(circle,#fff 0 4px,transparent 5px)}
.rsvp .button{display:flex;margin:0 auto;background:#fff;color:var(--wine);min-height:50px;padding:12px 25px;border:0;font:12px var(--font-body);text-transform:uppercase;letter-spacing:0}
.family-note{max-width:285px;margin:35px auto 0;font-size:13px;line-height:1.5;text-transform:uppercase}
footer.paper{padding:45px 24px 90px}
footer .farewell{font-size:42px;margin:0 auto 25px}
footer #closing{max-width:350px;margin:0 auto 18px;font-size:14px;text-transform:uppercase;line-height:1.6}
.contact{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font:13px var(--font-body);text-transform:uppercase}
.contact svg{width:42px;height:42px;color:#fff;background:var(--wine);border-radius:50%;padding:7px;overflow:visible}
.section-separator{border:0;height:1px;width:80px;max-width:25%;margin:26px auto;background:currentColor;opacity:.3}
.contact{min-height:52px;padding:4px 10px;border-radius:32px;font-family:var(--font-body);font-size:15px;text-transform:none;letter-spacing:.04em}
.contact[aria-disabled=true]{opacity:.5;cursor:default}
.contact[href]:hover{background:#9000000a}
.countdown-backdrop{filter:brightness(.48);object-position:center}
.music-icon .icon-play,.music-icon .icon-pause{display:block;transition:opacity var(--icon-fade-ms,300ms) ease}
.icon-play{opacity:1}.icon-pause{opacity:0}
#music[aria-pressed=true] .icon-play{display:block;opacity:0}
#music[aria-pressed=true] .icon-pause{display:block;opacity:1}
@media(max-width:639px){
 .hero{height:740px;min-height:740px;max-height:none}
 .hero-content{padding:0 30px 195px}
 .hero h1{font-size:clamp(45px,12vw,62px);line-height:1.03}
 .hero .hero-title{font-size:12px;top:35px;letter-spacing:.03em}
 .portrait-frame .portrait{object-position:50% 25%}
 .welcome{padding-top:200px;padding-bottom:45px}
 .welcome #greeting{font-size:32px;margin-bottom:32px}
 .welcome .prose{font-size:14px;line-height:1.8;max-width:300px}
 .welcome .invitation-date{font-size:29px}
 .calendar-wrap #month{font-size:42px}
 .full-date{font-size:30px}
 .venue #venue-name{font-size:31px}
 .venue .map-placeholder,.venue iframe{height:230px}
}
@media(prefers-reduced-motion:reduce){.music-icon .icon-play,.music-icon .icon-pause{transition:none}}
button,input,form label,legend,.choice,.schedule,.countdown span,.venue .button,.rsvp .button{letter-spacing:var(--body-tracking)}