#nav-path {
  width: 100vw - var(--side-margin);
  font-family: var(--font-family-mono);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-on-primary);
  margin: 4rem var(--side-margin) 1rem var(--side-margin);
  transform: translateX(-0.5rem);
}

#nav-path a {
  line-height: 2;
}

#nav-path a {
  text-decoration: none;
  color: var(--color-on-primary);
  transition: color var(--transition-snap), border-color var(--transition-snap);
}

#nav-path a.from:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

#nav-path a.to:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-on-primary);
  border-color: transparent;
}

@media (max-width: 768px) {
  #nav-path {
    margin-top: 2rem;
  }

  #nav-path a {
    border: var(--border-weight) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 4px 8px;
  }
  #nav-path a.to:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-on-primary);
  }
}