/* Selected Work: filters styled like the homepage credits, and films that come up to full brightness on hover. */
.portfolio-page .filters { gap:0 40px; }
.portfolio-page .filters button {
  border:0; border-top:1px solid rgba(231,227,220,.28); border-radius:0; background:none; color:var(--paper);
  padding:10px 0 0; min-width:0; font:400 12px/1.5 'DM Mono',monospace; letter-spacing:.1em; opacity:.55;
  transition:opacity .3s,border-color .3s;
}
.portfolio-page .filters button:hover { opacity:1; border-top-color:rgba(231,227,220,.6); background:none; }
.portfolio-page .filters button.active { opacity:1; color:var(--paper); background:none; border-top-color:var(--paper); }
.portfolio-page .filters button:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
@media (max-width:720px) {
  .portfolio-page .filters { gap:16px 24px; }
  .portfolio-page .filters button { padding:8px 0 0; font-size:11px; }
}

/* Cards rest a little dark, then lift to the film's real exposure on hover or keyboard focus. */
.portfolio-page .row-media { filter:brightness(.72) saturate(.82); transition:filter .5s ease; }
.portfolio-page .row-media:after { transition:opacity .5s ease; }
.portfolio-page .brand-overlay { transition:background .5s ease; }
.portfolio-page .portfolio-row:hover .row-media,
.portfolio-page .portfolio-row:focus-visible .row-media,
.portfolio-page .portfolio-row.preview-active .row-media { filter:none; }
.portfolio-page .portfolio-row:hover .row-media:after,
.portfolio-page .portfolio-row:focus-visible .row-media:after,
.portfolio-page .portfolio-row.preview-active .row-media:after { opacity:0; }
.portfolio-page .portfolio-row:hover .brand-overlay,
.portfolio-page .portfolio-row:focus-visible .brand-overlay,
.portfolio-page .portfolio-row.preview-active .brand-overlay { background:transparent; }
/* Phones can't hover, so show the films at full brightness there. */
@media (hover:none) {
  .portfolio-page .row-media { filter:none; }
}
@media (prefers-reduced-motion:reduce) { .portfolio-page .row-media,.portfolio-page .row-media:after,.portfolio-page .brand-overlay { transition:none; } }