.top { display: flex; justify-content: space-between; align-items: center; }
  .wordmark {
    font-family: var(--font-wordmark);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    padding: 9px 0;
    color: var(--cream);
    text-decoration: none;
  }
  .nav-link {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--cream-soft);
    text-decoration: none;
    display: inline-block;
    padding: 12px 0;
    line-height: 20px;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .nav-link:hover { color: var(--cream); border-bottom-color: var(--cream); }
  .nav-links { display: flex; align-items: center; gap: 6px; margin-right: -13px; }
  .nav-links .nav-link { margin-right: 10px; }
  .social { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--cream-soft); transition: color 0.2s ease; }
  .social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
  .social:hover { color: var(--cream); }
  .social:focus-visible { outline: 1.5px solid var(--cream); outline-offset: 2px; border-radius: 4px; }
  .wordmark:focus-visible, .nav-link:focus-visible, .foot a:focus-visible {
    outline: 1.5px solid var(--cream);
    outline-offset: 6px;
    border-radius: 2px;
  }

  .nav-link[aria-current="page"] { color: var(--cream); border-bottom-color: var(--cream-mute); }
  @media (max-width: 580px) { .top { align-items: flex-start; flex-direction: column; gap: 14px; } }