:root {
  color-scheme: light dark;
  --navy: #0b3954;
  --teal: #087e8b;
  --coral: #e6603f;
  --cream: #fff8ec;
  --ink: #17212b;
  --muted: #53616d;
  --line: #d9e1e5;
  --card: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header, main, footer { width: min(720px, calc(100% - 32px)); margin-inline: auto; }
header { padding: 56px 0 24px; }
main { padding-bottom: 48px; }
footer { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--muted); }
h1 { margin: 0 0 8px; color: var(--navy); font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.05; }
h2 { margin: 32px 0 8px; color: var(--navy); font-size: 1.25rem; }
p, li { max-width: 68ch; }
.eyebrow { color: var(--teal); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lead { color: var(--muted); font-size: 1.1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 8px 28px rgba(11,57,84,.08); }
a { color: #075f76; font-weight: 650; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 4px; }
.note { border-left: 4px solid var(--coral); padding-left: 16px; }

@media (prefers-color-scheme: dark) {
  :root { --cream: #0c1720; --ink: #f3f6f8; --muted: #bac6cc; --line: #33444f; --card: #142631; --navy: #b9e5ee; --teal: #6bd5d5; }
  a { color: #84d8e8; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }