@layer styles {
  /*
   * The lighter ground the blocks sit on, laid over the beige page colour.
   * One element around all of them rather than a background per section, so
   * they stack into a continuous sheet with no seams between them.
   *
   * Full bleed until there is room for a margin worth seeing: inset it any
   * earlier and the beige shows as a few pixels down each edge.
   */
  .sheet {
    background: var(--color-surface);
  }

  @media (min-width: 64em) {
    .sheet {
      max-width: calc(var(--container-max-width) + 2 * var(--space--medium));
      margin-inline: auto;
    }
  }

  .section {
    --section-space-between: var(--space--medium);

    padding: var(--section-space-between) var(--page-side-padding);
  }

  .section--no-padding-top {
    padding-top: 0;
  }

  .section__content {
    /* The shared container. Defined on :root rather than here, because the
       header, the footer and the hero use this class from outside .section. */
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}