/* Layout for the policy pages. The brand — tokens, reset, wordmark, footer —
   comes from the shared ../style/{tokens,base}.css, linked first. */

body {
	padding: 0 var(--gutter);
}

/* Visible only once focused, so keyboard users can jump the header. */
.skip {
	position: absolute;
	left: -9999px;
}

.skip:focus {
	left: var(--gutter);
	top: 12px;
	padding: 8px 14px;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.legal-head,
main,
.foot {
	max-width: 42rem;
	margin: 0 auto;
}

.legal-head {
	padding: 28px 0;
}

.legal-head a {
	text-decoration: none;
}

main {
	padding-bottom: 64px;
}

main h1 {
	margin: 24px 0 4px;
	font-family: var(--serif);
	font-size: clamp(32px, 7vw, 48px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

main h1 span {
	color: var(--accent);
}

.updated {
	margin: 0 0 40px;
	color: var(--muted);
	font-size: 14px;
}

main h2 {
	margin: 36px 0 8px;
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
}

main p,
main li {
	color: var(--ink-2);
}

main li {
	margin-bottom: 8px;
}

main ul {
	padding-left: 20px;
}

/* Carries the Google API disclosure, which reviewers look for verbatim. */
.callout {
	margin: 16px 0;
	padding: 16px 20px;
	border-left: 2px solid var(--accent);
	background: var(--bone-2);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.foot {
	padding: 28px 0;
}