/* Museum-only surface. Brand tokens and the other products remain unchanged. */
.museum-main { overflow:clip; }
.museum-exhibition { padding-top:clamp(2.5rem,5vw,4.5rem); }
.museum-intro { position:relative; text-align:center; }
.museum-intro h1 { font-size:clamp(2rem,5.2vw,4.5rem); line-height:1.14; letter-spacing:-.025em; font-weight:600; }
.museum-intro p { margin-top:1rem; color:var(--muted); font-size:clamp(1rem,1.4vw,1.125rem); }
.museum-browse { display:inline-flex; align-items:center; gap:1.5rem; min-height:44px; margin-top:1.5rem; padding:.5rem 1rem; border-radius:8px; background:var(--accent); color:var(--on-accent); font-size:.875rem; transition:background-color 140ms,transform 100ms; }
.museum-browse:active { transform:scale(.98); }
.museum-browse:hover { background:#C8C879; }
.museum-stage { position:relative; width:100%; height:clamp(22rem,35vw,31rem); overflow:clip; touch-action:pan-y pinch-zoom; user-select:none; margin-top:-.5rem; outline-offset:-6px; }
.museum-stage:focus-visible { outline:2px solid var(--focus); }
.museum-ring { position:absolute; inset:0; perspective:var(--museum-perspective,1000px); perspective-origin:50% 150%; transform-style:preserve-3d; }
.museum-photo { position:absolute; left:50%; top:59%; border:0; padding:0; background:transparent; border-radius:8px; cursor:grab; backface-visibility:hidden; transform-origin:50% 50%; touch-action:pan-y pinch-zoom; user-select:none; }
.museum-photo img { display:block; width:100%; height:100%; object-fit:contain; border-radius:inherit; pointer-events:none; }
.museum-photo::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid transparent; pointer-events:none; transition:border-color 140ms; }
.museum-photo:active::after,.museum-photo:focus-visible::after { border-color:var(--focus); }
.museum-photo:focus-visible { outline-offset:4px; }
.museum-exhibition[data-running="true"] .museum-photo:not([aria-hidden="true"]) { will-change:transform; }
.museum-stage.is-dragging,.museum-stage.is-dragging .museum-photo { cursor:grabbing; }
.museum-photo .museum-image-error { position:absolute; inset:0; display:grid; place-content:center; padding:1rem; background:var(--surface); color:var(--ink); border:1px solid var(--boundary); border-radius:inherit; font-size:.875rem; text-align:center; }
.museum-message { position:absolute; inset:2rem 1.25rem; display:grid; place-content:center; gap:1rem; text-align:center; color:var(--muted); }
.museum-message button { justify-self:center; min-height:44px; padding:.5rem 1rem; border:1px solid var(--boundary); border-radius:8px; background:var(--surface); }
.museum-exhibition[data-state="empty"] .museum-stage,.museum-exhibition[data-state="error"] .museum-stage { height:13rem; margin-top:2rem; }
.museum-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem; }
.museum-context { min-width:0; }
.museum-context p { font-size:.875rem; color:var(--muted); }
.museum-position { margin-top:.3rem; font-variant-numeric:tabular-nums; }
.museum-buttons { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.museum-play { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; padding:.5rem .75rem; border:1px solid var(--boundary); border-radius:8px; background:transparent; font-size:.875rem; }
.museum-play-icon { display:inline-grid; place-items:center; width:1rem; font-size:.75rem; }
.museum-play:disabled { color:var(--muted); border-color:var(--line); }
.museum-collection { margin-top:clamp(3rem,6vw,5rem); padding-top:2rem; border-top:1px solid var(--line); scroll-margin-top:1rem; }
.museum-collection .gallery-hint { margin-top:.5rem; font-size:.875rem; }
.museum-main .album-note { max-width:76rem; padding-top:1.5rem; }
.museum-main .album-note p { max-width:44rem; }
@media (hover:hover) { .museum-photo:hover::after { border-color:var(--focus); } .museum-play:not(:disabled):hover { background:var(--hover); } }
@media (max-width:47.99rem) {
  .museum-intro h1 { max-width:16ch; margin-inline:auto; }
  .museum-stage { height:23rem; margin-top:0; }
  .museum-controls { align-items:flex-start; flex-direction:column; gap:.875rem; }
  .museum-buttons { width:100%; }
  .museum-play { margin-right:auto; }
  .museum-context { width:100%; }
  .museum-context .museum-position { margin-top:.125rem; }
  .museum-collection { margin-top:3rem; }
}
@media (max-height:32rem) and (min-width:48rem) { .museum-exhibition { padding-top:2rem; } .museum-stage { height:23rem; } }
@media (prefers-reduced-motion:reduce) { .museum-browse:active { transform:none; } .museum-photo { will-change:auto!important; } }
@media (prefers-contrast:more) { .museum-photo::after { border-color:var(--boundary); } }