/* Clear viewing formats and comfortable controls, in the existing gallery world. */
.detail-actions{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.detail-actions .button{min-height:44px;padding:12px 20px;font-size:13px;gap:12px}
.detail-actions .text-button{font-size:13px}
.viewer-download[hidden]~.viewer-download-status{display:none!important}
.viewer-download-status .download-source{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.nav{font-size:14px}
.hero-actions .button{font-size:13px}
.section-heading>p{max-width:38ch}
.filter-row{margin-bottom:8px}
.filter-row button{min-height:44px;font-size:12px}
.filter-status{font-size:12px;line-height:1.6;color:#635576;margin:0 0 22px}
.art-meta>span{min-width:0}
.art-meta strong{white-space:normal;overflow-wrap:anywhere}
.art-format{display:block;font-size:12px;font-weight:500;color:#635576;margin-top:5px;line-height:1.6}
.collection-disclaimer{font-size:13px;line-height:1.85;max-width:86ch;margin-top:26px}
.motion-copy p{color:#665879}
.motion-toggle{min-height:44px;font-size:12px}
.motion-controls input{height:44px;min-width:60px;accent-color:var(--purple)}
.motion-controls output{font-variant-numeric:tabular-nums}
.object-viewer{overscroll-behavior:contain;max-width:calc(100% - 22px)}
.viewer-header{position:sticky;top:0;z-index:3;background:#f7f3fc;padding-bottom:10px}
.viewer-header p,.viewer-hint,.viewer-controls label{font-size:12px;color:#635576}
.viewer-hint{line-height:1.7}
.viewer-controls input{height:36px}
.viewer-auto,.viewer-reset{font-size:12px}
.viewer-footer{flex-wrap:wrap}
.viewer-footer>p{font-size:12px;color:#635576;line-height:1.75;flex:1 1 100%;max-width:75ch}
.viewer-footer .text-button{font-size:13px;min-height:44px}
.viewer-retry{order:3;flex-basis:100%;justify-content:center;background:#e9e0f1;border-radius:9px;border:0;padding:10px}
.viewer-stage[data-view-mode="image"]{cursor:default;touch-action:pan-y}
.viewer-fallback{display:flex;align-items:center;justify-content:center;padding:16px}
.viewer-fallback .sprite{position:relative;inset:auto;width:min(85%,32svh);height:auto;max-width:none;aspect-ratio:627/692}
.viewer-fallback .sprite-headphones,.viewer-fallback .sprite-ribbon{aspect-ratio:627/562}
button,.button{user-select:none;-webkit-user-select:none}
footer>a:last-child{min-height:44px}

/* Text enlargement must wrap within the actual visual viewport. */
.skip-link{top:0;transform:translateY(calc(-100% - 24px));max-width:calc(100vw - 40px);white-space:normal;overflow-wrap:anywhere}
.skip-link:focus{top:15px;transform:none}
.hero h1{white-space:normal;overflow-wrap:anywhere}
h2,h3{overflow-wrap:anywhere}
.object-viewer{min-width:0;max-width:calc(100vw - 22px)}
.viewer-header>div,.viewer-controls,.viewer-footer,.detail-actions{min-width:0}
.viewer-header{gap:12px}
.viewer-header h2,.viewer-header p,.viewer-footer p{overflow-wrap:anywhere}
.viewer-controls{flex-wrap:wrap}
.viewer-controls label{min-width:0;flex:1 1 130px}
.viewer-controls button,.viewer-footer .text-button,.detail-actions .button{max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.viewer-footer .text-button{flex-wrap:wrap}
.about>.button{max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.6}

@media(max-width:800px){
  .hero{min-height:0;padding-bottom:0}
  .hero-content{padding-top:116px}
  .hero-actions{flex-wrap:wrap;gap:10px;margin-top:24px}
  .hero-actions .button{padding:12px 14px;gap:9px;font-size:13px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
  .hero-actions .button-primary{flex:1 1 auto;max-width:240px}
  .hero-actions .button-outline{flex:0 0 auto}
  .hero-actions svg{width:18px}
  .categories{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;margin-top:20px;font-size:12px;max-width:410px;white-space:normal}
  .categories a,.categories a:first-child,.categories a:last-child{min-height:44px;min-width:0;padding:5px 0;border:0;gap:8px;overflow-wrap:anywhere}
  .categories svg{width:18px;height:18px}
  .scene{height:clamp(310px,90vw,410px);margin-top:15px}
  .hero-bottom{position:relative;left:auto;right:auto;bottom:auto;margin:0 6%;padding:5px 0 18px;gap:16px}
  .hero-bottom .motion-toggle{min-height:44px;font-size:12px;padding:9px 13px}
  .scroll-cue{font-size:11px;line-height:1.6;max-width:210px}
  .filter-row{gap:6px;margin-bottom:8px}
  .filter-row button{min-height:44px;font-size:12px;padding:9px 13px}
  .filter-status{margin-bottom:20px}
  .art-meta small{font-size:11px}
  .art-meta strong{font-size:14px;line-height:1.6}
  .art-format{font-size:12px}
  .collection-disclaimer{font-size:12px}
  .motion-controls label,.motion-controls output{font-size:12px}
  .about>p{max-width:48ch;margin-inline:auto}
  .mobile-menu a{min-height:44px}
}
@media(max-width:600px){
  .viewer-header{padding:16px 18px 10px}
  .viewer-header p,.viewer-hint{font-size:12px}
  .viewer-stage{height:clamp(230px,40svh,360px)}
  .viewer-controls{padding:0 18px 16px;gap:10px 14px}
  .viewer-controls label{font-size:12px;gap:4px}
  .viewer-controls input{height:44px}
  .viewer-auto,.viewer-reset{min-height:44px;font-size:12px;padding:9px 14px}
  .viewer-footer{padding:15px 18px;gap:10px 20px}
  .viewer-footer>p{font-size:12px}
  .viewer-footer .text-button{font-size:12px}
}
@media(max-width:360px){
  .hero-actions .button{width:auto;min-height:49px;font-size:12px;padding:11px 12px}
  .hero h1{font-size:32px}
  .scene{height:310px}
  .art-format{font-size:11px}
  .filter-row button{padding:9px 11px}
}
@media(pointer:coarse){
  .viewer-controls input,.motion-controls input{min-height:44px}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
}
@media(min-width:2000px){
  .hero{max-height:1440px}
  .hero-content{padding-top:clamp(240px,23svh,360px)}
  .hero h1{font-size:clamp(72px,3.5vw,96px)}
  .hero-description{font-size:24px}
  .intro-line{font-size:18px}
  .header{height:140px;gap:65px}.brand{font-size:32px}.brand img{width:50px;height:50px}
  .nav{font-size:18px;gap:42px}
  .hero-actions .button{font-size:17px;padding:16px 28px;min-height:58px}
  .categories{font-size:16px}.categories a{padding:0 22px}
  .section{padding-inline:max(6%,calc((100% - 2200px)/2))}
  .art-image{height:clamp(380px,16vw,560px)}
  .object-viewer{width:min(1500px,85vw)}
  .viewer-stage{height:min(58svh,850px)}
  .viewer-header h2{font-size:40px}
  .viewer-header p,.viewer-hint,.viewer-controls label,.viewer-auto,.viewer-reset{font-size:16px}
  .viewer-footer>p,.viewer-footer .text-button{font-size:15px}
}