.breadcrumbs {
  align-items: center;
  color: var(--color-subtle-dark);
  column-gap: var(--inline-space-half);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8em;
  min-inline-size: 0;
  row-gap: 0.2rem;

  > * {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The "›" marks the hierarchy step — muted like the links (not brighter), but
   visible enough to read as a separator. A touch larger so the small glyph
   doesn't disappear. */
.breadcrumbs__separator {
  color: var(--color-subtle-dark);
  font-size: 1.15em;
  line-height: 1;
  user-select: none;
}

.breadcrumbs__current {
  color: var(--color-ink);
}