/* Nav — .site-nav (top bar), .breadcrumb */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line-0);
}
.site-nav__brand {
  font-weight: var(--weight-semibold);
  color: var(--fg-0);
  text-decoration: none;
  font-size: var(--size-2);
}
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-4);
  margin-inline-start: auto;
}
.site-nav__link {
  color: var(--fg-1);
  text-decoration: none;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-2);
}
.site-nav__link:hover { color: var(--fg-0); }
.site-nav__link[aria-current="page"] {
  color: var(--fg-0);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.breadcrumb {
  font-size: var(--size-0);
  color: var(--fg-2);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}
.breadcrumb li + li::before {
  content: "/";
  color: var(--fg-2);
  margin-inline-end: var(--space-2);
}
.breadcrumb a { color: var(--fg-1); }
.breadcrumb [aria-current="page"] { color: var(--fg-0); }