/* ── FONTS (self-hosted, SIL OFL — see /fonts/OFL.txt) ── */
/* Archivo Expanded, heavy: the poster voice. One file covers weights 800–900 at 125% width. */
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/archivo-expanded-800.woff2') format('woff2');
  font-weight: 800 900;
  font-stretch: 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ── */
:root {
  color-scheme: dark;

  /* Color: a xeroxed show poster under a night sky. Black ground, bone paper ink,
     and the purple from the band's own shirt print as the one accent.
     Contrast on --c-ground: ink 16.6:1, muted 8.4:1, accent text 7.8:1, focus 13.5:1. */
  --c-ground:    #0A090C;   /* page background */
  --c-surface:   #15121A;   /* one tone step up: panels, nearest ridge */
  --c-surface-2: #1E1A25;   /* two steps up: hover fills, farthest ridge */
  --c-ink:       #EEEAE3;   /* body text, bone paper */
  --c-muted:     #ADA6B5;   /* secondary text */
  --c-accent:    #9D5CFF;   /* the primary action (ground-colored text on it: 5.1:1) */
  --c-accent-hi: #B07DFF;   /* primary hover (6.8:1) */
  --c-accent-text: #B98CFF; /* accent as text on the ground */
  --c-focus:     #E2CCFF;   /* focus ring */
  --c-on-ink-muted: #4A4252; /* secondary text on the bone footer (8:1) */
  --c-danger:    #FF8FA3;   /* error text */
  --c-success:   #8FE3C0;   /* success text */
  --c-line:      rgba(238, 234, 227, 0.16); /* real tables and form fields only */
  --c-line-hi:   rgba(238, 234, 227, 0.5);
  --c-scrim:     rgba(10, 9, 12, 0.9);

  /* Older names, still used by the merch and legal pages. */
  --c-void:      var(--c-ground);
  --c-ridge:     var(--c-surface);
  --c-ridge-mid: var(--c-surface-2);
  --c-ridge-far: var(--c-surface-2);
  --c-violet:    var(--c-accent);
  --c-violet-hi: var(--c-accent-hi);
  --c-blue:      var(--c-accent-text);
  --c-lavender:  var(--c-accent-text);
  --c-text:      var(--c-ink);
  --c-border:    var(--c-line);
  --c-border-hi: var(--c-line-hi);

  /* Photocopy grain: tiny SVG noise, laid over photos and the hero. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Type: a heavy expanded poster face for headings, a plain readable face for everything else. */
  --font-display: 'Archivo Expanded', 'Arial Black', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Five sizes do the work: small, body, lead, section heading, poster statement.
     The wordmark is sized by width, not by this scale. */
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --step-3:  clamp(2.25rem, 1.2rem + 4.4vw, 4.75rem);
  /* Older steps, mapped onto the five. */
  --step-4:  var(--step-2);
  --step-5:  var(--step-3);
  --step-hero: var(--step-3);

  --leading-body: 1.6;
  --leading-tight: 0.95;
  --tracking-display: -0.02em;
  --measure: 68ch;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  /* One pair of outer margins for the whole page: header, hero, sections and footer share it. */
  --gutter: clamp(1rem, 2.2vw, 2rem);
  --gutter-tight: var(--gutter);
  --content-max: 100rem;

  /* Shape: square, like cut paper. */
  --radius-sm: 0;
  --radius-md: 0;

  /* Motion */
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 900ms;
  --dur-reveal: 700ms; /* scroll reveals and the hero entrance: seen once, so they can take their time */
  --stagger: 70ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* Layers */
  --z-nav: 100;
  --z-banner: 200;
  --z-dialog: 300;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--c-ground), 0 0 0 5px var(--c-focus);
}