/* Keep slow media from covering the artwork or blocking navigation. */
.video-loading-ui.is-progressive {
  inset: auto 16px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  background: rgba(12, 14, 17, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  pointer-events: none;
}
.video-loading-ui.is-progressive .video-loading-meter { width: auto; }
.video-loading-ui.is-progressive[hidden] { display: none; }
.video-loading-ui.is-progressive .video-loading-meta { margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: .025em; }
.video-loading-ui.is-progressive .video-loading-meta output,
.video-loading-ui.is-progressive .video-loading-track { display: none; }
.video-loading-ui.is-progressive .video-loading-retry { pointer-events: auto; min-height: 44px; }
.film-player { position: relative; min-width: 0; }
.film-player__picture { position: relative; background: #050505; }
.film-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.film-player__play {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: 50px;
  padding: 0 26px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(10, 10, 10, .7); color: #fff; cursor: pointer; font: inherit;
}
.film-player__play:hover, .film-player__play:focus-visible { background: #fff; color: #111; }
.film-player__play[hidden] { display: none; }
.film-player__status { display: block; min-height: 1.5em; font-size: 12px; color: var(--muted, #aaa); margin-top: 8px; }
.film-player__caption { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 12px 0; font-size: 13px; }
.film-player__caption a { color: inherit; text-underline-offset: 5px; }
.image-study > .film-player { margin-bottom: clamp(24px, 4vw, 64px); }
.project-feature > .film-player { align-self: center; }
.project-feature--reverse > .film-player { order: 2; }
.viewing-link-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; max-width: 100%; }
.viewing-link-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; max-width: 100%; }
.viewing-link-copy { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line, #444); background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.viewing-link-copy:hover, .viewing-link-copy:focus-visible { border-color: currentColor; }
.viewing-link-status { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--muted, #aaa); }
.viewing-link-url { box-sizing: border-box; width: min(100%, 380px); min-width: 0; padding: 10px; border: 1px solid #666; background: #111; color: #fff; font-size: 12px; }
.viewing-link-tools[hidden], .viewing-link-status[hidden], .viewing-link-url[hidden] { display: none; }
.xj-viewing__lounge .xj-viewing__platforms .xj-viewing__options { align-items: start; }
.xj-viewing__options > .viewing-link-group { flex-direction: column; align-items: stretch; gap: 6px; }
.xj-viewing__options > .viewing-link-group > .xj-viewing__choice { width: 100%; }
.tvc-services > .viewing-link-group { margin-top: 20px; }
.tvc-services > .viewing-link-group > a { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; text-decoration: none; }
@media (max-width: 900px) { .project-feature--reverse > .film-player { order: 0; } }
@media (orientation: portrait) and (max-width: 900px) {
  .deck-card--detail .video-loading-ui.is-progressive { bottom: auto; top: 10%; }
}