html{ font-size: 16px; }
body{
  font-size: var(--step-0);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}

h1,h2,h3{
  margin: 0 0 var(--space-2) 0;
  line-height: var(--lh-tight);
  font-weight: 600; /* semibold, not shouty */
  letter-spacing: -0.01em;
}

h1{ font-size: var(--step-3); }
h2{ font-size: var(--step-2); }
h3{ font-size: var(--step-1); }

p{ margin: 0 0 var(--space-3) 0; }

.small{
  font-size: var(--step--1);
  color: var(--muted);
}

a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
a:hover{ text-decoration-color: var(--muted); }

ul{
  margin: 0 0 var(--space-3) 1.1em;
  padding: 0;
}
li{ margin: 0 0 var(--space-1) 0; }