/* Transparent artwork shares a fixed frame, so changing contrast never shifts the navigation. */
.ys-navbar-logo {
	display: grid;
	width: clamp(7rem, 11vw, 10rem);
	aspect-ratio: 640 / 235;
}

.ys-line-nav__brand .ys-navbar-logo {
	width: clamp(6rem, 8vw, 7rem);
}

.ys-navbar-logo .ys-navbar-logo__image {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ys-navbar-logo .ys-navbar-logo__image--black {
	display: none;
}

header.site-header--line.is-on-light:not(.is-open) .ys-navbar-logo__image--black,
.single-post header:not(.scrolled):not(.site-header--line) .ys-navbar-logo__image--black,
header:has(.main-navigation.toggled):not(.scrolled):not(.site-header--line) .ys-navbar-logo__image--black {
	display: block;
}

header.site-header--line.is-on-light:not(.is-open) .ys-navbar-logo__image--white,
.single-post header:not(.scrolled):not(.site-header--line) .ys-navbar-logo__image--white,
header:has(.main-navigation.toggled):not(.scrolled):not(.site-header--line) .ys-navbar-logo__image--white {
	display: none;
}

/* Legacy headers inverted white text; these now select the actual black artwork instead. */
header.site-header:has(.main-navigation.toggled):not(.site-header--line) .site-branding,
.single-post header.site-header:not(.scrolled):not(.site-header--line) .site-branding {
	filter: none;
	-webkit-filter: none;
}

.ys-navbar-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.ys-navbar-brand:focus-visible,
.ys-line-nav__brand.ys-navbar-brand:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

header.site-header.scrolled:not(.site-header--line) .ys-navbar-logo {
	width: clamp(5.5rem, 9vw, 7.5rem);
}

@media (max-width: 749px) {
	.ys-navbar-logo {
		width: 7rem;
	}
}