:root { --paper: #ffffff; --ink: #111111; --muted: #555555; --text: 18px; --small: 15px; --title: 32px; --name: 36px; --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --column: 680px; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: var(--text); line-height: 1.65; }
body { max-width: var(--column); margin: var(--s12) auto var(--s8); padding: 0 var(--s3); }
h1 { font-size: var(--title); line-height: 1.2; font-weight: 400; margin: 0 0 var(--s4); }
.home h1 { font-size: var(--name); margin-bottom: var(--s3); }
a, a:visited { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
nav { font-size: var(--small); margin-bottom: var(--s6); }
nav span { margin: 0 var(--s1); }
p { margin: 0 0 var(--s3); }
.links { list-style: none; margin: 0; padding: 0; }
.links li { margin-bottom: var(--s2); }
.note, footer { color: var(--muted); font-size: var(--small); }
footer { margin-top: var(--s8); }
.skip { position: absolute; left: var(--s3); top: -100px; }
.skip:focus { top: var(--s2); }
@media (max-width: 600px) { body { margin-top: var(--s6); } }