/* ═══ WORK · SECTION 2 — FILTER BAR (sticks under the nav) ═══ */
.filters{position:sticky;top:var(--nav-h);z-index:40;
  background:rgba(10,10,10,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* scroll progress through the grid, drawn along the bar's bottom edge */
.f-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--cut);
  z-index:2;transition:opacity .4s ease}

.chips{display:flex;gap:8px;overflow-x:auto;padding:clamp(13px,2vh,18px) var(--gut);
  scrollbar-width:none;transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-family:inherit;cursor:pointer;background:none;
  border:1px solid var(--border);color:var(--muted);
  font-size:11.5px;letter-spacing:.1em;font-weight:600;padding:10px 15px;
  display:inline-flex;align-items:center;gap:9px;position:relative;overflow:hidden;
  transition:color .3s ease,border-color .3s ease,padding .4s cubic-bezier(.2,.7,.2,1)}
.chip i{font-style:normal;font-size:10px;color:var(--dim);transition:color .3s ease}
.chip::before{content:"";position:absolute;inset:-1px;background:var(--cut);
  transform:translateX(-101%) skewX(-12deg);
  transition:transform .42s cubic-bezier(.2,.7,.2,1);z-index:0}
.chip:hover::before{transform:translateX(0) skewX(-12deg)}
.chip > *{position:relative;z-index:1}
.chip:hover{color:#0A0A0A}
.chip:hover i{color:rgba(10,10,10,.6)}
.chip.is-on{background:var(--cut);border-color:var(--cut);color:#0A0A0A}
.chip.is-on i{color:rgba(10,10,10,.6)}
.chip.is-on::before{display:none}

/* the bar tightens once you're into the grid */
.filters.is-tight .chips{padding-top:9px;padding-bottom:9px}
.filters.is-tight .chip{padding-top:8px;padding-bottom:8px}