@font-face { font-family: Fraunces; src: url(/fonts/Fraunces-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Outfit; src: url(/fonts/Outfit-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Outfit; src: url(/fonts/Outfit-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --night: #452E5D;
  --night-lit: #553769;
  --night-deep: #2A1A3B;
  --ivory: #F6EEE5;
  --soft: #CDBFDC;
  --apricot: #F0B65D;
  --orb: clamp(150px, 38vw, 220px);
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--night-deep); }
body {
  margin: 0; min-height: 100%; min-height: 100dvh;
  display: flex; flex-direction: column;
  color: var(--ivory);
  font: 400 16px/1.5 Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One hue, lightness only, centred behind the orb. */
  background: radial-gradient(circle at 50% 32%, var(--night-lit) 0%, var(--night) 34%, var(--night-deep) 100%) fixed;
}

main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px 24px;
}

/* The shadow belongs to the frame, so it stays put while the orb turns. */
.orb { width: var(--orb); height: var(--orb); filter: drop-shadow(0 22px 30px rgba(20, 8, 32, .55)); }
.orb img { display: block; width: 100%; height: 100%; animation: turn 90s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orb img { animation: none; } }

h1 { margin: 28px 0 0; line-height: 0; }
.wordmark { display: block; width: clamp(170px, 46vw, 250px); height: auto; }

.headline { margin: 18px 0 0; font: 400 clamp(24px, 6.4vw, 34px)/1.2 Fraunces, Georgia, serif; }
.support { margin: 10px 0 0; max-width: 30ch; color: var(--soft); }
.soon { margin: 28px 0 14px; color: var(--apricot); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }

form { display: flex; gap: 8px; width: 100%; max-width: 340px; }
form[hidden] { display: none; }
input, button { font: inherit; border-radius: 14px; padding: 13px 15px; min-height: 48px; }
#email {
  flex: 1; min-width: 0; color: var(--ivory);
  background: rgba(246, 238, 229, .1); border: 1px solid rgba(246, 238, 229, .28);
}
#email::placeholder { color: #B9A9C9; }
button { border: 0; font-weight: 500; white-space: nowrap; color: var(--night); background: var(--ivory); cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
:focus-visible { outline: 2px solid var(--apricot); outline-offset: 3px; }

.status { margin: 14px 0 0; min-height: 1.5em; max-width: 34ch; color: var(--ivory); }
.status a { color: inherit; }
.status.done { margin-top: 0; font: 400 19px/1.35 Fraunces, Georgia, serif; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 20px 24px 28px; font-size: 13px; }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--ivory); text-decoration: underline; }

.plain { margin-top: 22px; color: var(--ivory); }