/* Chilli FM website — the Pro Radio look, written fresh (no theme code). */

:root {
  --red: #e31e25;
  --red-dark: #b8141a;
  --dark: #1a1612;
  --darker: #11151b;
  --ink: #231f20;
  --text: #2b2728;
  --muted: #6b6466;
  --line: #e4e0e6;
  --bg: #f2f0f5;
  --card: #ffffff;
  --head: 'Poppins', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
  --player-h: 70px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* our own display rules must never override 'hidden' */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scroll-behavior: smooth; }
@media (max-width: 767px) { html { scroll-padding-top: 80px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.65 var(--body);
  padding-bottom: var(--player-h);
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--head); font-weight: 500; line-height: 1.2; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(32px, 4.4vw, 56px); }
h2 { font-size: clamp(26px, 3.2vw, 40px); }
h3 { font-size: clamp(21px, 2.2vw, 28px); }
h4 { font-size: 20px; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
button { font: inherit; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: #fff; padding: 8px 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: 56px; padding-bottom: 56px; }

/* ---- Header: one row — logo, menu, Record shoutout ------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 30; height: 76px; display: flex; align-items: center; gap: 24px;
  padding: 0 32px; background: rgba(26, 22, 18, .96); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.logo { flex: none; }
.logo img { display: block; width: 104px; height: auto; }
.mainnav { flex: 1; display: flex; justify-content: center; align-items: center; gap: 2px; min-width: 0; }
.mainnav a { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .86); font: 500 15px/1 var(--head); padding: 10px 11px; white-space: nowrap; border-radius: 999px; transition: color .15s, background-color .15s; }
.mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.mainnav a[aria-current] { color: #fff; background: rgba(227, 30, 37, .9); }
.mainnav .nav-live { gap: 7px; }
.mainnav .nav-live[aria-current] .live-dot { background: #fff; }
.nav-caret { width: 16px; height: 16px; opacity: .7; transition: transform .2s; }
.nav-group { position: relative; }
.nav-sub {
  position: absolute; top: 100%; left: 50%; min-width: 210px; padding: 8px; margin-top: 8px; border-radius: 14px;
  background: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* keeps the hover while moving down */
.nav-sub a { color: var(--ink); border-radius: 10px; padding: 11px 14px; font-weight: 500; }
.nav-sub a:hover, .nav-sub a[aria-current] { background: #fdeeee; color: var(--red-dark); }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
.hdr-actions { flex: none; display: flex; align-items: center; gap: 10px; }
/* Social icons in the header, as on the old site, where there is room for them */
.hdr-social { display: none; align-items: center; gap: 4px; margin-right: 8px; }
.hdr-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, .78); transition: color .15s, background-color .15s; }
.hdr-social a:hover { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.hdr-social svg { width: 18px; height: 18px; }
@media (min-width: 1440px) { .hdr-social { display: flex; } }
.pillbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--red); color: #fff; font: 600 12px/1.05 var(--head); letter-spacing: .01em;
  box-shadow: 0 6px 18px -8px rgba(227, 30, 37, .8); transition: background-color .2s, transform .2s;
}
.pillbtn:hover { background: #f03a40; text-decoration: none; transform: translateY(-1px); }
.pillbtn svg { flex: none; width: 16px; height: 16px; }
.pillbtn span { display: flex; flex-direction: column; }   /* "Record" over "shoutout" */
.menubtn { display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.menubtn:hover { background: rgba(255, 255, 255, .18); }
.menubtn svg { width: 22px; height: 22px; }
.drawer-social { display: flex; gap: 10px; margin-top: 12px; }
.drawer-panel .drawer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; padding: 0 !important; }
.drawer-panel .drawer-social a:hover { background: var(--red); color: #fff; }
.drawer-social svg { width: 18px; height: 18px; }

.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: var(--bg);
  padding: 54px 20px 14px; display: flex; flex-direction: column; overflow-y: auto;
}
/* Big tiles, two per row, so every item is easy to hit with a thumb (52 px tall; Apple asks 44, Android 48)
   and the whole menu fits without scrolling down to iPhone SE size (Dana, 17 Oct 2026). */
.drawer-panel:focus { outline: none; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-panel .drawer-grid a, .drawer-panel .drawer-locals a {
  display: flex; align-items: center; min-height: 52px; padding: 8px 14px; border-radius: 14px; background: #fff;
  color: var(--ink); font: 500 16px/1.2 var(--head); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: background-color .15s, color .15s;
}
.drawer-panel .drawer-grid a:hover, .drawer-panel .drawer-locals a:hover { color: var(--red); text-decoration: none; }
.drawer-panel .drawer-grid a[aria-current], .drawer-panel .drawer-locals a[aria-current] { background: var(--red); color: #fff; }
.drawer-panel a .live-dot { display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; }
.drawer-panel hr { width: 100%; margin: 10px 0; border: 0; border-top: 1px solid rgba(0, 0, 0, .1); }
/* Local info: three smaller tiles in one row, the name on two lines */
.drawer-locals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.drawer-panel .drawer-locals a { justify-content: center; text-align: center; padding: 6px 8px; font: 500 13px/1.25 var(--head); color: var(--muted); }
.drawer-x { position: absolute; top: 10px; right: 16px; width: 44px; height: 44px; border: 0; background: none; font-size: 34px; line-height: 1; cursor: pointer; color: var(--ink); }
body.drawer-on { overflow: hidden; }

.is-canvas .hdr, .is-canvas .ftr { display: none; }

/* Red sections from the page editor get the Chilli Shoutouts hero's deep red sweep (17 Oct 2026). */
.sec[style*="background-color:#E31E25" i] { background-image: linear-gradient(135deg, #E31E25 0%, #b3141a 55%, #6e0b10 100%); }

/* ---- Page header ------------------------------------------------------------ */
.phero {
  background: var(--dark) center/cover no-repeat; color: #fff;
  padding: clamp(60px, 9vw, 110px) 0 clamp(50px, 8vw, 100px);
}
.phero h1 { color: #fff; font-weight: 600; max-width: 1000px; margin: 14px 0 10px; }
.phero time { opacity: .85; font-size: 15px; }
.pill {
  display: inline-block; background: var(--red); color: #fff; border-radius: 30px; padding: 2px 12px;
  font: 600 13px/1.6 var(--head);
}
.pill-line { background: transparent; border: 2px solid #fff; color: #fff; font-weight: 400; }
a.pill:hover { text-decoration: none; background: var(--red); }

/* ---- Article ------------------------------------------------------------------ */
.prose { min-width: 0; padding: 56px 0; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3 { margin-top: 1.4em; font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--red); font-style: italic; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 15px; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose img { border-radius: 6px; }
.feat { display: block; width: 100%; margin-bottom: 32px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.with-side { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 50px; }
.side { padding: 56px 0; display: flex; flex-direction: column; gap: 24px; }

/* ---- Imported page sections (from the old page builder) ------------------------ */
/* Spacing comes from each box's own inline --pad; reset it here so a box never
   inherits its parent's (custom properties inherit, inline styles still win). */
.sec, .el { --pad: 0px; --pad-m: initial; }
.sec { padding: var(--pad); background-size: cover; background-position: center; }
.el { display: flex; flex-direction: column; min-width: 0; padding: var(--pad); gap: 20px; }
.sec > .box { width: 100%; margin: 0 auto; }
/* As in the old theme, the light menu bar sits over the top of a page's first
   section, so its top spacing reads from the menu bar rather than below it. */
/* Pages whose first section has no top padding (Get a Quote, Advertiser feedback: on
   WordPress an empty dark band sat above them) would slide under the menu: give them room. */
main > .sec:first-child:is([style*="--pad:0px 0px"], [style*="--pad:10px;"]) { margin-top: 0; padding-top: clamp(40px, 6vw, 72px); }
/* Like Elementor: a row keeps its columns side by side and shrinks them to fit, unless set to wrap. */
.el-row { flex-direction: row; flex-wrap: nowrap; }
.el-row.el-wrap { flex-wrap: wrap; }
.el-row.el-rev { flex-direction: row-reverse; }
.el-colrev { flex-direction: column-reverse; }
.el-row > .el { flex: 1 1 0; }
.el-row > .el[style*="flex-basis"] { flex-grow: 0; flex-shrink: 1; }
.el-row > .w { flex: 0 1 auto; }
.w { margin: 0; }
.w-image img { display: inline-block; border-radius: 4px; }
.w-heading h1, .w-heading h2, .w-heading h3, .w-heading h4 { margin: 0; }
.w-text-editor > :last-child, .w-text-editor > div > :last-child { margin-bottom: 0; }
.spacer { margin: 0; }
.video { position: relative; aspect-ratio: 16/9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.map { width: 100%; border: 0; border-radius: 8px; }
.alert { background: #fff4f2; border-left: 4px solid var(--red); padding: 14px 18px; border-radius: 6px; }
.anchor { display: block; position: relative; top: -160px; }
.gcap { font-weight: 400; font-size: clamp(26px, 3vw, 40px); }
.gcap .hl { background: var(--hl, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qcap { display: inline-block; background: var(--red); color: #fff; font: 700 clamp(22px, 2.4vw, 32px)/1.3 var(--head); padding: 2px 20px; border-radius: 22px; margin: 0; }
.has-video { position: relative; overflow: hidden; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg-overlay { position: absolute; inset: 0; z-index: 0; }
.has-video > :not(.bg-video):not(.bg-overlay) { position: relative; z-index: 1; }
/* Icon boxes: the icon beside (or above) a title and a line of text. */
.ibox { display: flex; flex-direction: column; gap: 15px; }
.ibox-left { flex-direction: row; align-items: center; }
.ibox-right { flex-direction: row-reverse; align-items: center; }
.ibox-ic { flex: none; line-height: 0; }
.ibox-txt { min-width: 0; }
.ibox h3, .ibox h4, .ibox h5 { font-size: 21px; margin: 0 0 6px; }
.ibox h3 a, .ibox h4 a, .ibox h5 a { color: inherit; }
.ibox-d > :last-child { margin-bottom: 0; }
/* Icons (Font Awesome Free, inline SVG). */
.fa { width: 1em; height: 1em; display: block; }
.ic { display: inline-grid; place-items: center; --ic-size: 50px; font-size: var(--ic-size); color: var(--red); line-height: 0; }
.ic-stacked, .ic-framed { padding: var(--ic-pad, .5em); border-radius: 50%; }
.ic-framed { border: 2px solid; }
.ic-square { border-radius: 0; }
.ic-rounded { border-radius: 10%; }

.ilist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--li-gap, 6px); }
.ilist li { margin: 0; }
.ilist li > a { display: inline-flex; align-items: center; }
.li-ic { display: inline-block; width: 14px; height: 14px; color: var(--red); margin-right: var(--li-indent, 8px); vertical-align: -.1em; flex: none; }
.li-ic .fa { width: 100%; height: 100%; }
.ilist[style*="--li-hover"] a:hover { color: var(--li-hover); text-decoration: none; }
.ilist a { color: inherit; font-weight: 700; }
.ilist-inline { flex-direction: row; flex-wrap: wrap; gap: 6px 20px; }

.btn {
  display: inline-block; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
  background: var(--b-bg, var(--red)); color: var(--b-fg, #fff);
  border: var(--b-bw, 0px) solid var(--b-bd, transparent); border-radius: var(--b-r, 30px);
  padding: var(--b-pad, 12px 26px); font: 600 var(--b-fs, 14px)/1.2 var(--b-ff, var(--head));
  text-transform: var(--b-tt, uppercase); letter-spacing: .02em;
}
.btn:hover { background: var(--b-hbg, var(--red-dark)); color: var(--b-hfg, #fff); border-color: var(--b-hbd, var(--b-bd, transparent)); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.95); }
button.btn[data-play].is-on { background: var(--ink); }
.is-loading button.btn[data-play] { animation: pulse 1s infinite alternate; }
.w-button { display: inline-block; margin-bottom: 0; }
.btn-ic { display: inline-flex; align-items: center; gap: 8px; }
.btn-ic .fa { width: 1em; height: 1em; }
.el-row > .w-button { flex: none; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.soc {
  display: inline-grid; place-items: center; background: var(--s-bg, #231f20); color: var(--s-fg, #fff);
  font-size: var(--s-size, 16px); padding: var(--s-pad, .6em); border-radius: 50%; line-height: 0;
  transition: background .2s, color .2s;
}
.socials-rounded .soc { border-radius: 10%; }
.socials-square .soc { border-radius: 0; }
.soc:hover { background: var(--s-hbg, var(--red)); color: var(--s-hfg, #fff); text-decoration: none; }

.promo {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 220px; padding: 24px;
  border-radius: var(--radius); color: #fff; background: var(--darker) center/cover no-repeat;
  box-shadow: inset 0 -120px 80px -40px rgba(0,0,0,.7);
}
.promo:hover { text-decoration: none; }
.promo-t { font: 600 22px/1.2 var(--head); }
.promo .btn { align-self: flex-start; }

/* ---- Post lists ---------------------------------------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); overflow: hidden; color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; }
.card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.card-img { aspect-ratio: 16/9; background: var(--darker) center/cover no-repeat; }
.card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.card-t { font: 600 19px/1.3 var(--head); }
/* Compact rows (old post-inline): small picture with two rounded corners + bold title. */
.pinl { display: flex; flex-direction: column; gap: 22px; }
.pinl-row { display: flex; align-items: center; gap: 12px; background: #fafafa; border-radius: 10px; color: #111; min-height: 80px; overflow: hidden; }
.pinl-shadow .pinl-row { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.pinl-row:hover { text-decoration: none; color: var(--red); }
.pinl-img { flex: none; width: 80px; align-self: stretch; min-height: 80px; border-radius: var(--thumb-r, 0); background: var(--darker) center/cover no-repeat; }
.pinl-t { font: 600 16px/1.25 var(--head); padding: 8px 12px 8px 0; }
.pinl-row > .pinl-t:first-child { padding-left: 12px; }
/* One big featured post (old post-list). */
.pfeat {
  display: flex; align-items: flex-end; min-height: 467px; width: 100%; padding: 40px; color: #fff;
  border-radius: 60px 0 60px 0; background: var(--darker) center/cover no-repeat;
}
.pfeat:hover { text-decoration: none; }
.pfeat-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; }
.pfeat-cat { border: 2px solid var(--red); color: var(--red); background: rgba(255,255,255,.1); font: 400 13px/1.3 var(--head); padding: 1px 6px; }
.pfeat-t { font: 700 clamp(26px, 3vw, 40px)/1.2 var(--head); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
/* Sliding ticker of titles (old post-scroller). */
.ptick { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.ptick-track { display: inline-flex; white-space: nowrap; animation: ptick var(--dur, 30s) linear infinite; }
.ptick:hover .ptick-track { animation-play-state: paused; }
.ptick-dup { display: inline-flex; }
.ptick-item { display: inline-flex; align-items: center; gap: 10px; margin-right: 40px; color: var(--red); font: 700 23px/1.4 var(--head); }
.ptick-img { width: 1.8em; height: 1.8em; flex: none; object-fit: cover; border-radius: 10px 0 10px 0; }
@keyframes ptick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ptick { overflow-x: auto; } .ptick-dup { display: none; } }
.pager { display: flex; justify-content: space-between; margin-top: 32px; }

/* ---- Sponsors ------------------------------------------------------------------------ */
.sponsor-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: 100%; }
.sponsor {
  display: grid; place-items: center; background: #fff; border: 1px solid #ead9d6; border-radius: 14px;
  padding: 18px; transition: border-color .2s, box-shadow .2s;
}
.sponsor img { width: 100%; height: 72px; object-fit: contain; opacity: .9; transition: opacity .2s; }
a.sponsor:hover { border-color: var(--red); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
a.sponsor:hover img { opacity: 1; }
@media (max-width: 1024px) { .sponsor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sponsor { padding: 10px; }
  .sponsor img { height: 56px; }
}

/* ---- On air -------------------------------------------------------------------- */
.onair-show { display: flex; align-items: center; gap: 16px; color: #fff; }
.onair-show:not(.has-show) { visibility: hidden; }
.onair-img { width: 61px; height: 61px; border-radius: 50%; flex: none; background: rgba(255,255,255,.15) center/cover no-repeat; }
.onair-name { display: block; font: 400 clamp(20px, 2vw, 28px)/1.2 var(--head); }
.onair-time { display: block; font-size: 13px; opacity: .85; }
.bigplay {
  width: 88px; height: 88px; border-radius: 50%; border: 8px solid var(--red); background: #fff; color: var(--red);
  display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .15s;
}
.bigplay:hover { transform: scale(1.06); }
.bigplay svg { width: 40px; height: 40px; fill: currentColor; margin-left: 5px; }
.is-playing .bigplay svg { margin-left: 0; }
/* "Now on air" card (Shows and schedule page). */
.onair-big { display: block; position: relative; padding: 20px; background: var(--red); border-radius: 16px; color: #fff; }
.onair-big:hover { text-decoration: none; }
.onair-big-img { display: block; aspect-ratio: 16/10; border-radius: 10px; background: var(--darker) center/cover no-repeat; box-shadow: inset 0 -140px 90px -40px rgba(0,0,0,.65); }
.onair-big-txt { position: absolute; left: 50px; right: 50px; bottom: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.onair-tag { border: 1px solid #fff; font: 400 12px/1.4 var(--head); padding: 0 5px; margin-bottom: 6px; }
.onair-big-name { font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--head); }
.onair-big-sub { font: 600 15px/1.3 var(--head); }
.onair-big-time { font: 600 12px/1.3 var(--head); }
/* "Coming up" (sidebars, Shows page). */
.upnext { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 100%; }
.upnext-title { font: 700 17px/1.3 var(--head); margin: 0; }
.upnext-card { display: flex; gap: 12px; align-items: center; width: 100%; background: #fafafa; border-radius: 10px; overflow: hidden; color: #111; }
.upnext-card:hover { text-decoration: none; color: var(--red); }
.upnext-img { width: 80px; height: 80px; flex: none; border-radius: 10px 0 10px 0; background: var(--darker) center/cover no-repeat; }
.upnext-name { display: block; font: 700 15px/1.3 var(--head); }
.upnext-sub, .upnext-time { display: block; font-size: 12px; line-height: 1.4; color: #333; }
/* Events list (Music Events, home page). */
.evlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ev { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 14px; padding: 12px 18px 12px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ev-date { flex: none; width: 74px; height: 80px; border-radius: 12px; background: var(--red); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-family: var(--head); }
.ev-date b { font-size: 30px; font-weight: 700; }
.ev-date span { font-size: 14px; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
.ev-date small { font-size: 11px; opacity: .85; margin-top: 4px; }
.ev-img { flex: none; width: 128px; border-radius: 12px; background: var(--darker) center/cover no-repeat; }
.ev-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-title { font: 600 19px/1.25 var(--head); color: var(--ink); }
.ev-title:hover { color: var(--red); text-decoration: none; }
.ev-meta { font-size: 14px; color: var(--muted); }
.ev-act { flex: none; display: flex; align-items: center; gap: 14px; }
.ev-buy { padding: 10px 18px; font-size: 13px; }
.ev-more { font: 600 14px/1 var(--head); color: var(--ink); }
.ev-none { color: var(--ink); }
/* Live Music page: the "Nothing listed yet?" box under the list only shows while there are no events. */
.w-event-list:has(.evlist) + .el-row { display: none; }
/* An event page's details card. */
.evcard { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 6px 24px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 12px; position: sticky; top: 96px; }
.evcard dl { margin: 0; display: grid; gap: 10px; }
.evcard dt { font: 700 12px/1 var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.evcard dd { margin: 3px 0 0; font-size: 16px; color: var(--ink); }
.evcard-addr { font-size: 14px; color: var(--muted); }
.evcard-map, .evcard-link { font: 600 14px/1.3 var(--head); }
.evcard-btn, .evcard-cal { text-align: center; }
.evcard-cals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evcard-cals span { grid-column: 1 / -1; font: 700 12px/1 var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--red); margin-top: 6px; }
.evcard-cal { --b-bg: var(--ink); --b-pad: 10px 8px; --b-fs: 12px; }
.ev-past { margin: 0; background: #fff4f2; border-left: 4px solid var(--red); padding: 10px 12px; border-radius: 6px; font-size: 15px; }
.feat-poster { width: auto; max-width: 100%; max-height: 720px; }
@media (max-width: 767px) {
  .ev { flex-wrap: wrap; gap: 12px; }
  .ev-img { display: none; }
  .ev-date { width: 60px; height: 66px; }
  .ev-date b { font-size: 24px; }
  .ev-act { width: 100%; justify-content: space-between; }
  .evcard { position: static; }
}

/* The week: day tabs + a timeline of the chosen day. */
.sched { width: 100%; }
.sched-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 26px; padding-bottom: 4px; scrollbar-width: none; }
.sched-tabs a { flex: 1 0 auto; text-align: center; padding: 9px 16px; border-radius: 30px; border: 1px solid var(--line); background: #fff;
  font: 600 14px/1.2 var(--head); color: var(--ink); white-space: nowrap; }
.sched-tabs a:hover { text-decoration: none; border-color: var(--red); color: var(--red); }
.sched-tabs a[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.sched-short { display: none; }
.sched-day { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.slot { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; }
.slot-time { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--head); line-height: 1.15; }
.slot-time b { font-size: 22px; font-weight: 600; color: var(--ink); }
.slot-time span { font-size: 13px; color: var(--muted); }
.slot-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; background: #fff; border-radius: 14px;
  border: 2px solid transparent; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.slot-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.slot-img { width: 64px; height: 64px; flex: none; border-radius: 12px; background: var(--darker) center/cover no-repeat; }
.slot-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.slot-name { font: 600 18px/1.25 var(--head); }
.slot-name a { color: var(--ink); }
.slot-name a::after { content: ''; position: absolute; inset: 0; }   /* the whole card opens the show page */
.slot-name a:hover { text-decoration: none; color: var(--red); }
.slot-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-sponsor { align-self: flex-start; margin-top: 4px; font: 600 12px/1 var(--head); color: var(--red); background: #fff1f0; border-radius: 20px; padding: 4px 9px; }
.slot-state { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.slot-onair, .slot-next, .slot-play, .slot-progress { display: none; }
.slot-next { font: 600 12px/1 var(--head); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 5px 10px; }
.slot.is-next .slot-next { display: inline-block; }
/* the show on air now */
.slot.is-live .slot-time b { color: var(--red); }
.slot.is-live .slot-card { border: 1px solid rgba(227, 30, 37, .28); background: #fffafa; box-shadow: 0 6px 20px rgba(227, 30, 37, .08); }
.slot.is-live .slot-onair { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--head); color: #fff; background: var(--red);
  border-radius: 20px; padding: 6px 10px; text-transform: uppercase; letter-spacing: .04em; }
.slot.is-live .slot-play { display: inline-block; position: relative; z-index: 1; background: var(--ink); color: #fff; border: 0; border-radius: 20px;
  padding: 7px 14px; font: 600 13px/1 var(--head); cursor: pointer; }
.slot.is-live .slot-play:hover { background: var(--red); }
.slot.is-live .slot-play.is-on { background: var(--red); }
/* No progress bar on the on-air show (Dana, 15 Oct 2026). */
.slot-progress span { display: block; height: 100%; width: var(--p, 0%); background: var(--red); transition: width 1s; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { display: block; width: 3px; background: #fff; border-radius: 1px; animation: eq 1s infinite ease-in-out alternate; }
.eq i:nth-child(1) { height: 40%; } .eq i:nth-child(2) { height: 100%; animation-delay: -.4s; } .eq i:nth-child(3) { height: 65%; animation-delay: -.7s; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.eq i { transform-origin: bottom; }
.sched-none { color: var(--muted); list-style: none; }
@media (max-width: 767px) {
  .sched-long { display: none; }
  .sched-short { display: inline; }
  /* All seven days fit in one row: short names, equal widths, no sideways scrolling */
  .sched-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .sched-tabs a { position: relative; padding: 9px 0 11px; font-size: 13px; }
  .sched-tabs a.is-today::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red); }
  .sched-tabs a.is-today[aria-selected="true"]::after { background: #fff; }
  .slot { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .slot-time b { font-size: 17px; }
  .slot-img { width: 52px; height: 52px; }
  .slot-name { font-size: 16px; }
  .slot-card { flex-wrap: wrap; gap: 12px; }
  .slot-state { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
  .slot:not(.is-live):not(.is-next) .slot-state { display: none; }
  .slot-sub { white-space: normal; }
}

/* A show page: "When it's on" card beside the description. */
.show-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 50px; align-items: start; padding-bottom: 56px; }
.tt { margin-top: 56px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.08); position: sticky; top: 96px; }
.tt-head { display: flex; justify-content: space-between; align-items: center; background: var(--red); color: #fff; padding: 14px 20px; font: 700 15px/1.2 var(--head); text-transform: uppercase; letter-spacing: .04em; }
.tt-live { background: #fff; color: var(--red); border-radius: 20px; padding: 3px 10px; font-size: 11px; letter-spacing: 0; }
.tt-list { list-style: none; margin: 0; padding: 6px 20px; }
.tt-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tt-list li:last-child { border-bottom: 0; }
.tt-days { font: 600 16px/1.3 var(--head); color: var(--ink); }
.tt-time { font: 500 16px/1.3 var(--head); color: var(--red); white-space: nowrap; }
.tt-note { margin: 0; padding: 0 20px; font-size: 12px; color: var(--muted); }
.tt-play { margin: 14px 20px 6px; width: calc(100% - 40px); }
.tt-sponsor { margin: 8px 20px 0; font-size: 13px; color: var(--muted); }
.tt > :last-child { margin-bottom: 18px; }
.phero-sub { margin: 0; font-size: 17px; opacity: .95; }
@media (max-width: 767px) {
  .onair-big-txt { left: 34px; right: 34px; bottom: 34px; }
}

.is-navigating main { opacity: .55; transition: opacity .15s .1s; }

.dev-todo { border: 2px dashed #c8a2c8; background: rgba(130,36,227,.06); color: #6b2bb0; padding: 14px 16px; border-radius: 10px; font: 500 14px/1.4 var(--head); }

/* ---- Footer -------------------------------------------------------------------- */
.ftr .ilist a { font-weight: 400; }

/* ---- 404 --------------------------------------------------------------------------- */
.nf { background: var(--dark); padding: 90px var(--gutter); min-height: 60vh; }
.nf-box { max-width: 800px; margin: 0 auto; border: 4px solid #fff; background: #0e0c0a; color: #fff; text-align: center; padding: 50px 24px; }
.nf-code { font: 700 clamp(100px, 16vw, 180px)/1 var(--head); }
.nf h1 { color: #fff; font-weight: 600; font-size: 34px; }

/* ---- Player bar ------------------------------------------------------------------ */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--player-h);
  background: var(--dark); color: #fff; display: flex; align-items: stretch;
}
.player-play { width: 70px; flex: none; background: none; border: 0; border-right: 1px solid rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.player-play svg { width: 30px; height: 30px; }
.player-play .i-pause, .is-playing .player-play .i-play { display: none; }
.is-playing .player-play .i-pause { display: block; }
.is-loading .player-play { animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .4; } }
.player-song { display: flex; flex-direction: column; justify-content: center; padding: 0 18px; width: 330px; min-width: 0; color: #fff; }
.player-song:hover { text-decoration: none; background: rgba(255, 255, 255, .04); }
.player-cover-link { display: block; flex: none; }
.player-like { flex: none; align-self: center; width: 44px; height: 44px; margin-right: 10px; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; display: grid; place-items: center; transition: color .15s, background-color .15s; }
.player-like:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.player-like svg { width: 22px; height: 22px; }
.player-like[aria-pressed=true] { color: var(--red); }
.player-like[aria-pressed=true] svg path { fill: currentColor; }
.player-like.pop { animation: like-pop .35s ease-out; }
.player-note { position: absolute; left: 70px; bottom: calc(100% + 10px); max-width: min(420px, calc(100vw - 90px)); padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.player-note.is-on { opacity: 1; transform: none; }
.player-title, .player-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-title { font-size: 15px; }
.player-artist { font-size: 13px; color: #aaa; }
.player-cover { width: 70px; height: 70px; object-fit: cover; flex: none; background: #000; }
.player-open { display: grid; place-items: center; width: 54px; color: rgba(255, 255, 255, .8); transition: color .15s, background-color .15s; }
.player-open:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.player-open svg { width: 20px; height: 20px; }
.player-show { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: #ddd; white-space: nowrap; overflow: hidden; }
.player-show-label { color: var(--red); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.player-show:not(.has-show) { visibility: hidden; }
.player-vol { display: flex; align-items: center; gap: 8px; padding: 0 20px; border-left: 1px solid rgba(255,255,255,.12); }
.player-vol svg { width: 22px; height: 22px; flex: none; }
/* Mute button (player bar + Listen live): one wave when low, a cross when muted. */
.vol-btn { display: flex; padding: 4px; margin: -4px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 6px; }
.vol-btn:hover { opacity: .8; }
.vol-btn .vol-x, .vol-btn.is-muted .vol-w1, .vol-btn.is-muted .vol-w2, .vol-btn.is-low .vol-w2 { display: none; }
.vol-btn.is-muted .vol-x { display: inline; }
.player-vol input { width: 90px; accent-color: var(--red); }

/* ---- Visibility from the old page builder ------------------------------------------- */
@media (min-width: 1025px) { .hide-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-t { display: none !important; } }
@media (max-width: 767px) { .hide-m { display: none !important; } }

/* ---- Smaller screens ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .show-grid { grid-template-columns: 1fr; gap: 0; }
  .tt { position: static; margin-top: 32px; }
  .with-side { grid-template-columns: 1fr; gap: 0; }
  .side { padding-top: 0; }
}
/* All ten menu items stay in the bar on laptops; smaller screens use the menu button. */
@media (max-width: 1399px) {
  .hdr { gap: 16px; padding: 0 24px; }
  .mainnav a { font-size: 14px; padding: 10px 7px; }
}
@media (max-width: 1239px) {
  .mainnav { display: none; }
  .hdr { justify-content: space-between; }
  .menubtn { display: grid; }
}
@media (max-width: 900px) {
  .player-show { display: none; }
  .player-song { flex: 1; width: auto; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --player-h: 64px; }
  body { font-size: 16px; }
  .hdr { height: 64px; padding: 0 16px; }
  .logo img { width: 88px; }
  .pillbtn { height: 40px; }
  .menubtn { width: 40px; height: 40px; }
  .sec { padding: var(--pad-m, var(--pad, 0)); }
  .el-row:not(.el-wrap) { flex-direction: column; }
  .el-row > .el, .el-row > .el[style*="flex-basis"] { flex-basis: auto !important; width: 100%; }
  .pfeat { min-height: 320px; padding: 24px; border-radius: 30px 10px 30px 10px; }
  .player-play { width: 64px; }
  .player-cover { width: 64px; height: 64px; }
  .player-open { display: none; }
  .player-vol { display: none; }
  .bigplay { width: 72px; height: 72px; border-width: 6px; }
}
@media (max-width: 420px) {
  .pillbtn span { display: none; }
  .pillbtn { width: 40px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Forms (private/forms.php) ---- */
.cform {
  --f-line: #e4dfe8; --f-fill: #f7f6f9; --f-tint: #fdeeee;
  container-type: inline-size; width: 100%; max-width: 860px;
  background: #fff; border: 1px solid #ece8ef; border-radius: 20px;
  padding: clamp(20px, 4vw, 36px); box-shadow: 0 10px 30px -18px rgba(35, 31, 32, .25);
  display: grid; gap: 22px; text-align: left;
}
/* Already inside a coloured box on the page (Contact page): no second card. */
.el[style*="background-color"] .cform { background: none; border: 0; box-shadow: none; padding: 0; }
.cform-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 16px; }
@container (min-width: 520px) {
  .cform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cform-grid > * { grid-column: 1 / -1; }
  .cform-grid > .cform-row.half { grid-column: auto; }
}
.cform-row { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cform-label { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.45 var(--head); color: var(--ink); padding: 0; }
.cform-req { color: var(--red); margin-left: 3px; }
.cform-num {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: -1px;
  border-radius: 50%; background: var(--f-tint); color: var(--red-dark); font: 600 13px/1 var(--head);
}
.cform-sub { font-size: 13px; color: var(--muted); margin: -2px 0 2px; }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform input[type=url], .cform input[type=number], .cform select, .cform textarea {
  width: 100%; background: var(--f-fill); border: 1.5px solid var(--f-line); border-radius: 12px; padding: 13px 16px;
  font: 400 16px/1.4 var(--body); color: var(--text); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.cform textarea { resize: vertical; min-height: 130px; }
.cform select { appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--f-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236b6466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; }
.cform input:hover, .cform select:hover, .cform textarea:hover { border-color: #d3ccd8; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; background-color: #fff; border-color: var(--red); box-shadow: 0 0 0 4px rgba(227, 30, 37, .12); }
.cform ::placeholder { color: #a39ca2; }
.cform-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.cform-set legend { padding: 0; margin-bottom: 10px; }
.cform-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cform-chip { position: relative; cursor: pointer; }
.cform-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cform-chip span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 16px;
  border: 1.5px solid var(--f-line); border-radius: 999px; background: #fff;
  font: 500 15px/1.3 var(--body); color: var(--text); transition: border-color .15s, background-color .15s, color .15s;
}
.cform-chip:hover span { border-color: #cfc7d4; }
.cform-chip input:checked + span { background: var(--f-tint); border-color: var(--red); color: var(--red-dark); }
.cform-chip input[type=checkbox]:checked + span::before { content: ''; width: 12px; height: 7px; border: solid currentColor; border-width: 0 0 2.4px 2.4px; transform: translateY(-2px) rotate(-45deg); }
.cform-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(227, 30, 37, .15); border-color: var(--red); }
.cform-accept { display: flex; gap: 12px; align-items: flex-start; font: 500 15px/1.45 var(--body); cursor: pointer; }
.cform-accept input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); flex: none; cursor: pointer; }
.cform-h { margin: 6px 0 -6px; padding-top: 18px; border-top: 1px solid #efebf2; font: 600 13px/1.3 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.cform-grid > .cform-h:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.cform-note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cform-err { display: flex; gap: 6px; align-items: center; color: var(--red-dark); font: 500 13px/1.3 var(--body); }
.cform-err::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--red); color: #fff; font: 700 11px/1 var(--head); }
.cform-row.has-err input:not([type=radio]):not([type=checkbox]), .cform-row.has-err select, .cform-row.has-err textarea, .cform-row.has-err .cform-chip span { border-color: var(--red); }
.cform-msg:empty { display: none; }
.cform-msg { font: 500 15px/1.45 var(--body); color: var(--red-dark); background: var(--f-tint); border-radius: 12px; padding: 12px 16px; }
.cform-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.cform-send { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; box-shadow: 0 8px 20px -10px rgba(227, 30, 37, .7); }
.cform-send svg { width: 18px; height: 18px; transition: transform .2s; }
.cform-send:hover svg { transform: translateX(3px); }
.cform-send:disabled { opacity: .65; cursor: progress; }
.cform-check { min-height: 65px; }
.cform-done { justify-items: center; text-align: center; padding-block: clamp(32px, 6vw, 56px); }
.cform-done p { margin: 0; max-width: 460px; font: 500 18px/1.5 var(--head); color: var(--ink); }
.cform-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e7f6ec; color: #1d8a45; animation: cform-pop .35s ease-out; }
.cform-tick svg { width: 32px; height: 32px; }
@keyframes cform-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cform-tick { animation: none; } .cform-send svg { transition: none; } }

/* ---- Shoutout recorder (private/shoutouts.php, assets/recorder.js) ---- */
.rec {
  --lvl: 0; --rec-p: 0;
  position: relative; display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 520px; margin-inline: auto;
  padding: clamp(22px, 4vw, 32px); border-radius: 24px; color: #fff; text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #3a1414 0%, #1d1414 45%, #141012 100%);
  box-shadow: 0 24px 48px -24px rgba(20, 10, 10, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.rec-head { width: 100%; display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.rec-live { display: inline-flex; align-items: center; gap: 8px; color: #ff3b42; }   /* "The big red button" in red (a little brighter than --red, for the dark card) */
.rec-live span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }

.rec[data-state=recording] .rec-live span { background: var(--red); box-shadow: 0 0 0 0 rgba(227, 30, 37, .7); animation: rec-blink 1.2s infinite; }
@keyframes rec-blink { 0% { box-shadow: 0 0 0 0 rgba(227, 30, 37, .7); } 70% { box-shadow: 0 0 0 8px rgba(227, 30, 37, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 30, 37, 0); } }
.rec-stage { position: relative; display: grid; place-items: center; width: 100%; padding: 12px 0 4px; }
.rec-btn {
  position: relative; z-index: 1; width: 132px; height: 132px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: none; color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.rec-btn:disabled { cursor: default; }
.rec[data-short] .rec-btn { cursor: default; }   /* the first 5 seconds: Stop isn't ready yet */
.rec[data-short] .rec-btn .rec-core { opacity: .6; }
.rec-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rec-ring circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 4; }
.rec-ring .rec-ring-fill { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--rec-p) * 100); transition: stroke-dashoffset .2s linear; opacity: 0; }
.rec[data-state=recording] .rec-ring-fill { opacity: 1; }
.rec-core {
  position: absolute; inset: 14px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(160deg, #f0343a, #c4141a); transition: transform .2s, box-shadow .1s;
  box-shadow: 0 10px 30px -6px rgba(227, 30, 37, .7), 0 0 0 calc(var(--lvl) * 22px) rgba(227, 30, 37, .22), 0 0 0 calc(var(--lvl) * 44px) rgba(227, 30, 37, .08);
}
.rec-btn:not(:disabled):hover .rec-core { transform: scale(1.04); }
.rec-btn:focus-visible { outline: none; }
.rec-btn:focus-visible .rec-core { outline: 3px solid #fff; outline-offset: 4px; }
.rec-core svg { width: 42px; height: 42px; fill: currentColor; }
.rec-ic-stop { display: none; width: 30px; height: 30px; border-radius: 6px; background: #fff; }
.rec-count { display: none; font: 600 46px/1 var(--head); }
.rec[data-state=recording] .rec-ic-mic, .rec[data-state=countdown] .rec-ic-mic { display: none; }
.rec[data-state=recording] .rec-ic-stop { display: block; }
.rec[data-state=countdown] .rec-count { display: block; animation: rec-pop .8s ease-out infinite; }
@keyframes rec-pop { from { transform: scale(1.3); opacity: .4; } 30% { transform: scale(1); opacity: 1; } }
.rec[data-state=review] .rec-core, .rec[data-state=sending] .rec-core, .rec[data-state=done] .rec-core { background: #3a2c2c; box-shadow: none; }
.rec[data-state=idle] .rec-core { animation: rec-breathe 2.6s ease-in-out infinite; }
@keyframes rec-breathe { 50% { box-shadow: 0 10px 30px -6px rgba(227, 30, 37, .7), 0 0 0 12px rgba(227, 30, 37, .12); } }
.rec-meter { position: absolute; left: 0; right: 0; top: 50%; height: 56px; margin-top: -24px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; pointer-events: none; }
.rec-meter i { display: block; width: 3px; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .5); transform: scaleY(.08); transition: transform .08s linear; }
.rec-meter i:nth-child(n+11):nth-child(-n+18) { visibility: hidden; }   /* the middle sits behind the button */
.rec:not([data-state=recording]):not([data-state=countdown]) .rec-meter { opacity: .35; }
.rec-time { margin: 0; font: 600 30px/1 var(--head); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rec-of { color: rgba(255, 255, 255, .4); font-weight: 400; font-size: 18px; }
.rec[data-state=review] .rec-time, .rec[data-state=sending] .rec-time, .rec[data-state=done] .rec-time, .rec[data-state=file] .rec-time,
.rec[data-state=done] .rec-stage, .rec[data-state=done] .rec-status, .rec[data-state=file] .rec-stage, .rec[data-state=done] .rec-tip { display: none; }
.rec-status { margin: 0; min-height: 1.5em; font-size: 15px; color: rgba(255, 255, 255, .78); }
.rec-status.is-err { color: #ffb4b4; }
.rec-review { width: 100%; display: grid; gap: 14px; }
.rec-player { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.rec-play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.rec-play svg { width: 20px; height: 20px; fill: currentColor; }
.rec-play .p-pause, .rec.is-playing .rec-play .p-play { display: none; }
.rec.is-playing .rec-play .p-pause { display: block; }
.rec-track { flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); cursor: pointer; position: relative; }
.rec-track::before { content: ''; position: absolute; inset: -10px 0; }   /* a bigger target for fingers */
.rec-track span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--red); }
.rec-len { font: 500 14px/1 var(--head); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .7); min-width: 36px; text-align: right; }
.rec-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rec-again { background: transparent; border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; border-radius: 999px; padding: 12px 20px; font: 600 14px/1.2 var(--head); cursor: pointer; }
.rec-again:hover { border-color: #fff; }
.rec-send { display: inline-flex; align-items: center; gap: 10px; }
.rec-send svg { width: 18px; height: 18px; }
.rec[data-state=sending] .rec-actions { opacity: .4; pointer-events: none; }
.rec-upload { width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.rec-upload span { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }
.rec-done { display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; }
.rec-tick { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #1d8a45; color: #fff; animation: cform-pop .35s ease-out; }
.rec-tick svg { width: 36px; height: 36px; }
.rec-done-t { margin: 4px 0 0; font: 600 18px/1.4 var(--head); }
.rec-done-s { margin: 0 0 8px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.rec-file { display: grid; gap: 14px; justify-items: center; }
.rec-file p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 15px; }
.rec-tip { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .45); }
.rec-check:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .rec-core, .rec[data-state=countdown] .rec-count, .rec-live span { animation: none !important; } }

/* ==== Home page (private/tools/home-page.php, private/live.php) ==================== */
.hs { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
.hs-tint { background: #fff4f2; }
.hs-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.hs-kicker { margin: 0 0 8px; font: 600 13px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: #d61b21; }   /* a touch darker than --red: small text needs 4.5:1 contrast on the pale backgrounds */
.hs-h2 { margin: 0; font: 500 clamp(26px, 3.2vw, 40px)/1.12 var(--head); color: var(--ink); letter-spacing: -.01em; }
.hs-p { font-size: 17px; line-height: 1.65; color: #4a4445; margin: 16px 0 0; max-width: 560px; }
.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.hs-more { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--head); color: var(--ink); white-space: nowrap; }
.hs-more svg { width: 18px; height: 18px; color: var(--red); transition: transform .2s; }
.hs-more:hover { color: var(--red); text-decoration: none; }
.hs-more:hover svg { transform: translateX(4px); }
.hs-actions { margin: 22px 0 0; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hs-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #ead9d6; color: var(--ink); font: 500 15px/1.2 var(--body); transition: border-color .15s, background-color .15s, color .15s, transform .15s; }
.hs-chip:hover { background: var(--red); border-color: var(--red); color: #fff; text-decoration: none; transform: translateY(-1px); }

/* Hero */
.hs-hero { padding: clamp(72px, 11vw, 160px) 0; min-height: min(760px, calc(100vh - 76px - var(--player-h))); display: flex; align-items: center; color: #fff; overflow: hidden; isolation: isolate;
  background: #14100e url(/uploads/home/hero-poster.webp) center / cover; }   /* the same (preloaded) WebP as the video's still: one 70 KB download, not a second 177 KB JPG */
.hs-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(14, 10, 10, .9) 0%, rgba(14, 10, 10, .68) 50%, rgba(14, 10, 10, .45) 100%); }
.hs-hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hs-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.hs-h1 { margin: 0; font: 500 clamp(36px, 5.2vw, 66px)/1.04 var(--head); letter-spacing: -.02em; color: #fff; }
/* The heading's first line says what Chilli is, for Google and first-time visitors (SEO review, 15 Oct 2026). */
.hs-h1-k { display: block; margin: 0 0 14px; font: 600 13px/1.3 var(--head); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.hs-hl { background: linear-gradient(110deg, #ff5a52, #f8a5a1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-lead { margin: 22px 0 0; max-width: 540px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .8); }
.hs-hero-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hs-hero-links .hs-chip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hs-hero-links .hs-chip:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* The Listen live card */
.live { background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: 24px; padding: 20px; display: grid; gap: 16px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); max-width: 440px; margin-left: auto; }
.live-top { display: flex; justify-content: space-between; align-items: center; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fdeeee; color: var(--red-dark); font: 700 12px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(227, 30, 37, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(227, 30, 37, 0); } }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--red); opacity: .35; }
.is-playing .eq i { opacity: 1; animation: eq 1s ease-in-out infinite alternate; }
.is-playing .eq i:nth-child(2) { animation-delay: -.6s; animation-duration: .8s; }
.is-playing .eq i:nth-child(3) { animation-delay: -.3s; animation-duration: 1.2s; }
.is-playing .eq i:nth-child(4) { animation-delay: -.9s; animation-duration: .7s; }
.is-playing .eq i:nth-child(5) { animation-delay: -.45s; animation-duration: 1.1s; }
@keyframes eq { 0% { height: 20%; } 100% { height: 100%; } }
.live-main { display: flex; align-items: center; gap: 18px; }
.live-art { position: relative; flex: none; width: 120px; height: 120px; }
.live-cover { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; background: #1a1612; display: block; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); transition: opacity .35s; }
.live-cover.is-logo { object-fit: contain; padding: 16px; }
.player-cover.is-logo { object-fit: contain; padding: 8px; }
.live-play { position: absolute; right: -10px; bottom: -10px; width: 58px; height: 58px; border-radius: 50%; border: 4px solid #fff; background: var(--red); color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 10px 24px -8px rgba(227, 30, 37, .8); transition: transform .2s, background-color .2s; }
.live-play:hover { transform: scale(1.06); background: #f03a40; }
.live-play svg { width: 24px; height: 24px; }
.live-play .i-pause, .live-play.is-on .i-play { display: none; }
.live-play.is-on .i-pause { display: block; }
.is-loading .live-play { animation: pulse 1s infinite alternate; }
.live-song { min-width: 0; display: grid; gap: 4px; }
.live-label { font: 600 12px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.live-title { font: 600 20px/1.2 var(--head); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.live-artist { font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-show { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: #f7f5f8; color: var(--ink); transition: background-color .15s; }
.live-show:hover { background: #f0ecf2; text-decoration: none; }
.live-show:not(.has-show) { display: none; }
.live-show-img { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #ddd center / cover; }
.live-show-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.live-show-name { font: 600 15px/1.2 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-show-time { font-size: 13px; color: var(--muted); }
.live-show-go { width: 20px; height: 20px; color: var(--muted); flex: none; }

/* Song changes: title and cover fade in */
.is-new-song { animation: song-in .5s ease-out; }
@keyframes song-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Recently played / Coming up */
.hs-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rp-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; transition: background-color .15s; }
.rp-row:hover { background: #f7f5f8; }
.rp-cover { flex: none; width: 52px; height: 52px; border-radius: 10px; background: #ece8ef center / cover; overflow: hidden; }
.rp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; animation: song-in .4s ease-out; }
/* No cover found (or not yet): a music note on a soft tint, not an empty grey square (15 Oct 2026). */
.rp-cover:empty { background: #f3e9ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e31e25' fill-opacity='.45' d='M9 18.5a3 3 0 1 1-2-2.83V5.2l12-2.2v12.5a3 3 0 1 1-2-2.83V7.4l-8 1.47z'/%3E%3C/svg%3E") center / 46% no-repeat; }
.rp-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rp-title { font: 600 15px/1.25 var(--head); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-artist { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-time { flex: none; font: 500 13px/1 var(--head); color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-row.is-now .rp-time { color: var(--red); font-weight: 700; }
.rp-like { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: #b5adb3; cursor: pointer; display: grid; place-items: center; transition: color .15s, background-color .15s, transform .15s; }
.rp-like:hover { background: #fdeeee; color: var(--red); }
.rp-like svg { width: 22px; height: 22px; }
.rp-like[aria-pressed=true] { color: var(--red); }
.rp-like[aria-pressed=true] svg path { fill: currentColor; }
.rp-like.pop { animation: like-pop .35s ease-out; }
@keyframes like-pop { 50% { transform: scale(1.3); } }
.rp-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); min-height: 1em; }
.is-skel .rp-cover, .is-skel .rp-txt span { background: linear-gradient(90deg, #efecf1 0%, #f7f5f8 50%, #efecf1 100%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.is-skel .rp-txt span { display: block; height: 12px; border-radius: 6px; width: 70%; }
.is-skel .rp-txt span + span { width: 45%; }
@keyframes skel { to { background-position: -200% 0; } }
.cu { display: grid; gap: 10px; }
.cu-card { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #efe9ee; color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.cu-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(35, 31, 32, .35); border-color: #e4dce3; }
.cu-img { flex: none; width: 64px; height: 64px; border-radius: 12px; background: #ece8ef center / cover; }
.cu-txt { min-width: 0; display: grid; gap: 3px; }
.cu-when { font: 600 12px/1.2 var(--head); letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.cu-name { font: 600 16px/1.25 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Split sections (shoutouts, ways to listen) */
.hs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hs-split-media { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.hs-media img { width: 100%; height: auto; display: block; }
.hs-wa { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; border: 1px solid #e6efe8; color: var(--ink); font-size: 15px;
  transition: border-color .15s, transform .15s; }
.hs-wa:hover { border-color: #25d366; text-decoration: none; transform: translateY(-1px); }
.hs-wa svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #25d366; color: #fff; }
.hs-wa b { color: #128c4b; }
.hs-shout .dev-todo { margin-top: 24px; }
.hs-shout .rec { max-width: 520px; margin: 0 0 0 auto; }

/* Events: the section only shows while there are events */
.hs-events:not(:has(.evlist)) { display: none; }

/* Scroll reveal (site.js adds .is-in once on screen; without JavaScript everything just shows) */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.js-reveal .hs-cols > [data-reveal]:nth-child(2), .js-reveal .hs-split > [data-reveal]:nth-child(2), .js-reveal .hs-hero-in > [data-reveal]:nth-child(2) { transition-delay: .12s; }

/* Page swaps fade in; cards lift a little */
/* ---- Chilli Shoutouts page (content-fixes.php adds the so-* classes) ---- */
.w-image img.so-hero-pic { display: block; width: min(400px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; border: 8px solid #fff;
  box-shadow: 0 0 0 18px rgba(255, 255, 255, .12), 0 0 0 38px rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .55); }
.so-rec > .w-voiceline { margin: 0; }
.so-replay-link { margin-top: 14px; }
.swipe-dots { display: none; justify-content: center; gap: 8px; margin-top: 6px; }
.swipe-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #e3cfcb; cursor: pointer; transition: width .2s, background-color .2s; }
.swipe-dots button.is-on { width: 22px; background: var(--red); }
@media (max-width: 767px) {
  .w-image img.so-hero-pic { width: min(260px, 72vw); border-width: 6px; margin-top: 12px; }
  /* Card rows to swipe through on phones, with dots (site.js): the Shoutouts page's ideas
     (so the recorder isn't six cards away), the schedule's Signature shows */
  .swipe-row { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 14px; scrollbar-width: none; }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > .el { flex: 0 0 82% !important; width: 82% !important; scroll-snap-align: center; }
  .swipe-dots { display: flex; }
}

/* ---- Festivities on the home hero (private/festive.php, assets/festive.js) ---- */
.fest-sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.fest .hs-hero-in { position: relative; z-index: 1; }
.fest-halloween::after  { background: linear-gradient(100deg, rgba(22, 8, 30, .93) 0%, rgba(58, 18, 10, .72) 55%, rgba(120, 45, 0, .5) 100%); }
.fest-christmas::after  { background: linear-gradient(100deg, rgba(38, 4, 8, .93) 0%, rgba(72, 10, 14, .72) 55%, rgba(12, 52, 30, .52) 100%); }
.fest-newyear::after    { background: linear-gradient(100deg, rgba(6, 10, 30, .93) 0%, rgba(14, 20, 52, .74) 55%, rgba(64, 48, 10, .5) 100%); }
.fest-kings::after      { background: linear-gradient(100deg, rgba(20, 12, 46, .93) 0%, rgba(44, 30, 92, .74) 55%, rgba(92, 72, 150, .48) 100%); }
.fest-valentines::after { background: linear-gradient(100deg, rgba(40, 4, 14, .92) 0%, rgba(92, 10, 40, .7) 55%, rgba(180, 40, 90, .45) 100%); }
.fest-easter::after     { background: linear-gradient(100deg, rgba(10, 40, 30, .9) 0%, rgba(28, 70, 58, .66) 55%, rgba(120, 110, 40, .42) 100%); }
.fest-halloween .hs-hl  { background-image: linear-gradient(110deg, #ff9a2e, #ffd08a); }
.fest-christmas .hs-hl, .fest-newyear .hs-hl, .fest-kings .hs-hl { background-image: linear-gradient(110deg, #ffd257, #fff1c1); }
.fest-valentines .hs-hl { background-image: linear-gradient(110deg, #ff5a8a, #ffc2d6); }
.fest-easter .hs-hl     { background-image: linear-gradient(110deg, #ffe27a, #b9e58f); }
.fest-sanjuan::after    { background: linear-gradient(100deg, rgba(10, 12, 38, .93) 0%, rgba(58, 18, 34, .74) 55%, rgba(190, 76, 18, .48) 100%); }
.fest-hispanidad::after { background: linear-gradient(100deg, rgba(56, 6, 10, .93) 0%, rgba(118, 18, 20, .72) 55%, rgba(190, 140, 16, .45) 100%); }
.fest-sanjuan .hs-hl    { background-image: linear-gradient(110deg, #ff7a1f, #ffd257); }
.fest-hispanidad .hs-hl { background-image: linear-gradient(110deg, #ff4b4b, #ffd257); }
.fest-count { display: inline-flex; margin: 22px 0 0; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  font: 600 15px/1.2 var(--head); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fest-count:empty { display: none; }
.fest .hs-hero-card { position: relative; }
.fest .hs-hero-card .live { position: relative; z-index: 2; }
.fest-deco { position: absolute; top: 0; bottom: 0; right: 0; width: min(440px, 100%); z-index: 3; pointer-events: none; }
.fest-char { position: absolute; z-index: 1; bottom: -6px; right: calc(min(440px, 100%) - 100px); height: 380px; width: auto; max-width: none; pointer-events: none;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); }
@media (min-width: 1021px) {
  .fest .hs-hero-in:has(.has-char) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fest .hs-hero-in:has(.has-char) .hs-lead { max-width: 440px; }   /* the character stands where a long line ended */
}
.fd { position: absolute; display: block; overflow: visible; }
@keyframes fd-twinkle { 50% { opacity: .3; } }
@keyframes fd-pop { 0%, 100% { transform: scale(.75) rotate(0); } 50% { transform: scale(1.1) rotate(25deg); } }
@keyframes fd-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes fd-bob { 50% { transform: translateY(-5px) rotate(var(--r, 0deg)); } }
/* Halloween: pumpkins at the card's feet, a cobweb in its corner */
.fd-pumpkin1 { left: -30px; bottom: -28px; width: 92px; }
.fd-pumpkin2 { left: 46px; bottom: -20px; width: 56px; }
.fd-pumpkin3 { right: -22px; bottom: -20px; width: 66px; }
.fd-web { right: 0; top: 0; width: 92px; border-top-right-radius: 24px; }
.fd-web path { stroke: rgba(130, 118, 130, .7); }
/* Christmas: fairy lights along the top, holly at the corner */
.fd-lights { left: -12px; top: -24px; width: calc(100% + 24px); filter: drop-shadow(0 0 6px rgba(255, 210, 87, .55)); }
.fd-bulb { animation: fd-twinkle 1.7s ease-in-out infinite; animation-delay: var(--d); }
.fd-holly { left: -20px; bottom: -16px; width: 72px; }
/* New Year: gold bursts */
.fd-burst1 { right: -16px; top: -18px; width: 46px; animation: fd-pop 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 210, 87, .8)); }
.fd-burst2 { right: 30px; top: -32px; width: 22px; animation: fd-pop 1.9s ease-in-out -.7s infinite; }
.fd-burst3 { left: -14px; bottom: -14px; width: 34px; animation: fd-pop 2.1s ease-in-out -1.2s infinite; filter: drop-shadow(0 0 8px rgba(255, 210, 87, .8)); }
/* Three Kings: the star with its tail, a crown */
.fd-comet { right: -30px; top: -62px; width: 172px; filter: drop-shadow(0 0 10px rgba(255, 226, 122, .8)); animation: fd-twinkle 3s ease-in-out infinite; }
.fd-crown { left: -22px; top: -28px; width: 62px; --r: -16deg; transform: rotate(-16deg); animation: fd-bob 3s ease-in-out infinite; }
/* Valentine's: hearts beating */
.fd-heart1 { right: -18px; top: -22px; width: 50px; animation: fd-beat 1.6s ease-in-out infinite; }
.fd-heart2 { right: 34px; top: -32px; width: 26px; animation: fd-beat 1.6s ease-in-out -.4s infinite; }
.fd-heart3 { right: -28px; top: 34px; width: 20px; animation: fd-beat 1.6s ease-in-out -.8s infinite; }
/* Easter: painted eggs and a flower */
.fd-egg1 { left: -24px; bottom: -22px; width: 44px; --r: -14deg; transform: rotate(-14deg); animation: fd-bob 3.2s ease-in-out infinite; }
.fd-egg2 { left: 18px; bottom: -26px; width: 38px; --r: 8deg; transform: rotate(8deg); animation: fd-bob 3.2s ease-in-out -1s infinite; }
.fd-egg3 { right: -16px; bottom: -20px; width: 40px; --r: 12deg; transform: rotate(12deg); animation: fd-bob 3.2s ease-in-out -2s infinite; }
.fd-flower { left: 56px; bottom: -14px; width: 28px; }
/* San Juan: a bonfire at the card's foot, the moon above it */
.fd-fire { left: -34px; bottom: -30px; width: 96px; }
.fd-fire .fl, .fest-bar-sanjuan .fl { transform-origin: 50% 90%; animation: fd-flicker .9s ease-in-out infinite alternate; }
.fd-fire .fl2, .fest-bar-sanjuan .fl2 { animation-duration: .7s; animation-delay: -.3s; }
.fd-fire .fl3, .fest-bar-sanjuan .fl3 { animation-duration: .5s; animation-delay: -.2s; }
@keyframes fd-flicker { from { transform: scale(1, 1) skewX(-2deg); } to { transform: scale(.92, 1.08) skewX(3deg); } }
.fd-moon { right: 18px; top: -46px; width: 34px; filter: drop-shadow(0 0 10px rgba(255, 244, 201, .8)); }
/* Hispanic Day: red and yellow bunting along the top, a fan at the corner */
.fd-bunting { left: -12px; top: -16px; width: calc(100% + 24px); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.fd-fan { right: -26px; bottom: -20px; width: 80px; transform: rotate(-14deg); }
@media (max-width: 1020px) {
  .fest-deco { right: auto; left: 0; width: min(520px, 100%); }
  .fest-char { right: auto; left: calc(min(520px, 100%) - 40px); height: 330px; }
}
.fest-page { position: fixed; inset: 0; z-index: 25; width: 100vw; height: 100vh; pointer-events: none; }
/* The player bar's festive touch (every page): perched on its top edge by the play button */
.fest-bar { position: absolute; left: 40px; top: -16px; z-index: 2; width: 30px; height: 30px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.fest-bar svg { display: block; width: 100%; height: 100%; }
.fest-bar-halloween { width: 34px; height: 31px; top: -18px; }
.fest-bar-kings { width: 30px; height: 22px; top: -14px; transform: rotate(14deg); }
.fest-bar-valentines { width: 24px; height: 22px; top: -12px; animation: fd-beat 1.6s ease-in-out infinite; }
.fest-bar-newyear { width: 24px; height: 24px; top: -12px; animation: fd-pop 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 210, 87, .9)); }
.fest-bar-easter { width: 22px; height: 28px; top: -16px; transform: rotate(12deg); }
.fest-bar-sanjuan { width: 32px; height: 32px; top: -22px; }
.fest-bar-hispanidad { width: 30px; height: 20px; top: -14px; transform: rotate(-6deg); }
.fest-bar-christmas { left: 0; right: 0; top: -9px; width: auto; height: 18px; filter: drop-shadow(0 0 4px rgba(255, 210, 87, .5));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18'%3E%3Cpath d='M0 3Q30 11 60 3T120 3' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cellipse cx='18' cy='12' rx='3.5' ry='5' fill='%23ffd257'/%3E%3Cellipse cx='60' cy='9' rx='3.5' ry='5' fill='%23e31e25'/%3E%3Cellipse cx='100' cy='12' rx='3.5' ry='5' fill='%233fae5a'/%3E%3C/svg%3E") repeat-x left top / 120px 18px; }
@media (max-width: 759px) {
  /* Phones: the character peeks over the card's top edge, its lower half behind the card */
  .fest .hs-hero-card.has-char { margin-top: 96px; }
  .fest-char { left: 22px; right: auto; bottom: auto; top: -112px; height: 176px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); }
  .has-char .fd-crown { display: none; }   /* the crown's corner is the character's */
  .fd-pumpkin1 { width: 70px; left: -22px; } .fd-pumpkin2 { width: 44px; left: 36px; } .fd-pumpkin3 { width: 52px; }
  .fd-web { width: 70px; }
}

main.is-swapped { animation: page-in .35s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card, .pinl-row { transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(35, 31, 32, .4); }

@media (max-width: 1020px) {
  .hs-hero-in, .hs-cols, .hs-split, .hs-split-media { grid-template-columns: minmax(0, 1fr); }
  .live { margin: 0; max-width: 520px; }
  .hs-shout .rec { margin: 0; }
  .hs-media { order: 2; max-width: 520px; }
}
@media (max-width: 767px) {
  .hs-hero { padding: 48px 0 56px; min-height: 0; }
  .hs-hero-in { gap: 28px; }
  .hs-lead { margin-top: 14px; }
  .hs-hero-links { display: none; }
  .live { padding: 16px; border-radius: 20px; }
  .live-art { width: 92px; height: 92px; }
  .live-play { width: 50px; height: 50px; }
  .live-title { font-size: 17px; }
  .hs-head { margin-bottom: 20px; }
  .rp-row { padding: 8px 4px; gap: 12px; }
  .rp-time { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; transform: none; } }
.store-badge { display: block; height: 44px; width: auto; }
.hs .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .hs .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hs .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* ==== Footer (private/templates/footer.php) ======================================= */
.is-canvas .fband { display: none; }
/* The advertisers' card floats over the top edge of the footer, on the page's own background (Dana, 15 Oct 2026). */
.fband { --fband-lap: clamp(40px, 5vw, 64px); position: relative; z-index: 1; background: transparent;
  padding: clamp(24px, 3vw, 40px) var(--gutter) 0; margin-bottom: calc(-1 * var(--fband-lap)); }
.fband-in { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: #fff; border: 1px solid #f0e2df;
  display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; box-shadow: 0 28px 60px -30px rgba(29, 25, 23, .55); }
.fband-txt { flex: 1 1 520px; }
.fband-kicker { margin: 0 0 8px; font: 600 13px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.fband-h { margin: 0; font: 500 clamp(24px, 2.8vw, 34px)/1.15 var(--head); color: var(--ink); letter-spacing: -.01em; }
.fband-p { margin: 12px 0 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: #4a4445; }
.fband-act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fband-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; box-shadow: 0 10px 24px -12px rgba(227, 30, 37, .8); }
.fband-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.fband-btn:hover svg { transform: translateX(3px); }
.fband-link { font: 600 14px/1.2 var(--head); color: var(--ink); }
.fband-link:hover { color: var(--red); }

.ftr { background: #1d1917; color: rgba(255, 255, 255, .72); padding: clamp(48px, 6vw, 72px) var(--gutter) 0; font-size: 15px; }
.fband + .ftr { padding-top: calc(clamp(40px, 5vw, 64px) + clamp(48px, 6vw, 72px)); }   /* room for the card's lower part */
/* A page ending in a plain (uncoloured) section doesn't need its own bottom space before the card: the card brings its own. */
main:has(~ .fband) > .sec:last-of-type:not([style*="background"]) { padding-bottom: 8px; }
/* A page ending in a red section (Spotlight, Sponsors, About): the red carries on behind the card (Dana, 15 Oct 2026).
   That last section's red darkens downwards instead of diagonally, so it meets the band's red without a seam. */
body:has(main > .sec:last-of-type[style*="background-color:#E31E25" i]) .fband { background: linear-gradient(#b3141a calc(100% - var(--fband-lap)), transparent 0); }   /* red stops where the footer starts, so the card still overlaps it */
main:has(~ .fband) > .sec:last-of-type[style*="background-color:#E31E25" i] { background-image: linear-gradient(180deg, #E31E25 0%, #b3141a 100%); }
main:has(~ .fband) > .sec:last-of-type[style*="background-color:#E31E25" i] { padding-bottom: 24px; }
.ftr-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.ftr-logo img { display: block; width: 112px; height: auto; }
.ftr-brand p { margin: 18px 0 0; max-width: 340px; line-height: 1.65; font-size: 14.5px; }
.ftr-social { display: flex; gap: 10px; margin-top: 22px; }
.ftr-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .15s, transform .15s; }
.ftr-social a:hover { background: var(--red); transform: translateY(-2px); }
.ftr-social svg { width: 18px; height: 18px; }
.ftr-apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ftr-apps .store-badge { height: 40px; }
.ftr-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.ftr-col h3 { margin: 6px 0 6px; font: 600 14px/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.ftr-col a { color: rgba(255, 255, 255, .72); line-height: 1.3; transition: color .15s; }
.ftr-col a:hover { color: #fff; text-decoration: none; }
.ftr-contact a { display: inline-flex; align-items: center; gap: 10px; }
.ftr-contact svg { width: 18px; height: 18px; flex: none; }
.ftr-wa svg { color: #25d366; }
.ftr-mail svg, .ftr-tel svg { color: var(--red); }
.ftr-bottom { max-width: 1180px; margin: clamp(40px, 5vw, 56px) auto 0; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.ftr-legal { display: flex; gap: 20px; }
.ftr-legal a { color: rgba(255, 255, 255, .55); }
.ftr-legal a:hover { color: #fff; }
@media (max-width: 1020px) {
  .ftr-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .fband-act { width: 100%; }
}

/* ==== Listen live page (/listen-live/, private/tools/listen-page.php) ============== */
.ls { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #17110f; padding: clamp(40px, 7vw, 96px) var(--gutter); }
.ls-bg { position: absolute; inset: -80px; z-index: -2; background: radial-gradient(60% 80% at 30% 30%, #5a1616, #17110f 70%) center / cover; filter: blur(70px) saturate(1.3); opacity: .9; transform: scale(1.1); transition: background-image .6s; }
.ls::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 17, 15, .6), rgba(23, 17, 15, .85)); }
.ls-in { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ls-art { aspect-ratio: 1; }
.ls-cover { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: #1a1612; display: block; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.ls-cover.is-logo { object-fit: contain; padding: 18%; }
.ls .live-top { justify-content: flex-start; gap: 14px; }
.ls .live-badge { background: rgba(227, 30, 37, .18); color: #ffb3b0; }
.ls .eq i { background: #fff; }
.ls-label { margin: 22px 0 6px; font: 600 12px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ls-title { margin: 0; font: 600 clamp(30px, 4.4vw, 54px)/1.08 var(--head); color: #fff; letter-spacing: -.01em; }
.ls-artist { margin: 10px 0 0; font-size: clamp(17px, 1.8vw, 22px); color: rgba(255, 255, 255, .78); }
.ls-controls { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.ls-play { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 16px 34px -12px rgba(227, 30, 37, .9); transition: transform .2s, background-color .2s; }
.ls-play:hover { transform: scale(1.05); background: #f03a40; }
.ls-play svg { width: 32px; height: 32px; }
.ls-play .i-pause, .ls-play.is-on .i-play { display: none; }
.ls-play.is-on .i-pause { display: block; }
.is-loading .ls-play { animation: pulse 1s infinite alternate; }
.ls-like { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; display: grid; place-items: center; transition: border-color .15s, color .15s, background-color .15s; }
.ls-like:hover { border-color: #fff; }
.ls-like svg { width: 24px; height: 24px; }
.ls-like[aria-pressed=true] { color: #ff4b52; border-color: #ff4b52; }
.ls-like[aria-pressed=true] svg path { fill: currentColor; }
.ls-like.pop { animation: like-pop .35s ease-out; }
.ls-vol { display: flex; align-items: center; gap: 10px; margin-left: 6px; color: rgba(255, 255, 255, .75); }
.ls-vol svg { width: 22px; height: 22px; }
.ls-vol input { width: 130px; accent-color: #fff; }
.ls-note { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; color: rgba(255, 255, 255, .7); }
.ls-fact { margin-top: 10px; max-width: 560px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ls-fact-h { display: block; margin-bottom: 6px; font: 600 12px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: #ffb3b0; }
.ls-fact p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); }

/* On air now */
.oa { display: flex; gap: 18px; align-items: stretch; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #efe9ee; color: var(--ink); transition: box-shadow .2s, transform .2s; }
.oa:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 34px -20px rgba(35, 31, 32, .35); }
.oa:not(.has-show) { display: none; }
.oa-img { flex: none; width: 128px; aspect-ratio: 1; border-radius: 14px; background: #ece8ef center / cover; }
.oa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.oa .live-badge { align-self: flex-start; }
.oa-name { font: 600 21px/1.2 var(--head); }
.oa-sub { font-size: 15px; color: var(--muted); }
.oa-prog { height: 6px; border-radius: 6px; background: #f1ecef; overflow: hidden; margin-top: 4px; }
.oa-prog span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--red); transition: width .6s; }
.oa-time { display: flex; justify-content: space-between; gap: 10px; font: 500 13px/1 var(--head); color: var(--muted); font-variant-numeric: tabular-nums; }
.oa-sponsor { align-self: flex-start; margin-top: 4px; font: 600 12px/1 var(--head); color: var(--red); background: #fff1f0; border-radius: 20px; padding: 6px 10px; }
.oa-sponsor b, .oa-sponsor a { color: inherit; font-weight: 700; }
.cu-none { margin: 0; padding: 16px; border-radius: 16px; background: #fff; border: 1px dashed #e4dce3; color: var(--muted); font-size: 15px; }
.rp-pos { flex: none; width: 26px; text-align: center; font: 700 17px/1 var(--head); color: var(--red); font-variant-numeric: tabular-nums; }

/* Quick actions */
.qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qa-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #efe9ee; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.qa-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(35, 31, 32, .35); border-color: #e4dce3; }
.qa-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fdeeee; color: var(--red); }
.qa-ic svg { width: 22px; height: 22px; }
.qa-card.wa .qa-ic { background: #e6f9ee; color: #1aa356; }
.qa-t { font: 600 17px/1.2 var(--head); }
.qa-s { font-size: 14px; color: var(--muted); line-height: 1.45; }

@media (max-width: 900px) {
  .ls-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ls-art { width: min(300px, 78vw); }
  .ls .live-top, .ls-controls { justify-content: center; }
  .ls-fact { text-align: left; }
  .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ls-vol { display: none; }   /* phones: the buttons on the side of the phone */
  .oa-img { width: 92px; }
  .oa-name { font-size: 18px; }
}

.hs-h3 { margin: 0; font: 600 20px/1.2 var(--head); color: var(--ink); }
.lp-later { margin: 32px 0 16px; align-items: center; }
.lp-lead { margin: -12px 0 20px; }

/* Top 10: where to listen or buy — round icons at the end of each row */
.t10-links { flex: none; display: flex; gap: 6px; }
.t10-l { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #ece4ea; color: var(--ink);
  transition: border-color .15s, color .15s, transform .15s; }
.t10-l span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t10-l svg { width: 15px; height: 15px; }
.t10-l:hover { text-decoration: none; transform: translateY(-1px); }
.t10-apple:hover { border-color: #fa2d48; color: #fa2d48; }
.t10-spotify svg { color: #1db954; }
.t10-spotify:hover { border-color: #1db954; }
.t10-youtube svg { color: #ff0000; }
.t10-youtube:hover { border-color: #ff0000; }
@media (max-width: 420px) { .t10-links { gap: 4px; } .t10-l { width: 30px; height: 30px; } }

/* Listen live: the chart in two columns (1–5, 6–10) */
.lp-chart .rp-list { grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) { .lp-chart .rp-list { grid-template-rows: none; grid-auto-flow: row; } }

/* "Later today": a slim timeline */
.cu-line { gap: 0; background: #fff; border: 1px solid #efe9ee; border-radius: 18px; padding: 6px; }
.cu-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; color: var(--ink); position: relative; transition: background-color .15s; }
.cu-row:hover { background: #f7f5f8; text-decoration: none; }
.cu-row + .cu-row::before { content: ''; position: absolute; left: 66px; right: 10px; top: 0; border-top: 1px solid #f1ecef; }
.cu-t { flex: none; width: 46px; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.cu-t b { font: 700 16px/1 var(--head); color: var(--red); }
.cu-t small { font: 500 12px/1 var(--head); color: var(--muted); }
.cu-row .cu-img { width: 44px; height: 44px; border-radius: 10px; }
.cu-row .cu-name { font-size: 15px; }
.cu-row .cu-sub { font-size: 13px; }
.cu-line .cu-none { border: 0; background: none; padding: 12px; }

/* Recently played: tap a song to see where to listen again */
.rp-openable { flex-wrap: wrap; }
.rp-openable.is-open { background: #f7f5f8; }
.rp-dots { flex: none; width: 36px; height: 40px; margin-left: -6px; border: 0; border-radius: 50%; background: none; color: #b5adb3; cursor: pointer; display: grid; place-items: center; transition: color .15s, background-color .15s; }
.rp-dots:hover, .rp-dots[aria-expanded=true] { color: var(--ink); background: #efeaf0; }
.rp-dots svg { width: 20px; height: 20px; fill: currentColor; }
.rp-more { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 2px 66px; animation: song-in .25s ease-out; }
.rp-more[hidden] { display: none; }
.rp-more-t { font: 600 12px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rp-more .t10-l { width: auto; height: 32px; border-radius: 999px; padding: 0 12px; display: inline-flex; gap: 7px; font: 500 13px/1 var(--body); }
.rp-more .t10-l span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (max-width: 767px) { .rp-more { padding-left: 0; } }
.hs-tint .rp-row:hover, .hs-tint .rp-openable.is-open { background: rgba(255, 255, 255, .7); }

/* ==== Weather (private/weather.php) ============================================== */
.wx { --wx-a: #3f8fdc; --wx-b: #7cc4f5; position: relative; color: #fff; border-radius: 22px; padding: 20px 20px 14px; overflow: hidden;
  background: linear-gradient(150deg, var(--wx-a), var(--wx-b)); box-shadow: 0 20px 40px -26px rgba(20, 40, 80, .55); margin: 0 0 16px; }
.wx-partly { --wx-a: #4a7fbf; --wx-b: #92bde4; }
.wx-cloudy { --wx-a: #5d6b80; --wx-b: #9aa8ba; }
.wx-fog { --wx-a: #707a86; --wx-b: #b3bcc6; }
.wx-rain { --wx-a: #34445e; --wx-b: #5d7397; }
.wx-thunder { --wx-a: #262a44; --wx-b: #4b5274; }
.wx-snow { --wx-a: #6a86a8; --wx-b: #c6d6e8; }
.wx-night { --wx-a: #141d3c; --wx-b: #34477a; }
.wx-top { display: flex; justify-content: space-between; align-items: flex-start; }
.wx-town { font: 600 13px/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.wx-top .wx-ic { width: 64px; height: 64px; margin: -8px -6px 0 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15)); }
.wx-now { display: flex; align-items: flex-end; gap: 16px; margin-top: -10px; }
.wx-temp { font: 500 64px/1 var(--head); letter-spacing: -.03em; }
.wx-meta { display: grid; gap: 2px; padding-bottom: 6px; font-size: 13.5px; opacity: .92; }
.wx-cond { font: 600 15px/1.3 var(--head); opacity: 1; }
.wx-days { list-style: none; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .25); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
.wx-days li { display: grid; justify-items: center; gap: 2px; }
.wx-d { font: 600 12px/1 var(--head); text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.wx-days .wx-ic { width: 32px; height: 32px; }
.wx-hl { font-size: 13px; opacity: .85; white-space: nowrap; }
.wx-hl b { font-weight: 600; opacity: 1; }
.wx-credit { display: block; margin-top: 10px; text-align: right; font-size: 11px; color: rgba(255, 255, 255, .7); }
.wx-credit:hover { color: #fff; }
/* The blog sidebar's small card */
.wx-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; color: #fff; }
.wx-mini:hover { text-decoration: none; filter: brightness(1.05); }
.wx-mini-txt { display: grid; gap: 2px; }
.wx-mini-temp { font: 500 38px/1 var(--head); }
.wx-mini .wx-ic { width: 56px; height: 56px; flex: none; }
.wx-mini .wx-cond { font-size: 13px; font-weight: 500; }
.wx-mini .wx-credit { position: absolute; right: 12px; bottom: 6px; margin: 0; font-size: 10px; }
.wx-deg { font-size: .45em; vertical-align: .9em; margin-left: 2px; font-weight: 400; }

/* ==== Ads (private/ads.php) ===================================================== */
.ad { display: grid; justify-items: center; gap: 6px; }
.ad-label { font: 600 12px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: #a39ca2; }
.ad a { display: block; line-height: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 26px -18px rgba(35, 31, 32, .5); transition: transform .2s, box-shadow .2s; }
.ad a:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(35, 31, 32, .55); }
.ad img { display: block; max-width: 100%; height: auto; }
.ad-home { margin: 28px 0 0; justify-items: start; }
.ad-home img { width: 300px; }
.ad-article { margin: 32px auto; }
.ad-article img { width: 300px; }
.ad-sidebar img { width: 300px; }
.side .ad-sidebar { margin-top: 4px; }
.ad-top, .ad-footer { padding: 20px var(--gutter); background: var(--bg); }
.ad-top a, .ad-footer a { border-radius: 8px; }
.ad-top img, .ad-footer img { width: 970px; }
@media (max-width: 1100px) { .side .ad-sidebar { display: none; } }   /* the sidebar drops under the article: no banner there */
@media (max-width: 767px) {
  .ad-home, .ad-article { justify-items: center; }
  .ad-home img, .ad-article img { width: min(340px, 100%); }
  .ad-top img, .ad-footer img { width: 100%; }
}

/* ==== Article header, share, related (14 Oct 2026) ============================== */
.ahead { padding: clamp(40px, 6vw, 72px) 0 0; }
.ahead .pill { margin-bottom: 18px; }
.ahead h1 { margin: 0; max-width: 900px; font: 600 clamp(32px, 4.6vw, 54px)/1.1 var(--head); letter-spacing: -.015em; color: var(--ink); }
.ahead-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; color: var(--muted); font: 500 15px/1.4 var(--body); }
.ahead-meta span + span::before, .ahead-meta time + span::before { content: '·'; margin-right: 18px; }
.ahead + .wrap .prose { padding-top: 32px; }
.ahead + .wrap .side { padding-top: 32px; }
.ahead + .wrap .feat { border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(35, 31, 32, .45); margin-bottom: 36px; }
.share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.share-t { font: 600 14px/1 var(--head); color: var(--ink); margin-right: 6px; }
.share-b { height: 42px; min-width: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: 500 14px/1 var(--body); transition: transform .15s, border-color .15s, color .15s; }
.share-b:hover { transform: translateY(-1px); text-decoration: none; }
.share-b svg { width: 18px; height: 18px; }
.share-wa { color: #1aa356; } .share-wa:hover { border-color: #25d366; }
.share-fb { color: #1877f2; } .share-fb:hover { border-color: #1877f2; }
.share-x:hover { border-color: var(--ink); }
.share-copy.is-done { color: #1d7a3e; border-color: #1d7a3e; }
.related { background: #fff4f2; padding: clamp(48px, 7vw, 80px) 0; margin-top: 24px; }
.related .wrap { max-width: 1180px; }
.related .hs-h2 { margin-bottom: 28px; }
.related .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .related .pgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .ahead { padding-top: 28px; } .ahead-meta { font-size: 14px; } }
.share-native { background: var(--red); border-color: var(--red); color: #fff; }
.share-native:hover { background: #f03a40; }

/* Tall featured pictures: whole, at most 520px high, on a blurred copy of themselves */
/* Article and event pictures: one 16:9 frame everywhere (Dana, 15 Oct 2026). Posters (pic_is_poster) show whole on a blurred copy. */
.feat-169 { position: relative; aspect-ratio: 16 / 9; margin: 0 0 36px; overflow: hidden; border-radius: 18px; background: #1a1612; isolation: isolate; }
.prose .feat-169 img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; }
.feat-169.is-poster-fig::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: var(--feat) center / cover; filter: blur(30px) saturate(1.2) brightness(.8); }
.prose .feat-169.is-poster-fig img { object-fit: contain; }
.card-img, .bcard-img, .bfeat-img, .ev-img { aspect-ratio: 16 / 9; }
.is-poster { position: relative; overflow: hidden; isolation: isolate; background-image: none !important; }
.is-poster::before { content: ''; position: absolute; inset: -24px; background: var(--img) center / cover; filter: blur(22px) saturate(1.2) brightness(.8); }
.is-poster::after { content: ''; position: absolute; inset: 0; background: var(--img) center / contain no-repeat; }

/* ==== Article sidebar: Listen live, Coming up, weather, ad — stays in view (site.js decides if it fits) */
.side-in { display: flex; flex-direction: column; gap: 18px; }
.side-in.is-sticky { position: sticky; top: 96px; }
.side .live { max-width: none; margin: 0; padding: 16px; gap: 12px; border-radius: 20px; box-shadow: 0 16px 34px -24px rgba(35, 31, 32, .4); border: 1px solid #efe9ee; }
.side .live-art { width: 72px; height: 72px; }
.side .live-cover { border-radius: 12px; }
.side .live-cover.is-logo { padding: 10px; }
.side .live-play { width: 42px; height: 42px; border-width: 3px; right: -8px; bottom: -8px; }
.side .live-play svg { width: 18px; height: 18px; }
.side .live-main { gap: 16px; }
.side .live-title { font-size: 16px; }
.side .live-artist { font-size: 14px; }
.side .live-show { padding: 8px; }
.side .live-show-img { width: 40px; height: 40px; }
/* Coming up, in the site's card style */
.upnext { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; }
.upnext-k { font: 600 12px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.upnext-card { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; background: #fff; border: 1px solid #efe9ee; border-radius: 16px; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.upnext-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(35, 31, 32, .35); }
.upnext-img { width: 56px; height: 56px; border-radius: 12px; }
.upnext-name { font: 600 15px/1.25 var(--head); }
.upnext-sub, .upnext-time { color: var(--muted); font-size: 13px; }
.upnext-time { color: var(--red); font-weight: 600; }

/* ==== Blog (/blog/, /category/…/) ================================================ */
.blog-head { padding-bottom: 8px; }
.blog-head h1 { max-width: none; }
.blog-intro { margin: 14px 0 0; max-width: 640px; font-size: 18px; color: #4a4445; }
.blog-intro a { color: var(--red); font-weight: 600; white-space: nowrap; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.blog-chips .hs-chip.on { background: var(--red); border-color: var(--red); color: #fff; }
/* Topics as round icons; the name shows on hover/focus, and beside the icon on the open topic */
.blog-chips .topic-ic { position: relative; gap: 8px; justify-content: center; min-width: 40px; padding: 8px 10px; }
.topic-ic svg { flex: none; width: 20px; height: 20px; }
.topic-ic span { display: none; }
.topic-ic.on { padding: 8px 16px 8px 12px; }
.topic-ic.on span { display: inline; }
.topic-ic::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 5; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 13px/1.2 var(--body);
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none;
}
@media (max-width: 640px) {   /* All + seven icons on one row down to 340 px */
  .blog-chips { gap: 5px; }
  .blog-chips .hs-chip { min-height: 36px; padding: 6px 12px; }
  .blog-chips .topic-ic { min-width: 36px; padding: 6px 8px; }
  .blog-chips .topic-ic.on { padding: 6px 8px; }
  .topic-ic.on span { display: none; }   /* the page's heading already names it */
  .topic-ic svg { width: 18px; height: 18px; }
}
.topic-ic:not(.on):hover::after, .topic-ic:not(.on):focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.blog { padding-top: 32px; padding-bottom: clamp(56px, 8vw, 96px); }
.bfeat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: #fff; border-radius: 22px; overflow: hidden; color: var(--ink);
  box-shadow: 0 20px 44px -28px rgba(35, 31, 32, .4); margin-bottom: 32px; transition: transform .2s, box-shadow .2s; }
.bfeat:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 26px 50px -28px rgba(35, 31, 32, .5); }
.bfeat-img { align-self: center; background: #1a1612 center / cover; }
.bfeat-body { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; justify-content: center; }
.bfeat-new { font: 700 12px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.bfeat-t { font: 600 clamp(24px, 2.6vw, 32px)/1.2 var(--head); }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bcard { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; color: var(--ink); box-shadow: 0 10px 30px -24px rgba(35, 31, 32, .5); transition: transform .2s, box-shadow .2s; }
.bcard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(35, 31, 32, .5); }
.bcard-img { aspect-ratio: 16 / 9; background: #1a1612 center / cover; }
.bcard-img.is-none, .bfeat-img.is-none { display: grid; place-items: center; background: linear-gradient(140deg, #e31e25, #8f1015); }
.bcard-img.is-none img, .bfeat-img.is-none img { width: 42%; max-width: 200px; opacity: .95; }
.bcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1; }
.bcard-t { font: 600 19px/1.3 var(--head); }
.bcard-x { font-size: 15px; line-height: 1.55; color: #5d5659; }
.bcard-d { margin-top: auto; padding-top: 4px; font: 500 13px/1 var(--head); color: var(--muted); }
.blog-more { text-align: center; margin: 40px 0 0; }
.blog-none { color: var(--muted); }
@media (max-width: 1020px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bfeat { grid-template-columns: minmax(0, 1fr); } .bfeat-img { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .bgrid { grid-template-columns: minmax(0, 1fr); } .blog-chips .hs-chip { flex: none; } }

/* ==== Show pages (14 Oct 2026) =================================================== */
.shead { padding: clamp(40px, 6vw, 72px) 0 0; }
.shead-in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.shead-art { aspect-ratio: 1; border-radius: 22px; background: #1a1612 center / cover; box-shadow: 0 26px 50px -26px rgba(35, 31, 32, .55); }
.shead h1 { margin: 0; font: 600 clamp(34px, 5vw, 58px)/1.05 var(--head); letter-spacing: -.015em; color: var(--ink); }
.shead-sub { margin: 10px 0 0; font-size: clamp(17px, 1.8vw, 21px); color: #4a4445; }
.shead-when { margin: 18px 0 0; font: 600 17px/1.3 var(--head); color: var(--red); }
.shead-when span { color: var(--muted); font-weight: 500; font-size: 14px; }
.shead-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.shead-play { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; text-transform: none; font-size: 16px; box-shadow: 0 10px 24px -12px rgba(227, 30, 37, .8); }
.shead-play svg { width: 18px; height: 18px; fill: currentColor; }
.listen-btn-wrap { margin: 0 0 28px; }
.shead-sponsor { margin: 18px 0 0; display: inline-block; font: 600 13px/1 var(--head); color: var(--red); background: #fff1f0; border-radius: 20px; padding: 8px 12px; }
.shead-sponsor a, .shead-sponsor b { color: inherit; font-weight: 700; }
.sbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: clamp(48px, 6vw, 72px); }
.sbody .prose { padding-top: 40px; max-width: 720px; }
.sbody-h { margin-top: 0; }
.swhen { margin-top: 40px; background: #fff; border: 1px solid #efe9ee; border-radius: 18px; padding: 20px; display: grid; gap: 10px; }
.swhen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.swhen li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1ecef; font-size: 15px; }
.swhen li:last-child { border-bottom: 0; }
.swhen b { color: var(--red); font: 600 15px/1.3 var(--head); white-space: nowrap; }
.swhen .hint { margin: 0; font-size: 13px; color: var(--muted); }
.ms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ms-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; color: var(--ink); }
.ms-card:hover { text-decoration: none; }
.ms-img { width: 100%; aspect-ratio: 1; border-radius: 18px; background: #ece8ef center / cover; box-shadow: 0 14px 30px -22px rgba(35, 31, 32, .5); transition: transform .2s; }
.ms-card:hover .ms-img { transform: translateY(-3px); }
.ms-name { font: 600 17px/1.25 var(--head); margin-top: 4px; }
.ms-when { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .shead-in, .sbody { grid-template-columns: minmax(0, 1fr); }
  .shead-art { width: min(240px, 70vw); }
  .ms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swhen { margin-top: 0; }
}
.shead { padding-bottom: 12px; }
.sbody .prose { padding-top: 48px; padding-bottom: 0; }
.swhen { margin-top: 48px; }
@media (max-width: 900px) {
  .sbody { gap: 0; }
  .swhen { order: -1; margin-top: 32px; }
  .sbody .prose { padding-top: 32px; }
}
.shead-play .i-play, .shead-play .i-pause { display: inline-flex; }
.shead-play .i-pause, .shead-play.is-on .i-play { display: none; }
.shead-play.is-on .i-pause { display: inline-flex; }
.shead-play.is-on { background: var(--ink); }

/* ==== Live Music page (/live-music-marbella/), polish on the imported design ======= */
#gigs { background-color: var(--bg) !important; }   /* grey, to stand apart from the white intro; event cards are white */
.sec:has(+ #gigs) { padding-bottom: 56px; }
:is(#gigs, #venues, #festivals) h2 { font-weight: 500 !important; letter-spacing: -.01em; }
:is(#gigs, #venues, #festivals) h2::before { display: block; margin-bottom: 10px; font: 600 13px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
#gigs h2::before { content: 'Music events'; }
#venues h2::before { content: 'Where to go'; }
#festivals h2::before { content: 'Festivals'; }
@media (max-width: 767px) {
  /* Venue and festival cards two by two, so the list isn't nine screens long */
  /* the cards sit in rows of three: let them all flow as one two-column grid */
  :is(#venues, #festivals) :has(> .el-row > .el[style*="flex-basis:32%"]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; }
  :is(#venues, #festivals) .el-row:has(> .el[style*="flex-basis:32%"]) { display: contents; }
  :is(#venues, #festivals) .el-row > .el[style*="flex-basis:32%"] { width: auto; --pad: 10px 10px 14px 10px !important; }
  :is(#venues, #festivals) :has(> .el-row > .el[style*="flex-basis:32%"]) > .w { grid-column: 1 / -1; }
  :is(#venues, #festivals) :has(> .el-row > .el[style*="flex-basis:32%"]) > :is(.w-spacer, .w-menu-anchor) { display: none; }
  :is(#venues, #festivals) .el-row > .el img { height: 110px !important; }
  :is(#venues, #festivals) .el-row > .el .w-image { margin-bottom: 10px !important; }
  :is(#venues, #festivals) .el-row > .el .ilist { font-size: 14px !important; }
  :is(#venues, #festivals) .el-row > .el h3, :is(#venues, #festivals) .el-row > .el h4 { font-size: 16px !important; }
}

/* Home page on phones: the recorder first, then the text, WhatsApp and the ad */
@media (max-width: 1020px) { .hs-shout .hs-split-side { order: -1; } .hs-shout .rec { margin: 0 auto; } }

/* Event lists: one Details button per event (tickets are on the event page) */
.evlist .ev-more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--red); color: var(--red); font: 600 14px/1 var(--head); white-space: nowrap; transition: background-color .15s, color .15s; }
.evlist .ev-more:hover { background: var(--red); color: #fff; text-decoration: none; }
.evlist .ev-more svg { width: 16px; height: 16px; }

/* Site review fixes (15 Oct 2026) */
.card-img.is-none { display: grid; place-items: center; background: linear-gradient(140deg, #e31e25, #8f1015); }
.card-img.is-none img { width: 42%; max-width: 200px; }
/* A link inside a big heading (Emergency numbers: 112) takes the heading's colour, not the red link colour. */
.w-heading a { color: inherit; }
/* WordPress side padding on a widget (Get a quote's form: 100px each side) is for computers only. */
@media (max-width: 767px) { .w-qt-cf7[style*="padding:"] { padding-left: 0 !important; padding-right: 0 !important; } }

/* Home page advert: a third column beside Recently played and Coming up on wide screens (Dana, 15 Oct 2026);
   with no advert running the column goes and the two lists share the row as before. Below 1200px it sits under both lists. */
.hs-ad:empty { display: none; }
.hs-ad .ad-home { margin: 0; justify-items: center; }
.hs-ad .ad-home img { width: 100%; max-width: 300px; }
@media (min-width: 1200px) {
  .hs-cols:has(> .hs-ad:not(:empty)) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 300px; gap: 40px; }
  .hs-ad { padding-top: 102px; }   /* lines the advert up with the Coming up cards, under the headings */
}
@media (max-width: 1199px) { .hs-cols:has(> .hs-ad:not(:empty)) > .hs-ad { grid-column: 1 / -1; } }

/* Weekly schedule page (15 Oct 2026) */
.sched-upnext { margin-top: 28px; max-width: 460px; }
.sig-pic { position: relative; display: block; border-radius: 14px; overflow: hidden; }
.sig-pic::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
.sig-pic img { display: block; }
.sig-when { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font: 600 15px/1.35 var(--head); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
/* Signature shows: descriptions take three lines' room, "About the show" at the bottom of every card, level across the row. */
.el:has(> .w-image .sig-pic) > .w-text-editor p { min-height: calc(3 * 1.65em); }
.el:has(> .w-image .sig-pic) > .w-icon-list { margin-top: auto; }
.sched-onair .onair-big { padding: 0; background: none; border-radius: 20px; box-shadow: 0 22px 46px -24px rgba(35, 31, 32, .55); }
.sched-onair .onair-big-img { border-radius: 20px; }
/* Shows page on phones: "Now on air" before "Upcoming show" (Dana, 15 Oct 2026). */
@media (max-width: 767px) {
  .el:has(> .sched-upnext) { display: contents; }
  .el:has(> .sched-upnext) ~ .sched-onair, .el-row:has(.sched-upnext) > .sched-onair { order: 1; }
  .sched-upnext { order: 2; margin-top: 0; max-width: none; }
  .el-row:has(.sched-upnext) > *, .el-row:has(.sched-upnext) > .el > * { align-self: stretch; }
}