/* =============================================================
   SPRUCE PROJECT — Layout
   ============================================================= */

/* --- Page frame ---
   Header, <main>, footer stacked so the footer sits at the bottom
   of short pages instead of floating mid-screen.
   ============================================================= */
body {
  display: flex;
  flex-direction: column;
  /* Anchor for .backdrop, which sits behind the nav at z-index -1 */
  position: relative;
  isolation: isolate;
}

main {
  flex: 1;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Sections --- */
.section {
  padding-block: var(--space-xl) var(--space-2xl);
}