/* Generated by scripts/26-video-openings.py: the video-led opening from the recaps. */
/* The page as Safari showed the stacked take: Impact (a system font) */
:root { --display: Impact, "Arial Narrow", sans-serif; }

/* ---------- A: reel ---------- */
/* the type in the footer's cream, not the pale it had (64-opening-cream.py; Kingsley: "lets do the switch to cream") */
.take-video-a { background: var(--ink); color: var(--cream); }
.bg-reel { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.take-video-a .shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* darker low down: the daytime shots are bright behind the pale type */
  background: linear-gradient(to bottom, rgba(24, 19, 18, .6), rgba(24, 19, 18, 0) 20%, rgba(24, 19, 18, 0) 34%, rgba(24, 19, 18, .55) 62%, rgba(24, 19, 18, .85));
}
.take-video-a .headline .line { text-shadow: 0 2px 22px rgba(24, 19, 18, .35); }
/* the reel in colour under a sheet of periwinkle at 42%, the paper's texture multiplied over everything */
.take-video-a .wash { position: absolute; inset: 0; z-index: -3; pointer-events: none; background: var(--periwinkle); opacity: .42; }
.take-video-a .paper { background: url("../media/paper.jpg") center / 900px; mix-blend-mode: multiply; opacity: .6; }
.take-video-a .hero-body { display: flex; align-items: flex-end; padding: 0 0 4.5vh; }
/* WE THROW / PARTIES., the first line the longer */
.take-video-a .headline .line { font-size: clamp(56px, 9.6vw, 156px); white-space: nowrap; }
/* The O: a box as tall as Impact's caps (.79em) and narrower than the mark (800 x 729, .98em wide, .89em tall), so the
   mark sits a little over the caps and overlaps the R and W either side. Kingsley first had it brought down to the
   letters' height ("decrease logo size a tad so it lines up with the lettering on both sides"), then up again with
   the W pulled in ("make logo slightly bigger and bring in the W to the left so the logo slightly overlaps the R
   and W") */
.take-video-a .o { display: inline-block; position: relative; width: .8em; height: .79em; }
.take-video-a .o img {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: .98em; max-width: none; margin: -.447em 0 0 -.49em;
  filter: drop-shadow(3px 5px 0 rgba(24, 19, 18, .45));
}
/* the links keep their colour under the pointer (the shared styles darken them) */
.take-video-a .topline a:hover, .take-video-a .infobar a:hover { color: inherit; }
/* Shop and Team aren't open: links with nowhere to go, so it sits and looks exactly like the others (as a span it took the
   shared trim for spans and sat higher: "the SHOP link needs to align with the others. its sitting slightly above") */
.take-video-a .topline .soon { cursor: default; }
/* the bar: Since 2018 on the left, #RPCGRP on the right */
.take-video-a .infobar { justify-content: flex-start; gap: .9em; }
.take-video-a .infobar span:last-child { margin-left: auto; }

@media (max-width: 760px) {
  .take-video-a .hero-body { padding-bottom: 4vh; }
  .take-video-a .headline .line { font-size: 17.5vw; }
  /* the shared phone rule hides the top line's second item, which was Since Oct 2018; here it is the links */
  .take-video-a .topline > .topline-links { display: flex; }
}