.categories, .filters { display: flex; gap: clamp(24px, 5vw, 75px); flex-wrap: wrap; }.categories button, .filters button { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; text-transform: uppercase; font: 600 clamp(14px, 1.3vw, 19px)/1 "DM Sans", Arial, sans-serif; }.categories .is-active, .filters .is-active { text-decoration: underline; text-underline-offset: 5px; }.filter-row { display: flex; justify-content: space-between; align-items: center; gap: 25px; min-height: 14px; margin: 26px 0 42px; }.filter-row[hidden] { display: flex; visibility: hidden; }.view-all-projects[hidden] { display: none; }.filters { gap: 25px; }.filters button { font-size: 11px; }.view-all-projects { text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }.view-all-projects span { padding-left: 8px; font-size: 14px; vertical-align: -1px; }.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 11px; }.project-card .image-placeholder { aspect-ratio: 1 / .94; }.image-placeholder { display: grid; position: relative; place-items: center; overflow: hidden; color: rgba(255,255,255,.68); background: #34312c; }.image-placeholder span { position: relative; z-index: 1; text-transform: uppercase; letter-spacing: .12em; font: 9px "DM Mono", monospace; }.project-card h2, .project-card p { margin: 8px 0 0; font-size: 12px; line-height: 1.2; }.project-card h2 { text-transform: uppercase; font-weight: 600; }.project-card p { margin-top: 4px; }.forest { background: radial-gradient(ellipse at 45% 37%, #1b1c13 0 15%, transparent 16%), linear-gradient(135deg, #100d09, #443622); }.cathedral { background: linear-gradient(105deg, #1c1915, #5a4a37 45%, #12110e); }.sepia { background: radial-gradient(ellipse at 50% 35%, #948979 0 4%, transparent 5%), linear-gradient(120deg, #272019, #75634f); }.midnight { background: radial-gradient(ellipse at 50% 42%, transparent 0 27%, #bac1c0 28% 29%, transparent 30%), linear-gradient(#0a0c12, #1f2028); }.poster { background: linear-gradient(135deg, #101010 5%, #7d5c3b 5% 12%, #171311 12% 60%, #977c5c 60%); }.ember { background: radial-gradient(circle at 30% 58%, #ca5728 0 7%, transparent 8%), linear-gradient(125deg, #2b150f, #6a2816 60%, #140f0d); }.halo { background: radial-gradient(ellipse at 50% 35%, transparent 0 17%, #eef0dc 18% 20%, transparent 21%), linear-gradient(#111 15%, #272624); }.ochre { background: linear-gradient(135deg, #171510 0 25%, #ad7744 26% 48%, #2e2018 49%); }.magenta { background: radial-gradient(circle at 50% 50%, transparent 0 27%, #e22692 28% 29%, transparent 30%), radial-gradient(circle, #45283d 0, #120d18 70%); }
@media (max-width: 620px) { .categories { gap: 22px; }.categories button { font-size: 14px; }.filter-row { align-items: start; flex-direction: column; gap: 17px; margin: 22px 0 32px; }.filters { gap: 16px; }.filters button { font-size: 10px; }.view-all-projects { font-size: 9px; }.project-grid { grid-template-columns: repeat(2, 1fr); gap: 25px 7px; }.project-card h2, .project-card p { font-size: 10px; } }
.filters[hidden] { display: none; }