/* The film at the top of the sheet, and the three ways to read more under it.
   The film is drawn on the sheet's own paper, so it sits flush with no frame. */
.hero-film {
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.hero-film__frame { position: relative; width: min(100%, 64svh * 16 / 9); }
.hero-film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.hero-film__toggle { display: none; }
.hero-film--live .hero-film__toggle {
  display: block;
  position: absolute;
  right: .6rem;
  bottom: .8rem;
  padding: .3rem .7rem;
  font: inherit;
  font-size: .8rem;
  color: var(--ink-soft);
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.hero-film__toggle:hover { color: var(--ink); border-color: var(--ink); }
.hero-film__toggle:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 2px; }

.hero-film__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 2.4rem;
}
.hero-film__links p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.hero-film__links a {
  color: var(--ink);
  font-family: var(--font-display, Besley, Georgia, serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.hero-film__links p:first-child a { text-decoration-color: var(--vermillion); text-decoration-thickness: 2px; }
.hero-film__links a:hover { color: var(--vermillion); }
.world .hero-film__links .hero-film__source {
  font-family: inherit;
  font-size: .9rem;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .hero-film__frame { width: 100%; }
  .hero-film__video { width: 100%; aspect-ratio: 4 / 5; }
  .hero-film__links { flex-direction: column; gap: .6rem; }
}

@media print {
  .hero-film__frame { display: none; }
}