/* Header brand, from Figma "Frame 16": logo · divider · Lab logo, 16px apart, vertically centred.
   Full Figma size at 1440px wide and up, scaling down proportionally on smaller desktops. */
.mc-brand {
	display: flex;
	align-items: center;
	gap: clamp(11px, 1.111vw, 16px);
	margin: 0;
	line-height: 0;
}

.mc-brand a {
	display: block;
	line-height: 0;
	transition: opacity .2s ease;
}

.mc-brand a:hover,
.mc-brand a:focus-visible {
	opacity: .65;
}

.mc-brand a:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.mc-brand img {
	display: block;
	width: auto;
	max-width: none;
}

.mc-brand__home img {
	height: clamp(26.5px, 2.634vw, 37.93px);
}

.mc-brand__lab img {
	height: clamp(19px, 1.875vw, 27px);
}

/* The divider is a 29px horizontal line in the file, rotated to stand upright */
.mc-brand__divider {
	display: block;
	flex: 0 0 auto;
	width: 1px;
	height: clamp(20px, 2.014vw, 29px);
	overflow: hidden;
	line-height: 0;
}

.mc-brand__divider img {
	width: clamp(20px, 2.014vw, 29px);
	height: 1px;
	transform-origin: 0 0;
	transform: rotate(90deg) translateY(-1px);
}

/* Phones and tablets: the header only has room for the main logo; the Lab logo appears in the open menu */
@media (max-width: 1024px) {
	.site-header .mc-brand__divider,
	.site-header .mc-brand__lab {
		display: none;
	}

	.site-header .mc-brand__home img {
		height: auto;
		width: min(220px, 58vw);
	}
}