/* ============================================================================
   JAKKALS VIBES — PREMIUM DESIGN SYSTEM
   css/design-system.css

   A cinematic, minimal, music-first visual language. Self-contained: it does
   not depend on styles.css so it can be reviewed in isolation, but its tokens
   match the established brand (off-black shell, warm cream, one red accent).

   Principles
   - Large negative space. Content columns are narrower than the viewport.
   - Oversized editorial type used once per section, restrained elsewhere.
   - Red is the single accent, used sparingly.
   - No glows, no badge soup, no dashboard cards, no gradient buttons.
   - Motion is subtle and optional. Content is readable without it.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────*/
:root {
  /* Shell (80% of the page) */
  --ds-bg:        #0C0B0A;
  --ds-surface:   #151311;
  --ds-surface-2: #1D1A17;

  /* Warm cream / metal neutrals (15%) */
  --ds-ink:       #F1ECE3;   /* primary text, warm cream, not pure white */
  --ds-muted:     #AAA198;
  --ds-dim:       #928980;   /* dimmest text, still AA on --ds-bg */

  /* The single accent (5%) */
  --ds-red:        #C92E26;
  --ds-red-bright: #E04436;  /* hover / press only */
  --ds-red-deep:   #711A16;

  --ds-line:      rgba(241, 236, 227, 0.12);
  --ds-line-soft: rgba(241, 236, 227, 0.06);

  /* Type */
  --ds-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ds-font-body:    'Barlow', system-ui, sans-serif;

  /* Fluid type scale. Editorial display is deliberately large. */
  --ds-fs-mega:  clamp(56px, 12vw, 200px);   /* one hero word / statement */
  --ds-fs-xl:    clamp(40px, 7vw, 104px);    /* section opener, used once */
  --ds-fs-lg:    clamp(30px, 4vw, 56px);
  --ds-fs-md:    clamp(22px, 2.4vw, 30px);   /* lead paragraph */
  --ds-fs-body:  17px;
  --ds-fs-sm:    14px;
  --ds-fs-label: 12px;                        /* kickers, meta */

  /* Space scale, generous for negative space */
  --ds-s1: 4px;  --ds-s2: 8px;  --ds-s3: 12px; --ds-s4: 16px;
  --ds-s5: 24px; --ds-s6: 40px; --ds-s7: 64px; --ds-s8: 96px;
  --ds-s9: 140px; --ds-s10: 200px;

  --ds-maxw: 1240px;   /* outer container */
  --ds-readw: 62ch;    /* reading measure */

  /* Motion */
  --ds-ease: cubic-bezier(.2, .8, .2, 1);
  --ds-dur-fast: 200ms;
  --ds-dur:      460ms;   /* section entrances 400-520ms */
  --ds-dur-slow: 900ms;

  --ds-radius: 4px;      /* minimal, not pill, not rounded-card */
}

/* ── Reset-ish base ───────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }

body.ds {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds img { max-width: 100%; height: auto; display: block; }
.ds a { color: inherit; text-decoration: none; }

/* ── Layout primitives ────────────────────────────────────────────────────*/
.ds-container {
  width: 100%;
  max-width: var(--ds-maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

/* Generous vertical rhythm creates the premium negative space. */
.ds-section { padding-block: clamp(var(--ds-s8), 14vw, var(--ds-s10)); }
.ds-section--tight { padding-block: clamp(var(--ds-s7), 9vw, var(--ds-s8)); }

/* Asymmetric editorial split, not a symmetrical card grid. */
.ds-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--ds-s6), 6vw, var(--ds-s8));
  align-items: center;
}
@media (min-width: 900px) {
  .ds-split { grid-template-columns: 1.05fr 0.95fr; }
  .ds-split--wide-left { grid-template-columns: 1.35fr 0.65fr; }
  .ds-split--wide-right { grid-template-columns: 0.65fr 1.35fr; }
}

/* ── Typography ───────────────────────────────────────────────────────────*/
.ds-kicker {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ds-red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--ds-s5);
}
.ds-kicker::before {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}

/* Oversized editorial statement. Use once per section. */
.ds-display {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-xl);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ds-ink);
}
.ds-display--mega { font-size: var(--ds-fs-mega); }
.ds-display em {
  font-style: italic;
  font-weight: 700;
  color: var(--ds-red);
}

.ds-h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-lg);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--ds-s5);
}

/* Restrained reading type. */
.ds-lead {
  font-size: var(--ds-fs-md);
  line-height: 1.5;
  color: var(--ds-ink);
  max-width: 40ch;
  margin: var(--ds-s5) 0 0;
}
.ds-body {
  color: var(--ds-muted);
  max-width: var(--ds-readw);
  margin: var(--ds-s5) 0 0;
}
.ds-body strong { color: var(--ds-ink); font-weight: 600; }

/* ── Buttons. Flat, no glow, no gradient. ─────────────────────────────────*/
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: var(--ds-fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--ds-radius);
  cursor: pointer;
  transition: background var(--ds-dur-fast) var(--ds-ease),
              border-color var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease);
}
/* Filled red is reserved for the single primary action in a view. */
.ds-btn--primary { background: var(--ds-red); color: #fff; }
.ds-btn--primary:hover { background: var(--ds-red-bright); }
/* Everything secondary is a quiet outline. */
.ds-btn--ghost { border-color: var(--ds-line); color: var(--ds-ink); }
.ds-btn--ghost:hover { border-color: var(--ds-ink); }
/* A near-invisible text link with a rule. */
.ds-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ds-font-display); font-weight: 700;
  font-size: var(--ds-fs-sm); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ds-ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ds-red);
  transition: gap var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.ds-link:hover { gap: 14px; color: var(--ds-red-bright); }

@media (prefers-reduced-motion: no-preference) {
  .ds-btn:active, .ds-link:active { transform: scale(0.97); }
}

/* ── Full-bleed media. Photography carries the weight, not chrome. ────────*/
.ds-media { position: relative; overflow: hidden; }
.ds-media img { width: 100%; height: 100%; object-fit: cover; }
.ds-media--bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
/* A restrained neutral veil, never a colour wash. */
.ds-media__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,0) 40%, rgba(12,11,10,0.65) 100%);
  pointer-events: none;
}

/* ── Keyboard focus, visible and on-brand ─────────────────────────────────*/
.ds :focus-visible {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 3px;
}

/* ── Accessibility helper ─────────────────────────────────────────────────*/
.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   MOTION LAYER (paired with js/ds-motion.js)

   Initial hidden states apply ONLY when JS is active and the user has not
   requested reduced motion. Without JS, or with reduced motion, everything is
   visible immediately. This keeps content SEO-readable and accessible.
   ========================================================================== */
html.ds-js:not(.ds-reduced) [data-reveal] { opacity: 0; will-change: opacity, transform; }
html.ds-js:not(.ds-reduced) [data-reveal="fade"]      { }
html.ds-js:not(.ds-reduced) [data-reveal="up"]        { transform: translateY(24px); }
html.ds-js:not(.ds-reduced) [data-reveal="scale"]     { transform: scale(1.04); }
html.ds-js:not(.ds-reduced) [data-reveal="mask"]      { clip-path: inset(0 100% 0 0); opacity: 1; }

/* Reveal rules are prefixed with html.ds-js so they match the specificity of
   the initial hidden states above and win by source order. */
html.ds-js [data-reveal].ds-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition: opacity var(--ds-dur) var(--ds-ease),
              transform var(--ds-dur) var(--ds-ease),
              clip-path var(--ds-dur-slow) var(--ds-ease);
}

/* Stagger children with a per-item delay set by the script. */
html.ds-js:not(.ds-reduced) [data-reveal-children] > * { opacity: 0; transform: translateY(18px); }
html.ds-js [data-reveal-children].ds-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
  transition-delay: var(--ds-stagger, 0ms);
}

/* Parallax targets. The script sets --ds-parallax in px. */
html.ds-js:not(.ds-reduced) [data-parallax] { transform: translate3d(0, var(--ds-parallax, 0), 0); will-change: transform; }

/* Text reveal: lines wiped up behind a mask. The script splits into lines. */
html.ds-js:not(.ds-reduced) .ds-textreveal .ds-line { display: block; overflow: hidden; }
html.ds-js:not(.ds-reduced) .ds-textreveal .ds-line > span { display: block; transform: translateY(105%); }
html.ds-js .ds-textreveal.ds-in .ds-line > span {
  transform: translateY(0);
  transition: transform var(--ds-dur-slow) var(--ds-ease);
  transition-delay: var(--ds-stagger, 0ms);
}

/* ============================================================================
   SCROLL SEQUENCE (paired with js/scroll-sequence.js)

   Markup contract:
   <div class="ds-seq" data-seq="/assets/sequences/NAME"
        data-frames="120" data-format="webp" data-pad="4"
        data-widths="960,1600,2400">
     <img class="ds-seq__fallback" src="/assets/sequences/NAME/poster.jpg"
          alt="Describe the shot" width="1600" height="900">
     <canvas class="ds-seq__canvas" aria-hidden="true"></canvas>
     <div class="ds-seq__content"> ...real HTML content... </div>
   </div>

   The fallback <img> is the SEO-readable, reduced-motion, no-JS state.
   ========================================================================== */
.ds-seq {
  position: relative;
  /* Height drives how long the sequence is scrubbed. Set per instance. */
  min-height: 100svh;
}
.ds-seq__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.ds-seq .ds-seq__canvas,
.ds-seq .ds-seq__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ds-seq__canvas { display: none; }            /* shown only once frames are ready */
.ds-seq.ds-seq--playing .ds-seq__canvas { display: block; }
.ds-seq.ds-seq--playing .ds-seq__fallback { opacity: 0; }
.ds-seq__fallback { transition: opacity var(--ds-dur) var(--ds-ease); }
.ds-seq__content { position: relative; z-index: 2; }

/* Optional loading hint, kept minimal and non-blocking. */
.ds-seq__status {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 3; font-family: var(--ds-font-display); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ds-dim);
}

/* ============================================================================
   HOMEPAGE COMPOSITIONS (built on the primitives above)
   ========================================================================== */

/* Hero */
.ds-hero__inner {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: var(--ds-s5);
}
.ds-hero__wordmark { margin: 0; line-height: 0; }
.ds-hero__wordmark img { width: clamp(240px, 52vw, 620px); height: auto; }
.ds-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Live section: full-bleed image, headline, next shows */
.ds-live { position: relative; overflow: hidden; padding-block: clamp(var(--ds-s8), 14vw, var(--ds-s10)); }
/* contain (not cover) so the full band photo stays visible and no one is cropped, on web and mobile. */
.ds-live .ds-live__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; z-index: 0; background: #0c0b0a; }

/* The premium homepage does not use the legacy mobile stream bar. */
body.home #sticky-stream-bar,
body.services-page #sticky-stream-bar,
body.contact-page #sticky-stream-bar,
body.terms-page #sticky-stream-bar,
body.privacy-policy-page #sticky-stream-bar { display: none !important; }
.ds-live__veil { z-index: 1; background: linear-gradient(90deg, rgba(12,11,10,0.9) 30%, rgba(12,11,10,0.35) 100%); }
.ds-live__inner { position: relative; z-index: 2; }

.ds-shows { list-style: none; margin: var(--ds-s6) 0 0; padding: 0; max-width: 520px; }
.ds-show {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--ds-s4);
  padding: var(--ds-s4) 0; border-top: 1px solid var(--ds-line);
}
.ds-show:last-child { border-bottom: 1px solid var(--ds-line); }
.ds-show__date { font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--ds-ink); font-size: 15px; }
.ds-show__date b { color: var(--ds-red); font-size: 20px; }
.ds-show__city { font-family: var(--ds-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ds-ink); }
.ds-show__prov { font-size: var(--ds-fs-sm); color: var(--ds-dim); }

/* Proof strip */
.ds-proof {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.ds-proof li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 12px; }
.ds-proof li + li { border-left: 1px solid var(--ds-line); }
.ds-proof__v { font-family: var(--ds-font-display); font-size: clamp(32px, 4.5vw, 60px); font-weight: 900; line-height: 0.95; color: var(--ds-ink); }
.ds-proof li:first-child .ds-proof__v { color: var(--ds-red); }
.ds-proof__l { font-family: var(--ds-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ds-dim); }
@media (max-width: 700px) {
  .ds-proof { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .ds-proof li + li { border-left: none; }
  .ds-proof li:nth-child(even) { border-left: 1px solid var(--ds-line); }
}

/* Final CTA: three oversized quiet links */
.ds-final { display: flex; flex-direction: column; gap: clamp(8px, 2vw, 20px); }
.ds-final__link {
  font-family: var(--ds-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 11vw, 128px); line-height: 0.98; letter-spacing: -0.01em;
  color: var(--ds-ink);
  transition: color var(--ds-dur-fast) var(--ds-ease), padding-left var(--ds-dur) var(--ds-ease);
}
.ds-final__link:hover { color: var(--ds-red); padding-left: 0.15em; }

/* ══ MUSIC PAGE — cinematic hero (latest release) ══════════════════════════ */
.ds-music-hero {
  padding-block: clamp(var(--ds-s7), 10vw, var(--ds-s9));
  border-bottom: 1px solid var(--ds-line);
}
.ds-music-hero__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(var(--ds-s6), 6vw, var(--ds-s8));
  align-items: center;
}
@media (min-width: 900px) {
  .ds-music-hero__inner { grid-template-columns: 1fr 0.82fr; }
}
.ds-music-hero__art {
  display: block; width: 100%; max-width: 520px;
  aspect-ratio: 1 / 1; justify-self: center;
  border: 1px solid var(--ds-line);
  transition: transform var(--ds-dur) var(--ds-ease);
}
@media (min-width: 900px) { .ds-music-hero__art { justify-self: end; } }
@media (hover: hover) { .ds-music-hero__art:hover { transform: scale(1.02); } }

/* ══ ABOUT / STORY PAGE ═════════════════════════════════════════════════════ */
.ds-about-hero { position: relative; overflow: hidden; min-height: 82svh; display: flex; align-items: flex-end; padding-block: clamp(var(--ds-s7), 12vw, var(--ds-s9)); }
.ds-about-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 0; }
.ds-about-hero__veil { z-index: 1; background: linear-gradient(180deg, rgba(12,11,10,0.35) 0%, rgba(12,11,10,0.55) 55%, rgba(12,11,10,0.92) 100%); }
.ds-about-hero__inner { position: relative; z-index: 2; }
.ds-about-hero .ds-lead { max-width: 52ch; color: var(--ds-ink); }

/* Oversized pull quote — one editorial moment */
.ds-pullquote {
  font-family: var(--ds-font-display);
  font-weight: 500; font-style: italic;
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.14; letter-spacing: -0.01em;
  color: var(--ds-ink);
  max-width: 20ch; margin: var(--ds-s6) auto;
}

/* Timeline — major moments dominate, minor moments recede */
.ds-timeline { list-style: none; margin: 0; padding: 0; }
.ds-tl {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--ds-s5);
  padding: var(--ds-s4) 0; border-top: 1px solid var(--ds-line);
  align-items: baseline;
}
.ds-tl__date { font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-dim); font-size: 13px; }
.ds-tl__title { font-family: var(--ds-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ds-muted); font-size: 18px; margin: 0; }
.ds-tl__note { color: var(--ds-dim); margin: 4px 0 0; font-size: 15px; max-width: 60ch; }
/* Major milestones: larger, cream, red date */
.ds-tl--major { padding-block: var(--ds-s6); }
.ds-tl--major .ds-tl__date { color: var(--ds-red); font-size: 15px; }
.ds-tl--major .ds-tl__title { color: var(--ds-ink); font-size: clamp(24px, 3vw, 38px); line-height: 1.02; }
.ds-tl--major .ds-tl__note { color: var(--ds-muted); font-size: 16px; }
@media (max-width: 640px) {
  .ds-tl { grid-template-columns: 1fr; gap: 4px; }
}

/* Credibility groups */
.ds-cred { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-s6); margin-top: var(--ds-s5); }
@media (min-width: 820px) { .ds-cred { grid-template-columns: repeat(4, 1fr); } }
.ds-cred__label { font-family: var(--ds-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ds-red); margin: 0 0 var(--ds-s3); }
.ds-cred__val { margin: 0 0 6px; color: var(--ds-ink); font-size: 15px; }
.ds-cred__legal { margin-top: var(--ds-s7); color: var(--ds-dim); font-size: 13px; }

/* About end CTAs */
.ds-about-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ══ LIVE PAGE ══════════════════════════════════════════════════════════════ */
/* Stacked hero: copy on solid dark, full band photo below — faces never covered */
.ds-live-hero { position: relative; background: var(--ds-bg); overflow: hidden; }
.ds-live-hero__inner { position: relative; z-index: 2; text-align: center; padding-block: clamp(var(--ds-s6), 6vw, var(--ds-s7)) var(--ds-s5); }
.ds-live-hero__inner .ds-kicker { justify-content: center; }
.ds-live-hero .ds-display--mega { font-size: clamp(46px, 9vw, 128px); line-height: 0.92; }
.ds-live-hero .ds-lead { color: var(--ds-muted); max-width: 42ch; margin-inline: auto; }
.ds-live-hero__media { position: relative; width: 100%; }
.ds-live-hero__bg { display: block; width: 100%; height: clamp(320px, 46vh, 500px); object-fit: cover; object-position: center 26%; }
/* Feather the top of the photo into the dark copy area above it */
.ds-live-hero__fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--ds-bg) 0%, rgba(12,11,10,0) 22%, rgba(12,11,10,0) 82%, rgba(12,11,10,0.85) 100%); }

/* The show — concise points, not paragraphs */
.ds-show-points { list-style: none; margin: var(--ds-s5) 0 0; padding: 0; }
.ds-show-points li { position: relative; padding: 12px 0 12px 24px; border-top: 1px solid var(--ds-line); color: var(--ds-ink); font-size: 17px; }
.ds-show-points li::before { content: ''; position: absolute; left: 0; top: 20px; width: 10px; height: 1px; background: var(--ds-red); }

/* The band grid */
.ds-band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-s5); }
@media (min-width: 700px) { .ds-band { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .ds-band { grid-template-columns: repeat(6, 1fr); } }
.ds-band__photo { aspect-ratio: 2/3; overflow: hidden; border: 1px solid var(--ds-line); background: var(--ds-surface); }
.ds-band__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-dur) var(--ds-ease); }
@media (hover: hover) { .ds-band__member:hover .ds-band__photo img { transform: scale(1.05); } }
.ds-band__name { font-family: var(--ds-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ds-ink); margin: var(--ds-s3) 0 0; }
.ds-band__role { font-family: var(--ds-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-red); margin: 2px 0 0; }

/* Upcoming shows list */
.ds-live-shows { list-style: none; margin: var(--ds-s6) 0 0; padding: 0; }
.ds-live-show { display: grid; grid-template-columns: 90px 1fr auto; gap: var(--ds-s5); align-items: center; padding: var(--ds-s5) 0; border-top: 1px solid var(--ds-line); }
.ds-live-show:last-child { border-bottom: 1px solid var(--ds-line); }
.ds-live-show__date { font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--ds-ink); font-size: 15px; text-transform: uppercase; }
.ds-live-show__date b { color: var(--ds-red); font-size: 24px; display: inline-block; margin-right: 2px; }
.ds-live-show__date span { color: var(--ds-dim); }
.ds-live-show__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-live-show__event { font-family: var(--ds-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ds-ink); }
.ds-live-show__loc { color: var(--ds-dim); font-size: 14px; }
.ds-live-show__ticket { font-family: var(--ds-font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--ds-red); padding: 9px 16px; border-radius: var(--ds-radius); white-space: nowrap; }
.ds-live-show__ticket:hover { background: var(--ds-red-bright); }
.ds-live-show__ticket--none { background: transparent; color: var(--ds-dim); border: 1px solid var(--ds-line); }
.ds-live-show__ticket--info { background: transparent; color: var(--ds-ink); border: 1px solid var(--ds-line); }
.ds-live-show__ticket--info:hover { background: var(--ds-ink); color: var(--ds-bg); border-color: var(--ds-ink); }
.ds-live-show__ticket--private { background: transparent; color: var(--ds-dim); border: 1px dashed var(--ds-line); cursor: default; }
.ds-live-follow { display: flex; align-items: center; gap: var(--ds-s5); flex-wrap: wrap; margin-top: var(--ds-s7); }
.ds-live-follow__note { color: var(--ds-dim); font-size: 14px; }
.ds-live-empty { padding: var(--ds-s5) 0; color: var(--ds-muted); border-top: 1px solid var(--ds-line); }
.ds-live-empty a { color: var(--ds-red); border-bottom: 1px solid var(--ds-red); }
@media (max-width: 640px) {
  .ds-live-show { grid-template-columns: 64px 1fr; grid-template-areas: 'date meta' 'ticket ticket'; row-gap: 12px; }
  .ds-live-show__date { grid-area: date; } .ds-live-show__meta { grid-area: meta; } .ds-live-show__ticket { grid-area: ticket; justify-self: start; }
}

/* Archive */
.ds-archive { margin-top: var(--ds-s6); }
.ds-archive > summary { cursor: pointer; font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-dim); font-size: 13px; padding: var(--ds-s4) 0; }
.ds-archive > summary:hover { color: var(--ds-ink); }
.ds-live-shows--past .ds-live-show__date b { color: var(--ds-dim); }

/* Editorial gallery */
.ds-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: var(--ds-s5); }
@media (min-width: 820px) { .ds-gallery { grid-template-columns: repeat(4, 1fr); } }
.ds-gallery__item { margin: 0; overflow: hidden; border: 1px solid var(--ds-line); aspect-ratio: 1/1; }
.ds-gallery__item--wide { grid-column: span 2; aspect-ratio: 16/10; }
.ds-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-dur-slow) var(--ds-ease); }
@media (hover: hover) { .ds-gallery__item:hover img { transform: scale(1.05); } }

/* Book CTA band */
.ds-book-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ds-s6); }

/* ══ BOOKINGS PAGE (short, conversion-focused) ══════════════════════════════ */
.ds-book-top { text-align: center; padding-top: clamp(var(--ds-s7), 10vw, var(--ds-s8)); }
.ds-book-top .ds-kicker { justify-content: center; }
.ds-book-top .ds-lead { margin-inline: auto; }
.ds-book-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--ds-s6); }

.ds-book-grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--ds-s6), 5vw, var(--ds-s8)); align-items: start; }
@media (min-width: 900px) { .ds-book-grid { grid-template-columns: 1.5fr 0.85fr; } }

.ds-book-aside__h { font-family: var(--ds-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ds-ink); font-size: 22px; margin: 0; }
.ds-book-aside__h--sm { font-size: 16px; margin-top: var(--ds-s6); }
.ds-book-include { list-style: none; margin: var(--ds-s4) 0 0; padding: 0; }
.ds-book-include li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--ds-line); color: var(--ds-ink); font-size: 15px; }
.ds-book-include li::before { content: ''; position: absolute; left: 0; top: 17px; width: 9px; height: 1px; background: var(--ds-red); }
.ds-book-tech { margin-top: var(--ds-s6); color: var(--ds-dim); font-size: 13px; border-top: 1px solid var(--ds-line); padding-top: var(--ds-s4); }

/* Partners — credited prominently on light wells so the artwork reads */
.ds-book-trust { text-align: center; }
.ds-book-trust .ds-h2 { margin-top: var(--ds-s3); }
.ds-book-trust__sub { color: var(--ds-muted); max-width: 46ch; margin: var(--ds-s4) auto 0; }
.ds-partner-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
  gap: clamp(14px, 2vw, 24px);
  margin-top: var(--ds-s7);
  max-width: 1040px;
  margin-inline: auto;
}
/* Logos are square tiles that carry their own brand background — keep it. */
.ds-partner-row img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-line);
  transition: transform var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease);
}
.ds-partner-row img:hover {
  transform: translateY(-4px);
  border-color: var(--ds-red);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

/* ══ WORLD PAGE ═════════════════════════════════════════════════════════════ */
.ds-world-hero { min-height: 72svh; display: flex; align-items: center; text-align: center; padding-block: clamp(var(--ds-s7), 12vw, var(--ds-s9)); border-bottom: 1px solid var(--ds-line); }
.ds-world-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--ds-s5); }
.ds-world-hero__logo { width: clamp(260px, 60vw, 640px); height: auto; }

.ds-words { list-style: none; margin: var(--ds-s7) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--ds-s6); text-align: left; }
@media (min-width: 760px) { .ds-words { grid-template-columns: repeat(3, 1fr); } }
.ds-words__w { font-family: var(--ds-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(28px, 3vw, 40px); color: var(--ds-red); display: block; margin-bottom: var(--ds-s3); }
.ds-words li p { color: var(--ds-muted); margin: 0; font-size: 15px; line-height: 1.6; }

.ds-moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 720px) { .ds-moments { grid-template-columns: repeat(2, 1fr); column-gap: var(--ds-s8); } }
.ds-moment { padding: var(--ds-s5) 0; border-top: 1px solid var(--ds-line); }
.ds-moment__date { font-family: var(--ds-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ds-dim); display: block; }
.ds-moment__stat { font-family: var(--ds-font-display); font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--ds-ink); display: block; margin: 6px 0 8px; }
.ds-moment__stat--red { color: var(--ds-red); }
.ds-moment__title { font-family: var(--ds-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ds-ink); font-size: 18px; margin: 0 0 4px; }
.ds-moment__desc { color: var(--ds-dim); margin: 0; font-size: 15px; line-height: 1.55; max-width: 46ch; }

/* ══ BIOGRAPHY — harmonise cream editorial cards to the dark system ═════════
   Loaded after styles.css, so these match the specificity of the .biography-page
   rules there and win by source order. Content and links are unchanged. */
.biography-page .feature-card { background: var(--ds-surface); border: 1px solid var(--ds-line); box-shadow: none; }
.biography-page .press-item { background: var(--ds-surface-2); border: 1px solid var(--ds-line); }
.biography-page .press-item:hover { background: var(--ds-surface); border-color: var(--ds-red); }
.biography-page .collab-card,
.biography-page .bio-performer-row { background: var(--ds-surface-2); border: 1px solid var(--ds-line); }
.biography-page .feature-title,
.biography-page .timeline-heading,
.biography-page .timeline-title,
.biography-page .timeline-description strong,
.biography-page .timeline-description em,
.biography-page .collab-title,
.biography-page .bio-performer-detail strong,
.biography-page .press-item .src,
.biography-page .yt-milestone-title a,
.biography-page .yt-milestone-views { color: var(--ds-ink); }
.biography-page .timeline-description,
.biography-page .collab-desc,
.biography-page .bio-performer-detail span,
.biography-page .press-item .desc,
.biography-page .press-tier-label,
.biography-page .yt-milestone-title small,
.biography-page .yt-milestone-views small { color: var(--ds-muted); }
.biography-page .press-item .desc a,
.biography-page .collab-desc a { color: var(--ds-red); }
.biography-page .yt-milestone-item { border-bottom-color: var(--ds-line); }
.biography-page .bio-performer-badge.former { background: rgba(241,236,227,0.06); color: var(--ds-dim); border-color: var(--ds-line); }

/* Biography — reinforce over higher-specificity legacy rules */
.biography-page .feature-card { background: var(--ds-surface) !important; border-color: var(--ds-line) !important; box-shadow: none !important; }
.biography-page .collab-card,
.biography-page .bio-performer-row { background: var(--ds-surface-2) !important; border-color: var(--ds-line) !important; }
.biography-page .feature-card .feature-title,
.biography-page .timeline-heading,
.biography-page .timeline-title,
.biography-page .collab-title,
.biography-page .bio-performer-detail strong { color: var(--ds-ink) !important; }
.biography-page .timeline-description,
.biography-page .collab-desc,
.biography-page .bio-performer-detail span,
.biography-page .press-tier-label { color: var(--ds-muted) !important; }
.biography-page .timeline-description strong,
.biography-page .timeline-description em { color: var(--ds-ink) !important; }
.biography-page .timeline-date { background: var(--ds-surface-2) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; }
.biography-page .timeline-date:hover { background: var(--ds-red) !important; color: #fff !important; border-color: var(--ds-red) !important; }
.biography-page .bio-quickfacts,
.biography-page .bio-jumpnav { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; }
.biography-page .bio-jumpnav a { color: var(--ds-muted) !important; }
.biography-page .bio-jumpnav a:hover { color: var(--ds-ink) !important; }
.biography-page .timeline-collapse-btn { background: var(--ds-surface-2) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; }
body.biography-page,
.biography-page main { background: var(--ds-bg) !important; }
.biography-page .future-section { background: var(--ds-surface) !important; border-color: var(--ds-line) !important; }
.biography-page .bio-ai-strip,
.biography-page .bio-ai-strip.light { background: var(--ds-surface-2) !important; border-color: var(--ds-line) !important; }
.biography-page .bio-portrait { background: var(--ds-surface-2) !important; }

/* ══ WHO IS — entity page ═══════════════════════════════════════════════ */
.ds-em { color: var(--ds-red); font-style: italic; }
.ds-whois-hero { padding-top: calc(var(--ds-s9) + 40px); text-align: left; }
.ds-whois-pills { list-style: none; margin: var(--ds-s7) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-s3); }
.ds-whois-pills li { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em; background: var(--ds-surface-2); border: 1px solid var(--ds-line); border-radius: 999px; color: var(--ds-ink); font-family: var(--ds-font-display); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; font-size: .82rem; }
.ds-whois-pills i { color: var(--ds-red); }
.ds-whois-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ds-s4); }
.ds-whois-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: var(--ds-s5); transition: border-color var(--ds-dur) var(--ds-ease); }
.ds-whois-card:hover { border-color: var(--ds-red); }
.ds-whois-card__label { font-family: var(--ds-font-display); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .78rem; color: var(--ds-red); margin: 0 0 .5em; }
.ds-whois-card__text { color: var(--ds-muted); margin: 0; line-height: 1.6; }
.ds-whois-card__text a { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 2px; }
.ds-whois-card__text a:hover { color: var(--ds-red); }
.ds-whois-card__text strong { color: var(--ds-ink); }
.ds-faq-item { border-bottom: 1px solid var(--ds-line); }
.ds-faq-item summary { cursor: pointer; list-style: none; padding: var(--ds-s4) 0; font-family: var(--ds-font-display); font-weight: 700; font-size: 1.15rem; color: var(--ds-ink); display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.ds-faq-item summary::-webkit-details-marker { display: none; }
.ds-faq-item summary::after { content: "+"; color: var(--ds-red); font-weight: 400; font-size: 1.5em; line-height: 1; transition: transform var(--ds-dur) var(--ds-ease); }
.ds-faq-item[open] summary::after { transform: rotate(45deg); }
.ds-faq-item p { color: var(--ds-muted); margin: 0 0 var(--ds-s4); line-height: 1.7; max-width: 68ch; }
.ds-faq-item p a { color: var(--ds-red); }
.ds-faq-item p strong { color: var(--ds-ink); }

/* ══ CONTACT — dark harmonisation bridge ═══════════════════════════════ */
body.contact-page,
.contact-page main { background: var(--ds-bg) !important; }
.contact-page .ct-body { background: var(--ds-bg) !important; }
.contact-page .ct-router-bar { background: var(--ds-surface) !important; border-color: var(--ds-line) !important; }
.contact-page .ct-router-btn { color: var(--ds-muted) !important; }
.contact-page .ct-router-btn:hover { color: var(--ds-ink) !important; }
.contact-page .ct-router-btn.is-active,
.contact-page .ct-router-btn[aria-selected="true"] { color: var(--ds-red) !important; border-color: var(--ds-red) !important; }
.contact-page .ct-card,
.contact-page .ct-inbox-card,
.contact-page .ct-social-card,
.contact-page .ct-response-card { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: none !important; }
.contact-page .ct-card.is-legal { background: var(--ds-surface-2) !important; }
.contact-page .ct-card-icon,
.contact-page .ct-response-card-icon,
.contact-page .ct-quick-pill-icon { background: var(--ds-surface-2) !important; color: var(--ds-red) !important; }
.contact-page .ct-copy-btn { background: var(--ds-surface-2) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; }
.contact-page .ct-copy-btn:hover { border-color: var(--ds-red) !important; color: var(--ds-red) !important; }
.contact-page .ct-card-title,
.contact-page .ct-bookings-title,
.contact-page .ct-partnerships-title,
.contact-page .ct-media-title,
.contact-page .ct-licensing-title,
.contact-page .ct-legal-title,
.contact-page .ct-kv-v,
.contact-page .ct-inbox-email,
.contact-page .ct-quick-pill-value { color: var(--ds-ink) !important; }
.contact-page .ct-card-subtitle,
.contact-page .ct-card-body,
.contact-page .ct-card-note,
.contact-page .ct-inbox-note,
.contact-page .ct-response-card-text,
.contact-page .ct-kv-k,
.contact-page .ct-quick-pill-label,
.contact-page .ct-quick-pill-text,
.contact-page .ct-social-kicker,
.contact-page .ct-inbox-kicker,
.contact-page .ct-eyebrow { color: var(--ds-muted) !important; }
.contact-page .ct-inbox-email a,
.contact-page .ct-kv-v a,
.contact-page .ct-social-item a { color: var(--ds-red) !important; }
.contact-page .ct-quick-pill { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-line) !important; }
.contact-page .ct-inbox-note strong,
.contact-page .ct-card-note strong,
.contact-page .ct-card-body strong { color: var(--ds-red) !important; }
.contact-page .ct-social-item,
.contact-page .ct-social-list li { color: var(--ds-ink) !important; }
.contact-page .ct-social-item:hover { color: var(--ds-red) !important; }

/* ══ Legacy content-section pages (media, faq, store) — dark bridge ═════ */
.content-section,
.content-section.light,
.content-section.dark { background: var(--ds-bg) !important; color: var(--ds-muted) !important; }
.content-section h2,
.content-section h3 { color: var(--ds-ink) !important; }
.content-section p,
.content-section li,
.content-section .media-facts li,
.content-section dd { color: var(--ds-muted) !important; }
.content-section strong,
.content-section dt { color: var(--ds-ink) !important; }
.content-section a { color: var(--ds-red) !important; }
.content-section .media-facts li strong { color: var(--ds-ink) !important; }
.content-section .vintage-stamp { color: rgba(241,236,227,0.10) !important; }
.content-section hr { border-color: var(--ds-line) !important; }

/* ══ FAQ standalone accordion — dark bridge ════════════════════════════ */
.content-section .faq-standalone-item,
.content-section.light .faq-standalone-item { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: none !important; }
.content-section .faq-standalone-item::before { background: none !important; }
.faq-standalone-item summary { color: var(--ds-ink) !important; }
.faq-standalone-item[open] summary { color: var(--ds-red) !important; }
.faq-standalone-answer,
.faq-standalone-answer p,
.faq-standalone-answer li { color: var(--ds-muted) !important; }
.faq-standalone-answer strong { color: var(--ds-ink) !important; }
.faq-standalone-answer a { color: var(--ds-red) !important; }

/* ══ STORE — dark harmonisation bridge ═════════════════════════════════ */
.store-page .store-partner-card { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: none !important; }
.store-page .store-product-card { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: none !important; }
.store-page .store-product-image { background: var(--ds-surface-2) !important; }
.store-page .store-partner-head-text,
.store-page .store-partner-head-text h2,
.store-page .store-product-info h3,
.store-page .store-product-info h4,
.store-page .store-product-info .store-product-name { color: var(--ds-ink) !important; }
.store-page .store-partner-eyebrow { color: var(--ds-red) !important; }
.store-page .store-partner-note,
.store-page .store-product-info,
.store-page .store-product-info p { color: var(--ds-muted) !important; }
.store-page .store-partner-link,
.store-page .store-product-cta { color: var(--ds-red) !important; }
.store-page .store-product-cta { border-color: var(--ds-line) !important; }

/* ══ DISCOGRAPHY catalogue — dark harmonisation bridge ═════════════════ */
.discography-page #main { background-color: var(--ds-bg) !important; background-image: none !important; }
.discography-page .disco-body,
.discography-page .disco-meta-bar { background: transparent !important; }
/* Section heading + meta */
.discography-page #main h2,
.discography-page #main h3,
.discography-page .disco-catalogue-h2 { color: var(--ds-ink) !important; }
.discography-page .disco-eyebrow { color: var(--ds-red) !important; }
.discography-page .disco-count,
.discography-page .disco-meta-actions { color: var(--ds-muted) !important; }
/* Filter tabs */
.discography-page .filter-tab { color: var(--ds-muted) !important; border-color: var(--ds-line) !important; }
.discography-page .filter-tab:hover { color: var(--ds-ink) !important; }
.discography-page .filter-tab.active { color: var(--ds-red) !important; border-color: var(--ds-red) !important; }
.discography-page .ft-count { color: inherit !important; opacity: 0.7; }
/* Search */
.discography-page .disco-search input,
.discography-page .search-wrap input { background: var(--ds-surface-2) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; }
.discography-page .disco-search input::placeholder { color: var(--ds-dim) !important; }
.discography-page .search-icon { color: var(--ds-muted) !important; }
/* Release cards */
.discography-page .music-item-link { background-color: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: none !important; }
.discography-page .music-item-link:hover { border-color: var(--ds-red) !important; }
.discography-page .mi-meta { background: transparent !important; }
.discography-page .mi-title { color: var(--ds-ink) !important; }
.discography-page .mi-date { color: var(--ds-muted) !important; }
.discography-page .mi-plat { background: var(--ds-surface-2) !important; color: var(--ds-muted) !important; border: 1px solid var(--ds-line) !important; }
.discography-page .mi-plat:hover { color: var(--ds-ink) !important; border-color: var(--ds-red) !important; }

/* Bookings hero: keep Send + WhatsApp on the first mobile screen; Call/Email drop below */
@media (max-width: 600px) {
  .ds-book-top .ds-book-actions__secondary { display: none; }
}
.ds-band__crew { margin-top: var(--ds-s6); color: var(--ds-muted); font-size: var(--ds-fs-sm); letter-spacing: 0.02em; }
.ds-band__crew strong { color: var(--ds-ink); }

/* Bookings: tighten spacing so the form starts on the first screen + fix intro contrast */
.services-page .ds-book-top { padding-top: clamp(var(--ds-s6), 6vw, var(--ds-s7)) !important; padding-bottom: var(--ds-s5) !important; }
.services-page #booking-form { padding-top: var(--ds-s5) !important; }
.services-page .bookform-intro { color: var(--ds-muted) !important; }
.services-page .bookform-intro strong { color: var(--ds-ink) !important; }

/* Mobile streaming bar: drop the "Now Streaming" label, centre the single Listen link */
@media (max-width: 480px) {
  #sticky-stream-bar .ssb-label { display: none !important; }
  #sticky-stream-bar { justify-content: center !important; text-align: center !important; }
}

/* Bookings (services-page) main is cream in styles.css — flip to the dark theme */
.services-page #main { background-color: var(--ds-bg) !important; background-image: none !important; }
.services-page .bf-label { color: var(--ds-muted) !important; }
.services-page .bookform-or { color: var(--ds-muted) !important; }

/* Biography STORY column + Quick Facts text — were left on the light theme */
.biography-page .bio-intro-title { color: var(--ds-ink) !important; -webkit-text-fill-color: var(--ds-ink) !important; text-shadow: none !important; border-bottom-color: var(--ds-red) !important; }
.biography-page .bio-body-text p { color: var(--ds-muted) !important; }
.biography-page .bio-body-text p strong,
.biography-page .bio-body-text p em { color: var(--ds-ink) !important; }
.biography-page .bio-pull-quote,
.biography-page .bio-pull-quote p { color: var(--ds-muted) !important; }
.biography-page .qf-label { color: var(--ds-red) !important; }
.biography-page .qf-text strong { color: var(--ds-ink) !important; }
.biography-page .qf-text span { color: var(--ds-muted) !important; }
.biography-page .qf-row > i { color: var(--ds-red) !important; }

/* Latest releases: match the catalogue card size instead of stretching the few cards */
#ds-music-featured .music-grid-view {
  grid-template-columns: repeat(auto-fill, minmax(190px, 220px));
  justify-content: center;
}

/* Discography "Showing X of Y releases" — the bold numbers were dark-on-dark */
.discography-page .disco-count strong { color: var(--ds-ink) !important; }

/* ── Breakthrough songs: two-card pair on the homepage ─────────────────────── */
.ds-breakthrough {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-s6);
  margin-top: var(--ds-s6);
}
.ds-break-card { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.ds-break-card .ds-media { width: 100%; max-width: 420px; }
.ds-break-card__tag { margin-top: var(--ds-s4); }
.ds-break-card__title {
  font-family: var(--ds-font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--ds-ink);
  margin: var(--ds-s2) 0 0;
}
.ds-break-card__desc { margin-top: var(--ds-s3); max-width: 44ch; }
/* CTA row pinned to the card bottom so both cards' buttons line up */
.ds-break-card__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-s4);
  margin-top: auto;
  padding-top: var(--ds-s5);
}
@media (max-width: 760px) {
  .ds-breakthrough { grid-template-columns: 1fr; gap: var(--ds-s7); }
}

/* ── Mobile touch targets: keep icons visual, expand tap area to >=44x44 ───── */
@media (max-width: 768px) {
  /* Hamburger: 26x20 bars stay put, hit box grows via padding (border-box) */
  .mobile-menu {
    width: 44px !important;
    height: 44px !important;
    padding: 12px 9px !important;
    box-sizing: border-box !important;
  }
  /* Mobile-drawer social icons */
  .nav-social a {
    width: 44px !important;
    height: 44px !important;
  }
  /* Footer social icons: enlarge tap area, hold the visible glyph centred */
  .footer-social-nav ul li a {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Footer text links: give short links a full-height tap zone */
  .footer-links a,
  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}