/* Site nav, shared by the terminal (/), /flix/ and /hire/.
   Terminal-path style: ~/resume  ~/lab  ~/flix  ~/hire on one line,
   two cells apart, wrapping at narrow widths. Needs --accent, --dim and
   --flower-text (or --flower) from the page's palette. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2ch;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  white-space: nowrap;
}

.site-nav a {
  color: var(--dim);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.25s ease, color 0.25s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
  background-size: 100% 1px;
}

/* ~/hire is the call to action */
.site-nav a.site-nav-cta {
  color: var(--flower-text, var(--flower));
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

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