/* The picked cinema's chain and venue in the top bar (venue-logos.js), in bone, each logo its own
   shape as a mask: the chain's mark, a hairline, then the venue's logo, sized optically (--k), its
   width capped by its ratio (--r) */
.vl-logo {
  display: block; flex: none;
  aspect-ratio: var(--r);
  background: #e6e0d2; /* (bone: as the Gala's partner logos) */
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.vl-pair { display: flex; align-items: center; gap: 10px; pointer-events: none; opacity: .8; transition: opacity .2s; }
.vl-chain { height: 12px; opacity: .9; }
.vl-rule { flex: none; width: 1px; height: 20px; background: rgb(230 224 210 / .3); }
.vl-venue { --vl-h: 32px; --vl-max: 124px; height: min(calc(var(--vl-h) * var(--k)), calc(var(--vl-max) / var(--r))); }

/* a phone's: in its top bar's middle, between the site's logo and the search; the site's logo just
   its D mark while it's there (as with the filters' pill); gone with the site's logo, and under a pill
   (on its side too, where the pill is in the top bar) */
.vl-bar { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
html.page-scroll:is(.film-page, :has(.find[open])) .vl-bar,
html.page-scroll:has(.page-find.on:not(.day-only)) .vl-bar { opacity: 0; }
html.thumb.page-scroll:has(.vl-bar) .site-logo { clip-path: inset(0 calc(100% - 24px) 0 0); }

/* wider (no top bar): in the search bar, at its right, before its × */
.vl-where { position: absolute; right: 62px; top: 50%; translate: 0 -50%; }
.vl-where .vl-chain { height: 11px; }
html:has(.find[open]) .vl-where { opacity: 0; }
.vl-where.crowded { visibility: hidden; } /* (the bar's words reaching it: venue-logos.js's crowd) */