@layer components {
  .nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 5rem;
    z-index: 50;
    border-bottom: var(--xf-border);
    background: var(--xf-paper);
    color: var(--xf-ink);
    font-family: var(--xf-font-body);
  }
  .nav__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); height: 100%; }
  .nav__logo img { width: auto; height: 1.75rem; }
  .nav__links { display: flex; align-items: center; gap: 1.75rem; }
  .nav__link { display: none; font-size: 0.9375rem; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .nav__link:hover { color: var(--xf-ink-hover); text-decoration-line: underline; }
  .nav__link--active { text-decoration-line: underline; }
  .nav__logo:focus-visible, .nav__link:focus-visible { outline: var(--xf-focus-ring); outline-offset: var(--xf-focus-offset); }

  @media (min-width: 768px) { .nav__link { display: inline; } }
}