:root{color-scheme:light;--ivory:#f7f0e1;--olive:#4b4a2c;--gold:#af9674;--ink:#2f1c12}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--ivory);color:var(--olive);font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
.invitation{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(54px + env(safe-area-inset-top)) calc(36px + env(safe-area-inset-right)) calc(54px + env(safe-area-inset-bottom)) calc(36px + env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 42%,#fffaf04d,transparent 70%)}
.frame{position:absolute;z-index:-1;inset:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));border:1px solid #af967466;pointer-events:none}
.frame:before{content:'';position:absolute;inset:5px;border:1px solid #af967426}
.jewel{position:absolute;left:50%;width:7px;height:7px;background:var(--ivory);border:1px solid var(--gold);transform:translateX(-50%) rotate(45deg);outline:7px solid var(--ivory)}.top{top:-4px}.bottom{bottom:-4px}
.content{width:100%;max-width:680px;text-align:center}.monogram{display:block;width:clamp(86px,24vw,118px);height:auto;margin:0 auto 27px;animation:arrive 1.2s ease both}.names{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.22em;line-height:1.7}.names span{font-style:italic;text-transform:none;letter-spacing:0;margin:0 .22em;color:#6a4d22}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:34px auto 30px}.divider:before,.divider:after{content:'';width:39px;height:1px;background:#af967478}.divider i{width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg)}
h1{font-size:clamp(30px,7.8vw,48px);font-weight:400;line-height:1.2;letter-spacing:-.035em;margin:0}h1 span{display:block;font-size:.77em;letter-spacing:-.02em;margin-bottom:8px}h1 em{display:block;font-weight:400;line-height:1.25}.message{font-size:16px;line-height:1.7;color:#706451;margin:26px 0 0}.signature{display:flex;align-items:center;justify-content:center;gap:7px;margin:38px auto 0}.signature span{width:2px;height:2px;background:var(--gold);border-radius:50%}.signature i{width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg)}
.names,.divider,h1,.message,.signature{animation:arrive 1.2s ease both;animation-delay:.18s}h1,.message{animation-delay:.3s}.signature{animation-delay:.45s}
@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:768px){.frame{inset:32px}.monogram{width:126px;margin-bottom:30px}.names{font-size:15px;letter-spacing:.27em}.divider{margin:38px auto 32px}.message{font-size:17px;margin-top:28px}.signature{margin-top:40px}}
@media(max-height:650px){.invitation{padding-top:42px;padding-bottom:42px}.monogram{width:80px;margin-bottom:18px}.divider{margin:22px auto}h1{font-size:32px}.message{margin-top:20px}.signature{margin-top:24px}}
@media(max-height:450px) and (min-width:600px){.invitation{padding:36px 50px}.content{display:grid;grid-template-columns:150px 1fr;column-gap:36px;align-items:center;max-width:670px}.monogram{grid-column:1;grid-row:1 / 4;width:94px;margin:auto}.names{grid-column:2;font-size:12px}.divider,.signature{display:none}h1{grid-column:2;margin-top:12px;font-size:30px}.message{grid-column:2;margin-top:14px;font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}