:root { color-scheme: dark; font-family: Arial, sans-serif; background: #102132; color: #faf9f6; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #102132; }
body { overflow: hidden; }

/* Background photo fills the screen; all text below is live text. */
.bg { position: fixed; inset: 0; background: #0f2447 url(/assets/coming-soon-bg.jpg) 50% 100% / cover no-repeat; }
.bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #0a1a3366 0, transparent 60%); }

.copy { position: fixed; left: 0; right: 0; top: 31vh; text-align: center; padding: 0 5vw; z-index: 1; }
h1 { margin: 0; text-transform: uppercase; font: 400 clamp(44px, 10.5vw, 150px) "Libre Baskerville", Georgia, serif; letter-spacing: .22em; padding-left: .22em; color: #f7f5f0; text-shadow: 0 2px 30px #0a1a3399; }
.soon { margin: clamp(14px, 2.4vw, 34px) auto 0; display: flex; align-items: center; justify-content: center; gap: 2.2vw; width: min(920px, 90vw); color: #d9b98c; font: 400 clamp(13px, 1.9vw, 26px) Montserrat, Arial, sans-serif; letter-spacing: .38em; text-transform: uppercase; }
.soon::before, .soon::after { content: ""; flex: 1; height: 1px; background: #d9b98c99; }
.soon span { padding-left: .38em; }
.line { margin: clamp(18px, 3vw, 44px) 0 0; font: 300 clamp(15px, 2vw, 28px)/1.6 Montserrat, Arial, sans-serif; color: #eceae4dd; letter-spacing: .03em; text-shadow: 0 1px 14px #0a1a33aa; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* "Check back soon" + arrow: opens the password box. */
.preview { position: fixed; left: 0; right: 0; width: max-content; margin: 0 auto; bottom: clamp(18px, 4.5vh, 48px); z-index: 2; }
.preview[open]::before { content: ""; position: fixed; inset: 0; background: #07122399; }
summary { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 28px; cursor: pointer; list-style: none; border-radius: 6px; color: #e9dcc6; }
summary::-webkit-details-marker { display: none; }
.check { font: 400 13px Montserrat, Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.chev { width: 26px; height: 13px; animation: nudge 2.4s ease-in-out infinite; }
summary:hover .chev { animation-play-state: paused; transform: translateY(3px); }
@keyframes nudge { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .chev { animation: none; } }
summary:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid #d5b688; outline-offset: 4px; }

@media (max-width: 700px) { .copy { top: 27vh; } h1 { font-size: 11.5vw; letter-spacing: .14em; padding-left: .14em; } .soon { letter-spacing: .26em; } }
@media (max-height: 520px) { .copy { top: 12vh; } h1 { font-size: 15vh; } .line { display: none; } }

/* The password box opens as a card in the middle of the screen. */
form { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 92vw); padding: 22px; background: #132739; border: 1px solid #bca17c; border-radius: 8px; box-shadow: 0 16px 50px #000a; z-index: 3; }
label { display: block; margin-bottom: 10px; font-size: 16px; }
.fields { display: flex; gap: 10px; }
input { width: 0; flex: 1; min-width: 0; min-height: 48px; border: 1px solid #a6afb7; border-radius: 4px; padding: 10px 12px; background: #f9f7f3; color: #162b3e; font: inherit; font-size: 16px; }
button { min-height: 48px; border: 0; border-radius: 4px; padding: 10px 20px; background: #d0b28b; color: #102132; cursor: pointer; font: 600 16px Arial, sans-serif; }
button:hover { background: #e0c7a7; }
#preview-error { color: #ffd1c8; font-size: 15px; line-height: 1.5; }
#preview-error:not(:empty) { margin-top: 12px; }
.err { margin: 0; color: inherit; }