/* Version 21: preserve artwork, responsive galleries, comfortable touch controls. */
/* All category thumbnails are authored at 4:3. Never crop the artwork. */
.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.category-tile img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:contain;background:#faf9f5}
.category-tile{min-width:0}
.category-tile span{overflow-wrap:break-word}
.full-piece{min-width:0}
.full-piece img{object-fit:contain}
/* Usable keyboard outlines and finger-sized zoom/navigation controls. */
.menu-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.zoom-actions button{min-width:44px;min-height:44px}
.zoom-actions input{min-height:44px}
.back-link,.all-paintings-link a{min-height:44px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #307e91;outline-offset:3px}
/* Prevent long artwork titles and text from creating horizontal scrolling. */
.piece-header h1,.storm-story,.piece-description{overflow-wrap:break-word}
.piece-full img{max-width:100%;height:auto}
@media(max-width:1000px){.category-grid{gap:18px}}
@media(max-width:800px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:740px){
 .site-header nav{max-height:calc(100dvh - 76px);overflow-y:auto}
 .site-header nav a{display:flex;align-items:center;min-height:44px;width:100%;font-size:1rem}
 .zoom-toolbar{padding:12px}
 .zoom-actions{gap:8px}
 .zoom-viewport{height:min(70vh,440px);min-height:260px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 .footer-contact a{overflow-wrap:anywhere}
}
@media(max-width:580px){
 .category-grid,.full-paintings,.big-choices{grid-template-columns:minmax(0,1fr)}
 .category-tile img{height:auto;aspect-ratio:4 / 3;object-fit:contain}
 .category-grid{gap:18px}
 .category-intro{display:block}
 .full-piece img{height:auto;aspect-ratio:4 / 3;object-fit:contain}
 .piece-shell{padding-bottom:45px}
 .storm-story{padding:18px}
 .zoom-actions{justify-content:center}
 .zoom-actions label{white-space:nowrap}
 .zoom-actions input{width:min(110px,27vw)}
 .zoom-viewport{height:330px;min-height:230px}
 .explore-launch{max-width:100%}
 .all-paintings-link a{max-width:100%}
}
@media(max-width:360px){.shell{padding-inline:15px}.piece-header{padding-inline:10px}.explore-launch{padding:9px;gap:9px}.explore-launch img{width:70px;height:68px}.explore-chevron{font-size:1.2rem}}