/*
 * SE Paragraphs: the site's body and lede scales at a comfortable measure.
 */

.sepk-text {
	font-family: var(--se-font-body);
	font-weight: 400;
	color: var(--se-text-soft);
	overflow-wrap: break-word;
}

.sepk-text--body {
	font-size: clamp(1rem, 1.25vw, 1.375rem);
	line-height: 1.55;
}

.sepk-text--lede {
	font-size: clamp(1.125rem, 1.56vw, 1.625rem);
	line-height: 1.5;
}

.sepk-text--narrow { max-width: 46rem; }
.sepk-text--wide { max-width: 56rem; }
.sepk-text--full { max-width: none; }

.sepk-text--grey { color: var(--se-grey); }

.sepk-text p,
.sepk-text ul,
.sepk-text ol,
.sepk-text blockquote {
	margin: 0 0 1em;
}

.sepk-text > :last-child {
	margin-bottom: 0;
}

.sepk-text ul,
.sepk-text ol {
	padding-inline-start: 1.25em;
}

.sepk-text li + li {
	margin-block-start: 0.35em;
}

.sepk-text li::marker {
	color: var(--se-grey);
}

.sepk-text strong,
.sepk-text b {
	font-weight: 600;
	color: var(--se-bone);
}

/* Red links, underlined so colour is never the only sign. The lifted red
   reads at body size on black. */
.sepk-text a {
	color: var(--se-red-text, var(--se-red-hot));
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--se-dur) var(--se-ease);
}

.sepk-text a:hover {
	color: var(--se-bone);
}

.sepk-text h2,
.sepk-text h3,
.sepk-text h4 {
	margin: 1.4em 0 0.5em;
	font-family: var(--se-font-display);
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 0.92;
	color: var(--se-bone);
}

.sepk-text h2 { font-size: clamp(1.625rem, 2.29vw, 2.75rem); }
.sepk-text h3 { font-size: clamp(1.375rem, 1.98vw, 2.375rem); }
.sepk-text h4 { font-size: clamp(1.125rem, 1.46vw, 1.75rem); }

.sepk-text > :first-child {
	margin-top: 0;
}

.sepk-text blockquote {
	font-family: var(--se-font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.29vw, 2.75rem);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--se-bone);
}