/* The film version of the home page. styles.css is the scroll page's, untouched; the hero is the same one, in the same place,
   so the only thing a third party is comparing is the film against the scroll story. */
[hidden] { display: none !important; }
#top { position: absolute; }
.js #stage { position: relative; }

#film { padding-block: clamp(32px, 6vw, 88px); scroll-margin-top: 12px; }
.film-box { position: relative; width: min(1180px, 100% - clamp(32px, 7vw, 96px)); margin-inline: auto; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--r-s); background: var(--stage); box-shadow: var(--shadow-1); }
.film-box.tall { aspect-ratio: 9 / 16; width: min(100% - 32px, (100svh - 32px) * 9 / 16); }
.film-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The one thing to do here. Ink, not oxblood: oxblood is kept for Approve and the seal. */
#film-play { position: absolute; inset: 0; width: fit-content; height: fit-content; margin: auto; min-height: 58px; padding: 0 26px 0 20px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-1); }
@media (hover: hover) { #film-play:hover { opacity: .88; } }
#film-play:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }

.foot .wordmark { grid-row: span 4; }
.foot-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.foot-act .btn.fill { color: var(--on-action); }  /* styles.css colors every link in the footer ink */
.foot-mail { color: var(--ink); user-select: all; }

@media (max-width: 719px), (max-aspect-ratio: 95/100) {
  .hero-how { display: inline-flex; }
  .hero-act { gap: 2px; }
  .foot-act .btn { width: 100%; }
}