:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; color: #f2f4e8; background: #0b120e; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(ellipse at 50% 10%, #233a29 0, #101d15 37%, #0b120e 75%); }
.invitation { position: relative; width: min(100%, 520px); overflow: hidden; border: 1px solid #44583b; border-radius: 24px; background: #141f18; box-shadow: 0 24px 100px #0007; }
.banner { height: 132px; position: relative; background: radial-gradient(ellipse at 55% 120%, #748648 0, #355532 46%, #203a27 95%); overflow: hidden; }
.banner::before, .banner::after { content: ""; position: absolute; width: 270px; height: 270px; border: 1px solid #d2d3a61a; transform: rotate(45deg); top: -170px; left: 50px; }
.banner::after { left: 205px; top: -60px; width: 230px; height: 230px; }
.banner-line { position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, #acba6b, transparent); }
.content { position: relative; padding: 0 38px 28px; }
.emblem { display: block; width: 144px; height: 144px; margin-top: -79px; position: relative; filter: drop-shadow(0 7px 15px #0008); }
.eyebrow { margin: 22px 0 18px; font-size: 11px; font-weight: 650; letter-spacing: 2px; color: #b6c393; }
.eyebrow span { margin-left: 14px; color: #829384; letter-spacing: 1.4px; white-space: nowrap; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(43px, 10vw, 61px); letter-spacing: -1.8px; line-height: 1.02; }
h1 span { color: #b4c390; }
.description { margin: 22px 0 9px; font-size: 18px; color: #e5ead9; }
.details { margin: 0; color: #a8b6a9; line-height: 1.6; font-size: 15px; }
.join { margin-top: 29px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 16px 19px; min-height: 54px; border-radius: 11px; background: #bacb8c; color: #142018; text-decoration: none; font-size: 16px; font-weight: 700; transition: background .15s; }
.join:hover { background: #d4e1af; }
.join:focus-visible { outline: 3px solid #f5f7e9; outline-offset: 4px; }
.join svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.join > span { margin-left: auto; font-size: 22px; font-weight: 400; }
.status { margin: 15px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: #8d9e91; min-height: 18px; }
footer { display: flex; align-items: center; gap: 8px; padding: 18px 38px; border-top: 1px solid #ffffff0d; font-size: 12px; color: #a8b998; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: #b4c390; }
.footer-label { margin-left: auto; color: #768978; font-size: 11px; }
@media (max-width: 390px) { body { padding: 16px; } .content { padding-left: 24px; padding-right: 24px; } footer { padding-left: 24px; padding-right: 24px; } .eyebrow { letter-spacing: 1.2px; font-size: 10px; } .eyebrow span { margin-left: 8px; } }