/*
	Top navigation — byhook style: small, quiet, snow background.
	Brand mark left, compact text links right, one pill highlight.
*/
.siteNav {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--widthViewport);
	max-width: var(--widthContent);
	margin: 0 auto;
	padding: 1.1rem 0;
	background: var(--colorSnow);
}

.siteNav__brand {
	display: inline-flex;
	align-items: center;
}

.siteNav__logo {
	height: clamp(2rem, 3vw, 3.6rem);
	width: auto;
}

.siteNav__links {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.2vw, 1.8rem);
	font-size: var(--textSmall);
	font-weight: 500;
}

.siteNav__links a:not(.siteNav__pill):not(.siteNav__cta) {
	position: relative;
	padding: 0.2rem 0;
}

.siteNav__links a:not(.siteNav__pill):not(.siteNav__cta)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--colorBlack);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--easeOut);
}

.siteNav__links a:not(.siteNav__pill):not(.siteNav__cta):hover::after {
	transform: scaleX(1);
}

.siteNav__pill {
	padding: 0.45rem 1rem;
	border-radius: var(--radiusPill);
	background: var(--colorBlack);
	color: var(--colorWhite);
	font-weight: 600;
	transition: opacity 0.3s var(--easeOut);
}

.siteNav__pill:hover {
	opacity: 0.75;
}

.siteNav__cta {
	padding: 0.55rem 1.15rem;
	border-radius: var(--radiusPill);
	background: var(--colorBlack);
	color: var(--colorWhite);
	font-weight: 600;
	transition:
		transform 0.3s var(--easeOut),
		box-shadow 0.3s var(--easeOut);
}

.siteNav__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
	.siteNav__links {
		display: none;
	}
}