/* Breadcrumb bar (§3) */

.breadcrumb {
	background: var(--mist-dark);
}

.breadcrumb__inner {
	padding-block: 16px;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.breadcrumb__item a {
	color: var(--slate);
	transition: color 150ms ease-out;
}

.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible {
	color: var(--navy);
}

.breadcrumb__sep {
	color: var(--slate-light);
}

.breadcrumb__current {
	color: var(--navy);
	font-weight: 600;
}