:root {
  --page: #EDE8D6; --paper: #FEFBF0; --ink: #23211b; --muted: #6f6a5c; --line: #8FA87E;
}
@media (prefers-color-scheme: dark) {
  :root { --page: #211F18; --ink: #23211b; }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 32px 16px 48px; background: var(--page); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main {
  max-width: 680px; margin: 0 auto; background: var(--paper);
  border-radius: 24px; padding: 32px 28px 36px; box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.title { font: 600 34px/1.1 "Iowan Old Style", "Palatino", Georgia, serif; margin: 0; }
.title .root { position: relative; display: inline-block; }
.title .root::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: var(--line); }
.title .dot { color: #b9b3a3; margin: 0 .18em; }
.title .asana { color: var(--muted); }
.gloss { display: block; font: 600 13px/1 -apple-system, sans-serif; color: var(--muted); margin: 10px 0 0 22px; }
nav { margin: 22px 0 8px; font-size: 15px; }
nav a { color: var(--ink); margin-right: 18px; }
nav a[aria-current] { font-weight: 600; text-decoration: none; }
h2 { font: 600 13px/1.2 -apple-system, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 30px 0 8px; }
p, li { margin: 0 0 10px; }
ul { padding-left: 20px; }
a { color: #4f6b43; }
.small { font-size: 14px; color: var(--muted); }