/* The artwork and navigation together match the 520px internal masthead. */
body.home.home--separate-header {
	--impc-separate-opening: 520px;
	--impc-separate-nav-row: 4.65rem;
	--impc-separate-nav: calc(var(--impc-separate-nav-row) + 1px);
	--impc-separate-masthead: calc(var(--impc-separate-opening) - var(--impc-separate-nav));
}

body.home.home--separate-header .site-header {
	height: var(--impc-separate-masthead);
	min-height: var(--impc-separate-masthead);
	background: #e9dcc5;
	isolation: isolate;
}

body.home.home--separate-header .masthead-art {
	inset: 0;
	height: 100%;
	background-image: var(--impc-asset-a07cfede134f, url('../images/header-mosaic-single-fish.webp'));
	background-position: center top;
	background-size: cover;
}

body.home.home--separate-header .masthead-art::after {
	background:
		linear-gradient(180deg, transparent 55%, rgba(233, 220, 197, .12) 73%, #e9dcc5 100%),
		linear-gradient(90deg, rgba(250, 246, 236, .23), transparent 52%);
}

body.home.home--separate-header .masthead__inner {
	display: flex;
	align-items: center;
	min-height: var(--impc-separate-masthead);
	padding-block: 2rem 4rem;
}

body.home.home--separate-header .brand-lockup--wordmark {
	width: min(52%, 650px);
	margin: 0;
}

body.home.home--separate-header .brand-wordmark-emblem {
	/* Match the complete identity block, including its subtitle. */
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: auto;
	height: 100%;
	object-fit: contain;
	filter: none;
	box-shadow: none;
}

body.home.home--separate-header .brand-lockup--wordmark .brand-copy {
	--impc-wordmark-caption-size: clamp(.64rem, .85vw, .75rem);
	position: relative;
	min-width: 0;
	/* Portrait emblem width plus a quiet, constant gap beside the full identity. */
	padding-left: calc((2.8em + var(--impc-wordmark-caption-size) * 1.5 + .35rem) * .90625 + .75rem);
	font-size: clamp(1.125rem, 5.6cqw, 1.75rem);
}

body.home.home--separate-header .brand-lockup--wordmark .site-title {
	font-size: 1em;
	line-height: 1.4;
	white-space: normal;
}

body.home.home--separate-header .site-title__line { display: block; white-space: nowrap; }

body.home.home--separate-header .brand-lockup--wordmark .site-description {
	margin-top: .35rem;
	font-size: var(--impc-wordmark-caption-size);
	color: #534939;
}

body.home.home--separate-header .home-intro {
	display: block;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: #e9dcc5;
	overflow: visible;
}

body.home.home--separate-header .home-intro::before,
body.home.home--separate-header .home-intro::after { display: none; }

body.home.home--separate-header .home-intro__inner {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
}

body.home.home--separate-header .portal-nav {
	grid-template-columns: repeat(5, minmax(0, max-content));
	grid-template-rows: var(--impc-separate-nav-row);
	justify-content: start;
	width: 100%;
	margin: 0;
	padding-inline: max(1rem, calc((100% - var(--impc-wide)) / 2));
	border-top: 0;
	border-bottom: 1px solid rgba(161, 125, 66, .25);
	background: linear-gradient(180deg, #e9dcc5, #e6d7bc);
	box-shadow: 0 12px 22px -19px rgba(67, 50, 28, .5);
}

body.home.home--separate-header .portal-nav > a {
	min-height: var(--impc-separate-nav-row);
	justify-content: flex-start;
	padding-inline: clamp(.5rem, 1.5vw, 1.6rem);
	text-align: left;
}
body.home.home--separate-header .portal-nav > a:first-child { padding-left: 0; }

body.home.home--separate-header .section--news {
	padding-block: clamp(2rem, 3.2vw, 3.2rem) clamp(2.6rem, 4vw, 4rem);
	border-top: 0;
}

body.home.home--separate-header .section--news::before { display: none; }
body.home.home--separate-header .section--news .section-heading h2 { font-size: 2rem; line-height: 1.35; }
body.home.home--separate-header .news-lead h3 { font-size: clamp(1.45rem, 1.8vw, 1.7rem); line-height: 1.4; }
body.home.home--separate-header .spotlight-card__overlay h3 { line-height: 1.4; }

@media (max-width: 820px) {
	body.home.home--separate-header {
		--impc-separate-nav-row: 4.2rem;
		--impc-separate-nav-search: 3.5rem;
		--impc-separate-nav: calc(var(--impc-separate-nav-row) * 2 + var(--impc-separate-nav-search) + 1px);
	}
	body.home.home--separate-header .masthead__inner { align-items: flex-start; padding-top: 1.65rem; }
	body.home.home--separate-header .brand-lockup--wordmark { width: min(100%, 650px); }
	body.home.home--separate-header .masthead-art {
		inset: 5.5rem 0 0;
		height: calc(100% - 5.5rem);
		background-color: #f3ecdf;
		background-size: auto 100%;
		background-position: right top;
	}
	body.home.home--separate-header .site-header { background: #f3ecdf; }
	body.home.home--separate-header .masthead-art::after {
		background: linear-gradient(180deg, #f3ecdf 0%, transparent 16%, transparent 65%, #e9dcc5 100%);
	}
	body.home.home--separate-header .portal-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, var(--impc-separate-nav-row)) var(--impc-separate-nav-search);
	}
	body.home.home--separate-header .portal-nav > a:nth-child(odd) { padding-left: 0; }
	body.home.home--separate-header .portal-nav > a:last-child { min-height: var(--impc-separate-nav-search); }
}

@media (max-width: 480px) {
	body.home.home--separate-header .brand-lockup--wordmark .brand-copy { --impc-wordmark-caption-size: .62rem; }
	body.home.home--separate-header .masthead-art {
		/* Keep the shepherd, single-tailed fish and medallion together on phones. */
		background-size: auto 80%;
		background-position: right top;
		background-repeat: no-repeat;
	}
	body.home.home--separate-header .masthead-art::after {
		background: linear-gradient(180deg, #f3ecdf 0%, transparent 18%, transparent 48%, #e9dcc5 79%);
	}
}

@media (max-width: 560px) {
	body.home.home--separate-header .portal-nav { padding-inline: .625rem; }
}

@media (max-width: 360px) {
	body.home.home--separate-header { --impc-separate-nav-row: 5.25rem; }
	body.home.home--separate-header .portal-nav > a {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: .35rem;
		padding-inline: .5rem;
		text-align: left;
	}
	body.home.home--separate-header .portal-nav > a > span { align-items: flex-start; }
	body.home.home--separate-header .portal-nav > a:last-child { flex-direction: row; align-items: center; justify-content: flex-start; }
}