.work-filters { background: var(--paper); color: var(--ink); padding: 30px 32px; border-top: 1px solid var(--hair-on-light); border-bottom: 1px solid var(--hair-on-light); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: rgba(243, 244, 246, 0.94); }
.filter-inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.filter-count { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; }
.filter-count b { font-family: var(--sans); font-style: normal; font-weight: 800; color: var(--lime-2); }
.filter-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tag {
  padding: 8px 18px;
  border: 1px solid rgba(14, 19, 37, 0.15);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  transition: background .25s, color .25s, border-color .25s;
}
.filter-tag:hover { background: rgba(14, 19, 37, 0.06); }
.filter-tag.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.work-grid-section { background: var(--paper); color: var(--ink); padding: 60px 32px 140px; }
.work-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
}
.wcard {
  cursor: pointer;
  transition: transform .5s var(--ease-out-expo);
  position: relative;
}
.wcard.hide { display: none; }
.wcard:hover { transform: translateY(-6px); }
.wcard-img {
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4/5;
  margin-bottom: 18px;
  position: relative;
}
.wcard-img svg { width: 100%; height: 100%; display: block; }
.wcard-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wcard-title { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.wcard-title em { font-family: var(--serif); font-style: italic; font-weight: 300; }
.wcard-year { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 15px; color: var(--mute-on-light); }
.wcard-cat { margin-top: 6px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-on-light); font-weight: 600; }

/* Grid spans */
.wcard.span-6 { grid-column: span 6; }
.wcard.span-6 .wcard-img { aspect-ratio: 3/2; }
.wcard.span-4 { grid-column: span 4; }
.wcard.span-3 { grid-column: span 3; }
.wcard.span-8 { grid-column: span 8; }
.wcard.span-8 .wcard-img { aspect-ratio: 16/9; }

/* CTA closer */
.work-closer {
  background: var(--ink);
  color: var(--paper);
  padding: 140px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.work-closer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 40% at 50% 100%, rgba(250, 245, 57, 0.10), transparent 60%);
  pointer-events: none;
}
.work-closer h3 {
  font-weight: 900;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.028em;
  max-width: 800px;
  margin: 0 auto 30px;
  text-wrap: balance;
  position: relative;
  z-index: 2;
}
.work-closer h3 em { font-family: var(--serif); font-style: italic; font-weight: 300; }
.work-closer p { max-width: 500px; margin: 0 auto 40px; color: var(--mute-on-dark); position: relative; z-index: 2; }

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(6, 1fr); }
  .wcard.span-6, .wcard.span-8 { grid-column: span 6; }
  .wcard.span-4 { grid-column: span 6; }
  .wcard.span-3 { grid-column: span 3; }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; gap: 40px; }
  .wcard, .wcard.span-6, .wcard.span-4, .wcard.span-3, .wcard.span-8 { grid-column: span 1; }
  .work-filters { padding: 20px; }
  .work-grid-section { padding: 40px 20px 90px; }
  .work-closer { padding: 90px 20px; }
}