/* Category filter above the project grid (built by filter.js after Framer hydrates).
   Loaded in <head> so the bar's space is reserved from first paint: no layout shift.
   !important is needed to beat Framer's later stylesheet and inline column styles. */
section[data-framer-name="Section - Works"] { padding-top: 36px !important; }

.wf-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 0 24px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.wf-bar::-webkit-scrollbar { display: none; }
.wf-bar.is-in { opacity: 1; transform: none; }

.wf-track { display: flex; gap: 8px; width: max-content; margin: 0 auto; }

.wf-pill {
  appearance: none; border: 0; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 16px;
  background: rgb(240, 240, 247); color: rgba(25, 26, 33, .6);
  font: 300 12px/1 "TWK Lausanne Pan 300", "TWK Lausanne Pan 300 Placeholder", sans-serif;
  letter-spacing: .02em; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.wf-pill:hover { background: rgb(230, 230, 240); color: rgb(25, 26, 33); }
.wf-pill[aria-pressed="true"] { background: rgb(25, 26, 33); color: #fff; }
.wf-pill:focus-visible { outline: 2px solid rgb(25, 26, 33); outline-offset: 2px; }
.wf-count { font-size: 10px; opacity: .5; }

/* Filtered: flatten Framer's round-robin columns into one grid and keep the original
   card order, so the remaining cards close up left-to-right with no holes. */
.wf-on > div { display: contents !important; }
.wf-on .wf-out { display: none !important; }

@media (max-width: 809.98px) {
  section[data-framer-name="Section - Works"] { padding-top: 44px !important; }
  .wf-bar { top: 8px; padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
}