/* ═══════════════════════════════════════════════════
   SHARED COMPONENTS — thepulsegoeson.com
   Net-new shared components only (breadcrumb, etc.).
   Linked after tokens.css on pages that use these.
   Does NOT consolidate pre-existing per-page CSS.
═══════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.breadcrumb { padding: 20px 0 0; }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-label); font-size: var(--size-label);
  letter-spacing: 0.06em; color: var(--text-muted);
}
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; margin: 0 8px; color: var(--text-faint); opacity: 0.5;
}
.breadcrumb__item a {
  color: var(--text-muted); text-decoration: none;
  transition: color 200ms ease;
}
.breadcrumb__item a:hover { color: var(--gold-dim); }
.breadcrumb__item a:focus-visible { outline-offset: 1px; }
.breadcrumb__item[aria-current="page"] { color: var(--gold-dim); }
.breadcrumb__ellipsis { display: none; }
@media (max-width: 640px) {
  .breadcrumb__item:not(:first-child):not(.breadcrumb__ellipsis):not(:nth-last-child(-n+2)) { display: none; }
  .breadcrumb__ellipsis { display: flex; }
}