:root {
  --bg: #0f1721;
  --ink: #f2f5f8;
  --accent: #d4682e;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: #eb8a4f;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- radar --- */
.radar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(150vh, 150vw);
  aspect-ratio: 1;
  pointer-events: none;
}

.radar .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
}

.radar .ring.r1 {
  inset: 0;
}

.radar .ring.r2 {
  inset: 19%;
  border-color: rgba(255, 255, 255, .18);
}

.radar .ring.r3 {
  inset: 38%;
  border-color: rgba(212, 104, 46, .7);
}

.radar .cross-h {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, .16);
}

.radar .cross-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}

.radar .pulses {
  position: absolute;
  inset: 0;
}

.radar .pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 104, 46, .6);
  animation: pulsering 5s ease-out forwards;
}

.radar .pulse.long {
  border-width: 2px;
  border-color: rgba(212, 104, 46, .85);
  animation-duration: 6s;
}

.beacon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(212, 104, 46, .75);
  opacity: .28;
  transition: opacity .1s linear;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 33, .5) 18%, var(--bg) 66%);
}

@keyframes pulsering {
  0% {
    transform: scale(.02);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes breathe {

  0%,
  100% {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .pulse,
  .caret {
    animation: none !important;
  }

  .beacon {
    opacity: .8;
  }
}

/* --- chrome --- */
header,
footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding: clamp(22px, 3.4vw, 44px) clamp(20px, 4.4vw, 56px);
  font: 400 clamp(9px, 1.15vw, 10.5px)/1.4 var(--mono);
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .36);
}

.wordmark {
  color: var(--accent);
  letter-spacing: .2em;
}

.readout {
  min-width: 16ch;
  text-align: center;
  letter-spacing: .3em;
  color: rgba(212, 104, 46, .55);
}

/* --- hero --- */
main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 26px);
  text-align: center;
  padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 56px);
}

.eyebrow {
  font: 500 clamp(9px, 1.15vw, 10.5px)/1.6 var(--mono);
  letter-spacing: .3em;
  color: var(--accent);
}

h1 {
  margin: 0;
  max-width: 14ch;
  font: 700 clamp(38px, 8.4vw, 92px)/1 var(--sans);
  letter-spacing: -.03em;
}

.caret {
  color: var(--accent);
  animation: breathe 1.8s ease-in-out infinite;
}

.lede {
  margin: 0;
  max-width: 34ch;
  font: 400 clamp(15px, 2.1vw, 18px)/1.6 var(--serif);
  color: rgba(233, 239, 245, .7);
  text-wrap: pretty;
}

form {
  margin-top: clamp(6px, 1.4vw, 12px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(21, 31, 42, .82);
  backdrop-filter: blur(2px);
}

form input {
  border: 0;
  background: transparent;
  outline: none;
  padding: 15px 18px;
  min-width: min(64vw, 250px);
  font: 400 12.5px/1 var(--mono);
  color: var(--ink);
}

form input::placeholder {
  color: rgba(255, 255, 255, .32);
}

form button {
  border: 0;
  cursor: pointer;
  padding: 15px 22px;
  background: var(--accent);
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  color: #101822;
}

form button:hover {
  background: #eb8a4f;
}

.note {
  min-height: 14px;
  font: 400 clamp(9px, 1.15vw, 10.5px)/1.4 var(--mono);
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .3);
}