/* Gallery page. Site tokens only. Dennis, Oct 27 2026. */
.g-sec{padding-block:0 var(--s-9)}
.g-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6);max-width:var(--measure)}
.g-head h2{font-size:var(--step-2)}
.g-head p{margin:0}
/* Grid, not CSS columns: a short last row is closed up by letting its tiles span (no blank cell). */
.g-grid{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.g-item{margin:0;min-width:0}
@media (min-width:700px) and (max-width:1099px){
  .g-grid{grid-template-columns:repeat(2,1fr)}
  .g-item:nth-child(2n+1):last-child{grid-column:1/-1}
}
@media (min-width:1100px){
  .g-grid{grid-template-columns:repeat(6,1fr)}
  .g-item{grid-column:span 2}
  .g-item:nth-child(3n+1):nth-last-child(2),.g-item:nth-child(3n+1):nth-last-child(2)~.g-item{grid-column:span 3}
  .g-item:nth-child(3n+1):last-child{grid-column:1/-1}
}
.g-link{display:block;border-radius:var(--radius-m);overflow:hidden;background:var(--mist)}
.g-link img{width:100%;height:auto;transition:transform var(--dur-3) var(--ease-out)}
.g-link:hover img{transform:scale(1.02)}
.g-item figcaption{font-size:1rem;color:var(--slate);margin-top:var(--s-2);line-height:1.5}
.lightbox{border:0;padding:0;margin:auto;background:transparent;max-width:min(1600px,96vw);max-height:96vh;overflow:visible;color:var(--snow)}
/* literal colour: ::backdrop does not inherit custom properties in older Chrome and Safari (seen on Android Chrome 113) */
.lightbox::backdrop{background:#07182B}
.lightbox figure{margin:0;display:grid;gap:var(--s-3)}
.lightbox img{max-width:min(1600px,92vw);max-height:82vh;width:auto;height:auto;border-radius:var(--radius-s)}
.lb-cap{font-size:1rem;color:var(--slate-2);padding-inline:var(--s-2)}
.lightbox .btn{color:var(--snow);border-color:rgba(245,247,246,.55);background:rgba(7,24,43,.72);font-size:1.25rem}
.lightbox :focus-visible{outline-color:var(--green)}
.lightbox form{position:fixed;top:var(--s-4);right:var(--s-4);margin:0}
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%)}
.lb-prev{left:var(--s-4)} .lb-next{right:var(--s-4)}
@media (max-width:699px){.lb-prev,.lb-next{top:auto;bottom:var(--s-4);transform:none}}
@media (prefers-reduced-motion:reduce){.g-link img{transition:none}.g-link:hover img{transform:none}}

/* phones (Oct 27 mobile pass): the photo fills the width, the controls sit in one row under it, 56 px targets,
   and a counter. Swipe left or right on the photo; the arrows are the backup. */
.lightbox .btn{min-width:56px;min-height:56px;justify-content:center;padding:0 18px}
@media (max-width:699px){
  .lightbox{max-width:100vw;width:100vw;max-height:100svh;height:100svh;margin:0;display:none;flex-direction:column;justify-content:center;background:#07182B}
  .lightbox[open]{display:flex}
  .lightbox figure{padding:72px 0 96px}
  .lightbox img{max-width:100vw;width:100vw;max-height:calc(100svh - 230px);object-fit:contain;border-radius:0}
  .lb-prev{left:var(--s-4);right:auto}
  .lb-next{right:var(--s-4);left:auto}
  .lb-prev,.lb-next{position:fixed;bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px))}
  .lightbox form{top:calc(var(--s-4) + env(safe-area-inset-top,0px))}
}
.g-item{scroll-margin-top:96px}