/* Header
======================================== */
header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: var(--page-top) var(--page-sides--s) var(--m-header);
	display: grid;
	grid-auto-rows: min-content;
	grid-template-columns: 1fr max-content 1fr;
	column-gap: var(--cols-medianil);
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	color: white;
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 8;
}
@media (max-width: 840px){
	header{
		grid-template-columns: 1fr max-content;
	}
}

/* Logo */
.logo{
	display: flex;
	pointer-events: all;
}
.logo svg{
	height: var(--height-logo);
	fill: white;
}

/* Menu */
menu{
	display: grid;
	grid-auto-rows: min-content;
	text-transform: uppercase;
}
menu > *{
	margin: var(--font-serif--mblock-m);
	pointer-events: all;
}
@media (min-width: 601px){
	menu{
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		column-gap: var(--cols-items);
	}
	menu > *{
		grid-column: var(--index);
	}
}
@media (max-width: 600px){
	menu{
		grid-auto-flow: dense;
		align-content: space-between;
	}
	menu > *{
		grid-row: var(--index);
	}
}

/* Talents */
#modal-talents--trigger.active ~ *{
	text-decoration: none;
}