.portfolio-shell { padding-block: var(--space-8) var(--space-16); }
.portfolio-categories { display: flex; gap: 0.65rem; overflow-x: auto; padding: 0.15rem 0 0.75rem; margin-bottom: var(--space-6); scrollbar-width: thin; overscroll-behavior-inline: contain; }
.portfolio-category { flex: 0 0 auto; min-height: 44px; padding: 0.7rem 1rem; border: 1px solid var(--border); background: transparent; color: var(--ink-muted); font: 400 var(--text-xs)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.portfolio-category:hover { color: var(--ink); border-color: var(--ink-muted); }
.portfolio-category[aria-pressed="true"] { color: var(--canvas); background: var(--ink); border-color: var(--ink); }
.portfolio-gallery { columns: 3; column-gap: clamp(1rem, 2vw, 1.75rem); }
.portfolio-photo { display: block; width: 100%; margin: 0 0 clamp(1rem, 2vw, 1.75rem); padding: 0; border: 0; background: var(--stone); cursor: zoom-in; break-inside: avoid; overflow: hidden; opacity: 0; animation: portfolio-enter 520ms var(--ease-out) forwards; }
.portfolio-photo picture, .portfolio-photo img { display: block; width: 100%; }
.portfolio-photo img { height: auto; transition: transform 700ms var(--ease-out); }
.portfolio-photo:hover img { transform: scale(1.012); }
.portfolio-actions { display: flex; justify-content: center; margin-top: var(--space-5); }
.portfolio-actions [hidden] { display: none; }
.portfolio-empty { color: var(--ink-muted); padding-block: var(--space-6); }
@keyframes portfolio-enter { to { opacity: 1; } }

.portfolio-lightbox[hidden] { display: none; }
.portfolio-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(20, 18, 15, 0.96); color: #fff7e8; padding: clamp(1rem, 3vw, 2.5rem); }
.portfolio-lightbox__stage { width: 100%; height: 100%; display: grid; place-items: center; }
.portfolio-lightbox picture { display: contents; }
.portfolio-lightbox__image { max-width: 100%; max-height: calc(100dvh - 5rem); width: auto; height: auto; object-fit: contain; }
.portfolio-lightbox__control { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,247,232,0.35); background: rgba(20,18,15,0.38); color: inherit; cursor: pointer; font: 300 1.5rem/1 var(--font-body); }
.portfolio-lightbox__close { top: 1rem; right: 1rem; }
.portfolio-lightbox__previous { left: 1rem; top: 50%; transform: translateY(-50%); }
.portfolio-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.portfolio-lightbox__counter { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); font: 400 var(--text-xs)/1 var(--font-body); letter-spacing: 0.08em; }
body.portfolio-lightbox-open { overflow: hidden; }

@media (max-width: 900px) { .portfolio-gallery { columns: 2; } }
@media (max-width: 560px) {
  .portfolio-shell { padding-top: var(--space-5); }
  .portfolio-categories { margin-right: calc(var(--container-pad) * -1); padding-right: var(--container-pad); }
  .portfolio-gallery { columns: 1; }
  .portfolio-lightbox { padding: 0.75rem; }
  .portfolio-lightbox__control { width: 44px; height: 44px; }
  .portfolio-lightbox__previous { left: 0.5rem; }
  .portfolio-lightbox__next { right: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-photo { opacity: 1; animation: none; }
  .portfolio-photo img { transition: none; }
}