/* ============================================================
   BASE — reset + Recykal.Market typography system
   Display: Bricolage Grotesque (w500, -0.03em, 120%)
   Body:    Geist (15–17px, secondary = rgba(0,0,0,.56))
   Mono:    Kode Mono (eyebrows/labels)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--green); color: var(--white); }

/* ---------- Type scale (recykal.market) ---------- */
.title-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  text-wrap: balance;
}
.title-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}
.title-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.title-card {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-card);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-h4);
  color: var(--ink-2);
}
.body-lg { font-size: var(--fs-body-lg); line-height: 1.5; }
.body-sm { font-size: var(--fs-small); line-height: 1.4; }
.text-muted { color: var(--ink-56); }

/* Eyebrows: Kode Mono, deep green on light / mint on dark, tight tracking */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--green-deep);
}
.on-dark .eyebrow, .eyebrow--mint { color: var(--mint); }

/* Overline — "IMPACT"-style label: Inter uppercase, gray, +2.08px tracking */
.eyebrow-wide {
  font-family: var(--font-overline);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.08px;
  color: var(--muted-3);
}

/* Dark band text rules: white headings, mint eyebrows, white-56 body */
.on-dark { background: var(--band); color: var(--white); }
.on-dark .title-hero, .on-dark .title-h2, .on-dark .title-h3, .on-dark .title-card { color: var(--white); }
.on-dark .text-muted { color: var(--white-56); }

/* ---------- Layout helpers ---------- */
.container { padding-left: var(--grid-margin); padding-right: var(--grid-margin); }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Per-character headline reveal — recykal.market's own color-sweep
   mechanic: each character fades in while cooling from Recykal red
   (#a51c30) to its natural heading color (ink/black on light bands, white
   on dark; an <em> settles into its own accent color via plain
   inheritance). Slowed slightly from the original pass to read closer to
   the real site's pacing. The "chw" word wrapper stays nowrap so a word
   never breaks mid-character. */
[data-split] .chw { display: inline-block; white-space: nowrap; }
[data-split] .ch {
  opacity: 0;
  color: #a51c30;
  transition: opacity .45s linear, color .45s linear;
}
[data-split].is-in .ch { opacity: 1; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-split] .ch {
    opacity: 1 !important; color: inherit !important; transition: none !important;
  }
  html { scroll-behavior: auto; }
}