/* Optical rows. Existing source quality limits are retained; excessive product
   and context sizes are reduced to coherent desktop and mobile ceilings.
   Container units reserve every image's geometry before network/image loading.
   Browsers without container units retain the existing, functional V21 layout. */
@supports(width:1cqw){
  .work-cinema[data-grid-v22]{--grid-edge-space:24px}
  .work-cinema[data-grid-v22] .cinema-sequence{
    align-items:end;
    row-gap:0;
    padding-block:0!important;
    margin-block:0!important;
  }
  .work-cinema[data-grid-v22] a.artwork[data-grid-managed]{
    container-type:inline-size;
    align-self:end;
    height:auto;
    --grid-media-width:var(--grid-media-width-desktop);
    --grid-film-width:var(--grid-film-width-desktop);
  }
  .work-cinema[data-grid-v22] [data-grid-managed] .photo{
    aspect-ratio:auto!important;
    height:calc(var(--grid-media-width) * var(--grid-bound-height) + 2 * var(--grid-edge-space))!important;
    max-height:none!important;
    overflow:hidden;
  }
  .work-cinema[data-grid-v22] [data-grid-managed] .quality-surface{
    display:contents;
    transform:none!important;
  }
  .work-cinema[data-grid-v22] [data-grid-managed] img.single-photo{
    position:absolute;
    inset:auto;
    width:var(--grid-media-width)!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    left:calc(50% - var(--grid-media-width) * var(--grid-bound-center-x))!important;
    top:calc(var(--grid-edge-space) - var(--grid-media-width) * var(--grid-bound-top))!important;
    object-fit:initial;
    transform:none!important;
    clip-path:none;
  }
  /* The existing gallery code wraps the poster when a movie enters view. Keep
     both the poster and film on the identical, reserved photographic canvas. */
  .work-cinema[data-grid-v22] [data-grid-managed] .motion-frame{
    position:absolute;
    inset:auto;
    width:var(--grid-media-width)!important;
    height:calc(var(--grid-media-width) * var(--grid-source-hw))!important;
    left:calc(50% - var(--grid-media-width) * var(--grid-bound-center-x))!important;
    top:calc(var(--grid-edge-space) - var(--grid-media-width) * var(--grid-bound-top))!important;
    max-height:none!important;
  }
  .work-cinema[data-grid-v22] [data-grid-managed] .motion-frame :is(img.single-photo,video.product-film){
    inset:0!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain;
  }
  .work-cinema[data-grid-v22] [data-grid-managed]:not([data-grid-optical]) .motion-frame{
    width:var(--grid-film-width)!important;
    height:calc(var(--grid-film-width) * var(--grid-film-hw))!important;
    left:calc(50% - var(--grid-film-width) / 2)!important;
    top:calc((100% - var(--grid-film-width) * var(--grid-film-hw)) / 2)!important;
  }
  @media(min-width:701px){
    .page-work .work-grid.work-cinema[data-grid-v22]{
      width:calc(100% - 64px);
      max-width:1280px;
      margin-inline:auto;
    }
    .work-cinema[data-grid-v22] .cinema-sequence{
      width:100%;
      max-width:none!important;
      margin-inline:0!important;
    }
  }
  @media(max-width:700px){
    .work-cinema[data-grid-v22]{--grid-edge-space:12px}
    .work-cinema[data-grid-v22] a.artwork[data-grid-managed]{--grid-media-width:var(--grid-media-width-mobile);--grid-film-width:var(--grid-film-width-mobile)}
  }
}