/* A native-scroll exhibition. All content remains visible without motion. */
.opening-copy,.opening-visual img,.entrance{animation:none}
.memory-band{display:block;padding:0;min-height:0;position:relative}
.memory-stage{display:grid;grid-template-columns:54% 46%;align-items:center;padding:48px var(--gutter);min-height:720px;background:var(--green);position:relative}
.memory-theatre{padding:0 8% 0 0}
.theatre-wrap{width:min(100%,490px);margin:auto}
.theatre{width:100%;max-height:none}
.saj-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:rotate(-90deg);overflow:visible}
.saj-trace circle{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:var(--trace,1);opacity:.72}
.orbit-inner{border-style:solid;opacity:.35}
.memory-line{display:block;width:66px;height:1px;background:var(--gold);margin-top:26px;transform-origin:left}
.scene-motion{font:12px/1.4 var(--body);color:var(--gold);min-height:44px;padding:8px 0;text-decoration:underline;text-underline-offset:5px;opacity:.85}
.js .scene-motion{display:block;margin:0 auto}
.hero-selector{position:relative}
.hero-selector button span{transform-origin:left;transition:background .3s,transform .5s var(--ease)}
.hero-selector button[aria-pressed=true] span{transform:scaleX(1.45)}
.memory-band.is-pinned{height:var(--scene-height)}
.is-pinned .memory-stage{position:sticky;top:var(--scene-top);min-height:calc(100svh - var(--scene-top));padding-block:30px}
.is-pinned .theatre-wrap{width:min(100%,45svh)}
.is-pinned .memory-copy h2{font-size:clamp(40px,3.7vw,66px)}
.is-pinned .memory-detail{max-width:230px;max-height:125px}
.is-pinned .memory-copy{padding-bottom:24px}
.is-pinned .memory-theatre{padding-right:8%}
.is-pinned .second-look-label{margin-bottom:12px}
.is-pinned .theatre-caption{margin-top:10px}
.is-pinned .hero-selector{margin-top:4px}
.is-pinned .memory-marker{margin-top:18px}
#studio-portrait picture{transform-origin:center;display:block}
.turning-stage .turning-ghost{position:absolute;inset:0;pointer-events:none;z-index:2}
.turning-stage img{transition:none}
.turning-main-image.is-changing{opacity:1}
.turning-orbit:after{content:'';position:absolute;width:5px;height:5px;background:var(--gold);border-radius:50%;top:50%;left:-3px;box-shadow:0 0 0 5px #dcc3960c}
.turning-orbit{rotate:var(--turn-orbit,0deg)}
.pick-rule{transform-origin:left}
html[dir=rtl] .pick-rule,html[dir=rtl] .memory-line{transform-origin:right}
.button,.opening-cta,.text-link,.turning-controls button,.gallery-nav button{transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.opening-cta b,.text-link>span:last-child,.art-link-hint{transition:translate .5s var(--ease)}
@media(hover:hover) and (pointer:fine){
 .opening-cta:hover b,.text-link:hover>span:last-child{translate:4px 0}
 .button:hover{box-shadow:0 6px 20px #15291f12}
 .turning-controls button:hover,.gallery-nav button:hover{background:#dcc39624}
 .art-link:hover .art-link-hint{translate:0 -3px}
}
@media(max-width:1180px){.memory-stage{min-height:660px;padding-block:48px}.memory-theatre{padding-right:5%}}
@media(max-width:760px){
 .memory-stage{grid-template-columns:1fr;min-height:0;gap:30px;padding:46px var(--gutter) 52px}
 .memory-theatre{padding:0}.theatre-wrap{max-width:500px;width:100%}
 .memory-line{margin-top:22px}.scene-motion{font-size:12px}
 .js .scene-motion{margin-top:0}.memory-detail{height:160px}
 .turning-orbit:after{width:4px;height:4px;left:-2px}
}
html[dir=rtl] .scene-motion{font-size:16px}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] .saj-trace{--trace:0}
@media(prefers-reduced-motion:reduce){.saj-trace{--trace:0}.turning-orbit{rotate:0deg}}

.turning-copy .scene-motion{margin:8px 0 0;text-align:start}

/* Stable light levels: a new image is fully present under the outgoing one. */
html{scrollbar-gutter:stable}
.theatre-frame{transition:none;transform:none}
.theatre-frame.active{opacity:1;z-index:1}
.theatre-frame.scene-outgoing{opacity:1;z-index:2;pointer-events:none}
.motion-entrance{opacity:1;translate:0 0;transition:opacity .9s cubic-bezier(.22,1,.36,1),translate 1.1s cubic-bezier(.22,1,.36,1)}
.motion-entrance.motion-waiting{opacity:0;translate:0 20px}
html[data-motion=off] .motion-entrance{opacity:1;translate:none;transition:none}
@media(prefers-reduced-motion:reduce){.motion-entrance{opacity:1!important;translate:none!important;transition:none!important}}
.dialog-image-stage,.photo-stage{position:relative;isolation:isolate;touch-action:pan-y pinch-zoom}
.dialog-image-stage{height:min(62svh,620px)}
.dialog-image-stage>img{width:100%;height:100%;object-fit:contain}
.image-outgoing{position:absolute!important;inset:0;z-index:2;pointer-events:none;object-fit:contain}
.photo-dialog{width:min(1080px,calc(100% - 48px));padding:50px 28px 24px;overflow:auto}
.photo-stage{height:clamp(160px,calc(90svh - 218px),720px);width:100%}
.photo-stage>img,#photo-full{width:100%;height:100%;max-height:none;object-fit:contain}
.photo-dialog .close-button{z-index:4;min-height:44px;min-width:44px}
.photo-navigation{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:12px;margin-top:18px}
.photo-navigation button{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:8px 14px;font:16px/1.4 var(--body);color:var(--green)}
.photo-navigation button span{font-size:22px}
#photo-counter{font:14px/1.4 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
#photo-caption{font:16px/1.65 var(--body);margin-top:12px;min-height:2.8em;text-align:center}
html[dir=rtl] #photo-caption{font-size:20px;line-height:1.7}
html[dir=rtl] .photo-navigation button{font-size:18px}
html[dir=rtl] .gallery-nav button>span{display:inline-block;transform:scaleX(-1)}
[data-photo][aria-busy=true],[data-work][aria-busy=true]{cursor:progress}
@media(max-width:760px){
 .dialog-image-stage{height:43svh}
 .photo-dialog{width:calc(100% - 20px);max-width:calc(100% - 20px);padding:48px 14px 18px}
 .photo-stage{height:clamp(140px,calc(88svh - 248px),600px)}
 .photo-navigation{gap:8px;margin-top:14px;padding-top:10px}
 .photo-navigation button{padding:8px 4px;gap:7px;font-size:15px}
 #photo-caption{font-size:15px;line-height:1.6;min-height:0}
 html[dir=rtl] #photo-caption{font-size:18px}
}

.gallery-nav{direction:inherit}
.photo-navigation button{width:auto;min-width:110px;height:auto;border-radius:0;justify-content:center}
@media(max-width:760px){.photo-navigation button{min-width:88px}}
