/* dedicated work page gallery */
.work-gallery-wrap {
  min-width: 0;
  padding-top: clamp(118px, 13.5svh, 156px);
  transition: opacity .25s linear, transform .45s cubic-bezier(.22,1,.36,1), filter .25s linear;
}

.work-gallery {
  --work-grid-row: clamp(13px, 1.15vw, 22px);
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: var(--work-grid-row);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--work-gap);
  transition: opacity .2s linear, transform .26s cubic-bezier(.22,1,.36,1);
}

.work-tile {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #121212;
  isolation: isolate;
  opacity: 0;
  clip-path: inset(16% 0 0);
  transform: translateY(42px);
  transition:
    opacity .42s linear calc(var(--stagger, 0) * 42ms),
    clip-path .7s cubic-bezier(.22,1,.36,1) calc(var(--stagger, 0) * 42ms),
    transform .7s cubic-bezier(.22,1,.36,1) calc(var(--stagger, 0) * 42ms),
    filter .18s linear,
    translate var(--project-elevation-duration, .333s) var(--project-elevation-easing, cubic-bezier(.22,1,.36,1)),
    scale var(--project-elevation-duration, .333s) var(--project-elevation-easing, cubic-bezier(.22,1,.36,1));
}

.work-tile.is-landscape {
  grid-column: span 1;
  grid-row: span 13;
}

.work-tile.is-portrait {
  grid-column: span 1;
  grid-row: span 21;
}

.work-tile.is-medium {
  grid-column: span 1;
  grid-row: span 15;
}

.work-tile.is-square {
  grid-column: span 1;
  grid-row: span 17;
}

.work-tile.has-cover .work-tile-copy {
  display: none;
  opacity: 0;
  background: none;
}

.work-tile img,
.work-tile-media,
.work-visual-slab {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-tile img {
  object-fit: cover;
  filter: saturate(1.04) contrast(1.02) brightness(.86);
  transform: scale(1.01);
  transition: transform .45s cubic-bezier(.22,1,.36,1), filter .18s linear;
}

.work-tile-media {
  display: block;
}

.work-tile-media img {
  display: block;
  transform: none;
}

.work-visual-slab {
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 76px);
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--tone) 48%, transparent), transparent 30%),
    linear-gradient(135deg, var(--tone2), #050505 72%);
}

.work-visual-slab strong {
  color: var(--tone);
  font-size: clamp(44px, 8.5vw, 132px);
  font-weight: 620;
  letter-spacing: -.065em;
  line-height: .9;
  text-transform: uppercase;
  mix-blend-mode: screen;
}

.work-tile-copy {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: clamp(14px, 2.4vw, 26px);
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}

.work-tile-copy b {
  font-size: var(--type-heading-size);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--type-heading-line);
}

.work-tile-copy span,
.work-tile-copy small {
  color: rgba(255,255,255,.68);
  font-size: var(--type-detail-size);
  line-height: var(--type-detail-line);
  letter-spacing: var(--tracking-body);
}

.work-tile-copy small {
  color: var(--soft);
  font-family: var(--mono);
  font-size: var(--type-micro-size);
  line-height: var(--type-micro-line);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.work-tile:hover,
.work-tile:focus-visible,
.work-tile.is-active {
  filter: brightness(1.08);
}

.work-tile:hover img,
.work-tile:focus-visible img,
.work-tile.is-active img {
  filter: saturate(1.12) contrast(1.04) brightness(.96);
  transform: scale(1.045);
}

.work-tile.has-cover:hover img,
.work-tile.has-cover:focus-visible img,
.work-tile.has-cover.is-active img {
  transform: none;
}

.work-ready .work-tile {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
}

.work-project-open .work-gallery-wrap,
.work-project-opening .work-gallery-wrap {
  opacity: 0;
  pointer-events: none;
  filter: blur(10px);
  transform: translateY(-22px) scale(.985);
}

@media (max-width: 980px) {
  .work-gallery-wrap {
    padding-top: 0;
  }

  .work-gallery {
    --work-grid-row: clamp(12px, 2vw, 20px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-tile.is-landscape {
    grid-column: span 1;
    grid-row: span 14;
  }

  .work-tile.is-portrait {
    grid-row: span 22;
  }

  .work-tile.is-medium {
    grid-row: span 16;
  }

  .work-tile.is-square {
    grid-row: span 18;
  }

}

@media (max-width: 560px) {
  .work-gallery {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
  }

  .work-tile,
  .work-tile.is-landscape,
  .work-tile.is-portrait,
  .work-tile.is-medium,
  .work-tile.is-square {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }

  .work-tile.is-landscape,
  .work-tile.is-medium,
  .work-tile.is-square {
    aspect-ratio: 4 / 3;
  }

  .work-tile.is-portrait {
    aspect-ratio: 4 / 5;
  }

}