/* Roughley Mechanical — type primitives.

   One family, Archivo, at three widths, echoing the logo: condensed for
   headlines like ROUGHLEY, expanded for labels like MECHANICAL, normal for
   reading. Every class below sets width + weight + size + case together,
   because in this system those four move as one.

   Copy is authored in sentence case and uppercased in CSS. text-transform is
   presentational and safe for assistive tech, but typing "OUR SERVICES" into
   the DOM risks letter-by-letter announcement and destroys the unstyled
   fallback if the stylesheet fails to load. HVAC is a real acronym and stays. */

.t-display {
  font-stretch: var(--w-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.t-heading {
  font-stretch: var(--w-display);
  font-weight: var(--fw-heading);
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.t-card-title {
  font-stretch: var(--w-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  text-transform: uppercase;
}

.t-quote {
  font-stretch: var(--w-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  text-transform: uppercase;
}

.t-label {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.t-eyebrow {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.t-micro {
  font-stretch: var(--w-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-micro);
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.t-body {
  font-stretch: var(--w-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.t-support {
  font-stretch: var(--w-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-support);
  line-height: var(--lh-support);
  color: var(--text-body);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  color: var(--text-meta);
}

/* Modifiers — opt-in, so a heading can take a measure too. */
.t-measure { max-width: var(--measure); text-wrap: pretty; }
.t-balance { text-wrap: balance; }

/* Never overflow-wrap: break-word on display type. A hyphen-less mid-word
   break in 62%-condensed 800 uppercase reads as broken, not as wrapped. */
.t-display, .t-heading, .t-card-title, .t-quote { overflow-wrap: normal; }

/* On Iron and Graphite grounds. The ground classes in layout.css remap
   --accent locally so copper-on-Iron (3.50:1) cannot be reached by accident. */
.t-on-dark { color: var(--text-inverse); }
.t-on-dark .t-support,
.t-on-dark .t-mono { color: var(--steel); }

@media (min-width: 48em) {
  .t-display { line-height: 0.92; }  /* the brand's value, once it fits */
}