.work-hero { align-items: center; }
.work-hero p { max-width: 26rem; justify-self: end; }
.work-categories { margin-top: clamp(4rem, 7vw, 6rem); }
.work-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 2rem;
  min-height: 13.25rem;
  padding: 2.75rem clamp(1.25rem, 4.2vw, 3.75rem);
  border-top: 1px solid rgba(255,255,255,0.5);
  overflow: hidden;
  background: #000;
  transition: background-color 330ms ease;
}
.work-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.5); }
.work-row::after { position: absolute; inset: auto 0 0; z-index: 4; height: 1px; background: rgba(255,255,255,0.5); content: ""; }
.work-row__heading { position: relative; z-index: 3; }
.work-row__number { display: block; margin-bottom: 1.15rem; font-size: 1rem; line-height: 1; color: rgba(255,255,255,0.64); transition: color 330ms ease; }
.work-row h2 { margin: 0; font-size: clamp(1.898rem,3.2485vw,2.92rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; color: #fff; transition: color 330ms ease; }
.work-row__description { position: relative; z-index: 2; margin: 0; font-size: 1rem; line-height: 1.5; text-align: right; transition: opacity 230ms ease; }
.work-row--reversed { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); }
.work-row--reversed .work-row__heading { grid-column: 2; grid-row: 1; }
.work-row--reversed .work-row__description { grid-column: 1; grid-row: 1; text-align: left; }
.work-row__previews { position: absolute; inset: 0 3.5% 0 46%; z-index: 1; pointer-events: none; }
.work-row__link { position: absolute; inset: 0; z-index: 5; }
.work-row--linked { cursor: pointer; }
.work-row--reversed .work-row__previews { inset: 0 46% 0 3.5%; }
.work-preview { position: absolute; bottom: -3rem; z-index: var(--card-z); width: var(--card-width); aspect-ratio: var(--card-ratio); left: var(--card-left); border-radius: 0.65rem; background: #d4d4d2; opacity: 0; transform: translateY(130%) rotate(var(--card-angle)); transition: transform 560ms var(--ease-out-expo), opacity 250ms ease; }
.work-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (hover:hover) and (pointer:fine) {
  .work-row.is-active { background: #f0f0ee; }
  .work-row.is-active h2 { color: #151515; }
  .work-row.is-active .work-row__number { color: #555; }
  .work-row.is-active .work-row__description { opacity: 0; }
  .work-row.is-active .work-preview { opacity: 1; transform: translateY(var(--card-lift)) rotate(var(--card-angle)); transition-delay: var(--card-delay); }
  .work-row.is-exiting .work-preview { animation: work-card-exit 360ms var(--ease-out-expo) both; transition: none; }
  .work-row.is-reset .work-preview { transition: none; }
}
@keyframes work-card-exit {
  0% { opacity: 1; transform: translateY(var(--card-lift)) rotate(var(--card-angle)); }
  18% { opacity: 0.85; transform: translateY(calc(var(--card-lift) - 7px)) rotate(var(--card-angle)); }
  100% { opacity: 0; transform: translateY(130%) rotate(var(--card-angle)); }
}
@media (max-width:720px) {
  .work-hero p { justify-self: start; }
  .work-row, .work-row--reversed { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 1.25rem; min-height: 0; }
  .work-row--reversed .work-row__heading, .work-row--reversed .work-row__description { grid-column: 1; grid-row: auto; }
  .work-row__description { text-align: left; }
  .work-row__previews { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .work-row, .work-row h2, .work-row__number, .work-row__description, .work-preview { transition: none; }
  .work-row.is-exiting .work-preview { animation: none; }
}