/* Portfolio: industry filter + live site cards (links to /work/<slug>/) */
.pf-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.pf-filter button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:500;letter-spacing:-.02em;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.pf-filter button span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pf-filter button:hover{border-color:#c9cbc4;background:var(--soft)}
.pf-filter button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.pf-filter button[aria-pressed=true] span{color:#ffffffa6}
.pf-filter button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;list-style:none;margin:0;padding:0}
.pf-grid li{min-width:0;animation:pf-in .35s ease both}
.pf-grid li[hidden]{display:none}
@keyframes pf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pf-card{display:block;color:inherit;text-decoration:none}
.pf-shot{position:relative;aspect-ratio:3/2;border-radius:7px;overflow:hidden;background:var(--soft);box-shadow:inset 0 0 0 1px #0000000d;transition:transform .4s,box-shadow .3s}
.pf-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pf-card:hover .pf-shot{transform:translateY(-5px);box-shadow:0 12px 25px #0c17200c}
.pf-card:hover .pf-shot img{transform:scale(1.025)}
.pf-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0 0}
.pf-meta>div{min-width:0}
.pf-meta h3{font-size:19px;line-height:1.35;letter-spacing:-.035em;font-weight:550}
.pf-meta p{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.7}
.pf-meta p span{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.pf-meta p span::after{content:"";width:1px;height:11px;background:#cfd1cb}
.pf-card:hover .circle-arrow{background:var(--accent);border-color:var(--accent)}
.pf-card:focus-visible{outline:none}
.pf-card:focus-visible .pf-shot{outline:2px solid var(--ink);outline-offset:3px}
@media(min-width:761px) and (max-width:980px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}.pf-meta h3{font-size:17px}.pf-meta p{font-size:13px}}
@media(max-width:760px){.pf-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--section-gutter)*-1) 24px;padding:0 var(--section-gutter);scrollbar-width:none}.pf-filter::-webkit-scrollbar{display:none}.pf-filter button{flex:none;height:38px;padding:0 14px;font-size:13px}.pf-grid{grid-template-columns:1fr;gap:32px}.pf-meta{padding-top:16px}.pf-meta h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.pf-grid li{animation:none}.pf-shot,.pf-shot img{transition:none}}
.pf-note{margin-top:40px;color:var(--muted);font-size:13px;line-height:1.7}
.lang-link{color:inherit;text-decoration:underline;text-underline-offset:3px}