nav {
	position: fixed;
	top: 0;
	width: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: nowrap;
	
	z-index: 1024;
	
	box-shadow: #0004 0px 2px 4px;
	background-color: var(--color-bg-light);
}
nav .nav-container {
	height: 4.3rem; /* NOTE: This is tied to `.page-container` and `nav .menu-mobile` */
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	
	background-color: inherit;
	z-index: 1025;
}

nav .width-governor {
	width: 50vw; /* NOTE: This is tied to `.page` */
	padding: 0 4rem; /* NOTE: This is tied to `.page` and many more */
	
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1rem;
}
@media only screen and (max-width: 1600px) {
	nav .width-governor {
		width: 70vw; /* NOTE: This is tied to `.page` */
	}
}
@media only screen and (max-width: 1300px) {
	nav .width-governor {
		width: 80vw; /* NOTE: This is tied to `.page` */
	}
}
@media only screen and (max-width: 1000px) {
	nav .width-governor {
		width: 100vw; /* NOTE: This is tied to `.page` */
		padding: 0 1rem; /* NOTE: This is tied to `.page` */
	}
}

nav .width-governor > * {
	position: relative;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	
	text-align: center;
}
nav .button-list {
	height: 100%;
}

nav .branding {
	justify-content: flex-start !important;
}
nav .branding img {
	height: 2rem;
}
nav .branding span {
	font-weight: bold;
}

nav .menu-container {
	justify-content: flex-end !important;
}
nav .menu {
	gap: 2rem;
}

nav .menu-mobile {
	display: none;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	
	max-height: calc(100vh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */
	max-height: calc(100dvh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */
	padding: 2rem;
	
	overflow-y: auto;
}
nav .menu-mobile-button {
	display: none;
}
nav .menu-mobile-page-overlay {
	position: absolute;
	top: 100%;
	width: 100vw;
	height: 100vh;
	
	display: none;
	
	background-color: #0004;
}
@media only screen and (max-width: 600px) {
	nav .menu {
		display: none;
	}
	nav .menu-mobile {
		display: flex;
	}
	nav .menu-mobile-button {
		display: inline-flex;
	}
	nav .menu-mobile-page-overlay {
		display: block;
	}
}