/* Film modal: the browser's native <dialog>; the page does not scroll behind it. */
html.film-open { overflow: hidden; }

.film {
  width: min(1100px, calc(100vw - 32px));
  padding: 0; margin: auto;
  background: #000; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  overflow: hidden;
}
.film::backdrop { background: rgba(0, 0, 0, 0.86); }
.film[open] { display: block; }

.film__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

.film__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(9, 9, 10, 0.85); border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--text); font-size: 1.5rem; line-height: 1;
}
.film__close:hover { border-color: rgba(255, 255, 255, 0.4); }