@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable.woff2') format('woff2'); }
:root { color-scheme: light; font-family: Inter, Arial, sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; color: #D1FF00; background: #17371d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: url('background.webp') center / cover no-repeat fixed; }
.landing { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 40px; }
.logo { display: block; width: min(674px, 80vw); height: auto; filter: drop-shadow(0 4px 12px rgb(0 0 0 / .2)); }
.signup { width: min(322px, 100%); padding: 0; background: transparent; }
label { display: block; text-align: center; font-size: 12px; margin-bottom: 14px; text-shadow: none; }
.input-row { display: flex; background: #231F20; border: 1px solid #D1FF00; border-radius: 0; }
input, button { font: inherit; letter-spacing: inherit; text-transform: uppercase; border: 0; border-radius: 0; min-height: 50px; }
input { min-width: 0; width: 100%; background: #231F20; color: #D1FF00; padding: 14px 16px; }
input::placeholder { color: #D1FF00; opacity: 1; text-transform: uppercase; }
button { cursor: pointer; background: #D1FF00; color: #231F20; padding: 14px 24px; }
button:hover { background: #bdf135; }
:focus-visible { outline: 2px solid #D1FF00; outline-offset: -4px; }
p { font-size: 12px; text-align: center; margin: 12px 0 0; line-height: 1.5; text-shadow: none; }
@media (max-width: 600px) { body { background-attachment: scroll; } .landing { gap: 32px; padding: 32px 24px; } .logo { width: 100%; max-width: 440px; } }

h1 { color: #D1FF00; font-size: 12px; font-weight: 500; line-height: 1.7; text-align: center; margin: 0 auto; max-width: 480px; text-wrap: balance; text-shadow: none; }
.invitation { font-size: 12px; margin: 0 0 10px; text-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

#signup-status:empty { display: none; }

.socials { position: absolute; top: 20px; right: 24px; display: flex; gap: 4px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; }
.socials img { display: block; }
.socials a:hover { opacity: .75; }
@media (max-height: 600px) { .landing { padding-top: 88px; } }
@media (max-width: 600px) { .socials { top: 12px; right: 16px; } .landing { padding-top: 80px; } }

/* Offset the star above the wordmark for closer optical spacing. */
.landing > h1 { margin-bottom: -20px; }
@media (max-width: 600px) { .landing > h1 { margin-bottom: -16px; } }

/* Balance the visible lettering, rather than the taller star. */
.landing > .signup { margin-top: 16px; }
@media (max-width: 600px) { .landing > .signup { margin-top: 8px; } }

/* Translucent charcoal wash, feathered into the surrounding foliage. */
.landing::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgb(35 31 32 / .78) 0%, rgb(35 31 32 / .68) 40%, rgb(35 31 32 / .38) 70%, rgb(35 31 32 / .2) 100%); }
.socials { z-index: 2; }

/* Keep the original logo proportions while animating only the separate star. */
.logo { position: relative; aspect-ratio: 674 / 197; }
.logo-wordmark { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.logo-asterisk { position: absolute; left: 78.3806%; top: 0; width: 10.3858%; height: auto; transform-origin: 50% 50%; animation: asterisk-turn 5s ease-in-out infinite; }
@keyframes asterisk-turn { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .logo-asterisk { animation: none; } }