.project-gallery { display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; max-width:100%; min-width:0; padding:2px 2px 10px; margin-bottom:14px; }
.project-gallery-image { flex:0 0 calc((100% - 40px)/5); min-width:0; display:grid; place-items:center; aspect-ratio:3/2; border:1px solid var(--rule,#888); background:var(--hover,#eee); color:var(--ink,#191919); text-decoration:none; }
.project-gallery-image img { display:block; width:100%; height:100%; max-height:160px; object-fit:contain; }
.project-gallery-image img[hidden], .gallery-viewer [hidden] { display:none; }
.project-gallery-image:focus-visible,.gallery-viewer button:focus-visible { outline:3px solid var(--focus,#4f2d7f); outline-offset:2px; }
.gallery-unavailable { padding:8px; font-size:12px; }
.gallery-viewer { box-sizing:border-box; padding:0; width:min(1100px,calc(100 * var(--site-vw,1vw) - 24px)); max-width:none; height:min(820px,calc(var(--dock-top,100 * var(--site-dvh,1dvh)) - 24px)); top:0; bottom:calc(100 * var(--site-dvh,1dvh) - var(--dock-top,100 * var(--site-dvh,1dvh))); margin:auto; max-height:none; border:1px solid var(--rule,#888); border-radius:4px; background:var(--paper,#f7f6f2); color:var(--ink,#191919); box-shadow:0 12px 48px #0006; overflow:hidden; }
.gallery-viewer[open] { display:flex; flex-direction:column; }
.gallery-viewer::backdrop { background:rgb(0 0 0 / .45); }
.gallery-viewer-bar { display:flex; align-items:center; gap:16px; padding:0 10px 0 16px; min-height:44px; flex-shrink:0; border-bottom:1px solid var(--rule,#888); font:inherit; font-size:14px; }
.gallery-viewer-bar [data-count] { margin-left:auto; font-variant-numeric:tabular-nums; }
.gallery-viewer button { min-height:44px; min-width:64px; padding:8px 14px; font:inherit; font-size:14px; color:inherit; border:1px solid var(--rule,#888); border-radius:2px; background:var(--paper,#f7f6f2); cursor:pointer; }
.gallery-viewer button:hover { background:var(--hover,#eee); }
.gallery-viewer button:disabled { opacity:.45; cursor:default; }
.gallery-viewer figure { margin:0; padding:12px; min-height:0; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; touch-action:pan-y; }
.gallery-viewer figure img { display:block; min-height:0; width:100%; flex:1; object-fit:contain; }
.gallery-viewer figcaption { flex-shrink:0; width:100%; max-height:25%; overflow:auto; text-align:center; overflow-wrap:anywhere; font-size:14px; }
.gallery-viewer .gallery-image-navigation { display:flex; justify-content:center; gap:12px; padding:8px; flex-shrink:0; border-top:1px solid var(--rule,#888); }
@media(max-width:760px) { .project-gallery-image { flex-basis:calc((100% - 10px)/2); } .gallery-viewer-bar { gap:8px; padding-left:8px; } }