.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-2xl); }
}

.container--narrow {
  max-width: var(--content-narrow-width);
}

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

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

.section__eyebrow {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* A step above body copy: uppercase and letter-spaced, the eyebrow reads
     smaller than its size suggests. Built on the body token so it keeps tracking
     --font-scale and the mobile body override. */
  font-size: calc(var(--font-size-body) * 1.35);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-muted);
  margin-bottom: var(--space-2xl);
}

.section__title {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* .section__title is more specific than the `h1` rule in base.css, so a page
   whose top heading carries it (/the-10-measurements) would keep the h2-sized
   margin. Same step up as the base h1 gets, scoped to h1 so h2 section titles
   are unaffected. */
h1.section__title {
  margin-bottom: var(--space-2xl);
}

.u-text-center { text-align: center; }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }

main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}