/* ═══ ACTIVATIONS · SECTION 4 — VIDEO TILE GALLERY (hover to play) ═══ */
.gal{position:relative;padding:clamp(74px,12vh,150px) var(--gut);border-top:1px solid var(--border)}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:clamp(30px,5vh,54px)}
.gal-head h2{margin-top:20px;font-size:clamp(1.6rem,4.2vw,3.3rem);line-height:1;max-width:15ch}
.gal-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:24ch;
  text-align:right;flex-shrink:0}
@media(max-width:760px){.gal-head{flex-direction:column;align-items:flex-start}
  .gal-head .aside{text-align:left}}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;display:block;overflow:hidden;background:var(--surface-alt);
  aspect-ratio:4/5;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.tile.is-in{opacity:1;transform:none}
.tile.wide{aspect-ratio:16/10}
@media(min-width:901px){.tile.wide{grid-column:span 2}}
.tile .inner{position:absolute;inset:0;will-change:transform}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.4) brightness(.76);
  transition:filter .5s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
/* the clip sits over the still and fades in once it starts playing */
.tile video{position:absolute;inset:0;opacity:0;transition:opacity .45s ease,filter .5s ease}
.tile.playing video{opacity:1}
.tile:hover img,.tile:hover video{filter:grayscale(0) brightness(.95);transform:scale(1.03)}
.tile .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(36.5deg,#161616 0 14px,#111 14px 28px)}
.tile .ph i{font-style:normal;font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--dim)}
.tile .meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:46px 18px 16px;
  background:linear-gradient(to top,rgba(8,8,8,.92),transparent)}
.tile .meta b{display:block;font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:1.02rem;letter-spacing:-.022em}
.tile .meta em{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  color:var(--muted);margin-top:6px}
.tile .flag{position:absolute;right:12px;top:12px;z-index:4;font-size:9.5px;letter-spacing:.14em;
  font-weight:700;color:#0A0A0A;background:var(--cut);padding:5px 8px}
.tile .playmark{position:absolute;left:14px;top:14px;z-index:4;width:30px;height:30px;
  border:1px solid rgba(245,244,239,.5);border-radius:50%;display:grid;place-items:center;
  transition:background .35s ease,border-color .35s ease}
.tile:hover .playmark{background:var(--cut);border-color:var(--cut)}
.tile .playmark::after{content:"";width:0;height:0;margin-left:2px;
  border-left:8px solid var(--text);border-top:5px solid transparent;border-bottom:5px solid transparent;
  transition:border-left-color .35s ease}
.tile:hover .playmark::after{border-left-color:#0A0A0A}

@media(prefers-reduced-motion:reduce){
  .tile{opacity:1;transform:none}
  .tile .inner{transform:none!important;inset:0}
  .tile video{display:none}
}