/* The beta site's reading pages (#220, S9 of #168): privacy, terms, support. The same page as index.html (its
   colours, its one column, its type), made for reading: a narrower measure, plain headings, lists. One file, no build.
   --mute is kept for borders only: on --page it is too faint for words. */
:root { color-scheme: dark; --page: #1a1a1a; --ink: #ebebe8; --dim: #9a9a97; --mute: #5c5c5a; --surface: #222; --line: #303030; --ok: #70df45; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 64px 24px 64px; display: flex; flex-direction: column; gap: 28px; }
nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
nav a { color: var(--dim); text-decoration: none; padding: 10px 0; }
nav a:hover, nav a[aria-current] { color: var(--ink); }
nav a.home { color: var(--ink); font-weight: 500; margin-right: auto; }
h1 { margin: 0; font-size: 40px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
h2 { margin: 0; font-size: 13px; font-weight: 500; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
p, ul { margin: 0; }
ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
li::marker { color: var(--dim); }
section { display: flex; flex-direction: column; gap: 10px; }
.lead { color: var(--dim); font-size: 18px; margin-top: 10px; }
.note { color: var(--dim); font-size: 14px; }
a { color: var(--ink); }
code { font: 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
b { font-weight: 600; }
/* a fact we do not have yet, shown as one, never dressed up as an answer */
.todo { padding: 1px 6px; border: 1px dashed var(--dim); border-radius: 4px; color: var(--ink); font-size: 14px; white-space: nowrap; }
.box { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
footer { color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; }
footer a { color: var(--dim); }
@media (max-width: 420px) { h1 { font-size: 32px; } main { padding-top: 40px; } .todo { white-space: normal; } }