/* Museum v36: compact continuous scroll choreography. */
.museum{height:185vh!important}
.museum-stage{background:radial-gradient(circle at 50% 42%,#171114 0,#080708 42%,#050505 72%)}
.museum-scene{inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important;opacity:1!important;background:transparent;overflow:hidden}
.museum-bg{z-index:0;inset:0;width:100%!important;height:100%!important;left:0!important;object-fit:fill!important;opacity:0;filter:saturate(.82) contrast(1.08);will-change:opacity}
.museum-head{z-index:2!important}
.museum-head h2{top:35%;width:min(88vw,1080px);font-size:clamp(3rem,5.8vw,6.4rem);line-height:.96}
.museum-head h2 .museum-word{color:var(--paper)!important;filter:none!important}
.museum-center-word{position:absolute!important;z-index:2!important;left:50%!important;top:45%;margin:0!important;color:var(--pink)!important;font-family:'Bodoni Moda',serif;font-size:clamp(4.5rem,9vw,9rem);font-style:italic;font-weight:500;line-height:.8;letter-spacing:-.065em;white-space:nowrap;transform:translate(-50%,-50%) scale(.94);transform-origin:center!important;clip-path:none!important;opacity:0;filter:none!important;text-shadow:0 2px 0 #87004d,0 5px 0 #4e002d,0 12px 30px rgba(242,10,143,.32);will-change:top,opacity,transform}
.museum-artwork{position:absolute;z-index:3;left:50%;top:50%;width:min(58vw,820px);aspect-ratio:3/2;opacity:0;transform:translate(-50%,calc(-50% + 72vh));will-change:transform,opacity}
.museum-frame-layer{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;filter:none;pointer-events:none;transform:translateZ(0)}
.museum-artwork .code-art{z-index:1;left:15.2%;top:16%;width:69.6%;height:66%;box-sizing:border-box;padding:clamp(12px,1.6vw,24px);transform:none;background:radial-gradient(circle at 50% 42%,rgba(242,10,143,.12),transparent 58%),#030303;box-shadow:none}
.museum-artwork .code-line{white-space:nowrap}
.museum-artwork .code-line,.museum-scene .visitor{transition:none!important}
.museum-scene .visitor{z-index:5;will-change:opacity,transform;backface-visibility:hidden}
.museum-scene .visitor img{backface-visibility:hidden;transform-origin:50% 70%}
.museum-caption{z-index:6}

@media(max-width:800px){
  .museum{height:170vh!important}
  .museum-head h2{top:31%;width:calc(100% - 34px);font-size:clamp(2.45rem,10.4vw,4.1rem);line-height:1.02}
  .museum-center-word{top:49%;font-size:clamp(4rem,19vw,6.2rem)}
  .museum-artwork{top:50%;width:88vw}
  /* On portrait screens, compose the 3:2 architecture around the frame
     instead of stretching it to the full height of the phone. */
  .museum-bg{top:50%;left:3%!important;width:94%!important;height:auto!important;aspect-ratio:3/2;object-fit:contain!important;transform:translateY(-50%)}
  /* The desktop viewer plate has an opaque 3:2 background. Cropping two
     copies on a phone creates visible seams, so mobile keeps the cleaner
     gallery composition and gives the artwork room to breathe. */
  .museum-scene .visitor{display:none!important}
  .museum-artwork .code-art{left:15.2%;top:16%;width:69.6%;height:66%;padding:8px;font-size:clamp(.42rem,1.65vw,.58rem);line-height:1.42}
  .museum-artwork .code-meta{padding-bottom:5px;margin-bottom:6px;letter-spacing:.1em}
}

@media(prefers-reduced-motion:reduce){
  .museum-center-word,.museum-artwork,.museum-bg{opacity:1!important;filter:none!important}
  .museum-artwork{transform:translate(-50%,-50%)!important}
}