/* Church of the Scarlet Beast, v2. A cathedral that is a television station.
   The live channel is the page itself: it plays full-bleed behind the header, and the content rides over it in
   opaque sheets with "windows" cut between them. One dark look, on purpose. */
:root{
  --night:#0d0406; --nave:#170709; --pew:#261015; --rule:#4a2229;
  --cream:#f6ecdf; --dim:#c9b3a7; --faint:#8f756b;
  --scarlet:#e1161e; --ember:#ff5a1f; --flame:#f79a2f; --gold:#dcae56;
  --display:'Cinzel','Trajan Pro',Georgia,serif; --deco:'Cinzel Decorative','Cinzel',Georgia,serif;
  --body:'EB Garamond',Georgia,'Times New Roman',serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(18px,4vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--night);scroll-behavior:smooth}
body{margin:0;color:var(--cream);font:19px/1.55 var(--body);background:transparent;overflow-x:hidden}
a{color:var(--gold);text-underline-offset:.18em}a:hover{color:var(--flame)}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px}
img,video{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:500;text-wrap:balance;margin:0}
.sb-skip{position:absolute;left:-9999px}.sb-skip:focus{left:12px;top:12px;z-index:99999;background:var(--gold);color:var(--night);padding:8px 12px}
.k{font:500 12.5px/1.3 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.fine{font-size:15.5px;color:var(--faint);max-width:78ch}
.lede{font-size:clamp(20px,1.7vw,24px);max-width:60ch;margin:0 0 20px}
.ref{font-style:italic;color:var(--gold);font-size:.86em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ───────── the backdrop: the live channel (or a still), fixed behind everything, header included */
.bg{position:fixed;inset:0;z-index:-1;background:#000;overflow:hidden}
.bg video,.bg .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.bg .poster{background-size:cover;background-position:center;filter:saturate(1.1);animation:drift 40s ease-in-out infinite alternate}
.bg .still{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 50% 42%,#5a0d14,#0b0305 70%);padding:20px}
.bg .still p{margin:0;font:italic clamp(22px,3vw,40px)/1.3 var(--body)}
.bg canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.bg .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,2,4,.72) 0,rgba(8,2,4,.12) 22%,rgba(8,2,4,0) 46%,rgba(8,2,4,.55) 74%,rgba(8,2,4,.94) 100%)}
body.inner .bg .veil{background:linear-gradient(180deg,rgba(8,2,4,.78),rgba(13,4,6,.9) 46%,var(--night) 88%)}
@media (max-aspect-ratio:4/5){ .bg video{object-fit:contain;object-position:50% 22%} }

/* ───────── church bar (sits under the estate header, over the video) */
.top{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;padding:16px var(--pad)}
.mark{font:700 15px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-decoration:none;display:flex;align-items:center;gap:12px;text-shadow:0 1px 14px #000}
.sig{width:13px;height:13px;border-radius:50%;background:var(--scarlet);box-shadow:0 0 0 4px rgba(225,22,30,.25),0 0 22px var(--scarlet)}
.top nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.top nav a{position:relative;font:500 12.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);text-decoration:none;padding-block:8px;text-shadow:0 1px 12px #000}
.top nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--flame);transition:right .35s cubic-bezier(.2,.8,.2,1)}
.top nav a:hover::after,.top nav a[aria-current]::after{right:0}
.top nav a[aria-current]{color:var(--gold)}
.hv-bar{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;padding:12px var(--pad);border-bottom:1px solid rgba(220,174,86,.25)}
.hv-mark{font:700 20px/1 var(--display);letter-spacing:.2em;color:var(--gold);text-decoration:none}.hv-mark b{color:var(--scarlet)}
.hv-bar nav{display:flex;flex-wrap:wrap;gap:6px 18px}.hv-bar nav a{font:500 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none}

/* ───────── hero: the service itself */
.hero{position:relative;min-height:calc(100svh - 150px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto;gap:22px var(--pad);align-items:end;padding:0 var(--pad) 0}
.third{grid-row:2;max-width:880px;min-width:0}
.onair{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--display);letter-spacing:.26em;text-transform:uppercase;color:#fff;background:var(--scarlet);padding:9px 14px 8px;margin-bottom:14px}
.onair i{width:8px;height:8px;border-radius:50%;background:#fff}
.third .k{display:inline-block;margin-left:14px;text-shadow:0 1px 10px #000}
.third h1{font:500 clamp(30px,5.4vw,82px)/1.02 var(--display);letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.85)}
.third h1 .w{display:inline-block}
.third .meta{font:400 14.5px/1.4 var(--mono);color:var(--cream);margin:14px 0 0;text-shadow:0 1px 8px #000}
.bar{height:3px;background:rgba(255,255,255,.18);margin:12px 0 0;max-width:620px}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--scarlet),var(--flame));box-shadow:0 0 12px var(--ember)}
.ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--cream);background:rgba(13,4,6,.55);border:1px solid var(--gold);padding:14px 18px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--gold);color:var(--night);transform:translateY(-2px)}
.btn.gold{background:var(--gold);color:var(--night)}.btn.gold:hover{background:var(--flame)}
.btn.live{border-color:var(--scarlet)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px}.eq i{width:3px;height:4px;background:currentColor}
.dialwrap{grid-row:1 / span 2;grid-column:2;align-self:end;width:clamp(170px,19vw,270px)}
.dial{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 30px rgba(0,0,0,.7))}
.dial .seg{fill:none;stroke:rgba(246,236,223,.22);stroke-width:7}
.dial .seg.now{stroke:var(--flame)}
.dial .lbl{font:500 6.4px var(--display);letter-spacing:.12em;fill:var(--dim);text-transform:uppercase}
.dial .lbl.now{fill:var(--cream)}
.dial .hand{stroke:var(--scarlet);stroke-width:2.2;stroke-linecap:round}
.dial .hub{fill:var(--scarlet)}
.dial .t{font:500 15px var(--mono);fill:var(--cream)}.dial .s{font:500 6px var(--display);letter-spacing:.2em;fill:var(--gold)}
.ticker{grid-column:1 / -1;grid-row:3;margin-inline:calc(var(--pad) * -1);border-block:1px solid rgba(220,174,86,.3);background:rgba(13,4,6,.72);overflow:hidden;white-space:nowrap}
.ticker .run{display:inline-block;padding-block:11px;animation:crawl 70s linear infinite;font:500 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ticker b{font:500 13px var(--mono);color:var(--gold);letter-spacing:0;margin:0 10px 0 34px}
.ticker:hover .run{animation-play-state:paused}
.sound{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;font:700 15px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--night);background:var(--gold);border:0;padding:22px 30px;cursor:pointer;box-shadow:0 0 0 9999px rgba(8,3,5,.35),0 0 60px rgba(247,154,47,.6)}
.cue{position:absolute;left:50%;bottom:64px;translate:-50% 0;font:500 11px var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--dim);text-decoration:none}

/* ───────── sheets and windows */
.sheet{position:relative;background:linear-gradient(180deg,var(--night),var(--nave));padding:clamp(46px,7vw,96px) var(--pad);border-top:1px solid var(--rule)}
.sheet.alt{background:linear-gradient(180deg,#1b080b,#110507)}
.sheet>.in{max-width:1240px;margin-inline:auto}
.sheet h2{font-size:clamp(28px,4.2vw,58px);line-height:1.05;margin-bottom:16px}
.sheet h2 em{font-style:normal;color:var(--scarlet)}
.window{position:relative;min-height:46vh;display:grid;place-items:center;text-align:center;padding:60px var(--pad);background:linear-gradient(180deg,var(--nave),rgba(8,2,4,.35) 30%,rgba(8,2,4,.35) 70%,var(--night))}
.window blockquote{margin:0;font:italic clamp(24px,3.6vw,50px)/1.2 var(--body);max-width:22ch;text-shadow:0 2px 30px #000}
.window cite{display:block;font:500 12px var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-style:normal;margin-top:18px}

/* the rail of what is coming */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,280px);gap:18px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x proximity;scrollbar-color:var(--rule) transparent}
.card{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--pew);border:1px solid var(--rule);text-decoration:none;color:var(--cream);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .35s;min-width:0}
.card:hover{transform:translateY(-6px) rotate(-.4deg);border-color:var(--gold);box-shadow:0 22px 50px -18px rgba(225,22,30,.6);color:var(--cream)}
.card .ph{aspect-ratio:16/9;background:#000 center/cover;position:relative;overflow:hidden}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(13,4,6,.9))}
.card .tm{position:absolute;left:10px;bottom:8px;z-index:1;font:500 13px var(--mono);color:var(--gold)}
.card .tg{position:absolute;right:10px;top:10px;z-index:1;font:700 10px var(--display);letter-spacing:.14em;text-transform:uppercase;background:rgba(13,4,6,.8);padding:5px 8px;color:var(--cream)}
.card .tg.hot{background:var(--scarlet)}
.card .tx{padding:12px 14px 16px;display:grid;gap:6px}
.card .tx b{font:500 17px/1.2 var(--display)}
.card .tx span{font-size:15.5px;color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:22px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,60px);align-items:start}
.cols p{color:var(--dim);margin:0 0 14px}

/* countdown */
.count{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 20px}
.count div{min-width:92px;text-align:center;border:1px solid var(--rule);background:rgba(38,16,21,.7);padding:14px 10px 10px}
.count b{display:block;font:500 clamp(34px,5vw,58px)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--cream)}
.count span{font:500 10.5px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* the watches */
.hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hour{background:var(--nave);padding:20px 18px;transition:background .3s}
.hour:hover,.hour.now{background:#2c0d12}
.hour b{font:500 21px var(--display);letter-spacing:.06em}.hour .mono{color:var(--gold);font-size:13.5px;display:block;margin:2px 0 8px}
.hour p{margin:0;font-size:16.5px;color:var(--dim)}
.hour.now b::after{content:" · now";color:var(--scarlet);font-size:13px;letter-spacing:.14em}

/* guide rows */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tabs button,.chip{font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:none;border:1px solid var(--rule);padding:12px 15px;cursor:pointer}
.tabs button[aria-selected=true],.chip[aria-pressed=true]{background:var(--gold);color:var(--night);border-color:var(--gold)}
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr));gap:26px 44px}
.watch h3{font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--flame);border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:6px}
.watch h3 small{font:400 13px var(--mono);letter-spacing:0;text-transform:none;color:var(--faint);margin-left:8px}
.rows{list-style:none;margin:0;padding:0}
.it{display:grid;grid-template-columns:78px 104px minmax(0,1fr) 46px;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(74,34,41,.45);font-size:16.5px;line-height:1.3;transition:background .2s,padding .2s}
.it:hover{background:rgba(220,174,86,.06);padding-left:6px}
.it .t{font:400 13.5px var(--mono);color:var(--gold);background:none;border:0;padding:0;text-align:left;font-variant-numeric:tabular-nums}
button.t{cursor:pointer}button.t:hover{color:var(--flame);text-decoration:underline}
.it .tag{font:500 10.5px/1.5 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.it .d{font:400 13px var(--mono);color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.it .ti{color:var(--dim);min-width:0;overflow-wrap:anywhere}
.it.sermon .ti,.it.sermon .ti a{color:var(--cream);font-size:18.5px}
.it.premiere .tag{color:var(--scarlet)}.it.sermon .tag{color:var(--gold)}
.it.song .ti{font-style:italic}.it.stillness{opacity:.5}
.it.on{background:linear-gradient(90deg,rgba(225,22,30,.3),transparent)}.it.on .t{color:var(--cream)}
.it.past{opacity:.45}
.facts{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:8px 30px;font-size:16.5px;color:var(--dim)}
.facts b{font:500 17px var(--mono);color:var(--cream);margin-right:6px}
.list{padding-left:20px;margin:0 0 24px}.list li{margin-bottom:6px}.list .d{color:var(--faint);font:13px var(--mono);margin-left:8px}

/* framed player (replays) */
.air{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:start}
.screen{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;border:1px solid var(--rule);box-shadow:0 30px 80px -30px rgba(225,22,30,.6)}
.screen video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.screen .still{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,#4a0e14,#0b0305 70%)}
.screen .start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.air .now h1{font-size:clamp(24px,2.7vw,36px);line-height:1.14}
.air .meta{font:400 14px/1.4 var(--mono);color:var(--dim);margin:12px 0}
.next{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.next li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.3;color:var(--dim)}
.next li b{font:400 13.5px/1.6 var(--mono);color:var(--gold)}

/* sermon + album */
.sermon{max-width:780px}
.sermon h1{font-size:clamp(34px,5.4vw,70px);line-height:1.04}
.sermonfilm{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--rule);margin-block:18px 8px}
.text p{margin:0 0 1em;font-size:21.5px;line-height:1.62;max-width:66ch}
.text p:first-child::first-letter{font:500 3.4em/.82 var(--deco);float:left;padding:6px 10px 0 0;color:var(--scarlet)}
.after{border-top:1px solid var(--rule);padding-top:18px;color:var(--dim)}
.albumhead{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(22px,4vw,54px);align-items:end;margin-bottom:34px}
.albumhead img{width:100%;height:auto;display:block;border:1px solid var(--rule);box-shadow:0 40px 90px -40px var(--scarlet);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.albumhead img:hover{transform:rotate(-1.5deg) scale(1.02)}
.albumhead h1{font:700 clamp(40px,7vw,104px)/.95 var(--deco)}
.track{padding-block:20px;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px 34px;align-items:start}
.track h2{font-size:clamp(22px,2.4vw,30px)}.track h2 .n{font:400 15px var(--mono);color:var(--gold);margin-right:10px}.track h2 small{font:400 13px var(--mono);color:var(--faint);margin-left:8px}
.track video{width:100%;aspect-ratio:16/9;background:#000}
.track summary{cursor:pointer;font:500 12px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:12px}
.lyrics{font:18px/1.5 var(--body);white-space:pre-wrap;margin:14px 0 0;color:var(--cream)}.lyrics .sect{color:var(--faint);font:12px var(--mono)}
.pagehead{padding:clamp(30px,6vw,90px) var(--pad) clamp(30px,5vw,60px);max-width:1240px;margin-inline:auto}
.pagehead h1{font:700 clamp(40px,7.4vw,112px)/.96 var(--deco);text-shadow:0 2px 40px #000}
.pagehead h1 em{font-style:normal;color:var(--scarlet)}
.pagehead .lede{margin-top:18px;text-shadow:0 1px 14px #000}

/* modal player */
.modal{position:fixed;inset:0;z-index:100000;background:rgba(6,2,3,.94);display:grid;place-items:center;padding:20px}
.modal .box{width:min(1100px,100%)}.modal video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.modal h3{font-size:20px;margin:14px 0 0}.modal .x{position:absolute;right:18px;top:14px}

.foot{background:var(--night);padding:40px var(--pad) 60px;border-top:1px solid var(--rule);color:var(--dim);font-size:17px}
.foot>div{max-width:1240px;margin-inline:auto}.foot p{max-width:82ch}
.footnav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px;padding:0;list-style:none}
.footnav a{font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.hv-foot{padding:0 var(--pad) 24px}

/* theatre */
body.theatre .bg video{object-fit:contain}
body.theatre .bg .veil{background:linear-gradient(180deg,rgba(8,2,4,.5),transparent 18%,transparent 70%,rgba(8,2,4,.85))}
body.theatre .hero{min-height:calc(100svh - 60px)}
body.theatre .dialwrap,body.theatre .ticker{display:none}

/* ───────── motion */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
@keyframes crawl{to{transform:translateX(-50%)}}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-1.5%)}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(225,22,30,.06),0 0 34px var(--scarlet)}}
@keyframes blink{50%{opacity:.25}}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@keyframes rise{from{opacity:0;transform:translateY(.5em) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes flick{0%,100%{text-shadow:0 0 18px rgba(247,154,47,.0)}45%{text-shadow:0 0 26px rgba(247,154,47,.45)}55%{text-shadow:0 0 10px rgba(225,22,30,.5)}}
@media (prefers-reduced-motion:no-preference){
  .sig{animation:pulse 2.6s ease-in-out infinite}.onair i{animation:blink 1.4s steps(2,end) infinite}
  .soundon .eq i{animation:eq .8s ease-in-out infinite}.soundon .eq i:nth-child(2){animation-delay:.2s}.soundon .eq i:nth-child(3){animation-delay:.45s}
  .third h1 .w{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  .sheet h2 em,.pagehead h1 em{animation:flick 4.2s ease-in-out infinite}
  .cue{animation:blink 2.6s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.ticker .run,.bg .poster{animation:none}.js .rv{opacity:1;transform:none}html{scroll-behavior:auto}}
@media (max-width:860px){
  body{font-size:18px}
  .hero{grid-template-columns:minmax(0,1fr);min-height:calc(100svh - 120px)}
  .dialwrap{grid-row:auto;grid-column:1;width:150px;justify-self:end;margin-bottom:-10px}
  .third{grid-row:auto}.ticker{grid-row:auto}
  .air,.albumhead,.track{grid-template-columns:minmax(0,1fr)}
  .it{grid-template-columns:70px minmax(0,1fr) 42px}.it .tag{display:none}
  .top nav{gap:2px 16px}
}

/* the estate header goes translucent here so the film shows behind it */
.sb-hd{background:linear-gradient(180deg,rgba(7,4,4,.6),rgba(7,4,4,.16))!important}
.sb-hd.is-stuck{background:rgba(7,4,4,.8)!important}
.sb-sig,.sb-mk,.sb-lg{background:rgba(7,4,4,.34)!important}
.third h1 .w{margin-right:.26em}
.hero{min-height:calc(100svh - var(--hdr,260px))}
.hero{min-height:min(calc(100svh - var(--hdr,260px)),1000px)}
.window{min-height:min(46vh,520px)}

/* ───────── the console (v3 of the hero): nothing is drawn over the picture.
   The film plays clean behind the header; what is on air is named in one slim bar under it, so the station's
   words never sit on top of the sermon's own title and captions. */
body.home .bg .veil,body.theatre .bg .veil{background:linear-gradient(180deg,rgba(8,2,4,.66) 0,rgba(8,2,4,.12) 18%,rgba(8,2,4,0) 30%)}
.hero{display:flex;align-items:flex-end;padding:0;gap:0}
.console{position:relative;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:6px 24px;align-items:center;padding:12px var(--pad);background:rgba(10,3,5,.93);border-top:1px solid rgba(220,174,86,.4)}
.console .bar{position:absolute;left:0;right:0;top:-3px;margin:0;max-width:none;height:3px}
.console .onair{margin:0}
.console .np{min-width:0}
.console .k{display:block;margin:0 0 3px;font-size:11px;letter-spacing:.2em;text-shadow:none}
.console h1{font:500 clamp(17px,1.55vw,24px)/1.2 var(--display);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}
.console h1 .w{margin-right:.3em}
.console .meta{margin:0;font:400 13px/1.3 var(--mono);color:var(--dim);white-space:nowrap;text-shadow:none}
.console .ctl{margin:0;flex-wrap:nowrap;gap:8px}
.console .btn{padding:11px 14px;font-size:11.5px}
.console .dialwrap{grid-row:auto;grid-column:auto;width:68px;align-self:center}
.console .dial{filter:none}.console .dial .lbl,.console .dial .s{display:none}.console .dial .t{font-size:17px}.console .dial .seg{stroke-width:11}
.ticker{grid-column:auto;margin-inline:0;position:relative;background:var(--night)}
body.theatre .dialwrap{display:block}body.theatre .ticker{display:block}
@media (max-width:1100px){.console{grid-template-columns:auto minmax(0,1fr) auto}.console .meta{display:none}.console .ctl{grid-column:1 / -1;flex-wrap:wrap}.console .dialwrap{grid-row:1;grid-column:3}}
@media (max-width:860px){.console h1{white-space:normal;font-size:18px}.console .dialwrap{width:56px;margin:0;justify-self:end}}
.console h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:clamp(16px,1.35vw,21px)}
body.home .top,body.theatre .top{background:linear-gradient(180deg,rgba(10,3,5,.82),rgba(10,3,5,.5));border-bottom:1px solid rgba(220,174,86,.18)}
/* the film's frame ends where the console begins, so its captions are never under the bar */
body.home .bg video,body.theatre .bg video{height:calc(100% - var(--con,92px))}
body.home .top,body.theatre .top{background:var(--night);border-bottom:1px solid var(--rule)}
body.home .top .mark,body.home .top nav a,body.theatre .top .mark,body.theatre .top nav a{text-shadow:none}

/* go to church in VR */
.vr{background:radial-gradient(90% 120% at 85% 40%,#4a0d14 0,#150608 60%)}
.headset svg{width:min(100%,420px);height:auto;display:block;margin-inline:auto;filter:drop-shadow(0 30px 50px rgba(225,22,30,.45))}
.vrstrip{background:linear-gradient(90deg,#3a0b11,#1b080b);border-top:1px solid var(--rule);padding:16px var(--pad);text-align:center}
.vrstrip p{margin:0;font-size:18px}.vrstrip b{font-family:var(--display);letter-spacing:.08em;font-weight:500;color:var(--cream)}
@keyframes hover{50%{transform:translateY(-10px) rotate(-1.5deg)}}@keyframes visor{50%{opacity:.6}}
@media (prefers-reduced-motion:no-preference){.headset svg{animation:hover 5s ease-in-out infinite}.headset .visor{animation:visor 2.4s ease-in-out infinite}}