.filter-bar{padding:32px 0 64px;border-bottom:1px solid var(--color-border)}.filter-bar .row{display:flex;gap:8px;flex-wrap:wrap}.filter-bar button{padding:10px 18px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);border-radius:999px;border:1px solid var(--color-border);transition:all .2s var(--ease-out);cursor:pointer}.filter-bar button:hover{color:var(--color-text);border-color:var(--color-text)}.filter-bar button.active{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}.filter-bar .count{margin-top:16px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}.work-grid{padding:80px 0 128px;display:grid;grid-template-columns:1fr;gap:24px}@media (min-width:768px){.work-grid{grid-template-columns:repeat(6,1fr);gap:24px;row-gap:80px}}.proj{display:block}.proj .frame{aspect-ratio:16/11;overflow:hidden;border:1px solid var(--color-border);margin-bottom:20px;background:var(--color-muted-bg);position:relative}.proj .frame img{object-fit:cover;transition:transform .7s var(--ease-out)}.proj:hover .frame img{transform:scale(1.04)}.proj .meta-top{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);display:flex;justify-content:space-between;margin-bottom:10px}.proj h3{margin:0 0 8px;font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:500;letter-spacing:-.02em;line-height:1.05}.proj .tags{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}@media (min-width:768px){.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-2{grid-column:span 2}.span-6{grid-column:span 6}.span-3 .frame{aspect-ratio:4/3}.span-4 .frame{aspect-ratio:16/9}.span-2 .frame{aspect-ratio:1/1}}.proj.placeholder .frame{display:flex;align-items:center;justify-content:center}.proj.placeholder .frame:after{content:"More work coming soon";font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}.proj.placeholder h3{color:var(--color-text-muted);font-style:italic}.proj.archive{opacity:.85}.proj .read{display:inline-flex;align-items:center;gap:8px;opacity:0;transform:translateY(4px);transition:all .22s var(--ease-out);margin-top:8px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}.proj:hover .read{opacity:1;transform:translateY(0)}