.portfolio-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0 0 2rem;
}

.portfolio-filter-bar[hidden] { display: none; }

.portfolio-filter-bar button {
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid #ffffff2a;
  border-radius: 999px;
  background: #ffffff08;
  color: #d4d9e4;
  font: inherit;
  font-size: .9rem;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.portfolio-filter-bar button:hover {
  border-color: #cbd5ff80;
  background: #ffffff12;
}

.portfolio-filter-bar button[aria-pressed="true"] {
  border-color: #d7e2ff;
  background: #d7e2ff;
  color: #0a0d14;
}

.portfolio-filter-bar button:focus-visible {
  outline: 2px solid #d7e2ff;
  outline-offset: 3px;
}

.portfolio-card[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .portfolio-filter-bar button { transition: none; }
}