/* ==============================================================================
   PAGE LAYOUT
   ============================================================================== */

/* One column of blocks, centred and capped at a reading-friendly width. The
   gap between blocks lives here, once, instead of on every block's own
   margin, so a new block type never has to remember to add it. */
.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

@media (max-width: 480px) {
  .page {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

/* The inline icon sprite partials/icons.html puts right after <body>: its
   <symbol>s are only ever drawn through <use>, so the element itself must
   take no room. The hidden attribute alone is not enough, since any
   author rule setting display on svg wins over the browser's [hidden]
   (the sprite pushed the header 156 px down in the navigation spec);
   and display: none would keep old Safari from resolving the symbols,
   so the sprite is parked at zero size instead. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}