/* The videos page: each video's text beside its player, stacking on narrow screens. */
.video-list { list-style: none; margin: 0; padding: 0 0 72px; display: grid; gap: 64px; }
.video { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; align-items: center; }
.video h2 { font-size: clamp(34px, 4.5vw, 54px); margin-block: 14px; }
.video-text > p:last-child { margin: 0; max-width: 62ch; color: var(--dim); }
.video-text .eyebrow { color: var(--c); }
/* The thumbnail and the player it becomes share one 16:9 box, so nothing shifts. */
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--rule); background: #000; }
.video-frame > a, .video-frame > iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-frame img { display: block; width: 100%; height: auto; }
.video-play-label { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--k); color: var(--paper); border: 1px solid var(--y); font: 700 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.video-play-label::before { content: ""; border-block: 6px solid transparent; border-left: 10px solid var(--y); }
.video-play:hover .video-play-label, .video-play:focus-visible .video-play-label { background: var(--y); color: #000; }
.video-play:hover .video-play-label::before, .video-play:focus-visible .video-play-label::before { border-left-color: #000; }
.video-play:focus-visible { outline-offset: 4px; }
@media (max-width: 850px) {
  .video { grid-template-columns: 1fr; }
}