body.video-home {
  --rule: rgba(255,255,255,.4);
  --muted: #fff;
  --ink: #fff;
  background: #000;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
#stage, #stage::after, .scene, .scene video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#stage { z-index: -1; background: #000; filter: brightness(1.17325); }
.scene { opacity: 0; transition: opacity .35s ease; }
.scene.active { opacity: 1; }
.scene video { object-fit: cover; }
#stage::after {
  content: "";
  background: linear-gradient(180deg, rgba(0,0,0,.10), transparent 18%, transparent 88%, rgba(0,0,0,.10)),
              linear-gradient(90deg, rgba(0,0,0,.16), transparent 42%);
}
.video-home header { flex: none; border-color: rgba(255,255,255,.65); }
.video-home #page { display: flex; flex: 1; flex-direction: column; }
.lower { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; flex: 1; }
.lineup { width: 22%; min-width: min(13rem, 50%); }
.lineup .name { font-size: clamp(12px, 1.6vw, 33.5px); padding-block: clamp(7.5px, .9vw, 16px); }
.roster-horns {
  flex: none;
  margin-inline: 12px 4px;
  font: clamp(19px, 1.65vw, 30px)/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  opacity: .8;
}
.name.is-preview .roster-horns { opacity: 1; }
@media (hover: hover) {
  .name:hover .roster-horns { filter: url("#horns-red"); opacity: 1; }
}
.name:focus-visible .roster-horns { filter: url("#horns-red"); opacity: 1; }
.film-info { display: flex; align-items: center; gap: 18px; padding-bottom: 4px; }
.film-info .caption { display: grid; text-align: right; gap: 3px; padding: 0; }
#motion { width: 42px; height: 42px; border: 1px solid #fffa; border-radius: 50%; background: #13131350; color: white; display: grid; place-items: center; }
#motion::after { content: ""; width: 7px; height: 11px; border-inline: 2px solid; }
#motion.paused::after { width: 0; height: 0; border: 0; border-block: 5px solid transparent; border-left: 8px solid; margin-left: 2px; }
@media(max-width:760px) {
  .lower { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 18px; }
  .lineup { width: 50%; }
  .lineup .name { font-size: clamp(14px, 3.25vw, 22.5px); padding-block: 7px; }
  .film-info { justify-content: space-between; }
  .film-info .caption { text-align: left; }
  .video-home .caption span:last-child { text-align: left; }
}
@media(prefers-reduced-motion:reduce) {
  .scene, .scene video { transition: none; }
}

body.contact { --paper: #000; --ink: #fff; --muted: #fff; }

/* The masthead and names share the same left edge. */
.stacked-roster header {
  height: clamp(32px, 4.5vh, 46px);
  border: 0;
  justify-content: flex-end;
}
.stacked-roster header .monogram,
.stacked-roster header .meta:not(.contact-link),
.stacked-roster .lineup .section-label { display: none; }
.stacked-roster #page { container-type: normal; --mast-size: min(9.4vw, 210px); }
.stacked-roster .mast {
  font-size: var(--mast-size);
  padding: 0 0 clamp(24px, 4.5vh, 58px);
}
.stacked-roster .lower {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}
/* Align the smaller lettering with the ink edge of the large capital E. */
.stacked-roster .lineup { width: fit-content; min-width: 0; margin-inline-start: calc(var(--mast-size) * .068); }
.stacked-roster #names { display: grid; justify-items: start; }
.stacked-roster .name {
  display: flex;
  align-items: center;
  border: 0;
  padding-block: 4px;
  opacity: .84;
}
.stacked-roster .name:is(.is-preview, :hover, :focus-visible) { opacity: 1; }
.stacked-roster .film-info { align-self: flex-end; }
@media (pointer: coarse) {
  .stacked-roster .name { min-height: 36px; }
}
@media (max-width: 760px) {
  .stacked-roster .film-info { align-self: stretch; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .stacked-roster #page { --mast-size: min(9.4vw, 15svh); }
  .stacked-roster .mast { padding-bottom: 12px; }
}

/* Register the navigation to the homepage header's center on every route. */
.site-nav {
  position: fixed;
  z-index: 5;
  left: calc(100vw - clamp(17px, 3.4vw, 66px));
  top: clamp(16px, 2.25vh, 23px);
  transform: translate(-100%, -50%);
}