/* ==========================================================================
   Nav / header  (.pf-nav)
   White surface, LR monogram left, condensed uppercase links right.
   Active link = ink; inactive = tertiary; hover/current = ink + accent rule.
   ========================================================================== */

.pf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-3);
  padding: var(--pf-space-3) var(--pf-gutter);
  background: var(--pf-surface);
  color: var(--pf-ink);
}

.pf-nav--bordered {
  border-bottom: var(--pf-border) solid var(--pf-hairline);
}

.pf-nav--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

.pf-nav__logo {
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--pf-ink); /* SVG uses currentColor → flips in dark mode */
}

.pf-nav__links {
  display: flex;
  align-items: center;
  gap: var(--pf-space-3);
  flex-wrap: wrap;
}

.pf-nav__link {
  position: relative;
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  font-size: var(--pf-text-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-ink-tertiary);
  padding-block: var(--pf-space-1);
  transition: color var(--pf-dur) var(--pf-ease);
}

/* accent underline that grows on hover / current */
.pf-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: var(--pf-border-strong);
  background: var(--pf-accent);
  transition: right var(--pf-dur) var(--pf-ease);
}

.pf-nav__link:hover,
.pf-nav__link:focus-visible,
.pf-nav__link[aria-current="page"] {
  color: var(--pf-ink);
}
.pf-nav__link:hover::after,
.pf-nav__link:focus-visible::after,
.pf-nav__link[aria-current="page"]::after {
  right: 0;
}

@media (max-width: 480px) {
  .pf-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pf-space-2);
  }
}