@font-face {
  font-family: "Lexend";
  src: url("/fonts/lexend.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --navy: #082F49;
  --ink: #F0F9FF;
  --muted: #9CC3DB;
  --sky: #38BDF8;
}

* { box-sizing: border-box; }

html { background: var(--navy); }

body {
  margin: 0;
  color: var(--ink);
  font: 400 1.125rem/1.5 Lexend, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* One screen: the wordmark and two lines on the left, the arrow of the O large and cropped on the right */
.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3rem;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1.75rem, 7vw, 6rem);
}

.mark {
  position: absolute;
  z-index: -1;
  left: 80%;
  top: 50%;
  width: max(120vh, 64vw);
  height: auto;
  translate: -50% -50%;
}

.intro { align-self: center; }

h1 { margin: 0; line-height: 0; }

.wordmark { width: clamp(13.75rem, 40vw, 35rem); height: auto; }

.lead {
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  max-width: 16ch;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.status {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
}

.status a { color: var(--sky); text-underline-offset: 0.2em; }
.status a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 2px; }

.foot { color: var(--muted); font-size: 0.875rem; }

/* The arrow turns once into place: the only motion on the page */
@media (prefers-reduced-motion: no-preference) {
  .mark { animation: renew 2.2s cubic-bezier(0.16, 0.84, 0.24, 1) 0.15s both; }
}

@keyframes renew {
  from { opacity: 0; rotate: -100deg; }
  to { opacity: 1; rotate: 0deg; }
}

@media (max-width: 40rem) {
  .mark { left: 88%; top: 80%; width: 150vw; }
}