.w-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:16px 0 8px}
.w-card{background:#fffaf0;border:1px solid var(--rule);box-shadow:0 1px 0 rgba(0,0,0,.04);display:flex;flex-direction:column}
.w-play{position:relative;display:block;width:100%;padding:0;border:0;border-bottom:1px solid var(--rule);background:#1a1408;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.w-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.w-play:hover img,.w-play:focus-visible img{opacity:1}
.w-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:46px;border-radius:12px;background:var(--accent);color:#fff;font-size:22px;line-height:46px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.w-play:hover .w-btn,.w-play:focus-visible .w-btn{background:var(--ink)}
.w-play:focus-visible{outline:3px solid var(--yp);outline-offset:2px}
.w-len{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;font:600 13px/1 system-ui,sans-serif;padding:4px 6px;border-radius:3px}
.w-frame{aspect-ratio:16/9;width:100%;border:0;display:block;background:#000}
.w-body{padding:12px 14px 14px}
.w-body h3{font-size:19px;margin:0 0 6px}
.w-body h3 a{color:var(--ink);text-decoration:none}.w-body h3 a:hover{text-decoration:underline}
.w-why{margin:0 0 8px}
.w-credit{margin:0;font-size:15px;color:var(--muted)}
.w-meta{margin:2px 0 0;font-size:14px;color:var(--muted)}
.w-old{margin:6px 0 0;font-size:14px;font-style:italic;color:var(--red)}
.w-rel{display:inline-block;margin-top:8px;font-size:14px}
.w-sub{color:var(--muted);font-style:italic;margin:6px 0 0}
.w-fine{margin-top:34px;padding-top:12px;border-top:1px solid var(--rule);color:var(--muted);font-size:15px}
@media (max-width:640px){.w-grid{grid-template-columns:1fr;gap:16px}.w-body h3{font-size:18px}}