/* ==========================================================================
   ORPHIC BEATS — main.css
   Design tokens, reset, base typography, layout primitives.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* Backgrounds */
  --bg-void:        #07060c;   /* page background — near-black cosmic navy */
  --bg-deep:        #0c0a16;   /* elevated background (sections) */
  --bg-surface:     #131120;   /* card / panel surface */
  --bg-surface-2:   #1a1729;   /* hover / raised surface */

  /* Text */
  --text-primary:   #f3f1f8;
  --text-secondary: #b9b4c9;
  --text-muted:     #7d7791;

  /* Accents */
  --accent-magenta: #cc4fd9;
  --accent-cyan:    #45d7cf;
  --accent-violet:  #6e53e0;
  --accent-amber:   #e2a154; /* rare warm counterpoint, used sparingly */

  /* Gradients */
  --grad-aurora: linear-gradient(135deg, #6e53e0 0%, #cc4fd9 52%, #45d7cf 100%);
  --grad-veil:   radial-gradient(circle at 30% 20%, rgba(110,83,224,0.35), transparent 60%),
                 radial-gradient(circle at 75% 65%, rgba(204,79,217,0.25), transparent 55%);

  /* Borders */
  --border-subtle:  rgba(243,241,248,0.08);
  --border-strong:  rgba(243,241,248,0.16);

  /* Shadows */
  --shadow-soft: 0 20px 60px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 80px rgba(204,79,217,0.12);

  /* Layout */
  --container-max: 1480px;
  --gutter-desktop: 56px;
  --gutter-tablet: 40px;
  --gutter-mobile: 20px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* Type scale (fluid) */
  --fs-display: clamp(2.75rem, 6vw + 1rem, 6.5rem);
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.65rem);
  --fs-body-lg: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --header-height: 84px;
}

/* -------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body{
  margin: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure{ margin: 0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html{ scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------- */
.font-display{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
h1, h2, h3, .heading{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

p{ color: var(--text-secondary); max-width: 62ch; }
p.lead{ font-size: var(--fs-body-lg); color: var(--text-secondary); }

.text-muted{ color: var(--text-muted); }
.text-center{ text-align: center; margin-left: auto; margin-right: auto; }
/* A block-level <p> has its own max-width (see base typography rules)
   and doesn't get centered by text-align alone — without this, any
   .text-center wrapper with a plain <p> child renders the text flush
   left instead of centered (seen on the Music page's Bandcamp CTA). */
.text-center p{ margin-inline: auto; }

/* -------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}
@media (max-width: 1023px){
  .container{ padding-inline: var(--gutter-tablet); }
}
@media (max-width: 767px){
  .container{ padding-inline: var(--gutter-mobile); }
}

.section{
  position: relative;
  padding-block: clamp(64px, 9vw, 140px);
}
.section--tight{ padding-block: clamp(40px, 5vw, 80px); }
.section--deep{ background: var(--bg-deep); }

.section-header{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 64px);
  max-width: 720px;
}
.section-header .kicker{
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  font-weight: 600;
}
.section-header--split{
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}
@media (max-width: 640px){
  .section-header--split{ flex-direction: column; align-items: flex-start; gap: 20px; }
}

.grid{
  display: grid;
  gap: clamp(20px, 2.2vw, 32px);
}
.grid--artists{ grid-template-columns: repeat(5, 1fr); }
.grid--releases{
  /* auto-fit + justify-content:center means a single release sits as one
     intentional, balanced card instead of being squeezed into a forced
     3-column track — and the grid still lays out naturally in multiple
     columns once more releases exist, with no hardcoded column count. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-content: center;
}
.grid--radio{ grid-template-columns: repeat(3, 1fr); }
.grid--news{ grid-template-columns: repeat(3, 1fr); }
.grid--events{ grid-template-columns: repeat(2, 1fr); }
.grid--gallery{ grid-template-columns: repeat(3, 1fr); }
.grid--gallery .card-media{ aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.grid--gallery .card-media img{ width:100%; height:100%; object-fit:cover; }

.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;
}

.skip-link{
  position: absolute;
  top: -48px;
  left: 16px;
  background: var(--accent-violet);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus{ top: 16px; }

:focus-visible{
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Ambient background veil reused across pages */
.veil{
  position: absolute;
  inset: 0;
  background: var(--grad-veil);
  pointer-events: none;
  z-index: 0;
}

/* Scroll reveal (see js/animations.js) */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* Multi-paragraph artist biography (see js/artist-detail.js) */
.bio-text p{
  margin-bottom: 16px;
  max-width: 62ch;
}
.bio-text p:last-child{ margin-bottom: 0; }
.bio-text blockquote{
  margin: 24px 0;
  padding-left: 22px;
  border-left: 2px solid var(--accent-cyan);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--text-primary);
  max-width: 58ch;
}

/* empty state used when a data collection has no items yet */
.empty-state{
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  color: var(--text-muted);
}
.empty-state strong{ display:block; color: var(--text-secondary); font-size: var(--fs-body-lg); margin-bottom: 8px; }