/* breadcrumbs.css — trail below the fixed topbar. Tokens only. */
.breadcrumbs {
  max-width: var(--container);
  margin-inline: auto;
  /* clear the fixed topbar here, so the page content below doesn't have to */
  padding: calc(var(--nav-h, 88px)) var(--gutter) 0;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px 10px; }
.breadcrumbs__item:not(:first-child)::before {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg); opacity: .55; flex: none;
}
.breadcrumbs__link { color: var(--text-muted); text-decoration: none; border-radius: 4px; transition: color .2s var(--ease-spring, ease); }
@media (hover: hover) and (pointer: fine) { .breadcrumbs__link:hover { color: var(--blue); } }
.breadcrumbs__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.breadcrumbs__current { color: var(--text-primary); font-weight: 500; }
@media (max-width: 560px) { .breadcrumbs__list { font-size: 13px; gap: 4px 8px; } }

/* the breadcrumb bar already clears the topbar -> drop the nav-h clearance
   from the page wrappers so the top isn't double-spaced */
.has-breadcrumbs .work-index,
.has-breadcrumbs .about,
.has-breadcrumbs .contact { padding-top: clamp(18px, 3.5vh, 40px); }
.has-breadcrumbs .project__hero {padding-top: clamp(18px, 3vh, 36px);}
.has-breadcrumbs .contact { padding-top: clamp(18px, 3.5vh, 40px); }