/*
 * Layout: the app shell and the few arrangements that recur, as named classes
 * driven by a `--gap` custom property. The masthead is a component
 * (components/masthead.css says why), and so is the following strip
 * (components/following.css).
 *
 *   .app            the shell's root: the paper behind everything
 *   .page           the content column: the page's width, centred, with
 *                   the gutter either side
 *   .page--narrow   a form page's column: the login, signup and account
 *                   forms, the welcome page, the 404
 *   .stack          children in a column
 */
@layer layout {
  .app {
    min-block-size: 100dvh;
    background-color: var(--color-ground);
  }

  .page {
    padding: var(--space-md) var(--gutter) var(--space-3xl);

    @media (width >= 768px) {
      padding-block-start: var(--space-lg);
    }
  }

  .page--narrow {
    max-inline-size: 60rem;
    padding-block-start: var(--space-2xl);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--space-md));
  }
}