/* Privacy Policy, set as in the brief: the title large at the top left, the
   body small and dense underneath, numbered sections and plain bullet lists,
   black on the page's own light ground. */

/* the design lays the section out as two columns, the title in one and the
   body in the other; here the title reads across the top and the body runs
   underneath it */
#legal .legal {
	background: var(--c-white, #fbfbf4);
	color: var(--c-black, #020202);
	display: block !important;
	padding: 12vh clamp(20px, 4vw, 72px) 10vh !important;
}

/* The design pins the title and scrolls the policy past it, which left four
   thousand pixels of nothing between the two. The title simply sits at the top
   here, with the text under it. */
#legal .legal > .pin-spacer {
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
#legal .legal-title {
	position: static !important;
	transform: none !important;
	inset: auto !important;
	padding-top: 0 !important;
	/* the design indents it; it lines up with the body copy instead. The small
	   negative offset covers the P's own side bearing against the A below. */
	padding-left: 0 !important;
	margin-left: -0.03em !important;
	width: 100%;
	max-width: none;
	font-size: clamp(44px, 6.2vw, 104px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-right: 0 !important;
	color: inherit;
}
/* the air under the title, put on the wrapper the design gives it */
#legal .legal > .pin-spacer {
	margin: 0 0 clamp(30px, 3.4vw, 56px) !important;
}

#legal .legal-content {
	display: block !important;
	width: 100% !important;
	max-width: 1100px;
	margin: 0 !important;
	padding: 0 !important;
}

#legal .legal-content-item {
	display: block;
	margin: 0 0 clamp(18px, 2vw, 30px);
	border: 0;
	padding: 0;
}

/* the section headings run at body size, as they are numbered labels rather
   than display type */
/* numbered labels, not display type — and not shouted */
#legal .legal .legal-content .legal-content-item .legal-content-title {
	font-size: clamp(13px, 1.02vw, 16px);
	line-height: 1.45;
	letter-spacing: 0;
	margin: 0 0 0.35em;
	color: inherit;
	text-transform: none !important;
	font-weight: inherit;
}

#legal .legal-content-text {
	font-size: clamp(13px, 1.02vw, 16px);
	line-height: 1.45;
	color: inherit;
	max-width: none;
}

#legal .legal-content-text p {
	margin: 0 0 0.35em;
}
#legal .legal-content-text p:last-child {
	margin-bottom: 0;
}

#legal .legal-content-text ul {
	margin: 0.35em 0 0.7em;
	padding-left: 1.4em;
	list-style: disc;
}
#legal .legal-content-text li {
	margin: 0 0 0.1em;
}

#legal .legal-content-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
#legal .legal-content-text a:hover {
	color: var(--hover-blue, #001eff) !important;
}

/* the opening paragraphs carry a little more air under them */
#legal .legal-intro {
	margin-bottom: clamp(24px, 2.6vw, 40px);
}

/* the page is light, so the section's dark theme must not repaint it */
#legal .page-bg,
#legal .legal[data-theme="dark"] {
	background: var(--c-white, #fbfbf4);
}

/* a run of lines that reads as a list but is set without markers */
#legal .legal-content-text ul.legal-plain {
	list-style: none;
	padding-left: 0;
	margin: 0 0 0.35em;
}

/* the lettered sub-sections sit in under their parent number */
#legal .legal-content-item.legal-sub {
	padding-left: 1.4em;
}

/* the way into the cookie settings from the policy itself */
#legal .legal-cookie-button {
	display: inline-block;
	margin-top: 0.6em;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid currentColor;
	text-decoration: none;
	font-size: clamp(12px, 0.92vw, 14px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
#legal .legal-cookie-button:hover {
	background: var(--c-black, #020202);
	border-color: var(--c-black, #020202);
	color: var(--c-white, #fbfbf4) !important;
}
#legal .legal-actions {
	margin-top: clamp(6px, 1vw, 14px);
}

/* the same control set inside a sentence */
#legal .legal-cookie-inline {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
#legal .legal-cookie-inline:hover {
	color: var(--hover-blue, #001eff);
}
#legal .legal-cookie-button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}