/* ==========================================================================
   TYPOGRAPHY — the one place type is decided.

   Read DESIGN.md first. The short version:

     Every size on this site comes from the --step-* scale in tokens.css.
     Every role below picks one step. Nothing else in the codebase sets a
     font-size, font-weight or letter-spacing on a heading or a button.

   Why this file exists: before it, the same H1 was 46px on one page and 99px
   on another, there were 29 different H2 settings across seven pages, and 26
   button variants. Each fragment had quietly grown its own scale. If you are
   about to add a font-size somewhere else, add a role here instead.

   Loaded after base.css and before every page-specific sheet, so page CSS can
   still override a role deliberately — but if you find yourself doing that,
   the role is probably missing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. H1 — two roles, no third.

   PAGE HERO     the big statement at the top of a marketing page
   ARTICLE TITLE the title of something you sit and read

   A page picks one. The difference is real: a 1,500-word case study opening at
   hero scale pushes the first paragraph off the screen.
-------------------------------------------------------------------------- */

h1 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--h1-hero);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  /* One measure for every hero. It used to be 18ch on the homepage, 17ch on
     about-us and unset elsewhere, so identical type wrapped to a different
     number of lines per page — which reads as a different size even though
     the font-size matches. */
  max-width: 20ch;
}

/* Article titles — the two templates that render long-form reading: blog posts
   and case studies. Note the post scope: .arcrel-pr__h1 is shared with the
   service/content pages, which are page heroes, so only the --post context
   takes the smaller size. Adding a third long-form template means adding its
   H1 selector here. */
.arcrel-pr--post .arcrel-pr__h1,
.cs__h1 {
  font-size: var(--h1-article);
  line-height: 1.06;
}

/* --------------------------------------------------------------------------
   2. H2 — two tiers.

   SECTION   a section's own heading
   SUB       a heading inside a section, including card titles

   Anything that is neither is a label, and labels are role 5.
-------------------------------------------------------------------------- */

h2 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step-4);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h4,
h5,
h6 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Long-form context. Inside an article body a section heading steps down one
   tier: a 46px H2 sitting in a 68ch column of body copy reads as the start of
   a new page rather than a new section. Blog posts and case studies only. */
.arcrel-pr__h2,
.cs__prose h2 {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.arcrel-pr__h3,
.arcrel-pr__h4,
.cs__prose h3,
.cs__prose h4 {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Card titles. Smaller than a sub-heading because a grid of them is scanned,
   not read. */
.t-card-title,
.cx-case__title,
.cx-card__title,
.cs__next-title,
.arcrel-blog__title,
.arcrel-work__name {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   3. Body
-------------------------------------------------------------------------- */

body,
p,
li,
dd,
dt,
figcaption,
blockquote {
  font-family: var(--font-body);
  font-stretch: var(--wdth-body);
}

body,
p,
li {
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
}

/* A standfirst — the paragraph directly under a hero, set one step up so it
   reads as part of the headline rather than as the first line of body copy. */
.lede,
.t-lede {
  font-size: var(--step-1);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. Buttons — one size.

   Every button on the site is this size and weight. A primary action stands
   out by colour and by the animated border on the contact CTA, not by being
   bigger. That was the old --lg variant at 22px, and it is what made two
   buttons side by side on the homepage look like a mistake.

   Shape lives here too: 4px, never a pill.
-------------------------------------------------------------------------- */

.btn,
.arcrel-lv-btn,
.arcrel-lv-btn--lg,
.btn-primary,
.btn-ghost,
.nav-cta,
.proof-cta,
.arcrel-ab__cta,
.arcrel-hiw__cta,
.arcrel-tiers__cta,
.arcrel-vis__cta,
.arcrel-vis__home-btn,
.arcrel-review-cta,
.arcrel-agent__button,
.arcrel-cases-footer-cta,
.arcrel-results-cta-btn,
.arcrel-case-cta,
.skip-link {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  border-radius: var(--radius);
}

/* The large modifier is kept as a class so existing markup does not break, but
   it no longer changes the type — only the target area. Removing the class
   from templates would be tidier; leaving it inert is safer. */
.arcrel-lv-btn--lg {
  padding: 1.15em 2.6em;
}

/* --------------------------------------------------------------------------
   5. Labels and eyebrows

   Small uppercase type above a heading, or a caption under a figure. These are
   not headings even when they are marked up as one, so they are excluded from
   the H2 rules above by carrying their own role class.
-------------------------------------------------------------------------- */

.eyebrow,
.arcrel-lv-eyebrow,
.arcrel-work__eyebrow,
.arcrel-quiz__eyebrow {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Navigation labels. Sentence case rather than uppercase, because a nav is
   scanned for words, not read as a heading. */
.nav__menu-title,
.t-nav-label {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The smallest role on the site. Runtime badges, card verticals, meta rows.
   Nothing interactive should be smaller than this — under 11px is a
   legibility failure, not a style choice. */
.t-micro,
.arcrel-work__kind,
.cx-card__vertical {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}