/* Every page in the Theatre look (owner 2026-10-08: "Theatre, everywhere"). layout() pages load style.css (their parts),
   poc.css (the Theatre bar, footer, cards and palette) and this: the original pages' own parts, in Theatre's palette and
   type, each where it was. */
:root { --bg2: #0d0d10; --panel: #121216; --panel2: #1b1b21; --line2: #34343f; --mute: #6f6f7a; --gold2: #9ee3f5; --ink: #04141c; --r: 10px;
  --font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html { background: var(--bg); }
body.th { font: 15px/1.55 var(--font); }
:where(body.th main) a { color: var(--gold); } :where(body.th main) a:hover { color: var(--gold2); }
body.th h1, body.th h2 { font-family: Manrope, sans-serif; font-weight: 700; letter-spacing: -.01em; }
body.th h1 { font-size: 40px; line-height: 1.08; } body.th h2 { font-size: 22px; }
body.th h1 small, body.th h2 small { font-family: Manrope, sans-serif; font-weight: 500; }
/* room for the bar, which stays fixed over the top */
body.th main.page { padding-top: 98px; } body.th main.wide { padding-top: 70px; }
body.th .pagehead { margin: 0 0 24px; } body.th .pagehead p, body.th .lede { color: var(--dim); }
/* the cards: the Theatre card's rounded picture, its tags on the picture, the words below */
body.th .thumb { border: 0; border-radius: 10px; background: var(--p1); }
body.th .card:hover .thumb img { transform: scale(1.06); filter: none; }
body.th .thumb .b { padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font: 700 12px Manrope, sans-serif; border: 0; }
body.th .thumb .b.red { background: var(--red); }
body.th .meta b { font-size: 15px; font-weight: 700; } body.th .meta .by { color: var(--dim); }
body.th .chips em { border: 0; border-radius: 6px; background: rgba(255,255,255,.08); color: #c9c9d1; font-weight: 600; }
body.th .chips em.gold { color: var(--gold); background: rgba(77,187,223,.12); } body.th .chips em.world { color: #c9c9d1; background: rgba(255,255,255,.08); }
body.th .chips.big em.world a { color: #c9c9d1; } body.th .chips.big a:hover { color: var(--gold); }
body.th .head h2 { font-size: 22px; } body.th .head a { color: var(--gold); }
/* the pills: filters, tabs, pages */
body.th .filters a, body.th .tabs a, body.th .tabs b, body.th .pager a, body.th .pager b { border: 0; background: rgba(255,255,255,.08); color: #d4d4dc; border-radius: 999px; }
body.th .filters a:hover, body.th .tabs a:hover, body.th .pager a:hover { background: rgba(255,255,255,.16); color: #fff; }
body.th .filters a.on, body.th .tabs b, body.th .pager b { background: var(--text); color: #000; }
body.th .filters span { color: var(--dim); }
body.th .btn, body.th .btn.big { background: var(--text) !important; color: #000 !important; border-radius: 10px; } body.th .btn:hover { background: var(--gold) !important; }
/* the watch page: the band around the player on the page's own black */
body.th .band { background: var(--bg); border-bottom: 1px solid var(--line); }
body.th .titlebar h1 { font-size: 34px; }
body.th .actions button, body.th .actions a { border-radius: 10px; }
@media (max-width: 900px) { body.th main.page { padding-top: 80px; } body.th main.wide { padding-top: 62px; } body.th h1 { font-size: 30px; } body.th .titlebar h1 { font-size: 26px; } }