/* ==========================================================================
   Perreo — Typography tokens
   Four-tier system pulled straight from the dictionary spreads:
   1. Display  (Eds Market Slant)   — giant word/headline lockups, "shout" type
   2. Section  (Eds Market Slant)   — colored sub-heads ("Origen", "Historia")
   3. Label    (Aachen Std)         — chunky slab for badges, stats, eyebrows
   4. Accent   (Utility)            — condensed swash caps for small tags
   Body copy runs on Mulish (substitute, see fonts.css).
   ========================================================================== */

:root {
  --font-display: 'Eds Market Slant', 'Arial Black', sans-serif;
  --font-section: 'Eds Market Slant', 'Arial Rounded MT Bold', sans-serif;
  --font-label:   'Aachen Std', Georgia, serif;
  --font-accent:  'Utility', 'Arial Narrow', sans-serif;
  --font-body:    'Mulish', -apple-system, 'Segoe UI', sans-serif;

  /* type scale — display type is oversized & loud on purpose */
  --text-display-xl: 120px;
  --text-display-lg: 84px;
  --text-display-md: 56px;
  --text-section-lg: 34px;
  --text-section-md: 26px;
  --text-body-lg: 20px;
  --text-body-md: 17px;
  --text-body-sm: 15px;
  --text-label: 16px;
  --text-eyebrow: 13px;

  --leading-tight: 0.92;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.12em;
}

/* the "doubled echo" hand-painted treatment applied to Display type — a
   solid white duplicate of the glyphs offset behind the black fill (a flat
   drop-shadow with zero blur reads as a second layer, not a soft shadow),
   seen on every chapter word-mark (BICHOTA, TETEO, TIGUERE, PERREO...). The
   face itself is a slanted script, plus a slight extra tilt for that
   hand-lettered, painted-on-the-wall energy. */
.text-display-stamp {
  font-family: var(--font-display);
  color: var(--ink);
  text-shadow:
    5px 6px 0 #fff,
    9px 11px 0 rgba(0,0,0,0.18);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  transform: rotate(-3deg);
}
/* when the element wraps multiple lines/words that should tilt
   independently (e.g. a divider's giant letter + label stacked), apply the
   tilt to each child instead of the whole block */
.text-display-stamp.text-display-stamp--per-child {
  transform: none;
}
.text-display-stamp.text-display-stamp--per-child > * {
  display: inline-block;
  transform: rotate(-3deg);
}

/* colored sub-heads ("Origen", "¿Y cómo se usa?") — same tilt as before,
   plain colored text (no stamp/echo shadow, no highlight box) */
.text-section-tilt {
  font-family: var(--font-section);
  display: inline-block;
  transform: rotate(-2deg);
}