/* EL STUDIO — dailies
   Every post as frames on 35mm print strips, backlit in a projector gate. Uniform sec-head, red accent (base default). */
.dailies { position: relative; background: var(--ink); overflow-x: clip; padding-top: var(--sec-pad); }
.dailies__head { padding: 0 var(--gutter); }

/* ---------- the pinned gate ---------- */
.dailies__run { position: relative; }
.dailies__stage {
  --hud: 48px;                                     /* counter strip under the aperture; grows with the site */
  position: sticky; top: var(--osd-h); height: calc(100svh - var(--osd-h)); overflow: hidden;
  background: #090605; isolation: isolate;
}
.dailies__lamp { /* the projector lamp behind the film: the only light here */
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 75% at 50% 48%, rgba(255, 214, 160, .16), rgba(255, 170, 100, .05) 55%, transparent 80%);
}
.dailies__strips { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; gap: var(--gap); }

.dl-strip {
  position: relative; flex: none; width: var(--w); will-change: transform; transform-origin: 50% 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 10px 0 28px rgba(0, 0, 0, .5), -10px 0 28px rgba(0, 0, 0, .5);
}

/* ---------- a frame ---------- */
.dl-fr {
  position: relative; display: block; width: var(--w); height: var(--pitch); margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--film) 0 0 / 100% 100% no-repeat; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.dl-ph {
  position: absolute; left: var(--rail); top: calc(var(--fl) / 2); width: var(--iw); height: var(--ih);
  border-radius: 2px; overflow: hidden; background: #160d08;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.dl-ph img { width: 100%; height: 100%; object-fit: cover; }
.dl-ph img:not([src]) { visibility: hidden; }
.dl-ph::after { /* soft gate falloff at the frame corners, no tint */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .35); transition: opacity .3s;
}
.dl-play { /* reels: one tiny ▶, sized from the frame width */
  position: absolute; right: max(6px, calc(var(--w) * .024)); bottom: max(5px, calc(var(--w) * .021)); z-index: 1;
  width: max(7px, calc(var(--w) * .027)); height: max(9px, calc(var(--w) * .033));
  background: rgba(255, 255, 255, .92); clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
@media (hover: hover) {
  .dl-fr:hover { z-index: 5; }
  .dl-fr:hover .dl-ph { transform: scale(1.04); box-shadow: 0 0 0 1px rgba(243, 236, 226, .7), 0 14px 32px rgba(0, 0, 0, .7); }
  .dl-fr:hover .dl-ph::after { opacity: 0; }
}
.dl-fr:focus-visible { outline: none; z-index: 5; }
.dl-fr:focus-visible .dl-ph { outline: 2px solid var(--text); outline-offset: 3px; }

/* edge print: one small latent code line in the left rebate */
.dl-ed {
  position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--w) * .045); overflow: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 var(--fs)/1 var(--f-crt); letter-spacing: .12em; white-space: pre; color: rgba(255, 200, 140, .5);
}
.dl-ed::before { content: attr(data-ed); } /* printed on the film, not page text */

/* leader: blank film at the roll ends */
.dl-lead { position: relative; width: var(--w); background: var(--film) 0 0 / 100% var(--pitch) repeat-y; }

/* ---------- projector gate (matte + aperture) and counter ---------- */
.dailies__gate { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dailies__gate::before {
  content: ""; position: absolute; inset: 8px 8px var(--hud); border-radius: 10px;
  box-shadow:
    0 0 0 100vmax #090605,
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 0 70px 6px rgba(0, 0, 0, .5);
}
.dailies__hud {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: var(--hud); z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 400 20px/1 var(--f-crt); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.dailies__ctr { white-space: nowrap; }
.dailies__ctr b { font-weight: 400; color: var(--text); }
.dailies__date { color: var(--text); white-space: nowrap; }

/* ---------- reduced motion: cut frames laid out on the light table ---------- */
.dailies.is-static { padding-bottom: var(--sec-pad); }
.dailies.is-static .dailies__run { height: auto !important; }
.dailies.is-static .dailies__stage { position: relative; top: 0; height: auto; overflow: visible; padding: 0 var(--gutter); background: none; }
.dailies.is-static .dailies__lamp, .dailies.is-static .dailies__gate, .dailies.is-static .dailies__hud { display: none; }
.dailies.is-static .dailies__strips {
  position: relative; inset: auto; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, var(--w)); justify-content: center; gap: 16px;
}

/* ---------- smaller screens ---------- */
@media (max-width: 760px) {
  .dailies__stage { --hud: 44px; }
  .dailies__gate::before { inset: 4px 4px var(--hud); border-radius: 6px; }
  .dailies__hud { font-size: 18px; }
}
/* large screens: the counter grows with the sec-head bar */
@media (min-width: 1800px) { .dailies__stage { --hud: 56px; } .dailies__hud { font-size: 23px; } .dailies__gate::before { inset: 10px 10px var(--hud); } }
@media (min-width: 2300px) { .dailies__stage { --hud: 66px; } .dailies__hud { font-size: 27px; } .dailies__gate::before { inset: 12px 12px var(--hud); border-radius: 12px; } }