.work { border-top: 1px solid var(--rule-2); }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 28px 40px; margin-bottom: clamp(40px, 5vw, 80px); }
.work__title { min-width: 0; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }

.filters button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 14px 9px;
  border: 1px solid var(--rule-2); color: var(--fg);
  transition: border-color .25s var(--ease-ui);
}
@media (hover: hover) { .filters button:hover { border-color: var(--fg); } }

.filters button[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }

.wgrid { position: relative; display: flex; flex-wrap: wrap; column-gap: var(--wg, 24px); row-gap: clamp(36px, 4vw, 60px); align-items: flex-start; }

.wk { flex: none; min-width: 0; }
.wk[hidden] { display: none !important; }
.wk__hit { display: block; width: 100%; text-align: left; position: relative; }
.wk__hit:focus-visible { outline-offset: 5px; }
.wk__ph { position: relative; display: block; overflow: hidden; }
.wk__ph > .lv { position: absolute; inset: 0; }
.wk__ph .lv__img { transition: filter .35s var(--ease-ui); }
.wk__cap { display: flex; gap: 12px; padding-top: 14px; }
.wk__txt { min-width: 0; flex: 1; }
.wk__t { font-size: var(--t-small); line-height: var(--lh-text); text-wrap: balance; }
@media (min-width: 641px) { .wk__t b { white-space: nowrap; } }
.wk__t b { font-weight: 500; }
.wk__m { margin-top: 7px; color: var(--fg2); }
.wk__c { margin-top: 5px; color: var(--fg2); }
@media (hover: hover) and (pointer: fine) {
  .wk__hit { cursor: var(--cur-open); }
  .wk__hit:hover .lv:not(.is-pre):not(.is-moving) .lv__img { filter: brightness(.9); }
}

.wk__hit:focus-visible + .wk__cap .ul { background-size: 100% var(--ul-w, max(1px, .055em)); transition: background-size .45s var(--ease-light), color .2s var(--ease-ui); }
@media (hover: hover) { .wk__hit:hover + .wk__cap .ul { background-size: 100% var(--ul-w, max(1px, .055em)); transition: background-size .45s var(--ease-light), color .2s var(--ease-ui); } }

@media (max-width: 640px) {

  .filters { display: grid; grid-template-columns: repeat(4, auto); gap: 0; width: 100%; }
  .filters button { justify-content: center; gap: 8px; min-height: 44px; padding: 10px 8px 9px; }
  .filters button + button { margin-left: -1px; }
  .filters button:hover, .filters button:focus-visible, .filters button[aria-pressed="true"] { position: relative; z-index: 1; }
  .wk.is-compact .wk__c { display: none; }

  .wk.is-compact .wk__p { display: block; font-weight: 300; }
  .wk.is-compact .wk__d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: pre; }
  .wk.is-compact .wk__cap { padding-top: 10px; }
}
@media (max-width: 359px) {
  .filters button { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 339px) {
  .filters { grid-template-columns: repeat(2, 1fr); }
  .filters button:nth-child(3) { margin-left: 0; }
  .filters button:nth-child(n+3) { margin-top: -1px; }
}

@media (max-width: 300px) {
  .wk.is-compact .wk__t, .wk.is-compact .wk__m { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
@media (forced-colors: active) {
  .filters button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 6px; border: 2px solid CanvasText; }
}