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

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

.section--tint {
	background: var(--c-surface-2);
}

.eyebrow {
	display: block;
	width: 40px;
	height: 3px;
	margin-block-end: var(--sp-md);
	background: var(--c-brand);
	border-radius: var(--r-sm);
}

.cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-xl);
	margin-block-start: var(--sp-md);
}

.site-header {
	background: var(--c-page);
	border-block-end: 1px solid var(--c-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-md);
	min-height: 56px;

	padding-block: var(--sp-xs);
}

.site-header__logo {
	display: block;
	width: auto;
	height: 40px;
}

.site-footer {

	box-shadow: inset 0 3px 0 var(--c-brand);
	background: var(--c-ink-deepest);
	color: var(--c-on-dark);
	padding-block: var(--sp-2xl) var(--sp-xl);
}

.site-footer__legal {
	max-width: none;
	color: var(--c-on-dark-muted);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-2xl);
}

@media (min-width: 35rem) {
	.site-header__inner {
		min-height: 64px;
		padding-block: var(--sp-sm);
	}

	.cat-grid {
		grid-template-columns: repeat(2, 1fr);
		margin-block-start: var(--sp-lg);
	}

	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 56.25rem) {
	.cat-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-footer {
		padding-block: var(--sp-3xl) var(--sp-2xl);
	}
}