.pill-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  margin: 22px auto 0;
}
.pill-btn {
  appearance: none;
  padding: 10px 22px;
  border: 1px solid #776f7d;
  border-radius: 999px;
  background: #302b34;
  color: #eee9ef;
  font: 500 15px/1.3 system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.pill-btn:hover { background: #44384c; border-color: #baa9c7; }
.pill-btn.active { background: #745598; border-color: #b699d3; color: #fff; }
.pill-btn:focus-visible { outline: 3px solid #f3c66b; outline-offset: 3px; }
.content-container { display: block; margin-top: 30px; }
.view-section { display: none; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px 34px; }
.view-section.visible { display: flex; }
.view-section[hidden] { display: none !important; }
.family-intro { flex: 0 0 100%; display: flex; justify-content: center; padding: 0 0 24px; border-bottom: 1px solid #514650; }
.family-image { width: min(260px, 100%); height: auto; }
.family-image > img { width: 100%; height: 190px; object-fit: contain; opacity: 1; }
#img-wrap-brass-family > img { border-radius: 12px; }
@media (max-width: 600px) {
  .pill-navigation { gap: 8px; margin-top: 18px; }
  .pill-btn { padding: 9px 15px; font-size: 14px; }
  .content-container { margin-top: 22px; }
  .view-section { gap: 24px 18px; }
    .family-intro { padding-bottom: 18px; }
  .family-image > img { height: 140px; }
  .gallery-item.pair-group { gap: 12px; }
}