/* Page structure: header, wrappers, grids, footer. */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---- Header ---- */
.site-header {
	background: var(--ink);
	color: #fff;
	border-bottom: 4px solid var(--accent);
}

.site-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 40px;
	min-height: var(--header-h);
	padding-block: 12px;
}

.site-logo {
	display: block;
	line-height: 0;
}

.site-logo img {
	width: 175px;
	height: 60px;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 8px 28px;
}

.site-nav .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.site-nav .menu a {
	display: block;
	padding-block: 8px;
	font-family: var(--font-display);
	font-stretch: var(--stretch-ui);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.site-nav .menu a:hover,
.site-nav .menu .current-menu-item > a,
.site-nav .menu .current-cat > a,
.site-nav .menu .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-decoration-color: var(--accent);
	text-underline-offset: 8px;
}

.site-header .nav-toggle {
	display: none;
}

@media (max-width: 900px) {
	.site-header__row {
		flex-wrap: wrap;
	}
	.site-logo img {
		width: 140px;
		height: 48px;
	}
	.site-header .nav-toggle {
		display: inline-flex;
	}
	.site-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		padding-bottom: 12px;
	}
	.site-nav.is-open {
		display: flex;
	}
	.site-nav .menu {
		flex-direction: column;
		gap: 0;
	}
	.site-nav .menu a {
		padding-block: 14px;
		border-bottom: 1px solid #2c2c2c;
		font-size: 20px;
	}
	.site-nav .search-toggle {
		align-self: flex-start;
		margin-top: 10px;
	}
}

/* ---- Search overlay ---- */
.search-overlay {
	background: var(--ink);
	color: #fff;
	border-bottom: 1px solid #2c2c2c;
}

.search-overlay[hidden] {
	display: none;
}

.search-overlay__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 18px;
}

.search-overlay .search-form {
	flex: 1;
}

/* ---- Ad bands ---- */
.ad-band {
	padding-top: 20px;
}

/* ---- Homepage ---- */
.front-top {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding-top: 32px;
}

.front-top > .hero {
	flex: 1.7 1 560px;
	min-width: 0;
}

.front-top__side {
	flex: 1 1 320px;
	min-width: 0;
}

.block {
	padding-top: 40px;
}

.block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 24px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--ink);
}

.grid {
	display: grid;
	gap: 32px 24px;
}

.grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid--portraits {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}

.band {
	margin-top: 40px;
	padding-block: 56px;
}

.band--dark {
	background: var(--ink);
	color: #fff;
}

.columns {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	padding-top: 56px;
}

.columns__col {
	flex: 1 1 440px;
	min-width: 0;
}

/* ---- Footer ---- */
.site-footer {
	margin-top: 48px;
	background: var(--ink);
	color: #d4d4d4;
	font-size: 14px;
}

.site-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	padding-block: 40px;
}

.site-footer .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.site-footer .menu a {
	display: block;
	padding-block: 6px;
	color: #fff;
}

.site-footer .menu a:hover {
	text-decoration: underline;
}

/* A little extra room between the sections and the information pages. */
.site-footer .menu-item--gap {
	margin-left: 20px;
	padding-left: 28px;
	border-left: 1px solid #3a3a3a;
}

@media (max-width: 700px) {
	.site-footer .menu-item--gap {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
}

.site-footer__legal {
	flex-basis: 100%;
	font-size: 12px;
	color: #a3a3a3;
}

/* ---- Fallback template ---- */
.fallback {
	padding-block: 40px;
}

.fallback__title {
	font-size: clamp(36px, 6vw, 72px);
	font-stretch: var(--stretch-title);
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.fallback__content {
	max-width: 700px;
	font-family: var(--font-serif);
	font-size: 20px;
	line-height: 1.65;
}