/* Header
==================================== */
header{
	width: 100vw;
	padding: var(--sides) var(--sides) 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: min-content;
	column-gap: var(--colsXS);
	justify-items: center;
	z-index: 9;
}
.desktop.page-index header:not(:hover),
.mobile.page-index header:not(:active){
	color: white;
	mix-blend-mode: difference;
}
.page-project header{
	scroll-snap-align: start;
}
.page-research header{
	position: fixed;
	top: 0;
	left: 0;
	color: white;
	mix-blend-mode: difference;
}
.menu-item{
	text-transform: uppercase;
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
}
#logo{
	min-width: 16ch;
}
.menu-item-double{
	text-align: center;
}
.desktop .menu-item-double:focus > wrap:first-child,
.desktop .menu-item-double:hover > wrap:first-child,
.desktop .menu-item-double:not(:hover):not(:focus) > wrap:last-child,
.mobile #logo > wrap:last-child,
.mobile #project-title > wrap:first-child,
.mobile #project-title::before,
.mobile #project-title::after{
	display: none;
}

@media (min-width: 769px){
	header > :first-child{
		position: sticky;
		position: -webkit-sticky;
		top: var(--sides);
	}
}
@media (max-width: 768px){
	header{
		grid-template-columns: 1fr max-content 1fr;
	}
	#project-nav > span{
		display: none;
	}
	#project-nav{
		display: contents;
	}
	.menu-item-left{
		grid-row: 1;
		grid-column: 1;
		justify-self: flex-start;
	}
	.menu-item-right{
		grid-row: 1;
		grid-column: 3;
		justify-self: flex-end;
	}
	#switch-color{
		display: none;
	}
	#project-title wrap:first-child,
	#project-title::before,
	#project-title::after{
		display: none;
	}
	#project-title wrap:last-child{
		display: inline-block;
	}
	.desktop #project-title:focus::before,
	.desktop #project-title:hover::before,
	.desktop #project-title:focus::after,
	.desktop #project-title:hover::after{
		display: initial;
	}
}

/* Logo
==================================== */
.logo-g{
	margin-right: 0.06em;
}
/* .logo-u{
	margin-right: 0;
} */
.logo-a{
	margin-right: -0.04em;
}
.logo-s{
	margin-right: 0.02em;
}
.logo-c{
	margin-right: 0.04em;
}
/* .logo-h{
	margin-right: 0;
}
.logo-space{
	margin-right: 0;
} */
.logo-s2{
	margin-right: 0.02em;
}
.logo-t{
	margin-right: 0.04em;
}
.logo-u2{
	margin-right: 0.06em;
}
.logo-d{
	margin-right: -0.06em;
}
.logo-i{
	margin-right: -0.06em;
}
/* .logo-o{
	margin-right: 0;
} */
@media (max-width: 320px){
	.logo-space,
	.logo-s2,
	.logo-t,
	.logo-u2,
	.logo-d,
	.logo-i,
	.logo-o{
		display: none;
	}
}