/* Existing approved identity + timeline artwork, composed without new imagery. */
.cinema-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(700px, 58vw, 850px);
  overflow: hidden;
  background: #050505;
  color: #f7f1ea;
}
.cinema-identity {
  position: absolute;
  top: -36px;
  left: 50%;
  width: min(100%, 1080px);
  transform: translateX(-50%);
  z-index: -3;
  /* Retain the falcon, wordmark and tagline; blend into the foreground. */
  mask-image: linear-gradient(#000 0 51%, transparent 57%), linear-gradient(90deg, transparent, #000 12% 88%, transparent);
  mask-composite: intersect;
}
.cinema-identity img { display: block; width: 100%; height: auto; }
.cinema-timeline {
  position: absolute;
  inset: 57% 0 6%;
  z-index: -2;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 20%, #000 62%, transparent);
}
.cinema-timeline img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 1100px);
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cinema-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #050505a0, transparent 17%, transparent 76%, var(--color-paper));
}
.cinema-topline, .cinema-bottomline {
  position: absolute;
  inset-inline: clamp(22px, 4vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cinema-topline { top: 22px; }
.cinema-bottomline { bottom: 28px; align-items: flex-end; }
.cinema-wordmark {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .17em;
  text-decoration: none;
  white-space: nowrap;
}
.cinema-controls { display: flex; align-items: center; gap: 22px; }
.cinema-controls .btn, .cinema-controls .status-pill {
  border: 0;
  border-radius: 0;
  min-height: 44px;
  padding: 10px 0;
  background: transparent;
  box-shadow: none;
  color: #d5cec8;
  font-size: 12px;
}
.cinema-controls .btn:hover, .cinema-controls .status-pill:hover { color: #ffb16e; box-shadow: none; }
.cinema-caption { margin: 0; font: 12px/1.8 var(--font-mono); letter-spacing: .07em; color: #c6b7a8; }
.cinema-actions { display: flex; align-items: center; gap: 32px; }
.cinema-link { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 0; color: #fff0e0; font-size: 14px; text-decoration: none; }
.cinema-link-primary { color: #ffaf67; }
.cinema-link:hover { text-decoration: underline; text-underline-offset: 7px; }
.cinema-hero a:focus-visible, .cinema-hero button:focus-visible { outline: 2px solid #ffaf67; outline-offset: 5px; }
.cinema-page > .shell { max-width: none; padding: 12px clamp(22px, 4vw, 72px) var(--space-3xl); }
.cinema-page .section-nav { margin-inline: 0; padding-inline: 0; background: var(--color-paper); scroll-margin-top: 12px; }
.cinema-page .section-tab, .cinema-page .section-tab[aria-selected="true"] { border: 0; border-radius: 0; background: transparent; }
/* Preserve all editor controls, with a continuous canvas beneath the artwork. */
.cinema-page .panel { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
@media (max-width: 900px) {
  .cinema-hero { height: 700px; }
  .cinema-identity { top: 48px; }
  .cinema-timeline { inset-block: 57% 9%; }
  .cinema-controls { gap: 15px; }
  .cinema-actions { gap: 20px; }
}
@media (max-width: 600px) {
  .cinema-hero { height: 650px; }
  .cinema-identity { top: 100px; width: 116%; }
  .cinema-timeline { inset-block: 54% 16%; }
  .cinema-timeline img { width: 760px; }
  .cinema-topline { top: 14px; align-items: flex-start; }
  .cinema-wordmark { font-size: 11px; padding-top: 14px; }
  .cinema-controls { align-items: flex-end; flex-direction: column; gap: 0; }
  .cinema-controls .btn, .cinema-controls .status-pill { padding: 7px 0; font-size: 11px; }
  .cinema-bottomline { bottom: 22px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .cinema-caption { font-size: 10px; }
  .cinema-actions { justify-content: space-between; width: 100%; gap: 14px; }
  .cinema-link { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-page *, .cinema-page *::before, .cinema-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* Work pages open on the work: a slim bar instead of the full brand hero. */
.cinema-hero--compact { height: auto; min-height: 72px; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cinema-hero--compact::after { content: none; }
.cinema-hero--compact .cinema-topline { position: static; padding: var(--space-sm) clamp(22px, 4vw, 72px); }
.cinema-hero--compact .cinema-wordmark { color: var(--color-accent); padding-top: 0; }