/* FOOTYUP · type roles (UI_RULES.md "Use the shared system"). A page puts the class on the element;
   its context keeps only layout and colour. The two signature moves own ONE rule each, so a page that
   writes <span class="eyebrow"> or <span class="italic"> inside a heading is styled with no page CSS.
   Values come from tokens.css. Loaded by the app (right before styles.css, the cascade position these
   rules always had) and by the static landings; the admin does not load it. */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--bone-dim);
}
.eyebrow::before { content: ''; flex: none; width: 28px; height: 1px; background: var(--accent); }
/* The accent word. No weight: only Archivo 900 italic is loaded, so a heading's 900 carries over. */
:is(h1, h2, h3, h4) .italic { font-style: italic; color: var(--accent); }
/* Type roles. A page puts the class on the element; its context keeps only layout and colour. */
.t-page-h1, .t-section-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
}
.t-page-h1 { font-size: var(--fs-page-h1); line-height: var(--lh-page-h1); letter-spacing: var(--tr-page-h1); }
.t-section-h2 { font-size: var(--fs-section-h2); line-height: var(--lh-section-h2); letter-spacing: var(--tr-section-h2); }
.t-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.t-doc-h2 {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: var(--fs-doc-h2); line-height: 1.15; letter-spacing: var(--tr-doc-h2);
}
@media (max-width: 480px) { .t-doc-h2 { font-size: 20px; } }
.t-card-title, .t-stat, .t-label, .t-banner, .t-figure { font-family: var(--font-display); }
.t-card-title {
  font-weight: 800; font-size: var(--fs-card-title); line-height: var(--lh-card-title);
  letter-spacing: var(--tr-card-title); text-transform: uppercase;
}
.t-stat { font-weight: 900; font-size: var(--fs-stat); letter-spacing: var(--tr-stat); } /* prices, stats, contact values: no caps */
/* A number that is the content of a tile or fact block (a record tile, the club rating, a report's goals):
   larger than a card's price, which sits under the card's title. */
.t-figure { font-weight: 900; font-size: var(--fs-figure); line-height: 1; letter-spacing: var(--tr-figure); text-transform: none; }
.t-label { font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; }
/* A chart's own numbers (owner 2026-10-12, the distance per game): ticks, dates, the value over a column. */
.t-axis { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-axis); line-height: 1.3; letter-spacing: 0; text-transform: none; font-style: normal; }
.t-banner {
  font-weight: 900; font-stretch: 125%; font-size: var(--fs-banner); line-height: var(--lh-banner);
  letter-spacing: var(--tr-banner); text-transform: uppercase;
}
@media (max-width: 700px) { .t-banner { font-size: clamp(48px, 14vw, 80px); } }   /* = .cta-banner h2 */
@media (max-width: 480px) { .t-card-title { font-size: 15px; } .t-stat { font-size: 18px; } } /* = .gc-title / .gc-price */