:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #1A1D21;
  color: #d88e91;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.hero {
  position: relative;
  min-height: 60.07vw;
  background: #970a08 url('/assets/interstella-background.png') center top / cover no-repeat;
}
.hero-content {
  position: relative;
  padding: 9.5vw 6vw 4rem 13.8vw;
}
.brand {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-size: clamp(1.4rem, 2.08vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -.05em;
}
.brand img { display: block; width: clamp(120px, 9.8vw, 200px); height: auto; }
h1 {
  margin: 1.15vw 0 3.5vw;
  width: 60vw;
  line-height: 0;
}
h1 img { display: block; width: 100%; height: auto; }
.signup { margin-top: 2.6vw; width: clamp(30rem, 30vw, 37rem); max-width: 100%; }
.signup-controls { display: flex; gap: 12px; }
input, button { font: inherit; border-radius: .65rem; min-height: 3.25rem; }
#contact {
  min-width: 0;
  flex: 1;
  padding: .85rem .65rem;
  border: 1px solid #ffffff24;
  background: #b43a40b8;
  color: #fff;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px #ffffff08;
}
#contact::placeholder { color: #f1c4c5; opacity: 1; }
button {
  flex-shrink: 0;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  background: #b7464b;
  color: #fff3f1;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease;
}
button:hover { background: #ca5358; }
button:disabled { cursor: wait; opacity: .75; }
:focus-visible { outline: 2px solid #ffe7cb; outline-offset: 4px; }
#contact:focus { outline: none; border-color: #ffe7cb; box-shadow: inset 0 0 0 1px #ffe7cb; }
#contact[aria-invalid="true"] { border-color: #ffe7cb; }
.signup-message { min-height: 1.4em; margin: .7rem 0 0; color: #ffe4dc; font-size: .875rem; line-height: 1.5; }
.signup-message:not(:empty) { background: #480504e8; border-radius: .35rem; padding: .5rem .65rem; }
.sr-only, .honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body::after { content: ''; display: block; height: 12vw; }
@media (max-width: 700px) {
  .hero { min-height: max(760px, 100svh); background-position: 88% bottom; background-size: auto 100%; }
  .hero-content { padding: 4rem 1.5rem 2rem; }
  .brand { font-size: 1.65rem; }
  h1 { margin: 1.4rem 0 2rem; width: min(100%, 25rem); }
  h1 img { aspect-ratio: 544 / 226; }
  .signup { width: 100%; max-width: 25rem; margin-top: 0; }
  .signup-controls { flex-direction: column; }
  #contact, button { min-height: 3.5rem; }
  #contact { width: 100%; padding-inline: .9rem; }
  body::after { height: 4rem; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }