/* ==========================================================================
   HCT typography — scoped to NEW content only.
   Legacy pages inherit the global rules from style.css, untouched.
   All values come from assets/css/variables.css.
   ========================================================================== */

.hct-foundation {
	font-size: var(--hct-fs-body);
	line-height: var(--hct-lh-body);
}

.hct-foundation :is(h1, h2, h3, h4, h5, h6) {
	line-height: var(--hct-lh-heading);
}

.hct-foundation h1 { font-size: var(--hct-fs-3xl); }
.hct-foundation h2 { font-size: var(--hct-fs-2xl); }
.hct-foundation h3 { font-size: var(--hct-fs-xl); }
.hct-foundation h4 { font-size: var(--hct-fs-lg); }
.hct-foundation h5 { font-size: var(--hct-fs-md); }
.hct-foundation h6 { font-size: var(--hct-fs-body); }

.hct-foundation .hct-eyebrow {
	margin: 0 0 var(--hct-space-sm);
	color: var(--hct-primary);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-eyebrow);
	line-height: var(--hct-lh-snug);
}

/* Literal breakpoint: custom properties cannot drive @media. */
@media (max-width: 767px) {
	.hct-foundation h1 { font-size: var(--hct-fs-3xl-mobile); }
	.hct-foundation h2 { font-size: var(--hct-fs-2xl-mobile); }
	.hct-foundation h3 { font-size: var(--hct-fs-xl-mobile); }
	.hct-foundation h4 { font-size: var(--hct-fs-lg-mobile); }
}