/* Nav and headings are set in Shadows Into Light; body text stays in the reader's own
   default face, which is what they read fastest. The font is SELF-HOSTED (fonts/, SIL
   OFL, licence alongside it) rather than linked from Google: this site's whole pitch is
   that the extension talks to exactly one outside server, and it cannot make that claim
   on a page that asks fonts.gstatic.com for a typeface. Self-hosting also keeps the
   static site inside its own `default-src 'self'` CSP with nothing to loosen.

   font-display is OPTIONAL, not swap. swap tells the browser to paint the fallback and
   then re-paint in the real face, which IS the flash -- it is the specified behaviour,
   not a fault. optional gives the font a short window and, if it misses, uses the
   fallback for that whole page load without ever swapping. Paired with the preload in
   each page head and a one-year immutable cache on the file, it will almost always make
   the window; when it does not, a visitor sees Arial headings once instead of a lurch.
   The filenames carry -v22 so `immutable` is a promise we can keep. */
@font-face{font-family:'Shadows Into Light';font-style:normal;font-weight:400;font-display:optional;
  src:url(fonts/shadows-into-light-latin-v22.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Shadows Into Light';font-style:normal;font-weight:400;font-display:optional;
  src:url(fonts/shadows-into-light-latin-ext-v22.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body{max-width:44rem;margin:0 auto;padding:1rem;line-height:1.5}

/* The handwriting face carries the voice; it never carries running text, where it would
   cost the reader speed for nothing. */
h1,h2,h3,nav{font-family:'Shadows Into Light','Segoe Print','Bradley Hand',cursive}
h1{font-size:2.2rem;font-weight:400;line-height:1.15;margin:.2em 0 .4em}
h2{font-size:1.55rem;font-weight:400;margin:1.6em 0 .4em}
h3{font-size:1.25rem;font-weight:400}
nav{font-size:1.2rem}
nav a{margin-right:.8rem}
nav b{margin-right:.6rem;font-weight:400;text-decoration:underline}
.mark{display:block;font-size:1.5rem;margin-bottom:.1em;text-decoration:none}
/* The tagline is the one line in the nav that has to be read literally rather than
   heard as a voice, so it stays in a plain face. */
.tag{display:block;font-family:Arial,Helvetica,sans-serif;font-size:.9rem;
  line-height:1.3;margin-bottom:1rem}

/* Wide content scrolls inside its own box; the page itself never scrolls sideways. */
.scroll{overflow-x:auto}
table{border-collapse:collapse}
th,td{border:1px solid;padding:.2rem .5rem;text-align:left}
code{overflow-wrap:anywhere}
img{max-width:100%}
hr{margin:1.2rem 0}

/* Under 500px the nav is a line of links above the page, which is all a phone has room
   for. Above it, the nav moves to a fixed left rail and the reading column keeps its
   measure -- body > * rather than a wrapper div, so no page needed restructuring. */
@media (min-width:500px){
  body{max-width:none;margin:0;padding:1.6rem 1.6rem 3rem 15rem}
  body > *{max-width:44rem}
  nav{position:fixed;top:1.6rem;left:1.6rem;width:11.5rem;font-size:1.25rem}
  nav a,nav b{display:block;margin:0 0 .45rem}
  nav .tag{margin-bottom:1.1rem}
  nav+hr{display:none}
}