/* ---------- Opening video: the first screen of the page; the paintings follow below it as the visitor scrolls ---------- */
.hero-video { position: relative; box-sizing: border-box; height: 100vh; height: 100svh; padding-top: var(--header-h); background: #fff; overflow: hidden; }   /* the video starts under the header, not behind it */
.hero-video a { display: block; height: 100%; }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-video .cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 10px 14px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .78); color: var(--ink);
  font: 400 11px/1 "Open Sans", system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
}
.hero-video .cue { animation: cue-in .8s ease 2.15s both; }   /* let the video be seen first */
@keyframes cue-in { from { opacity: 0; } }
@media (max-width: 900px) { .hero-video { height: calc(43svh + var(--header-h)); } .hero-video .cue { display: none; } }   /* phone: the video takes 43% of the screen, so the first painting shows below it */