/**
 * Section heading — eyebrow, two-tone title, intro.
 *
 * Used on its own and reused inside the About, Story, Services, Why and Contact widgets, so
 * the eyebrow-and-title rhythm is defined in exactly one place.
 */

.enigma-heading {
	display: grid;
	gap: clamp(20px, 3vw, 48px);
}

.enigma-heading--split {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	align-items: end;
}

.enigma-heading__title {
	margin: 0;
	font-size: calc(clamp(30px, 4.1vw, 60px) * var(--e-heading-scale, 1));
	font-weight: var(--e-heading-weight, 900);
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--e-ink);
	text-wrap: balance;
}

.enigma-heading__title-dim {
	color: var(--e-m4);
}

.enigma-heading__title-accent {
	color: var(--e-accent);
}

.enigma-heading__intro {
	max-width: 52ch;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.78;
	color: var(--e-m2);
	text-wrap: pretty;
}

/* On a light panel the ink and muted tones invert to their solid equivalents. */
.enigma-section--inverted .enigma-heading__title {
	color: var(--e-ink-solid);
}

.enigma-section--inverted .enigma-heading__intro,
.enigma-section--inverted .enigma-eyebrow__text {
	color: var(--e-text-solid);
}

.enigma-section--inverted .enigma-heading__title-dim {
	color: rgba(64, 64, 65, .46);
}

.enigma-heading--center {
	justify-items: center;
	text-align: center;
}

.enigma-heading--center .enigma-eyebrow {
	justify-content: center;
}

.enigma-heading--center .enigma-heading__intro {
	margin-inline: auto;
}

:lang(ar) .enigma-heading__title {
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.25;
}