@layer base {
  html:has(.nav) { scroll-padding-top: 5rem; }
  :focus-visible { scroll-margin-block: var(--space-sm); }

  body {
    font-family: var(--xf-font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--xf-ink);
    background-color: var(--xf-paper);
  }

  h1, h2, h3, h4 {
    font-family: var(--xf-font-display);
    font-weight: 800;
    line-height: var(--leading-tight);
  }

  h1 { font-size: var(--text-display); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }

  .container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: middle;
  }

  @media (max-width: 767px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
  }
}