/**
 * The site uses the plugin's own palette, so the two read as one product.
 * Orange is attention and stake. Green is passing. Nothing else is coloured.
 */

:root {
	--paper: #fbfaf7;
	--card: #ffffff;
	--shell: #f2efe9;
	--line: #ded9d1;
	--line-soft: #eae6df;
	--ink: #16202a;
	--ink-2: #3d4753;
	--ink-3: #6b6459;
	--o: #b3541e;
	--o-dark: #9c4819;
	--o-bg: #fdf4ec;
	--g: #0d7d4d;
	--measure: 68ch;
}

* { box-sizing: border-box; }

body {
	background: var(--paper);
	color: var(--ink-2);
	font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--o-dark); }
a:hover { color: var(--o); }

.bar {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	padding: 18px 24px;
}

.wordmark {
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.2px;
	text-decoration: none;
}

.bar nav a {
	color: var(--ink-3);
	font-size: 15px;
	margin-left: 18px;
	text-decoration: none;
}

.bar nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

main { margin: 0 auto; max-width: 960px; padding: 0 24px; }

.hero { padding: 64px 0 40px; }

h1 {
	color: var(--ink);
	font-size: 40px;
	letter-spacing: -0.8px;
	line-height: 1.15;
	margin: 0 0 16px;
	max-width: 20ch;
}

h2 {
	color: var(--ink);
	font-size: 20px;
	letter-spacing: -0.2px;
	margin: 36px 0 10px;
}

.lede {
	color: var(--ink-3);
	font-size: 20px;
	margin: 0 0 24px;
	max-width: var(--measure);
}

/* The signature element: the number this product is about. */
.proof {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--o);
	border-radius: 3px;
	margin: 0;
	max-width: var(--measure);
	padding: 18px 22px;
}

.proof b {
	color: var(--o);
	font-size: 21px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.4px;
}

.grid {
	border-top: 1px solid var(--line);
	display: grid;
	gap: 4px 40px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	padding-top: 8px;
}

.grid p { color: var(--ink-3); font-size: 16px; margin: 0 0 8px; }

.never {
	background: var(--o-bg);
	border-left: 3px solid var(--o);
	margin: 48px 0;
	padding: 22px 26px;
}

.never ul { margin: 0; padding-left: 20px; }
.never li { color: var(--ink-2); font-size: 16px; margin-bottom: 7px; }
.never h2 { margin-top: 0; }
.small { color: var(--ink-3); font-size: 15px; margin: 14px 0 0; }

.status { border-top: 1px solid var(--line); padding: 8px 0 56px; }
.status p { color: var(--ink-3); max-width: var(--measure); }

.prose { padding: 48px 0 64px; }
.prose p, .prose li { max-width: var(--measure); }
.prose h1 { font-size: 34px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose code {
	background: var(--shell);
	border-radius: 3px;
	font-family: Menlo, Consolas, monospace;
	font-size: 0.87em;
	padding: 2px 5px;
}

.updated { color: var(--ink-3); font-size: 15px; margin: -8px 0 28px; }

table {
	border-collapse: collapse;
	font-size: 16px;
	margin: 16px 0 8px;
	width: 100%;
}

th {
	border-bottom: 1px solid var(--line);
	color: var(--ink-3);
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 9px 10px 9px 0;
	text-align: left;
	text-transform: uppercase;
}

td {
	border-bottom: 1px solid var(--line-soft);
	padding: 11px 10px 11px 0;
	vertical-align: top;
}

td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

footer {
	border-top: 1px solid var(--line);
	color: var(--ink-3);
	font-size: 15px;
	margin-top: 40px;
	padding: 22px 24px 48px;
	text-align: center;
}

footer a { color: var(--ink-3); }

@media ( max-width: 700px ) {
	h1 { font-size: 30px; }
	.hero { padding: 40px 0 28px; }
	td:first-child { white-space: normal; }
}