.ph-wrap{padding:2.5rem 2rem}
.ph-wrap h1{margin:0 0 1.5rem;font:400 2.3rem Fraunces,Georgia,serif}
#grid{columns:260px;column-gap:1rem}
.ph{position:relative;display:block;width:100%;margin:0 0 1rem;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in;break-inside:avoid;background:var(--card)}
.ph img{display:block;width:100%;height:auto;transition:transform .3s}
.ph:hover img{transform:scale(1.04)}
.ph span{position:absolute;inset:auto 0 0;padding:.7rem;color:#fff;font:.8rem "DM Mono",monospace;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transition:opacity .2s}
.ph:hover span,.ph:focus-visible span{opacity:1}
@media (hover:none){.ph span{opacity:1}}
#lb{border:0;padding:0;background:transparent;max-width:95vw;max-height:95vh;overflow:visible}
#lb::backdrop{background:rgba(0,0,0,.88)}
#lb img{display:block;margin:auto;max-width:95vw;max-height:88vh;border-radius:8px}
#lb p{margin:.6rem 0 0;color:#fff;text-align:center;font:.9rem "DM Mono",monospace}
@media (max-width:760px){
  .ph-wrap{padding:1.5rem 1rem}
  #grid{columns:2;column-gap:.5rem}
  .ph{margin-bottom:.5rem;border-radius:8px}
  .ph span{font-size:.7rem;padding:.4rem}
}