h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--sk-font-display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

h1 {
	font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
}

h2 {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
}

p {
	margin: 0 0 1em;
}

/*
 * The dashed label that precedes nearly every heading in the comp. The dash
 * inherits the brand accent, so it recolors per division site automatically.
 */

.eyebrow,
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	color: var(--sk-accent);
	font-family: var(--sk-font-display);
	font-size: 0.7813rem;
	font-weight: 700;

	/* 3px of tracking at 12.5px, expressed relatively so it survives a rescale. */
	letter-spacing: 0.24em;
	text-transform: uppercase;

	&::before {
		flex: none;
		width: 1.75rem;
		height: 3px;
		background: var(--sk-support);
		content: "";
	}
}

.is-style-display-italic {
	font-style: italic;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	&:focus {
		position: fixed !important;
		top: 1rem;
		left: 1rem;
		z-index: 100;
		width: auto;
		height: auto;
		padding: 0.75rem 1.25rem;
		background: var(--sk-white);
		clip-path: none;
	}
}