/* Portfolio grid + filter pills (was page-portfolio inline CSS). */
.pf-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.pf-filter-city{margin-bottom:38px;padding-top:14px;border-top:1px solid var(--border)}
.pf-pill{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--border);padding:12px 22px;border-radius:1px;cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.pf-pill:hover{color:var(--text);border-color:var(--bronze)}
.pf-pill.active{background:var(--bronze);color:var(--bg);border-color:var(--bronze)}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pf-card{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#0e1c13,#13261a)}
.pf-card.hide{display:none}
.pf-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.pf-card:hover img{transform:scale(1.06)}
.pf-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,11,.86) 0%,rgba(8,16,11,.06) 46%,transparent 72%);pointer-events:none}
.pf-cmeta{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.pf-cloc{font-family:var(--serif);font-style:italic;font-size:19px;color:#fff;margin:0 0 3px;line-height:1.22}
.pf-ctype{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin:0}

@media (max-width:900px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr}.pf-pill{padding:11px 18px}}