:root{color-scheme:light;--step:68vw;--thumb:45px;--gap:17px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#fff;color:#353530;font:16px/1 'Times New Roman',Times,serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:focus-visible,.stage:focus-visible{outline:1px solid #777;outline-offset:4px}.room{height:100svh;display:grid;grid-template-rows:minmax(0,1fr) 136px 112px;padding-top:7svh;overflow:hidden}.stage{position:relative;min-height:0;width:100%;overflow:hidden;touch-action:none;outline-offset:-5px!important}.track{height:100%;display:flex;width:max-content;will-change:transform;transition:transform 520ms cubic-bezier(.22,.68,.2,1);transform:translate3d(calc((100vw - var(--step))/2),0,0)}.slide{width:var(--step);height:100%;flex:0 0 var(--step);margin:0;display:flex;justify-content:center;align-items:center;padding:20px 3vw 30px;position:relative}.slide img,.slide video{display:block;width:100%;height:100%;object-fit:contain;max-width:100%}.slide:not(.active){cursor:pointer}.caption{text-align:center;position:relative;z-index:3;padding:13px 20px 0;background:white}.caption p{margin:0}#kind{color:#85857d;margin-top:3px}.info-area{display:inline-block;position:relative;margin-top:16px}#info-toggle{border-bottom:1px solid #d4d4ce;padding-bottom:2px;font-size:16px}#information{position:absolute;bottom:calc(100% + 22px);left:50%;width:300px;max-width:calc(100vw - 36px);transform:translate(-50%,5px);padding:24px;background:rgba(255,255,255,.97);text-align:left;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;box-shadow:0 0 35px #00000005}#information.open{opacity:1;visibility:visible;transform:translate(-50%,0)}#information p+p{margin-top:12px}.note{color:#85857d;font-size:16px}#video-toggle{font-size:16px;color:#85857d;margin-left:16px}.filmstrip{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-self:center;touch-action:pan-x;overscroll-behavior-x:contain;padding:12px 0}.filmstrip::-webkit-scrollbar{display:none}.thumbnails{display:flex;width:max-content;align-items:center;gap:var(--gap);padding:0 calc((100vw - var(--thumb))/2)}.thumbnail{width:var(--thumb);height:64px;flex:0 0 var(--thumb);position:relative;padding:5px;opacity:.55;transition:opacity .2s ease;border:1px solid transparent;border-radius:1px}.thumbnail img{width:100%;height:100%;object-fit:contain;display:block}.thumbnail:hover,.thumbnail[aria-current=true]{opacity:1}.thumbnail[aria-current=true]{border-color:#cecec8}.thumbnail.video::after{content:'';position:absolute;right:2px;bottom:3px;border-left:4px solid #777;border-top:3px solid transparent;border-bottom:3px solid transparent}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
:root{--step:60vw}
@media(min-width:1500px){:root{--step:58vw;--thumb:48px;--gap:22px}.room{grid-template-rows:minmax(0,1fr) 150px 125px;padding-top:9svh}}
@media(max-width:700px){:root{--step:82vw;--thumb:39px;--gap:12px}.room{padding-top:8svh;grid-template-rows:minmax(0,1fr) 125px 94px}.slide{padding:12px 3vw 25px}.caption{padding-top:12px}.thumbnail{height:55px}.filmstrip{padding:8px 0}}
@media(max-height:550px){.room{padding-top:12px;grid-template-rows:minmax(0,1fr) 97px 68px}.slide{padding:5px 3vw 12px}.caption{padding-top:5px;font-size:16px}.info-area{margin-top:8px}.thumbnail{height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
.track{transition:none}.filmstrip{overflow:hidden;touch-action:none}.thumbnails{padding:0;will-change:transform}.thumbnail{border-radius:6px}.thumbnail img,.thumbnail video{width:100%;height:100%;object-fit:contain;border-radius:3px;display:block}.thumbnail.video::after{display:none}.slide img,.slide video{width:auto;height:auto;max-height:100%;max-width:100%;border-radius:0}.slide video{height:100%;max-width:100%;object-fit:contain}.information-card{font-size:16px;line-height:1;text-align:center;max-width:360px;padding:24px}.information-card p{margin:0 0 25px}.information-card a{color:inherit;text-decoration:none}.information-card a:hover{text-decoration:underline;text-underline-offset:4px}.information-card>a{font-size:16px}.info-thumbnail span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:1px solid #eee;border-radius:3px;font-size:16px;background:white}.on-info .slide:not(.active){visibility:hidden}.on-info .caption{visibility:hidden}#information{border-radius:8px}#video-toggle{display:none!important}
@media(max-width:700px){:root{--step:87vw}.information-card{font-size:16px;padding:10px;max-width:300px}.information-card>a{font-size:16px}.slide img,.slide video{border-radius:0}}
@media(max-width:700px){.information-card{align-self:flex-start;padding-top:12px;line-height:1}.room.on-info{padding-top:max(32px,env(safe-area-inset-top))}.info-thumbnail span{border:0}}
/* Compact metadata and full-frame thumbnail selection. */
.caption{padding-top:31px}
.thumbnail{padding:0;overflow:hidden}
.thumbnail[aria-current=true]{border-color:#e8e8e5}
.thumbnail img,.thumbnail video{object-fit:cover;border-radius:5px}
.information-card{max-width:760px;width:max-content;padding:24px 0;flex-shrink:0;line-height:1}
.information-card p{margin:0 0 12px}
.mini-card{position:absolute;left:0;top:0;width:720px;height:960px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:scale(.063);transform-origin:top left;background:white;font:16px/1 'Times New Roman',Times,serif;pointer-events:none}
.mini-card p{margin:0 0 12px;white-space:nowrap}
@media(min-width:1500px){.mini-card{transform:scale(.067)}}
@media(max-width:700px){.caption{padding-top:30px}.information-card{width:calc(100vw - 32px);max-width:none;padding:12px 0}.mini-card{transform:scale(.054);justify-content:flex-start;padding-top:48px}}
@media(max-height:550px){.caption{padding-top:20px}}
.information-card{line-height:.98}
.information-card p{margin-bottom:5px}
.mini-card{line-height:.98}
.mini-card p{margin-bottom:5px}
.thumbnail{padding:5px;border-radius:0;overflow:visible;transform:scale(1);transition:opacity .2s ease,transform .22s ease}
.thumbnail img,.thumbnail video{object-fit:contain;border-radius:0}
.thumbnail[aria-current=true]{padding:0;border-radius:0;overflow:hidden;transform:scale(1.12);border-color:#e8e8e5}
.thumbnail[aria-current=true] img,.thumbnail[aria-current=true] video{object-fit:contain;border-radius:0}
.room{background:#fff;color:#353530;transition:background-color .42s ease-in-out,color .42s ease-in-out}
.room.dark-stage{background:#000;color:#fff}
.room.dark-stage .mini-card{background:#000;color:#fff}
.room.dark-stage #kind{color:#b9b9b9}
.room.dark-stage .thumbnail[aria-current=true]{border-color:#aaa}
.mini-card{transition:color .42s ease-in-out,background-color .42s ease-in-out}
.caption{background:transparent}
.slide:has(.information-card):not(.active){visibility:hidden}
.slide img,.slide video{height:100%;width:auto;max-height:100%;max-width:100%;object-fit:contain}
.thumbnail,.thumbnail[aria-current=true]{border-width:.5px}
.information-card a:hover{text-decoration-thickness:.5px;text-underline-offset:3px}
.info-thumbnail,.mini-card{background:#000;color:#fff}
.mini-card p{white-space:normal;max-width:650px}
body,#info-toggle,.note,#video-toggle,.information-card,.information-card>a,.info-thumbnail span,.mini-card{font-size:18px}
@media(max-height:550px){.caption{font-size:18px}}
.stage:focus-visible{outline:none}
.stage{cursor:pointer}
.info-thumbnail:not([aria-current=true]){background:transparent}
.info-thumbnail:not([aria-current=true]) .mini-card{left:5px;top:5px;transform:scale(.055)}
@media(max-width:700px){.info-thumbnail:not([aria-current=true]) .mini-card{transform:scale(.046)}}
@media(max-height:550px){.info-thumbnail:not([aria-current=true]) .mini-card{transform:scale(.035)}}
.thumbnail{display:flex;align-items:center;justify-content:center}
.thumbnail img,.thumbnail video{width:auto;height:auto;max-width:100%;max-height:100%}
.thumbnail[aria-current=true]:not(.info-thumbnail),.room.dark-stage .thumbnail[aria-current=true]:not(.info-thumbnail){border-color:transparent;overflow:visible}
.thumbnail[aria-current=true]:not(.info-thumbnail) :is(img,video){outline:.5px solid #e8e8e5;outline-offset:0}
.room.dark-stage .thumbnail[aria-current=true]:not(.info-thumbnail) :is(img,video){outline-color:#aaa}
.mobile-break{display:none}
@media(max-width:700px){
  body,#info-toggle,.note,#video-toggle,.information-card,.information-card>a,.info-thumbnail span,.mini-card{font-size:16px}
  .information-card p{margin-bottom:0}
  .information-card{align-self:center;padding:0;line-height:1.25;transform:translateY(calc((125px + 94px - max(32px, env(safe-area-inset-top)))/2 - 13.5px))}
  .mini-card{justify-content:center;padding-top:0;padding-bottom:45px;font-size:30px;line-height:1.25}
  .mobile-break{display:revert}
}
@media(max-width:700px) and (max-height:550px){.information-card{transform:translateY(calc((97px + 68px - max(32px, env(safe-area-inset-top)))/2 - 16.5px))}}
.returning-info{background:#000!important;color:#fff!important}
.returning-info .track,.returning-info .caption{opacity:0;transition:opacity .24s ease}
.track,.caption{transition:opacity .3s ease}
#kind:empty{display:none}

/* The page under Safari's safe areas follows the current slide. */
html,body{background:#fff;transition:background-color .42s ease-in-out}
html.dark-viewport,html.dark-viewport body{background:#000}
.room{height:100dvh;min-height:100svh;padding-bottom:env(safe-area-inset-bottom)}

/* Centre the Information copy in the full viewport, not only in the media row. */
.information-card{transform:translateY(clamp(16px,4svh,58px))}

/* A video keeps its poster until real motion is ready, avoiding a white flash. */
.video-shell{position:relative;height:100%;width:auto;max-width:100%;overflow:hidden;flex:0 1 auto}
.video-shell>.video-poster,.video-shell>video{display:block;width:100%;height:100%;object-fit:contain}
.video-shell>.video-poster{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .16s ease}
.video-shell>video{opacity:0;transition:opacity .16s ease}
.video-shell.video-ready>.video-poster{opacity:0}
.video-shell.video-ready>video{opacity:1}

/* Equal optical thumbnail height; widths follow each asset's original ratio. */
.thumbnail{height:var(--thumb-height,64px);width:calc(var(--thumb-height,64px) * var(--ratio,.75));flex:0 0 auto;padding:0;transform:scale(.9);touch-action:none}
.thumbnail img,.thumbnail video{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.thumbnail[aria-current=true]{transform:scale(1.13)}
.info-thumbnail .mini-card{left:0;top:0}
body,#info-toggle,.note,#video-toggle,.information-card,.information-card>a,.info-thumbnail span{font-size:19px}
.caption{cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}

@media(min-width:1500px){.thumbnail{--thumb-height:68px}}
@media(max-width:700px){
  :root{--step:91vw}
  .thumbnail{--thumb-height:55px}
  body,#info-toggle,.note,#video-toggle,.information-card,.information-card>a,.info-thumbnail span{font-size:17px}
  .information-card{transform:translateY(calc((125px + 94px - max(32px, env(safe-area-inset-top)))/2 - 13.5px))}
  .slide{padding-left:1vw;padding-right:1vw}
  .slide:not(.landscape)>img,.slide:not(.landscape)>.video-shell{height:min(107vw,49svh);width:auto;max-width:100%;flex-shrink:0}
  .slide.landscape>img,.slide.landscape>.video-shell{width:100%;height:auto;max-height:min(107vw,49svh)}
}
@media(max-height:550px){.thumbnail{--thumb-height:44px}}
@media(max-width:700px) and (max-height:550px){.information-card{transform:translateY(calc((97px + 68px - max(32px, env(safe-area-inset-top)))/2 - 16.5px))}}

/* Let the work appear first; introduce the filmstrip with a quiet fade. */
.filmstrip{opacity:0;transform:translateY(7px);pointer-events:none;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.68,.2,1)}
.room.is-ready .filmstrip{opacity:1;transform:translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.filmstrip{transition:none;transform:none}}

/* On small screens, place the caption just above the midpoint of the media–strip gap. */
@media(max-width:700px){.caption{padding-top:6px}}

/* Keep the empty caption row on Information touchable for tap and swipe navigation. */
@media(max-width:700px){.room.on-info .caption{visibility:visible}.room.on-info .caption>*{visibility:hidden}}

/* Video thumbnails move while loading, then reveal their real looping preview. */
.thumbnail.video-thumb .preview-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;animation:preview-await 2.2s ease-in-out infinite alternate;transition:opacity .2s ease}
.thumbnail.video-thumb video{position:relative;z-index:1;opacity:0;transition:opacity .2s ease}
.thumbnail.video-thumb.preview-playing .preview-poster{opacity:0;animation:none}
.thumbnail.video-thumb.preview-playing video{opacity:1}
@keyframes preview-await{from{transform:translateX(-2%) scale(1.035)}to{transform:translateX(2%) scale(1.035)}}
@media(prefers-reduced-motion:reduce){.thumbnail.video-thumb .preview-poster{animation:none}}

/* Avoid the browser's blue text/image selection during pointer navigation. */
.stage,.filmstrip{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.stage img,.filmstrip img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.information-card{-webkit-user-select:text;user-select:text}