/* 1.0.9: photo gallery layouts (Duncan 12 Nov 2026 7:03pm). One layout per page, chosen by rotation in gen/gdesign.py.
   Captions 15px+, muted on light, white on the dark scrim; images lazy-loaded by the generator. Printed last. */
html body.sgg .sgg-pgal{margin:0;padding:clamp(6px,1.2vw,16px) 0 clamp(10px,1.6vw,22px)}
html body.sgg .sgg-pgal figure{margin:0}
html body.sgg .sgg-pgal img,html body.sgg .sgg-float img{display:block;width:100%;height:auto;object-fit:cover}
html body.sgg .sgg-pgal figcaption,html body.sgg .sgg-float figcaption,html body.sgg .sgg-pgal-cap{font-size:15px;line-height:1.45;color:var(--muted,#4d5a52);margin:8px 2px 0}
html body.sgg .sgg-pgal-grid{display:grid;gap:clamp(12px,1.6vw,22px)}
/* shapes (rotated separately from the layout) */
html body.sgg .sgg-shape-soft img{border-radius:18px}
html body.sgg .sgg-shape-sharp img{border-radius:4px}
html body.sgg .sgg-shape-leaf img{border-radius:34px 6px 34px 6px}
/* mosaic: staggered three */
html body.sgg .sgg-pgal-mosaic .sgg-pgal-grid{grid-template-columns:1.25fr 1fr 1.1fr;align-items:start}
html body.sgg .sgg-pgal-mosaic .sgg-gf-0 img{aspect-ratio:4/3}
html body.sgg .sgg-pgal-mosaic .sgg-gf-1 img{aspect-ratio:4/5}
html body.sgg .sgg-pgal-mosaic .sgg-gf-1{margin-top:28px}
html body.sgg .sgg-pgal-mosaic .sgg-gf-2 img{aspect-ratio:1/1}
/* pair: two equal */
html body.sgg .sgg-pgal-pair .sgg-pgal-grid{grid-template-columns:1fr 1fr}
html body.sgg .sgg-pgal-pair img{aspect-ratio:3/2}
/* duo: one large, two stacked */
html body.sgg .sgg-pgal-duo .sgg-pgal-grid{grid-template-columns:1.7fr 1fr;grid-template-rows:auto auto}
html body.sgg .sgg-pgal-duo .sgg-gf-0{grid-row:1/3}
html body.sgg .sgg-pgal-duo .sgg-gf-0 img{aspect-ratio:4/3;height:100%}
html body.sgg .sgg-pgal-duo .sgg-gf-1 img,html body.sgg .sgg-pgal-duo .sgg-gf-2 img{aspect-ratio:16/9}
/* strip4: slim row of four */
html body.sgg .sgg-pgal-strip4 .sgg-pgal-grid{grid-template-columns:repeat(4,1fr)}
html body.sgg .sgg-pgal-strip4 img{aspect-ratio:3/2}
/* fade: full-bleed band with fading edges */
html body.sgg .sgg-pgal-fade{padding-top:0}
html body.sgg .sgg-pgal-fadeimg img{height:clamp(200px,30vw,400px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
html body.sgg .sgg-pgal-fade .sgg-pgal-cap{margin-top:2px}
/* scrim: full-bleed photo with its caption on a dark scrim */
html body.sgg .sgg-pgal-scrim{position:relative;padding:0;margin:clamp(6px,1.2vw,16px) 0 clamp(10px,1.6vw,22px);min-height:clamp(220px,26vw,360px);display:flex;align-items:flex-end;overflow:hidden}
html body.sgg .sgg-pgal-scrim>img{position:absolute;inset:0;height:100%}
html body.sgg .sgg-pgal-sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,28,20,0) 30%,rgba(14,28,20,.82) 100%)}
html body.sgg .sgg-pgal-scin{position:relative;z-index:1;padding-bottom:18px;width:100%}
html body.sgg .sgg-pgal-scin p{color:#fff;font-size:18px;line-height:1.4;margin:0;max-width:61ch;text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* float: one photo beside the opening paragraphs */
html body.sgg .sgg-float{float:right;width:min(42%,520px);margin:6px 0 14px clamp(18px,2.4vw,34px)}
html body.sgg .sgg-float img{aspect-ratio:4/3}
html body.sgg .sgg-clear{clear:both}
/* FAQ side photo: three shapes by rotation */
html body.sgg .sgg-fig.sgg-fig-v1 img{aspect-ratio:4/3;border-radius:18px}
html body.sgg .sgg-fig.sgg-fig-v2 img{aspect-ratio:3/4;border-radius:6px}
html body.sgg .sgg-fig.sgg-fig-v1,html body.sgg .sgg-fig.sgg-fig-v2{margin-top:8px}
@media(max-width:700px){
 html body.sgg .sgg-pgal-mosaic .sgg-pgal-grid{grid-template-columns:1fr 1fr}
 html body.sgg .sgg-pgal-mosaic .sgg-gf-0{grid-column:1/-1}
 html body.sgg .sgg-pgal-mosaic .sgg-gf-1{margin-top:0}
 html body.sgg .sgg-pgal-mosaic .sgg-gf-1 img,html body.sgg .sgg-pgal-mosaic .sgg-gf-2 img{aspect-ratio:1/1}
 html body.sgg .sgg-pgal-pair .sgg-pgal-grid{grid-template-columns:1fr}
 html body.sgg .sgg-pgal-duo .sgg-pgal-grid{grid-template-columns:1fr 1fr}
 html body.sgg .sgg-pgal-duo .sgg-gf-0{grid-column:1/-1;grid-row:auto}
 html body.sgg .sgg-pgal-duo .sgg-gf-0 img{height:auto}
 html body.sgg .sgg-pgal-strip4 .sgg-pgal-grid{grid-template-columns:1fr 1fr}
 html body.sgg .sgg-float{float:none;width:auto;margin:6px 0 16px}
 html body.sgg .sgg-pgal-scin p{font-size:17px}
}