* { box-sizing: border-box; }

html { background: var(--tone-bg); }
html, body {
  margin: 0;
  background: var(--tone-bg);
  color: var(--tone-fg);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern", "liga", "calt", "onum";
  transition: background-color 450ms var(--ease-out), color 450ms var(--ease-out);
}
body { overflow-x: hidden; }
body.is-locked { overflow: hidden; }

/* Paper grain over everything */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

:root.light .bg-grain { opacity: 0.03; }

main { position: relative; z-index: 2; }

@media (max-width: 640px) {
  body { font-size: 17px; }
}