/**
 * Layout shells + breakpoint utilities.
 * Tokens: --layout-max, --layout-prose, --layout-gutter (tokens.css)
 */

.site-shell,
.site-shell--wide,
.dsa-footer__shell,
.service-header__inner {
	width: var(--layout-max);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--layout-gutter);
	box-sizing: border-box;
}

.site-shell--prose {
	width: var(--layout-prose);
}

.site-shell--full {
	width: 100%;
	max-width: none;
	padding-inline: var(--layout-gutter);
}

/* Breakpoints: sm 480 | md 768 | lg 1024 | xl 1280 */

@media (max-width: 1280px) {
	:root {
		--layout-gutter: clamp(1.6rem, 3vw, 3.2rem);
	}
}

@media (max-width: 768px) {
	:root {
		--layout-gutter: 1.2rem;
		--layout-max: 100%;
		--layout-prose: min(100%, 72rem);
	}
}