/* ==========================================================================
   ACE - Layout utilities
   ========================================================================== */

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

.container--narrow {
	max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.site-main {
	display: block;
}

/* Sections --------------------------------------------------------------- */
.section {
	position: relative;
	padding-block: var(--section-pad);
}

.section--tight {
	padding-block: calc(var(--section-pad) * 0.6);
}

.section--ivory { background: var(--ace-ivory); }
.section--paper { background: var(--ace-paper); }
.section--mist { background: var(--ace-mist); }

.section--navy {
	background: var(--ace-navy);
	color: var(--text-inverse);
}

.section--navy .eyebrow,
.section--navy .lead,
.section--navy .text-secondary {
	color: var(--text-inverse-muted);
}

.section--flush-top { padding-top: 0; }

/* Section heading -------------------------------------------------------- */
.section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--space-5);
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head__eyebrow {
	margin-bottom: var(--space-3);
}

.section-head__title {
	max-width: 20ch;
}

.section-head__aside {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.section-head--split {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: end;
}

.section-head--split .section-head__aside {
	display: block;
	max-width: 46ch;
	color: var(--text-secondary);
}

.section--navy .section-head--split .section-head__aside {
	color: var(--text-inverse-muted);
}

/* Grids ------------------------------------------------------------------ */
.grid-12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-5);
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
}

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
}

/* Hairline --------------------------------------------------------------- */
.rule {
	height: 1px;
	border: 0;
	background: var(--border);
}

.section--navy .rule {
	background: var(--border-inverse);
}