/* =====================================================================
   TYPOGRAPHY · Display, body, mono treatments
   ===================================================================== */

body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "kern";
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
}

p {
  margin: 0 0 1em;
  line-height: 1.55;
  max-width: 60ch;
}

p:last-child { margin-bottom: 0; }

em {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 500;
}

strong {
  font-weight: 700;
}

/* ---------- MONO TREATMENT ---------- */

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-feature-settings: "tnum", "ss01";
}

.mono--xs {
  font-size: var(--text-xxs);
  letter-spacing: 0.08em;
}

/* ---------- HERO TITLE ---------- */

.hero__title {
  font-size: var(--text-3xl);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--color-paper);
  position: relative;
}

.hero__title .hero__line {
  display: block;
  position: relative;
  overflow: hidden;
}

.hero__title-mark {
  display: inline-block;
  font-size: 0.5em;
  color: var(--color-accent);
  margin-left: 0.18em;
  vertical-align: 0.1em;
  transform: translateY(-0.1em);
}

.split-line {
  display: block;
  overflow: hidden;
}
.split-word {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* ---------- ABOUT QUOTE ---------- */

.about__quote {
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-paper);
  max-width: 18ch;
}

.about__quote em {
  color: var(--color-accent);
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 500;
}

/* ---------- SECTION TITLES ---------- */

.valid__title,
.process__title,
.work__title,
.print__title {
  font-size: var(--text-2xl);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--color-paper);
  max-width: 14ch;
  margin-bottom: var(--space-7);
}

.title-arrow {
  display: inline-block;
  color: var(--color-accent);
  margin: 0 0.05em;
  font-size: 0.7em;
  vertical-align: 0.12em;
  transform: translateY(-0.05em);
}

/* ---------- LINKS ---------- */

a:hover { color: var(--color-accent); }

/* ---------- DATA-REVEAL prep ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out-expo),
              transform 0.9s var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- COUNTERS ---------- */

.counter {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-paper);
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}