/* A compact contact strip keeps the gallery in view while choosing a film. */
#open-index{gap:10px;padding:0 6px;min-width:44px;min-height:44px}
.film-strip-icon{display:flex;align-items:center;gap:3px;width:28px;height:25px;color:var(--cream)}
.film-strip-icon i{display:block;width:7px;height:16px;border:1px solid currentColor;transition:transform .3s ease}
.film-strip-icon i:nth-child(2){transform:translateY(-3px)}
.film-strip-icon i:nth-child(3){transform:translateY(3px)}
#open-index:hover .film-strip-icon i{transform:translateY(0)}
.film-strip-label{font:400 9px/1 DM,Arial,sans-serif;letter-spacing:.09em}
/* Keep the index in the header row, clear of the neighboring preview. */
@media(min-width:761px) and (min-height:501px){
 .cinema-top{top:max(20px,calc(env(safe-area-inset-top) + 8px));left:auto;right:max(calc(var(--gutter) + 80px),calc(env(safe-area-inset-right) + 96px))}
}
@media(max-height:500px) and (orientation:landscape){
 .cinema-top{top:max(26px,calc(env(safe-area-inset-top) + 8px));left:auto;right:max(calc(var(--gutter) + 80px),calc(env(safe-area-inset-right) + 96px))}
 .cinema-top .film-strip-label{display:none}
}
#film-index{position:fixed;inset:0;width:100%;height:100dvh;background:transparent;overflow:hidden;padding:0}
#film-index::backdrop{background:rgba(0,0,0,.18)}
.film-strip-panel{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(80px,calc(env(safe-area-inset-top) + 64px));bottom:max(22px,env(safe-area-inset-bottom));width:238px;display:flex;flex-direction:column;min-height:0;background:rgba(16,17,15,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 60px #0004;transform-origin:top right;will-change:clip-path,transform}
.film-strip-panel:before,.film-strip-panel:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(var(--cream),var(--cream)) left top/22px 1px no-repeat,linear-gradient(var(--cream),var(--cream)) left top/1px 22px no-repeat,linear-gradient(var(--cream),var(--cream)) right bottom/22px 1px no-repeat,linear-gradient(var(--cream),var(--cream)) right bottom/1px 22px no-repeat;opacity:.65}
.film-strip-panel:after{transform:scaleX(-1)}
#film-index .dialog-bar{border:0;min-height:56px;padding:8px 17px;flex:none;gap:10px}
#film-index .dialog-bar h2{font:400 10px/1.2 DM,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.index-total{margin-left:8px;opacity:.45;font-variant-numeric:tabular-nums}
#film-index .close-index{min-width:44px;min-height:44px;font:300 28px/1 DM,Arial,sans-serif;letter-spacing:0}
#film-index .index-list{padding:8px 18px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#77766a transparent;min-height:0;scroll-padding:12px}
#film-index .index-entry{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0;gap:9px;border:0;margin-bottom:21px;text-align:left;touch-action:manipulation}
#film-index .index-entry:last-child{margin-bottom:0}
.index-image{position:relative;display:block;aspect-ratio:16/9;width:100%;overflow:hidden;background:#23241f;outline:1px solid #e9e5d823;outline-offset:3px;transition:outline-color .25s ease}
#film-index .index-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;transform:scale(var(--preview-scale,1));opacity:.82;transition:opacity .25s ease}
#film-index .index-entry:is(.is-current,:hover,:focus-visible) img{opacity:1}
#film-index .index-entry:is(.is-current,:hover,:focus-visible) .index-image{outline-color:var(--cream)}
#film-index .index-entry:focus-visible{outline:0}
#film-index .index-entry:focus-visible .index-image{outline-width:2px;outline-offset:4px}
.index-caption{display:grid;grid-template-columns:21px minmax(0,1fr);align-items:baseline;gap:3px 6px}
.index-number{font:400 9px/1.3 DM,Arial,sans-serif;font-variant-numeric:tabular-nums;opacity:.4}
#film-index .index-title{font:400 11px/1.3 DM,Arial,sans-serif;letter-spacing:0;overflow-wrap:normal}
#film-index .index-entry:hover .index-title{font-style:normal}
#film-index .index-client{display:block;grid-column:2;font:400 9px/1.3 DM,Arial,sans-serif;letter-spacing:0;text-align:left;opacity:.5}
#film-index .is-current .index-number{opacity:1}
.film-strip-hint{flex:none;padding:13px 12px 17px;text-align:center;font:400 9px/1.3 DM,Arial,sans-serif;color:var(--muted)}
#film-index.is-closing .film-strip-panel{pointer-events:none}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .film-strip-panel{top:auto;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:auto;height:min(86dvh,780px);max-height:calc(100dvh - max(72px,calc(env(safe-area-inset-top) + 60px)));transform-origin:bottom center}
 #film-index .dialog-bar{min-height:52px;padding:4px 14px}
 /* A vertical contact sheet shows several complete films before scrolling. */
 #film-index .index-list{display:block;flex:1;padding:2px 18px 10px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;scroll-padding-block:10px}
 #film-index .index-entry{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;width:100%;min-height:74px;padding:10px 0;margin:0;border-bottom:1px solid #e9e5d816;scroll-snap-align:none}
 #film-index .index-entry:last-child{border-bottom:0}
 #film-index .index-image{width:96px;aspect-ratio:16/9;outline-offset:2px}
 #film-index .index-caption{grid-template-columns:19px minmax(0,1fr);gap:4px 5px;min-width:0}
 #film-index .index-title{font-size:12px;line-height:1.3}
 #film-index .index-client{font-size:10px;line-height:1.35;opacity:.6}
 #film-index .film-strip-hint{padding:9px 12px 11px}
}
@media(max-width:350px){
 #film-index .index-entry{grid-template-columns:84px minmax(0,1fr);gap:12px;min-height:68px;padding-block:9px}
 #film-index .index-image{width:84px}
 #film-index .index-caption{grid-template-columns:17px minmax(0,1fr);gap:3px 4px}
 #film-index .index-title{font-size:11px}
 #film-index .index-client{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .film-strip-panel,#film-index.is-closing .film-strip-panel{animation:none}
 .film-strip-icon i,.index-image,#film-index .index-image img{transition:none}
}