.gh-head-inner {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;
	font-weight: 700;
	font-size: 1rem;
	filter: drop-shadow(0 0 0.75rem oklch(from var(--black) l c h / calc(alpha - 0.7)));

	a {
		text-decoration: none;
	}
}

.gh-head-menu .nav {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	align-items: center;
	color: var(--black);
	background: var(--yellow);
	border: 0.15rem var(--magenta) solid;
	border-radius: 100rem;
	padding: 0.1rem 0.5rem;

	li {
		padding: 0.25rem 0.5rem;
		border-radius: 100rem;
		transition: opacity 0.3s ease;
	}

	&:hover li {
		opacity: 0.1;
	}

	&:hover li:hover,
	&:hover a:hover {
		opacity: 1;
	}
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.5rem 1rem;
	margin: 1rem;
	border-radius: 0.25rem;
	background: light-dark(var(--deep_green), var(--cream));
	color: light-dark(var(--white), var(--black));
	transform: translateY(calc(-100% - 1rem));
	transition: transform 0.1s;
	z-index: 1000;

	&:focus-within {
		transform: translateY(0%);
	}
}