/* ==========================================================================
   Section + container primitives
   ========================================================================== */

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

.container--narrow { max-width: var(--container-narrow); }

.section {
	padding-block: var(--section-y);
}

.section--alt   { background: var(--bg-alt); }
.section--mint  { background: var(--bg-mint); }
.section--navy  { background: var(--navy); color: rgba(255, 255, 255, 0.82); }
.section--center { text-align: center; }

/* Section heading block */
.section__head {
	max-width: 720px;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.section--center .section__head {
	margin-inline: auto;
}

.section__title {
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	color: var(--heading);
	margin-bottom: 0.9rem;
}

.section--navy .section__title { color: #fff; }

.section__lead {
	font-size: 1.075rem;
	color: var(--body);
	max-width: 60ch;
}

.section--center .section__lead { margin-inline: auto; }

/* Utility */
.stack > * + * { margin-top: 1rem; }
.text-center { text-align: center; }