:root {
  color-scheme: light dark;
  --ink: #172235;
  --muted: #475569;
  --surface: #fff;
  --background: #f8fafc;
  --border: #dbe3ee;
  --link: #174bb2;
  font-family: Inter, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2f9;
    --muted: #adb9cb;
    --surface: #121821;
    --background: #0a0e14;
    --border: #293444;
    --link: #9ac5ff;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); line-height: 1.65; }
header, footer { border-block-end: 1px solid var(--border); background: var(--surface); }
.wrap { width: min(100% - 2rem, 50rem); margin-inline: auto; }
header .wrap, footer .wrap { padding-block: .85rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { width: 1.65rem; height: 1.65rem; }
main { padding-block: 2rem 3rem; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.035em; line-height: 1.1; margin-block: .4rem 1rem; }
h2 { font-size: 1.25rem; line-height: 1.4; margin-block: 0 .6rem; }
p { margin-block: .5rem 1rem; }
a { color: var(--link); text-underline-offset: .18em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.eyebrow { color: var(--link); font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.lede, .note { color: var(--muted); }
article { padding: clamp(1rem, 4vw, 1.5rem); margin-block: 1rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface); overflow-wrap: anywhere; }
summary { cursor: pointer; color: var(--link); font-weight: 650; padding-block: .4rem; }
li + li { margin-block-start: .4rem; }
footer { border-block-start: 1px solid var(--border); border-block-end: 0; font-size: .9rem; }