:root{font-family:Helvetica,Arial,sans-serif;color:#242424;background:rgb(201,201,201);font-size:16px}*{box-sizing:border-box}body{margin:0}header{position:fixed;top:0;left:0;right:0;z-index:2;display:flex;gap:24px;padding:24px 30px;align-items:center;background:transparent}header span{margin-left:auto;font-size:14px}a,button{color:inherit;font:inherit;font-size:14px}a{text-decoration:none;opacity:.6}a[aria-current]{opacity:1}button{background:none;border:0;cursor:pointer;padding:12px 10px}button:hover,a:hover{opacity:.65}button:focus-visible,a:focus-visible{outline:1px solid #222;outline-offset:4px}#viewer{position:fixed;inset:80px 20px 110px;cursor:grab}#viewer:active{cursor:grabbing}body.focused #viewer{right:340px}#details{position:fixed;right:0;top:80px;bottom:110px;width:310px;padding:20px 30px 20px 10px;overflow:auto}#details[hidden]{display:none}#close{padding-left:0;margin-bottom:42px}h1{font-size:28px;font-weight:400;letter-spacing:-.04em;margin:14px 0 32px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase}dl{font-size:14px;line-height:1.6}dt{color:#555;margin-top:18px}dd{margin:0}.note{font-size:13px;line-height:1.6;color:#555;max-width:230px}.arrows{display:flex;justify-content:space-between;margin-top:32px}footer{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 30px;background:#c9c9c9}footer p{font-size:13px;margin:8px 0 0;color:#555}#work-list{display:flex;gap:8px}#work-list button{border-bottom:1px solid transparent}#work-list button[aria-pressed=true]{border-color:#222}@media(max-width:700px){header{padding:20px;gap:18px}header span{display:none}footer{padding:16px;flex-wrap:wrap;gap:4px}footer>div{width:100%}footer p{margin:5px 0}#viewer{inset:70px 12px 140px}body.focused #viewer{right:12px;bottom:340px}#details{top:auto;bottom:140px;left:20px;right:20px;width:auto;height:190px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}#close{grid-column:1/-1;margin:0;text-align:left}.eyebrow{margin:0}h1{font-size:22px;margin:0}dl{margin:0;grid-row:2/5;grid-column:2}.note{display:none}dt{margin:0}.arrows{margin:0;grid-column:1/-1}}
@media(max-width:700px){#work-list{gap:0}#work-list button{padding:10px 8px}footer{column-gap:8px}#overview{padding-left:0}}

svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:11px;margin-left:-11px}
#gesture-hint{color:#555;opacity:.65;pointer-events:none}
footer{justify-content:center}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.gesture-left{animation:gesture-left 2.8s ease-in-out 3}.gesture-right{animation:gesture-right 2.8s ease-in-out 3}
@keyframes gesture-left{0%,100%{transform:translateX(3px)}50%{transform:translateX(-3px)}}
@keyframes gesture-right{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.gesture-left,.gesture-right{animation:none}}
#hint.load-error{position:static!important;width:auto;height:auto;clip-path:none;white-space:normal;overflow:visible}

#gesture-hint{display:flex;align-items:center;justify-content:center;gap:8px;height:32px;animation:hint-fade 3.5s ease forwards}
#gesture-hint span{display:block;width:3px;height:3px;border-radius:50%;background:currentColor}
#gesture-hint span:first-child{animation:dot-out-left 3.5s ease forwards}
#gesture-hint span:last-child{animation:dot-out-right 3.5s ease forwards}
@keyframes dot-out-left{0%,20%{transform:translateX(0)}65%,100%{transform:translateX(-5px)}}
@keyframes dot-out-right{0%,20%{transform:translateX(0)}65%,100%{transform:translateX(5px)}}
@keyframes hint-fade{0%{opacity:0}20%,65%{opacity:.5}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#gesture-hint,#gesture-hint span{animation:none}#gesture-hint{opacity:.4}}
#gesture-hint{gap:16px;height:40px;animation-duration:5s}
#gesture-hint span{width:6px;height:6px}
#gesture-hint span:first-child,#gesture-hint span:last-child{animation-duration:5s}
@keyframes dot-out-left{0%,20%{transform:translateX(0)}65%,100%{transform:translateX(-12px)}}
@keyframes dot-out-right{0%,20%{transform:translateX(0)}65%,100%{transform:translateX(12px)}}
@keyframes hint-fade{0%{opacity:0}20%,70%{opacity:.7}100%{opacity:0}}

#gesture-hint{gap:24px;height:48px;min-width:104px;padding:12px;opacity:.65;animation:none;pointer-events:auto;cursor:pointer}
#gesture-hint span{width:9px;height:9px;animation:none!important}
#gesture-hint.gesture-play span:first-child{animation:pinch-left 3s ease-in-out 2!important}
#gesture-hint.gesture-play span:last-child{animation:pinch-right 3s ease-in-out 2!important}
@keyframes pinch-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}}
@keyframes pinch-right{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
@media(prefers-reduced-motion:reduce){#gesture-hint.gesture-play span{animation:none!important}}

/* A brief pinch gesture: two translucent points merge, separate, and disappear. */
#gesture-hint{position:relative;width:104px;height:48px;min-width:0;padding:0;opacity:0;pointer-events:none;cursor:default;isolation:isolate}
#gesture-hint span{position:absolute;left:calc(50% - 4px);top:calc(50% - 4px);width:8px;height:8px;background:rgba(35,35,35,.34);mix-blend-mode:multiply;animation:none!important}
#gesture-hint.gesture-play{animation:pinch-cue-fade 4.6s ease forwards}
#gesture-hint.gesture-play span:first-child{animation:pinch-merge-left 4.6s ease-in-out forwards!important}
#gesture-hint.gesture-play span:last-child{animation:pinch-merge-right 4.6s ease-in-out forwards!important}
@keyframes pinch-cue-fade{0%{opacity:0}15%,76%{opacity:1}100%{opacity:0}}
@keyframes pinch-merge-left{0%,20%{transform:translateX(-19px)}46%,56%{transform:translateX(-2px)}80%,100%{transform:translateX(-19px)}}
@keyframes pinch-merge-right{0%,20%{transform:translateX(19px)}46%,56%{transform:translateX(2px)}80%,100%{transform:translateX(19px)}}
@media(prefers-reduced-motion:reduce){#gesture-hint.gesture-play span:first-child{animation:none!important;transform:translateX(-12px)}#gesture-hint.gesture-play span:last-child{animation:none!important;transform:translateX(12px)}}

/* Pinch, change direction, then move together through the field. */
#gesture-hint.gesture-play{animation:navigation-cue-fade 6.4s ease forwards}
#gesture-hint.gesture-play span:first-child{animation:navigation-dot-first 6.4s ease-in-out forwards!important}
#gesture-hint.gesture-play span:last-child{animation:navigation-dot-second 6.4s ease-in-out forwards!important}
@keyframes navigation-cue-fade{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}
@keyframes navigation-dot-first{
0%,12%{transform:translate(-17px,0) scale(1)}
30%{transform:translate(-2px,0) scale(.8)}
49%{transform:translate(0,-13px) scale(1.1)}
62%{transform:translate(0,-3px) scale(.9)}
76%,100%{transform:translate(0,-3px) scale(.9)}
}
@keyframes navigation-dot-second{
0%,12%{transform:translate(17px,0) scale(1)}
30%{transform:translate(2px,0) scale(.8)}
49%{transform:translate(0,13px) scale(1.1)}
62%{transform:translate(0,3px) scale(.9)}
76%,100%{transform:translate(0,3px) scale(.9)}
}
@media(prefers-reduced-motion:reduce){#gesture-hint.gesture-play span:first-child{animation:none!important;transform:translateX(-12px)}#gesture-hint.gesture-play span:last-child{animation:none!important;transform:translateX(12px)}}
/* One outward pinch, without pulsing or a change of direction. */
#gesture-hint.gesture-play{animation:single-pinch-fade 3.8s ease forwards}
#gesture-hint.gesture-play span:first-child{animation:single-pinch-left 3.8s ease-in-out forwards!important}
#gesture-hint.gesture-play span:last-child{animation:single-pinch-right 3.8s ease-in-out forwards!important}
@keyframes single-pinch-fade{0%{opacity:0}15%,72%{opacity:1}100%{opacity:0}}
@keyframes single-pinch-left{0%,20%{transform:translateX(-5px)}58%,100%{transform:translateX(-19px)}}
@keyframes single-pinch-right{0%,20%{transform:translateX(5px)}58%,100%{transform:translateX(19px)}}
@media(prefers-reduced-motion:reduce){#gesture-hint.gesture-play span:first-child{animation:none!important;transform:translateX(-12px)}#gesture-hint.gesture-play span:last-child{animation:none!important;transform:translateX(12px)}}

#viewer.detail-anchored,#viewer.detail-anchored:active{cursor:default}

/* In detail, two quick impressions suggest a double click or tap. */
#gesture-hint.double-tap-cue.gesture-play{animation:single-pinch-fade 3.8s ease forwards}
#gesture-hint.double-tap-cue.gesture-play span:first-child{transform:none;animation:double-tap-dot 3.8s ease forwards!important}
#gesture-hint.double-tap-cue.gesture-play span:last-child{width:20px;height:20px;left:calc(50% - 10px);top:calc(50% - 10px);background:none;border:1px solid rgba(35,35,35,.3);mix-blend-mode:normal;animation:double-tap-ring 3.8s ease-out forwards!important}
@keyframes double-tap-dot{0%,19%,35%,100%{opacity:.65;transform:scale(1)}23%,39%{opacity:1;transform:scale(.8)}29%,45%{opacity:.65;transform:scale(1)}}
@keyframes double-tap-ring{0%,19%,35%{opacity:0;transform:scale(.4)}23%,39%{opacity:.7;transform:scale(.55)}33%,52%,100%{opacity:0;transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){#gesture-hint.double-tap-cue.gesture-play span:first-child{animation:none!important;transform:none}#gesture-hint.double-tap-cue.gesture-play span:last-child{animation:none!important;opacity:0}}

body.focused #details{animation:work-information-enter .65s ease both}
@keyframes work-information-enter{0%,45%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body.focused #details{animation:none}}

body:not(.keyboard-navigation) #viewer:focus,
body:not(.keyboard-navigation) #viewer :focus,
body:not(.keyboard-navigation) button:focus,
body:not(.keyboard-navigation) a:focus{outline:none}
body.keyboard-navigation #viewer:focus,
body.keyboard-navigation #viewer :focus,
body.keyboard-navigation button:focus,
body.keyboard-navigation a:focus{outline:1px solid #333;outline-offset:3px}
/* Let the archive field extend to the edges beneath the floating controls. */
#viewer{inset:0}
body.focused #viewer{inset:0 340px 0 0}
header,footer{pointer-events:none}
header a,footer button{pointer-events:auto}
footer{background:transparent}
@media(max-width:700px){#viewer{inset:0}body.focused #viewer{inset:0 0 340px 0}}

/* Move the work into the reading space without clipping the moving canvas. */
body.focused #viewer{inset:0}
body.focused #details{background:rgba(201,201,201,.96);padding-left:20px;animation:work-information-enter .85s ease both}
@keyframes work-information-enter{0%,70%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:700px){body.focused #viewer{inset:0}}
@media(prefers-reduced-motion:reduce){body.focused #details{animation:none}}

body.focused.detail-docked #viewer{inset:0 340px 0 0}
@media(max-width:700px){body.focused.detail-docked #viewer{inset:0 0 340px 0}}

/* Clip the settled view without resizing its drawing surface. */
body.focused.detail-docked #viewer{inset:0;clip-path:inset(0 340px 0 0)}
@media(max-width:700px){body.focused.detail-docked #viewer{inset:0;clip-path:inset(0 0 340px 0)}}

/* Let surface exploration occupy the full canvas without moving the camera. */
#details> :not(#close){transition:opacity .25s ease,visibility .25s ease}
#details{transition:background-color .25s ease}
body.focused.exploring-detail #details{background:transparent;pointer-events:none}
body.exploring-detail #details> :not(#close){opacity:0;visibility:hidden;pointer-events:none}
body.exploring-detail #details #close{pointer-events:auto}
body.focused.detail-docked.exploring-detail #viewer{clip-path:none}
@media(prefers-reduced-motion:reduce){#details,#details> :not(#close){transition:none}}
/* Keep one stable drawing surface; dissolve a panel-sized mask instead of clipping. */
body.focused.detail-docked #viewer{clip-path:none}
body.focused.detail-docked::after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;width:340px;background:rgb(201,201,201);pointer-events:none;opacity:1;transition:opacity .4s ease}
body.focused.detail-docked.exploring-detail::after{opacity:0}
#details{z-index:2;background:transparent!important}
#details> :not(#close){transition:opacity .35s ease,visibility .35s ease}
@media(max-width:700px){body.focused.detail-docked #viewer{clip-path:none}body.focused.detail-docked::after{top:auto;left:0;width:auto;height:340px}}
@media(prefers-reduced-motion:reduce){body.focused.detail-docked::after{transition:none}}

/* Shared transition pace for the camera and supporting information. */
:root{--motion-duration:700ms;--motion-ease:cubic-bezier(.22,.61,.36,1)}
body.focused.detail-docked::after{transition:opacity var(--motion-duration) var(--motion-ease)}
#details> :not(#close){transition:opacity var(--motion-duration) var(--motion-ease),visibility var(--motion-duration)}
body.focused #details{animation:work-information-enter var(--motion-duration) var(--motion-ease) both}
@keyframes work-information-enter{0%,35%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body.focused #details{animation:none}body.focused.detail-docked::after,#details> :not(#close){transition:none}}
/* Match the neutral surround sampled from the color-managed exports. */
:root{background:rgb(194,194,194)}
body.focused.detail-docked::after{background:rgb(194,194,194)}

#object-description{font-size:16px;line-height:1.6;font-weight:400;margin:20px 0 28px;max-width:28ch}
@media(max-width:700px){#object-description{grid-column:1/-1;margin:8px 0;max-width:none}}

#object-description{font-size:14px;line-height:1.6;margin:20px 0 28px;max-width:none}#object-description dl{margin:0}#object-description dt{margin-top:18px;color:#555}#object-description dd{margin:0}

/* Gallery label: quiet typography, separate from navigation. */
body.focused #details{display:flex;flex-direction:column}
#details #close{flex-shrink:0}
#object-description{margin-top:auto;margin-bottom:32px;font-size:14px;line-height:1.65;font-weight:400;color:#333;max-width:none}
#object-description>div{margin:0}
#details .arrows{margin-top:0;flex-shrink:0}
@media(max-width:700px){#object-description{margin-top:8px;margin-bottom:14px;font-size:14px}#details #close{margin-bottom:0}}

@media(min-width:701px){body.focused #details{width:250px;padding-left:18px;padding-right:20px}body.focused.detail-docked::after{width:250px}#details .arrows button{padding-left:0;padding-right:0}}

/* The label belongs to the work, rather than a window-edge sidebar. */
body.focused.detail-docked::after{display:none}
body.focused #details{inset:0;width:auto;height:auto;padding:0;overflow:visible;pointer-events:none;animation:none}
#details #close{position:fixed;right:24px;top:24px;margin:0;pointer-events:auto}
#details #object-description{position:fixed;margin:0;font-size:14px;line-height:1.6;max-width:calc(100vw - 48px);transition:opacity 700ms ease,visibility 700ms ease;pointer-events:none}
#details .arrows{position:fixed;bottom:22px;right:24px;gap:24px;pointer-events:auto}
body.focused:not(.detail-docked) #object-description{opacity:0;visibility:hidden}
body.focused.detail-docked:not(.exploring-detail) #object-description{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){#details #object-description{transition:none}}

#details .arrows{display:none}

#details #object-description{font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45;font-weight:400;letter-spacing:normal;color:#292929;-webkit-font-smoothing:antialiased}
#object-description .catalog-heading{margin-bottom:7px}
#object-description em{font-weight:400}

/* The surrounding field is the return control; Escape remains available. */
#details #close{display:none}

/* Raise and enlarge the single-work double-click cue without changing its timing. */
#gesture-hint.double-tap-cue{transform:translateY(-36px) scale(1.65);transform-origin:center}

/* One demonstration: double tap, approach, pause, return. */
#gesture-hint.double-tap-cue.gesture-play{animation:zoom-demonstration-fade 4.8s ease forwards}
#gesture-hint.double-tap-cue.gesture-play span:first-child{animation:zoom-demonstration-dot 4.8s ease forwards!important}
#gesture-hint.double-tap-cue.gesture-play span:last-child{animation:zoom-demonstration-ring 4.8s cubic-bezier(.4,0,.2,1) forwards!important}
@keyframes zoom-demonstration-fade{0%{opacity:0}10%,86%{opacity:1}100%{opacity:0}}
@keyframes zoom-demonstration-dot{0%,13%,22%,32%,100%{opacity:.55;transform:scale(1)}17%,26%{opacity:1;transform:scale(1)}}
@keyframes zoom-demonstration-ring{0%,28%{opacity:.35;transform:scale(.65)}52%,65%{opacity:.85;transform:scale(1.65)}85%,100%{opacity:.35;transform:scale(.65)}}
@media(prefers-reduced-motion:reduce){#gesture-hint.double-tap-cue.gesture-play span:first-child{animation:none!important}#gesture-hint.double-tap-cue.gesture-play span:last-child{animation:none!important;opacity:.35;transform:scale(1)}}

#gesture-hint.double-tap-cue{display:none}


/* Keep the tombstone compact, with one restrained pause after title/date. */
#details #object-description{line-height:1.4;max-width:min(520px,calc(100vw - 48px))}
#object-description>div{margin:0;padding:0}
#object-description .catalog-heading{margin-bottom:3px}

#details #object-description{line-height:1.5}
#object-description .catalog-heading{margin-bottom:0}

/* Artwork label: one alignment, restrained hierarchy. */
#details #object-description{font-size:14px;line-height:1.5;font-weight:400;color:#515151}
#object-description .catalog-heading{color:#292929;margin-bottom:4px;font-weight:400}

#object-description .catalog-heading{margin-bottom:0}

#details #object-description{font-size:12px;color:#292929}

#object-description .catalog-dimensions{margin-top:0}
#object-description .catalog-dimensions strong{display:block;font-weight:600}