.breadcrumb {
    --breadcrumb-accent: #b49b65;
    --breadcrumb-space: 14px;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--breadcrumb-space) 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 650;
    line-height: 24px;
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 10px;
    min-width: 0;
}

.breadcrumb__item + .breadcrumb__item { margin-left: 10px; }
.breadcrumb__item:first-child { flex-shrink: 0; }
.breadcrumb__item--current { color: var(--jewel-ink); font-weight: 750; }

.breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.breadcrumb__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb__link:hover { color: var(--brand-plum); }
.breadcrumb__link:focus-visible { outline: 2px solid var(--brand-plum); outline-offset: 4px; border-radius: 4px; }
.breadcrumb__home-mark { flex: none; width: 20px; height: 20px; stroke: var(--breadcrumb-accent); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.breadcrumb__separator { flex: none; width: 16px; height: 16px; stroke: var(--breadcrumb-accent); stroke-width: .85; stroke-linejoin: round; stroke-linecap: round; }

#main-content > .wrap:has(> .breadcrumb) { padding-top: 0; }
#main-content .breadcrumb + * { margin-block-start: 0; padding-block-start: 0; }

@media (max-width: 650px) {
    .breadcrumb { font-size: 10px; }
    .breadcrumb__item { gap: 7px; }
    .breadcrumb__item + .breadcrumb__item { margin-left: 7px; }
    .breadcrumb__home-mark { width: 17px; height: 17px; }
    .breadcrumb__separator { width: 13px; height: 13px; }
}