/* Tenon for text, Mortise for display headings — the same pairing and the same
   files the dashboard ships. Weights are only those the page uses: 400 and 500
   of Tenon for body and strong, 400 and 500 of Mortise for headings. font-display
   swap so the page is readable before 152KB of woff lands. */
@font-face {
  font-family: "Tenon";
  src: url("/fonts/Tenon-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tenon";
  src: url("/fonts/Tenon-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Mortise";
  src: url("/fonts/Mortise-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Mortise";
  src: url("/fonts/Mortise-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}

:root {
  --font-text: "Tenon", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-display: "Mortise", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #f8f7f4;
  --ink: #18171a;
  --muted: #5d5a55;
  --rule: #d9d5cc;
  --accent: #c2316f;
  --code-bg: #eeebe4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18171a;
    --ink: #f3f1ec;
    --muted: #a8a49c;
    --rule: #33313a;
    --accent: #e0568e;
    --code-bg: #232128;
  }
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.55;
}
main { max-width: 42rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
header.site { display: flex; align-items: center; gap: .75rem; margin-bottom: 2.5rem; }
header.site img { width: 32px; height: 32px; }
header.site a { color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-size: .95rem; }
nav.site { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); }
nav.site a { color: var(--muted); }
h1 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin: 2.5rem 0 .6rem; }
h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
p, li { max-width: 38rem; }
/* Air between list items, not after the last one — the gap belongs between
   siblings, so a list ending flush against the next paragraph keeps the
   section's own rhythm. 0.4lh is four tenths of the item's own line box, so
   it holds if the type size or line-height ever moves. */
li + li { margin-top: 0.4lh; }
a { color: var(--accent); }
code, pre { font-family: var(--font-mono); font-size: .88em; }
code { background: var(--code-bg); padding: .1em .35em; border-radius: 3px; }
pre { background: var(--code-bg); padding: .9rem 1rem; border-radius: 4px; overflow-x: auto; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1rem 0; }
th, td { text-align: left; vertical-align: top; padding: 1.2rem 1.4rem 1.2rem 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 500; }
/* Tenon ships 400 and 500 only — map strong onto Medium rather than letting
   the browser synthesise a 700 that does not exist. */
strong { font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
footer.site { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--muted); font-family: var(--font-mono); }
footer.site a { color: var(--muted); }