* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:#111; color:#eee; }
header { padding:12px 16px; background:#000; border-bottom:1px solid #333; }
header h1 { margin:0 0 8px; font-size:1.4rem; }
nav a { color:#f55; margin-right:12px; text-decoration:none; }
nav a:hover { text-decoration:underline; }
main { padding:16px; max-width:1200px; margin:0 auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.video-card { background:#1a1a1a; border-radius:6px; overflow:hidden; }
.video-link { color:inherit; text-decoration:none; display:block; }
.video-wrap { position:relative; padding-top:56.25%; background:#000; }
.video-wrap img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.play-badge { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.7); color:#fff; padding:4px 8px; border-radius:4px; font-size:.8rem; }
.video-copy { padding:10px; }
.video-title { margin:0 0 4px; font-size:1rem; line-height:1.3; }
.video-desc { margin:0; font-size:.85rem; color:#aaa; }
.page-copy { margin-top:32px; max-width:800px; line-height:1.6; font-size:1rem; }
.page-copy p { margin:0 0 1em; }
.cams-btn { position:fixed; bottom:0; left:0; right:0; background:#c00; text-align:center; padding:12px; z-index:100; }
.cams-btn a { color:#fff; text-decoration:none; font-weight:bold; font-size:1.1rem; }
footer { text-align:center; padding:40px 16px 60px; color:#666; font-size:.85rem; }
@media (max-width:600px) {
  .grid { grid-template-columns:1fr; }
}