/* ==========================================================================
   True Aid — Typography
   Manrope carries display weight and warmth; Inter carries every reading
   and interface surface. Editorial scale comes from weight, measure and
   composition rather than from a serif.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.ta-h1, .ta-h2, .ta-h3, .ta-h4 {
	font-family: var(--ta-font-display);
	font-weight: var(--ta-fw-semibold);
	color: var(--ta-blue);
	line-height: var(--ta-lh-heading);
	letter-spacing: var(--ta-ls-heading);
	text-wrap: balance;
}

h1, .ta-h1 {
	font-size: var(--ta-fs-h1);
	line-height: var(--ta-lh-tight);
	letter-spacing: var(--ta-ls-tight);
}

h2, .ta-h2 {
	font-size: var(--ta-fs-h2);
}

h3, .ta-h3 {
	font-size: var(--ta-fs-h3);
}

h4, .ta-h4 {
	font-size: var(--ta-fs-h4);
	line-height: var(--ta-lh-snug);
}

h5 {
	font-size: 1.0625rem;
	line-height: var(--ta-lh-snug);
}

h6 {
	font-size: var(--ta-fs-small);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* The hero headline is the one place the type is allowed to be large. */
.ta-hero__title {
	font-size: var(--ta-fs-hero);
	font-weight: var(--ta-fw-bold);
	line-height: var(--ta-lh-tight);
	letter-spacing: var(--ta-ls-tight);
	max-width: 14ch;
}

/* Two-tone headline: blue statement, teal resolution. The wordmark does the
   same thing, so the page echoes the logo without repeating it. */
.ta-hero__title em,
.ta-title-accent {
	font-style: normal;
	color: var(--ta-teal-text);
	display: block;
}

p {
	max-width: var(--ta-measure);
}

.ta-lede {
	font-size: var(--ta-fs-lede);
	line-height: var(--ta-lh-relaxed);
	color: var(--ta-muted);
	max-width: 58ch;
}

.ta-text-muted {
	color: var(--ta-muted);
}

small,
.ta-small {
	font-size: var(--ta-fs-small);
	line-height: 1.5;
}

.ta-caption {
	font-size: var(--ta-fs-caption);
	line-height: 1.45;
	color: var(--ta-muted);
}

/* --- Eyebrow -------------------------------------------------------------
   The section label. Its rule is a fragment of the connector arc, which is
   how the brand motif enters the page at small scale.
   ------------------------------------------------------------------------ */
.ta-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--ta-space-3);
	margin: 0 0 var(--ta-space-4);
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-eyebrow);
	font-weight: var(--ta-fw-semibold);
	letter-spacing: var(--ta-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ta-teal-text);
	max-width: none;
}

.ta-eyebrow__rule {
	flex: none;
	width: 34px;
	height: 10px;
	border-bottom: 2px solid currentColor;
	border-radius: 0 0 60% 0;
	transform: translateY(-3px);
}

.ta-on-dark .ta-eyebrow {
	color: var(--ta-teal);
}

/* --- Long-form article body --------------------------------------------- */
.ta-prose {
	font-size: var(--ta-fs-body-lg);
	line-height: var(--ta-lh-relaxed);
	color: var(--ta-charcoal);
}

.ta-prose > * + * {
	margin-top: var(--ta-space-5);
}

.ta-prose h2 {
	margin-top: var(--ta-space-8);
	font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
}

.ta-prose h3 {
	margin-top: var(--ta-space-7);
	font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
}

.ta-prose h2 + *,
.ta-prose h3 + * {
	margin-top: var(--ta-space-4);
}

.ta-prose a {
	color: var(--ta-blue);
	text-decoration: underline;
}

.ta-prose a:hover {
	color: var(--ta-teal-text);
}

.ta-prose ul,
.ta-prose ol {
	padding-left: var(--ta-space-5);
	max-width: var(--ta-measure);
}

.ta-prose li + li {
	margin-top: var(--ta-space-2);
}

.ta-prose figure {
	margin-block: var(--ta-space-7);
}

.ta-prose img {
	border-radius: var(--ta-radius-md);
}

.ta-prose strong {
	font-weight: var(--ta-fw-semibold);
	color: var(--ta-charcoal);
}

.ta-prose code {
	padding: .1em .35em;
	background: var(--ta-pale-blue);
	border-radius: 4px;
	font-size: .9em;
}

.ta-prose > .ta-lede:first-child {
	color: var(--ta-charcoal);
	font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
}

/* --- Blockquote / pull quote --------------------------------------------- */
blockquote,
.ta-quote {
	position: relative;
	margin: var(--ta-space-7) 0;
	padding-left: var(--ta-space-6);
	border-left: 3px solid var(--ta-teal);
	font-family: var(--ta-font-display);
	font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
	font-weight: var(--ta-fw-medium);
	line-height: 1.4;
	letter-spacing: var(--ta-ls-heading);
	color: var(--ta-blue);
}

blockquote p {
	max-width: 34ch;
}

blockquote cite,
.ta-quote__source {
	display: block;
	margin-top: var(--ta-space-4);
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-small);
	font-style: normal;
	font-weight: var(--ta-fw-medium);
	letter-spacing: 0;
	color: var(--ta-muted);
}

/* --- Numerals ------------------------------------------------------------ */
.ta-stat__value,
.ta-tabular {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}