/* Click-to-play video facade. Poster is local; YouTube is only reached on a press. */
.vf-yt { margin: 0; min-width: 0; }
.vf-yt__link {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius, 16px);
  border: 1px solid var(--border); background: var(--surface); aspect-ratio: 16 / 9;
  text-decoration: none; color: inherit;
}
.vf-yt__link:hover { border-color: var(--border-strong); }
.vf-yt__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-yt__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px;
  background: var(--fill); color: var(--on-fill); box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, .35));
  transition: transform .15s ease;
}
.vf-yt__link:hover .vf-yt__play { transform: translate(-50%, -50%) scale(1.06); }
.vf-yt__play svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.vf-yt__meta {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 44px 16px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .82) 70%);
  color: #fff;
}
.vf-yt__title { font-weight: 800; font-size: .9375rem; line-height: 1.3; }
.vf-yt__sub { font: 700 .75rem/1.3 var(--mono); letter-spacing: .04em; opacity: .82; }
.vf-yt__frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius, 16px); background: #000; }
.vf-yt figcaption { margin: 10px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-3); }
.vf-yt.is-playing figcaption { color: var(--text-3); }

.vf-yt-grid { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .vf-yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vf-yt-grid > li { min-width: 0; }
.vf-yt-grid .vf-yt__blurb { margin: 10px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.vf-yt-note { max-width: 68ch; margin: 0 0 22px; font-size: .875rem; line-height: 1.6; color: var(--text-3); }