/* The film expands the existing story, with the live glass scene around it. */
.blck-project-story .blck-film-launch,
.blck-project-story .blck-film-back,
.blck-project-story .blck-film-retry {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 0;
  color: #f5f5f4;
  background: none;
  border: 0;
  border-bottom: 1px solid #ffffff70;
  font: 12px/1.5 nbarchitekt, monospace;
  text-align: left;
  cursor: pointer;
  text-shadow: inherit;
}
.blck-project-story .blck-film-launch { margin: 0 0 3px; }
.blck-project-story .blck-film-back { margin: 0 0 12px; }
.blck-project-story .blck-film-launch:hover,
.blck-project-story .blck-film-back:hover,
.blck-project-story .blck-film-retry:hover { border-color: #fff; }
.blck-project-story .blck-project-film [hidden],
.blck-project-story .blck-project-film[hidden],
.blck-project-story .blck-film-launch[hidden] { display: none !important; }
.blck-project-story .blck-project-film :focus-visible,
.blck-project-story .blck-film-launch:focus-visible { outline: 2px solid #d1efff; outline-offset: 5px; }
body.blck-project-active [data-blck-chat].has-playing-film {
  width: calc(100% - clamp(48px, 8vw, 128px)) !important;
  max-width: 1500px;
}
.blck-project-story.has-playing-film {
  display: grid;
  grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-right: 0;
}
.blck-project-story.has-playing-film .blck-project-copy { min-width: 0; max-width: 370px; }
.blck-project-story.has-playing-film .blck-project-film { min-width: 0; align-self: center; }
.blck-project-story .blck-film-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 270px);
  object-fit: contain;
  background: #000;
  touch-action: manipulation !important;
}
.blck-project-story p.blck-film-caption {
  margin: 11px 0 0 !important;
  font: 10px/1.5 nbarchitekt, monospace !important;
  text-transform: uppercase;
  letter-spacing: .08em !important;
  color: #c3d7df;
}
.blck-project-story p.blck-film-status { margin: 7px 0 0 !important; font-size: 12px !important; }
.blck-project-story p.blck-film-status:empty { display: none; }
@media (max-width: 700px), (orientation: portrait) {
  body.blck-project-active [data-blck-chat].has-playing-film {
    left: 24px !important;
    width: calc(100% - 48px) !important;
    max-height: calc(100dvh - 180px) !important;
  }
  body.blck-project-active [data-blck-chat].has-playing-film [data-blck-messages],
  body.blck-project-active .blck-project-story.has-playing-film {
    max-height: calc(100dvh - 180px) !important;
  }
  .blck-project-story.has-playing-film { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .blck-project-story.has-playing-film .blck-project-film { order: -1; width: 100%; }
  .blck-project-story.has-playing-film .blck-project-copy { max-width: none; }
  .blck-project-story.has-playing-film .blck-film-video { max-height: 42dvh; }
  .blck-project-story.has-playing-film::before {
    inset: 20% 0 0;
    background: linear-gradient(0deg, rgba(4,8,12,.9), rgba(4,8,12,.58) 84%, transparent);
  }
}