/* Photographs on spatial planes. Original pixels remain unfiltered in the center. */
html:has(body.viewer-open){overflow:hidden;scrollbar-gutter:auto}
.portrait-viewer.exhibition[open]{width:100vw;background:#0b0a08;gap:16px;padding:24px max(20px,3.5vw) max(16px,env(safe-area-inset-bottom));grid-template-rows:auto minmax(60px,1fr) auto auto}
.exhibition::backdrop{background:#080706eb}
.exhibition .viewer-top{min-height:64px;z-index:5}
.exhibition .viewer-session-title{font-size:clamp(24px,2.5vw,38px);line-height:1.15}
.exhibition .viewer-session-detail{font-size:12px;letter-spacing:.07em;color:#c9b6a3}
.exhibition .viewer-session .lighting-look,.exhibition .viewer-original{display:none!important}
.exhibition .viewer-stage{perspective:1500px;perspective-origin:50% 45%;isolation:auto;overflow:visible}
.exhibition .viewer-image,.exhibition-outgoing{position:absolute;z-index:2;max-width:none;max-height:none;object-fit:contain;transform-origin:center;backface-visibility:hidden;border:1px solid #f4f1ea14;box-shadow:0 25px 65px #0009;filter:none!important}
.exhibition-outgoing{pointer-events:none;z-index:3}
.exhibition-light{position:absolute;inset:-12% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,55%) var(--light-y,30%),#e8743b13,transparent 58%);opacity:0;transition:opacity 1.1s}
.exhibition-floor{position:absolute;left:12%;right:12%;bottom:-4%;height:30%;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(ellipse at 50% 70%,#e8743b17,transparent 67%);transform:rotateX(64deg);transform-origin:50% 100%;transition:opacity 1.2s}
.exhibition.is-arrived .exhibition-light,.exhibition.is-arrived .exhibition-floor{opacity:1}
.exhibition .viewer-bottom{border-top:0;z-index:5;padding-top:8px}
.exhibition .viewer-meta{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:22px;min-width:0}
.exhibition .viewer-title{font:italic clamp(20px,2vw,28px)/1.3 var(--display);margin:0;max-width:40ch}
.exhibition .viewer-status{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.exhibition .viewer-actions{gap:8px}
.exhibition .viewer-actions button{font-size:14px;border-color:#f4f1ea26;min-height:44px}
.exhibition .viewer-actions .viewer-prev,.exhibition .viewer-actions .viewer-next{font-size:24px;width:48px;padding-inline:0}
.exhibition .viewer-close span:first-child{font-size:14px}
.exhibition .viewer-close:hover{color:var(--ember)}
.exhibition .viewer-filmstrip{overflow:visible;padding-top:0}
.exhibition .viewer-rail{gap:14px;padding-block:8px 4px}
.exhibition .viewer-thumb{opacity:.45;transition:opacity .3s,transform .5s;transform:scale(.9);height:76px;padding-bottom:8px}
.exhibition .viewer-thumb[aria-current=true]{transform:scale(1);opacity:1}
.exhibition .viewer-thumb img{filter:grayscale(.8);object-position:50% 50%}
.exhibition .viewer-thumb[aria-current=true] img{filter:none}
.exhibition .viewer-thumb::after{left:0;right:0}
.exhibition .viewer-distant{display:none}
.exhibition.is-zoomed .viewer-stage{overflow:hidden;perspective:none}
.exhibition.is-zoomed .exhibition-floor,.exhibition.is-zoomed .exhibition-light{opacity:0}
.exhibition.is-background *{animation-play-state:paused!important}
@media(min-width:1050px) and (min-height:600px) and (hover:hover) and (pointer:fine){
 .exhibition .viewer-stage{margin-block:12px}
 .exhibition .viewer-peek{display:block;position:absolute;top:14%;bottom:14%;width:20%;background:none;border:0;padding:0;overflow:visible;opacity:0;z-index:1;transform-origin:center;transition:opacity .7s,transform .8s cubic-bezier(.22,.8,.2,1)}
 .exhibition .viewer-peek--previous{left:2%;transform:translate3d(-35px,0,-250px) rotateY(30deg)}
 .exhibition .viewer-peek--next{right:2%;transform:translate3d(35px,0,-250px) rotateY(-30deg)}
 .exhibition.is-arrived .viewer-peek{opacity:.65}
 .exhibition.is-arrived .viewer-peek--previous{transform:translate3d(0,0,-125px) rotateY(23deg)}
 .exhibition.is-arrived .viewer-peek--next{transform:translate3d(0,0,-125px) rotateY(-23deg)}
 .exhibition .viewer-peek img{width:100%;height:100%;object-fit:contain;filter:grayscale(.6) brightness(.8);box-shadow:none;transition:filter .4s;pointer-events:none}
 .exhibition.is-arrived .viewer-peek:hover{opacity:1;transform:translate3d(0,0,-55px) rotateY(0)}
 .exhibition .viewer-peek:hover img{filter:none}
 .exhibition .viewer-peek::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#e8743b12 48%,transparent 66%);background-size:250% 100%;animation:exhibition-warmth 14s ease-in-out infinite;mix-blend-mode:screen}
 .exhibition .viewer-peek--next::after{animation-delay:-7s}
 .exhibition .viewer-distant{display:block;position:absolute;width:14%;top:24%;bottom:24%;pointer-events:none;z-index:0;opacity:0;transition:opacity 1s}
 .exhibition .viewer-distant--previous{left:-13%;transform:translateZ(-350px) rotateY(38deg)}
 .exhibition .viewer-distant--next{right:-13%;transform:translateZ(-350px) rotateY(-38deg)}
 .exhibition.is-arrived .viewer-distant{opacity:.2}
 .exhibition .viewer-distant img{width:100%;height:100%;object-fit:contain;filter:grayscale(.8)}
 .exhibition.is-zoomed .viewer-distant,.exhibition.is-zoomed .viewer-peek{visibility:hidden}
 .exhibition:not(.is-arrived) .viewer-peek::after,.exhibition.is-zoomed .viewer-peek::after{animation-play-state:paused}
}
.exhibition .viewer-peek[hidden],.exhibition .viewer-distant[hidden]{display:none!important}
@keyframes exhibition-warmth{0%,100%{background-position:100% 50%;opacity:.15}50%{background-position:0 50%;opacity:.65}}
@media(max-width:1049px),(max-height:599px),(hover:none),(pointer:coarse){
 .exhibition .viewer-stage{perspective:none}
 .exhibition .viewer-peek,.exhibition .viewer-distant{display:none}
 .exhibition-floor{display:none}
 .exhibition-light{background:radial-gradient(ellipse at 50% 30%,#e8743b0b,transparent 65%)}
}
@media(max-width:700px){
 .portrait-viewer.exhibition[open]{gap:12px;padding:12px 16px max(10px,env(safe-area-inset-bottom))}
 .exhibition .viewer-top{min-height:62px;grid-template-columns:minmax(0,1fr) 44px;gap:8px}
 .exhibition .viewer-session-title{font-size:25px;line-height:1.15}
 .exhibition .viewer-session-detail{font-size:12px;letter-spacing:0;text-transform:none}
 .exhibition .viewer-close{padding:0;justify-content:center}
 .exhibition .viewer-bottom{flex-direction:column;align-items:stretch;gap:14px}
 .exhibition .viewer-meta{flex-direction:row;justify-content:space-between;gap:12px}
 .exhibition .viewer-title{font-size:21px;max-width:72%}
 .exhibition .viewer-actions{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}
 .exhibition .viewer-zoom{flex:1}
 .exhibition .viewer-actions .viewer-version{flex-basis:100%;font-size:13px}
 .exhibition .viewer-rail{gap:10px;padding-inline:calc(50% - 23.5px)}
 .exhibition .viewer-thumb{height:61px;min-width:47px;flex-basis:47px}
}
@media(max-height:500px){
 .portrait-viewer.exhibition[open]{padding:6px max(14px,3vw);gap:6px}
 .exhibition .viewer-top{min-height:40px}
 .exhibition .viewer-session-title{font-size:20px;margin-bottom:2px}
 .exhibition .viewer-session-detail{font-size:11px;line-height:1.2}
 .exhibition .viewer-bottom{flex-direction:row;align-items:center;gap:10px;padding:0}
 .exhibition .viewer-meta{gap:12px}.exhibition .viewer-title{font-size:18px;max-width:40ch}
 .exhibition .viewer-actions{width:auto;flex-wrap:nowrap}.exhibition .viewer-actions button{min-height:40px;font-size:12px}
 .exhibition .viewer-actions .viewer-version{flex-basis:auto}
 .exhibition .viewer-thumb{height:40px;min-width:34px;flex-basis:34px;padding-bottom:5px}
 .exhibition .viewer-rail{padding:2px calc(50% - 17px);gap:8px}
}
@media(prefers-reduced-motion:reduce){
 .exhibition .viewer-stage{perspective:1500px}
 .exhibition .viewer-peek::after{animation:none!important}
 .exhibition .viewer-peek,.exhibition .viewer-distant,.exhibition .viewer-thumb,.exhibition-light,.exhibition-floor{transition:none!important}
}
@media(prefers-reduced-motion:reduce) and (min-width:1050px) and (min-height:600px) and (hover:hover) and (pointer:fine){
 .portrait-viewer.exhibition .viewer-peek--previous{transform:translateZ(-125px) rotateY(23deg)!important}
 .portrait-viewer.exhibition .viewer-peek--next{transform:translateZ(-125px) rotateY(-23deg)!important}
}