:root{--paper:#f7f3ea;--ink:#384436;--muted:#707363;--gold:#a58954;--line:#d9d3bf}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e9e6dc;color:var(--ink);font-family:Georgia,'Times New Roman',serif}.invitation{position:relative;max-width:900px;margin:28px auto;background:var(--paper);min-height:calc(100svh - 56px);padding:32px 56px 22px;box-shadow:0 16px 75px #333d2510;overflow:hidden}.fine-border{position:absolute;inset:12px;border:1px solid var(--line);pointer-events:none}.masthead{display:flex;justify-content:space-between;font:12px/1.5 Arial,sans-serif;letter-spacing:2px;color:var(--muted);position:relative}.opening{text-align:center}.eyebrow{font:12px/1.7 Arial,sans-serif;letter-spacing:3px;color:var(--muted);margin:28px 0 12px}h1{font-size:clamp(44px,7vw,70px);font-weight:400;line-height:1.15;margin:0;letter-spacing:-2px}h1 em{font-size:.67em;font-weight:400;color:var(--gold);padding:0 7px}.scene{position:relative;height:400px;max-width:580px;margin:0 auto;isolation:isolate}.floral{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;z-index:-1;opacity:.92}.couple{position:absolute;inset:42px 50px 10px;display:flex;align-items:stretch}.person{width:50%;height:100%;background-image:url('assets/couple.webp');background-size:200% 100%;background-repeat:no-repeat;transition:transform 3.5s cubic-bezier(.35,0,.25,1);filter:drop-shadow(0 8px 5px #3844360c)}.bride{background-position:left center;transform:translateX(-33px)}.groom{background-position:right center;transform:translateX(33px)}.started .bride{transform:translateX(16px)}.started .groom{transform:translateX(-16px)}.started .floral{animation:breathe 8s ease-in-out infinite}.ground{position:absolute;bottom:12px;left:25%;right:25%;border-radius:50%;height:12px;background:#65794b12;filter:blur(5px);z-index:-1}.primary,.map{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:50px;padding:14px 28px;border:1px solid var(--ink);background:var(--ink);color:#faf8f0;font:15px/1.4 Arial,sans-serif;letter-spacing:.5px;cursor:pointer;text-decoration:none}.primary span{font-size:24px;line-height:20px}.primary:hover{background:#4d5b45}.start-area{height:98px;transition:opacity .5s,height .7s,margin .7s}.start-area p{font-size:14px;color:var(--muted);font-style:italic;margin:13px 0}.started .start-area{opacity:0;height:0;visibility:hidden}.together{font-style:italic;color:var(--gold);font-size:20px;margin:0;opacity:0;max-height:0;transition:opacity 1s 3s,max-height 1s}.started .together{opacity:1;max-height:45px;margin-top:12px}.details{display:none;text-align:center;max-width:550px;margin:auto}.started .details{display:block}.reveal{opacity:0;transform:translateY(16px);transition:opacity 1.2s,transform 1.2s}.reveal.visible{opacity:1;transform:translateY(0)}.quote{margin:28px auto 34px;max-width:445px}.ornament{color:var(--gold);font-size:27px}.quote p{font-size:clamp(19px,3.6vw,24px);line-height:1.65;font-style:italic;margin:14px 0}.families{display:flex;align-items:center;justify-content:center;gap:35px;margin:30px 0 40px}.families p{font-size:18px;margin:0 0 9px}.families span:not(.family-divider){font:12px Arial,sans-serif;letter-spacing:3px;color:var(--muted)}.family-divider{height:44px;width:1px;background:var(--line)}.date{display:flex;justify-content:center;align-items:center;gap:24px;border-block:1px solid var(--line);padding:24px 0}.date>span{font:13px Arial,sans-serif;letter-spacing:3px}.date strong{font-size:72px;font-weight:400;line-height:1;color:var(--gold)}.date div{text-align:left}.date div span{font:12px Arial,sans-serif;letter-spacing:1.5px}.date p{font-size:22px;margin:9px 0 0}.venue{margin-top:38px}.venue .eyebrow{margin:0 0 13px}h2{font-size:42px;font-weight:400;line-height:1.1;margin:0 0 12px}.hall{font-size:18px;margin:0 0 18px}address{font-style:normal;font:16px/1.8 Arial,sans-serif;color:var(--muted)}address span{font-size:14px}.map{background:transparent;color:var(--ink);margin-top:24px;min-width:185px}.map:hover{background:#ebe9df}footer{margin:40px 0 8px;border-top:1px solid var(--line);padding-top:27px}footer p{font-size:17px;font-style:italic;color:var(--muted)}footer>span{display:block;font-size:29px;color:var(--gold);margin:24px}.text-button{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:5px;padding:12px 8px;min-height:44px;font:14px/1.4 Arial,sans-serif;cursor:pointer}.controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:20px}.sound{display:flex;gap:7px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:24px;color:var(--ink);font:13px Arial,sans-serif;padding:10px 13px;min-height:44px;cursor:pointer}.sound[aria-pressed=true]{background:#e6e9dc}button:focus-visible,a:focus-visible{outline:3px solid #a58954;outline-offset:5px}#audio-note{font:13px/1.5 Arial,sans-serif;text-align:center;color:var(--muted);margin:0}.complete #skip{display:none}@keyframes breathe{50%{transform:scale(1.018)}}@media(min-width:760px){.started .scene{height:390px}.invitation{padding-inline:80px}}@media(max-width:600px){body{background:var(--paper)}.invitation{margin:0;padding:26px 26px 20px;min-height:100svh;box-shadow:none}.fine-border{inset:9px}.masthead{font-size:10px;letter-spacing:1.4px}.eyebrow{margin-top:30px}.scene{height:350px;margin-inline:-12px}.couple{inset:40px 35px 14px}.bride{transform:translateX(-24px)}.groom{transform:translateX(24px)}.started .bride{transform:translateX(10px)}.started .groom{transform:translateX(-10px)}.families{gap:21px}.families p{font-size:16px}.families span:not(.family-divider){font-size:11px;letter-spacing:2px}.date{gap:15px}.date strong{font-size:62px}.date div span{font-size:11px;letter-spacing:.5px}.date>span{font-size:12px;letter-spacing:2px}h2{font-size:37px}.hall{font-size:16px}.controls{gap:12px}.quote{margin-top:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* The reaching hands meet at 57.3% of the artwork; place that point on the arch axis. */
.couple{inset:auto;left:50%;bottom:16px;transform:translateX(-57.3%);width:min(88%,480px);height:auto;aspect-ratio:3/2;display:block}
.person{position:absolute;inset:0;width:100%;height:100%;background:none;clip-path:none;transition:none;filter:none}
.figure{position:absolute;inset:0;background:url('assets/couple.webp') center/100% 100% no-repeat;filter:none}
.bride{--from:-7%;--to:2%;transform:translateX(var(--from))}.groom{--from:7%;--to:-2%;transform:translateX(var(--from))}
.bride .figure{clip-path:polygon(0 0,57.3% 0,57.3% 100%,0 100%);transform-origin:33% 96%;--lean:.6deg}
.groom .figure{clip-path:polygon(57.3% 0,100% 0,100% 100%,57.3% 100%);transform-origin:80% 96%;--lean:-.6deg}
.started .person{transform:translateX(var(--to))}.walking .person{animation:approach 4.3s cubic-bezier(.32,.02,.25,1) both}
.walking .figure{animation:gentle-step .86s ease-in-out 5}.walking .groom .figure{animation-delay:.08s}
.started:not(.walking) .figure{animation:settle 1.1s ease-out both}
.floral{width:100%;height:100%;opacity:.72}.scene{transition:height 1.5s ease 4.5s}.started .scene{height:310px}.started .couple{width:min(82%,420px);transition:width 1.5s ease 4.5s}
@keyframes approach{from{transform:translateX(var(--from))}to{transform:translateX(var(--to))}}
@keyframes gentle-step{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-2.5px) rotate(var(--lean))}75%{transform:translateY(-.5px) rotate(0)}}
@keyframes settle{0%{transform:translateY(-.7px) rotate(var(--lean))}100%{transform:translateY(0) rotate(0)}}
@media(max-width:600px){.scene{height:330px}.couple{width:88%;bottom:23px}.started .scene{height:275px}.started .couple{width:86%}.started .person{transform:translateX(var(--to))}.invitation{padding-bottom:92px}.started .controls{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:10;margin:0;padding:4px 10px;background:#f7f3eaf5;border:1px solid var(--line);border-radius:32px;box-shadow:0 3px 22px #38443618;white-space:nowrap;gap:8px}.started .controls .text-button{font-size:12px}.started .controls .sound{border:none}.families span:not(.family-divider){font-size:12px}.date div span{font-size:12px}.masthead{font-size:12px;letter-spacing:.8px}#audio-note{position:relative;z-index:11}}
@media(prefers-reduced-motion:reduce){.walking .person{animation:none!important;transform:translateX(var(--to))}.figure{animation:none!important}}

.walking .person,.walking .figure{will-change:transform}.started .floral{animation-iteration-count:3}