/* PXLPOP typografie/leesbaarheid — gerichte correctie, geen herontwerp.
   job_id: pxlpop-web-typografie-20261002
   Doel: bodytekst comfortabel leesbaar op mobiel en desktop zonder het
   neon/retro-karakter of de paginaopbouw te veranderen.
   Laadt als laatste stylesheet, zodat deze regels de inline basis-CSS en
   Bootstrap overschrijven. */

:root {
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Body: leesbare fontstack (niet condensed-only), basis 1rem en ruime regelafstand. */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

/* Doorlopende tekst ruimer en niet te klein. */
.lead { line-height: 1.6; }
.statement p { line-height: 1.7; }
.step p { font-size: 1rem; line-height: 1.65; }
.social p { line-height: 1.65; }

/* Display-regelafstand: voldoende ruimte tegen clipping/overlap,
   Impact/Arial Black blijft het merkbeeld. */
h1 { line-height: .95; }
h1 .art { line-height: .95; }
.statement h2 { line-height: 1; }
.process h2 { line-height: .98; }
.social h2 { line-height: .95; }

/* Labels en kleine UI-tekst: minimaal ~12px, niet kleiner. */
.ticker { font-size: .82rem; }
.ticker-nav { font-size: .82rem; }
.kicker { font-size: .86rem; }
.section-label { font-size: .82rem; }
.button { font-size: .84rem; }
.hero-index { font-size: .78rem; }
.work figcaption { font-size: .78rem; }
footer { font-size: .84rem; }
.step h3 { font-size: 1.05rem; }

@media (width <= 800px) {
  .ticker-nav { font-size: .78rem; }
}

@media (width <= 520px) {
  .kicker { font-size: .82rem; letter-spacing: .14em; }
  h1 { line-height: .92; }
  /* Specificiteit 0,2,0 zodat dit de inline .hero-actions .button-regel verslaat. */
  .hero-actions .button { font-size: .8rem; line-height: 1.25; }
}