/* English pages only. The shared sheets are written for a right-to-left page; most of them
   use logical properties and mirror on their own. What is left here falls in two groups:
   physical rules that should mirror with the reading direction, and the film's panels,
   which must NOT mirror — they stand where each frame of the picture is empty, and the
   picture is the same in both languages. */

/* Mirror with the reading direction. */
.skip-link { right: auto; left: 20px; }
.site-nav a::after { transform-origin: left; }
.field label small { margin-right: 0; margin-left: 7px; }
.footer-brand img { object-position: left center; }
.prose th, .prose td { text-align: left; }
.floating-contact { left: auto; right: 25px; }
.icon-flip { transform: scaleX(-1); }
.cinema .contact-details a[dir="ltr"] { justify-content: flex-start; }
.film-progress span { transform-origin: left; }
/* Paused, the film is an ordinary page with its reading column on the start side, so the
   wash that keeps it legible follows the column. */
:root {
  --film-veil:
    linear-gradient(to right, #f4f2edfa 0%, #f4f2edf5 27%, #f4f2edc4 41%, #f4f2ed54 58%, #f4f2ed00 77%),
    radial-gradient(58% 42% at 95% 100%, #f4f2edf7 0%, #f4f2edd6 32%, #f4f2ed80 54%, #f4f2ed26 72%, #f4f2ed00 86%),
    linear-gradient(to bottom, #f4f2eda8 0%, #f4f2ed00 17%, #f4f2ed00 72%, #f4f2edc4 100%);
}

/* Keep the running film's panels on the same physical side as the Arabic page. */
.cinema:not(.motion-off) > .scene[data-side="left"] { align-items: flex-start; }
.cinema:not(.motion-off) > .scene[data-side="right"] { align-items: flex-end; }
.cinema:not(.motion-off) .film-hud { inset-inline: auto var(--gutter); }
.cinema:not(.motion-off)[data-film-side="right"] .film-hud { inset-inline: var(--gutter) auto; }
@media (max-width: 767px) {
  .cinema:not(.motion-off)[data-film-side] .film-hud,
  .cinema:not(.motion-off) .film-hud { inset-inline: 0; }
}

/* Latin headings set in the Arabic face's metrics read tall and loose. */
/* English runs about a third wider than the Arabic it replaces, and the panel keeps the
   Arabic width so it can stay over the empty part of the frame. */
.opening h1, .cinema:not(.motion-off) > .scene h1 { font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -.8px; line-height: 1.15; }
.opening-actions .button { gap: 12px; padding-inline: 14px; }
.opening-actions { flex-wrap: wrap; }
.prose { line-height: 1.75; }

/* The language switch. */
.lang-switch { font-size: 14px; white-space: nowrap; }