:root {
  --fg: #1b1a18; --bg: #fcfbf9; --muted: #5f5c56; --rule: #e0dcd4; --rule-strong: #c9c3b8;
  --quote-bg: #f4f2ec; --link: #17457f; --accent: #8a6a2f; --card: #f7f5f0;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e4e1db; --bg: #17171a; --muted: #a09b93; --rule: #35353a; --rule-strong: #4a4a50;
    --quote-bg: #202024; --link: #8fb8ea; --accent: #d0ab68; --card: #1e1e22;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7;
       margin: 0; padding: 0 1.1rem 4rem; color: var(--fg); background: var(--bg); }
main, header > *, footer > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
main a { color: var(--link); overflow-wrap: anywhere; }
p { margin: 0 0 1.05rem; }

/* Header: identity, then a state switcher that is the same on every page. */
header { border-bottom: 1px solid var(--rule); padding: 0.9rem 0 0.7rem; margin-bottom: 2rem;
         font-family: var(--sans); }
header .bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; }
header .site { font-weight: 700; text-decoration: none; color: var(--fg); font-size: 1.05rem;
               letter-spacing: -0.01em; }
header .tag { color: var(--muted); font-size: 0.8rem; }
header nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
header nav a { text-decoration: none; color: var(--link); font-size: 0.8rem; line-height: 1;
               padding: 0.5rem 0.55rem; border: 1px solid var(--rule); border-radius: 0.35rem;
               background: var(--card); }
header nav a[aria-current="page"] { background: var(--link); border-color: var(--link);
                                    color: #fff; font-weight: 600; }
header nav a.wide { font-weight: 600; }

h1, h2, h3 { font-family: var(--sans); line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 1.7rem; margin: 0 0 1.1rem; }
h2 { font-size: 1.15rem; margin: 2.6rem 0 0.9rem; padding-bottom: 0.35rem;
     border-bottom: 2px solid var(--rule-strong); scroll-margin-top: 1rem; }
h3 { font-size: 1rem; margin: 1.8rem 0 0.6rem; }

/* Front matter: was one run-on paragraph; now a labelled card. */
.meta { font-family: var(--sans); font-size: 0.85rem; background: var(--card);
        border: 1px solid var(--rule); border-radius: 0.5rem; padding: 0.85rem 1rem;
        margin: 0 0 1.4rem; display: grid; gap: 0.15rem 1rem; }
.meta dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
           font-size: 0.7rem; padding-top: 0.25rem; }
.meta dd { margin: 0 0 0.5rem; line-height: 1.5; }
.meta dd:last-child { margin-bottom: 0; }
@media (min-width: 30rem) { .meta { grid-template-columns: 7.5rem 1fr; }
                            .meta dd { margin-bottom: 0.35rem; } }

/* The "what is unusual here" block is the page's lede — mark it as one. */
.unusual { border-left: 3px solid var(--accent); padding: 0.1rem 0 0.1rem 1rem;
           margin: 0 0 1.6rem; }
.unusual p:last-child { margin-bottom: 0; }

.toc { font-family: var(--sans); font-size: 0.85rem; margin: 0 0 2rem;
       border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
       padding: 0.8rem 0; }
.toc b { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
         color: var(--muted); margin-bottom: 0.5rem; font-weight: 600; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.toc a { text-decoration: none; color: var(--link); display: block; line-height: 1;
         padding: 0.5rem 0.55rem; border: 1px solid var(--rule); border-radius: 0.35rem;
         background: var(--card); }

blockquote { margin: 1rem 0; padding: 0.7rem 1rem; background: var(--quote-bg);
             border-left: 3px solid var(--rule-strong); border-radius: 0 0.3rem 0.3rem 0;
             font-size: 0.97rem; }
blockquote p { margin: 0 0 0.5rem; }
blockquote p:last-child { margin-bottom: 0; }
/* Source line under a quote — belongs to the quote, not to the prose. */
p.cite { font-family: var(--sans); font-size: 0.8rem; color: var(--muted);
         margin: -0.55rem 0 1.2rem; padding-left: 1rem; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.88em;
       overflow-wrap: anywhere; }
hr { border: none; border-top: 1px solid var(--rule); margin: 2.4rem 0; }
ul, ol { padding-left: 1.3rem; }
li { margin: 0.4rem 0; }

.tablewrap { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--rule);
             border-radius: 0.4rem; }
table { border-collapse: collapse; font-family: var(--sans); font-size: 0.82rem;
        line-height: 1.5; min-width: 100%; }
th, td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
         padding: 0.55rem 0.7rem; vertical-align: top; text-align: left; }
th { background: var(--card); font-weight: 600; position: sticky; top: 0; }
tr:last-child td { border-bottom: none; }
th:last-child, td:last-child { border-right: none; }
.comparison main { max-width: 62rem; }
.comparison table { min-width: 70rem; }
.comparison td { min-width: 16rem; }
.comparison td:first-child, .comparison th:first-child { min-width: 8rem; font-weight: 600; }

footer { margin-top: 3.5rem; border-top: 1px solid var(--rule); padding-top: 1.2rem;
         font-family: var(--sans); font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
footer a { color: var(--link); }

/* Front page state list: each row a single large tap target. */
.statelist { list-style: none; padding: 0; margin: 1.2rem 0; }
.statelist li { margin: 0; border-top: 1px solid var(--rule); }
.statelist li:last-child { border-bottom: 1px solid var(--rule); }
.statelist a { display: block; text-decoration: none; padding: 0.85rem 0.2rem; }
.statelist a:hover, .statelist a:focus { background: var(--card); }
.statelist .name { font-family: var(--sans); font-weight: 600; font-size: 1rem;
                   color: var(--link); }
.statelist .hook { display: block; color: var(--muted); font-size: 0.9rem;
                   line-height: 1.5; margin-top: 0.15rem; }