/* ============================================================
   gallery.css — projects page header + filters + grid
   ============================================================ */

.work-head{padding:80px 0 0}
.work-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,8vw,92px);line-height:.98;letter-spacing:-.02em;margin:18px 0 22px}
.work-head .lede{font-size:17px;color:var(--fg2);max-width:60ch;line-height:1.7}

.filters{padding:40px 0 8px;display:flex;flex-direction:column;gap:16px}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;border:0;padding:0;margin:0}
.filter-row .flabel{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);
  padding:0;float:none;flex:0 0 92px;
}
.filter-btns{display:flex;flex-wrap:wrap;gap:8px}
.filter-btns button{
  font-size:12.5px;letter-spacing:.04em;color:var(--fg2);
  background:none;border:1px solid var(--line);border-radius:99px;
  padding:8px 16px;cursor:pointer;transition:all .2s;
}
.filter-btns button:hover{border-color:var(--line2);color:var(--fg)}
.filter-btns button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

.work-grid-wrap{padding:44px 0 40px}
.work-empty-note{
  margin-top:60px;padding:40px;border:1px dashed var(--line2);border-radius:14px;
  text-align:center;
}
.work-empty-note h2{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:10px}
.work-empty-note p{font-size:14.5px;color:var(--fg2);max-width:48ch;margin:0 auto;line-height:1.65}

@media(max-width:600px){
  .filter-row{align-items:flex-start}
  .filter-row .flabel{flex-basis:100%}
}