.unk-header {
	display: block;
	position: fixed;
	z-index: 20;
	width: 100%;
	padding-block: var(--unk-space-xs);
	color: var(--unk-color-text);
	pointer-events: none;

	top: 50%;
	transform: translateY(-50%);
}

.unk-header .unk-header__part {
	margin-block: var(--unk-space-xs);
}

.unk-header__logo-layer {
	position: fixed;
	z-index: 21;
	top: 50%;
	right: 0;
	left: 0;
	width: 100%;
	color: var(--unk-color-text);
	transform: translateY(-50%);
	pointer-events: none;
}

body:not([data-template="template-home"]) .unk-header__logo-layer {
	mix-blend-mode: difference;
}

.unk-header__logo a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}

.unk-header__logo a:focus-visible {
	outline: 1px solid var(--unk-color-accent);
	outline-offset: 0.2em;
	box-shadow: none;
}

.unk-header__logo {
	display: flex;
}

html.unk-document--project-preview .unk-header__logo-layer {
	opacity: 0;
}

body[data-template="single-project"] .unk-header__logo-layer {
	display: none;
}

.unk-header__logo .unk-logo {
	display: block;
	width: auto;
	max-width: min(9rem, 48vw);
	height: auto;
}

.unk-header__description {
	max-width: 232px;
}

.unk-header .unk-menu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.unk-header .unk-menu--vertical {
	flex-direction: column;
}

.unk-header .unk-menu a {
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}

.unk-header .unk-menu a:has(.unk-effect--split-animating) {
	pointer-events: none !important;
}

.unk-header__menu a[aria-current="page"] {
	display: inline-block;
	position: relative;
}

.unk-header__menu
	a[aria-current="page"]:not(:has(.unk-effect--split-animating))::after {
	content: "";
	position: absolute;
	top: 0.05em;
	right: -0.3em;
	box-sizing: border-box;
	width: 3px;
	height: 3px;
	background-image:
		linear-gradient(var(--unk-color-accent), var(--unk-color-accent)),
		linear-gradient(var(--unk-color-accent), var(--unk-color-accent));
	background-position:
		top left,
		top right;
	background-repeat: no-repeat;
	background-size:
		100% 1px,
		1px 100%;
	filter: drop-shadow(0 0 3px var(--unk-color-accent))
		drop-shadow(
			0 0 8px color-mix(in srgb, var(--unk-color-accent) 60%, transparent)
		);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.unk-header__menu
		a[aria-current="page"]:not(:has(.unk-effect--split-animating))::after {
		animation: unk-header-corner-in 0.35s ease-out both;
	}
}

@keyframes unk-header-corner-in {
	from {
		background-size:
			0% 1px,
			1px 0%;
	}
	50% {
		background-size:
			100% 1px,
			1px 0%;
	}
	to {
		background-size:
			100% 1px,
			1px 100%;
	}
}

.unk-header .unk-menu a:hover,
.unk-header .unk-menu a:focus-visible {
	color: var(--unk-color-accent);
}

.unk-header__sound-button {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-transform: inherit;
	cursor: pointer;
	pointer-events: auto;
}

.unk-header__sound-button:hover,
.unk-header__sound-button:focus-visible {
	color: var(--unk-color-accent);
}

@media (max-width: 47.999em) {
	.unk-header {
		inset: 0;
		height: 100vh;
		height: 100svh;
		transform: none;
	}

	.unk-header .full-container,
	.unk-header .row {
		height: 100%;
	}

	.unk-header .row {
		position: relative;
	}

	.unk-header .unk-header__part {
		position: absolute;
		width: auto;
		max-width: none;
		margin-block: 0;
	}

	.unk-header .unk-header__part--description {
		display: none;
	}

	.unk-header__logo .unk-logo {
		width: auto;
		height: 18px;
		max-width: calc(50vw - (var(--unk-space-md) * 2));
	}

	.unk-header .unk-header__part--menu {
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		text-align: left;
	}

	.unk-header .unk-header__part--clock {
		top: calc(var(--unk-space-md) - var(--unk-space-xs));
		right: 0;
	}

	.unk-header .unk-header__part--sound {
		right: 0;
		bottom: calc(var(--unk-space-md) - var(--unk-space-xs));
	}
}

@media (min-width: 48em) {
	.unk-header::before {
		content: "";
		position: absolute;
		z-index: 0;
		inset: 0;
		pointer-events: none;
	}

	.unk-header > .full-container {
		position: relative;
		z-index: 1;
	}

	.unk-header:not(.unk-header--content-hidden)::before {
		pointer-events: auto;
	}

	body[data-template="single-project"] .unk-header::before {
		pointer-events: none;
	}

	.unk-header .unk-header__part {
		margin-block: 0;
	}
}

@media (forced-colors: active) {
	.unk-header__menu a[aria-current="page"]::after {
		border-top: 1px solid CanvasText;
		border-right: 1px solid CanvasText;
	}

	body:not([data-template="template-home"]) .unk-header__logo-layer {
		mix-blend-mode: normal;
	}
}