/* ============================================================
   KISS 104.9 FM · v3 · site.css
   James K's mock structure (logo left, LIVE pill + menu right,
   hero copy at the top, two big buttons, studio block, the now
   playing card, compact schedule, round DJ avatars,
   the mock's sticky bar) in the APEX language: Saira condensed
   caps, chamfered plates, 4px radius, hairlines, one red.
   ============================================================ */
@font-face{font-family:'KDisplay';src:url('fonts/apex-display.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'KMedium';src:url('fonts/apex-medium.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'KBody';src:url('fonts/apex-body.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'KBody';src:url('fonts/apex-body-bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#07070a; --surface:#0b0b0f; --panel:#111117; --panel-2:#171720;
  --ink:#eef0f4; --ink-dim:#a3a8b3; --ink-faint:#858a94;
  --accent:#ff2038; --accent-rgb:255,32,56; --accent-soft:#ff6474; --on-accent:#fff; --btn:#e6132b;   /* --btn = the red under white text (4.67:1); --accent alone is 3.8:1 */
  --line:#262631; --hair:rgba(255,255,255,.1);
  --display:'KDisplay',sans-serif; --med:'KMedium',sans-serif; --sans:'KBody',sans-serif;
  --r:6px; --bar:78px; --wrap:min(1120px,92vw); --stack:min(760px,92vw); --gap:16px; --sec:56px;
  --chamfer:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;text-align:center;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.wrap{width:var(--wrap);margin-inline:auto}
[id]{scroll-margin-top:84px}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em}
.red{color:var(--accent)}
.rdot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none;display:inline-block;position:relative}
.rdot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--accent);animation:ring 1.8s ease-out infinite;will-change:transform,opacity}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.hidden{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--med);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 30px;background:var(--btn);color:var(--on-accent);border:none;cursor:pointer;border-radius:0;
  clip-path:var(--chamfer);transition:transform .15s ease,background .2s ease;white-space:nowrap}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
@media (hover:hover){.btn:hover{background:var(--accent-soft)}}
.btn:active{transform:translateY(1px) scale(.985)}
.link-btn{background:none;border:none;padding:0;cursor:pointer;font-family:var(--med);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.link-btn:hover{color:var(--accent-soft)}

/* ---------- header: logo left, nav centre (desktop), LIVE pill + burger right ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:80;height:68px;background:rgba(7,7,10,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair);transition:transform .28s ease,opacity .28s ease}
.hdr.hide{transform:translateY(-100%);opacity:0}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand img{height:42px;width:auto}
.nav{display:none}
.hdr-right{display:flex;align-items:center;gap:10px}
.livepill{display:inline-flex;align-items:center;gap:9px;font-family:var(--med);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);background:rgba(7,7,10,.5);border:1.5px solid var(--accent);padding:10px 16px;white-space:nowrap;clip-path:var(--chamfer);transition:background .2s,color .2s}
@media (hover:hover){.livepill:hover{background:rgba(var(--accent-rgb),.14)}}
body.playing .livepill{background:var(--btn);color:#fff}
body.playing .livepill .rdot{background:#fff;box-shadow:none}
body.playing .livepill .rdot::after{display:none}
.burger{display:flex;flex-direction:column;gap:5px;padding:8px 4px 8px 8px;background:none;border:none;cursor:pointer}
.burger i{display:block;height:2px;border-radius:2px;background:var(--ink);width:24px;margin-left:auto}
.burger i:nth-child(3){width:14px;background:var(--accent)}
@media (min-width:900px){
  .burger{display:none}
  .nav{display:flex;gap:30px}
  .nav a{font-family:var(--med);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);padding:6px 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
  .nav a:hover{color:var(--ink);border-color:var(--accent)}
}

/* ---------- menu overlay (phones) ---------- */
.menu{position:fixed;inset:0;z-index:90;background:#050507;padding:16px 28px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease,visibility .28s}
.menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:52px}
.menu-top img{height:38px;width:auto}
.menu-close{background:none;border:none;padding:6px;cursor:pointer;margin-right:-6px}
.menu-close svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.menu-links{list-style:none;margin-block:auto;display:flex;flex-direction:column;gap:6px;text-align:left}
.menu-links a{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:38px;letter-spacing:.02em;line-height:1.25;color:var(--ink);padding:4px 0;transition:color .2s}
.menu-links a:hover,.menu-links a:active{color:var(--accent)}
.menu-cta{align-self:flex-start;margin-top:12px}
.menu-foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:8px;text-align:left}
.menu-foot a{font-size:15px;color:var(--ink-dim)}
body.menu-open{overflow:hidden}

/* ---------- hero: copy at the TOP, two big buttons ---------- */
.hero{position:relative;overflow:hidden;background:#050507;padding:calc(68px + 26px) 0 34px;min-height:0}
@media (min-width:900px){.hero{padding-top:calc(68px + 64px);padding-bottom:56px}}
.hero .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.7}
.hero-video{opacity:0;transition:opacity .8s ease}
.hero-video.on{opacity:.85}
.hero-video{filter:saturate(.85) brightness(.9)}
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,6,12,.66) 0%,rgba(30,5,10,.52) 45%,rgba(7,7,10,.88) 100%)}
.hero .dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(var(--accent-rgb),.55) 1px,transparent 1.4px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 34%);mask-image:linear-gradient(90deg,#000 0%,transparent 34%);opacity:.55}
.hero .copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero h1{font-size:clamp(44px,8vw,84px);line-height:.94;color:#fff;max-width:12ch;text-wrap:balance;text-shadow:0 3px 18px rgba(0,0,0,.7)}
.hero h1 em{font-style:normal;color:var(--accent)}
.strap{display:inline-flex;align-items:center;gap:12px;font-family:var(--med);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-top:2px}
.strap i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.big{width:min(560px,100%);display:flex;flex-direction:column;gap:10px;margin-top:14px}
.btn-big{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;padding:8px 14px;min-height:52px;cursor:pointer;border:1.5px solid transparent;clip-path:var(--chamfer);text-align:left;transition:background .2s,border-color .2s,transform .15s}
.btn-big:active{transform:translateY(1px) scale(.99)}
.btn-big .ic{width:38px;height:22px;display:grid;place-items:center;justify-self:center}   /* one grid cell that always exists; the icons swap inside it */
.btn-big .ic svg{width:22px;height:22px;fill:currentColor}
.btn-big .ic .hidden{display:none}
.btn-big .tx{display:flex;flex-direction:column;line-height:1.05}
.btn-big .tx b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.03em}
.btn-big .tx small{font-family:var(--med);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.btn-big.primary{background:var(--btn);color:#fff;border-color:var(--btn)}
@media (hover:hover){.btn-big.primary:hover{background:var(--accent-soft)}}
.btn-big.ghost{background:rgba(7,7,10,.55);color:var(--ink);border-color:rgba(var(--accent-rgb),.65);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (hover:hover){.btn-big.ghost:hover{background:rgba(var(--accent-rgb),.12)}}
.wave-ic{display:inline-flex;align-items:center;gap:2px;height:20px;justify-self:center}
.wave-ic i{width:3px;height:7px;border-radius:2px;background:currentColor;opacity:.9}
.wave-ic i:nth-child(2){height:14px}.wave-ic i:nth-child(3){height:20px}.wave-ic i:nth-child(4){height:11px}.wave-ic i:nth-child(5){height:16px}
body.playing .wave-ic i{animation:wv .9s ease-in-out infinite alternate}
body.playing .wave-ic i:nth-child(2){animation-duration:.7s}body.playing .wave-ic i:nth-child(3){animation-duration:1.1s}body.playing .wave-ic i:nth-child(4){animation-duration:.8s}body.playing .wave-ic i:nth-child(5){animation-duration:1s}
@keyframes wv{from{height:6px}to{height:20px}}
@media (max-width:480px){.hero h1{font-size:clamp(42px,12.5vw,60px)}.hero{padding-top:calc(68px + 40px)}.strap{margin-block:10px 8px}}
@media (min-width:720px){.big{flex-direction:row;width:min(580px,100%)}.big .btn-big{flex:1 1 0}}

/* ---------- the card stack ---------- */
.stack{width:var(--stack);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:var(--gap);padding-block:var(--gap) calc(var(--gap) * 2)}
.card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--gap) var(--gap) 18px;text-align:left}
.card-head{display:flex;align-items:center;gap:10px;font-family:var(--med);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.card-head.between{justify-content:space-between}
.card-head em{font-style:normal}
.card-head h2{font:inherit;margin:0;letter-spacing:inherit;text-transform:inherit;color:inherit}
.wave-ic.red{color:var(--accent);height:16px}
.wave-ic.red i{height:5px}.wave-ic.red i:nth-child(2){height:11px}.wave-ic.red i:nth-child(3){height:16px}.wave-ic.red i:nth-child(4){height:9px}.wave-ic.red i:nth-child(5){height:13px}

/* kiss tv */
.tv-frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tv-frame iframe,.tv-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;
  background:radial-gradient(70% 80% at 50% 40%,rgba(var(--accent-rgb),.22),transparent 70%),linear-gradient(160deg,#141419,#0a0a0e)}
.tv-off img{height:52px;width:auto;opacity:.95}
.tv-off span{font-family:var(--med);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);max-width:34ch}

/* now playing row */
.np-row{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center}
.art{width:96px;height:96px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#1a1a22,#0e0e13);display:grid;place-items:center}
.art img{width:60%;height:60%;object-fit:contain}
.art.photo img{width:100%;height:100%;object-fit:cover}
.np-body{min-width:0}
.np-title{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(22px,4vw,28px);line-height:1;color:var(--ink);overflow-wrap:anywhere}
.np-artist{margin-top:4px;font-size:15px;color:var(--ink-dim)}
input[data-vol]{accent-color:var(--accent);cursor:pointer}
.np-show{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-family:var(--med);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.np-show b{color:var(--ink);font-weight:600}
@media (max-width:420px){.np-row{grid-template-columns:76px 1fr;gap:12px}.art{width:76px;height:76px}}

/* schedule: compact rows */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-block:-4px 12px}
.days button{font-family:var(--med);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);background:var(--panel-2);border:1.5px solid var(--line);padding:8px 0;text-align:center;cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.days button[aria-selected="true"]{color:#fff;background:var(--btn);border-color:var(--btn)}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:96px 1fr 56px;align-items:center;gap:12px;padding:10px 8px;border-top:1px solid var(--hair);position:relative}
.row:first-child{border-top:0}
.row .t{font-family:var(--med);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--accent);white-space:nowrap}
.row .s{font-weight:700;font-size:15px;color:var(--ink);line-height:1.2;min-width:0}
.row .s small{display:block;margin-top:2px;font-weight:400;font-size:12.5px;color:var(--ink-dim)}
.row .av{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(var(--accent-rgb),.7);background:var(--panel-2);justify-self:end}
.row .av.ini{display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px;color:var(--accent)}
.row.now{background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),transparent 70%)}
.row.now::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.row.now .n::after{content:"On now";display:inline-block;margin-left:8px;font-family:var(--med);font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--btn);padding:2px 7px;vertical-align:2px}
/* padding-INLINE 0 on purpose (Ashton, 07/09, phone screenshot): 6px left padding put this line
   6px right of the card's heading and its footnote, which reads as a stray indent */
.sched-empty{color:var(--ink-dim);padding:10px 0;font-size:14px}
.sched-note{margin-top:12px;font-size:12.5px;color:var(--ink-faint)}
@media (max-width:480px){.row{grid-template-columns:80px 1fr 50px;gap:10px;padding-inline:4px}.row .t{font-size:11px}.row .s{font-size:14px}.row .av{width:50px;height:50px}}

 /* djs: a CROSSFADE carousel (no scroll container): the strip is a positioned box whose height eases to the card
   on show; every card sits absolute at the same spot and only the .on card is visible. Swipe / arrows / face
   taps switch cards; there is no in-between position to land in. */
.dj-strip{position:relative;overflow:hidden;transition:height .3s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.dj-strip img{-webkit-user-drag:none}
.dj{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;opacity:0;visibility:hidden;transform:none;text-align:center;padding:26px 18px 24px;background:var(--panel-2);border:1px solid var(--hair);border-radius:var(--r);clip-path:var(--chamfer);transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s}
.dj.on{opacity:1;visibility:visible;transform:none;transition:opacity .32s ease,transform .32s ease}
.dj.in-r{transform:translateX(22px);transition:none}
.dj.in-l{transform:translateX(-22px);transition:none}
.dj.in{transition:none}
.dj.out-l{transform:translateX(-22px)}
.dj.out-r{transform:translateX(22px)}
@media (prefers-reduced-motion:reduce){.dj,.dj.on{transition:none;transform:none}.dj-strip{transition:none}}
.dj .ph,.dj-grid .ph{display:block;border-radius:50%;overflow:hidden;border:2px solid var(--accent);background:var(--panel);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);margin-inline:auto}
.dj .ph{width:140px;height:140px}
.dj .ph img,.dj-grid .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.dj .ini,.dj-grid .ini{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:26px;color:rgba(var(--accent-rgb),.6)}
.dj b{display:block;margin-top:14px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.03em;color:var(--ink)}
.dj .on-air,.dj-grid .on-air{display:block;width:100%;margin-top:5px;font-family:var(--med);font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);line-height:1.5}
.dj p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-dim);max-width:36ch;margin-inline:auto}
/* the days-and-times line came off the DJ cards 07/09 (James); .on-air survives for the grid tiles
   only if it ever comes back, and the Instagram link takes its place when a record carries one */
.dj-ig{display:inline-block;margin-top:12px;font-family:var(--med);font-weight:600;font-size:12.5px;letter-spacing:.06em;
  color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.4);padding-bottom:2px}
@media (hover:hover){.dj-ig:hover{border-bottom-color:var(--accent)}}
.dj-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.dj-nav > button{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
@media (hover:hover){.dj-nav > button:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.1)}}
.dj-nav > button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dj-thumbs{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;padding:3px}
/* spacers INSIDE the scrolling row let the first and last face reach its centre (a percentage padding on the row
   would measure against the nav and push the row wider than the screen) */
.dj-thumbs::before,.dj-thumbs::after{content:"";flex:0 0 calc(50% - 17px)}
.dj-thumbs::-webkit-scrollbar{display:none}
.dj-thumbs button{flex:0 0 34px;width:34px;height:34px;padding:0;border-radius:50%;overflow:hidden;border:1.5px solid rgba(255,255,255,.14);background:var(--panel-2);cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s,transform .2s}
.dj-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.dj-thumbs button span{display:grid;place-items:center;width:100%;height:100%;font-family:var(--display);font-weight:800;font-size:11px;color:rgba(var(--accent-rgb),.8)}
.dj-thumbs button.on{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.3);transform:scale(1.08)}
@media (hover:hover){.dj-thumbs button:hover{opacity:1}}
.dj-note{text-align:center}
.dj-mode{display:block;margin:14px auto 0;text-align:center}
.dj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dj-grid button{display:flex;flex-direction:column;align-items:center;width:100%;padding:18px 10px 16px;background:var(--panel-2);border:1px solid var(--hair);border-radius:var(--r);clip-path:var(--chamfer);color:var(--ink);text-align:center;cursor:pointer;transition:background .2s,border-color .2s}
@media (hover:hover){.dj-grid button:hover{background:#1c1c27;border-color:rgba(var(--accent-rgb),.5)}}
.dj-grid .ph{width:84px;height:84px;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.dj-grid .ini{font-size:22px}
.dj-grid b{display:block;width:100%;margin-top:11px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:14.5px;letter-spacing:.03em;line-height:1.2}
.dj-grid .on-air{font-size:9.5px;line-height:1.45}
@media (min-width:900px){
  :root{--stack:min(1000px,92vw)}
  .tv-frame.off{aspect-ratio:21/9}
  .dj-strip{max-width:680px;margin-inline:auto}   /* one DJ at a time on desktop too, as its own card */
  .dj{padding:34px 28px 32px}
  .dj .ph{width:168px;height:168px}
  .dj b{font-size:22px;margin-top:18px}
  .dj .on-air{font-size:11px}
  .dj p{font-size:15.5px;line-height:1.6;max-width:52ch;margin-top:14px}
  .dj-nav{margin-top:20px;gap:16px}
  .dj-thumbs{gap:8px;flex:0 1 auto;justify-content:center} /* all eight fit on desktop, no scrolling row */
  .dj-thumbs::before,.dj-thumbs::after{display:none}
  .dj-thumbs button{flex-basis:44px;width:44px;height:44px}
  .dj-mode{margin-top:18px}
  .dj-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .dj-grid button{padding:22px 12px 20px}
  .dj-grid .ph{width:100px;height:100px}
  .dj-grid b{font-size:16px;margin-top:13px}
  .dj-grid .on-air{font-size:10px}
}

/* ---------- cta band ---------- */
.cta{position:relative;background:linear-gradient(180deg,#120609,#0a0508);text-align:center;padding:var(--sec) 24px;overflow:hidden;border-top:1px solid rgba(var(--accent-rgb),.25)}
.cta .streak{position:absolute;top:0;left:-10%;right:-10%;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.8) 45%,#fff 50%,rgba(var(--accent-rgb),.8) 55%,transparent);filter:blur(.4px);box-shadow:0 0 26px 4px rgba(var(--accent-rgb),.4)}
.cta h2{font-size:clamp(40px,6vw,60px);line-height:.98;color:var(--ink)}
.cta h2 em{font-style:normal;color:var(--accent)}
.cta .sub{margin-block:16px 0;margin-inline:auto;font-size:16px;line-height:1.5;color:var(--ink-dim);max-width:34ch}
.cta .btn{margin-top:26px}
.socials{display:flex;justify-content:center;gap:14px;margin-top:26px}
.socials a{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:color .2s,border-color .2s,background .2s}
.socials a svg{width:19px;height:19px;fill:currentColor}
@media (hover:hover){.socials a:hover{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--hair);padding:var(--sec) 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.foot-grid{width:var(--stack);display:flex;flex-direction:column;align-items:center;gap:30px;margin-bottom:34px}
.foot-brand{display:flex;flex-direction:column;align-items:center;gap:14px}
.foot-brand img{height:48px;width:auto}
.foot-brand p{font-size:14px;line-height:1.6;color:var(--ink-dim);max-width:30ch}
.foot-col{display:flex;flex-direction:column;align-items:center;gap:10px}
.foot-col h3{font-family:var(--med);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.foot-col a{font-family:var(--med);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--ink-dim);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.22)}
@media (hover:hover){.foot-col a:hover{color:var(--ink);text-decoration-color:var(--accent)}}
@media (min-width:900px){.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:start;gap:32px}.foot-brand,.foot-col{width:100%}}
footer .rule{width:var(--stack);height:1px;background:var(--hair);margin-bottom:22px}
footer .fine{font-size:13px;line-height:1.7;color:var(--ink-dim)}
footer .linklike{margin-top:10px;background:none;border:none;padding:0;font-family:var(--sans);font-size:12.5px;color:var(--ink-dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.22)}
footer .cmm{margin-top:14px;font-size:13px;color:var(--ink-faint)}
footer .cmm a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.28)}

/* ---------- sticky player: the mock's bar ---------- */
.live{position:fixed;inset:auto 0 0 0;z-index:70;height:calc(var(--bar) + env(safe-area-inset-bottom));padding:0 clamp(14px,4vw,24px) env(safe-area-inset-bottom);
  background:rgba(7,7,10,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(var(--accent-rgb),.35);display:flex;align-items:center;gap:14px;text-align:left}
.live-logo{height:34px;width:auto;flex:none}
.live-meta{flex:1 1 auto;min-width:0}
.live-status{display:flex;align-items:center;gap:8px;font-family:var(--med);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.live-status i{width:4px;height:4px;border-radius:50%;background:var(--ink-faint)}
.live-status.off .red{color:var(--ink-faint)}
.live-status.off .rdot{background:var(--ink-faint);box-shadow:none}
.live-status.off .rdot::after{display:none}
.live-now{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-dim);margin-top:2px}
.play{flex:none;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:#0a0a0e;display:grid;place-items:center;transition:transform .15s,background .2s}
@media (hover:hover){.play:hover{background:#ffe1e5}}
.play:active{transform:scale(.95)}
.play svg{width:20px;height:20px;fill:currentColor;margin-left:2px}
.play .ic-pause,.play .ic-load{margin-left:0}
.vol{flex:none;display:flex;align-items:center;gap:6px;position:relative}
.vol-pop{position:absolute;right:0;bottom:calc(100% + 10px);width:44px;height:150px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.vol-pop input{position:absolute;left:50%;top:50%;width:118px;transform:translate(-50%,-50%) rotate(-90deg)}
.mute{width:40px;height:40px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .2s}
@media (hover:hover){.mute:hover{background:rgba(255,255,255,.08)}}
.mute svg{width:22px;height:22px;fill:currentColor}
.mute[aria-pressed="true"]{color:var(--ink-faint)}
.vol input{width:90px}
/* 07/09 (Ashton): the bar logo is off at EVERY width now, the header and the Kiss TV card already carry it and three logos in one desktop screen read as clutter; markup kept for a restore */
.live-logo{display:none}
@media (max-width:640px){.vol-inline{display:none}}
@media (min-width:641px){.vol-pop{display:none!important}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- privacy modal ---------- */
.pmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,3,5,.78);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.pbox{width:min(560px,100%);max-height:min(80vh,660px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;text-align:left}
.pbox h2{font-size:26px;color:var(--ink);margin-bottom:12px}
.pbox h3{font-size:15px;color:var(--ink);margin-block:18px 5px}
.pbox p{font-size:14.5px;line-height:1.65;color:var(--ink-dim)}
.pbox p b{color:var(--ink);font-weight:700}
.pclose{margin-top:22px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* beat-reactive bars: when the analyser is live the CSS wobble stops and JS scales each bar from its base */
body.eq-live .wave-ic{align-items:flex-end}
body.eq-live .wave-ic i{animation:none!important;height:100%;transform:scaleY(.16);transform-origin:50% 100%;transition:transform 60ms linear}
/* the big equaliser in the now-playing card, shown while the radio plays */
.np-eq{display:none;height:36px;gap:4px;color:var(--accent);align-self:center}
.np-eq i{width:5px;height:12px;border-radius:2px}
.np-eq i:nth-child(2){height:22px}.np-eq i:nth-child(3){height:36px}.np-eq i:nth-child(4){height:18px}.np-eq i:nth-child(5){height:28px}
body.playing .np-eq{display:inline-flex}
@media (max-width:420px){.np-row{grid-template-columns:76px 1fr auto}}