@layer components {
  .navbar {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding-block: var(--space-3);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--rule-strong);
  }

  /* The register's masthead: serif, small-caps, inked. */
  .navbar__brand {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
  }

  .navbar__menu { display: flex; align-items: baseline; gap: var(--space-1); }

  .navbar__link {
    color: var(--ink-2);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
  }

  .navbar__link:hover { color: var(--ink); background: var(--surface); text-decoration: none; }

  .navbar__link[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
  }

  .navbar__user { margin-left: auto; color: var(--ink-3); font-size: var(--text-xs); }
}