/* CCRB — the television: the home-page band and the screening room */
.tv-stage{position:absolute;inset:0}
.tv-stage canvas{display:block;width:100%;height:100%}

/* the band: the room glimpsed from the register. Full width, the set small and centred, nothing said. */
.wrap .tv-band{width:100vw;margin-left:calc(50% - 50vw)}
.tv-band{position:relative;display:block;height:320px;background:#04060a;overflow:hidden;cursor:pointer;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.tv-band::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--tv-lb,0px);background:#04060a;z-index:3;box-shadow:0 calc(320px - var(--tv-lb,0px)) 0 0 #04060a}
.tv-band::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--tv-vig,1);
  background:linear-gradient(90deg,rgba(4,6,10,.85),transparent 22%,transparent 78%,rgba(4,6,10,.85)),linear-gradient(180deg,rgba(4,6,10,.6),transparent 30%,transparent 80%,rgba(4,6,10,.7))}
.tv-band .tv-grain{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:overlay}
.tv-band .tv-onair{position:absolute;right:28px;top:22px;z-index:4;font-family:'Michroma',sans-serif;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#8a2f27;display:flex;align-items:center;gap:12px;transition:color .4s}
.tv-band .tv-onair i{width:10px;height:10px;border-radius:50%;background:#cf4a3e;box-shadow:0 0 14px #cf4a3e,0 0 30px rgba(207,74,62,.5);animation:tv-bl 2.2s infinite}
.tv-band:hover .tv-onair{color:#cf4a3e}
@keyframes tv-bl{50%{opacity:.15}}
@media (max-width:700px){.tv-band{height:220px}.tv-band .tv-onair{font-size:10px;right:16px;top:14px}}

/* the room */
.tv-room{position:relative;min-height:calc(100vh - var(--mast-h,62px));display:grid;grid-template-rows:1fr auto;background:radial-gradient(ellipse at 50% 30%,#0a0e16,#04060a 70%)}
.tv-room .tv-scene{position:relative;min-height:520px;cursor:grab}
.tv-stage{cursor:grab}.tv-stage.drag{cursor:grabbing}.tv-stage.hot{cursor:pointer}.tv-stage.knob{cursor:ew-resize}
.tv-room .tv-hint{position:absolute;left:28px;bottom:18px;z-index:2;pointer-events:none;font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.tv-room .tv-strip{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:18px 28px 26px;border-top:1px solid var(--line);background:#06080c}
.tv-room .tv-now{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.tv-room .tv-now b{color:var(--ink);font-family:'Michroma',sans-serif;font-weight:400;font-size:13px;letter-spacing:.06em;display:block;margin-top:6px}
.tv-room .tv-now a{color:var(--accent);text-decoration:none}
.tv-room .tv-chs{display:flex;gap:8px;flex-wrap:wrap}
.tv-room .tv-chs button{background:var(--bg-1);border:1px solid var(--line-mid);color:var(--ink-dim);font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;cursor:pointer;border-radius:2px}
.tv-room .tv-chs button.on,.tv-room .tv-chs button:hover{border-color:var(--accent);color:var(--ink)}
@media (max-width:700px){.tv-room .tv-strip{grid-template-columns:1fr}.tv-room .tv-scene{min-height:60vh}}

/* the home hero: the hologram replaces the still image (hero.js) */
.hero-wrap.hero-live .hero-img{display:none!important}
.hero-wrap .hero-seal{position:absolute;inset:0;width:100%;height:100%;display:block;background:#080b11}
/* the tagline, left of the hologram */
.hero-wrap .hero-tag{position:absolute;left:calc(var(--pad) + 6px);top:50%;transform:translateY(-58%);z-index:3;max-width:46%;pointer-events:none}
.hero-wrap .hero-tag h1{font-family:'Michroma',var(--font-display,sans-serif);font-weight:400;font-size:clamp(15px,1.7vw,24px);letter-spacing:.08em;line-height:1.5;margin:0 0 .7em;color:var(--ink)}
.hero-wrap .hero-tag p{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin:0}
@media (max-width:700px){.hero-wrap .hero-tag{top:22px;transform:none;max-width:70%}.hero-wrap .hero-tag h1{font-size:14px}}