/* Homepage previews share one title effect. Keep the installation uncropped. */
#work [data-work-preview][data-preview-variant="installation"] .work-card__visual {
  aspect-ratio: 2 / 3;
}

/* This series uses its complete original portrait, at the column's full width.
   The shared preview title/hover rules below remain the same as other works. */
#work [data-work-series-card="work-04"] .work-card__visual {
  aspect-ratio: auto;
  height: auto;
}
#work [data-work-series-card="work-04"] .work-card__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  transform: none;
}

:is(#work, #tools) .work-preview .work-preview__visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* A clipped backdrop filters every preview medium without changing its size,
   playback or edge pixels. It avoids the transparent seams of image blur. */
:is(#work, #tools) .work-preview__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(1rem, 2vw, 2rem);
  color: #fff;
  font-family: var(--body-font-family);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.3;
  text-align: center;
  text-transform: none;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: none;
  transition: opacity 280ms ease, backdrop-filter 280ms ease;
}

/* Keep the controlled Work 01 lines together inside the centered title block. */
#work .work-preview__title-lines > span {
  display: block;
  white-space: nowrap;
}

/* Tools no longer reserve a second grid row or gap for metadata. */
#tools .tool-card {
  display: block;
}

:is(#work, #tools) .work-preview:is(:hover, :focus) {
  transform: none;
}

:is(#work, #tools) .work-preview:focus-visible .work-preview__title,
:is(#work, #tools) .work-preview:has(:focus-visible) .work-preview__title {
  opacity: 1;
  backdrop-filter: blur(6px) brightness(0.7);
}

@media (hover: hover) and (pointer: fine) {
  :is(#work, #tools) .work-preview:hover .work-preview__title {
    opacity: 1;
    backdrop-filter: blur(6px) brightness(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#work, #tools) .work-preview__title {
    transition: none;
  }
}