:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #edf2f8;
  background: #080b13;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(1rem, 4vw, 3.5rem) 1.25rem 5rem;
  background: #080b13;
  color: #edf2f8;
  line-height: 1.7;
}

main {
  position: relative;
  isolation: isolate;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0;
}

main::before {
  position: absolute;
  z-index: -1;
  top: -1rem;
  right: -1.25rem;
  width: min(48vw, 28rem);
  height: 11rem;
  background: url("/dither-field.svg") center right / contain no-repeat;
  content: "";
  opacity: .56;
  pointer-events: none;
}

h1, h2 { color: #f8fafc; line-height: 1.2; }
h1 { margin: 0 0 1rem; font-size: clamp(2.4rem, 7vw, 4.5rem); letter-spacing: -.03em; }
h2 { margin: 2.6rem 0 .7rem; font-size: 1.28rem; letter-spacing: -.015em; }
p { margin: 0 0 1.15rem; }
.eyebrow { margin: 0 0 .9rem; color: #a6b6cd; font-size: .95rem; font-weight: 650; }
.lede { max-width: 58ch; color: #d2dbea; font-size: clamp(1.15rem, 2.8vw, 1.4rem); line-height: 1.45; }
.muted { color: #bac7d8; font-size: .95rem; }

header {
  position: relative;
  max-width: 72ch;
  margin: 0 0 1.7rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #263246;
}

article { max-width: 72ch; }

a { color: #93baff; text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: #c3d9ff; }
a:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 4px; border-radius: 2px; }

nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.7rem 0 0; }
main > header nav { margin-bottom: 0; }
footer { margin-top: 3.2rem; padding-top: 1.15rem; border-top: 1px solid #263246; color: #bac7d8; font-size: .95rem; }
footer p { margin: 0; }

@media (max-width: 40rem) {
  body { padding: .8rem 1rem 3rem; }
  main::before { right: -1rem; width: 82vw; height: 9rem; opacity: .36; }
  nav { gap: 1rem; }
}