/* Shared top nav for Retardmaxx pages — small, sparse, anti-SaaS.
   Linked alongside each page's own stylesheet, which supplies the
   --muted / --ink / --rule custom properties. */

.topnav {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 22px 0 0;
  display: flex;
  gap: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.topnav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.topnav a:hover {
  color: var(--ink);
}

.topnav a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.topnav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

@media (max-width: 520px) {
  .topnav {
    width: min(100% - 24px, 760px);
    gap: 18px;
    padding-top: 18px;
  }
}