/* ============================================================================
   DALC — film viewer (work-videography.html, "Selected work")
   A camera-monitor frame: blinking REC line and corner brackets, a film-strip
   gate with sprocket holes showing a muted looping clip of the current film,
   a slate line above it, and a scrub timeline below with one segment per film.
   Clicking the gate goes to that film's YouTube channel.

   Default styles are the STATIC fallback (no JS / reduced motion): the film
   cards that were here before. film-stage.js adds .is-live for the viewer.
   ========================================================================== */
.fs{--fs-bg:#0b0d0c;--fs-ink:#e8e4dc;--fs-dim:rgba(232,228,220,.5);--fs-rec:#F26B4D;--fs-go:#1FA396;
    --fs-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
    position:relative;background:var(--fs-bg);color:var(--fs-ink);margin:0 0 40px;
    font-family:var(--fs-mono);letter-spacing:.04em}
.fs-frame{display:none}
.fs.is-live .fs-frame{display:flex}
.fs.is-live .fs-src{display:none}

/* ── frame + HUD ─────────────────────────────────────────────────────────── */
.fs-frame{position:relative;height:clamp(420px,72vh,760px);padding:26px 34px 0;
    display:flex;flex-direction:column}
.fs-corner{position:absolute;width:26px;height:26px;border:2px solid rgba(232,228,220,.6);pointer-events:none}
.fs-corner.tl{top:14px;left:16px;border-right:0;border-bottom:0}
.fs-corner.tr{top:14px;right:16px;border-left:0;border-bottom:0}
.fs-corner.bl{bottom:14px;left:16px;border-right:0;border-top:0}
.fs-corner.br{bottom:14px;right:16px;border-left:0;border-top:0}
.fs-tick{position:absolute;left:50%;width:1px;height:10px;background:rgba(232,228,220,.45)}
.fs-tick.t{top:14px}
.fs-tick.b{bottom:14px}

.fs-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;
    font-size:11.5px;text-transform:uppercase}
.fs-rec{display:flex;align-items:center;gap:9px;font-weight:700}
.fs-rec span{font-weight:400;color:var(--fs-dim)}
.fs-dot{width:9px;height:9px;border-radius:50%;background:var(--fs-rec);flex:none;
    animation:fsBlink 1.6s steps(1,end) infinite}
@keyframes fsBlink{0%,55%{opacity:1}56%,100%{opacity:.15}}
.fs-meta{color:var(--fs-dim)}
.fs-meta b{color:var(--fs-go);font-weight:700}

/* ── slate line ──────────────────────────────────────────────────────────── */
.fs-slate{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding-top:18px;
    font-size:11.5px;text-transform:uppercase}
.fs-clap{width:74px;height:11px;flex:none;
    background:repeating-linear-gradient(115deg,var(--fs-ink) 0 10px,transparent 10px 20px)}
.fs-sc{color:var(--fs-go);font-weight:700}
.fs-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-take{margin-left:auto;color:var(--fs-dim);white-space:nowrap}

/* ── film-strip gate ─────────────────────────────────────────────────────── */
.fs-strip{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    background:#000;border-radius:2px}
.fs-perf{height:16px;
    background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(232,228,220,.82) 12px 24px);
    -webkit-mask:linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0);opacity:.85}
.fs-perf i{display:block;height:100%;
    background:repeating-linear-gradient(90deg,#0b0d0c 0 12px,transparent 12px 24px)}
/* the gate takes whatever height is left; the picture fills it and is cropped
   to that shape, the way a wide frame is matted on a monitor */
.fs-gate{position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden;background:#000}
.fs-gate iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;
    pointer-events:none}
.fs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.fs.is-playing .fs-poster{opacity:0}
/* the whole gate is one link to the channel — clicks never reach the player */
.fs-hit{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;
    gap:16px;padding:18px 20px;text-decoration:none;color:var(--fs-ink);
    background:linear-gradient(to top,rgba(4,6,6,.82) 0%,rgba(4,6,6,.15) 42%,transparent 70%)}
.fs-hit strong{display:block;font-family:var(--font-body);font-weight:600;letter-spacing:0;
    font-size:clamp(17px,2vw,26px);line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.fs-hit em{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--fs-dim);
    text-transform:uppercase}
.fs-go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
    font-size:11px;font-weight:700;text-transform:uppercase;white-space:nowrap;
    border:1.5px solid rgba(232,228,220,.55);transition:background .25s,border-color .25s}
.fs-hit:hover .fs-go{background:rgba(232,228,220,.16);border-color:var(--fs-ink)}
.fs-hit:focus-visible{outline:2px solid var(--fs-go);outline-offset:-4px}
.fs-nav{position:absolute;z-index:5;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;font:400 26px/1 var(--font-body);color:var(--fs-ink);
    background:rgba(9,12,11,.5);border:1.5px solid rgba(232,228,220,.45);
    opacity:0;transition:opacity .3s,background .25s}
.fs-nav.prev{left:16px}
.fs-nav.next{right:16px}
.fs-frame:hover .fs-nav,.fs-nav:focus-visible{opacity:1}
.fs-nav:hover{background:rgba(9,12,11,.8)}
@media (hover:none){ .fs-nav{opacity:1} }
.fs-mute{position:absolute;z-index:4;top:14px;right:16px;padding:5px 9px;font-size:10px;
    text-transform:uppercase;color:var(--fs-dim);background:rgba(4,6,6,.55)}

/* ── timeline ────────────────────────────────────────────────────────────── */
.fs-bar{display:flex;align-items:center;gap:16px;flex:none;padding:14px 0 18px;font-size:11px}
.fs-tc{flex:none;color:var(--fs-ink);font-variant-numeric:tabular-nums}
.fs-pos{flex:none;color:var(--fs-dim);text-transform:uppercase;text-align:right;line-height:1.35}
.fs-pos b{display:block;color:var(--fs-ink);font-weight:700}
.fs-pos i{display:block;font-style:normal;font-size:10px}
.fs-line{position:relative;flex:1;height:30px;display:flex;gap:3px;cursor:ew-resize;touch-action:pan-y}
.fs-line:focus-visible{outline:2px solid var(--fs-go);outline-offset:3px}
.fs-seg{position:relative;flex:1;min-width:0;overflow:hidden;cursor:ew-resize;
    background-color:rgba(232,228,220,.09);background-size:cover;background-position:50% 35%}
/* the thumbnail is a hint, not a picture — keep it dark under the labels */
.fs-seg::before{content:"";position:absolute;inset:0;background:rgba(9,12,11,.78);transition:background .3s}
.fs-seg.on::before{background:rgba(9,12,11,.52)}
.fs-seg:hover::before{background:rgba(9,12,11,.42)}
.fs-seg span{position:absolute;left:8px;top:7px;z-index:2;font-size:10px;font-weight:700;color:var(--fs-dim)}
.fs-seg b{position:absolute;left:8px;right:8px;bottom:6px;z-index:2;font-size:10px;font-weight:400;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fs-dim);text-transform:uppercase}
.fs-seg.on span,.fs-seg.on b{color:var(--fs-ink)}
.fs-seg i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(31,163,150,.5);
    border-right:1px solid var(--fs-go)}
.fs-head{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--fs-rec);
    pointer-events:none}
.fs-head::before{content:"";position:absolute;top:-5px;left:-5px;border:6px solid transparent;
    border-top:7px solid var(--fs-rec);border-bottom:0}

@media (max-width:900px){
  .fs-frame{height:clamp(360px,62svh,560px);padding:16px 16px 0}
    .fs-hud,.fs-slate{font-size:10px}
  .fs-clap{width:44px}
  .fs-take{display:none}
  .fs-pos i{display:none}
  .fs-seg b{display:none}
  .fs-nav{width:36px;height:36px;margin-top:-18px;font-size:20px}
  .fs-hit{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .fs-hit strong{font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
       overflow:hidden}
  .fs-rec span{display:none}        /* just the REC light on a phone */
  .fs-slate .fs-name{font-size:10px}
  .fs-corner{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){ .fs-dot{animation:none} }

/* ── crawlable source / no-JS fallback: the film cards ───────────────────── */
.fs-src{max-width:1240px;margin:0 auto;padding:44px 48px 40px;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
@media (max-width:900px){ .fs-src{padding:26px 22px 24px;grid-template-columns:1fr} }