:root {
  --bg: #f6f5f2; --fg: #16171a; --muted: #5d606a; --rule: #d9d7d0; --accent: #b3261e;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121316; --fg: #ececea; --muted: #9a9ca4; --rule: #2c2e34; --accent: #ef6b5f; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--sans); }
.wrap { max-width: 44rem; margin: 0 auto; padding: 4rem max(16px, env(safe-area-inset-right, 0px)) 3rem max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 2.5rem; }
.kicker { margin: 0; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.1; margin: .3rem 0 .8rem; text-wrap: balance; }
h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; font-weight: 600; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
.lede { font-size: 1.15rem; color: var(--muted); margin: 0; max-width: 36rem; }
.channels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.channels li { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.channels li > :first-child { font-weight: 600; }
.channels li > :last-child { color: var(--muted); }
@media (max-width: 520px) { .channels li { grid-template-columns: 1fr; gap: .1rem; } }
a { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: .95em; }
footer { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.doc p, .doc li { max-width: 40rem; }
.doc ul { padding-left: 1.2rem; }
.updated { color: var(--muted); font-size: .9rem; margin: 0; }
