/* The masthead: mark, links and Book now on white, sticky. Under 1080px the links become a
   drawer that nav.js opens; without the script they wrap under the bar. */

.masthead {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-masthead);
	background-color: var(--tst-white);
	border-block-end: var(--border-hairline) solid var(--color-border);
}

.masthead__bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--masthead-height);
	padding-block: var(--space-1);
}

.masthead__brand {
	display: block;
	flex-shrink: 0;
	color: var(--tst-ink);
}

.masthead__logo {
	width: var(--masthead-logo);
	height: var(--masthead-logo);
}

.masthead__nav {
	margin-inline-start: auto;
}

.masthead__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-05) var(--space-3);
	padding: 0;
	list-style: none;
}

.masthead__link {
	display: inline-block;
	padding-block: var(--space-1);
	font-size: var(--font-2);
	font-weight: var(--weight-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 calc(100% - 0.35rem);
	background-repeat: no-repeat;
	background-size: 0 var(--border-hairline);
	transition: background-size var(--duration) var(--ease), color var(--duration) var(--ease);
}

.masthead__link:hover,
.masthead__link:focus-visible,
.masthead__link[aria-current="page"] {
	color: var(--color-heading);
	background-size: 100% var(--border-hairline);
	text-decoration: none;
}

.masthead__cta {
	flex-shrink: 0;
}

.masthead__toggle {
	display: none;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tst-ink);
}

.masthead__toggle-lines,
.masthead__toggle-lines::before,
.masthead__toggle-lines::after {
	position: absolute;
	inset-inline-start: 50%;
	width: 1.375rem;
	height: 1.5px;
	margin-inline-start: -0.6875rem;
	background-color: currentColor;
	transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.masthead__toggle-lines {
	inset-block-start: 50%;
}

.masthead__toggle-lines::before,
.masthead__toggle-lines::after {
	content: "";
	inset-inline-start: 0;
	margin-inline-start: 0;
}

.masthead__toggle-lines::before { transform: translateY(-7px); }
.masthead__toggle-lines::after { transform: translateY(7px); }

.masthead__toggle[aria-expanded="true"] .masthead__toggle-lines { background-color: transparent; }
.masthead__toggle[aria-expanded="true"] .masthead__toggle-lines::before { transform: rotate(45deg); background-color: var(--tst-ink); }
.masthead__toggle[aria-expanded="true"] .masthead__toggle-lines::after { transform: rotate(-45deg); background-color: var(--tst-ink); }

@media (max-width: 1079px) {
	.masthead__bar {
		flex-wrap: wrap;
	}

	.masthead__cta {
		margin-inline-start: auto;
	}

	.masthead__nav {
		order: 3;
		width: 100%;
		margin-inline-start: 0;
	}

	/* With the script, the list becomes a drawer under the bar. */
	.has-js .masthead__toggle {
		display: block;
	}

	.has-js .masthead__list {
		display: none;
		flex-direction: column;
		gap: 0;
		padding-block: var(--space-1) var(--space-2);
	}

	.has-js .masthead.is-open .masthead__list {
		display: flex;
	}

	.has-js .masthead__item + .masthead__item {
		border-block-start: var(--border-hairline) solid var(--color-border);
	}

	.has-js .masthead__link {
		display: block;
		padding-block: var(--space-15);
		font-size: var(--font-3);
		background: none;
	}

	.has-js .masthead__link[aria-current="page"] {
		text-decoration: underline;
	}
}

@media (max-width: 479px) {
	:root {
		--masthead-height: 4.5rem;
		--masthead-logo: 3.5rem;
	}

	.masthead__bar {
		gap: var(--space-15);
	}
}