.sitenav__list {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.sitenav__list a {
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-transform: uppercase;
}

.sitenav__list a:hover {
	color: var(--color-primary);
}

.sitenav__list .current-menu-item > a,
.sitenav__list .current-menu-ancestor > a,
.sitenav__list .current_page_item > a,
.sitenav__list .current_page_parent > a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--color-primary-strong);
	text-underline-offset: 0.5rem;
}

/* With JavaScript on small screens the menu becomes a panel that opens above the
   burger in the bottom-right corner, where a thumb reaches it. */
@media (max-width: 47.99rem) {
	.js .sitenav {
		position: fixed;
		right: var(--margin-mobile);
		bottom: calc(var(--margin-mobile) + var(--navtoggle-size) + var(--space-md) + env(safe-area-inset-bottom, 0px));
		z-index: 60;
		min-width: 13rem;
		padding: var(--space-sm);
		background-color: var(--color-surface-high);
		border: 1px solid var(--color-outline-variant);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-card);
		opacity: 0;
		transform: translateY(0.5rem);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		visibility: hidden;
	}

	.js .sitenav.is-open {
		opacity: 1;
		transform: none;
		visibility: visible;
	}

	.js .sitenav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.js .sitenav__list a {
		display: block;
		padding: 0.875rem var(--space-md);
		border-radius: var(--radius-md);
		font-size: 0.875rem;
	}

	.js .sitenav__list a:hover {
		background-color: var(--color-surface-highest);
	}
}