/* 12-column grid: a portrait spans 12/cols columns, a landscape always spans 6 (so a pair fills a row) */
.pgrid{--gap:clamp(.8rem,1.8vw,1.5rem);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin:1.6rem 0 2.8rem}
.pgrid .tile{position:relative;display:block;width:100%;margin:0;padding:0;border:0;overflow:hidden;background:#cfc8b2;font:inherit;color:inherit;text-align:inherit}
.pgrid button.tile{cursor:zoom-in}
.pgrid .p{grid-column:span var(--span);aspect-ratio:var(--pr,775/1200)}
.pgrid .l{grid-column:span 6;aspect-ratio:1200/775}
.pgrid img{display:block;width:100%;height:100%;object-fit:cover}
.pgrid .cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;
  background:rgba(238,225,185,.94);color:#1f2733;opacity:0;transition:opacity .25s}
.pgrid .tile:hover .cap,.pgrid .tile:focus-visible .cap{opacity:1}
/* touch screens have no hover, so titles are hidden there (screen readers still get the alt text and aria-label) */
@media(hover:none){.pgrid .cap{display:none}}
@media(min-width:601px) and (max-width:900px){.pgrid .p{grid-column:span var(--tspan,6)}}
@media(max-width:600px){.pgrid .p,.pgrid .l{grid-column:1/-1}}

/* Lightbox: image up to 70% of the width or 80% of the height; page behind is blurred and washed 30% toward cream */
html.lb-open{overflow:hidden}
.lb{--lb-wash:rgba(248,240,218,.3);position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--lb-wash);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;place-items:center;overflow:hidden}
/* Sharpness cap (long edge, CSS px) on screens wider than medium, so a 1200px image isn't stretched on high-density displays. Raise the numbers for a bigger, softer image. */
@media(min-width:901px) and (min-resolution:1.5dppx){.lb{--lb-cap:800px}}
@media(min-width:901px) and (min-resolution:2dppx){.lb{--lb-cap:640px}}
.lb[open]{display:grid;animation:lbin .18s ease-out}
.lb::backdrop{background:transparent}
.lb img{display:block;aspect-ratio:var(--r,.6458);object-fit:contain;width:auto;height:min(80vh,calc(70vw / var(--r,.6458)),calc(var(--lb-cap,9999px) / max(1,var(--r,.6458))));height:min(80dvh,calc(70vw / var(--r,.6458)),calc(var(--lb-cap,9999px) / max(1,var(--r,.6458))));box-shadow:0 12px 40px rgba(31,39,51,.28);cursor:zoom-out}
.lb-x{position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;width:44px;height:44px;border-radius:50%;border:1px solid #3a4352;background:#fff;color:#3a4352;font-size:1.6rem;line-height:1;cursor:pointer}
@keyframes lbin{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lb[open]{animation:none}}