:root {
  --focus: #ffb000;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 1rem; z-index: 100; padding: .75rem 1rem; color: #fff; background: #111; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #111; }
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; color: #fff; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 55%)); cursor: pointer; }
.video-play::before { content: "▶"; display: grid; place-items: center; width: 64px; height: 64px; padding-left: 4px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; color: #111; background: rgb(255 255 255 / 92%); box-shadow: 0 14px 34px rgb(0 0 0 / 24%); transition: transform .2s ease; }
.video-play:hover::before { transform: scale(1.08); }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.video-card { min-width: 0; }
.video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 .55rem; font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.video-meta span + span::before { content: "•"; margin-right: .5rem; opacity: .55; }
.video-title { margin: 0; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.28; }
.video-source { display: inline-flex; align-items: center; min-height: 44px; margin-top: .45rem; font-size: .88rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.video-fallback { display: grid; gap: .65rem; }
.video-fallback a { display: inline-flex; min-height: 44px; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.filter-button { min-height: 44px; padding: .55rem .9rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; background: transparent; cursor: pointer; }
.filter-button[aria-pressed="true"] { color: var(--filter-selected-color, #fff); background: var(--filter-selected-bg, #111); }
.source-list { margin: 0; padding: 0; list-style: none; }
.source-list li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid currentColor; }
.source-list li:last-child { border-bottom: 0; }
.source-list .source-num { font-variant-numeric: tabular-nums; opacity: .6; }
.source-list a { font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.external::after { content: " ↗"; }
.mobile-action { display: none; }
@media (max-width: 920px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .video-grid { grid-template-columns: 1fr; }
  .mobile-action { position: fixed; z-index: 40; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); left: 1rem; display: flex; min-height: 52px; align-items: center; justify-content: center; border-radius: 999px; font-weight: 850; text-decoration: none; box-shadow: 0 10px 28px rgb(0 0 0 / 24%); }
  footer { padding-bottom: 96px !important; }
}
@media (max-width: 210px) {
  .mobile-action { display: none; }
  footer { padding-bottom: 1rem !important; }
  .filters { display: grid; grid-template-columns: 1fr; }
  .filter-button { min-width: 0; padding-inline: .4rem; font-size: .7rem; overflow-wrap: anywhere; }
  .video-play::before { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}