/* wider gutter for the 40-card reel */
.reelwrap{max-width:1480px;margin:0 auto;padding:0 40px}

/* hero */
.filmhero{padding:34px 0 10px}
.filmhero .lead strong{color:var(--ink)}
.channelfacts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.channelfacts li{border:2px solid var(--ink);background:#fff;padding:7px 11px;font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:7px}
.channelfacts li.paperchip{background:#F5E9C8}
.channelfacts b{color:var(--red)}

/* section header — marker scrawl energy */
.reelhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:34px 0 6px}
.reelhead h2{font-family:'Permanent Marker',cursive;font-weight:400;font-size:38px;letter-spacing:0;margin:0;transform:rotate(-1.2deg)}
.reelhead h2 .x{color:var(--red)}
.count{font-weight:700;font-size:13px;color:var(--muted);border:2px solid var(--ink);background:var(--panel);padding:6px 12px;box-shadow:3px 3px 0 var(--ink)}

/* filter chips — zine buttons */
.filters{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 8px;padding:0;list-style:none}
.chip{font-family:inherit;cursor:pointer;font-weight:700;font-size:13px;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:8px 15px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.chip:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.chip[aria-pressed="true"]{background:var(--red);color:#fff}
.chip .chip-n{opacity:.75;margin-left:5px}

/* card grid — cut-outs pasted on the paper */
.vgrid{display:grid;gap:30px 26px;margin:28px 0 0;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.vcard{background:#fff;border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(26,23,19,.85);display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.vcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 rgba(26,23,19,.85)}
.vcard:focus-within{box-shadow:8px 8px 0 var(--red)}

.vthumb{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;border-bottom:2px solid var(--ink)}
.facade{appearance:none;border:0;padding:0;margin:0;width:100%;height:100%;cursor:pointer;background:var(--ink);display:block;position:relative}
.facade:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.vthumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:filter .25s}
.vcard:hover .vthumb img{filter:saturate(1.05)}

.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;z-index:3;pointer-events:none;background:var(--red);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;transition:transform .12s,background .12s}
.playbtn svg{width:24px;height:24px;margin-left:3px;color:#fff}
.facade:hover .playbtn,.facade:focus-visible .playbtn{transform:translate(-50%,-50%) scale(1.1);background:var(--amber)}
.facade:hover .playbtn svg,.facade:focus-visible .playbtn svg{color:var(--ink)}

.rankbadge{position:absolute;top:9px;left:9px;z-index:4;font-family:'Permanent Marker',cursive;font-size:14px;color:var(--ink);background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--red);padding:2px 8px;transform:rotate(-3deg)}
.viewsbadge{position:absolute;bottom:9px;right:9px;z-index:4;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--paper);background:var(--ink);padding:3px 8px}
.viewsbadge svg{width:13px;height:13px}

.vbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.vcat{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red);border:2px solid var(--ink);padding:3px 8px;box-shadow:2px 2px 0 var(--ink)}
.vtitle{font-size:16px;font-weight:700;color:var(--ink);margin:0;line-height:1.3;letter-spacing:-.01em}
.vdesc{font-size:13.5px;color:var(--body);margin:0;line-height:1.55}
.vmeta{margin-top:auto;padding-top:11px;border-top:2px dashed rgba(26,23,19,.25);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vmeta .views{font-size:12.5px;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.vmeta .views svg{width:14px;height:14px;color:var(--muted)}
.yt-link{font-size:12.5px;font-weight:700;color:var(--red);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-bottom:2px solid var(--red)}
.yt-link svg{width:15px;height:15px;flex:0 0 auto}

/* embedded iframe state — badges and facade get out of the way */
.vthumb.is-playing .facade,
.vthumb.is-playing .rankbadge,
.vthumb.is-playing .viewsbadge{display:none}
.vthumb.is-playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.empty{display:none;text-align:center;color:var(--muted);font-weight:600;padding:48px 20px;border:2px dashed var(--ink);margin-top:30px;background:var(--panel)}

.privnote{margin:36px 0 56px;border:2px solid var(--ink);background:#F5E9C8;box-shadow:4px 4px 0 var(--red);padding:14px 18px;font-size:13px;line-height:1.55;color:var(--body);max-width:640px}
.privnote .scrawl{font-size:14px}

@media(max-width:960px){
  .reelwrap{padding:0 20px}
  .reelhead h2{font-size:30px}
  .vgrid{gap:22px 18px}
}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important}
}