body {
  display: grid;
  /* The single column is minmax(0, 1fr), NOT the default `auto`: `auto` sizes to
     content, so any over-wide child (a comparison table, code block, long URL)
     blows the whole page past the viewport and everything clips on mobile. The
     0 minimum lets the column — and its grid items — shrink to the viewport so
     wide content scrolls inside its own wrapper instead. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-block-size: 100dvh;
}

/* Grid items default to min-width:auto (won't shrink below content); zero it so
   <main>'s content is bound by the viewport, not by its widest descendant. */
body > * {
  min-inline-size: 0;
}

.container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--container-max, 72rem);
  padding-inline: 1rem;

  @media (min-width: 640px) {
    padding-inline: 1.5rem;
  }

  @media (min-width: 1024px) {
    padding-inline: 2rem;
  }
}

.container--reading {
  --container-max: 56rem;
}

.section {
  padding-block: 4rem;

  @media (min-width: 640px) {
    padding-block: 5rem;
  }
}