html { scroll-behavior: smooth; }

body {
  color: var(--color-ink);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-ink);
  font-family: var(--font-display);
  line-break: strict;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

:where(p, li, summary) {
  line-break: strict;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.container--wide { width: min(100%, var(--container-wide)); margin-inline: auto; padding-inline: var(--space-5); }
.container--main { width: min(100%, var(--container-main)); margin-inline: auto; padding-inline: var(--space-5); }
.container--reading { width: min(100%, var(--container-reading)); margin-inline: auto; padding-inline: var(--space-5); }
.container--narrow { width: min(100%, var(--container-narrow)); margin-inline: auto; padding-inline: var(--space-5); }

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.keep-word,
.keep-phrase { white-space: nowrap; }
.text-accent { color: var(--color-primary-strong); }
.section-body { max-width: 70ch; font-size: var(--text-base); line-height: 1.85; color: var(--color-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}