/* =========================================================
   The Datil & Whale — full gallery page (/gallery/) + lightbox.
   Saltrun tokens only; no new colours.
   ========================================================= */
.gallery-page{ background:var(--surface); }
.gallery-main{ padding:calc(72px + clamp(2rem,5vw,4rem)) 0 clamp(3rem,6vw,5rem); }
.gallery-head{ max-width:62ch; margin-bottom:clamp(1.8rem,4vw,3rem); }
.gallery-head h1{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; }
.gallery-head h1 em{ font-style:italic; color:var(--terra-deep); }
.gallery-head p{ margin-top:1rem; color:var(--ink-soft); font-size:1.02rem; }
.home-link{ color:rgba(255,255,255,.85); font-size:.9rem; font-weight:500; text-decoration:none; white-space:nowrap; }
.home-link:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Grid, grouped ---------- */
.gallery-group{ margin-top:clamp(1.6rem,4vw,2.8rem); }
.gallery-group:first-child{ margin-top:0; }
.gallery-group h2{ font-family:'Libre Caslon Text',serif; font-style:italic; font-weight:400; font-size:1.2rem; color:var(--ink); display:flex; align-items:baseline; gap:.8rem; margin-bottom:.9rem; }
.gallery-group h2 .n{ font-family:'Public Sans',sans-serif; font-style:normal; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--terra-deep); font-weight:600; }
.gallery-grid-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.gphoto{ display:block; position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:4px; background:var(--bg); padding:0; border:0; cursor:zoom-in; }
.gphoto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
@media(hover:hover){ .gphoto:hover img{ transform:scale(1.03); } }
.gphoto:focus-visible{ outline:3px solid var(--terra); outline-offset:2px; }
.gallery-noscript{ color:var(--stone); }
.gallery-foot{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem; border-top:1px solid var(--line); color:var(--ink-soft); }
.gallery-foot a{ color:var(--terra-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Lightbox (native <dialog>) ---------- */
.lightbox{ border:0; padding:0; margin:0; max-width:100vw; max-height:100vh; width:100vw; height:100vh; background:transparent; color:#fff; }
.lightbox::backdrop{ background:rgba(10,31,61,.94); }
.lightbox[open]{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
.lb-figure{ margin:0; display:grid; justify-items:center; align-content:center; gap:.8rem; height:100vh; padding:3.5rem 0 1.5rem; min-width:0; }
.lb-figure picture, .lb-figure img{ max-width:min(96vw,1200px); max-height:calc(100vh - 7.5rem); width:auto; height:auto; object-fit:contain; border-radius:3px; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.lb-caption{ font-family:'Public Sans',sans-serif; font-size:.86rem; color:rgba(255,255,255,.82); display:flex; gap:1rem; align-items:baseline; }
.lb-count{ color:var(--brass); letter-spacing:.08em; font-weight:600; }
.lb-nav, .lb-close{ background:transparent; border:0; color:#fff; cursor:pointer; font-family:Georgia,serif; line-height:1; opacity:.8; transition:opacity .2s; }
.lb-nav:hover, .lb-close:hover{ opacity:1; }
.lb-nav{ font-size:3.4rem; width:3.4rem; height:100vh; padding:0; }
.lb-close{ position:fixed; top:.6rem; right:.9rem; font-size:2.2rem; width:2.6rem; height:2.6rem; z-index:2; }
.lb-nav:focus-visible, .lb-close:focus-visible{ outline:2px solid var(--brass); outline-offset:-4px; border-radius:3px; }

@media(max-width:900px){
  .gallery-grid-row{ grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .lightbox[open]{ grid-template-columns:1fr; }
  .lb-nav{ position:fixed; bottom:.6rem; height:3rem; width:3.2rem; font-size:2.6rem; background:rgba(255,255,255,.08); border-radius:3px; }
  .lb-prev{ left:.6rem; } .lb-next{ right:.6rem; }
  .lb-figure{ padding:3.2rem 0 4.2rem; }
  .lb-figure picture, .lb-figure img{ max-height:calc(100vh - 8.5rem); }
}
@media (prefers-reduced-motion:reduce){ .gphoto img{ transition:none; } }
@media(max-width:600px){
  .gallery-page header.nav{ gap:.8rem; }
  .gallery-page .brand .no{ font-size:1.15rem; white-space:nowrap; }
  .gallery-page .brand .nm{ display:none; }
  .gallery-page .home-link{ font-size:.8rem; }
}