/* The trailer page: the video in a big leaning frame. Shared tokens live in site.css. */

.trailer-head { padding-top: 80px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.trailer-head .page-title, .trailer-head .lead { margin-inline: auto; }
.trailer-stage { padding-top: 56px; }
.trailer-frame { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 20px; background: #000; border: 1px solid var(--line2);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.025), 0 40px 120px -20px rgba(0, 0, 0, 0.9); }
.trailer-frame video { display: block; width: 100%; height: 100%; background: #000; }
.trailer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: 36px; }

@media (max-width: 640px) {
  .trailer-stage { padding-top: 36px; }
  .trailer-frame { border-radius: 14px; }
}