/* Bimbo Jones HQ: the new fan-portal design. Night-club black, the old site's purple, hot pink
   and yellow, neon pink Monoton buttons, Bungee headings, and a 1970s funk streak. */
:root {
  --ink: #0b0610;
  --ink-2: #150b1c;
  --ink-3: #21112b;
  --line: #3a2348;
  --text: #fbf6f2;
  --muted: #c7bacf;
  --pink: #ff2fa6;
  --neon: #ff3fae;
  --neon-soft: #ffd3ee;
  --purple: #7d4091;
  --violet: #a35bd6;
  --lilac: #c9b3d6;
  --yellow: #ffe62e;
  --orange: #ff8a2a;
  --cyan: #2fe0d2;
  --red: #ff3a2a;
  --wrap: 1180px;
  --veil: rgba(11, 6, 16, .48);
  --veil-2: rgba(21, 11, 28, .58);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.hq {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 17px/1.6 "Outfit", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}
/* Lee's photo of a Miami Beach pool sits behind every page; the bands over it are see-through */
body.hq::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(11, 6, 16, .34), rgba(11, 6, 16, .46)), url(../images/hq/miami-pool.webp) center / cover no-repeat;
}
a { color: var(--neon); }
a:hover { color: var(--yellow); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
p { margin: 0 0 1em; }
.hq-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hq-skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--yellow); color: #000; padding: 8px 14px; font-weight: 800; }
.hq-skip:focus { top: 12px; }
.hq-small { font-size: 14px; color: var(--muted); }
.hq-center { text-align: center; margin-top: 22px; }

.hq-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* --------------------------------------------------------------- buttons */
.btn-neon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: "Monoton", "Bungee", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--neon-soft);
  text-shadow: 0 0 3px var(--neon), 0 0 10px var(--neon);
  background: #000;
  border: 1.5px solid var(--neon);
  border-radius: 999px;
  padding: .85em 1.5em;
  box-shadow: 0 0 10px rgba(255, 63, 174, .55), inset 0 0 10px rgba(255, 63, 174, .25);
  cursor: pointer;
  transition: box-shadow .2s, color .2s, transform .2s;
}
.btn-neon:hover {
  color: #fff6b0;
  box-shadow: 0 0 18px rgba(255, 63, 174, .9), inset 0 0 14px rgba(255, 63, 174, .45);
  transform: translateY(-1px);
}
.btn-neon.sm { font-size: 12.5px; padding: .75em 1.25em; }
.btn-neon.big { font-size: 17px; padding: 1em 1.9em; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  border: 1.5px solid var(--lilac);
  border-radius: 999px;
  padding: .6em 1.15em;
  transition: background .2s, color .2s;
}
.btn-ghost:hover { background: var(--lilac); color: #14061a; }
.hq-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------- header */
/* The logo and the page links share one line on big screens. Below that the links get a row of
   their own, and only that row stays at the top as the page scrolls (the negative top lets the
   logo row slide away). On phones the row of links scrolls sideways. */
.hq-top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: rgba(5, 0, 6, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--neon);
  box-shadow: 0 0 16px rgba(255, 63, 174, .4);
  --logo-h: 72px;
}
body.hq::after { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: #050006; }
.hq-top-in {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px 16px;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
}
.hq-logo { display: inline-flex; align-items: center; height: var(--logo-h); text-decoration: none; flex: none; }
.hq-logo img { height: var(--logo-h); width: auto; filter: drop-shadow(0 0 8px rgba(255, 230, 46, .3)); }
.hq-nav { margin-left: auto; min-width: 0; }
/* Home: the logo big and centred, half the screen wide (no taller than the screen allows), on a wall of our record covers
   with rays of light behind it (Big glow, Marc's pick of 29 October); its row scrolls away and the page links stay pinned */
.hq-top.hq-top-big { --big-w: min(50vw, 87.5vh); --big-h: calc(var(--big-w) * .607); top: calc(env(safe-area-inset-top, 0px) - var(--big-h) - 16px); }
.hq-top-art {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--big-h) + 16px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
/* the covers sit edge to edge in straight rows (images/hq/cover-wall.webp, from tools/make_cover_wall.py) */
.hq-covers { position: absolute; inset: 0; background: url("../images/hq/cover-wall.webp") 50% 0 / auto 100% repeat-x; opacity: .5; }
@media (max-width: 700px) { .hq-covers { background-image: url("../images/hq/cover-wall-phone.webp"); } }
/* the rays, drawn by hq.js: each glows and fades in its own time */
.hq-rays { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a thick glow right behind the logo, so no rays show through it, slowly breathing */
.hq-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse calc(var(--big-w) * .62) calc(var(--big-h) * .66) at 50% 50%, rgba(255, 214, 240, .92), rgba(255, 120, 205, .82) 34%,
    rgba(255, 63, 174, .55) 60%, rgba(150, 70, 255, .2) 82%, transparent);
  animation: hq-breathe 7s ease-in-out infinite;
}
@keyframes hq-breathe { 0%, 100% { opacity: .86; } 50% { opacity: 1; } }
.hq-top-art.is-paused .hq-glow { animation-play-state: paused; }
.hq-top-big .hq-top-in { position: relative; flex-wrap: wrap; justify-content: center; }
.hq-top-big .hq-logo { flex: 1 1 100%; justify-content: center; height: var(--big-h); }
/* a faint pink edge round the logo ties it in with the glow behind it (Marc's pick of the four) */
.hq-top-big .hq-logo img { width: var(--big-w); height: var(--big-h); filter: drop-shadow(0 0 6px rgba(255, 63, 174, .32)); }
.hq-top-big .hq-nav { flex: 1 1 100%; margin-left: 0; }
.hq-top-big .hq-nav ul { justify-content: center; }
.hq-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.hq-nav a {
  display: block;
  font-family: "Monoton", "Bungee", sans-serif;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--neon-soft);
  text-shadow: 0 0 3px var(--neon), 0 0 9px var(--neon);
  background: #000;
  border: 1px solid rgba(255, 63, 174, .55);
  border-radius: 999px;
  padding: 7px 13px;
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.hq-nav a:hover, .hq-nav a[aria-current="page"] {
  color: #fff6b0;
  border-color: var(--neon);
  box-shadow: 0 0 12px rgba(255, 63, 174, .8);
}

@media (max-width: 1020px) {
  .hq-top { --logo-h: 64px; top: calc(env(safe-area-inset-top, 0px) - var(--logo-h) - 16px); }
  .hq-top-in { flex-wrap: wrap; padding-bottom: 10px; }
  .hq-nav { flex: 1 1 100%; margin-left: 0; }
  .hq-nav ul { justify-content: center; }
}
@media (max-width: 700px) {
  .hq-top { --logo-h: 58px; }
  .hq-nav {
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .hq-nav::-webkit-scrollbar { display: none; }
  .hq-nav ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 2px 44px 4px max(16px, env(safe-area-inset-left, 0px)); }
  .hq-nav a { font-size: 14px; padding: 8px 12px; }
}

/* --------------------------------------------------------------- headings */
.hq-head { margin: 0 0 16px; }
.hq-kicker {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 6px;
}
.hq-title {
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.04;
  margin: 0;
  color: var(--neon-soft);
  text-shadow: 0 0 4px var(--neon), 0 0 18px var(--neon), 0 0 40px rgba(255, 63, 174, .45);
  text-wrap: balance;
}
.hq-lead { font-size: clamp(18px, 2vw, 21px); max-width: 62ch; color: #f1e8f4; text-shadow: 0 1px 14px rgba(11, 6, 16, .9); }
.hq-band { position: relative; padding-block: clamp(22px, 2.6vw, 32px); }   /* Marc, 29 October: smaller gaps between sections */
.hq-band > .hq-wrap > :last-child { margin-bottom: 0; }

/* 1970s stripes */
.hq-stripes {
  height: 24px;
  background: linear-gradient(var(--orange) 0 25%, var(--pink) 25% 50%, var(--violet) 50% 75%, var(--yellow) 75%);
}

/* ------------------------------------------------------------------ hero */
.hq-hero { position: relative; background: #07060c; }
.hq-hero-scene .nb { min-height: 300px; }
/* Marc, 29 October: Lee's camper van is a horn. Only the van takes clicks on the banner; it hops and
   flashes its headlights while the air horn blows */
.hq-hero .nb-svg, .hq-hero .nb-svg * { pointer-events: none; }
.hq-hero .nb-van-hit { pointer-events: all; cursor: pointer; }
/* and the O in SOUL calls the rainbow, the C in RECORDS the cat (js/hq.js) */
.hq-hero .nb-hit { pointer-events: all; cursor: pointer; }
.nb-car-v.is-honking > g { animation: nb-hop .42s ease-out 2; }
.nb-car-v.is-honking image[href$="nb-van-beam.webp"] { animation: nb-flash .42s steps(1) 9; }
@keyframes nb-hop { 0%, 100% { translate: 0 0; } 35% { translate: 0 -10px; } 70% { translate: 0 1.5px; } }
@keyframes nb-flash { 0% { opacity: .08; } 50% { opacity: 1; } }

/* the ghetto blaster on the night banner, with the Mega Mix behind its play button */
.bb {
  position: absolute;
  z-index: 3;
  right: clamp(10px, 3vw, 44px);
  bottom: 0;
  width: clamp(145px, 20.4vw, 289px);
}
.bb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bb-btn.is-soon { cursor: default; }
.bb-btn:focus-visible { outline: none; }
.bb-btn:focus-visible .bb-box { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 18px; }
.bb-box { position: relative; display: block; width: 100%; }
.bb-art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 -2px 16px rgba(0, 0, 0, .7)); }
.bb-play {
  position: absolute;
  left: 50%;
  top: 62.5%;
  display: grid;
  place-items: center;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(14px, 1.75vw, 24px);
  color: #fff;
  background: radial-gradient(circle at 40% 35%, #ff86cc, var(--pink) 58%, #a8005f);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(255, 47, 166, .45), 0 0 18px rgba(255, 47, 166, .95);
  transform: translate(-50%, -50%);
  transition: transform .25s, opacity .25s;
}
.bb-play i { margin-left: .14em; }
/* while it plays the badge steps aside so the reels show; the label keeps the pause sign */
.is-playing .bb-play { opacity: 0; transform: translate(-50%, -50%) scale(.62); }
.bb-btn.is-playing:hover .bb-play, .bb-btn.is-playing:focus-visible .bb-play { opacity: .9; }
.is-playing .bb-play i { margin-left: 0; }
.bb-led { fill: #4a0d16; }
.is-playing .bb-led { fill: #39ff7a; }
.bb-cone, .bb-reel { transform-box: fill-box; transform-origin: center; }
.bb-btn:hover .bb-cone, .bb-btn:focus-visible .bb-cone, .is-playing .bb-cone { animation: bb-thump .47s ease-out infinite; }
.bb-btn:hover .bb-tw, .bb-btn:focus-visible .bb-tw, .is-playing .bb-tw { animation-duration: .235s; }
.is-playing .bb-reel { animation: bb-spin 1.8s linear infinite; }
/* the VU needles rest on the left and swing to the music; the play key stays down while it plays */
.bb-vu { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(-44deg); transition: transform .5s; }
.is-playing .bb-vu { animation: bb-vu 1.15s ease-in-out infinite; }
.is-playing .bb-vu-r { animation-duration: .95s; animation-delay: -.45s; }
.bb-key { transition: transform .15s; }
.is-playing .bb-key-play { transform: translateY(2.5px); }
/* Marc, 29 October: the skip bar in the slot along the bottom of the boom box, to jump anywhere in
   the mix; the time shows over it while you point at it or drag */
.bb { --pos: 0; }
.bb-seek {
  position: absolute;
  left: 7.3%;
  width: 85.4%;
  top: calc(93.45% - 9px);
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: none;
}
.bb-seek[hidden], .bb-time[hidden] { display: none; }
.bb-seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pink) calc(var(--pos) * 100%), #3b3d49 calc(var(--pos) * 100%));
}
.bb-seek::-moz-range-track { height: 5px; border-radius: 3px; background: #3b3d49; }
.bb-seek::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--pink); }
.bb-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pink);
  box-shadow: 0 0 8px rgba(255, 47, 166, .95);
}
.bb-seek::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--pink); box-shadow: 0 0 8px rgba(255, 47, 166, .95); }
.bb-seek:focus { outline: none; }
.bb-seek:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; border-radius: 9px; }
.bb-time {
  position: absolute;
  bottom: calc(6.55% + 13px);
  left: calc(7.3% + 6.5px + (85.4% - 13px) * var(--pos));
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  font: 800 11px/1.3 "Outfit", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: #14061a;
  border: 1.5px solid var(--pink);
  box-shadow: 0 0 10px rgba(255, 47, 166, .6);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.bb-seek:hover + .bb-time, .bb-seek:focus-visible + .bb-time, .bb.is-seeking .bb-time { opacity: 1; }
/* a bigger target for fingers */
@media (pointer: coarse) { .bb-seek { top: calc(93.45% - 14px); height: 28px; } }
@keyframes bb-thump { 0% { transform: scale(1.08); } 60%, 100% { transform: scale(1); } }
@keyframes bb-spin { to { transform: rotate(360deg); } }
@keyframes bb-vu { 0%, 100% { transform: rotate(-24deg); } 18% { transform: rotate(16deg); } 34% { transform: rotate(-8deg); } 52% { transform: rotate(30deg); } 70% { transform: rotate(2deg); } 86% { transform: rotate(22deg); } }

/* --------------------------------------------------------- what's new */
.hq-new-band { background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(255, 47, 166, .22), transparent 60%), var(--veil); }
.hq-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.hq-new-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background: rgba(10, 4, 14, .85);
  border: 1.5px solid var(--neon);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 0 18px rgba(255, 63, 174, .35);
}
.hq-new-art { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.hq-new-icon { display: grid; place-items: center; font-size: 58px; color: var(--yellow); background: radial-gradient(circle at 50% 40%, #4a1a5a, #12061a 70%); border: 2px solid var(--violet); }
.hq-new-title { font-family: "Bungee", sans-serif; font-weight: 400; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.08; margin: 0 0 4px; color: #fff; text-wrap: balance; }
.hq-new-by { font-weight: 800; color: var(--neon); margin: 0 0 6px; }
.hq-new-blurb { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
@media (max-width: 520px) {
  .hq-new-card { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .hq-new-art { width: 88px; height: 88px; }
  .hq-new-icon { font-size: 38px; }
}

/* ---------------------------------------------------------------- ticker */
/* under the night banner on Home and under the header on Work With Us, in the menu's disco
   lettering on black */
.hq-ticker {
  background: #000;
  color: var(--neon-soft);
  border-bottom: 2px solid var(--neon);
  box-shadow: 0 0 14px rgba(255, 63, 174, .45);
  overflow: hidden;
  font-family: "Monoton", "Bungee", sans-serif;
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 0 3px var(--neon), 0 0 10px var(--neon);
  white-space: nowrap;
}
.hq-hero + .hq-ticker { border-top: 2px solid var(--neon); }
.hq-ticker-in { display: flex; width: max-content; animation: hq-scroll 60s linear infinite; }
.hq-ticker:hover .hq-ticker-in { animation-play-state: paused; }
.hq-ticker-track { display: flex; align-items: center; gap: 30px; padding: 12px 15px; }
.hq-ticker-track i { color: var(--yellow); text-shadow: 0 0 8px var(--yellow); font-size: .55em; }
@keyframes hq-scroll { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- welcome */
.hq-welcome {
  padding-top: clamp(18px, 2vw, 24px);
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(125, 64, 145, .5), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 63, 174, .07) 0 6deg, transparent 6deg 12deg),
    var(--veil);
}
.hq-welcome-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 60px); align-items: center; }
.hq-welcome-top > * { min-width: 0; }
.hq-welcome .hq-title { font-size: clamp(30px, 4.2vw, 52px); }
.hq-duo {
  margin: 0;
  max-width: 640px;
  border: 5px solid #fff;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(-1.6deg);
  box-shadow: 0 0 0 5px var(--pink), 0 0 34px rgba(255, 63, 174, .6), 0 26px 60px rgba(0, 0, 0, .6);
}
.hq-duo img { width: 100%; height: auto; }
@media (max-width: 860px) {
  .hq-welcome-top { grid-template-columns: minmax(0, 1fr); }
  .hq-duo { margin-inline: auto; }
}
.hq-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.hq-stat { background: rgba(10, 4, 14, .78); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 18px; }
.hq-stat-n {
  font-family: "Bungee", sans-serif;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1;
  margin: 0 0 8px;
  background: linear-gradient(180deg, var(--yellow) 10%, var(--orange) 55%, var(--pink) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 138, 42, .35));
}
.hq-stat-l { font-size: 15px; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .hq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------- the voice (KE) */
.hq-voice {
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 47, 166, .35), transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(47, 224, 210, .18), transparent 40%),
    linear-gradient(135deg, rgba(44, 11, 52, .72), rgba(18, 6, 26, .6) 70%);
}
.hq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hq-split > * { min-width: 0; }
@media (max-width: 860px) { .hq-split { grid-template-columns: minmax(0, 1fr); } }
.hq-arch { margin: 0; border-radius: 300px 300px 24px 24px; overflow: hidden; border: 6px solid var(--yellow); box-shadow: 0 0 0 6px var(--pink), 0 0 0 12px var(--violet), 0 20px 60px rgba(0, 0, 0, .6); max-width: 520px; }
.hq-arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 72% 30%; }

/* ---------------------------------------------------------- the crate */
.hq-crate-band { background: linear-gradient(180deg, var(--veil) 0%, rgba(26, 11, 34, .68) 100%); }
.hq-crate {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 70px max(16px, calc((100vw - var(--wrap)) / 2 + 16px)) 26px;
  scroll-padding-inline: max(16px, calc((100vw - var(--wrap)) / 2 + 16px));
  scrollbar-color: var(--pink) #1a0b22;
}
.hq-crate .sleeve { flex: none; width: 230px; scroll-snap-align: start; }
.sleeve { position: relative; }
.sleeve-face {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .3s;
}
.sleeve:hover .sleeve-face { transform: rotate(-2deg); }
.sleeve-disc {
  position: absolute;
  z-index: 0;
  left: 6%;
  top: 4%;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--yellow) 0 13%, #111 13.5% 15%, transparent 15.5%),
    repeating-radial-gradient(circle, #141014 0 2px, #222 2.5px 3.5px);
  box-shadow: 0 0 0 2px #000;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2);
}
.sleeve:hover .sleeve-disc, .sleeve:focus-within .sleeve-disc { transform: translateY(-34%) rotate(40deg); }
.sleeve-no1 {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-family: "Bungee", sans-serif;
  font-size: 18px;
  color: #14061a;
  background: var(--yellow);
  border-radius: 50%;
  transform: rotate(-12deg);
  box-shadow: 0 0 0 3px #14061a, 0 4px 10px rgba(0, 0, 0, .4);
}
.sleeve-artist { font-family: "Bungee", sans-serif; font-weight: 400; font-size: 21px; line-height: 1.05; margin: 0 0 6px; overflow-wrap: anywhere; }
.sleeve-title { font-weight: 800; font-size: 15px; line-height: 1.25; margin: 0 0 4px; }
.sleeve-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin: 0; }
.sleeve-chart { font-size: 12.5px; color: var(--muted); margin: 12px 0 8px; line-height: 1.35; }
.sleeve-face.has-art { padding: 0; background: #000; }
.sleeve-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sleeve-cap { font-weight: 800; font-size: 15px; line-height: 1.25; margin: 12px 0 0; }
.sleeve-cap span { display: block; font-family: "Bungee", sans-serif; font-weight: 400; font-size: 17px; }
.sleeve-cap + .sleeve-chart { margin-top: 4px; }
.sleeve-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  color: #14061a;
  background: var(--neon);
  border-radius: 999px;
  padding: 5px 12px;
}
.sleeve-listen:hover { background: var(--yellow); color: #14061a; }
.sleeve-more {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 1;
  border: 2px dashed var(--neon);
  border-radius: 6px;
  font-family: "Bungee", sans-serif;
  font-size: 22px;
  text-align: center;
  text-decoration: none;
  color: var(--neon-soft);
}
.sleeve-more i { font-size: 28px; color: var(--yellow); }

/* sleeve colours and patterns */
.t0 .sleeve-face, .hq-rel-art.t0 { background-color: #ff2fa6; color: #fff; }
.t1 .sleeve-face, .hq-rel-art.t1 { background-color: #ffe62e; color: #14061a; }
.t2 .sleeve-face, .hq-rel-art.t2 { background-color: #1b3f8a; color: #fff; }
.t3 .sleeve-face, .hq-rel-art.t3 { background-color: #7d4091; color: #ffe62e; }
.t4 .sleeve-face, .hq-rel-art.t4 { background-color: #ff8a2a; color: #14061a; }
.t5 .sleeve-face, .hq-rel-art.t5 { background-color: #2fe0d2; color: #14061a; }
.t6 .sleeve-face, .hq-rel-art.t6 { background-color: #14061a; color: #ff3fae; }
.t7 .sleeve-face, .hq-rel-art.t7 { background-color: #c9b3d6; color: #2a0a34; }
.p-rays .sleeve-face { background-image: repeating-conic-gradient(from 0deg at 100% 0%, rgba(255, 255, 255, .2) 0 5deg, transparent 5deg 10deg); }
.p-stripes .sleeve-face { background-image: repeating-linear-gradient(-35deg, rgba(0, 0, 0, .14) 0 14px, transparent 14px 28px); }
.p-dots .sleeve-face { background-image: radial-gradient(rgba(255, 255, 255, .28) 2.5px, transparent 3px); background-size: 14px 14px; }
.p-rings .sleeve-face { background-image: repeating-radial-gradient(circle at 0% 100%, rgba(0, 0, 0, .16) 0 10px, transparent 10px 20px); }
.p-wave .sleeve-face { background-image: linear-gradient(170deg, transparent 52%, rgba(255, 255, 255, .22) 52% 60%, transparent 60% 66%, rgba(0, 0, 0, .18) 66% 74%, transparent 74%); }

/* the full crate on the Music page */
.hq-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 6px; }
.chip {
  font: 700 15px "Outfit", sans-serif;
  color: var(--text);
  background: var(--ink-3);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--neon); border-color: var(--neon); color: #14061a; }
.hq-search { display: inline-flex; align-items: center; gap: 8px; background: var(--ink-3); border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 14px; }
.hq-search input { font: 16px "Outfit", sans-serif; color: var(--text); background: transparent; border: 0; padding: 4px 0; width: 210px; max-width: 46vw; }
.hq-search input:focus { outline: none; }
.hq-search:focus-within { border-color: var(--yellow); }
.hq-grid-crate { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 46px 22px; padding-top: 60px; }
.hq-grid-crate .sleeve[hidden] { display: none; }

/* ------------------------------------------------- our other disguises */
/* each alias on a "Hello, my name is" badge, written in by hand */
.hq-alias-band { background: radial-gradient(ellipse 60% 80% at 0% 100%, rgba(47, 224, 210, .16), transparent 60%), var(--veil); }
.hq-aliases { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 26px 20px; }
.hq-alias {
  --tag: var(--pink);
  --tag-ink: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fffdf8;
  color: #14061a;
  border-radius: 16px;
  border-bottom: 12px solid var(--tag);
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
  transform: rotate(-1.6deg);
  transition: transform .2s;
}
.hq-alias:nth-child(4n+2) { --tag: var(--cyan); --tag-ink: #14061a; transform: rotate(1.3deg); }
.hq-alias:nth-child(4n+3) { --tag: var(--orange); --tag-ink: #14061a; transform: rotate(-.8deg); }
.hq-alias:nth-child(4n) { --tag: var(--violet); transform: rotate(1.8deg); }
.hq-alias:hover { transform: rotate(0) scale(1.02); }
.hq-alias-hello {
  background: var(--tag);
  color: var(--tag-ink);
  text-align: center;
  padding: 10px 12px 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.15;
}
.hq-alias-hello b { display: block; font-family: "Bungee", sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .08em; }
.hq-alias-name {
  font-family: "Permanent Marker", "Bungee", cursive;
  font-size: clamp(30px, 3.2vw, 38px);
  line-height: 1.1;
  text-align: center;
  margin-top: auto;
  padding: 20px 12px 6px;
  overflow-wrap: anywhere;
}
.hq-alias-what { margin-bottom: auto; text-align: center; font-size: 15px; line-height: 1.45; color: #4a3a52; padding: 0 16px 20px; }
@media (max-width: 520px) {
  .hq-alias-hello { font-size: 10.5px; padding: 8px 8px 7px; }
  .hq-alias-hello b { font-size: 24px; }
  .hq-alias-name { font-size: 24px; padding: 14px 8px 4px; }
  .hq-alias-what { font-size: 13.5px; padding: 0 10px 14px; }
}

/* ------------------------------------------------------ work with us */
/* the studio photo in its own colours, with a yellow wash only behind the words, and solid yellow
   under the service cards. Marc, 29 October: the photo sits in a room of its own under the words,
   so your three faces show between the words and the boxes, whatever the screen */
.hq-work-band { background: var(--yellow); color: #14061a; isolation: isolate; }
.hq-work-intro {
  --pw: max(100vw, 900px);                  /* the photo's width */
  --px: 50%;                                /* where it sits across the band */
  --room: calc(var(--pw) * .165 - 2px);     /* the room under the words for your faces */
  --under: 420px;                           /* how far the photo carries on behind the boxes */
  --tx: max(16px, 50vw - 574px);            /* where the words start */
  /* the photo's bottom and top edges, measured up from the bottom of the photo layer: your faces
     start 4px above the end of the words, where the photo is 16% of its width down */
  --ph-bottom: calc(var(--under) + var(--room) + 4px - var(--pw) * .59);
  --ph-top: calc(var(--under) + var(--room) + 4px + var(--pw) * .16);
  position: relative;
  padding-bottom: var(--room);
}
.hq-work-intro .hq-lead { margin-bottom: 0; }
.hq-work-intro::before, .hq-work-intro::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: calc(-1 * clamp(22px, 2.6vw, 32px));
  pointer-events: none;
}
/* the photo, solid yellow by the end of the boxes; where a screen is too narrow for the photo to
   reach the top of the band, the studio's dark ceiling carries on above it */
.hq-work-intro::before {
  z-index: -2;
  bottom: calc(-1 * var(--under));
  background:
    linear-gradient(180deg, rgba(255, 230, 46, 0) calc(100% - var(--under) - 30px), rgba(255, 230, 46, .25) calc(100% - var(--under) + 90px), rgba(255, 230, 46, .8) calc(100% - 120px), var(--yellow)),
    linear-gradient(180deg, #24171a, rgba(36, 23, 26, 0)) left 0 bottom calc(var(--ph-top) - 40px) / 100% 40px no-repeat,
    url(../images/hq/work-studio.jpg) left var(--px) bottom var(--ph-bottom) / var(--pw) auto no-repeat,
    linear-gradient(#24171a, #24171a) left 0 bottom calc(var(--ph-top) - 2px) / 100% 600px no-repeat;
}
/* the wash behind the words, gone before it reaches your faces */
.hq-work-intro::after {
  z-index: -1;
  bottom: calc(var(--room) - 26px);
  background: linear-gradient(90deg, rgba(255, 230, 46, .74), rgba(255, 230, 46, .6) calc(var(--tx) + 300px), rgba(255, 230, 46, .46) calc(var(--tx) + 620px), rgba(255, 230, 46, .2) calc(var(--tx) + 860px), rgba(255, 230, 46, 0) calc(var(--tx) + 1000px));
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 52px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 52px), transparent);
}
/* on a phone the photo is smaller so all three of you fit, and the words sit on plain yellow */
@media (max-width: 520px) {
  .hq-work-intro { --pw: 164vw; --px: 34%; }
  .hq-work-intro::after { background: var(--yellow); }
}
.hq-work-band .hq-svcs { margin-top: 0; }
.hq-work-band .hq-title, .hq-proof-band .hq-title { color: #14061a; text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--violet); }
.hq-work-band .hq-kicker { color: #4b1660; }
.hq-work-band .hq-lead { color: #2a0a34; text-shadow: none; }
.hq-svcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 28px; }
.hq-svcs > .hq-svc { flex: 1 1 280px; max-width: 380px; }
.hq-svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: #0d0610;
  color: var(--text);
  border-radius: 20px;
  padding: 24px;
  border-top: 6px solid var(--pink);
  box-shadow: 0 16px 34px rgba(20, 6, 26, .35);
}
.hq-svc:nth-child(3n+2) { border-top-color: var(--cyan); }
.hq-svc:nth-child(3n) { border-top-color: var(--orange); }
.hq-svc i { font-size: 30px; color: var(--yellow); }
.hq-svc h3 { font-family: "Bungee", sans-serif; font-weight: 400; font-size: 21px; margin: 0; }
.hq-svc p { color: var(--muted); font-size: 16px; margin: 0 0 6px; flex: 1; }
.hq-svc .btn-neon { margin-top: auto; }
.hq-marquee-head { font-family: "Bungee", sans-serif; font-weight: 400; text-align: center; font-size: 18px; letter-spacing: .04em; margin: 36px 16px 14px; }
.hq-marquee { overflow: hidden; display: grid; gap: 8px; }
.hq-marquee-row { display: flex; width: max-content; animation: hq-scroll 70s linear infinite; }
.hq-marquee-row.rev { animation-direction: reverse; animation-duration: 80s; }
.hq-marquee-track { display: flex; gap: 34px; padding-right: 34px; font-family: "Bungee", sans-serif; font-size: clamp(22px, 3.4vw, 38px); white-space: nowrap; }
.hq-marquee .c0 { color: #14061a; }
.hq-marquee .c1 { color: var(--pink); }
.hq-marquee .c2 { color: var(--purple); }
.hq-marquee .c3 { color: #14061a; -webkit-text-stroke: 1.5px #14061a; color: transparent; }
.hq-proof-band .hq-marquee .c0 { color: #fff; }
.hq-proof-band .hq-marquee .c1 { color: var(--yellow); }
.hq-proof-band .hq-marquee .c2 { color: var(--cyan); }
.hq-proof-band .hq-marquee .c3 { color: transparent; -webkit-text-stroke: 1.5px #fff; }

.hq-work-top {
  background:
    radial-gradient(ellipse 70% 90% at 80% 10%, rgba(255, 47, 166, .4), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(125, 64, 145, .5), transparent 60%),
    var(--ink);
}
.hq-steps-band { background: var(--veil-2); }
.hq-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: s; }
.hq-steps li { position: relative; background: var(--ink-3); border: 1.5px solid var(--line); border-radius: 20px; padding: 24px 20px 20px; }
.hq-steps h3 { font-family: "Bungee", sans-serif; font-weight: 400; font-size: 19px; margin: 10px 0 6px; }
.hq-steps p { color: var(--muted); margin: 0; font-size: 16px; }
.hq-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-family: "Bungee", sans-serif; font-size: 22px; color: #14061a; background: var(--yellow); box-shadow: 0 0 0 4px var(--pink); }
@media (max-width: 860px) { .hq-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hq-steps { grid-template-columns: minmax(0, 1fr); } }
.hq-proof-band { background: linear-gradient(135deg, rgba(255, 47, 166, .78), rgba(74, 28, 96, .86) 72%), url(../images/hq/proof-studio.jpg) center 35% / cover no-repeat, #7d4091; }
.hq-proof-band .hq-title { color: #fff; text-shadow: 3px 3px 0 #14061a; }
.hq-proof-band .hq-kicker { color: var(--yellow); }
.hq-proof-band .hq-stats { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hq-proof-band .hq-stat { background: rgba(20, 6, 26, .55); border-color: rgba(255, 255, 255, .2); }
.hq-proof-band .hq-stat-l { color: #f6e6f2; }
.hq-proof { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.hq-proof li { font-size: 19px; }
.hq-proof li::before { content: "#1"; font-family: "Bungee", sans-serif; font-size: 13px; color: #14061a; background: var(--yellow); border-radius: 6px; padding: 2px 6px; margin-right: 10px; }
.hq-proof-band .btn-ghost { border-color: #fff; }

.hq-enquiry-band { background: var(--veil-2); }
.hq-contacts p { margin-bottom: 14px; }
.hq-foot-k { display: block; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.hq-copy { user-select: all; }
.hq-copybtn { font: 700 13px "Outfit", sans-serif; color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer; margin-left: 6px; }
.hq-form { display: grid; gap: 14px; background: var(--ink-3); border: 1.5px solid var(--line); border-radius: 24px; padding: clamp(18px, 3vw, 30px); }
.hq-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 560px) { .hq-form-row { grid-template-columns: minmax(0, 1fr); } }
.hq-form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.hq-form input, .hq-form select, .hq-form textarea, .hq-join input {
  font: 16px "Outfit", sans-serif;
  color: var(--text);
  background: #0b0610;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  width: 100%;
}
.hq-form input:focus, .hq-form select:focus, .hq-form textarea:focus, .hq-join input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(255, 63, 174, .3); }
.hq-form .btn-neon { justify-self: start; }
.hq-hp { position: absolute; left: -9999px; }

/* --------------------------------------------------------- crew cards */
.hq-crew-band { background: radial-gradient(rgba(255, 230, 46, .12) 2px, transparent 2.5px) 0 0 / 22px 22px, linear-gradient(160deg, rgba(44, 18, 64, .68), rgba(18, 8, 24, .6)); }
.hq-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 262px)); justify-content: center; gap: 30px; margin-top: 18px; }
@media (max-width: 1160px) { .hq-cards { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 600px) { .hq-cards { grid-template-columns: minmax(0, 300px); } }
.hq-card { perspective: 1200px; scroll-margin-top: 90px; }
.hq-card-in {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, .8, .3, 1);
}
.hq-card-in[aria-pressed="true"] { transform: rotateY(180deg); }
.hq-card-front, .hq-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(125deg, var(--tone) 0%, #fff 22%, var(--tone) 40%, var(--violet) 62%, var(--tone) 85%);
  background-size: 260% 260%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  transition: background-position 1.2s;
}
.hq-card:hover .hq-card-front, .hq-card:hover .hq-card-back { background-position: 100% 100%; }
.tone-pink { --tone: #ff2fa6; }
.tone-yellow { --tone: #ffd22e; }
.tone-cyan { --tone: #2fe0d2; }
.tone-orange { --tone: #ff8a2a; }
.hq-card-back { transform: rotateY(180deg); }
.hq-card-photo { flex: 1; border-radius: 10px; overflow: hidden; background: #0b0610; border: 3px solid #14061a; }
.hq-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.hq-card-photo.is-icon { display: grid; place-items: center; font-size: 110px; color: var(--tone); background: radial-gradient(circle at 50% 38%, #4a1a5a, #0b0610 72%); text-shadow: 0 0 24px var(--tone); }
.hq-card-name { font-family: "Bungee", sans-serif; font-size: 25px; line-height: 1.05; color: #14061a; margin-top: 10px; }
.hq-card-nick { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #14061a; }
.hq-card-stars { color: #14061a; letter-spacing: 3px; font-size: 15px; }
.hq-card-hint { position: absolute; right: 14px; bottom: 12px; font-size: 12px; font-weight: 800; color: #14061a; opacity: .7; }
.hq-card-back { background-color: #14061a; }
.hq-card-back table { width: 100%; border-collapse: collapse; margin-top: 10px; background: rgba(20, 6, 26, .88); border-radius: 10px; overflow: hidden; color: var(--text); font-size: 13.5px; line-height: 1.4; }
.hq-card-back th, .hq-card-back td { text-align: left; padding: 6px 9px; border-bottom: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.hq-card-back th { width: 38%; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.hq-card-foil { margin-top: auto; font-weight: 800; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #14061a; text-align: center; padding-top: 8px; }
/* four across on big screens: a tighter back, so every row and the foil line show */
@media (min-width: 1161px) {
  .hq-card-back table { font-size: 12.5px; line-height: 1.35; }
  .hq-card-back th, .hq-card-back td { padding: 4px 8px; }
  .hq-card-back th { font-size: 9.5px; }
  .hq-card-foil { font-size: 10px; letter-spacing: .1em; }
}

/* ----------------------------------------------------------------- news */
.hq-news-band { background: var(--veil); }
.hq-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .hq-posts { grid-template-columns: minmax(0, 1fr); } }
.hq-post-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 20px; overflow: hidden; padding-bottom: 18px; transition: border-color .2s, transform .2s; }
.hq-post-card:hover { border-color: var(--neon); transform: translateY(-3px); color: var(--text); }
.hq-post-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.hq-post-img img { width: 100%; height: 100%; object-fit: cover; }
.hq-post-noimg { display: grid; place-items: center; height: 100%; font-size: 46px; color: var(--pink); background: repeating-linear-gradient(-45deg, #21112b 0 14px, #1a0b22 14px 28px); }
.hq-post-date, .hq-post-title, .hq-post-text { padding-inline: 18px; }
.hq-post-date { font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-top: 8px; }
.hq-post-title { font-weight: 800; font-size: 19px; line-height: 1.25; }
.hq-post-text { font-size: 15px; color: var(--muted); }

/* ------------------------------------------- on this day, join, follow */
.hq-fan-band { background: linear-gradient(120deg, rgba(58, 15, 69, .68), rgba(20, 6, 26, .6) 55%, rgba(11, 42, 51, .6)); }
.hq-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hq-three.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hq-three > div { background: rgba(10, 4, 14, .65); border: 1.5px solid var(--line); border-radius: 22px; padding: 24px; min-width: 0; }
.hq-three h3 { font-family: "Bungee", sans-serif; font-weight: 400; font-size: 22px; margin: 0 0 12px; }
@media (max-width: 960px) { .hq-three, .hq-three.is-two { grid-template-columns: minmax(0, 1fr); } }
.hq-otd-text { font-size: 18px; }
.hq-otd-text a { font-weight: 800; }
.hq-join label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.hq-join-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hq-join-row input { flex: 1 1 180px; min-width: 0; }

/* ---------------------------------------------------------- page tops */
.hq-page-top {
  background:
    radial-gradient(ellipse 80% 90% at 85% 0%, rgba(255, 47, 166, .35), transparent 60%),
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(125, 64, 145, .45), transparent 65%),
    repeating-conic-gradient(from 0deg at 100% 0%, rgba(255, 230, 46, .06) 0 5deg, transparent 5deg 10deg),
    var(--veil);
  padding-block: clamp(30px, 4vw, 48px);
}
.hq-page-top.slim { padding-block: 26px; }

/* --------------------------------------------------------- music page */
.hq-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.hq-rel { display: grid; grid-template-rows: auto 1fr; background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 20px; overflow: hidden; }
.hq-rel > img, .hq-rel-art { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hq-rel-art { display: grid; place-items: center; padding: 22px; overflow: hidden; overflow-wrap: anywhere; text-align: center; font-family: "Bungee", sans-serif; font-size: 22px; line-height: 1.1; background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .14) 0 6deg, transparent 6deg 12deg); }
.hq-rel > div { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hq-rel h3 { font-family: "Bungee", sans-serif; font-weight: 400; font-size: 20px; line-height: 1.1; margin: 0; }
.hq-rel-year { font-weight: 800; color: var(--yellow); margin: 0; letter-spacing: .1em; }
.hq-rel-by { font-weight: 600; color: var(--neon); margin: 0; }
.hq-rel .hq-small { margin-bottom: 8px; }

/* ---------------------------------------------------------- radio page */
.hq-radio-top { background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(255, 63, 174, .3), transparent 60%), var(--ink); }
.hq-pod-panel { display: grid; justify-items: center; gap: 16px; text-align: center; background: #12040c; border: 2px solid var(--neon); border-radius: 26px; padding: 30px 22px; box-shadow: 0 0 24px rgba(255, 63, 174, .45); }
.hq-pod-sign {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Bungee", sans-serif;
  font-size: clamp(30px, 5vw, 48px);
  color: #fff;
  text-shadow: 0 0 8px var(--neon), 0 0 20px var(--neon);
  border: 3px solid var(--neon);
  border-radius: 14px;
  padding: 8px 22px;
  background: #1c0612;
  box-shadow: 0 0 24px rgba(255, 63, 174, .6), inset 0 0 18px rgba(255, 63, 174, .35);
}
.hq-pod-sign i { font-size: .78em; }
.hq-pod-new { font-size: 18px; margin: 0; }
.hq-milestone { text-align: center; background: linear-gradient(var(--orange) 0 25%, var(--pink) 25% 50%, var(--violet) 50% 75%, var(--yellow) 75%); padding-block: 26px; }
.hq-500 { font-family: "Bungee", sans-serif; font-size: clamp(90px, 18vw, 220px); line-height: .9; margin: 0; color: #14061a; text-shadow: 6px 6px 0 #fff; }
.hq-500-l { font-weight: 800; font-size: clamp(18px, 2.4vw, 26px); color: #14061a; margin: 10px 0 0; }
.hq-pod-band { background: var(--veil-2); }
.hq-pod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(26px, 4vw, 52px); align-items: center; }
.hq-pod > * { min-width: 0; }
.hq-pod-pic {
  margin: 0;
  border: 5px solid #fff;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(1.4deg);
  box-shadow: 0 0 0 5px var(--cyan), 0 0 30px rgba(47, 224, 210, .45), 0 26px 60px rgba(0, 0, 0, .6);
}
.hq-pod-pic img { display: block; width: 100%; height: auto; }
.hq-pod .hq-player { grid-column: 1 / -1; }
@media (max-width: 760px) { .hq-pod { grid-template-columns: minmax(0, 1fr); } }
.hq-player { border-radius: 20px; overflow: hidden; border: 1.5px solid var(--line); background: var(--ink-2); }
.hq-player iframe { display: block; width: 100%; height: 360px; border: 0; }
.hq-stations-band { background: var(--ink-2); }
.hq-stations { display: flex; flex-wrap: wrap; gap: 10px; }
.hq-stations span { font-weight: 800; border-radius: 999px; padding: 8px 16px; background: var(--ink-3); border: 1.5px solid var(--line); }
.hq-stations .c0 { color: var(--neon); }
.hq-stations .c1 { color: var(--yellow); }
.hq-stations .c2 { color: var(--cyan); }
.hq-stations .c3 { color: var(--lilac); }

/* ---------------------------------------------------------- story page */
.hq-tl-band { background: var(--ink-2); }
.hq-tl { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; position: relative; display: grid; gap: 18px; }
.hq-tl::before { content: ""; position: absolute; left: 41px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: linear-gradient(var(--pink), var(--violet), var(--yellow)); }
.hq-tl li { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 20px; align-items: start; }
.hq-tl-y { position: relative; z-index: 1; display: grid; place-items: center; width: 78px; height: 40px; border-radius: 999px; font-family: "Bungee", sans-serif; font-size: 16px; color: #14061a; background: var(--yellow); box-shadow: 0 0 0 4px var(--ink-2); }
.hq-tl li:nth-child(3n+2) .hq-tl-y { background: var(--neon); }
.hq-tl li:nth-child(3n) .hq-tl-y { background: var(--cyan); }
.hq-tl p { margin: 7px 0 0; font-size: 18px; }
.hq-tales { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 400px) { .hq-tales { grid-template-columns: minmax(0, 1fr); } }
.hq-tale { border-radius: 20px; overflow: hidden; background: var(--ink-2); border: 1.5px solid var(--line); }
.hq-tale summary { list-style: none; cursor: pointer; display: grid; gap: 6px; padding: 20px; position: relative; }
.hq-tale summary::-webkit-details-marker { display: none; }
.hq-tale summary::after { content: "Read the story +"; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.hq-tale[open] summary::after { content: "Close –"; }
.hq-tale[open] .hq-tale-peek { display: none; }
.hq-tale-pic { display: block; margin: -20px -20px 8px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.hq-tale-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hq-tale summary:hover .hq-tale-pic img { transform: scale(1.04); }
.hq-tale-n { font-family: "Bungee", sans-serif; font-size: 34px; line-height: 1; }
.hq-tale-t { font-family: "Bungee", sans-serif; font-size: 21px; line-height: 1.1; }
.hq-tale-by { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hq-tale-peek { color: var(--muted); font-size: 16px; }
.hq-tale-body { padding: 0 20px 20px; font-size: 17px; }
.hq-tale.t0 .hq-tale-n { color: var(--pink); }
.hq-tale.t1 .hq-tale-n { color: var(--yellow); }
.hq-tale.t2 .hq-tale-n { color: #6aa0ff; }
.hq-tale.t3 .hq-tale-n { color: var(--violet); }
.hq-tale.t4 .hq-tale-n { color: var(--orange); }
.hq-tale.t5 .hq-tale-n { color: var(--cyan); }
.hq-tale.t6 .hq-tale-n { color: var(--neon); }
.hq-tale.t7 .hq-tale-n { color: var(--lilac); }
.hq-tale[open] { border-color: var(--neon); }
.hq-prose { max-width: 820px; }
.hq-prose article { border-top: 1.5px solid var(--line); padding-top: 26px; margin-top: 26px; }
.hq-prose h2 { font-family: "Bungee", sans-serif; font-weight: 400; font-size: 26px; margin: 0 0 4px; color: var(--neon-soft); }
.hq-prose h2.hq-title { font-size: clamp(30px, 5.2vw, 58px); margin: 0; }
.hq-prose .post-date { display: block; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.hq-prose img { border-radius: 16px; margin: 6px 0 18px; }
.hq-prose a.btn, .hq-tale-body a.btn {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  border: 1.5px solid var(--lilac);
  border-radius: 999px;
  padding: .6em 1.15em;
  margin: 4px 6px 4px 0;
  transition: background .2s, color .2s;
}
.hq-prose a.btn:hover, .hq-tale-body a.btn:hover { background: var(--lilac); color: #14061a; }

/* --------------------------------------------------------- photos page */
.hq-photos-band { background: radial-gradient(rgba(255, 63, 174, .08) 2px, transparent 2.5px) 0 0 / 20px 20px, #120818; }
.hq-wall { columns: 240px; column-gap: 22px; }
.hq-pol { break-inside: avoid; margin: 0 0 26px; background: #fbf6ef; padding: 10px 10px 14px; border-radius: 4px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); transition: transform .3s; }
.hq-pol.r0 { transform: rotate(-1.6deg); }
.hq-pol.r1 { transform: rotate(1.2deg); }
.hq-pol.r2 { transform: rotate(-.6deg); }
.hq-pol.r3 { transform: rotate(2deg); }
.hq-pol.r4 { transform: rotate(-2.2deg); }
.hq-pol:hover { transform: rotate(0) scale(1.03); z-index: 2; position: relative; }
.hq-pol-in { display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: zoom-in; }
.hq-pol img { width: 100%; }
.hq-pol figcaption { font: 600 15px/1.35 "Outfit", sans-serif; color: #2a1a30; padding-top: 10px; }
.hq-lightbox { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 20px max(12px, env(safe-area-inset-right, 0px)) 20px max(12px, env(safe-area-inset-left, 0px)); background: rgba(5, 0, 6, .94); }
.hq-lightbox[hidden] { display: none; }
.hq-lightbox figure { margin: 0; display: grid; justify-items: center; gap: 10px; min-width: 0; }
.hq-lightbox img { max-height: 80vh; width: auto; border-radius: 8px; }
.hq-lightbox figcaption { color: var(--text); text-align: center; max-width: 70ch; }
.hq-lightbox button { font-size: 22px; color: var(--text); background: rgba(255, 255, 255, .08); border: 1.5px solid var(--line); border-radius: 50%; width: 48px; height: 48px; cursor: pointer; }
.hq-lb-close { position: absolute; top: 16px; right: 16px; }

/* ----------------------------------------------------------- gigs page */
.hq-countdown { background: var(--ink-3); border: 1.5px solid var(--neon); border-radius: 22px; padding: 22px; margin-bottom: 24px; }
.hq-count-n { font-family: "Bungee", sans-serif; font-size: clamp(30px, 5vw, 50px); color: var(--yellow); margin: 0; }
.hq-nogigs { background: rgba(10, 4, 14, .7); border: 1.5px dashed var(--neon); border-radius: 22px; padding: 26px; max-width: 760px; }
.hq-gigs + .hq-nogigs { margin-top: 24px; }
.hq-follow { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; line-height: 1.3; margin: 0 0 14px; }
.hq-follow i { color: var(--neon); margin-right: 4px; }
.hq-follow a { color: var(--yellow); }
.hq-book-mail { margin: 12px 0 0; font-size: 15px; }
.hq-gigs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hq-gig { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px; }
.hq-gig-date { display: grid; place-items: center; text-align: center; background: var(--neon); color: #14061a; border-radius: 12px; padding: 8px 4px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hq-gig-date b { font-family: "Bungee", sans-serif; font-weight: 400; font-size: 26px; line-height: 1; }
.hq-gig.past .hq-gig-date { background: var(--lilac); }
/* Lee on the decks beside the dates, his name on a tag; on phones the photo comes first */
.hq-gigs-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(26px, 4vw, 52px); align-items: center; }
.hq-gigs-top > * { min-width: 0; }
.hq-gigs-pic { margin: 0 0 18px; position: relative; transform: rotate(1.2deg); }
.hq-gigs-frame { border: 5px solid #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 5px var(--yellow), 0 0 32px rgba(255, 230, 46, .4), 0 26px 60px rgba(0, 0, 0, .6); }
.hq-gigs-frame img { display: block; width: 100%; height: auto; }
.hq-gigs-pic figcaption {
  position: absolute;
  left: 22px;
  bottom: -18px;
  max-width: calc(100% - 44px);
  background: var(--pink);
  color: #fff;
  font: 400 clamp(12px, 1.3vw, 15px)/1.15 "Bungee", sans-serif;
  letter-spacing: .02em;
  padding: 8px 14px;
  border-radius: 10px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5);
}
@media (max-width: 860px) {
  .hq-gigs-top { grid-template-columns: minmax(0, 1fr); }
  .hq-gigs-pic { order: -1; }
}

/* -------------------------------------------------------- fan zone feed */
.hq-feed { max-width: 860px; }
.hq-post { background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 28px); margin-bottom: 22px; scroll-margin-top: 90px; overflow-wrap: anywhere; }
.hq-post h2 { font-weight: 800; font-size: 22px; line-height: 1.25; margin: 4px 0 12px; }
.hq-post h2 a { color: var(--text); }
.hq-post .hq-post-date { padding: 0; margin: 0; }
.hq-post-body img { display: block; max-height: 540px; width: auto; border-radius: 14px; margin: 8px 0 14px; }
.hq-post-body iframe, .hq-post-body video { max-width: 100%; border: 0; border-radius: 14px; }
.hq-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.hq-pages { display: flex; gap: 6px; flex-wrap: wrap; }
.hq-pages a, .hq-pages span { min-width: 38px; text-align: center; padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; color: var(--text); }
.hq-pages [aria-current="page"] { background: var(--neon); border-color: var(--neon); color: #14061a; font-weight: 800; }
.hq-pages .gap { border: 0; }

/* --------------------------------------------------------------- footer */
.hq-foot { background: #050006; }
.hq-foot-in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 26px; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
.hq-foot-in > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) { .hq-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .hq-foot-in { grid-template-columns: minmax(0, 1fr); } }
.hq-foot-logo { font-family: "Bungee", sans-serif; font-size: 26px; color: var(--yellow); text-shadow: 2px 2px 0 var(--pink); margin: 0 0 4px; }
.hq-foot-logo span { color: var(--neon); text-shadow: 0 0 10px var(--neon); }
.hq-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.hq-icons a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-3); color: var(--text); text-decoration: none; font-size: 17px; }
.hq-icons a:hover { background: var(--neon); color: #14061a; }
.hq-foot-people p { margin-bottom: 14px; }
.hq-foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hq-foot-links a:not(.btn-neon) { color: var(--text); font-weight: 600; }
.hq-foot-small { text-align: center; color: var(--muted); font-size: 13px; padding: 0 16px 28px; margin: 0; }

/* ------------------------------------------------------ fun: the airhorn */
.hq-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.hq-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: hq-fall linear forwards; }
@keyframes hq-fall { to { transform: translateY(110vh) rotate(720deg); } }
.hq-horn-msg {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 71;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: "Bungee", sans-serif;
  font-size: clamp(36px, 9vw, 96px);
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--violet);
  white-space: nowrap;
  pointer-events: none;
  animation: hq-horn 2.6s ease-out forwards;
}
@keyframes hq-horn {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1.08); }
  20%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
}
.hq-foot-logo span { cursor: default; user-select: none; }

/* --------------------------------------------- bits the script switches on */
html.hq-locked { overflow: hidden; }
.hq-crate { cursor: grab; }
.hq-crate.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hq-note { font-size: 15px; font-weight: 600; border-radius: 12px; padding: 10px 14px; }
.hq-note.is-ok { color: #14061a; background: var(--yellow); }
.hq-note.is-err { color: #fff; background: #8a1424; }
.hq-otd-line { display: block; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hq-ticker-in, .hq-marquee-row { animation: none; }
  .hq-ticker { overflow-x: auto; scrollbar-width: none; }
  .hq-ticker-track[aria-hidden], .hq-marquee-track[aria-hidden] { display: none; }
  .bb-btn:hover .bb-cone, .bb-btn:focus-visible .bb-cone, .is-playing .bb-cone, .is-playing .bb-reel, .is-playing .bb-vu { animation: none; }
  .bb-play, .bb-vu, .bb-key { transition: none; }
  .hq-marquee-row { width: auto; }
  .hq-marquee-track { flex-wrap: wrap; white-space: normal; justify-content: center; gap: 6px 22px; padding: 0 16px; font-size: 20px; }
  .hq-card-in, .sleeve-disc, .sleeve-face, .hq-tale-pic img, .hq-alias { transition: none; }
  .hq-horn-msg, .hq-glow { animation: none; }
}