@layer components {
  .category-nav,
  .post__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    margin-block: var(--block-space);
  }

  .tag {
    display: inline-block;
    padding-block: var(--inline-space-half);
    padding-inline: var(--inline-space);
    color: var(--color-clay);
    font-size: var(--text-small);
    line-height: 1.2;
    background: var(--color-clay-soft);
    border: var(--border-width) solid transparent;
    border-radius: 100px;
    transition: border-color var(--transition);
  }
  .tag:hover { border-color: var(--color-clay); text-decoration: none; }
  .tag[aria-current] { color: var(--color-on-brand); background: var(--color-clay); }

  .category-nav__all {
    align-self: center;
    font-size: var(--text-small);
    white-space: nowrap;
  }
  .category-nav__all::after { content: " ←"; }
  [dir="ltr"] .category-nav__all::after { content: " →"; }

  /* Phones: the busiest few; the rest are a tap away under "all topics". */
  @media (width < 36rem) {
    .category-nav .tag:nth-of-type(n + 5):not([aria-current]) { display: none; }
  }
}