/* Home "our work": a tall track with a stage pinned inside it, as tall as its works up to a screen. Three columns of
   16:9 works (two on phones); js/sections/home-gallery.js stands the grid up from lying flat and moves the columns against each other as the
   page scrolls. Works sit in black and white; under the pointer (or pressed) a work comes back to its real colours,
   with its name and category over it. */
.hg-track{position:relative;height:200vh}
.hg-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:30rem;overflow:hidden;padding:0 max(var(--gutter),calc((100% - 1120px) / 2));perspective:1200px;perspective-origin:50% 0}
.hg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:100%;transform-origin:50% 0;will-change:transform;backface-visibility:hidden}
.hg-col{display:grid;gap:8px;align-content:start;will-change:transform}
.hg-item{position:relative;backface-visibility:hidden;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--mist);
  text-decoration:none;color:var(--white)}
.hg-item img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transition:transform .8s var(--ease-out),filter .5s var(--ease-out)}
.hg-item.ph1,.hg-item.ph2{filter:grayscale(1);transition:filter .5s var(--ease-out)}
.hg-item:active img,.hg-item:active,.hg-item:focus-visible img,.hg-item:focus-visible{filter:none}
.hg-item.ph1{background:radial-gradient(70% 80% at 70% 30%,var(--ph-video-1),transparent 70%),linear-gradient(140deg,var(--ph-video-2),var(--ph-video-3))}
.hg-item.ph2{background:radial-gradient(70% 80% at 30% 70%,var(--ph-video-1),transparent 70%),linear-gradient(220deg,var(--ph-video-2),var(--ph-video-3))}
.hg-cap{position:absolute;inset-inline:0;bottom:0;padding:36px 16px 14px;display:grid;gap:2px;background:linear-gradient(to top,var(--hero-shade-55),transparent);
  opacity:0;translate:0 8px;transition:opacity .35s var(--ease-out),translate .35s var(--ease-out)}
.hg-cap b{font-size:var(--fs-17);font-weight:var(--fw-bold)}
.hg-cap small{font-size:var(--fs-13);color:var(--white-a85)}
@media (hover:hover) and (pointer:fine){.hg-item:hover img{transform:scale(1.05);filter:none}.hg-item.ph1:hover,.hg-item.ph2:hover{filter:none}.hg-item:hover .hg-cap{opacity:1;translate:0 0}}
.hg-item:focus-visible .hg-cap{opacity:1;translate:0 0}
.hg-more{display:flex;justify-content:center;padding:32px var(--gutter) 80px}
@media (max-width:760px){
  .hg-track{height:180vh}
  .hg-stage{padding:0 var(--gutter-m)}
  .hg-cols{grid-template-columns:repeat(2,minmax(0,1fr))}   /* two columns of taller works fill a phone screen */
  .hg-item{aspect-ratio:3/4}
  .hg-cap{display:none}
  .hg-more{padding:24px var(--gutter-m) 56px}
}
@media (prefers-reduced-motion:reduce){.hg-track{height:auto}.hg-cols{transform:none!important}.hg-stage{position:static;height:auto}}
/* the heading above comes in line by line out of a blur, like the original's staggered intro */
.js #work>.p-head>.reveal{transform:none;filter:blur(10px);transition:opacity .45s var(--ease-out),filter .45s var(--ease-out);transition-delay:calc(var(--i,0) * .12s)}
.js #work>.p-head>.reveal.in{filter:blur(0)}
@media (prefers-reduced-motion:reduce){.js #work>.p-head>.reveal{filter:none!important}}