/* ============================================================================
   VOXEL-POP GRID  -  shared stylesheet (voxel-grid.css)
   Used by every portfolio grid page. Edit once, re-upload, bump ?v= to refresh.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* ---- scope + reset ------------------------------------------------------ */
.vpg{
  --bg:#f8f7f5; --surface:#17171b; --line:#26262c;
  --text:#5f5f5f; --muted:#8a8785; --accent:#2b2b2b; --hover:#2b2b2b;
  --radius:6px; --gap:14px;
  background:var(--bg); color:var(--text);
  padding:clamp(22px,4vw,46px) clamp(16px,4vw,44px);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.vpg *,.vpg *::before,.vpg *::after{box-sizing:border-box;}
.vpg h2,.vpg p{margin:0;}

/* ---- header ------------------------------------------------------------- */
.vpg-head{
  border-bottom:1px solid rgba(0,0,0,.12);
  padding-bottom:18px;margin-bottom:calc(var(--gap) + 8px);
}
.vpg-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
.vpg-tag{
  appearance:none;cursor:pointer;
  background:transparent;border:1px solid rgba(0,0,0,.14);
  color:var(--muted);border-radius:999px;padding:5px 10px;
  font:600 10px/1 "Manrope",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  transition:color .18s,background .18s,border-color .18s;
}
.vpg-tag:hover{color:var(--text);border-color:rgba(0,0,0,.3);}
.vpg-tag:focus-visible{outline:2px solid var(--hover);outline-offset:2px;}
.vpg-tag.is-active{
  background:var(--hover);border-color:var(--hover);color:#fff;
}

/* ---- masonry (JS-positioned: row-order, shortest-column packing) -------- */
.vpg-grid{position:relative;}
.vpg-grid.is-ready .vpg-tile{
  transition:top .45s cubic-bezier(.2,.7,.2,1),left .45s cubic-bezier(.2,.7,.2,1),
             width .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease;
}

.vpg-tile{
  display:block;width:100%;padding:0;margin:0;
  position:absolute;top:0;left:0;
  border:0;background:var(--surface);color:inherit;cursor:pointer;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:var(--r,16/9);
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.vpg-tile::after{ /* activation frame */
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1.5px solid transparent;pointer-events:none;
  transition:border-color .22s ease;z-index:4;
}
.vpg-tile:hover::after,.vpg-tile:focus-visible::after{border-color:var(--hover);}
.vpg-tile:focus-visible{box-shadow:0 0 0 3px rgba(43,43,43,.35);}

.vpg-tile img,.vpg-tile video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.vpg-tile video{opacity:0;transition:opacity .3s ease;z-index:2;}
.vpg-tile.is-live video{opacity:1;}
.vpg-tile img{
  z-index:1;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s;
  filter:saturate(.92);
}
.vpg-tile:hover img{transform:scale(1.045);filter:saturate(1.05);}

/* gradient + caption */
.vpg-tile .vpg-scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,0) 62%);
  opacity:.9;transition:opacity .25s;
}
.vpg-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:13px 14px;text-align:left;pointer-events:none;
  transform:translateY(4px);opacity:.96;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.vpg-tile:hover .vpg-cap{transform:translateY(0);}
.vpg-client{
  font:600 12px/1.15 "Manrope",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.vpg-name{
  display:block;margin-top:3px;
  font:400 13px/1.25 inherit;color:rgba(255,255,255,.72);
}
/* play affordance */
.vpg-play{
  position:absolute;top:11px;right:11px;z-index:5;
  width:34px;height:34px;border-radius:50%;
  background:rgba(14,14,17,.55);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:opacity .22s,transform .22s;
  border:1px solid rgba(255,255,255,.18);
}
.vpg-tile:hover .vpg-play,.vpg-tile:focus-visible .vpg-play{opacity:1;transform:scale(1);}
.vpg-play svg{width:13px;height:13px;fill:#fff;margin-left:2px;}

.vpg-empty{
  color:var(--muted);font-size:15px;padding:40px 4px;text-align:center;
}

/* ---- lightbox ----------------------------------------------------------- */
.vpg-lb{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;}
.vpg-lb[hidden]{display:none;}
.vpg-lb-backdrop{position:absolute;inset:0;background:rgba(6,6,8,.9);backdrop-filter:blur(3px);animation:vpg-fade .2s ease;}
.vpg-lb-inner{
  position:relative;z-index:1;width:min(1100px,92vw);
  animation:vpg-pop .26s cubic-bezier(.2,.8,.2,1);
}
.vpg-lb-stage{
  position:relative;
  width:100%;aspect-ratio:var(--lr,16/9);max-height:82vh;
  background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.vpg-lb-stage video,.vpg-lb-stage iframe{width:100%;height:100%;border:0;display:block;}
.vpg-lb-spin{
  position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:vpg-spin .8s linear infinite;z-index:1;pointer-events:none;
}
@keyframes vpg-spin{to{transform:rotate(360deg)}}
.vpg-lb-cap{
  margin-top:14px;text-align:center;color:var(--muted);
  font:500 13px/1.4 "Manrope",sans-serif;letter-spacing:.06em;
}
.vpg-lb-cap b{color:var(--text);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.vpg .vpg-lb-desc{
  margin:10px auto 0;max-width:620px;text-align:center;
  color:#c9c8c4;font:400 14px/1.6 "Manrope",sans-serif;
}
.vpg-lb-desc[hidden]{display:none;}
.vpg-lb-close{
  position:absolute;top:-46px;right:-4px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-size:24px;line-height:1;
  cursor:pointer;transition:border-color .18s,transform .18s;
}
.vpg-lb-close:hover{border-color:var(--accent);transform:rotate(90deg);}
@media(max-width:520px){.vpg-lb-close{top:-52px;right:0;}}

/* prev / next */
.vpg-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);color:#fff;
  background:rgba(14,14,17,.55);backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;
  transition:background .18s,border-color .18s;
}
.vpg-lb-nav:hover{background:rgba(14,14,17,.85);border-color:#fff;}
.vpg-lb-nav svg{width:22px;height:22px;}
.vpg-lb-prev{left:-64px;}
.vpg-lb-next{right:-64px;}
@media(max-width:1240px){.vpg-lb-prev{left:10px;}.vpg-lb-next{right:10px;}}
.vpg-lb.is-single .vpg-lb-nav{display:none;}

@keyframes vpg-fade{from{opacity:0}to{opacity:1}}
@keyframes vpg-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:reduce){
  .vpg-tile img,.vpg-tile .vpg-cap,.vpg-play,.vpg-lb-inner,.vpg-lb-backdrop{transition:none;animation:none;}
  .vpg-grid.is-ready .vpg-tile{transition:none;}
  .vpg-lb-spin{animation:none;}
  .vpg-tile:hover img{transform:none;}
}

/* ---- image tiles (static portfolio pages) ------------------------------- */
.vpg-lb-stage img{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
/* optional "clean" mode: hide the always-on caption/scrim, reveal on hover
   (for artwork pages where the image should show unobstructed) */
.vpg--clean .vpg-tile .vpg-scrim,.vpg--clean .vpg-tile .vpg-cap{opacity:0;transition:opacity .25s ease;}
.vpg--clean .vpg-tile:hover .vpg-scrim{opacity:.9;}
.vpg--clean .vpg-tile:hover .vpg-cap,.vpg--clean .vpg-tile:focus-visible .vpg-cap{opacity:.96;}