/* Large, continuous work images with a compact text-only category bar. */
.page-index { --archive-inset:clamp(12px,1.35vw,26px); }
.page-index .site-header.flow-header { position:relative; inset:auto; margin:20px 0 22px var(--archive-inset); width:206px; height:124px; transform:none; }
.page-index .index-intro { position:absolute; width:1px; height:1px; margin:-1px; padding:0; clip:rect(0,0,0,0); overflow:hidden; }
.page-index .page-content { padding:0; height:auto; min-height:60svh; }
.page-index .index-collection { display:block; margin:0; padding:0 var(--archive-inset) 56px; }
.page-index .archive-controls { position:sticky; top:0; z-index:24; display:flex; align-items:center; flex-wrap:nowrap; gap:24px; min-height:64px; height:auto; margin:0 calc(-1 * var(--archive-inset)) 14px; padding:6px var(--archive-inset); background:#000; border:0; }
.page-index .archive-filters { display:flex; flex:1 1 auto; flex-wrap:nowrap; align-items:center; gap:clamp(18px,2.8vw,42px); min-width:0; margin:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; scroll-padding-inline:4px; }
.archive-filters::-webkit-scrollbar { display:none; }
.page-index .archive-filters button { flex:none; min-height:44px; padding:8px 0; color:#777; font:400 clamp(12px,1vw,15px)/1.4 var(--display); letter-spacing:0; white-space:nowrap; transition:color .25s; }
.page-index .archive-filters button::after { display:none; }
.page-index .archive-filters button.active,.page-index .archive-filters button:hover,.page-index .archive-filters button:focus-visible { color:#f2f2f2; }
.page-index .archive-filters button:focus-visible { outline-offset:-1px; }
.page-index .archive-search { flex:none; width:auto; height:44px; margin-left:auto; }
.page-index .archive-search>summary { display:flex; align-items:center; justify-content:flex-end; min-height:44px; min-width:62px; padding:8px 0 8px 12px; list-style:none; cursor:pointer; color:#888; font:400 12px/1.4 var(--display); letter-spacing:0; }
.archive-search>summary::-webkit-details-marker { display:none; }
.page-index .archive-search[open]>summary,.page-index .archive-search.has-query>summary { color:#eee; }
.archive-search-panel { position:absolute; top:100%; right:var(--archive-inset); width:min(420px,calc(100% - var(--archive-inset)*2)); display:flex; align-items:center; gap:12px; padding:8px 12px; background:#111; box-shadow:0 12px 24px #0008; }
.page-index #films .archive-search-panel .film-search { flex:1; min-width:0; margin:0; }
.page-index #films .archive-search-panel input { width:100%; min-height:44px; padding:8px 0; border:0; font:400 16px/1.4 var(--display); letter-spacing:0; }
.archive-search-panel [data-clear-search] { flex:none; min-height:44px; min-width:46px; padding:8px 0; color:#aaa; font:400 10px/1.4 var(--display); }
.page-index .archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,3.2vw,56px) clamp(14px,1.5vw,28px); align-items:start; width:100%; margin:0; padding:0; }
.page-index .archive-tile { position:relative; display:block; grid-column:auto; min-width:0; margin:0; padding:0; opacity:1; transform:none; }
.page-index .archive-film { display:block; width:100%; }
.page-index .archive-tile .film-image { position:relative; width:100%; height:auto; aspect-ratio:16/9; margin:0; overflow:hidden; border:0; box-shadow:none; background:#000; }
.page-index .archive-tile .film-image img,.page-index .archive-tile .film-image video { position:absolute; inset:0; width:100%; height:100%; margin:0; object-fit:contain; transform:none; }
.page-index .archive-tile .film-image video { opacity:0; background:#000; transition:opacity .65s; }
.page-index .archive-tile .film-image video.ready { opacity:1; }
.page-index .archive-caption { display:flex; align-items:baseline; justify-content:space-between; gap:10px 22px; padding:12px 0 0; }
.page-index .archive-caption h2 { margin:0; font:400 clamp(16px,1.35vw,22px)/1.35 var(--display); letter-spacing:-.015em; overflow-wrap:anywhere; text-wrap:pretty; }
.page-index .archive-caption p { flex:0 1 auto; min-width:0; margin:0; color:#888; font:400 12px/1.4 var(--display); text-align:right; text-transform:none; overflow-wrap:anywhere; }
.page-index .archive-film:hover .archive-caption h2 { color:#fff; }
.page-index .archive-tile [data-cover-reveal] { opacity:1; }
.page-index .collection-empty:not([hidden]) { margin:0; padding:64px 0 100px; text-align:left; color:#aaa; font:400 20px/1.5 var(--display); }
.page-index .site-footer { margin-top:16px; }
@media(min-width:1700px) { .page-index .archive-caption p { font-size:14px; } }
@media(max-width:1000px) {
 .page-index .archive-caption { display:block; }
 .page-index .archive-caption p { margin-top:5px; text-align:left; }
}
@media(max-width:760px) {
 .page-index { --archive-inset:12px; }
 .page-index .site-header.flow-header { width:168px; height:100px; margin:12px auto 18px; }
 .page-index .archive-controls { gap:18px; min-height:56px; margin-bottom:12px; padding-block:4px; }
 .page-index .archive-filters { gap:22px; }
 .page-index .archive-filters button { font-size:12px; }
 .page-index .archive-search>summary { min-width:55px; padding-left:4px; font-size:11px; }
 .page-index .archive-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
 .page-index .archive-tile .film-image { aspect-ratio:var(--frame-ratio); }
 .page-index .archive-caption { display:flex; gap:10px 16px; padding-top:10px; }
 .page-index .archive-caption h2 { font-size:17px; line-height:1.35; }
 .page-index .archive-caption p { flex-basis:34%; margin:0; font-size:11px; line-height:1.45; text-align:right; }
 .page-index .index-collection { padding-bottom:32px; }
}
@media(max-width:380px) {
 .page-index .site-header.flow-header { width:156px; }
 .page-index .archive-controls { gap:12px; }
 .page-index .archive-filters { gap:18px; }
 .page-index .archive-caption { display:block; }
 .page-index .archive-caption p { margin-top:4px; text-align:left; }
}
@media(prefers-reduced-motion:reduce) { .page-index .archive-tile .film-image video,.page-index .archive-filters button { transition:none; } }
.page-index .archive-motion-toggle { display:block; min-height:44px; margin:0 0 8px; padding:8px 0; text-align:left; font:400 11px/1.4 var(--display); color:#aaa; }
.page-index .archive-motion-toggle .motion-icon { display:none; }

.archive-search-panel input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; display:none; }