/* Gallery page. Built only from each site's own tokens (fonts, colours, radius), so the same
   file sits naturally inside all 27 designs and follows the light/dark toggle. */
.gallery{--gallery-gutter:clamp(20px,4vw,56px);padding-block:clamp(48px,7vw,104px) clamp(72px,9vw,128px);color:var(--ink)}
.gallery__wrap{width:min(1320px,calc(100% - 2 * var(--gallery-gutter)));margin-inline:auto}
.gallery__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.gallery__eyebrow{grid-column:1/-1;margin:0;font:500 12px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--muted,currentColor)}
.gallery__head h1{margin:0;font-family:var(--font-display);font-size:clamp(46px,6.4vw,96px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.gallery__lede{margin:0;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--muted,currentColor)}
.gallery__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:clamp(24px,3vw,36px) 0}
.gallery__filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.gallery__filters[hidden],.gallery__status[hidden]{display:none}
.gallery__filter{min-height:44px;padding:9px 18px;border:1px solid var(--line);border-radius:var(--radius,0);background:transparent;color:var(--ink);font:500 14px/1.2 var(--font-body,inherit);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.gallery__filter:hover{border-color:var(--ink)}
.gallery__filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.gallery__filter:focus-visible,.gallery__item:focus-visible{outline:2px solid var(--accent,currentColor);outline-offset:3px}
.gallery__count{margin:0 0 0 auto;font:400 12px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--muted,currentColor)}
.gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:0;margin:0;padding:0;list-style:none}
.gallery__cell{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:14px;min-width:0;margin:0 0 clamp(28px,3vw,44px)}
.gallery__item{display:block;position:relative;width:100%;aspect-ratio:4/3;margin:0;padding:0;border:0;border-radius:var(--radius,0);overflow:hidden;background:var(--surface,var(--bg));cursor:zoom-in}
.gallery__item img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .7s cubic-bezier(.19,1,.22,1)}
/* Short galleries feature one or two wide tiles so every row of three is full. */
.gallery__cell.is-wide-3{grid-column:span 2}
.gallery__cell.is-wide-3 .gallery__item{aspect-ratio:auto}
.gallery__item:hover img{transform:scale(1.035)}
.gallery__caption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;max-width:none;margin:0;font-size:15px;line-height:1.45}
.gallery__title{min-width:0}
.gallery__tag{flex:none;font:400 11px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,currentColor)}
.gallery__status{margin:0;padding:48px 24px;border:1px dashed var(--line);text-align:center;color:var(--muted,currentColor)}
.gallery__note{max-width:72ch;margin:clamp(40px,5vw,64px) 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted,currentColor)}
.gallery__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:900px){.gallery__head{grid-template-columns:1fr;align-items:start}.gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery__cell.is-wide-3{grid-column:auto}.gallery__cell.is-wide-3 .gallery__item{aspect-ratio:4/3}.gallery__cell.is-wide-2{grid-column:span 2}.gallery__cell.is-wide-2 .gallery__item{aspect-ratio:2/1}}
@media (max-width:560px){.gallery__grid{grid-template-columns:1fr}.gallery__cell.is-wide-2{grid-column:auto}.gallery__cell.is-wide-2 .gallery__item{aspect-ratio:4/3}.gallery__count{margin-left:0}}

/* Photo viewer. A dark stage in both themes, the way photo viewers usually work. */
.gallery-lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(12,12,12,.96);color:#f4f2ee;overflow:hidden}
.gallery-lightbox::backdrop{background:rgba(12,12,12,.6)}
.gallery-lightbox[open]{display:grid;grid-template-rows:1fr auto;align-items:center}
.gallery-lightbox__figure{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;margin:0;padding:72px 88px 16px;overflow:hidden}
.gallery-lightbox__img{display:block;max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain}
.gallery-lightbox__meta{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:12px 88px 28px;font-size:15px;line-height:1.5}
.gallery-lightbox__count{flex:none;font:400 12px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.gallery-lightbox__btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid rgba(244,242,238,.3);border-radius:50%;background:rgba(12,12,12,.5);color:#f4f2ee;cursor:pointer;transition:border-color .2s,background-color .2s}
.gallery-lightbox__btn:hover{border-color:#f4f2ee;background:rgba(244,242,238,.12)}
.gallery-lightbox__btn:focus-visible{outline:2px solid #f4f2ee;outline-offset:3px}
.gallery-lightbox__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gallery-lightbox__btn[hidden]{display:none}
.gallery-lightbox__close{top:16px;right:16px}
.gallery-lightbox__prev{left:20px;top:calc(50% - 40px)}
.gallery-lightbox__next{right:20px;top:calc(50% - 40px)}
html.gallery-lightbox-open{overflow:hidden}
@media (max-width:700px){.gallery-lightbox__figure{padding:68px 12px 12px}.gallery-lightbox__img{max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px)}.gallery-lightbox__meta{padding:8px 20px 96px;flex-direction:column;gap:6px}.gallery-lightbox__prev,.gallery-lightbox__next{top:auto;bottom:24px}.gallery-lightbox__prev{left:calc(50% - 60px)}.gallery-lightbox__next{right:calc(50% - 60px)}}
@media (prefers-reduced-motion:reduce){.gallery__item img,.gallery__filter,.gallery-lightbox__btn{transition:none}.gallery__item:hover img{transform:none}}
