*{box-sizing:border-box}html,body{margin:0;height:100%;background:rgb(194,194,194);font-family:Helvetica,Arial,sans-serif}header{position:fixed;top:24px;left:24px;z-index:5;display:flex;gap:24px}header a{color:#555;text-decoration:none;font-size:12px}#field{height:100%;overflow:auto;overscroll-behavior:none;scrollbar-width:none;cursor:grab}#field::-webkit-scrollbar{display:none}#grid{--cell:max(18.5vw,25vh);--print-width:clamp(130px,12vw,max(230px,10vw));display:grid;grid-template-columns:repeat(7,var(--cell));grid-auto-rows:var(--cell);width:max-content;padding:5vh calc(5vw + var(--cell)*.5) 5vh .75vw;transition:opacity 700ms cubic-bezier(.22,.61,.36,1)}.print{border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--cell);height:var(--cell)}.print img{display:block;height:auto;user-select:none;-webkit-user-drag:none}.print:focus-visible{outline:1px solid #555;outline-offset:-20px}#single{position:fixed;inset:0;z-index:4;cursor:zoom-out}#single[hidden]{display:none}#single img{position:fixed;object-fit:fill;cursor:zoom-out;transform-origin:0 0;will-change:transform}#close{position:fixed;right:24px;top:20px;z-index:6;border:0;background:none;color:#444;font:28px Helvetica;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){#grid{transition:none}}

@media(max-width:700px){#grid{--cell:max(38vw,25vh);--print-width:27vw}}

#shuffle{position:fixed;right:24px;bottom:24px;z-index:3;width:48px;height:48px;border:0;background:transparent;color:#555;cursor:pointer}#shuffle svg{fill:none;stroke:currentColor;stroke-width:1.2}#shuffle:disabled{opacity:.35;cursor:default}body:has(#single:not([hidden])) #shuffle{visibility:hidden}

/* A quiet perimeter around the photographic field. */
header{top:30px;left:4vw;right:4vw;align-items:baseline;justify-content:space-between;transition:opacity 250ms ease}
header .artist-name{font-size:16px;letter-spacing:.015em;color:#363636}
header nav{display:flex;align-items:center;gap:28px}
header nav a{position:relative;display:block;padding:8px 0}
header nav a::after{content:attr(data-label);position:absolute;right:0;top:100%;white-space:nowrap;font-size:11px;opacity:0;transition:opacity 180ms ease;pointer-events:none}
header nav a:hover::after,header nav a:focus-visible::after{opacity:1}
body:has(#single:not([hidden])) header{opacity:0;pointer-events:none;visibility:hidden}
#field{position:fixed;inset:92px 3vw 64px;height:auto}
#grid{--row:calc((100vh - 156px)/2);grid-auto-rows:var(--row);padding-left:1vw}
.print{height:var(--row)}
@media(max-width:700px){header{left:24px;right:24px;top:22px}header .artist-name{font-size:14px}#field{inset:80px 12px 60px}#grid{--row:calc((100vh - 140px)/2)}}

.print-caption{position:fixed;font:400 13px/1.5 Helvetica,Arial,sans-serif;color:#292929;white-space:pre-wrap;max-height:calc(12vh - 10px);overflow:auto;cursor:default}

/* A complete ten-print composition, centered within the viewing area. */
#grid{--cell:18.5vw;--row:calc((100vh - 156px)/3);grid-template-columns:repeat(4,var(--cell));padding:0;margin:0 auto}
@media(max-width:700px){#grid{--cell:23vw;--print-width:18vw;--row:calc((100vh - 140px)/3)}}

/* Closely hung prints form a broad band with an irregular perimeter. */
#grid{position:relative;display:block;margin:0;padding:0}
#grid .print{position:absolute;transform:none}

@media(pointer:coarse){
 #grid{--print-width:clamp(110px,30vw,190px)}
 #field{inset:76px 12px 54px;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
 .print-caption{max-height:80px}
}

/* Layout owns both dimensions; decoding must never change a print's footprint. */
#grid .print img{width:100%;height:100%;object-fit:contain;flex:none}
@media(pointer:coarse) and (max-width:1099px){
 #field{inset:76px 12px 60px;overflow-x:hidden;overscroll-behavior:contain}
 #single{touch-action:manipulation}
}

/* Phone arrangements are complete compositions, not a clipped scrolling panel. */
#grid .print[hidden]{display:none}
.print:focus,.print:focus-visible{outline:none}
body.keyboard-navigation .print:focus-visible{outline:1px solid #555;outline-offset:5px}
@media(pointer:coarse) and (max-width:1099px){
 #field{overflow:hidden;inset:76px 12px 60px}
}