/* Additions to style.css for the catalogue; uses its colour variables only. */
.intro { max-width:1200px; margin:16px auto 0; padding:0 16px; color:var(--muted); font-size:.95rem; }
.intro p { margin:0; }
.intro b { color:var(--ink); }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.cards .pub { margin:0; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.thumb { overflow:hidden; display:block; position:relative; aspect-ratio:16/9; background:var(--line); line-height:0; }
.thumb img { width:100%; height:100%; object-fit:cover; transform:scale(1.34); }
.thumb .yr { position:absolute; top:8px; left:8px; line-height:1.4; }
.thumb .play { position:absolute; right:8px; bottom:8px; background:rgba(18,18,58,.82); color:#fff; border-radius:12px; padding:1px 10px; font-size:.78rem; line-height:1.5; }
.body { padding:10px 14px 12px; }
.body h2 { font-size:1rem; line-height:1.3; }
.body p { margin:4px 0 6px; font-size:.9rem; }
.tag { cursor:pointer; font:inherit; font-size:.75rem; }
.tag.on { background:var(--accent2); color:var(--accent2-ink) !important; border-color:var(--accent2); }
.filters .chk { cursor:pointer; }
.filters .areas details > summary { font-size:.85rem; }
.filters .areas summary .chk { display:inline-block; }
.filters button#clear { margin-top:4px; }
.empty { padding:24px; text-align:center; color:var(--muted); }
.bar { display:grid; grid-template-columns:minmax(120px,40%) 1fr 32px; gap:8px; align-items:center; font-size:.85rem; margin:4px 0; }
.bar i { display:block; height:12px; background:var(--accent2); border-radius:6px; min-width:2px; }
.bar b { text-align:right; }
.area-block { margin-bottom:16px; }
.area-block h2 { font-size:1.1rem; margin:0 0 6px; }
.area-block ul { margin:0; padding-left:20px; font-size:.9rem; }
.area-block li { margin:2px 0; }
.area-block li span { color:var(--muted); font-size:.8rem; }
.area-block a { color:var(--link); }
.site-foot { max-width:1200px; margin:30px auto 20px; padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
.site-foot p { margin:0; }
[hidden] { display:none !important; }

.body p.meta { font-size:.82rem; margin:2px 0; }
.body .meta a { color:var(--link); text-decoration:none; }
.body .meta a:hover { text-decoration:underline; }
.body .venue { display:inline-block; padding:0 6px; border-radius:4px; background:var(--line); font-size:.75rem; }