/* Photography uses the same compact strip composition as the film index. */
#project-index{position:fixed;inset:0;width:100%;height:100dvh;background:transparent;overflow:hidden;padding:0;color:var(--cream)}
#project-index::backdrop{background:rgba(0,0,0,.18)}
.project-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}
.project-strip-panel:before,.project-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}
.project-strip-panel:after{transform:scaleX(-1)}
.pindex-bar{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:8px 17px;flex:none;gap:10px}
.pindex-heading{margin:0;font:400 10px/1.2 DM,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pindex-total{margin-left:8px;opacity:.45;font-variant-numeric:tabular-nums}
.pindex-close{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;font:300 28px/1 DM,Arial,sans-serif;letter-spacing:0;touch-action:manipulation}
.pindex-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}
.pindex-entry{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;min-height:44px;padding:0;gap:9px;border:0;margin:0 0 21px;text-align:left;color:inherit;text-decoration:none;touch-action:manipulation}
.pindex-entry:last-child{margin-bottom:0}
.pindex-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}
.pindex-image img{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;border-radius:0;opacity:.82;transition:opacity .25s ease}
.pindex-entry:is(.pindex-current,:hover,:focus-visible) img{opacity:1}
.pindex-entry:is(.pindex-current,:hover,:focus-visible) .pindex-image{outline-color:var(--cream)}
.pindex-entry:focus-visible{outline:0}
.pindex-entry:focus-visible .pindex-image{outline-width:2px;outline-offset:4px}
.pindex-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pindex-caption{display:grid;grid-template-columns:21px minmax(0,1fr);align-items:baseline;gap:3px 6px}
.pindex-number{font:400 9px/1.3 DM,Arial,sans-serif;font-variant-numeric:tabular-nums;opacity:.4}
.pindex-title{font:400 11px/1.3 DM,Arial,sans-serif;letter-spacing:0;overflow-wrap:normal}
.pindex-category{display:block;grid-column:2;font:400 9px/1.3 DM,Arial,sans-serif;letter-spacing:0;text-align:left;opacity:.5}
.pindex-current .pindex-number{opacity:1}
.pindex-hint{flex:none;margin:0;padding:13px 12px 17px;text-align:center;font:400 9px/1.3 DM,Arial,sans-serif;color:var(--muted)}
#project-index.pindex-closing .project-strip-panel{pointer-events:none}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .project-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}
 .pindex-bar{min-height:52px;padding:4px 14px}
 .pindex-list{display:block;flex:1;padding:2px 18px 10px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;scroll-padding:10px;touch-action:pan-y;-webkit-overflow-scrolling:touch}
 .pindex-entry{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px;width:100%;min-width:0;min-height:104px;padding:8px 0;margin:0;border-bottom:1px solid #e9e5d816;scroll-snap-align:none}
 .pindex-entry:last-child{border-bottom:0}
 /* Each complete photograph sits inside a compact cell, without a crop. */
 .pindex-entry .pindex-image{width:88px;aspect-ratio:1;background:transparent;outline:0}
 .pindex-image img{width:100%;height:100%;object-fit:contain;object-position:center!important}
 .pindex-entry:focus-visible{outline:1px solid var(--cream);outline-offset:4px}
 .pindex-entry:focus-visible .pindex-image{outline:0}
 .pindex-caption{grid-template-columns:19px minmax(0,1fr);gap:4px 5px;min-width:0}
 .pindex-title{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
 .pindex-category{font-size:10px;line-height:1.35;opacity:.6}
 .pindex-hint{padding:9px 12px 11px}
}
@media(max-width:350px){
 .pindex-entry{grid-template-columns:72px minmax(0,1fr);gap:12px;min-height:88px}
 .pindex-entry .pindex-image{width:72px}
 .pindex-caption{grid-template-columns:17px minmax(0,1fr);gap:3px 4px}
 .pindex-title{font-size:11px}
 .pindex-category{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .project-strip-panel{will-change:auto}
 .pindex-image,.pindex-image img{transition:none}
}