/**
 * Breadcrumb trail.
 *
 * One position indicator shared by every page except the home page, the
 * Terminal and the Journal — the last two are applications whose header
 * already fills the space beneath it, and the home page is the root, so a
 * trail there would name only itself.
 *
 * It lives INSIDE the hero, as the first thing in the column the heading
 * sits in, not in a strip of its own between the header and the content. A
 * strip would need its own background, and it would either match the page
 * (and be pointless) or not match it (and read as a seam). In the column it
 * inherits the surface it is drawn on, aligns with the heading by
 * construction rather than by a width that has to be kept in sync, and reads
 * as the first line of the page rather than a bar bolted above it.
 *
 * Every crumb but the last is a link. The last is the page you are on,
 * marked aria-current="page" and deliberately not a link: a link to here does
 * nothing, and screen readers announce the current position from the
 * attribute rather than from the styling.
 */

.breadcrumb {
  margin: 0 0 20px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

/* The separator trails its own crumb rather than leading the next one, so a
   trail that wraps on a narrow screen ends a line with "/" instead of
   starting the next line with one. */
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 10px;
  color: var(--line-strong, rgba(29, 29, 31, 0.16));
  font-size: 11px;
  /* Punctuation, not a step: keep it out of the trail a screen reader reads. */
  speak: never;
}

.breadcrumb a,
.breadcrumb span {
  font-family: var(--font-main, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

.breadcrumb a {
  color: var(--faint, #86868b);
  text-decoration: none;
  transition: color 160ms ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--text, #1d1d1f);
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--accent, #0071e3);
  outline-offset: 3px;
  border-radius: 2px;
}

.breadcrumb [aria-current="page"] {
  color: var(--muted, #5f666d);
  font-weight: 600;
}

@media (max-width: 640px) {
  .breadcrumb {
    margin-bottom: 16px;
  }

  .breadcrumb ol {
    row-gap: 4px;
  }

  .breadcrumb li:not(:last-child)::after {
    margin: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb a {
    transition: none;
  }
}