/* ------------------------------------------------------------------
   typography.css — global type utility classes.

   These are the six classes every text element should pull from.
   They bundle the four properties that define a "type role" —
   font-size, font-weight, line-height, letter-spacing — so any text
   placed inside an element with one of these classes is rendered
   correctly without the component CSS having to re-specify them.

   Pair with structural rules in your component CSS for layout,
   colour, max-width, margin, etc. — e.g.

     <h2 className={`t-h1 ${styles.sectionTitle}`}>Selected Works</h2>

   where `styles.sectionTitle` handles colour/alignment/etc., and
   `t-h1` handles the type role.

   The font-size values are defined as --t-* tokens in
   src/styles/tokens.css so they can also be referenced from
   component-level CSS Modules via var(--t-*) when a utility class
   isn't structurally convenient.
   ------------------------------------------------------------------ */

/* Hero heading — used ONLY by per-page hero sections
   (HomeHero, ServicesHero, ContactHero, DesignProcessHero). Distinct
   from .t-h1 so per-page heroes can keep a louder scale while the rest
   of the page reads at the calmer H1 size. */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.98;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 115%;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 115%;
}

.t-lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.t-body {
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

.t-label {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.t-micro {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}