h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sss-font-heading);
	color: var(--sss-ink);
	line-height: 1.15;
	margin: 0 0 var(--sss-space-4);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.25rem, 3.4vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Homepage hero only — every other page uses the default h1 size. */
.sss-h1--xl {
	font-size: clamp(2rem, 2.8vw, 3rem);
}

h2 {
	font-size: clamp(1.75rem, 2.4vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.01em;
}

h3 {
	font-size: clamp(1.25rem, 1.6vw, 1.625rem);
	font-weight: 600;
}

p {
	margin: 0 0 var(--sss-space-4);
	color: var(--sss-slate);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sss-lede {
	font-size: 1.1875rem;
	line-height: 1.6;
}

.sss-caption {
	font-size: 0.8125rem;
	color: var(--sss-slate);
}

.sss-text-gradient {
	background: linear-gradient( 100deg, var(--sss-blue), var(--sss-cyan) );
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.sss-mono {
	font-family: var(--sss-font-mono);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	color: var(--sss-blue);
}

@media (max-width: 767px) {
	.sss-lede {
		font-size: 1.0625rem;
	}

	/* clamp() already scales these with viewport width, but the floor
	   (the fixed min value) stays constant no matter how narrow the phone
	   gets — a 360px phone renders the same minimum size as a 767px one.
	   Lowering the floor here makes headings genuinely smaller on mobile
	   instead of just "not bigger than tablet". */
	h1 {
		font-size: clamp(1.875rem, 7vw, 2.25rem);
	}

	.sss-h1--xl {
		font-size: clamp(1.75rem, 6.5vw, 2rem);
	}

	h2 {
		font-size: clamp(1.5rem, 6vw, 1.75rem);
	}

	h3 {
		font-size: clamp(1.125rem, 5vw, 1.25rem);
	}

	p {
		font-size: 1rem;
	}
}