/* ==========================================================================
   TYPOGRAPHY
   Display: Bricolage Grotesque — loaded via Google Fonts <link> in
   index.html. Chosen because it's drawn as a grotesque with ink-trap
   notches: the small cuts print type has always used to stop ink from
   clogging fine details on rough paper. The one on-the-nose choice we
   allow ourselves for a printing company.
   Body: Instrument Sans — quiet and legible, stays out of the way.

   PRODUCTION NOTE: for a fully self-hosted build, download both families
   as woff2 and swap the Google Fonts <link> for local @font-face rules.
   See README.md → "Fonts" for exact weights used.
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  color: var(--cp-ink);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 600;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--orange-500);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cp-orange);
  flex-shrink: 0;
}

p {
  color: var(--color-text);
}

/* Safety-net utility for hand-rolled reveal masks (SplitText's own
   `mask: "lines"` option handles this automatically where used) */
.split-line {
  overflow: hidden;
}