/* Shared 35mm controls. Decoration is separate from the original photographs. */
:root {
  --st-film-rail: 34px;
  --st-film-pitch: 32px;
  --st-film-hole-height: 7px;
  --st-film-mark-color: #bda375;
  --st-film-stock: #101113;
  --st-film-image-height: clamp(180px, 24vw, 330px);
}
.st-film-card, .st-film-frame { position: relative; box-sizing: border-box; background: var(--st-film-stock); color: #eee7d9; }
.st-film-card {
  display: block; margin: 2rem 0; padding: var(--st-film-rail) 16px;
  border: 1px solid #bda37530; text-decoration: none;
  box-shadow: 0 12px 30px #0002; overflow: hidden;
}
.st-film-card::before, .st-film-card::after, .st-film-track::before, .st-film-track::after {
  content: ''; position: absolute; left: 0; right: 0; height: var(--st-film-hole-height);
  pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8'%3E%3Crect x='8' y='0' width='16' height='7' rx='1.3' fill='%23b8ad94' fill-opacity='.6'/%3E%3C/svg%3E") left center / var(--st-film-pitch) var(--st-film-hole-height) repeat-x;
}
.st-film-card::before, .st-film-track::before { top: 5px; }
.st-film-card::after, .st-film-track::after { bottom: 5px; }
.st-film-mark {
  display: block; color: var(--st-film-mark-color); font: 9px/1.4 monospace;
  letter-spacing: .13em; pointer-events: none;
}
.st-film-card > .st-film-mark { margin: -16px 0 12px; }
.st-film-card h3 { font: 400 clamp(1.5rem,3vw,2.4rem)/1.2 var(--wp--preset--font-family--display,serif); margin: 1.2rem 0 .6rem; }
.st-film-card p { margin: .5rem 0; }
.st-film-card .st-collection__link { margin-top: .6rem; }
.st-film-picture { position: relative; background: #090a0d; }
.st-film-picture img { display: block; width: 100%; height: clamp(220px,40vw,500px); object-fit: contain; }
.st-film-picture::after, .st-film-frame::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  opacity: 0; transform: translateY(3px); transition: opacity 200ms ease, transform 200ms ease;
  background:
    linear-gradient(#cfac68,#cfac68) left top / 18px 1px no-repeat,
    linear-gradient(#cfac68,#cfac68) left top / 1px 18px no-repeat,
    linear-gradient(#cfac68,#cfac68) right top / 18px 1px no-repeat,
    linear-gradient(#cfac68,#cfac68) right top / 1px 18px no-repeat,
    linear-gradient(#cfac68,#cfac68) left bottom / 18px 1px no-repeat,
    linear-gradient(#cfac68,#cfac68) left bottom / 1px 18px no-repeat,
    linear-gradient(#cfac68,#cfac68) right bottom / 18px 1px no-repeat,
    linear-gradient(#cfac68,#cfac68) right bottom / 1px 18px no-repeat;
}
.st-film-card img, .st-film-frame img { transition: filter 200ms ease; }
.st-film-card:is(:hover,:focus-visible), .st-film-frame:is(:hover,:focus-visible) { box-shadow: inset 0 0 22px #cfac6820; }
.st-film-card:is(:hover,:focus-visible) img, .st-film-frame:is(:hover,:focus-visible) img { filter: brightness(1.08); }
.st-film-card:is(:hover,:focus-visible) .st-film-picture::after, .st-film-frame:is(:hover,:focus-visible)::after { opacity: .8; transform: none; }
.st-film-card:focus-visible, .st-filmstrip :focus-visible { outline: 2px solid #cfac68; outline-offset: -3px; }
.st-filmstrip { min-width: 0; width: 100%; }
.st-filmstrip h2 { font: 400 clamp(2rem,4vw,3.5rem)/1.2 var(--wp--preset--font-family--display,serif); }
.st-film-help { color: #c3bbb0; font-size: .85rem; max-width: 65ch; }
.st-film-pause { color: #e3c995; border: 1px solid #bda37566; background: #101113; padding: 8px 16px; margin: 0 0 16px; cursor: pointer; }
.st-film-viewport { overflow-x: auto; overflow-y: hidden; width: 100%; scrollbar-width: thin; scrollbar-color: #8d744c #101113; }
.st-film-track { position: relative; display: flex; width: max-content; background: var(--st-film-stock); }
.st-film-group { display: flex; flex: none; box-sizing: content-box; }
.st-film-frame { display: block; flex: none; text-decoration: none; padding: var(--st-film-rail) 8px; }
.st-film-frame img { display: block; height: var(--st-film-image-height); width: auto; aspect-ratio: var(--st-photo-ratio,1.5); object-fit: contain; max-width: none; }
.st-film-frame > .st-film-mark { position: absolute; top: 17px; left: 10px; white-space: nowrap; }
.st-film-frame > .st-film-mark--bottom { top: auto; bottom: 14px; }
.st-film-frame::after { top: calc(var(--st-film-rail) + 7px); bottom: calc(var(--st-film-rail) + 7px); left: 15px; right: 15px; }
.st-film-caption { position: absolute; bottom: calc(var(--st-film-rail) + 12px); left: 16px; right: 16px; padding: 7px; font-size: .8rem; background: #090a0de6; color: #f4dfb6; opacity: 0; transition: opacity 200ms ease; }
.st-film-frame:is(:hover,:focus-visible) .st-film-caption { opacity: 1; }
@media (max-width:1000px) { :root { --st-film-rail: 30px; --st-film-pitch: 24px; --st-film-hole-height: 6px; } .st-film-frame > .st-film-mark { font-size:8px; top:15px; } .st-film-frame > .st-film-mark--bottom { top:auto; bottom:12px; } }
@media (max-width:600px) {
  :root { --st-film-rail: 24px; --st-film-pitch: 20px; --st-film-hole-height: 5px; --st-film-image-height: 210px; }
  .st-film-frame > .st-film-mark { font-size:7px; top:12px; letter-spacing:.03em; }
  .st-film-frame > .st-film-mark--bottom { top:auto; bottom:10px; }
  .st-film-card { padding-inline:10px; } .st-film-card > .st-film-mark { margin:-8px 0 10px; font-size:8px; }
  .st-film-picture img { height:260px; }
}
@media (prefers-reduced-motion:reduce) { .st-film-card *, .st-film-frame *, .st-film-picture::after, .st-film-frame::after { transition:none; transform:none; } }

/* Homepage-only reversible analog treatment; original assets remain untouched. */
body.home .st-filmstrip {
  --st-film-vintage-grayscale:1;
  --st-film-vintage-sepia:.08;
  --st-film-vintage-contrast:1.10;
  --st-film-vintage-brightness:.93;
  --st-film-vintage-blur:0px;
  --st-film-grain-opacity:.12;
  --st-film-develop-duration:350ms;
}
body.home .st-film-image { display:block; position:relative; isolation:isolate; }
body.home .st-film-image::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:var(--st-film-grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light; transition:opacity var(--st-film-develop-duration) ease;
}
body.home .st-filmstrip .st-film-frame img {
  filter:grayscale(var(--st-film-vintage-grayscale)) sepia(var(--st-film-vintage-sepia)) contrast(var(--st-film-vintage-contrast)) brightness(var(--st-film-vintage-brightness)) blur(var(--st-film-vintage-blur));
  transition:filter var(--st-film-develop-duration) ease;
}
body.home .st-filmstrip .st-film-frame:is(:focus-visible,:focus-within,.is-original) img { filter:none; }
body.home .st-filmstrip .st-film-frame:is(:focus-visible,:focus-within,.is-original) .st-film-image::after { opacity:0; }
body.home .st-film-caption,body.home .st-film-mark { z-index:3; }
@media(hover:hover) and (pointer:fine) {
  body.home .st-filmstrip .st-film-frame:hover img { filter:none; }
  body.home .st-filmstrip .st-film-frame:hover .st-film-image::after { opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  body.home .st-filmstrip .st-film-frame img,body.home .st-film-image::after { transition:none; }
}

/* Reel frames open only their original full-color photograph. */
button.st-film-frame { appearance:none; border:0; border-radius:0; margin:0; text-align:left; font:inherit; cursor:pointer; }
.st-reel-viewer { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; padding:12px; box-sizing:border-box; border:0; background:#050609; color:#eee7d9; overflow:hidden; }
.st-reel-viewer:not([open]) { display:none; }
.st-reel-viewer[open] { display:grid; place-items:center; }
.st-reel-viewer::backdrop { background:#050609; }
.st-reel-viewer > img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; filter:none; min-width:0; min-height:0; }
.st-reel-viewer__close { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #c6a16a66; border-radius:50%; background:#090b10d9; color:#e5cc99; font:28px/1 sans-serif; cursor:pointer; }
.st-reel-viewer__close:focus-visible { outline:2px solid #e5cc99; outline-offset:3px; }
.st-reel-viewer__status { position:absolute; bottom:16px; left:16px; right:16px; margin:0; text-align:center; font-size:14px; pointer-events:none; }