@font-face { font-family: "Archivo"; src: url(/fonts/archivo-latin.woff2) format("woff2"); font-weight: 500 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(/fonts/libre-franklin-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --surface: #e6eaed; --panel: #fff; --ink: #141414; --muted: #5b5f66; --accent: #c8341c; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --surface: #0b0c0e; --panel: #17191c; --ink: #f1efe9; --muted: #a3a7ae; --accent: #ff6b4f; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.55 "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
main { max-width: 640px; margin: 0 auto; background: var(--panel); border: 2px solid var(--ink); padding: 12px 20px 24px; }
h1 { font: 900 clamp(40px, 11vw, 56px)/0.9 "Archivo", "Arial Narrow", sans-serif; font-stretch: 72%; margin: 4px 0 6px; }
h1 a { color: inherit; text-decoration: none; }
.rule { height: 10px; background: var(--ink); margin: 6px 0 14px; }
h2 { font: 900 22px/1.15 "Archivo", "Arial Narrow", sans-serif; font-stretch: 80%; margin: 22px 0 6px; border-top: 1px solid var(--ink); padding-top: 12px; }
p, li { margin: 6px 0; } ul { padding-left: 20px; }
a { color: var(--accent); }
.meta { color: var(--muted); font-size: 13px; }