:root{color-scheme:light;--paper:#f4f1e9;--ink:#4b5748;--gold:#ac9366}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper)}
body{color:var(--ink);font-family:Georgia,'Times New Roman',serif;background:radial-gradient(ellipse at 50% 42%,#fffdf7 0%,var(--paper) 66%,#eae7dd 100%)}
.invitation{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;padding:90px 30px;isolation:isolate}
.invitation:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23948b75' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.frame{position:absolute;inset:25px;border:1px solid #ac93663d;pointer-events:none}
.frame:after{content:"";position:absolute;inset:7px;border:1px solid #ac93661c}
.content{text-align:center;position:relative;z-index:2;animation:arrive 1.8s ease both}
.rings{height:45px;width:70px;position:relative;margin:0 auto 41px}
.rings span{width:32px;height:32px;border:1px solid var(--gold);border-radius:50%;position:absolute;top:7px;left:9px;transform:rotate(-25deg)}
.rings span+span{left:29px;top:9px}
.rings:before{content:"";position:absolute;left:37px;top:3px;width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)}
h1{font-weight:400;font-size:clamp(100px,16vw,190px);line-height:1;margin:0;letter-spacing:-.055em;padding-right:.055em}
.ampersand{font-style:italic;font-weight:400;font-size:.64em;color:var(--gold);display:inline-block;vertical-align:9%;margin:0 .18em}
.divider{display:flex;align-items:center;justify-content:center;gap:17px;color:var(--gold);margin:34px auto 31px;font-size:18px}
.divider:before,.divider:after{content:"";height:1px;width:49px;background:#ac936655}
h2{font-size:clamp(25px,4vw,36px);font-weight:400;font-style:italic;letter-spacing:.025em;margin:0 0 22px}
.names{font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.8;letter-spacing:.29em;text-transform:uppercase;margin:0;color:#73776a}
.botanical{position:absolute;width:clamp(175px,24vw,340px);color:#6c7c5e;opacity:.62;z-index:1;pointer-events:none}
.botanical-top{top:-75px;left:-45px;transform:rotate(75deg);animation:sway-top 12s ease-in-out infinite alternate;transform-origin:30% 15%}
.botanical-bottom{bottom:-80px;right:-40px;transform:rotate(-105deg);animation:sway-bottom 13s ease-in-out infinite alternate;transform-origin:50% 80%}
.bottom-mark{position:absolute;bottom:48px;font-size:10px;letter-spacing:.24em;color:#93947e}
.bottom-mark span{font-size:13px;display:inline-block;margin:0 10px;color:var(--gold)}
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.petal{position:absolute;top:-30px;left:var(--x);width:var(--size);height:calc(var(--size) * .55);border-radius:100% 0 100% 0;background:#b7b797;opacity:0;animation:float-down var(--duration) linear infinite;animation-delay:var(--delay)}
@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes sway-top{to{transform:rotate(79deg)}}
@keyframes sway-bottom{to{transform:rotate(-101deg)}}
@keyframes float-down{0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}12%{opacity:.25}88%{opacity:.2}100%{transform:translate3d(85px,110vh,0) rotate(290deg);opacity:0}}
@media(max-width:600px){.frame{inset:15px}.frame:after{inset:5px}.invitation{padding:100px 24px}.rings{margin-bottom:34px}.botanical-top{left:-65px;top:-45px}.botanical-bottom{right:-65px;bottom:-45px}.names{font-size:10px;letter-spacing:.22em}.bottom-mark{bottom:37px}}
@media(max-height:550px){.invitation{padding:55px 24px}.rings{margin-bottom:15px}h1{font-size:95px}.divider{margin:15px auto}h2{margin-bottom:12px}.bottom-mark{bottom:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.petals{display:none}}