/**
 * layout.css
 *
 * Container system based on the BRANDRS design system. A .container is never
 * wider than --container-max and always keeps a responsive side gutter, so
 * the layout stays correct at every viewport without per-section overrides.
 *
 * Usage:
 *   <div class="container">…</div>        — standard content width
 *   <div class="container container--full">…</div> — edge to edge
 *
 * Sections handle vertical rhythm (padding-block); the container handles
 * horizontal width + centering.
 */

:root {
    --container-max:     1100px;
    --container-padding: clamp(1.25rem, 5vw, 4.5rem);   /* 20px → 72px */
}

.container {
    width: min(
        100% - (var(--container-padding) * 2),
        var(--container-max)
    );
    margin-inline: auto;
}

.container--full {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
}