/* Arkivism video — feed tiles, clip viewer, film page. Pairs with /assets/video.js.
   Every rule is scoped to a video-only class, so image-only pages render exactly as before. */

/* ---------- feed tile: poster <img> stays underneath; the preview fades in over it ---------- */
.vtile { position:relative }
.vtile-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
               display:block; opacity:0; transition:opacity .35s ease; pointer-events:none;
               background:transparent }
.vtile.vlive .vtile-video { opacity:1 }
.card.mat .vtile-video { display:none }
.vbadge { position:absolute; top:10px; left:10px; z-index:2; display:inline-flex;
          align-items:center; gap:5px; padding:3px 8px 3px 7px; border-radius:99px;
          background:rgba(15,14,12,.52); color:#f4f2ec; font:600 10.5px/1.25 "Hanken Grotesk", sans-serif;
          letter-spacing:.02em; font-variant-numeric:tabular-nums; backdrop-filter:blur(4px);
          -webkit-backdrop-filter:blur(4px); user-select:none }
.vbadge svg { flex:none; opacity:.9 }
.card .sim ~ .vbadge { top:36px }
.vtile.vplaying .vbadge svg { opacity:.55 }
html.ark-still .vbadge { padding:6px 11px 6px 9px; font-size:11px; cursor:pointer }
html.ark-still .vtile.vplaying .vbadge { background:rgba(15,14,12,.72) }

/* ---------- media type filter (All · Images · Video) in the refine row ---------- */
.mtype { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--line, #e7e3d8);
         border-radius:99px }
.mtype[hidden], .mtype-sep[hidden] { display:none }
.mtype button { border:0; background:none; color:var(--muted, #8b877d); font:500 12.5px/1 "Hanken Grotesk", sans-serif;
                padding:6px 11px; border-radius:99px; cursor:pointer; white-space:nowrap }
.mtype button:hover { color:var(--ink, #191817) }
.mtype button.on { background:var(--pill, #fff); color:var(--ink, #191817);
                   box-shadow:0 0 0 1px var(--line, #e7e3d8) }
.mtype button:focus-visible { outline:2px solid var(--ink, #191817); outline-offset:1px }

/* ---------- clip viewer (explore detail view) ---------- */
.vplayer { width:100%; max-width:100%; display:flex; flex-direction:column; gap:12px }
.vplayer[hidden] { display:none }
.vframe { position:relative; width:100%; max-height:70vh; display:flex; justify-content:center;
          background:#0f0e0c; border-radius:10px; overflow:hidden; box-shadow:var(--img-shadow, none) }
.vframe video { display:block; width:100%; max-height:70vh; background:#0f0e0c; object-fit:contain }
.stage.mat .vframe video { filter:blur(46px) saturate(.75) }
.vtools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--muted, #8b877d) }
.vtool { height:32px; min-width:32px; display:inline-flex; align-items:center; justify-content:center;
         gap:6px; padding:0 11px; border:1px solid var(--line, #e7e3d8); border-radius:99px;
         background:none; color:var(--ink, #191817); font:500 12.5px/1 "Hanken Grotesk", sans-serif;
         cursor:pointer; white-space:nowrap }
.vtool:hover { border-color:var(--muted, #8b877d) }
.vtool:focus-visible { outline:2px solid var(--ink, #191817); outline-offset:2px }
.vtool.icon { padding:0; width:32px; font-size:15px }
.vtool[aria-pressed="true"] { background:var(--ink, #191817); color:var(--bg, #f7f5ef); border-color:var(--ink, #191817) }
.vtool.grab { font-weight:600 }
.vtc { font:500 12.5px/1 "Hanken Grotesk", sans-serif; font-variant-numeric:tabular-nums;
       color:var(--ink, #191817); min-width:92px; text-align:center; letter-spacing:.02em }
.vkeys { margin-left:auto; font-size:11.5px; color:var(--muted, #8b877d); white-space:nowrap }
.vkeys kbd { font:inherit; border:1px solid var(--line, #e7e3d8); border-radius:4px; padding:0 4px }

/* quiet metadata + AI tag chips */
.facts.vmeta { line-height:1.6 }
.tagchips.quiet .tagchip { background:none; padding:4px 11px; font-size:12px; color:var(--muted, #8b877d) }
.tagchips.quiet .tagchip:hover { color:var(--ink, #191817) }

/* filmstrip: this film's shots, current one outlined */
.filmstrip { max-width:1360px; margin:0 auto; padding:0 56px 6px }
.filmstrip[hidden] { display:none }
.fs-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px }
.fs-head .label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
                  color:var(--muted, #8b877d) }
.fs-head .fs-film { font-family:Fraunces, serif; font-size:16px; font-weight:450; color:var(--ink, #191817);
                    text-decoration:none }
.fs-head .fs-film:hover { text-decoration:underline; text-underline-offset:3px }
.fs-head .fs-count { font-size:12.5px; color:var(--muted, #8b877d) }
.fs-head .fs-more { margin-left:auto; font-size:13px; font-weight:500; color:var(--ink, #191817);
                    text-decoration:none; border-bottom:1px solid var(--line, #e7e3d8) }
.fs-head .fs-more:hover { border-color:var(--muted, #8b877d) }
.fs-row { display:flex; gap:8px; overflow-x:auto; padding:3px 3px 10px; scroll-snap-type:x proximity;
          scrollbar-width:thin; overscroll-behavior-x:contain }
.fs-shot { position:relative; flex:none; height:76px; padding:0; border:0; border-radius:7px;
           overflow:hidden; cursor:pointer; background:var(--line, #e7e3d8); scroll-snap-align:center;
           opacity:.72; transition:opacity .15s }
.fs-shot:hover, .fs-shot:focus-visible { opacity:1 }
.fs-shot img { height:100%; width:auto; display:block }
.fs-shot span { position:absolute; left:5px; bottom:4px; font:600 10px/1 "Hanken Grotesk", sans-serif;
                color:#f4f2ec; text-shadow:0 1px 3px rgba(0,0,0,.6); font-variant-numeric:tabular-nums }
.fs-shot.current { opacity:1; box-shadow:0 0 0 2px var(--bg, #f7f5ef), 0 0 0 4px var(--ink, #191817) }
.fs-shot:focus-visible { outline:2px solid var(--ink, #191817); outline-offset:2px }

@media (max-width: 860px) {
  .vframe, .vframe video { max-height:62vh }
  .vkeys { display:none }
  .filmstrip { padding:0 18px 6px }
  .fs-shot { height:60px }
  .fs-head .fs-more { margin-left:0 }
}

/* ---------- /film/<slug> hub: the shot list becomes autoplaying tiles ---------- */
.vtile-video { border:0 }                    /* the hub styles bare <video> with a border */
.film-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:22px 18px }
.film-cell { min-width:0 }
.film-tile { position:relative; display:block; border-radius:12px; overflow:hidden;
             background:var(--line, #e7e3d8) }
.film-tile img { width:100%; display:block; object-fit:cover; border:0 }
.film-cap { display:flex; gap:8px; align-items:baseline; margin-top:7px; font-size:13px;
            color:var(--muted, #8b877d); min-width:0 }
.film-tc { flex:none; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink, #191817);
           text-decoration:none }
.film-tc:hover { text-decoration:underline; text-underline-offset:3px }
.film-cap-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.film-reel { width:100%; display:block; background:#0f0e0c }
.film-reelcap { font-size:12.5px; color:var(--muted, #8b877d); margin-top:8px; font-variant-numeric:tabular-nums }
@media (max-width: 820px) {
  .film-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 10px }
  .film-tile { border-radius:10px }
}

@media (prefers-reduced-motion: reduce) {
  .vtile-video, .fs-shot { transition:none }
}