/**
 * css/components/type.css — Website 2.0 shared component library (#122)
 *
 * Type roles: eyebrow / statement (+accent/+cream) / h3 (card title) /
 * body (+cream/+grey/+ink70) / stat numeral. Values copied exact from
 * docs/Common Good website 2.0/ui_kits/website/media.html
 * (`.eyebrow`, `.statement`, `.pcard h3`/`.ccard h3`, `.body`, `.stat .num`).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-eyebrow {
	margin: 0;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --accent );
}

.cg-eyebrow--ink {
	color: var( --text );
}

.cg-eyebrow--cream {
	color: var( --cg-cream );
}

/* Section statement — Noe Text serif, the display heading of every band. */
.cg-statement {
	margin: var( --eyebrow-gap ) 0 0;
	font-family: var( --font-serif );
	font-weight: 400;
	/* Literal clamp, NOT var(--h2-font-size): a legacy mobile override
	   (style.css `--h2-font-size:30px`, kept for `.screen-logo`) leaks into the
	   shared token and shrank cg statements to 30px on mobile. Decoupled so the
	   cg type system is immune to legacy token overrides. Matches media.html. */
	font-size: clamp( 32px, 3vw, 56px );
	line-height: 1.04;
	letter-spacing: -1.68px;
	text-wrap: balance;
}

/* Home (template-home) and Services (template-services) both use a 38px
   eyebrow→statement gap per home.html/services.html, vs the 34px system
   default that media.html/approach.html render. Scoped to the statement
   element (not the --eyebrow-gap token) so the shared footer's use of the
   token is unaffected. Ref: home.html/services.html `.sec` rhythm. */
.page-template-template-home .cg-statement,
.page-template-template-services .cg-statement,
.page-template-template-tech-ai .cg-statement {
	margin-top: 38px;
}

.cg-statement--rust {
	color: var( --accent );
}

.cg-statement--cream {
	color: var( --cg-cream );
}

.cg-statement i,
.cg-statement em {
	font-style: italic;
}

/* Inline accent word inside an otherwise cream/ink statement — reference
   uses a bare `.rust`/`.cream` span mid-sentence (e.g. Category Problem).
   #306 removed this rule's `color: var(--accent)` override — every live
   `.cg-accent` occurrence sits inside a `.cg-statement` whose own base
   colour (ink on a cream band, or cream on an ink band via
   `.cg-band--ink`'s inherited colour) is already legible, so the span now
   just takes that colour instead of forcing rust. Markup unchanged. */
.cg-accent {
}

/* #306: `--cream`/`--ink` exist to keep an accent word legible when a
   statement's own base colour differs from what a plain `.cg-accent`
   run would otherwise take (e.g. a `.cg-closing .cg-statement`, forced
   rust by closing.css, previously carrying a same-colour "no-op" plain
   `.cg-accent` span alongside an `--ink` one for a deliberate two-tone
   effect — not a legibility need). Every live occurrence was rendered
   and checked one by one (2026-08-04, Lando/Dev DB) and flattens safely
   to its parent statement's own colour, with no ink-on-ink/cream-on-
   cream case found:
     - home "/" — How We Help statement (`.cg-band--ink`; UPDATED #403 —
       it carried `.cg-statement--rust` when this audit was written, and
       the 2026-08-18 CD punch list took that modifier off, so the
       statement now inherits the ink band's own `--cg-cream`):
       "Wherever you are in the journey," (--cream) + "there's a next
       move." (--accent) → both inherit the statement's colour, which is
       cream since #403 and was rust when audited. The flattening
       conclusion is unchanged and is now measured at 17.7:1 rather than
       the ~5.3:1 recorded here for rust-on-ink.
     - home "/" — closing statement (`.cg-band--cream.cg-closing`, rust
       via closing.css): "We engineer good outcomes." (--ink) → inherits
       rust; rust-on-cream is the site's baseline hero/closing pattern.
     - /services/ — closing statement (same cream/closing pattern):
       "It multiplies it." (--ink) → inherits rust, same as above.
     - /approach/ — closing statement (same pattern): "Here's what
       does." (--ink) → inherits rust, same as above.
     - /media/ — closing statement (same pattern): "easy first step."
       (--ink) → inherits rust, same as above.
   No occurrence of either modifier class needed to be kept as a
   legibility exception. Rules kept in place (rather than deleted) only
   because the markup that references them stays in ACF content; there
   is no longer a colour declaration for either to override. */
.cg-accent--cream {
}

.cg-accent--ink {
}

/* Card / row title — Noe Text, used inside card box + accordion rows. */
.cg-h3 {
	margin: 14px 0 0;
	font-family: var( --font-serif );
	font-weight: 400;
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: -0.4px;
	white-space: pre-line;
}

/* Body copy — 42dot Sans. */
.cg-body {
	margin: 0;
	font-family: var( --font-body );
	font-size: 16px;
	line-height: var( --line-height-base );
	color: var( --cg-muted );
}

.cg-body p {
	margin: 0 0 22px;
}

.cg-body p:last-child {
	margin-bottom: 0;
}

.cg-body--cream {
	color: var( --cg-cream );
}

.cg-body--grey {
	color: var( --cg-grey );
}

.cg-body--ink70 {
	color: var( --cg-ink-70 );
}

/* Stat numeral — Averta Std 800, used by the stats grid. The `.cg-num`
   companion below retypes it to Tungsten Narrow Semibold when the value is
   actually a number (see the shared numeral rule). */
.cg-stat-num {
	display: block;
	font-family: var( --font-sans );
	font-weight: 800;
	font-size: clamp( 38px, 3vw, 55px );
	line-height: 0.96;
	letter-spacing: -1.06px;
}

/* ─── Numeral treatment — Tungsten Narrow Semibold (CD 2026-08-05, #323) ──
 *
 * #304 moved four numeral surfaces to Tungsten Narrow Semibold and missed
 * six more. Three of them are handled unconditionally in their own
 * component files, because every value in the slot takes the face:
 * `.cg-scrollgal__counter` (always "N / M", written by JS),
 * `.cg-stagecell__big` and `.cg-callout-stats__num` (the CD's 2026-08-05
 * call that those two /technology/ rows read as one typeface, word cells
 * included).
 *
 * The three below can't be done by class alone, because the same class
 * carries *word* labels: "01" and "01 — Strategy" are both
 * `.cg-card__label`; `.cg-stat-num` holds "$100M+" on the homepage and
 * "Awarded for Driving Category Growth" on /media-services/. Retyping by
 * class would drag prose onto a condensed display face nobody asked for.
 *
 * So `cg_is_numeral_label()` (inc/cg-components.php) decides per value and
 * the render sites add `cg-num`; this rule is what that class means.
 * Selectors are compounded with each base class (0,2,0) so they beat the
 * component's own rule on specificity rather than on enqueue order —
 * css/components/ files load in an explicit ordered list (inc/scripts.php)
 * and type.css sits near the front of it.
 *
 * letter-spacing is deliberately NOT touched here. It only needs retuning
 * where the base rule set a *negative* value for Averta's wide display
 * digits — on the condensed face that tracking closes the counters (the
 * retuning #304 applied to worklist-slider), so `.cg-stat-num` gets its
 * own reset below. The two small-label surfaces are the opposite case:
 * `.cg-card__label` (10px, 0.22em) and `.cg-hairline-list__chip` (11px,
 * 0.08em) carry *positive* tracking for small-caps legibility, and
 * zeroing it collapsed "01" to 5px of hairline-thin condensed digits —
 * caught by measuring rendered widths, since a 10px label moves too few
 * pixels for the visual-regression diff to flag.
 */
.cg-stat-num.cg-num,
.cg-card__label.cg-num,
.cg-hairline-list__chip.cg-num {
	font-family: var( --font-condensed );
	font-weight: 600;
}

/* Averta's -1.06px was tuned for its wide digits at 38–55px; Tungsten's
   are far narrower, so the same tracking closes the counters. */
.cg-stat-num.cg-num {
	letter-spacing: 0;
}

/* ─── Links in body copy (#458) ──────────────────────────────────────────────
 *
 * CD review r1 (CG_Website_Notes_r1.pdf, 2026-09-01), Overall: "Any time there
 * is a link in copy (an href) underline the link."
 *
 * `a { text-decoration: none }` is declared globally in three places —
 * css/base.css:121, css/typography.css:142 and style.css:1284 — and that
 * global default is DELIBERATE and stays: it is what keeps the nav, the
 * `#cg-menu` overlay, `.cg-btn`/`.cg-link` buttons, footer link columns, work
 * tiles and card links clean. Owner decision 2026-09-02: underline "only links
 * in body/prose which is probably very few". So this is an opt-in on the two
 * prose containers rather than a change to the global rule.
 *
 * The two containers, and why exactly these:
 *
 *   .cg-body          the 2.0 body-copy class (defined above), used by every
 *                     `cg-band` partial that prints a run of prose.
 *   .common-text-box  the legacy WYSIWYG wrapper — the ONLY thing that wraps
 *                     raw `the_content()` output (page.php:13, single.php:43)
 *                     and the ACF wysiwyg text blocks (blocks/universal/
 *                     text.php, text_form.php, media_text.php, blocks/
 *                     work_type_content/text2.php, blocks/events_content/
 *                     text.php, blocks/social_impact_content/{text,video}.php).
 *                     An editor pasting a link into the WordPress editor lands
 *                     here, which is the CD's "link in copy" case exactly.
 *
 * Both selectors are (0,4,1) — one class plus the three `:not()` arguments,
 * which each count as the class they hold — and beat both the bare
 * `a { text-decoration: none }` rules (0,0,1: css/base.css:121,
 * css/typography.css:142, style.css:1284) and `a:hover` (0,1,1). So this works
 * regardless of the css/ layer loading before style.css — no `!important`,
 * per the locked rule.
 *
 * The `:not()` exclusions are not decoration. `.cg-btn` (a filled/outline
 * pill) and `.cg-link` (the arrow link) both legitimately appear INSIDE a
 * `.cg-body` run — see blocks/cg/split.php and the `[link]` shortcode in
 * gff-contact-popup.php:188, which emits a `.cg-btn` straight into editor
 * content. Underlining a button reads as a bug. `.cg-card__link` is excluded
 * for the same reason.
 *
 * `text-underline-offset` rather than the browser default: at 16px/1.62 the
 * default baseline underline collides with descenders in Averta.
 */
.cg-body a:not( .cg-btn ):not( .cg-link ):not( .cg-card__link ),
.common-text-box a:not( .cg-btn ):not( .cg-link ):not( .cg-card__link ) {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.18em;
}

/* ─── #485 · mobile tracking ───────────────────────────────────────────
 * `.cg-statement`'s -1.68px was tuned against its desktop size. On a
 * phone the clamp sits on its 32px floor, so the same flat value goes
 * from -3.89% of the em at 1440 to -5.25% at 390 — and it stops being
 * optical tightening and starts closing the ink gap.
 *
 * Measured on Dev at 390x844 with an offscreen-canvas pair probe: each
 * adjacent character pair on a RENDERED LINE (per-character ranges
 * grouped by line box, so pairs that straddle a wrap or a <br> are not
 * counted) drawn at the element's own computed font, size, case and
 * tracking at 4x, counted as touching when its ink forms a single
 * horizontal run. Touching pairs at -1.68px -> at zero:
 *   /media/       11/41 -> 0,  6/42 -> 0
 *   /technology/   9/36 -> 0,  4/26 -> 0,  4/29 -> 1
 *   home           6/28 -> 0, 10/33 -> 1, 13/34 -> 0
 *
 * Counts are at a 4x raster. The at-zero figures are stable across 3x-12x;
 * the "before" counts fall as the raster gets finer (pairs whose real gap
 * is under one sample), so read them as "how much ink is closing up",
 * not as an exact integer. The direction and the verdicts hold at every
 * scale tried.
 *
 * `.cg-statement` renders on all 56 pages in the sitemap, which is why
 * the CD read the defect as "some of these headlines" rather than one
 * page.
 *
 * WHY 680 AND NOT 1066. The clamp holds its 32px floor from 0 all the
 * way to ~1066px, so the -5.25% ratio is identical at 1024 — this
 * boundary is #480's scope decision ("only applied to mobile
 * breakpoints"), not a typographic one, and tablet keeps the tight
 * tracking on purpose. If the CD wants it there too, widen this block.
 *
 * NOT changed, measured, for the record: `.cg-h3` (-0.4px) is -1.43% of
 * the em at BOTH 390 and 1440 — 28px is a fixed size, not a clamp — and
 * shows 0-1 touching pairs at either width, the same pair either way.
 * `.cg-stat-num` and `.cg-believe__word` already compute `normal`.
 *
 * CD, 2026-09-03 (#480): "Make sure the tracking is set to zero".
 * ─────────────────────────────────────────────────────────────────────── */
@media ( max-width: 680px ) {
	.cg-statement {
		letter-spacing: 0;
	}
}