/* The Yay design system, as far as a web page needs it.
   One field, no cards, no dividers. Space and type size do the separating. */
:root {
  --field: #FC4B4B;
  --surface: #E03B3F;
  --ink: #FFFFFF;
  --ink-dim: #FFD3D0;
  --accent: #8E2B33;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--field);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 640px; margin: 0 auto; padding: 40px 24px 80px; }
.wordmark {
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 var(--accent);
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 48px;
}
h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 24px; }
h2 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-dim);
  margin: 40px 0 12px;
}
p { margin-bottom: 16px; }
p.lead { font-size: 20px; font-weight: 600; margin-bottom: 32px; }
ul { margin: 0 0 16px 20px; }
li { margin-bottom: 8px; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dim { color: var(--ink-dim); }
.updated { margin-top: 56px; font-size: 13px; letter-spacing: 0.16em;
           text-transform: uppercase; color: var(--ink-dim); }