/* Layout
--------------------------------------------- */
.site-main {
	margin-top: 8rem;
	padding-bottom: 2rem;
	position: relative;
	overflow: hidden;
}

/*
 * Front page and hero pages sit flush under the floating header.
 * Doubled class on purpose so the mobile .site-main override below — which has
 * to re-declare the base margin — cannot reach them and push the hero down.
 */
.site-main.site-main--front-page,
.site-main.site-main--with-hero {
	margin-top: 0;
}

@media (max-width: 1024px) {
	/*
	 * The header loses ~25px below this breakpoint (smaller inset, tighter
	 * padding, narrower logo), so the desktop 8rem clearance left 59px of dead
	 * space under it instead of the ~34px the desktop layout intends.
	 */
	.site-main {
		margin-top: 6.5rem;
	}

	.site-main.site-main--front-page {
		margin-top: 5rem;
	}
}

.page-header {
	margin-bottom: 2rem;
}