/* =============================================================
   LIFETIME RECORDS — main.css
   Modeled on the live RCA UK site (rcarecords.co.uk).
   Black stage with inset cream / red rounded-corner cards.
   ============================================================= */

:root {
  /* Monochrome palette — black/white/silver greyscale. Variable names
     kept (--red, --neon) so component code that references them keeps
     working; the values are now greyscale so the whole site reads
     B&W. Components that needed contrast (red-bg subscribe, green-bg
     buttons) get explicit overrides further down the cascade. */
  --ink:      #0a0a0a;   /* near-black, surfaces & dark text */
  --ink-2:    #141414;
  --paper:    #ffffff;   /* white — main page background */
  --paper-2:  #f5f5f5;   /* off-white for layered surfaces */
  --red:      #0a0a0a;   /* was red — now black (used as accent on white) */
  --red-2:    #1a1a1a;
  --neon:     #c8c8c8;   /* was neon green — now silver (mid-grey accent) */
  --neon-2:   #b0b0b0;

  --text-on-ink:    #ffffff;
  --text-on-paper:  #0a0a0a;
  --muted-on-ink:   rgba(255, 255, 255, 0.55);
  --rule-on-ink:    rgba(255, 255, 255, 0.18);
  --rule-on-paper:  rgba(10, 10, 10, 0.18);

  /* Type stack
     Real RCA UK uses Compacta + Swear + GT America + Panama (all licensed).
     Free stand-ins: Anton (close to Compacta) + Yeseva One (closest free wedge-serif italic to Swear)
     + Inter for UI. */
  --font-display:    "Anton", "Compacta", "Impact", "Haettenschweiler", sans-serif;
  --font-display-2:  "Bebas Neue", "Anton", "Impact", sans-serif;
  --font-italic:     "Yeseva One", "Playfair Display", Georgia, serif;
  --font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:       "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Fluid type scale */
  --step--1: clamp(.78rem, .76rem + .1vw, .85rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  --step-4:  clamp(2.75rem, 1.8rem + 5vw, 5.5rem);
  --step-5:  clamp(3.5rem, 2rem + 8vw, 8rem);
  --step-6:  clamp(4.5rem, 2rem + 14vw, 14rem);
  --step-7:  clamp(6rem, 3rem + 20vw, 22rem);

  /* Layout */
  --gutter:   clamp(1rem, 2vw, 1.5rem);
  --sec-y:    clamp(2rem, 4vw, 4rem);
  --max-w:    1640px;
  --card-r:   14px;
  --button-r: 8px;
  --pill-r:   999px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.7, 0, .84, 0);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--red); color: var(--paper); }

/* Display type */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0;
}

/* Italic wedge-serif accent */
.italic-serif {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
}

/* Mono / meta */
.mono, .meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}

/* Layout primitives */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sec-y); }

/* Utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Eyebrow label — flush-left section heading on a colored band */
.eyebrow-band {
  position: relative;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}
.eyebrow-band--ink   { background: var(--ink);   color: var(--text-on-ink); }
.eyebrow-band--paper { background: var(--paper); color: var(--text-on-paper); }
.eyebrow-band--neon  { background: var(--neon);  color: var(--ink); }
.eyebrow-band--red   { background: var(--red);   color: var(--paper); }
.eyebrow-band::before,
.eyebrow-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  opacity: .4;
}
.eyebrow-band::before { top: 0; }
.eyebrow-band::after  { bottom: 0; }
.eyebrow-band__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
  display: inline-block;
  padding-inline: var(--gutter);
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none !important; }
}

/* =============================================================
   Ticker — slim full-bleed marquee.
   .ticker--neon = green band; .ticker--red = red band.
   Words separated by an asterisk via the markup (* between spans).
   ============================================================= */
.ticker {
  overflow: hidden;
  position: relative;
}
.ticker--neon { background: var(--neon); color: var(--ink); }
.ticker--red  { background: var(--red);  color: var(--paper); }

/* When a ticker follows a page-header card (interior pages like Merch),
   nudge it down so it sits visibly between the hero card and the
   product/dark-section grid below, instead of crowding the page-header. */
.page-header + .ticker { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.ticker__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  padding-block: clamp(.35rem, .6vw, .55rem);
  animation: ticker-scroll 40s linear infinite;
  font-family: var(--font-mono);
  font-size: clamp(.85rem, 1.2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ticker__track > span {
  display: inline-flex;
  align-items: center;
  margin-right: clamp(1rem, 2vw, 2rem);
}
.ticker__track > span.ticker__sep {
  opacity: .55;
  font-size: 1.2em;
  margin-right: clamp(1rem, 2vw, 2rem);
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Page background subtly textured noise — adds tooth to the paper */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/></svg>");
  mix-blend-mode: multiply;
}