/* Navigation brand is intentionally cropped to remove whitespace in the source logo. */
.brand {
	display: flex;
	width: 212px;
	height: 48px;
	align-items: center;
	gap: 8px;
}

.brand .brand-mascot {
	width: 34px;
	height: 48px;
	object-fit: cover;
	object-position: center 40%;
	border-radius: 50%;
}

.brand-wordmark {
	display: block;
	width: 170px;
	height: 48px;
	overflow: hidden;
}

.brand .brand-wordmark img {
	width: 170px;
	height: 48px;
	max-width: none;
	object-fit: cover;
	object-position: center 52%;
}

.language-switcher select {
	max-width: 128px;
	padding: 5px 23px 5px 8px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: #f3f7fd;
	color: var(--ink);
	font: 800 12px "DM Sans", Arial, sans-serif;
	cursor: pointer;
}

.language-switcher select:hover,
.language-switcher select:focus {
	border-color: #b8d3f7;
	outline: 0;
}

@media (max-width: 640px) {
	.brand {
		width: 175px;
		height: 38px;
		gap: 6px;
	}

	.brand .brand-mascot {
		width: 27px;
		height: 38px;
	}

	.brand-wordmark,
	.brand .brand-wordmark img {
		width: 140px;
		height: 38px;
	}
}