/* ===== RAAD Records — brand variables =====
   Matched to raadrecords.me / raadrecords.net:
   black background, electric-blue accent, General Sans typeface.
*/
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  --raad-bg: #000000;
  --raad-surface: #0a0a0c;
  --raad-accent: #0366e1;      /* electric blue — matches raadrecords.me nav/links */
  --raad-glow: #6cd9ff;         /* NOTE: no longer used — hero canvas is blue-only now, kept in case a future cyan accent is wanted */
  --raad-text: #ffffff;
  --raad-muted: #8a8a8f;
  --raad-border: rgba(255,255,255,0.08);
  --raad-font: 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Native cursor is hidden everywhere — #cursor-invert (below) is the only
   cursor, site-wide, always showing the "R" glyph color-inverted against
   whatever's underneath it in real time. */
body, a, button, [role="button"], [tabindex], .artist-card, .scroll-top-btn,
.carousel-arrow, input, select, summary, label {
  cursor: none;
}

body {
  background: var(--raad-bg);
  color: var(--raad-text);
  font-family: var(--raad-font);
  overflow-x: hidden;
}

#cursor-invert {
  position: fixed;
  top: 0;
  left: 0;
  width: 19px;
  height: 17px;
  background: #fff;
  -webkit-mask: url('assets/logo/raad-r-glyph.png') center / contain no-repeat;
          mask: url('assets/logo/raad-r-glyph.png') center / contain no-repeat;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  opacity: 1;
  transform: translate(-100px, -100px);
  will-change: transform;
  transition: opacity 0.15s ease;
}

/* Hides the custom cursor while it's over the Spotify embed in the artist
   modal — see the mouseenter/mouseleave wiring in ensureModal() (script.js)
   for why: our document can't track the mouse once it's over that
   cross-origin iframe, so we hand off to Spotify's own cursor instead of
   showing a frozen ghost. */
#cursor-invert.cursor-hidden {
  opacity: 0;
}

a { color: var(--raad-text); text-decoration: none; }
a:hover { color: var(--raad-accent); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--raad-accent);
  font-weight: 600;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2.5rem;
}

.section-title.centered { text-align: center; }

/* ===== Scroll reveal =====
   Applied via JS (setupScrollReveal in script.js, IntersectionObserver-
   driven): starts every .reveal element faded down/out, then fades+lifts it
   in the first time it scrolls into view. This is what makes the page feel
   like it's moving as you scroll it, rather than one flat static column —
   without any continuously-running animation or extra render cost once an
   element has revealed. Respects prefers-reduced-motion (script.js skips
   the transform/opacity setup entirely and shows everything immediately). */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: transform 0.35s ease;
}

.site-header.header-hidden {
  transform: translateY(-110%);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.logo-full {
  height: 36px;
  width: auto;
  display: block;
  /* header only ever shows over the hero's shader background, which swings
     bright — same dark-halo safety net as the rest of the hero content. */
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.7));
}

.site-nav {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.site-nav a {
  padding: 0.3rem 0.55rem;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
  background: #fff;
  color: #000;
  text-shadow: none;
}

.site-nav a.active { color: var(--raad-accent); }

/* Hamburger toggle — hidden on desktop, shown below the mobile/tablet
   breakpoint where the horizontal nav no longer fits without overflowing. */
.nav-toggle {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--raad-border);
  border-radius: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: var(--raad-text);
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-toggle:hover,
.nav-toggle.is-open {
  background: rgba(3,102,225,0.15);
  border-color: var(--raad-accent);
  color: var(--raad-accent);
}

.nav-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

.nav-toggle-icon--close { display: none; }
.nav-toggle.is-open .nav-toggle-icon--open { display: none; }
.nav-toggle.is-open .nav-toggle-icon--close { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* Dropdown panel instead of a horizontal row — anchored to .site-header
     (the nearest positioned ancestor), spanning the full header width. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(8,8,10,0.97);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--raad-border);
    border-bottom: 1px solid var(--raad-border);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  .site-nav.is-open {
    max-height: 320px;
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav a {
    height: 3.4rem; /* fixed, not padding-based — every row is identically sized regardless of label length */
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid var(--raad-border);
    text-shadow: none; /* solid panel background now, no shader to fight */
  }

  .site-nav a:last-child { border-bottom: none; }

  /* Same full-white-rectangle feedback as the desktop nav's hover — :active
     covers the tap itself on touch devices (which don't have real hover). */
  .site-nav a:hover,
  .site-nav a:active {
    background: #fff;
    color: #000;
  }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--raad-bg);
}

/* Live animated background — a <canvas> painted by setupHeroCanvas() in
   script.js with slow-drifting blurred blobs, additively blended so they
   glow like the moving smoke effect on raadrecords.me. Replaced the earlier
   static-photo + CSS-only glow approach because it read as too static. */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* NOTE: there used to be a .hero::after dark radial scrim here, dimming the
   whole background so the text stayed legible — removed because it flattened
   the shader's color across the board (reads as "dull"). Legibility is now
   handled locally instead: drop-shadow on the logo/nav, text-shadow on the
   paragraph (see .hero-logo-large, .site-nav, .logo-full, .hero-sub) — so
   the background itself can stay at full, unmuted vibrancy.*/

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
  width: 100%;
}

.hero-inner--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-icon {
  height: clamp(48px, 8vw, 72px);
  width: auto;
  display: block;
  margin-bottom: 1.5rem;
}

.hero-logo-large {
  width: min(680px, 90%);
  height: auto;
  display: block;
  margin: 0 auto 2rem;
  /* the shader background swings from dark to near-white on its own — a
     permanent dark halo keeps the white logo readable through the bright
     moments instead of chasing it with per-frame contrast logic. */
  filter: drop-shadow(0 2px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 10px rgba(0,0,0,0.6));
}

.hero-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: clamp(0.82rem, 1.15vw, 0.95rem);
  color: #f2f2f2;
  max-width: 64rem;
  line-height: 2;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.25;
  animation: scroll-bounce 2.2s ease-in-out infinite;
  transition: opacity 0.2s ease;
}

.scroll-indicator:hover { opacity: 0.6; }
.scroll-indicator svg { width: 28px; height: 28px; stroke: var(--raad-text); }

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.hero-cta {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--raad-accent);
  color: #fff;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, background 0.2s ease;
}

.hero-cta:hover {
  background: #0450b3;
  color: #fff;
  transform: translateY(-2px);
}

/* ===== Artists marquee ===== */
.artists {
  padding: 6rem 0;
  position: relative;
  border-bottom: 1px solid var(--raad-border);
}

.artists .section-title,
.artists .eyebrow {
  padding: 0 2rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.carousel-row {
  position: relative;
}

.marquee-viewport {
  overflow-x: auto;
  /* This is the actual fix for the "glitchy vertical scroll" — per spec,
     overflow-x:auto with overflow-y left unset computes overflow-y to
     'auto' as well (not 'visible'), silently turning this row into its own
     vertical scroll container too. Setting it explicitly to hidden kills
     that. touch-action:pan-x below is a second, complementary fix (stops
     diagonal touch drags from being captured at all), but this line is
     what removes the scrollbar/scroll capability itself. */
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
}

.marquee-viewport::-webkit-scrollbar { display: none; }

.marquee {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding: 0 2rem;
}

/* ===== Carousel arrow buttons (shared: artists + highlights + releases) =====
   Small, always-sharp digital squares with the chevron dead-centered. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--raad-border);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: var(--raad-text);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.carousel-arrow svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  transition: stroke-width 0.15s ease;
}

.carousel-arrow:hover {
  background: rgba(3,102,225,0.15);
  border-color: var(--raad-accent);
  color: var(--raad-accent);
  box-shadow: 0 0 0 1px var(--raad-accent), 0 0 12px rgba(3,102,225,0.5);
}

.carousel-arrow:hover svg {
  stroke-width: 3.5;
}

.carousel-arrow--prev { left: 0.5rem; }
.carousel-arrow--next { right: 0.5rem; }

/* Releases + Highlights: arrows sit outside the artwork, vertically centered
   on the artwork itself (top is set inline by JS to match art height/2). */
.carousel-row--outside-arrows .carousel-arrow--prev { left: -36px; }
.carousel-row--outside-arrows .carousel-arrow--next { right: -36px; }

@media (max-width: 1060px) {
  .carousel-row--outside-arrows .carousel-arrow--prev { left: 0.5rem; }
  .carousel-row--outside-arrows .carousel-arrow--next { right: 0.5rem; }
}

@media (max-width: 640px) {
  .carousel-arrow { width: 20px; height: 20px; }
  .carousel-arrow svg { width: 10px; height: 10px; }
}

.artist-card {
  flex-shrink: 0;
  width: 310px;
}

.artist-photo {
  width: 310px;
  aspect-ratio: 220 / 280; /* was a fixed 220x280 — aspect-ratio scales cleanly at every breakpoint */
  border-radius: 8px;
  background: var(--ph-color, #16181d);
  background-size: cover;
  background-position: center;
  margin-bottom: 0.9rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.artist-card:hover .artist-photo { transform: scale(1.03); }

.artist-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 50%);
}

.artist-name {
  font-weight: 600;
  font-size: 1rem;
}

.artist-country {
  font-size: 0.75rem;
  color: var(--raad-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

.platform-links {
  display: flex;
  gap: 0.65rem;
}

.platform-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--raad-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.platform-links a:hover {
  background: var(--raad-accent);
  transform: translateY(-2px);
}

.platform-links svg { width: 14px; height: 14px; fill: var(--raad-text); }

.platform-links a.is-empty { display: none; }

.listen-btn {
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  padding: 0.45rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--raad-accent) !important;
}

.listen-btn:hover { background: #0450b3 !important; }

/* ===== Releases (single-row carousel) ===== */
.releases {
  padding: 6rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--raad-border);
}

.release-row-viewport {
  overflow-x: auto;
  overflow-y: hidden; /* the actual vertical-scroll fix — see .marquee-viewport for why */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
}

.release-row-viewport::-webkit-scrollbar { display: none; }

.release-grid {
  display: flex;
  gap: 1.75rem;
}

.release-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 0 0 220px;
  scroll-snap-align: start;
}

.release-art {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--ph-color, #16181d);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.release-card:hover .release-art { transform: scale(1.02); }

.release-title {
  font-size: 1rem;
  font-weight: 600;
  /* Long titles (e.g. ALL CAPS ones pulled from the distributor) used to
     wrap onto a second line, making that one card's title-row taller than
     its neighbors — which visibly knocked its play button out of line with
     the rest of the row. Truncating to one line keeps every card's row the
     same height, so every play button lands on the same line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.release-artist { font-size: 0.85rem; color: var(--raad-muted); }
.release-date { font-size: 0.75rem; color: var(--raad-muted); opacity: 0.7; }

/* Release-type tag (Single/EP/Album) — DEMO on two entries only right now,
   see data.js. Sits inline after the artist name; the middot separator only
   ever appears when there's actually a type to show. */
.release-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--raad-accent);
}

.release-type::before {
  content: '·';
  margin: 0 0.4em;
  color: var(--raad-muted);
}

/* Title + play icon, same row, icon on the right (releases & highlights) */
.release-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.play-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 26px;
  height: 26px;
  transition: transform 0.2s ease;
}

.play-icon svg { width: 100%; height: 100%; fill: var(--raad-accent); }
.play-icon:hover { transform: scale(1.12); }

.release-card--see-all .release-artist a { color: var(--raad-accent); font-weight: 600; }
.release-card--see-all .release-artist a:hover { color: var(--raad-text); }

/* ===== Highlighted Releases ===== */
.highlights {
  padding: 6rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* Full-bleed surface tint behind this section only — breaks out of the
   1280px content column via the classic "100vw centered" trick, so Artists
   (black) / Highlights (tinted) / Releases (black) / Contact (tinted)
   alternate as you scroll instead of one flat black column all the way
   down. Sits behind everything else in the section (z-index -1). */
.highlights::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--raad-surface);
  border-top: 1px solid var(--raad-border);
  border-bottom: 1px solid var(--raad-border);
}

.highlight-row-viewport {
  overflow-x: auto;
  overflow-y: hidden; /* the actual vertical-scroll fix — see .marquee-viewport for why */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
}

.highlight-row-viewport::-webkit-scrollbar { display: none; }

.highlight-grid {
  display: flex;
  gap: 2.5rem;
}

.highlight-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 300px;
  scroll-snap-align: start;
}

.highlight-art {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--ph-color, #16181d);
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
  box-shadow: 0 20px 50px -20px rgba(3,102,225,0.35);
}

.highlight-card:hover .highlight-art { transform: scale(1.015); }

.highlight-title {
  font-size: 1.15rem;
  font-weight: 700;
  /* Same one-line truncation as .release-title, and for the same reason —
     see its comment. Amaka's long ALL CAPS title was the one that surfaced
     this. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.highlight-artist { font-size: 0.9rem; color: var(--raad-muted); }

/* ===== Mobile/tablet: one-card-at-a-time swipe carousels =====
   Below 900px, Artists/Highlights/Releases become "flick through one at a
   time" carousels: each card is sized to fill most of the viewport (with a
   small peek of its neighbor) and scroll-snap is switched from the
   desktop's loose "proximity" to "mandatory", so a swipe always lands
   squarely on a card instead of stopping partway between two. The artist
   marquee's ambient auto-drift is also turned off at this width in
   script.js (setupArtistCarousel) so it doesn't fight the snap points. */
@media (max-width: 900px) {
  .marquee-viewport,
  .release-row-viewport,
  .highlight-row-viewport {
    scroll-snap-type: x mandatory;
  }

  .artist-card {
    width: 68vw;
    scroll-snap-align: center;
  }

  .artist-photo { width: 68vw; }

  .release-card {
    flex: 0 0 74vw;
    scroll-snap-align: center;
  }

  .highlight-card {
    flex: 0 0 78vw;
    scroll-snap-align: center;
  }
}

/* ===== About-page specific ===== */
.about-hero {
  padding: 9rem 2rem 3rem;
  max-width: 1280px;
  margin: 0 auto;
}

.about-copy {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

.about-copy p {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
}

.about-copy p .accent { color: var(--raad-accent); }

.services {
  padding: 5rem 2rem;
  background: var(--raad-surface);
  border-top: 1px solid var(--raad-border);
  border-bottom: 1px solid var(--raad-border);
}

.services-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--raad-border);
}

.service-item {
  background: var(--raad-surface);
  padding: 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.service-item span {
  display: block;
  font-size: 0.7rem;
  color: var(--raad-accent);
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

/* ===== Contact ===== */
.contact {
  padding: 5rem 2rem;
  background: var(--raad-surface);
  border-top: 1px solid var(--raad-border);
}

.contact-card {
  max-width: 440px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  border: 1px solid var(--raad-border);
  border-radius: 18px;
  background: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(3,102,225,0.12), transparent 65%), var(--raad-bg);
  text-align: center;
}

.contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin: 0 auto 1.1rem;
  display: block;
}

.contact-card .section-title { margin-bottom: 1.5rem; font-size: clamp(1.4rem, 3vw, 1.8rem); }

.contact-email-btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--raad-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-email-btn:hover {
  background: #0450b3;
  color: #fff;
  transform: translateY(-2px);
}


.social-icons {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.social-icons a:hover { transform: translateY(-2px); }

.social-icons svg { width: 24px; height: 24px; fill: var(--raad-text); }
.social-icons a:hover svg { fill: var(--raad-accent); }
.social-icons img { width: 24px; height: 24px; object-fit: contain; }

.social-icons--contact {
  margin-top: 1.5rem;
  gap: 1rem;
}

.social-icons--contact img,
.social-icons--contact svg {
  width: 19px;
  height: 19px;
}

/* ===== Footer =====
   Desktop: 3-column grid (empty / copyright / links) so the copyright text
   sits mathematically centered across the full footer width regardless of
   how wide the legal-links cluster is, while the links themselves pin to
   the right. Mobile/tablet: single centered column, copyright then links
   stacked tight underneath (see the max-width:768px override below). */
.site-footer {
  padding: 2rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--raad-muted);
  border-top: 1px solid var(--raad-border);
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.footer-copyright {
  grid-column: 2;
  text-align: center;
}

.footer-links {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 1.25rem;
}

@media (max-width: 768px) {
  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  .footer-links { justify-self: unset; }
}

/* ===== Artist popup modal ===== */
body.modal-open { overflow: hidden; }

.artist-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

.artist-modal-backdrop.is-open {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  opacity: 1;
  pointer-events: auto;
}

.artist-modal {
  position: relative;
  width: min(800px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--raad-surface);
  border: 1px solid var(--raad-border);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(3,102,225,0.4);
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3), opacity 0.3s ease;
}

.artist-modal-backdrop.is-open .artist-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Now literally the same styling as .carousel-arrow (dark translucent
   square, white icon, blue-glow hover) instead of its own white-square
   look, so it reads as the same button language as the side-scroll
   arrows everywhere else on the site. */
.artist-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--raad-border);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: var(--raad-text);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.artist-modal-close svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  transition: stroke-width 0.15s ease;
}

.artist-modal-close:hover {
  background: rgba(3,102,225,0.15);
  border-color: var(--raad-accent);
  color: var(--raad-accent);
  box-shadow: 0 0 0 1px var(--raad-accent), 0 0 12px rgba(3,102,225,0.5);
}

.artist-modal-close:hover svg { stroke-width: 3.5; }

@media (max-width: 640px) {
  .artist-modal-close { width: 20px; height: 20px; } /* matches .carousel-arrow's own mobile size */
  .artist-modal-close svg { width: 10px; height: 10px; }
}

.artist-modal-layout {
  display: flex;
}

.artist-modal-photo {
  flex: 0 0 42%;
  align-self: stretch;
  background: var(--ph-color, #16181d);
  background-size: cover;
  background-position: center;
  border-radius: 16px 0 0 16px;
}

.artist-modal-body {
  flex: 1;
  min-width: 0;
  padding: 1.75rem;
}

.artist-modal-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.25rem; }

.artist-modal-country {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--raad-muted);
  margin-bottom: 1.1rem;
}

.artist-modal-links {
  display: flex;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.artist-modal-links a { display: inline-flex; transition: transform 0.2s ease; }
.artist-modal-links a:hover { transform: translateY(-2px); }
.artist-modal-links svg { width: 16px; height: 16px; fill: var(--raad-text); }
.artist-modal-links a:hover svg { fill: var(--raad-accent); }
.artist-modal-links img { width: 16px; height: 16px; object-fit: contain; }

.artist-modal-embed:not(:empty) { border-radius: 10px; overflow: hidden; }

@media (max-width: 640px) {
  .artist-modal-layout { flex-direction: column; }
  .artist-modal-photo { flex-basis: auto; aspect-ratio: 4 / 3; border-radius: 16px 16px 0 0; }
}

/* ===== Scroll-to-top button ===== */
.scroll-top-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid var(--raad-border);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, border-radius 0.15s ease;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: rgba(3,102,225,0.2);
  border-color: var(--raad-accent);
  border-radius: 0;
}

.scroll-top-btn svg { width: 18px; height: 18px; stroke: var(--raad-text); }

/* ===== Legal pages (Privacy / Terms) ===== */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 9rem 2rem 6rem;
  line-height: 1.7;
  color: #ddd;
}

.legal-notice {
  background: rgba(3,102,225,0.1);
  border: 1px solid var(--raad-accent);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: var(--raad-text);
  margin-bottom: 2.5rem;
}

.legal-notice code {
  background: rgba(255,255,255,0.1);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}

.legal-page h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; margin-bottom: 0.5rem; }
.legal-updated { color: var(--raad-muted); font-size: 0.85rem; margin-bottom: 2.5rem; }
.legal-page h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--raad-text); }
.legal-page p, .legal-page ul { margin-bottom: 1rem; }
.legal-page ul { padding-left: 1.25rem; }
.legal-page a { color: var(--raad-accent); }
.legal-page a:hover { color: var(--raad-text); }

.site-footer a { color: var(--raad-muted); }
.site-footer a:hover { color: var(--raad-accent); }

/* ===== Responsive =====
   NOTE: artist-card/photo sizing and the nav's gap/font-size used to be
   overridden here too, but that's now fully owned by the 900px breakpoint
   above (dropdown nav + one-card-at-a-time carousels) — leaving both in
   sync in one place instead of two rules fighting by source order. */
@media (max-width: 640px) {
  .releases, .services, .contact, .about-hero, .about-copy { padding-left: 1.25rem; padding-right: 1.25rem; }
}