html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0;
}
p { margin: 0 0 var(--space-4); max-width: var(--measure-body); }
a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; transition: color var(--dur) var(--ease); }
a:hover { color: var(--text-link-hover); }
strong { font-weight: 800; }
hr { border: 0; border-top: var(--border-quiet); margin: var(--space-6) 0; }
::selection { background: var(--sunshine); color: var(--brick); }
:focus-visible { outline: 2px solid var(--poppy-ink); outline-offset: 2px; }