:root {
  color-scheme: dark;
  --ink: #f3f0e8;
  --muted: #b7b4aa;
  --surface: #12171d;
  --surface-raised: #1a222b;
  --line: #35404b;
  --fox: #f47f4f;
  --aqua: #56c9c3;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b0f14; color: var(--ink); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #172c33 0, transparent 35rem), #0b0f14; }
a { color: var(--aqua); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--fox); outline-offset: 4px; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 10; transform: translateY(-180%); padding: .7rem 1rem; color: #0b0f14; background: var(--ink); }
.skip-link:focus { transform: none; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(11, 15, 20, .88); }
.wordmark { color: var(--ink); font-weight: 900; letter-spacing: .16em; text-decoration: none; }
.wordmark span { display: block; margin-top: .2rem; color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .1em; }
nav { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
main { width: min(48rem, calc(100% - 2rem)); margin: clamp(2.5rem, 7vw, 6rem) auto; }
.eyebrow { color: var(--fox); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 12ch; margin: .5rem 0 1rem; font-size: clamp(2.5rem, 8vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.lead { max-width: 44rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
section { margin-top: 2rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1rem; background: rgba(18, 23, 29, .92); }
h2 { margin-top: 0; font-size: 1.25rem; }
p, li { line-height: 1.65; }
li + li { margin-top: .5rem; }

@media (max-width: 620px) {
  header { align-items: flex-start; flex-direction: column; }
  nav { flex-direction: column; gap: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (forced-colors: active) {
  header, section { border: 1px solid CanvasText; }
}