.ph-wrap{padding:0 var(--gutter) 4rem}
#grid{columns:270px;column-gap:1.4rem}
.ph{display:block;width:100%;margin:0 0 1.5rem;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:zoom-in;break-inside:avoid}
.ph img{display:block;width:100%;height:auto;border-radius:2px;background:var(--card)}
.ph span{display:block;margin-top:.4rem;color:var(--muted);font-size:1rem;line-height:1.3}
@media (hover:hover){.ph:hover img{opacity:.88}.ph:hover span{color:var(--ink)}}
.ph:focus-visible{outline:0}
.ph:focus-visible img{outline:2px solid var(--accent);outline-offset:3px}
#lb{border:0;padding:0;background:transparent;max-width:95vw;max-height:95vh;overflow:visible}
#lb::backdrop{background:rgba(10,16,20,.93)}
#lb img{display:block;margin:auto;max-width:95vw;max-height:86vh;border-radius:2px}
#lb p{margin:.7rem 0 0;color:var(--soft);text-align:center;font:italic 400 1.2rem var(--serif)}
@media (max-width:760px){
  .ph-wrap{padding:0 1rem 2rem}
  #grid{columns:2;column-gap:.7rem}
  .ph{margin-bottom:1rem}
  .ph span{font-size:.9rem}
}