:root {
  --gold: #d4af37;
  --black: #000000;
  --black3: #1a1a1a;
  --mid-grey: #888888;
  --off-white: #f2f4f3;
}

.prj-filter-bar { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    flex-wrap:wrap; 
    gap:16px; 
    margin-bottom:48px; 
    padding-bottom:24px; 
    border-bottom:1px solid rgba(255,255,255,.06); 
} 
.prj-filter-left { 
    display:flex; 
    flex-wrap:wrap; 
    gap:8px 
} 
.prj-filt { 
    background:transparent; 
    border:1px solid rgba(255,255,255,.1); 
    color:rgba(242,244,243,.5); 
    font-family:'Jost',sans-serif; 
    font-size:11px; 
    letter-spacing:.2em; 
    text-transform:uppercase; 
    padding:9px 18px; 
    border-radius:2px; 
    cursor:pointer; 
    transition:all .25s; 
} 
.prj-filt:hover { 
    border-color:rgba(73,17,28,.38); 
    color:var(--gold) 
} 
.prj-filt.active { 
    background:var(--gold); 
    border-color:var(--gold); 
    color:var(--black); 
    font-weight:500; 
} 
.prj-filter-count { 
    font-size:11px; 
    letter-spacing:.18em; 
    text-transform:uppercase; 
    color:var(--mid-grey); 
    white-space:nowrap; 
} 
.prj-filter-count span { 
    color:var(--gold) 
}

.prj-grid { 
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    grid-auto-rows:320px; 
    gap:14px; 
} 
.prj-card { 
    position:relative; 
    overflow:hidden; 
    border-radius:2px; 
    cursor:pointer; 
    background:var(--black3); 
} 
.prj-card.prj-span-2 { grid-column:span 2 } 
.prj-card.prj-span-tall { grid-row:span 2 } 
.prj-card-img { 
    position:absolute; 
    inset:0; 
    background-size:cover; 
    background-position:center; 
    transition:transform .7s cubic-bezier(.4,0,.2,1); 
} 
.prj-card:hover .prj-card-img { transform:scale(1.07) } 
.prj-card-overlay { 
    position:absolute; 
    inset:0; 
    background:linear-gradient(0deg,rgba(10,9,8,.92) 0%,rgba(10,9,8,.2) 55%,transparent 100%); 
    display:flex; 
    flex-direction:column; 
    justify-content:flex-end; 
    padding:28px; 
    transition:background .35s; 
} 
.prj-card:hover .prj-card-overlay { 
    background:linear-gradient(0deg,rgba(10,9,8,.97) 0%,rgba(10,9,8,.45) 60%,transparent 100%); 
} 
.prj-card-body { 
    flex:1; 
    display:flex; 
    flex-direction:column; 
    justify-content:flex-end; 
    pointer-events:none; 
} 
.prj-cat-tag { 
    font-size:9px; 
    letter-spacing:.28em; 
    text-transform:uppercase; 
    color:var(--gold); 
    margin-bottom:8px; 
    display:block; 
    opacity:.9; 
} 
.prj-card-name { 
    font-family:'Cormorant Garamond',serif; 
    font-size:22px; 
    font-weight:400; 
    letter-spacing:.04em; 
    color:var(--off-white); 
    margin-bottom:6px; 
    line-height:1.2; 
    transition: color 0.3s;
} 
.prj-card.prj-span-2 .prj-card-name { font-size:30px } 
.prj-card-loc { 
    font-size:10px; 
    letter-spacing:.15em; 
    color:rgba(242,244,243,.4); 
    text-transform:uppercase; 
} 
.prj-card-cta { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    background:var(--gold); 
    color:var(--black); 
    font-size:9px; 
    letter-spacing:.2em; 
    text-transform:uppercase; 
    padding:9px 16px; 
    border-radius:2px; 
    font-weight:500; 
    width:fit-content; 
    margin-top:16px; 
    opacity:0; 
    transform:translateY(8px); 
    transition:all .3s; 
    pointer-events:auto;
} 
.prj-card:hover .prj-card-cta { opacity:1; transform:translateY(0) } 

/* Filter animation */ 
.prj-card { transition:opacity .35s ease,transform .35s ease } 
.prj-card.prj-hidden { display: none !important; }

/* No results */ 
.prj-empty { 
    text-align:center; 
    padding:80px 0; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:16px; 
} 
.prj-empty-icon { font-size:40px; color:rgba(73,17,28,.28) } 
.prj-empty p { font-size:14px; letter-spacing:.1em; color:var(--mid-grey) }

/* Mobile Responsive */
@media (max-width: 768px) {
    .prj-grid {
        grid-template-columns: 1fr;
    }
    .prj-card.prj-span-2, .prj-card.prj-span-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
    .prj-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}