/* Full available-width band: normal document flow, never 100vw/negative bleed.
   Blog and every article variant share the blog880 frame and responsive gutters. */
.renew-breadcrumb-band { background: #fafafa; }
.renew-breadcrumb-band > .renew-container { max-width: var(--renew-composition); }
.renew-breadcrumb {
  display: block;
  margin: 0;
  padding-block: 24px;
  color: #575a5c;
  font: 400 14px/1.6 Arial, sans-serif;
}
.renew-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; padding: 0; margin: 0; }
.renew-breadcrumb li { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.renew-breadcrumb li + li::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 11px;
  margin-inline: 12px;
  align-self: center;
  background: var(--renew-heading-rule);
  --renew-breadcrumb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='m1.5 1.5 4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--renew-breadcrumb-chevron) center / contain no-repeat;
  mask: var(--renew-breadcrumb-chevron) center / contain no-repeat;
}
/* Article breadcrumbs precede main; do not scope their links to .renew-main.
   Explicit visited colour prevents the browser's default purple links. */
.renew-breadcrumb a,
.renew-breadcrumb a:is(:visited, :hover, :focus-visible) { color: var(--renew-link); text-decoration: none; }
.renew-breadcrumb [aria-current="page"] { color: #575a5c; }
@media (max-width: 600px) {
  .renew-breadcrumb { font-size: 13px; }
  .renew-breadcrumb li + li::before { margin-inline: 8px; }
}