/* ==========================================================================
   Layout primitives — reusable containers. No component styling.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

/* Header and footer share this one, so they start and end on the same line.
   Wider than reading content but still bounded — on a large screen the bar
   would otherwise stretch to the very edges and read as two separate corners
   rather than one piece of chrome. */
.container--wide {
    max-width: 88rem;
    padding-inline: clamp(var(--space-5), 4vw, var(--space-7));
}