nav.bcrumb {
    border-block-end: 1px solid var(--clr-line);
    background-color: var(--clr-surface);
}

nav.bcrumb .shell {
    padding-block: var(--space-half);
}

ol.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-half);
    margin: 0;
    padding: 0;
    list-style: none;
}

ol.breadcrumb li {
    list-style: none;
    font-size: var(--font-size-small);
    color: var(--clr-muted);
}

ol.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-inline-start: var(--space-half);
    color: var(--clr-line);
}

ol.breadcrumb a {
    color: var(--clr-muted);
    text-decoration: none;
}

ol.breadcrumb a:hover {
    color: var(--clr-brand);
    text-decoration: underline;
}

ol.breadcrumb [aria-current="page"] {
    color: var(--clr-text);
    font-weight: 500;
}

/* Below 60rem the topbar mark hangs on the left edge and overflows down into
   this bar, so indent the trail past its footprint. */
@media screen and (max-width: 60rem) {
    nav.bcrumb .shell {
        padding-inline-start: calc(var(--gutter) + var(--logo-size-topbar) + var(--space-half));
    }
}