/* Work page — filters + masonry gallery */
.work-filters {
  position: static; z-index: 40; background: rgba(247,244,240,.88);
  backdrop-filter: blur(10px); border-bottom: 1px solid rgba(17,17,17,.08);
}
.work-filters-row {
  max-width: 1320px; margin: 0 auto; padding: clamp(14px,2.2cqw,29px) clamp(20px,5.27cqw,69.6px);
  display: flex; align-items: center; gap: clamp(24px,4.39cqw,58px); overflow-x: auto; scrollbar-width: none;
}
.work-filters-row::-webkit-scrollbar { display: none; }
.filter-btn {
  flex: 0 0 auto; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
  font-size: clamp(13.5px,1.65cqw,21.8px); font-weight: 500; color: var(--ink); opacity: .55;
  border-bottom: 1px solid transparent; transition: opacity .35s, border-color .35s, font-weight .1s;
}
.filter-btn.is-active { font-weight: 700; opacity: 1; border-bottom-color: var(--ink); }

.work-filters-row-mobile {
  padding: 14px 20px; display: flex; align-items: center; gap: 10px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.work-filters-row-mobile::-webkit-scrollbar { display: none; }

/* .only-desktop / .only-mobile (display:none) lose to these rows' own display:flex
   (same specificity, later in the cascade), so both rows showed at every width.
   Re-assert the swap at the shared 1024px breakpoint. */
@media (max-width: 1023.98px) { .work-filters-row.only-desktop { display: none; } }
@media (min-width: 1024px) { .work-filters-row-mobile.only-mobile { display: none; } }
.filter-pill {
  flex: 0 0 auto; min-height: 40px; background: transparent; color: var(--ink);
  border: 1px solid rgba(17,17,17,.14); border-radius: 999px; padding: 9px 18px;
  cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
  transition: background .3s, color .3s;
}
.filter-pill.is-active { background: var(--ink); color: var(--paper); }

.work-gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: clamp(90px,14.5cqw,191.4px); grid-auto-flow: dense;
  gap: clamp(16px,2.64cqw,34.8px);
}
@media (max-width: 1023.98px) {
  .work-gallery {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows: clamp(64px,10.11cqw,133.4px);
    gap: clamp(10px,1.54cqw,20.3px);
  }
}

.work-tile {
  margin: 0; position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.07); cursor: pointer;
  transition: opacity .5s ease, filter .5s ease, transform .35s ease;
}
.work-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.work-tile .sheen-sweep {
  position: absolute; inset: -35% -55%;
  background: linear-gradient(101deg, transparent 34%, rgba(255,255,255,.35) 50%, transparent 66%);
  animation: sheenSweep 16s ease-in-out infinite;
}
.work-tile figcaption {
  position: absolute; left: 20px; bottom: 20px; font-size: 12.5px; font-weight: 600;
  color: var(--paper); text-shadow: 0 2px 10px rgba(0,0,0,.55); letter-spacing: -0.005em;
}
.work-tile.is-leaving { opacity: 0; transform: scale(.86); filter: saturate(.3) blur(1px); pointer-events: none; }
.work-tile.is-entering { opacity: 0; transform: scale(.92); pointer-events: none; }
.work-tile.is-hidden { display: none !important; }

/* grid-column / grid-row spans per tile — index matches each figure's
   position in the `cats` / `capsEN` arrays from the approved source. */
.wk-0  { grid-column: span 1; grid-row: span 3; }
.wk-1  { grid-column: span 1; grid-row: span 3; }
.wk-2  { grid-column: span 1; grid-row: span 4; }
.wk-3  { grid-column: span 2; grid-row: span 2; }
.wk-4  { grid-column: span 1; grid-row: span 2; }
.wk-5  { grid-column: span 1; grid-row: span 3; }
.wk-6  { grid-column: span 2; grid-row: span 2; }
.wk-7  { grid-column: span 1; grid-row: span 2; }
.wk-8  { grid-column: span 1; grid-row: span 3; }
.wk-9  { grid-column: span 1; grid-row: span 2; }
.wk-10 { grid-column: span 2; grid-row: span 3; }
.wk-11 { grid-column: span 1; grid-row: span 3; }
.wk-12 { grid-column: span 1; grid-row: span 2; }
.wk-13 { grid-column: span 1; grid-row: span 3; }
.wk-14 { grid-column: span 1; grid-row: span 2; }
.wk-15 { grid-column: span 1; grid-row: span 3; }
.wk-16 { grid-column: span 1; grid-row: span 2; }
.wk-17 { grid-column: span 1; grid-row: span 3; }
.wk-18 { grid-column: span 1; grid-row: span 2; }
.wk-19 { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1023.98px) {
  .wk-0  { grid-column: span 1; grid-row: span 2; }
  .wk-1  { grid-column: span 1; grid-row: span 2; }
  .wk-2  { grid-column: span 1; grid-row: span 3; }
  .wk-3  { grid-column: span 2; grid-row: span 1; }
  .wk-4  { grid-column: span 1; grid-row: span 2; }
  .wk-5  { grid-column: span 1; grid-row: span 2; }
  .wk-6  { grid-column: span 2; grid-row: span 1; }
  .wk-7  { grid-column: span 1; grid-row: span 2; }
  .wk-8  { grid-column: span 1; grid-row: span 2; }
  .wk-9  { grid-column: span 1; grid-row: span 2; }
  .wk-10 { grid-column: span 2; grid-row: span 2; }
  .wk-11 { grid-column: span 1; grid-row: span 2; }
  .wk-12 { grid-column: span 1; grid-row: span 2; }
  .wk-13 { grid-column: span 1; grid-row: span 2; }
  .wk-14 { grid-column: span 1; grid-row: span 2; }
  .wk-15 { grid-column: span 1; grid-row: span 2; }
  .wk-16 { grid-column: span 1; grid-row: span 2; }
  .wk-17 { grid-column: span 1; grid-row: span 2; }
  .wk-18 { grid-column: span 1; grid-row: span 2; }
  .wk-19 { grid-column: span 2; grid-row: span 1; }
}