/* /work (src/components/WorkIndex.astro). Sizes come from system.css. */
.wi { padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(24px, 3vw, 48px); }
.wi .sh-r a { text-decoration-color: transparent; }
.wi-cat { display: grid; grid-template-columns: minmax(0, 1fr) 58%; gap: 6vw; padding: clamp(56px, 6.1111vw, 104px) 0; border-bottom: 1px solid var(--hair); }
.wi-cat:last-of-type { border-bottom: 0; }
.wi-cat:first-of-type { margin-top: clamp(16px, 1.6667vw, 28px); }
.wi-cat h2 a { text-decoration-color: transparent; }
.wi-cat h2 a:hover { text-decoration-color: currentColor; }
.wi-line { margin-top: 12px !important; max-width: 30em; }
.wi-list { list-style: none; margin-top: 28px !important; border-top: 1px solid var(--hair); }
.wi-list li { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.wi-list .t-label { margin-top: 4px; color: var(--maroon-2); }
.wi-txt .cta-l { display: inline-block; margin-top: 28px; }
/* tiles share one height: each grows in proportion to its own shape (--ar, width / height) */
.wi-strip { display: flex; gap: 8px; align-self: start; }
.wi-tile { position: relative; flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); overflow: hidden; background: #EFE9E8; }
.wi-tile img, .wi-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease; }
.wi-strip:hover .wi-tile img, .wi-strip:hover .wi-tile video { filter: brightness(1.06); }
@media (max-width: 899.98px) {
  .wi-cat { grid-template-columns: 1fr; gap: 24px; }
  .wi-strip { order: -1; gap: 4px; }
}
@media (max-width: 759.98px) {
  .wi .sh { flex-direction: column; gap: 10px; }
  .wi .sh-r { text-align: left; line-height: 2; }
}