/* Readable names and full touch targets at narrow and zoomed viewports. */
#motion,#sound-toggle{min-width:44px;min-height:44px;height:44px}
#motion[aria-disabled=true]{cursor:default}
#music-state{display:inline}
.place-control,.surface-key{touch-action:manipulation}
/* A centered pair and centered sound instrument belong to the narrow composition. */
@media(max-width:760px){
 .header{justify-content:center}
 .header .instruments{margin-left:0;margin-right:0}
 #sound-panel.acoustic-seal{left:0;right:0;margin-left:auto;margin-right:auto;transform-origin:50% 0}
}
@media(hover:none) and (pointer:coarse){
 .place-control:active .place-art{filter:brightness(1.18)}
 .place-control:active .place-label,#sound-toggle:active,#motion:active{color:#f4dfb3}
}
@media(max-width:420px){
 .place-control .place-label{white-space:normal;font-size:12px!important;line-height:1.5;letter-spacing:.065em!important;max-width:85px;min-height:36px}
 .place-control{min-width:0}
 .header{padding-left:14px;padding-right:14px}
 #music-state{font-size:12px;letter-spacing:.08em}
 #motion-label{font-size:12px;letter-spacing:.04em}
 .instruments{gap:8px}
}
@media(max-height:480px){
 #sound-panel.acoustic-seal{max-height:calc(100svh - 70px);overflow-y:auto;overflow-x:hidden;padding:8px 8px 12px}
}
/* Focus belongs to the inscription, without boxing in the artwork on return. */
.place-control:focus-visible{outline:none}
.place-control:focus-visible .place-label{color:#f5e5bd;text-shadow:0 0 9px #b7e6df30}
.place-control:focus-visible::after{width:64%;left:18%;height:2px;opacity:1;background:#b4ded2;box-shadow:0 0 8px #94d3cf40}
@media(forced-colors:active){
 .place-dialog,.sound-panel{background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important}
 .place-dialog #place-content p,.place-dialog #place-title,.place-dialog .work-link,.place-label,#music-state,#motion-label{color:CanvasText!important}
 button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid Highlight!important}
}
/* Keep dismissal within reach when a short viewport requires panel scrolling. */
@media(max-height:480px){
 .place-dialog .close{position:sticky;top:8px;right:auto;grid-column:2;grid-row:1;align-self:start;justify-self:end;margin:-16px -18px 0 0;background:radial-gradient(ellipse,#0b222be8 30%,#0b222b00 72%);z-index:4}
}
/* Keep the primary destinations in view on a short landscape screen. */
@media(max-height:480px) and (min-width:480px){
 .stage{min-height:max(440px,100svh)}
 .header{padding:12px 5%}
 .introduction{top:65px;left:6%;width:65%;max-width:560px}
 .brand-title{margin-bottom:4px}
 .brand-title .wordmark{width:min(260px,65%)}
 .introduction .places{margin-top:6px;padding-top:0;gap:10px}
 .place-art{height:56px}
 .place-art svg{height:56px;width:48px}
 .place-control{padding:4px 0 12px}
 .place-control .place-label{margin-top:6px;font-size:11px!important;line-height:1.4;min-height:25px}
}