.breadcrumbs {
  margin-top: calc(var(--line-height-em)*2);
  margin-bottom: calc(var(--line-height-em)*2);
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb {
  max-width: 35em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breadcrumb__carat {
  color: var(--extra-muted);
}

.breadcrumb__link, .breadcrumb__last {
  font-size: var(--fs-small);
  padding: 0 .5em;
}


a.breadcrumb__link {
  color: var(--burnt-orange);
  text-decoration: none;
}

a.breadcrumb__link:hover {
  color: var(--bright-orange);
}


.breadcrumb__last {
  color: var(--muted);
  font-weight: var(--fw-medium);
}


/* overlay specific styling */

.overlay {
  position: absolute;
  top: var(--line-height-em);
  left: 0;
  z-index: 1;
  background: var(--burnt-orange);
  padding: calc(var(--line-height-em)/2) calc(var(--line-height-em)*2);
}

.overlay .breadcrumbs {
  margin: 0;
}

.overlay .breadcrumb__carat {
  color: var(--background-white);
}

.overlay .breadcrumb__link {
  color: var(--yellow);
}

.overlay .breadcrumb__link:hover {
  color: var(--white);
}

.overlay .breadcrumb__last {
  font-weight: var(--fw-normal);
  color: var(--background-white);
}

@media print {
  .breadcrumbs {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media screen and (max-width:639px) {
  .overlay {
    padding: calc(var(--line-height-em)/2) calc(var(--line-height-em)/2);
  }
}