/* /gallery/ - page styles only. Shared components live in leatherback.css and are
   reused rather than restyled here. */

.gal-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.65;color:var(--ink-82);max-width:66ch;
  margin:0 0 20px}

/* ---------- jump row ----------
   Named cities as links, above the fold. It is navigation for a reader with a
   town in mind, and it puts the city names in the page where an answer engine
   reads them rather than only in the captions. */
.gal-jump{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px}
.gal-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:var(--r-pill);border:1px solid rgba(217,164,65,.32);
  background:rgba(217,164,65,.08);color:var(--gold-pale);text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:.2px}
.gal-jump a:hover{background:rgba(217,164,65,.18)}

/* ---------- the gallery itself ----------
   CSS columns, not grid. A grid forces every tile to one shape, which means
   cropping a tall frame or letterboxing a wide one; columns let each photograph
   keep the shape it was shot in, which is what makes a wall of pictures read as
   a gallery rather than a table. The break-inside rule is what stops a figure
   splitting across a column. */
.gal-city{padding:46px 0 10px}
.gal-city h2{font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.9px;margin:0 0 22px}
.masonry{columns:3;column-gap:16px}
.masonry figure{break-inside:avoid;margin:0 0 16px;display:inline-block;width:100%}
.masonry img{width:100%;height:auto;display:block;border-radius:var(--r-carousel)}
.masonry figcaption{margin-top:9px;font-size:13px;line-height:1.55;color:var(--ink-60);
  max-width:46ch}
@media (max-width:1100px){.masonry{columns:2}}
@media (max-width:700px){
  .masonry{columns:1}
  .gal-city{padding:32px 0 6px}
}

/* ---------- questions ---------- */
.gal-qa h2{font-size:clamp(24px,2.3vw,34px);line-height:1.15;letter-spacing:-.8px;margin:0 0 26px}
.gal-q{padding:22px 0;border-top:1px solid rgba(20,26,51,.16)}
.gal-q:last-child{border-bottom:1px solid rgba(20,26,51,.16)}
.gal-q h3{font-size:clamp(19px,1.8vw,24px);line-height:1.25;margin:0 0 10px}
.gal-answer{font-size:17px;line-height:1.7;max-width:70ch;margin:0}
.gal-detail{margin:18px 0 0}

.closing-links{margin:22px 0 0}

@media (max-width:820px){
  .gal-q{padding:18px 0}
}