/* TypeCafe — the house style. The full rules are in ~/TYPECAFE.md; this file
   carries only the ones the site currently uses. Everything else on the page is
   the browser's own stylesheet, deliberately: no font-family is set anywhere,
   because the default serif is the most identifying thing about the style.
   Add a rule here when a page needs it, not in advance. */

body {
  font-size: 12pt;
  margin: 40px;
  max-width: 800px;
}

/* The UA scale — 2em and 1.5em — assumes a document with one heading every few
   screens. On a short page that reads as a billboard. Tighter, and with the
   space carried above the heading rather than split evenly around it, so a
   heading binds to the text it introduces instead of floating between two gaps. */
h1 {
  font-size: 1.75em;
  margin: 0 0 0.4em;
}

h2 {
  font-size: 1.22em;
  margin: 1.5em 0 0.35em;
}

/* The UA h3 is 1.17em, which against the tightened h2 above is no step at all.
   Bold at 1.06em still reads as a rung down without shouting. */
h3 {
  font-size: 1.06em;
  margin: 1.3em 0 0.3em;
}

/* 40px of margin is generous on a desk and most of the column on a phone. */
@media (max-width: 880px) {
  body {
    margin: 20px;
  }
}