.portfolio { min-width: 0; }
.portfolio__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(10px, 2.5vw, 32px);
  margin-bottom: 24px;
}
.portfolio__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  font-size: 13px;
  text-decoration: none;
  opacity: 0.7;
}
.portfolio__nav a[aria-current='page'] { border-bottom-color: currentColor; opacity: 1; }
.portfolio__nav a:hover, .portfolio__nav a:focus-visible { opacity: 1; }
.portfolio__nav a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.portfolio__panel[hidden] { display: none; }
.portfolio__heading {
  margin: 32px 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.035em;
}
.portfolio__panel h2:focus { outline: none; }
.portfolio__empty { margin-block: 40px; font-size: 13px; opacity: 0.75; }

@media (prefers-reduced-motion: no-preference) {
  .portfolio__panel { animation: view-enter 260ms ease-in; }
}

@keyframes view-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 767px) {
  .portfolio { margin-top: 32px; padding-top: 12px; border-top: 1px solid #fff4de40; }
  .portfolio__nav { margin-bottom: 8px; }
}