:root { color-scheme: light; --gap: 24px; --artwork-max: 288px; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; background: #fff; color: #333; font: 16px/1.5 system-ui, sans-serif; }
body.viewing { overflow: hidden; }
#gallery { --columns: 3; --gallery-gap: 32px; --thumbnail-width: 288px; display: flex; flex-direction: column; gap: var(--gallery-gap); padding: 32px 0; width: 100%; flex: none; }
.gallery-row { display: flex; justify-content: flex-start; align-items: stretch; gap: var(--gallery-gap); padding-inline: var(--gallery-gap); width: 100%; }
.artwork { width: var(--thumbnail-width); flex: none; position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: #fff; color: inherit; pointer-events: none; min-width: 0; }
.artwork img { display: block; max-width: 288px; width: 100%; height: auto; object-fit: contain; pointer-events: auto; cursor: zoom-in; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #555; outline-offset: 5px; }
#empty { margin: 40vh auto 0; text-align: center; color: #666; }
[hidden] { display: none !important; }
#viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; overflow: hidden; }
#viewer::backdrop { background: #fff; }
#stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; cursor: default; }
#art { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform-origin: center; user-select: none; -webkit-user-drag: none; }
#art { cursor: zoom-in; }
#viewer.zoomed #art { cursor: zoom-out; }
#viewer.dragging #art { cursor: grabbing; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

body { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
footer { margin-top:auto; padding:80px var(--gap) 28px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; font-size:14px; }
footer a { color:#333; text-decoration:none; } footer a:hover { text-decoration:underline; }
#stage { bottom:64px; }
#caption { position:absolute; left:0; right:0; margin-inline:auto; max-width:calc(100% - 32px); text-align:center; white-space:normal; overflow-wrap:anywhere; font:14px/24px Arial,sans-serif; }
#info { display:inline-block; }

/* Keep explicit 3 → 2 → 1 modes; each row distributes visible images. */
@media (max-width: 959px) { #gallery { --columns: 2; } }
@media (max-width: 319px) { #gallery { --columns: 1; } }
@media (pointer: coarse) and (orientation: landscape) and (min-width: 600px) { #gallery { --columns: 3; } }
footer a { overflow-wrap: anywhere; }

/* Grow the region, not the rows; tall galleries keep their natural height. */
#gallery-region { flex: 1 0 auto; display: flex; align-items: center; width: 100%; }

#page-spacer { flex: none; width: 100%; height: calc(var(--footer-height, 181px) / 2); background: #fff; }

.artwork, .artwork img { -webkit-tap-highlight-color: transparent; }
.artwork:focus:not(:focus-visible) { outline: none; }