/*
 * Privacy policy (copy.md §9; not in Figma). No hero, so the header is solid from the start (header.js) and
 * the page begins below it. The title block (oxide rule, H1 in the H2 style, lead) and the text run seven
 * columns wide, a reading measure. The sections are h2 in the H3 style, the parts of "What we collect and
 * why" h3 in bold body text, and list items start with a short oxide rule.
 */
.privacy {
	--privacy-measure: calc((var(--layout-content) + var(--gutter)) * 7 / 12 - var(--gutter));
	padding-top: calc(var(--header-height-solid) + var(--space-section));
}

@media (max-width: 767px) {
	.privacy {
		padding-top: calc(var(--header-height-mobile) + var(--space-section));
	}
}

.privacy__header,
.privacy__body {
	max-width: var(--privacy-measure);
}

.privacy__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

.privacy__header h1 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
}

.privacy__body {
	margin-top: var(--space-64);
}

.privacy__body > * + * {
	margin-top: var(--space-16);
}

.privacy__body h2 {
	margin-top: var(--space-64);
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
}

.privacy__body > h2:first-child {
	margin-top: 0;
}

.privacy__body h3 {
	margin-top: var(--space-32);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 600;
	line-height: var(--line-height-body);
	text-transform: none;
}

.privacy__body h2 + h3 {
	margin-top: var(--space-24);
}

.privacy__body h3 + p {
	margin-top: var(--space-8);
}

.privacy__body li {
	position: relative;
	padding-left: var(--space-32);
}

.privacy__body li + li {
	margin-top: var(--space-8);
}

.privacy__body li::before {
	content: "";
	position: absolute;
	top: calc(var(--line-height-body) / 2 - 1px);
	left: 0;
	width: var(--space-16);
	height: 2px;
	background: var(--color-oxide);
}

.privacy__body a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}