html {
  font-family: var(--ff-base);
  color: var(--color-text);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(6, 182, 212, 0.08), transparent 24%),
    var(--color-bg);
}

body {
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

main, section, header, footer, nav { display: block; }

h1, h2, h3 { line-height: var(--lh-title); text-wrap: balance; }
p { text-wrap: pretty; }
button { appearance: none; background: none; border: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.section[id] { scroll-margin-top: calc(var(--header-height) + 20px); }