:root{color-scheme:dark;--night:#071526;--cream:#fff3d1;--gold:#f5bf61;--muted:#bfc9d3;--ink:#102b3a}
*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth}
body{margin:0;font-family:"Trebuchet MS",Avenir,"Segoe UI",sans-serif;color:var(--cream);background:radial-gradient(ellipse at 75% 10%,#142b44 0,transparent 56%),var(--night)}
.page{max-width:1680px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.skip{position:fixed;left:16px;top:-100px;padding:12px 20px;z-index:10;background:var(--cream);color:var(--night);border-radius:10px}
.skip:focus{top:12px}
.masthead{height:112px;flex-shrink:0;padding:28px clamp(24px,5vw,84px);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.wordmark{width:245px;max-width:52vw;height:auto;filter:drop-shadow(0 3px 6px #0007)}
.domain{color:#c8d1d9;font-size:10px;font-weight:700;letter-spacing:.22em;display:flex;align-items:center;gap:14px}
.domain span{color:var(--gold);font-size:20px}
.scene{position:relative;isolation:isolate;min-height:620px;flex:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:30px clamp(24px,6vw,100px) 55px;}
.art{position:absolute;z-index:-2;inset:-55px 0 -35px;margin:0;overflow:hidden}
.art img{width:100%;height:100%;display:block;object-fit:cover;object-position:38% 66%}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--night) 1%,#07152600 24%,#07152600 76%,var(--night) 100%),linear-gradient(90deg,transparent 33%,#07152624 52%,#071526b3 100%)}
.message{grid-column:2;justify-self:center;max-width:480px;width:100%;position:relative;animation:appear .8s ease-out both}
.speech{position:relative;padding:32px 30px 29px;text-align:center;border-radius:36px 36px 36px 8px;background:linear-gradient(135deg,#fff9e8,var(--cream));color:var(--ink);box-shadow:0 20px 60px #0004,0 0 0 1px #fff8 inset;transform:rotate(-2deg)}
.speech::after{content:"";position:absolute;left:-27px;bottom:44px;width:35px;height:41px;background:var(--cream);clip-path:polygon(100% 0,100% 100%,0 100%)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.18em;color:#626a5d;}
.eyebrow span{color:#b28332;font-size:17px;line-height:1}
h1{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:clamp(54px,5.7vw,82px);font-weight:900;line-height:.95;letter-spacing:-.055em;margin:18px 0 19px}
h1 span{color:#b27319}
.speech p{font-size:17px;line-height:1.5;margin:0;color:#425357}
.signature{display:block;margin-top:19px;font-size:13px;font-weight:700;color:#6c735e}
.signature span{font-size:21px;vertical-align:-1px;margin-left:3px;color:#af7a2c}
.invitation{text-align:center;margin-top:28px;}
.invitation p{font-size:13px;color:#e1e6e9;margin:0 0 11px;text-shadow:0 1px 5px #000}
.instagram{display:inline-flex;align-items:center;gap:10px;border:1px solid #f5bf6180;border-radius:999px;padding:12px 13px 12px 20px;min-height:48px;background:#091a2abf;backdrop-filter:blur(7px);color:var(--cream);text-decoration:none;font-weight:700;font-size:16px;box-shadow:0 5px 16px #0003;transition:transform .2s,background .2s}
.instagram>svg{color:var(--gold)}
.arrow{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--night);font-size:20px;margin-left:15px}
.instagram:hover{background:#1d3548;transform:translateY(-2px)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.footer{position:relative;z-index:1;min-height:67px;display:flex;align-items:center;justify-content:center;gap:16px;padding:18px 24px;color:var(--muted);font-size:11px;letter-spacing:.05em}
.footer-star{color:#b58a49;font-size:16px}
@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1400px){.scene{min-height:700px}.message{max-width:500px}.speech{padding:39px 30px 34px}}
@media(max-width:950px) and (min-width:701px){.scene{padding-right:34px;padding-left:28px;grid-template-columns:.95fr 1fr;min-height:600px}.speech{padding:27px 20px}.art img{object-position:34% 60%}.speech p{font-size:15px}}
@media(max-width:700px){
 .masthead{height:88px;padding:24px;justify-content:center}.wordmark{width:220px;max-width:70vw}.domain{display:none}
 .scene{display:flex;flex-direction:column;min-height:0;padding:13px 25px 0;gap:0;}
 .message{display:contents}.speech{order:0;width:min(100%,365px);padding:23px 15px 21px;border-radius:28px;transform:rotate(-2deg);z-index:2}
 .speech::after{left:24%;bottom:-22px;width:30px;height:27px;clip-path:polygon(0 0,100% 0,0 100%)}
 .eyebrow{font-size:9px;letter-spacing:.16em}h1{font-size:61px;margin:14px 0 13px}.speech p{font-size:15px;line-height:1.45}.signature{font-size:12px;margin-top:12px}
 .art{order:1;position:relative;z-index:0;inset:auto;flex-shrink:0;width:calc(100% + 50px);height:365px;margin:-28px -25px -26px;}
 .art img{object-position:20% 62%;height:100%;width:100%;object-fit:cover}
 .art::after{background:linear-gradient(0deg,var(--night),transparent 24%,transparent 80%,var(--night) 100%)}
 .invitation{order:2;position:relative;z-index:2;margin:0 0 13px}.invitation p{font-size:12px}.instagram{font-size:16px}
 .footer{min-height:64px;gap:10px;padding:13px 15px 23px;font-size:9px;letter-spacing:.01em}
}
@media(max-width:360px){.scene{padding-left:20px;padding-right:20px}.speech{padding-inline:10px}h1{font-size:55px}.art{width:calc(100% + 40px);height:340px;margin-inline:-20px}.footer{gap:7px;font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}