/**
 * jazz-ecm-editorial.css — Reference theme (fully implemented)
 *
 * Vibe: monochrome, contemplative, museum-grade.
 * Reference: ECM Records sleeve aesthetic, Linda Scharnagl ICP.
 * Typography: Söhne Breit (display) + Söhne (body) — with Inter fallback.
 *
 * This is the ONE FULLY FLESHED THEME. All 20 other themes use this file
 * as a reference and override only the variables that differ.
 *
 * Usage: linked from BaseLayout.astro via <link rel="stylesheet" href="/themes/jazz-ecm-editorial.css">
 */

/* ─── Google Fonts load (free fallbacks for Söhne) ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap');

:root {
  /* ─── Color tokens ─────────────────────────────────────────────────────── */
  --ink:        #0A0A0A;   /* near-black, primary text */
  --paper:      #F2EDE4;   /* warm bone — the "concert programme" tone */
  --accent:     #0A0A0A;   /* no accent color in ECM editorial — links underline only */
  --muted:      #5A5A5A;   /* metadata, secondary text */
  --rule:       rgba(10, 10, 10, 0.12); /* hairline rules */
  --surface-alt: #EDEAE2;  /* slightly darker paper for alternating sections */
  --hover-row:  rgba(10, 10, 10, 0.03);

  /* Hero */
  --hero-overlay: linear-gradient(to top, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0.15) 55%, transparent 80%);
  --hero-text: #F2EDE4;
  --hero-text-muted: rgba(242, 237, 228, 0.65);

  /* ─── Typography tokens ────────────────────────────────────────────────── */
  /* Display: Fraunces (Tiempos-class transitional serif) — free Google Font */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Body: Inter (Söhne stand-in, ubiquitous, legible) */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --weight-display: 600;
  --weight-body: 400;
  --leading-display: 1.05;
  --leading-body: 1.65;

  /* Tight tracking on display headings — ECM convention */
  --tracking-display: -0.025em;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px — eyebrows, metadata */
  --text-sm:   0.875rem;   /* 14px — nav links, captions */
  --text-base: clamp(1rem, 1.1vw + 0.4rem, 1.125rem); /* 16–18px — body */
  --text-lg:   clamp(1.125rem, 1.5vw + 0.4rem, 1.375rem); /* 18–22px */
  --text-h3:   clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
  --text-h2:   clamp(1.625rem, 3vw + 0.5rem, 2.25rem);
  --text-h1:   clamp(2.75rem, 6vw, 5rem);  /* 44–80px */

  /* ─── Spacing tokens ───────────────────────────────────────────────────── */
  --space-xs:    0.25rem;
  --space-sm:    0.75rem;
  --space-md:    1.5rem;
  --space-lg:    2rem;      /* horizontal page padding */
  --space-xl:    3rem;
  --space-2xl:   5rem;
  --section-gap: clamp(4rem, 8vw, 7rem);
  --content-max: 1080px;    /* tighter than rock — ECM breathes */
  --nav-height:  3.25rem;

  /* ─── Component specifics ──────────────────────────────────────────────── */

  /* Hero: typographic placeholder background */
  --hero-placeholder-bg: var(--ink);

  /* Tour list: monospace date column */
  --font-tour-dates: 'Inter', monospace;

  /* Press strip: italic quote style */
  --press-quote-style: italic;

  /* Nav: no border underline, just tight caps */
  --nav-link-transform: uppercase;
  --nav-link-tracking: 0.08em;
}

/* ─── ECM-specific overrides ─────────────────────────────────────────────── */

/* No decorative elements — the ECM way */
.hero__cta {
  background: transparent;
  border: 1px solid var(--hero-text);
  color: var(--hero-text);
  padding: 0.6rem 1.25rem;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero__cta:hover { background: var(--hero-text); color: var(--ink); }

/* Single B&W photography hero — the overlay is gentle */
.hero__image { filter: grayscale(20%); }

/* Asymmetric tour list — left-heavy */
.tour-list__table { font-family: var(--font-tour-dates); }
.tour-list__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* Press quotes: large italic, no border */
.press-strip__quote p { font-size: var(--text-lg); }
.press-strip { background: transparent; }

/* Footer: minimal — just email + copyright */
.site-footer { background: var(--paper); }