/* base/typography.css
   Headings, body copy and the rich-text (.prose) block.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

h1, h2, h3 {
	font-family: var(--serif);
	margin: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.h-xl { font-weight: 900; font-size: 54px; line-height: 1.1; max-width: 20ch; }

.h-lg { font-weight: 700; font-size: 40px; line-height: 1.18; }

.h-md { font-weight: 700; font-size: 30px; }

.lede {
	font-size: 16px;
	line-height: 1.78;
	font-weight: 300;
	color: var(--ink-2);
	max-width: 70ch;
	text-wrap: pretty;
}

.lede-invert { color: rgba(255, 255, 255, 0.72); }

.kicker {
	font-size: 12px;
	letter-spacing: 0.2em;
	font-weight: 600;
}

.kicker-red { color: var(--red); }

.kicker-blue { color: var(--blue); }

.kicker-green { color: var(--green-ink); }

.prose { line-height: 1.8; font-weight: 300; color: var(--ink-2); }

.prose > * + * { margin-top: 1em; }

.prose ul, .prose ol { padding-left: 1.25em; margin: 1em 0; }

.prose li { margin-bottom: 0.45em; }

.prose strong { font-weight: 600; color: var(--ink); }

.prose h2, .prose h3, .prose h4 { color: var(--ink); font-weight: 600; margin-top: 1.4em; }

.prose blockquote { border-left: 3px solid var(--line); padding-left: 1.1em; margin-left: 0; color: var(--ink-3); }

.prose h2 { font-family: var(--serif); font-weight: 700; font-size: 30px; }

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	min-width: 720px;
}

.prose table th, .prose table td {
	border: 1px solid var(--line);
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}

.prose thead th {
	background: var(--navy);
	color: #fff;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.prose tbody th {
	background: var(--soft); font-weight: 600; color: var(--ink);
}

.prose tbody td {
	font-weight: 300; color: var(--ink-2);
}

/* Visible only to logged-in editors, never to visitors. */
.editor-note {
	border: 1px dashed #C6CCDA;
	background: #FBFCFD;
	padding: 20px 22px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-2);
}

.editor-note strong { color: var(--red); font-weight: 600; }

.editor-note em { font-style: normal; font-weight: 600; color: var(--ink); }

@media (max-width: 980px) {
	.h-xl { font-size: 40px; }

	.h-lg { font-size: 32px; }
}

@media (max-width: 680px) {
	.h-xl { font-size: 30px; }

	.h-lg { font-size: 26px; }

	.h-md { font-size: 23px; }
}