/* Click-to-play films: same editorial rail, intentional sound. */
.vs-detail-card__open{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;padding:0;
  border:0;background:transparent;color:#fffaf3;cursor:pointer;touch-action:pan-x pan-y;
}
.vs-detail-card__open:focus-visible{outline:2px solid #fffaf3;outline-offset:-6px}
.vs-detail-card__play{
  position:absolute;right:17px;bottom:50px;display:flex;align-items:center;gap:9px;
  padding:8px 11px;border:1px solid rgba(255,255,255,.4);border-radius:30px;
  background:rgba(12,12,12,.46);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  font-size:9px;font-weight:300;letter-spacing:.10em;transition:background .25s ease,border-color .25s ease;
}
.vs-detail-card__play svg{width:13px;height:13px;fill:currentColor}
.vs-detail-card__open:hover .vs-detail-card__play{background:rgba(12,12,12,.75);border-color:rgba(255,255,255,.8)}
.vs-detail-track.is-dragging .vs-detail-card__open{cursor:grabbing}
.vs-film-instruction{margin:15px auto 0;text-align:center;font-size:10px;line-height:1.6;letter-spacing:.06em;color:#77716a}
.vs-film-instruction [data-detail-count]{margin-left:16px;font-variant-numeric:tabular-nums;color:var(--ink)}
body.vs-film-open{overflow:hidden!important;overscroll-behavior:none}
.vs-film-dialog{
  position:fixed;inset:0;box-sizing:border-box;margin:auto;padding:18px;
  width:100vw;max-width:100vw;height:100vh;max-height:100vh;
  height:100dvh;max-height:100dvh;border:0;background:transparent;color:#f3efe8;
  overflow:hidden;z-index:10000;
}
.vs-film-dialog:not([open]){display:none}
.vs-film-dialog[open]{display:flex;align-items:center;justify-content:center}
.vs-film-dialog::backdrop{background:rgba(5,5,5,.91);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vs-film-dialog__panel{
  position:relative;display:grid;grid-template-rows:48px minmax(0,1fr) 57px;
  width:min(100%,470px);height:100%;max-height:960px;min-height:0;
}
.vs-film-dialog__head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.vs-film-dialog__brand{font-size:12px;font-weight:200;letter-spacing:.23em}
.vs-film-dialog__close{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:inherit;cursor:pointer}
.vs-film-dialog__close svg{width:23px;height:23px;stroke:currentColor;stroke-width:1;fill:none}
.vs-film-dialog__screen{position:relative;min-height:0;display:grid;place-items:center;background:#050505;overflow:hidden}
.vs-film-dialog__screen video{width:100%;height:100%;max-height:100%;object-fit:contain;background:#050505;outline-offset:-3px}
.vs-film-dialog__play{
  position:absolute;inset:0;margin:auto;width:180px;height:48px;border:1px solid rgba(255,255,255,.5);
  border-radius:30px;background:rgba(8,8,8,.82);color:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer;
}
.vs-film-dialog__error{position:absolute;top:40%;left:12%;right:12%;padding:18px;background:rgba(5,5,5,.92);font-size:13px;line-height:1.6;text-align:center}
.vs-film-dialog [hidden]{display:none!important}
.vs-film-dialog__foot{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.vs-film-dialog__meta{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}
.vs-film-dialog__title{font-size:9px;letter-spacing:.10em;font-weight:300;line-height:1.4}
.vs-film-dialog__count{font-size:9px;letter-spacing:.13em;color:#9b9892;font-variant-numeric:tabular-nums}
.vs-film-dialog__nav{width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:inherit;font-size:23px;font-weight:200;cursor:pointer}
.vs-film-dialog button:focus-visible{outline:2px solid #fffaf3;outline-offset:3px}
@media(max-width:650px){
  .vs-film-dialog{padding:env(safe-area-inset-top,0px) 10px env(safe-area-inset-bottom,0px)}
  .vs-film-dialog__panel{grid-template-rows:48px minmax(0,1fr) 64px;max-height:none}
  .vs-film-dialog__brand{font-size:11px}
  .vs-detail-card__play{font-size:9px}
  .vs-film-instruction{font-size:9px;padding:0 22px}
}
@media(max-height:540px) and (orientation:landscape){
  .vs-film-dialog{padding:4px 12px}
  .vs-film-dialog__panel{grid-template-rows:36px minmax(0,1fr) 44px;width:min(100%,540px)}
  .vs-film-dialog__head .vs-film-dialog__close{width:36px;height:36px}
}