/* Work grid, filters and lightbox.
   Lifted verbatim from prototypes/06-chapters/work.html, which is the design
   contract. Change it there first if the design itself is changing. */

/* ---------- filter ---------- */
.filters{padding:0 0 1.6rem;margin-bottom:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips button{border:1px solid var(--line-2);border-radius:999px;
  padding:.5rem 1rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:300;color:var(--dim);white-space:nowrap;
  transition:color .3s var(--e-out-quart),border-color .3s,background-color .3s}
.chips button:hover{color:var(--wash);border-color:var(--line-2)}
.chips button[aria-pressed="true"]{background:var(--wash);color:var(--ink);border-color:var(--wash)}
.chips button i{font-style:normal;opacity:.55;margin-left:.45rem;font-size:.9em}
.count{margin-top:.9rem}

/* ---------- masonry ---------- */
.grid{columns:3;column-gap:clamp(.6rem,1.4vw,1.1rem)}
@media (max-width:1024px){.grid{columns:2}}
@media (max-width:620px){.grid{columns:1}}
.item{break-inside:avoid;margin-bottom:clamp(.6rem,1.4vw,1.1rem);position:relative;
  cursor:pointer;opacity:0;transform:translateY(16px) scale(.99);
  transition:opacity .55s var(--e-out-quart),transform .55s var(--e-out-quart)}
.item[data-in]{opacity:1;transform:none}
.item[hidden]{display:none}
.item .fr{position:relative;overflow:hidden;background:#0E0D0B}
.item .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e-out-quart),
  filter .6s var(--e-out-quart);filter:saturate(.75) brightness(.82)}
.item:hover .fr img{transform:scale(1.06);filter:saturate(1) brightness(1)}
/* hover reveals the metadata, as on the current site */
.item .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(.9rem,2vw,1.4rem);
  background:linear-gradient(0deg,rgba(14,13,11,.9) 0%,rgba(14,13,11,.15) 55%,transparent);
  opacity:0;transition:opacity .5s var(--e-out-quart)}
.item:hover .ov,.item:focus-visible .ov{opacity:1}
.item .ov b{display:block;font-weight:400;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(.9rem,1.5vw,1.1rem);transform:translateY(8px);
  transition:transform .5s var(--e-out-quart)}
.item:hover .ov b{transform:none}
.item .ov em{font-style:normal;display:block;color:var(--bronze-lit);font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;margin-top:.35rem;transform:translateY(8px);
  transition:transform .5s var(--e-out-quart) .04s}
.item:hover .ov em{transform:none}
.item .play{position:absolute;top:clamp(.9rem,2vw,1.4rem);right:clamp(.9rem,2vw,1.4rem);
  width:2.6rem;aspect-ratio:1;border-radius:50%;border:1px solid rgba(237,234,227,.4);
  display:grid;place-items:center;font-size:.7rem;
  background:rgba(23,22,19,.35);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.85);transition:opacity .45s var(--e-out-quart),transform .45s var(--e-out-quart)}
.item:hover .play{opacity:1;transform:none}
.item .yr{position:absolute;left:clamp(.9rem,2vw,1.4rem);top:clamp(.9rem,2vw,1.4rem);z-index:3;
  opacity:0;transition:opacity .45s var(--e-out-quart)}
.item:hover .yr{opacity:1}
.item .aw{position:absolute;left:0;bottom:0;z-index:3}
.empty{padding:4rem 0;color:var(--dim);font-weight:300}


/* Projects that have no video yet are not clickable, so they must not look it.
   Every project imported from the old site is in this state until its details
   are filled in. */
.item[data-noembed]{cursor:default}
.item[data-noembed] .ov{cursor:default}