/* ROCK RADIO UK MEDIA GROUP - brand layer on top of Bootstrap 5.3 (mobile first) */
:root{--rock:#c91f3a;--metal:#ffa300;--gold:#d4a418;--blues:#2f7fd1}
body{background:#0d0d0f}
/* Impact only for big display headings; everything small stays a readable sans */
.display-font{font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:.02em}
h3,.h3,.h5{font-family:"Segoe UI",system-ui,Arial,sans-serif;font-weight:700}
.hero h1 span{color:var(--rock)}
/* stations */
.rock{--accent:var(--rock);--tile:#000;--on:#fff}
.metal{--accent:var(--metal);--tile:#111;--on:#000}
.gold{--accent:var(--gold);--tile:#f4f1e8;--on:#000}
.blues{--accent:var(--blues);--tile:#f4f1e8;--on:#000}
.station{border-top:4px solid var(--accent)!important}
.station .logo{height:100px;background:var(--tile);display:flex;align-items:center;justify-content:center;padding:16px}
.station .logo img{max-width:100%;max-height:100%}
.player-panel.is-live .onair::before{content:'';display:inline-block;width:.55em;height:.55em;margin-right:.5em;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:livepulse 1.2s infinite}
@keyframes livepulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.player-panel.is-live .onair::before{animation:none}}
.onair{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.station .np{font-size:1rem}
.btn-station{background:var(--accent);color:var(--on);font-weight:700;border:0}
.btn-station:hover{background:var(--accent);color:var(--on);filter:brightness(1.12)}
/* placeholders */
.slot{border:2px dashed #55555f;border-radius:.75rem;display:flex;align-items:center;justify-content:center;text-align:center;color:#9a9aa5;padding:1rem;font-size:.9rem}
.player-slot{min-height:110px}
.news-img{height:150px;background:linear-gradient(135deg,#3a1018,#101018 60%,#1c2a44)}
.tag{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--rock)}
.dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--accent);flex:none}
.time{min-width:3.5rem;font-weight:800}
/* larger screens only */
@media(min-width:768px){.station .logo{height:120px}.news-img{height:170px}}

/* hero background: drop a real photo at img/backgrounds/hero-radio.jpg (gradient shows until then) */
/* hero: plain dark panel; the radio photo now sits behind the strap line only (.hero-text) */
.hero-bg{background:#0d0d0f}
.hero-text{display:flex;align-items:center;min-height:200px;padding:2rem 0;
 background-color:#15151a; /* shows until the photo is in place */
 background-image:linear-gradient(180deg,rgba(13,13,15,.55),rgba(13,13,15,.85)),url("img/backgrounds/hero-radio.jpg");
 background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-text .container{width:100%}
.hero-text h1{text-shadow:0 2px 12px rgba(0,0,0,.85)}
/* phones and tablets share the compact band; the tall one is for large desktops only */
@media(min-width:1200px){.hero-text{min-height:320px;padding:3rem 0}}
/* tablets: photo sized by the band's HEIGHT (so it stays small), fading into the dark on the left.
   Tweak --photo-size (e.g. auto 120%) to make the radio bigger or smaller */
@media(min-width:768px) and (max-width:1199.98px){
 .hero-text{--photo-size:auto 100%;background-color:#0d0d0f;
  background-image:linear-gradient(90deg,#0d0d0f 0%,rgba(13,13,15,.88) 40%,rgba(13,13,15,.2) 100%),url("img/backgrounds/hero-radio.jpg");
  background-size:100% 100%,var(--photo-size);background-position:center,right center}}
/* slimmer band for inner pages (remove the hero-sm class to use the full-height band) */
.hero-text.hero-sm{min-height:140px;padding:1.5rem 0}
@media(min-width:768px){.hero-text.hero-sm{min-height:160px}}
@media(min-width:1200px){.hero-text.hero-sm{min-height:220px;padding:2rem 0}}
.hero-line{font-size:calc(1.4rem + 3.8vw);line-height:1.05;color:#fff;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.hero-line span{color:var(--rock)}
.hero-sm .hero-line{font-size:calc(1.3rem + 2.3vw)}
.hero-text h1.display-1{font-size:calc(1.4rem + 3.8vw)}
@media(min-width:1200px){.hero-line,.hero-text h1.display-1{font-size:4.25rem}.hero-sm .hero-line{font-size:3rem}}
/* player panel */
.player-panel{border-top:4px solid var(--accent)!important}
.player-panel .nav-link{color:#c9c9d1;font-weight:600}
.player-panel .nav-link.active{background:var(--accent);color:var(--on)}

/* main logo: bigger, mobile first */
.brand-logo{height:52px;width:auto}
@media(min-width:992px){.brand-logo{height:76px}}
.hero h1{line-height:1.05}

/* strap line lockup: wording wrapped around the logo */
.strap{--w:min(88vw,520px);width:var(--w);margin:0}
.strap-top{display:block;font-family:"Arial Black","Segoe UI",sans-serif;font-weight:900;color:#f4f1e8;font-size:calc(var(--w)/10.5);line-height:1;margin-bottom:.3em;letter-spacing:-.01em}
.strap-logo{position:relative;display:block;padding-right:12%}
.strap-logo img{display:block;width:100%;height:auto}
.strap-q{position:absolute;right:0;top:0;font-family:"Arial Black","Segoe UI",sans-serif;font-weight:900;color:#fff;font-size:calc(var(--w)/5);line-height:1}

/* header lockup sizing */
.strap-head{--w:min(64vw,230px);padding:6px 0;margin-right:0}
@media(min-width:992px){.strap-head{--w:300px}}

.schedule-slot{min-height:200px}

img.news-img{display:block;width:100%;object-fit:cover}

.station .np{min-height:3rem}

.player-grid{display:grid;gap:1rem}

/* single station picker */
.pick{display:flex;align-items:center;justify-content:center;width:100%;height:84px;padding:12px;background:var(--tile);border:3px solid transparent;border-radius:.75rem;cursor:pointer;opacity:.65}
.pick img{max-width:100%;max-height:100%}
.pick.active{border-color:var(--accent);opacity:1}
.pick:hover{opacity:1}
/* footer social icons */
.social a{color:#9a9aa5}.social a:hover{color:#fff}

/* black logo tiles: station-coloured borders */
.pick{background:#000;border-color:var(--accent);opacity:.6}
.pick.active{opacity:1;box-shadow:0 0 14px var(--accent)}
/* article */
.article-body p{font-size:1.1rem;line-height:1.75;color:#d0d0d6}
.article-body blockquote{border-left:4px solid var(--rock);padding-left:1rem;font-size:1.25rem}
/* black logo tiles */

/* schedules page station tiles */
.spick{display:flex;align-items:center;justify-content:center;width:100%;height:84px;padding:12px;background:#000;border:3px solid var(--accent);border-radius:.75rem;cursor:pointer;opacity:.6}
.spick img{max-width:100%;max-height:100%}
.spick:hover,.spick.active{opacity:1}
.spick.active{box-shadow:0 0 14px var(--accent)}

/* blog archives */
.js-year.active{background-color:var(--rock)!important;border-color:var(--rock)!important;color:#fff}

/* listen again station tiles */
.lpick{display:flex;align-items:center;justify-content:center;width:100%;height:84px;padding:12px;background:#000;border:3px solid var(--accent);border-radius:.75rem;cursor:pointer;opacity:.6}
.lpick img{max-width:100%;max-height:100%}
.lpick:hover,.lpick.active{opacity:1}
.lpick.active{box-shadow:0 0 14px var(--accent)}
.flex-none{flex:none}

/* Rock red #C91F3A across Bootstrap's danger colour */
:root{--bs-danger:#c91f3a;--bs-danger-rgb:201,31,58}
.btn-danger{--bs-btn-bg:#c91f3a;--bs-btn-border-color:#c91f3a;--bs-btn-hover-bg:#ad1a32;--bs-btn-hover-border-color:#a3182f;--bs-btn-active-bg:#a3182f;--bs-btn-active-border-color:#9a162c;--bs-btn-disabled-bg:#c91f3a;--bs-btn-disabled-border-color:#c91f3a}
.text-danger{color:#c91f3a!important}
/* video thumbnail cards */
.video-thumb{position:relative;aspect-ratio:16/9;background:#000}
.play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding-left:4px;color:#fff;font-size:1.25rem}
.video-card:hover .play-badge{background:var(--rock)}

.hero h1{color:#fff}
.hero h1 span{color:var(--rock)}

/* ===== section headings with a red sweep ===== */
.snazzy-head{display:inline-block}
.snazzy-head::after{content:"";display:block;height:4px;width:60%;margin-top:.4rem;background:linear-gradient(90deg,var(--rock),transparent)}

/* ===== artists carousel (auto-rotating, loops, swipeable) ===== */
.artists-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.6rem 0 1rem}
.artists-track::-webkit-scrollbar{display:none}
.artist{flex:0 0 82%;scroll-snap-align:start}
@media(min-width:576px){.artist{flex-basis:calc((100% - 1rem)/2)}}
@media(min-width:992px){.artist{flex-basis:calc((100% - 2rem)/3)}}
.artist a{position:relative;display:block;overflow:hidden;border-radius:.85rem;border:2px solid #2a2a30;box-shadow:0 10px 24px rgba(0,0,0,.45);transition:transform .25s,box-shadow .25s,border-color .25s}
.artist a:hover,.artist a:focus-visible{transform:translateY(-4px);border-color:var(--rock);box-shadow:0 0 0 1px var(--rock),0 0 26px rgba(201,31,58,.55)}
.artist img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.artist a:hover img{transform:scale(1.06)}
.artist-name{position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .6rem;background:linear-gradient(transparent,rgba(0,0,0,.9));font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:1.2rem;color:#fff}
.artist-name i{color:var(--rock);margin-right:.35rem;font-size:1rem}
.cdots{display:flex;justify-content:center;gap:.5rem;margin-top:.25rem}
.cdots button{width:10px;height:10px;border-radius:50%;border:0;background:#4a4a54;padding:0;transition:all .25s}
.cdots button.on{background:var(--rock);width:26px;border-radius:6px}

/* ===== posters / adverts: 3D coverflow with ambient glow ===== */
.posters{position:relative;height:clamp(390px,72vw,580px);overflow:hidden;border-radius:1rem;background:#0b0b0d;border:1px solid #23232a;perspective:1400px}
.posters-glow{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background-size:cover;background-position:center;filter:blur(60px) saturate(1.5);opacity:.5}
.posters-stage{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;outline:none}
.poster{position:absolute;top:5%;left:50%;height:90%;display:block;border-radius:.6rem;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.6);
 transform:translateX(-50%) translateX(calc(var(--o,0)*58%)) rotateY(calc(var(--o,0)*-16deg)) scale(calc(1 - var(--a,0)*.16));
 opacity:calc(1 - var(--a,0)*.4);z-index:calc(10 - var(--a,0));transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s,box-shadow .7s;cursor:pointer}
.poster img{display:block;height:100%;width:auto;max-width:none;-webkit-user-drag:none;user-select:none}
.poster.off{opacity:0;pointer-events:none}
.poster.active{box-shadow:0 0 0 2px var(--rock),0 0 40px rgba(201,31,58,.55),0 24px 50px rgba(0,0,0,.7)}
.pbtn{position:absolute;top:50%;margin-top:-22px;z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid #666;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.pbtn:hover{background:var(--rock);border-color:var(--rock)}
.pbtn.prev{left:.75rem}.pbtn.next{right:.75rem}
.posters-caption{text-align:center;margin-top:1.1rem}
@media(prefers-reduced-motion:reduce){.poster,.artist a,.artist img{transition:none}}

/* ===== About ===== */
.about-card{border-radius:.85rem;overflow:hidden;border:2px solid #2a2a30;box-shadow:0 14px 34px rgba(0,0,0,.5);transition:transform .25s,border-color .25s,box-shadow .25s}
.about-card:hover,.about-card:focus-visible{transform:translateY(-4px);border-color:var(--rock);box-shadow:0 0 0 1px var(--rock),0 0 28px rgba(201,31,58,.5)}
.about-card img{display:block;height:auto}

/* ===== Merch ===== */
.merch-cta{box-shadow:0 0 0 0 rgba(201,31,58,.6);animation:merchpulse 2.4s infinite}
@keyframes merchpulse{70%{box-shadow:0 0 0 16px rgba(201,31,58,0)}100%{box-shadow:0 0 0 0 rgba(201,31,58,0)}}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 70s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.merch-tile{position:relative;flex:none;display:block;width:190px;height:190px;margin-right:1rem;border-radius:.85rem;overflow:hidden;border:2px solid #2a2a30;background:#111;transition:border-color .25s,box-shadow .25s,transform .25s}
@media(min-width:768px){.merch-tile{width:250px;height:250px}}
.merch-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.merch-tile:hover,.merch-tile:focus-visible{border-color:var(--rock);box-shadow:0 0 24px rgba(201,31,58,.6);transform:translateY(-4px)}
.merch-tile:hover img{transform:scale(1.08)}
.shop-tag{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .55rem;background:linear-gradient(transparent,rgba(0,0,0,.9));font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff;opacity:0;transform:translateY(8px);transition:all .25s}
.merch-tile:hover .shop-tag,.merch-tile:focus-visible .shop-tag{opacity:1;transform:none}
.merch-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--rock);color:#fff;font-size:1.3rem;margin-bottom:1rem;box-shadow:0 0 18px rgba(201,31,58,.5)}
.merch-card{border-top:4px solid var(--rock)!important;transition:transform .25s}
.merch-card:hover{transform:translateY(-4px)}
.merch-band{border-radius:1rem;color:#fff;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 40%),linear-gradient(135deg,#7d1223,var(--rock) 55%,#e8445d)}
@media(prefers-reduced-motion:reduce){.marquee-track,.merch-cta{animation:none}.marquee{overflow-x:auto}.about-card,.merch-tile,.merch-card{transition:none}}

/* about: one readable column */
.about-stack{max-width:820px}
/* footer station logos */
.footer-logos img{height:34px;width:auto;opacity:.9;transition:opacity .2s,transform .2s}
.footer-logos img:hover{opacity:1;transform:translateY(-2px)}
@media(min-width:768px){.footer-logos img{height:40px}}

/* sticky header */
html{scroll-padding-top:5.5rem}
.navbar.sticky-top{box-shadow:0 6px 18px rgba(0,0,0,.55)}
/* text panel (About, Privacy): one column, left aligned, big and readable on phones */
.doc-panel{max-width:860px;margin:0 auto}
.doc-panel,.doc-panel p,.doc-panel li{text-align:left}
.doc-panel p,.doc-panel li{font-size:1.2rem;line-height:1.75;color:#d0d0d6}
.doc-panel li{margin-bottom:.5rem}
.doc-panel h2{font-family:"Segoe UI",system-ui,Arial,sans-serif;font-weight:700;font-size:1.5rem;color:#fff;margin:2rem 0 .75rem}
.doc-panel h2:first-child{margin-top:0}
.doc-panel a{color:#fff}
@media(min-width:768px){.doc-panel p,.doc-panel li{font-size:1.1rem;line-height:1.7}}

/* ===== reel-to-reel tape deck (index-2) ===== */
.deck-wrap{max-width:860px;margin:0 auto}
.deck-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.deck .acc-stroke{stroke:var(--accent)}
.deck .acc-fill{fill:var(--accent)}
.deck .deck-name{fill:var(--accent);font-family:Impact,"Arial Black",sans-serif;letter-spacing:.08em}
.deck .led{filter:drop-shadow(0 0 4px var(--accent))}
.deck .spin{transform-box:view-box;transform-origin:0 0;animation:reelspin 9s linear infinite}
.deck .spin.fast{animation-duration:5s}
.deck.loading .spin{animation-duration:.7s}
@keyframes reelspin{to{transform:rotate(-360deg)}}
.deck .reel-swap{transform-box:view-box;transform-origin:0 0}
.deck.loading .reel-swap{animation:reelswap .85s ease-in-out}
@keyframes reelswap{0%{transform:none;opacity:1}38%{transform:translateX(-70px) scale(.8);opacity:0}39%{transform:translateX(70px) scale(.8);opacity:0}100%{transform:none;opacity:1}}
.deck .needle{transform-box:view-box;transform-origin:400px 124px;animation:vu 1.1s ease-in-out infinite alternate}
@keyframes vu{0%{transform:rotate(-40deg)}25%{transform:rotate(8deg)}55%{transform:rotate(-18deg)}80%{transform:rotate(26deg)}100%{transform:rotate(-6deg)}}
.reel-rack{max-width:860px;margin:0 auto}
.reel-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.45rem;width:100%;padding:.8rem .5rem .7rem;background:#000;border:3px solid var(--accent);border-radius:.85rem;cursor:pointer;opacity:.6;transition:opacity .2s,transform .2s,box-shadow .2s}
.reel-btn .mini{width:72px;height:72px}
.reel-btn .acc-stroke{stroke:var(--accent)}
.reel-btn img{height:26px;width:auto;max-width:90%}
.reel-btn:hover,.reel-btn:focus-visible{opacity:1;transform:translateY(-3px)}
.reel-btn.active{opacity:1;box-shadow:0 0 18px var(--accent)}
.reel-btn .mini-spin{transform-box:view-box;transform-origin:0 0}
.reel-btn.active .mini-spin{animation:reelspin 5s linear infinite}
.reel-btn .loaded-tag{position:absolute;top:.45rem;right:.55rem;font-size:.62rem;font-weight:800;letter-spacing:.08em;color:var(--accent);opacity:0}
.reel-btn.active .loaded-tag{opacity:1}
.reel-btn.picked{animation:reelpop .5s}
@keyframes reelpop{40%{transform:translateY(-10px) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.deck .spin,.deck .needle,.reel-btn .mini-spin{animation:none}.deck.loading .reel-swap,.reel-btn.picked{animation:none}}

/* deck: reels only turn while playing; buttons are real controls */
.deck:not(.is-playing) .spin{animation-play-state:paused}
.deck:not(.is-playing) .needle{animation:none;transform:rotate(-40deg)}
.deck:not(.is-playing) .led{opacity:.35}
.deck.loading .spin{animation-play-state:running}
.reel-rack:not(.is-playing) .reel-btn.active .mini-spin{animation:none}
.deck-btn{cursor:pointer;outline:none}
.deck-btn rect{transition:fill .15s}
.deck-btn:hover rect{fill:#34343b}
.deck-btn:active rect{fill:#444}
.deck-btn:focus-visible rect{stroke:#fff;stroke-width:3}
.deck.is-playing #deckPlay rect{fill:var(--accent)}
.deck.is-playing #deckPlay text{fill:var(--on)}

/* home: app call to action */
.app-cta{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;justify-content:space-between;padding:1.5rem 1.75rem;border-radius:1rem;
  background:linear-gradient(120deg,var(--accent) 0%,#7a0b0b 100%);color:#fff;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.35)}
.app-cta-text{flex:1 1 22rem}
.app-cta h2{margin:0 0 .35rem;font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:800;color:#fff}
.app-cta p{margin:0;color:rgba(255,255,255,.9)}
.app-cta .app-cta-kicker{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:.25rem}
.app-cta-buttons{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;flex:0 1 auto}
.app-cta-buttons .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:500}
.app-cta-buttons .btn.btn-light{color:#111}
.app-cta-buttons .btn i{font-size:1.4rem}
.app-cta-more{flex-basis:100%;color:#fff;text-decoration:underline;font-weight:600}
@media(max-width:575px){.app-cta{padding:1.25rem}.app-cta-buttons .btn{flex:1 1 100%;justify-content:center}}

/* article: same panel as About, but full width */
.doc-panel.doc-wide{max-width:none}
.doc-panel .article-body p{font-size:1.2rem}
@media(min-width:768px){.doc-panel .article-body p{font-size:1.15rem}}
.doc-panel h1{text-align:left}
.doc-panel .blockquote{font-size:1.25rem}
/* desktop hero: radio sits right beside the strap line (real element so it tracks the text, not the window) */
@media(min-width:1200px){
 .hero-text{background-image:none;background-color:#0d0d0f;overflow:hidden}
 .hero-text .hero{position:relative}
 .hero-text .hero::after{content:'';position:absolute;left:660px;top:-3rem;bottom:-3rem;width:520px;pointer-events:none;
  background:url("img/backgrounds/hero-radio.jpg") center/auto 135% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
}


/* header clock */
.uk-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-variant-numeric:tabular-nums;color:#c8c8d0;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.uk-clock .uk-time{color:#fff;font-weight:700;font-size:.85rem}
@media(min-width:992px){.uk-clock{align-items:flex-start;padding-left:.9rem;border-left:1px solid #2a2a30}}
/* Ko-fi button */
.btn-kofi{background:#ff5e5b;border-color:#ff5e5b;color:#fff;font-weight:700}
.btn-kofi:hover,.btn-kofi:focus-visible{background:#e24b48;border-color:#e24b48;color:#fff}

/* station logos: trimmed files, identical height so Metal matches the others */
.pick img{width:100%;height:100%;object-fit:contain}
.reel-btn img{height:26px;width:auto}

/* main menu: never wrap a menu item onto two lines */
.navbar .nav-link{white-space:nowrap}
@media(min-width:992px) and (max-width:1199.98px){.navbar .nav-link{padding-left:.5rem;padding-right:.5rem;font-size:.9rem}.uk-clock{display:none}}

/* ===== deck v3 (index-3): photo background, real reels turned about their hubs ===== */
.deck-photo{border-radius:1.1rem;overflow:hidden;background:#0a0504;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.deck-photo .deck-svg{filter:none}
.deck-photo .spin{animation-duration:6s}
.deck-photo .spin.fast{animation-duration:4s}
.deck-photo .hub-tint{fill:var(--accent);mix-blend-mode:color;opacity:.9}
.deck-photo .rec-glow{fill:#ff2a1d;opacity:0;filter:blur(7px)}
.deck-photo.is-playing .rec-glow{opacity:.85;animation:recpulse 1.4s ease-in-out infinite alternate}
@keyframes recpulse{from{opacity:.45}to{opacity:.95}}
.deck-hit{cursor:pointer;outline:none}
.deck-hit rect{fill:transparent;stroke:transparent;stroke-width:4}
.deck-hit:hover rect{fill:rgba(255,255,255,.12);stroke:var(--accent)}
.deck-hit:focus-visible rect{stroke:#fff}
.deck-photo.is-playing #deckPlayHit rect{stroke:var(--accent)}
@media(prefers-reduced-motion:reduce){.deck-photo .rec-glow{animation:none}}
/* Home sub-menu: opens on hover on desktop */
.navbar .dropdown-menu{border:1px solid #2a2a30;background:#0d0d0f}
@media(min-width:992px){.navbar .dropdown:hover>.dropdown-menu{display:block;margin-top:0}}

/* listen-again hero: tape deck photo instead of the radio (same placement) */
.hero-text.hero-deck{background-color:#0d0d0f;background-image:linear-gradient(90deg,#0d0d0f 0%,rgba(13,13,15,.85) 45%,rgba(13,13,15,.2) 100%),url("img/backgrounds/hero-deck.jpg");background-size:100% 100%,auto 100%;background-position:center,right center;background-repeat:no-repeat}
@media(min-width:1200px){
 .hero-text.hero-deck{background-image:none}
 .hero-text.hero-deck .hero::after{background:url("img/backgrounds/hero-deck.jpg") center/auto 92% no-repeat}
}

/* hero v3: new radio photo (25% smaller), strap line smaller and on one line */
.hero-line,.hero-text h1.display-1{font-size:calc(.9rem + 3.2vw);white-space:nowrap}
.hero-sm .hero-line{font-size:calc(.85rem + 2.6vw)}
@media(min-width:1200px){.hero-line,.hero-text h1.display-1{font-size:3rem}.hero-sm .hero-line{font-size:2.5rem}}
.hero-text{background-image:linear-gradient(90deg,#0d0d0f 0%,rgba(13,13,15,.85) 50%,rgba(13,13,15,.15) 100%),url("img/backgrounds/hero-radio2.jpg");background-size:100% 100%,auto 78%;background-position:center,right 3% center;background-repeat:no-repeat;background-color:#0d0d0f}
@media(min-width:1200px){
 .hero-text{background-image:none}
 .hero-text .hero::after{mix-blend-mode:lighten;left:720px;top:50%;bottom:auto;height:200px;width:300px;transform:translateY(-50%);background:url("img/backgrounds/hero-radio2.jpg") center/contain no-repeat;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%)}
}

@media(min-width:1200px){.hero-text.hero-deck .hero::after{top:-3rem;bottom:-3rem;height:auto;width:520px;transform:none;background:url("img/backgrounds/hero-deck.jpg") center/auto 92% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}}

@media(min-width:1200px){.hero-text.hero-deck .hero::after{mix-blend-mode:lighten}}

/* player nudge after pressing play on the deck */
.player-panel.nudge #playerEmbed{border-radius:.75rem;box-shadow:0 0 0 2px var(--accent),0 0 22px var(--accent);animation:nudgepulse 1.2s ease-in-out infinite alternate}
@keyframes nudgepulse{from{box-shadow:0 0 0 2px var(--accent),0 0 8px var(--accent)}to{box-shadow:0 0 0 2px var(--accent),0 0 26px var(--accent)}}
@media(prefers-reduced-motion:reduce){.player-panel.nudge #playerEmbed{animation:none}}
/* hero radio: bigger on desktop */
@media(min-width:1200px){
 .hero-text .hero::after{left:690px;height:300px;width:420px}
 .hero-text.hero-sm .hero::after{height:210px;width:300px}
}

/* ===== index-3 hero: reel-to-reel tape (img/backgrounds/hero-reel.jpg, 1040x590) in place of the radio =====
   Mobile first. The band height is one variable (--reel-h) and the image width follows it at the
   photo's own ratio, so the reels scale with the screen and are never stretched or cropped oddly.
   This block overrides every earlier .hero-text radio rule for pages using .hero-reels only. */
.hero-text.hero-reels{--reel-h:clamp(150px,22vw,330px);padding:0;min-height:0;background:#0d0d0f;overflow:hidden}
.hero-text.hero-reels .hero{position:relative;display:flex;align-items:center;min-height:var(--reel-h)}
.hero-text.hero-reels .hero>*{position:relative;z-index:1}
.hero-text.hero-reels h1.display-1{font-size:min(calc(.9rem + 3.2vw),6.8vw)} /* never wider than a small phone */
@media(min-width:1200px){.hero-text.hero-reels h1.display-1{font-size:3rem}}
.hero-text.hero-reels .hero::after{content:'';position:absolute;z-index:0;top:0;bottom:0;right:0;left:auto;
 width:calc(var(--reel-h) * .955);max-width:100%;height:auto;transform:none;mix-blend-mode:normal;pointer-events:none;
 background:linear-gradient(90deg,rgba(13,13,15,.92) 0%,rgba(13,13,15,.7) 50%,rgba(13,13,15,.15) 100%),url("img/backgrounds/hero-reel.jpg") right center/cover no-repeat;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
/* wider screens: text and reels sit side by side, so only the left edge needs fading */
@media(min-width:1200px){
 .hero-text.hero-reels .hero::after{background:linear-gradient(90deg,rgba(13,13,15,.75) 0%,rgba(13,13,15,0) 40%),url("img/backgrounds/hero-reel.jpg") right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 92%,transparent)}
}

/* TelosCMS: news filters are links now, so the selected one is marked .active (was btn-danger in blog.js) */
.news-filter.active{color:#fff;background-color:var(--bs-danger);border-color:var(--bs-danger)}
/* TelosCMS: items without their own image show the logo (Settings: DefaultImageUrl, else LogoUrl) whole, on the brand gradient */
img.thumb-false{object-fit:contain;padding:1.75rem 2.25rem;background:linear-gradient(135deg,#3a1018,#101018 60%,#1c2a44)}
.article-img.thumb-false{height:260px;padding:2.5rem}
/* TelosCMS: form honeypot field, kept off-screen (not display:none, which some bots skip) */
.form-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* TelosCMS: cookie consent banner (analytics.js) */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1080;background:rgba(0,0,0,.95);border-top:2px solid var(--bs-danger);color:#eee;box-shadow:0 -6px 24px rgba(0,0,0,.5)}
.cookie-banner[hidden]{display:none}/* Tables from the admin editor: styled with Bootstrap's .table classes (setting EditorTableStyles);
   .table-scroll lets wide tables scroll sideways on phones */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem}
.table-scroll>.table{margin-bottom:0}
.article-body .table,.doc-panel .table{font-size:1rem}
.table-chart{--bs-table-striped-bg:rgba(220,38,38,.08)}
.table-chart thead th{color:#fff;border-bottom:2px solid var(--rock,#dc2626);text-transform:uppercase;letter-spacing:.04em;font-size:.85rem}

/* Announcement bar (templates: Header partial; settings Announcement*) */
.announcement-bar{background:var(--rock,#dc2626);color:#fff;text-align:center;padding:.5rem 1rem;font-weight:600;font-size:.95rem}
.announcement-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.announcement-bar a:hover{color:#fff;opacity:.85}

/* Site search (/search) */
.search-form{display:flex;gap:.5rem;max-width:36rem;margin:0 0 1rem}
.search-form input{flex:1;min-width:0;padding:.65rem .9rem;border-radius:.4rem;border:1px solid #555;background:#1c1c22;color:#fff;font-size:1.05rem}
.search-form input:focus{outline:2px solid #c91f3a;outline-offset:1px}
.search-form button{padding:.65rem 1.2rem;border:0;border-radius:.4rem;background:#c91f3a;color:#fff;font-weight:700}
.search-form button:hover{background:#ad1a32}
.search-summary{color:#b8b8c0}
.search-results{list-style:none;padding:0;margin:1.5rem 0}
.search-result{padding:1.1rem 0;border-bottom:1px solid #333}
.search-result__title{font-size:1.3rem;margin:0 0 .2rem}
.search-result__title a{color:#fff;text-decoration:none}
.search-result__title a:hover{color:#ff6b81;text-decoration:underline}
.search-result__meta{font-size:.85rem;color:#9a9aa5;margin:0 0 .4rem}
.search-result__snippet{margin:0;color:#d0d0d6;line-height:1.6}
.search-results mark{background:#c91f3a;color:#fff;padding:0 .15em;border-radius:.2em}
.search-pager{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-top:1rem}
.search-pager a{color:#ff6b81}

/* Share buttons under articles ({{{share.buttons}}}) */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;border-top:1px solid #333;padding-top:1rem;margin-top:2rem}
.share__label{color:#9a9aa5;margin-right:.25rem}
.share__btn{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border:1px solid #444;border-radius:999px;background:transparent;color:#e6e6ea;font-size:.9rem;text-decoration:none;cursor:pointer}
.share__btn:hover,.share__btn:focus-visible{background:#c91f3a;border-color:#c91f3a;color:#fff;outline:none}
.share__btn[hidden]{display:none}
@media (max-width:575.98px){.share__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.share__btn{padding:.55rem .75rem;font-size:1.05rem}}

/* ---- Schedules (drawn from RadioCult by /js/schedules.js) ---- */
.sch{--ink:#f4f1ea;--mute:#a8a39a;display:flex;flex-direction:column;gap:20px;font-family:'Barlow',system-ui,sans-serif}
.sch-when{font-size:1rem;color:var(--mute)}
.sch-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;background:#151517;border:1px solid #2a2a2e;border-radius:14px}
.sch-tab{flex:1 1 140px;min-height:48px;border:0;border-radius:10px;font-size:1.05rem;font-weight:700;background:transparent;color:#cfcac0;cursor:pointer}
.sch-tab.on{background:var(--ink);color:#0b0b0c}
.sch button:focus-visible,.sch a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.sch-cards{display:grid;grid-template-columns:1fr;gap:16px}
/* two across (so four stations make 2 x 2) from a tablet up, and all four in a row only on a wide screen: never three then one */
@media(min-width:640px){.sch-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1400px){.sch-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sch-card{display:flex;flex-direction:column;gap:14px;padding:18px;background:#121214;border:2px solid var(--c);border-radius:16px}
.sch-head{display:flex;align-items:center;gap:14px}
.sch-logo{flex:0 0 56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#000;border:2px solid var(--c);border-radius:12px;font-weight:700;font-size:1.35rem;color:var(--c)}
.sch-hname{display:flex;flex-direction:column;gap:4px;min-width:0}
.sch-name{font-size:1.25rem;font-weight:700;line-height:1.1}
.sch-meta{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--mute)}
.sch-live{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:700;letter-spacing:.1em;background:var(--c);color:var(--on)}
.sch-title{font-size:1.6rem;font-weight:700;line-height:1.15}
.sch-who{font-size:1rem;color:#cfcac0}
.sch-bar{height:6px;border-radius:3px;background:#2a2a2e;overflow:hidden}
.sch-bar>div{height:100%;background:var(--c)}
.sch-track,.sch-next{font-size:.95rem;color:var(--mute)}
.sch-track b,.sch-next b{color:var(--ink);font-weight:600}
.sch-soon{margin:0;color:var(--mute)}
.sch-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.sch-btn{flex:1 1 130px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:1.05rem;font-weight:600;background:transparent;color:var(--ink);border:2px solid #3a3a40;text-decoration:none;cursor:pointer}
.sch-btn--fill{background:var(--c);color:var(--on);border-color:var(--c);font-weight:700}
.sch-btn:hover{filter:brightness(1.12);color:inherit}
.sch-btn--fill:hover{color:var(--on)}
#schWeek{display:flex;flex-direction:column;gap:16px}
#schWeek[hidden],#schNow[hidden]{display:none}
.sch-chips{display:flex;flex-wrap:wrap;gap:8px}
.sch-chip{min-height:44px;padding:0 16px;border-radius:22px;font-size:1rem;font-weight:600;background:#000;color:var(--ink);border:2px solid var(--c);cursor:pointer}
.sch-chip.on{background:var(--c);color:var(--on)}
.sch-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sch-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:8px 0;border-radius:12px;background:#151517;color:var(--ink);border:2px solid #2a2a2e;cursor:pointer}
.sch-day.today{border-color:var(--ink)}
.sch-day.on{background:var(--ink);color:#0b0b0c;border-color:var(--ink)}
.sch-day span{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sch-day b{font-size:1.25rem;line-height:1}
.sch-heading{font-weight:700;font-size:1.6rem;padding-top:4px}
.sch-rows{display:flex;flex-direction:column;gap:8px}
.sch-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px;border-radius:12px;border-left:5px solid var(--c);background:#121214}
.sch-row.live{background:#1d1d20}
.sch-row.past{opacity:.5}
.sch-start{flex:0 0 64px;width:64px;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.sch-what{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0}
.sch-rtitle{font-size:1.15rem;font-weight:600;line-height:1.2}
.sch-rwho{font-size:.95rem;color:var(--mute)}
.sch-tags{display:flex;align-items:center;gap:8px}
.sch-tag{padding:3px 10px;border-radius:12px;font-size:.8rem;font-weight:600;background:#000;border:1px solid var(--c);color:var(--c)}
@media (max-width:480px){.sch-days{gap:4px}.sch-day{min-height:58px}}
.sch-player{border:2px solid var(--c,#c91f3a);border-radius:16px;background:#121214;padding:14px}
.sch-player[hidden]{display:none}
.sch-player-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.sch-player-head b{font-size:1.2rem;flex:1 1 auto}
.sch-player-head .sch-btn{flex:0 0 auto;min-height:40px;padding:0 18px}
.sch-player-note{margin:8px 0 0;font-size:.9rem;color:#a8a39a}

/* the tape deck picture, scaled down (the animation is the same) */
.deck-wrap{max-width:560px}
.sch-logo{flex:0 0 96px;width:96px;height:60px;padding:6px 8px;background:#000;border:2px solid var(--c);border-radius:12px;display:flex;align-items:center;justify-content:center}
.sch-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}

/* home: the tape deck sits beside the strapline in the header, turning all the time (faster while playing) */
.hero-deckrow{padding-top:.75rem;padding-bottom:.25rem}
.hero-strap h1 span{color:var(--rock)}
.hero-strap h1.display-1{font-size:min(7.4vw,2.6rem);font-size:min(6.8cqw,3.2rem);line-height:1.1;margin:0;white-space:nowrap}
@media(min-width:768px){.hero-strap h1.display-1{font-size:min(3.4vw,3.2rem);font-size:min(6.8cqw,3.2rem)}}
.hero-strap{container-type:inline-size;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hero-strap .strap-rock{height:.8em;width:auto;vertical-align:-.06em;margin:0 .06em 0 .02em}
.hero-deckrow .deck-wrap{max-width:360px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.hero-deckrow .deck-wrap{margin-right:0}}
.deck-photo:not(.is-playing) .spin{animation-play-state:running;animation-duration:22s}
.deck-photo:not(.is-playing) .spin.fast{animation-duration:15s}
.deck-photo.loading .spin{animation-duration:.7s!important}

/* schedules: the player and the station's chat room side by side */
.sch-player-body{display:grid;gap:14px}
@media(min-width:900px){.sch-player-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* interviews: a video thumbnail with a play mark */
.interview-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.interview-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.interview-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.65);border:2px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;padding-left:3px}
.interview-card:hover .interview-play{background:var(--rock,#c91f3a)}

/* the way back to a listing from an item page (item.listUrl) */
.crumb{margin:0 0 .75rem;font-size:.95rem}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* Magazines: a shelf of covers (portrait, 3:4, a picture about 600 x 800 looks best) that scrolls sideways */
.mag-carousel{position:relative}
.mag-track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.75rem .25rem 1.25rem;scrollbar-width:thin;scroll-padding:0 .25rem;outline-offset:4px}
.mag-slide{flex:0 0 clamp(150px,22vw,210px);scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem;color:inherit;text-decoration:none}
.mag-cover{display:block;aspect-ratio:3/4;border-radius:.4rem;overflow:hidden;background:#1d1d22;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.45);transition:transform .2s ease,box-shadow .2s ease}
.mag-cover img{display:block;width:100%;height:100%;object-fit:cover}
.mag-slide:hover .mag-cover,.mag-slide:focus-visible .mag-cover{transform:translateY(-6px);box-shadow:0 1rem 1.8rem rgba(0,0,0,.6)}
.mag-title{font-weight:700;line-height:1.25}
.mag-date{font-size:.85rem;opacity:.7}
.mag-nav{position:absolute;top:38%;z-index:2;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 .2rem .6rem rgba(0,0,0,.4)}
.mag-nav:hover:not(:disabled),.mag-nav:focus-visible{background:var(--rock,#d62828);outline:none}
.mag-nav:disabled{opacity:.25;cursor:default}
.mag-prev{left:-.4rem}.mag-next{right:-.4rem}
.mag-fits .mag-nav{display:none}
@media(max-width:575px){.mag-nav{display:none}.mag-slide{flex-basis:44vw}}
.mag-latest .te{margin:0}
@media(prefers-reduced-motion:reduce){.mag-cover{transition:none}}

/* the strapline on every page: the ROCK wordmark sits in the line like a word (same as the home page's .hero-strap) */
.hero-line .strap-rock{height:.8em;width:auto;vertical-align:-.06em;margin:0 .06em 0 .02em}

/* Pagination (news, interviews, search): RRUK red instead of Bootstrap blue */
.pagination{--bs-pagination-color:#ff6b80;--bs-pagination-hover-color:#fff;--bs-pagination-hover-bg:var(--rock);--bs-pagination-hover-border-color:var(--rock);--bs-pagination-focus-color:#fff;--bs-pagination-focus-bg:var(--rock);--bs-pagination-focus-box-shadow:0 0 0 .25rem rgba(201,31,58,.35);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:var(--rock);--bs-pagination-active-border-color:var(--rock)}
.search-pager a.is-current,.search-pager [aria-current="page"]{background:var(--rock);border-color:var(--rock);color:#fff}
.mag-reads{display:inline-block;font-weight:700;font-size:.9rem;padding:.15rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.mag-badge{position:absolute;top:.5rem;left:.5rem;background:var(--rock,#d62828);color:#fff;font-weight:700;font-size:.75rem;padding:.1rem .5rem;border-radius:.3rem}
.mag-cover{position:relative}
.mag-viewer .te{margin:0}

.ask-line{background:#0f0f12;border:2px solid var(--accent,#2a2a30);border-radius:1rem;color:inherit;transition:box-shadow .25s,transform .25s}
.ask-line .ask-go{color:var(--accent,var(--rock))}
.ask-line:hover,.ask-line:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px var(--accent,var(--rock)),0 0 24px rgba(255,255,255,.12)}
.ask-mark{display:flex;align-items:center;justify-content:center;width:88px;height:54px;padding:6px 8px;margin-bottom:.75rem;background:#000;border:2px solid var(--accent,#2a2a30);border-radius:12px}
.ask-mark img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.ask-station{background:#0f0f12;border:2px solid var(--accent);border-radius:1rem;padding:1.25rem;height:100%}
.ask-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.ask-head .ask-mark{margin-bottom:0;flex:none}
.ask-go-btn{background:var(--accent);color:var(--on);border:0;font-weight:700;width:100%}
.ask-go-btn:hover{color:var(--on);filter:brightness(1.1)}
.ask-go-btn.disabled{opacity:.4}
.ask-station .form-select{font-size:.9rem}
.ask-station .form-select option{font-size:.9rem}
.ask-steps{padding-left:1.25rem;max-width:46rem}
.ask-steps li{margin-bottom:.5rem}
.ask-steps strong{color:#fff}

/* ===== hero banner: one picture (img/backgrounds/hero-banner.jpg, 2000 x 650) replaces the text hero and the animated tape deck on every page; it simply scales with the window ===== */
.hero-banner{background:#0d0d0f;line-height:0}
.hero-banner__img{display:block;width:100%;height:auto;max-width:2000px;margin:0 auto}
/* Metal's own player and schedule list on the home page (LibreTime feed; the accent colour comes from the station class on the panel) */
.own-player,.own-sched{background:#16161a;border:1px solid #2b2b33;border-radius:.75rem;padding:1rem}
.own-player{display:flex;flex-direction:column;gap:.6rem}
.own-player__now{font-size:1.15rem;font-weight:700;line-height:1.25}
.own-player__live{display:inline-block;margin-right:.6rem;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:800;letter-spacing:.1em;background:var(--accent);color:var(--on)}
.own-player__track{min-height:1.2em;font-size:.95rem;color:#c9c9d1}
.own-player audio{width:100%}
.own-player__note{margin:0;font-size:.85rem;color:#9a9aa5}
.own-sched h3{margin:0 0 .75rem;font-size:1rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.own-sched ul{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}
.own-sched li{display:flex;align-items:baseline;gap:.75rem;padding:.55rem .75rem;border-left:4px solid var(--accent);border-radius:.5rem;background:#121214}
.own-sched li.live{background:#1d1d20}
.own-sched time{flex:0 0 5.4rem;font-variant-numeric:tabular-nums;color:#a8a39a}
.own-sched small{display:block;color:#cfcac0}
.own-sched__live{align-self:center;margin-left:auto;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:800;letter-spacing:.1em;background:var(--accent);color:var(--on)}
.own-sched .more{display:inline-block;margin-top:.75rem;font-weight:700;color:var(--accent)}
/* on wide screens the picture lines up with the logo and the end of the menu (the page container's content width, Bootstrap's 1140 and 1320 less 24px padding) */
@media(min-width:1200px){.hero-banner__img{max-width:1116px}}
@media(min-width:1400px){.hero-banner__img{max-width:1296px}}