/* Refined film treatment for the contact sheet and shoot galleries. */
:root {
  --bg: #0c0c0b;
  --fg: #e7e4dc;
  --fg-dim: rgba(231,228,220,.62);
  --grain: .085;
  --film: #242320;
  --film-base: #252420;
  --rebate: 3px;
  --sprocket-h: 15px;
  --edge-h: 12px;
  --edge-ink: #b89964;
  --gate-rail: 28px;
  --gate-gap: 12px;
  --gate-inset: calc(var(--gate-rail) * 2 + 30px);
  --sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15'%3E%3Crect x='6' y='3' width='14' height='9' rx='1.25' fill='%230c0c0b'/%3E%3Cpath d='M7 12h12' stroke='%23ffffff' stroke-opacity='.08' stroke-width='.5'/%3E%3C/svg%3E");
  --edge-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='12'%3E%3Ctext x='0' y='8.8' font-family='monospace' font-size='6.8' fill='%23b89964' letter-spacing='1.6'%3EHRD 400%20%20%E2%80%A2%20%20HALF REMEMBERED DREAMS%20%20%E2%80%A2%20%20SAFETY FILM%3C/text%3E%3C/svg%3E");
}
html { background: var(--bg); }
body.home { background: radial-gradient(ellipse at 42% 0, #22211e 0, #10100e 55%, #0c0c0b 100%); }
html.hrd-table .grid {
  --strip-gap: clamp(30px, 3.7vw, 58px);
  --sheet-pad: clamp(28px, 4.3vw, 68px);
  --gutter: clamp(18px, 3.5vw, 56px);
  padding-bottom: 90px;
}
.strip { --frame-gap: 5px; background: linear-gradient(180deg, #ffffff04, transparent 28%, #0000000a), var(--film); transition: transform .65s var(--ease), box-shadow .65s ease; }
.strip:nth-child(4n + 2) { --film: #24221f; }
.strip:nth-child(4n + 3) { --film: #222322; }
.strip:nth-child(4n + 4) { --film: #252320; }
html.hrd-table .strip { box-shadow: 0 1px 1px #000c, 0 5px 9px #0006, 0 15px 24px #0003; border-top: 1px solid #ffffff0a; border-bottom: 1px solid #000b; }
html.hrd-table .strip:nth-child(3n + 1) { transform: rotate(-.18deg); }
html.hrd-table .strip:nth-child(3n + 2) { transform: rotate(.12deg) translateX(.2%); }
html.hrd-table .strip:nth-child(3n + 3) { transform: rotate(-.08deg) translateX(-.15%); }
.strip::before { opacity: .13; }
.strip-edge { opacity: .58; }
.strip:nth-child(n) .strip-leak { opacity: .045; width: 70px; }
.strip:last-child .strip-leak { opacity: .08; }
.grain, .grid-item::before { animation: none; }
.frame-no { font-family: ui-monospace, monospace; font-size: 7px; opacity: .8; bottom: var(--sprocket-h); }
.grid-item { border-radius: 1px; }
.grid-item img { filter: grayscale(1); transform: none; transition: filter .6s ease, transform .9s var(--ease); }
.grid-item:hover img, .grid-item:focus-visible img { transform: scale(1.018); filter: none; }
.grid:has(.grid-item:hover) .grid-item:not(:hover) { opacity: 1; }
.grid-item::after { inset: 40% 0 0; background: linear-gradient(transparent, #0009); }
.grid-item .item-overlay { inset: auto 0 0; align-items: flex-start; justify-content: flex-end; padding: 14px; text-align: left; gap: 5px; transform: translateY(4px); }
.grid-item .item-title { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-indent: 0; }
.grid-item .item-count { font-size: 8px; letter-spacing: .12em; text-indent: 0; color: #dfddd4bd; }
.grid-item:hover .item-overlay, .grid-item:focus-visible .item-overlay { transform: none; }
.grid-spacer { padding: clamp(18px, 2vw, 32px); }
.site-monogram { width: 80%; margin: 0 auto; opacity: .85; }
.site-wordmark { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; margin-top: 16px; font-size: clamp(8px,.75vw,11px); font-weight: 500; letter-spacing: .15em; line-height: 1.2; }
.site-byline { margin-top: 18px; font-size: 9px; letter-spacing: .035em; color: #bdb9ae; min-height: 24px; display: flex; align-items: center; }
.hrd-view, .hrd-gate-switch, .hrd-sound, .hrd-contact-open { font-size: 9px; letter-spacing: .16em; min-height: 40px; align-items: center; bottom: 14px; color: #b2afa5; }
.hrd-contact-open { display: inline-flex; }
.hrd-view .is-on, .hrd-gate-switch .is-on { color: #f2eee5; }
body.home::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 78px; background: linear-gradient(transparent, #0c0c0bed); pointer-events: none; z-index: 40; }
.shoot-spill { opacity: .15; }
.shoot-header { top: 48px; left: clamp(22px,3vw,48px); right: clamp(22px,3vw,48px); transform: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; filter: drop-shadow(0 1px 5px #000a); }
.shoot-title svg { height: clamp(20px,2.15vw,32px); max-width: 65vw; }
.shoot-title { font-size: clamp(20px,2.15vw,32px); }
.shoot-back { margin-top: 0; min-height: 36px; border-bottom: 1px solid #ffffff70; font-size: 10px; letter-spacing: .16em; font-weight: 500; }
.shoot-back .arrow { font-size: 16px; }
.shoot-back:hover .arrow { transform: translateX(-3px); }
.gate::before, .gate::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28'%3E%3Crect x='8' y='3' width='20' height='13' rx='1.5' fill='%230c0c0b'/%3E%3Cpath d='M9 16h18' stroke='%23fff' stroke-opacity='.08' stroke-width='.6'/%3E%3C/svg%3E"); }
.gate-edge { top: calc((100svh - var(--strip-h, 100svh)) / 2 + 18px); left: 25%; right: 25%; text-align: center; font-family: monospace; font-size: 7px; letter-spacing: .18em; color: #b8996480; }
.slider { transition: transform .58s cubic-bezier(.2,.72,.2,1), top .4s ease, height .4s ease; }
.slide { opacity: .46; transition: opacity .45s ease; }
.slide.is-active { opacity: 1; }
.frame-edge { margin-top: 8px; font-size: 9px; letter-spacing: .1em; font-family: ui-monospace,monospace; color: #b899648a; }
.slider-counter { bottom: 30px; right: clamp(22px,3vw,48px); }
.counter-glyphs { font-size: 23px; opacity: .8; }
.slider-progress { height: 1px; opacity: .35; }
.grid-item:focus-visible, .shoot-back:focus-visible, .hrd-view:focus-visible, .hrd-gate-switch:focus-visible, .hrd-contact-open:focus-visible { outline: 1px solid #e7e4dc; outline-offset: 3px; }
@media (max-width: 799px) {
  .cell-logo { grid-column: auto; }
  .cell-logo .grid-spacer { aspect-ratio: 4 / 5; align-items: center; gap: 0; padding: 16px 10px; }
  .cell-logo .site-title a { display: block; padding: 0; }
  .cell-logo .site-monogram { display: block; width: min(80%,110px); }
  .cell-logo .site-monogram-text { display: none; }
  .cell-logo .site-wordmark { flex-direction: column; align-items: center; margin-top: 12px; gap: 4px; width: 100%; font-size: 8px; letter-spacing: .1em; color: var(--fg); }
  .cell-logo .site-byline { font-size: 9px; padding: 0; margin: 14px 0 0; min-height: 28px; letter-spacing: .015em; }
  html.hrd-table .grid { --gutter: 14px; --sheet-pad: 24px; --strip-gap: 24px; }
  .grid-item .item-overlay { opacity: 1; transform: none; padding: 10px; }
  .grid-item::after { opacity: 1; background: linear-gradient(transparent 20%,#0008); }
  .grid-item .item-title { font-size: 11px; letter-spacing: .08em; }
  .grid-item .item-count { display: none; }
  .shoot-header { top: 26px; left: 20px; right: 20px; }
  .shoot-title svg { height: 21px; max-width: 66vw; }
  .shoot-back { font-size: 9px; min-height: 32px; }
  .counter-glyphs { font-size: 19px; }
  .slider-counter { bottom: 74px; right: 20px; }
  .hrd-sound { left: 20px; }
  .hrd-contact-open { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .slider, .slide, .grid-item img, .strip { transition: none; }
  html.hrd-table .strip { transform: none; }
}