*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--body-bg-color);
  color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: var(--text-m);
}

img,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
}

:where(h1, h2, h3) {
  margin: 0;
  color: inherit;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

p {
  margin: 0;
}

.container {
  inline-size: min(var(--content-width), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space-xl);
}

.section--light {
  background: var(--bg-light);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-light);
}

.skip-link {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 100;
  transform: translateY(-200%);
  border-radius: var(--radius);
  background: var(--text-dark);
  color: var(--text-light);
  padding: var(--space-xs) var(--space-s);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.prose {
  display: grid;
  gap: var(--content-gap);
  max-inline-size: 68ch;
}