/*
 * page.css: the shell of the text pages (privacy notice, case studies):
 * header back link, eyebrow, page title, numbered section headings, running
 * text and the main column's spacing.
 * Tokens come from base.css; each page's own file styles only its content.
 */

body { line-height: var(--lh-relaxed); }

.back { font: 500 var(--fs-label) var(--font-mono); color: var(--mut); }

main { padding: var(--space-16) 0 var(--section-pad); }

.eyebrow { font: 500 var(--fs-label) var(--font-mono); color: var(--mut); margin: 0 0 var(--space-6); }

h1 {
  margin: 0 0 var(--space-3);
  font: 700 var(--fs-page-title)/var(--lh-heading) var(--font-sans);
  letter-spacing: -0.02em;
}

/* Numbered section headings and running text */
h2 {
  margin: var(--space-11) 0 var(--space-3);
  font: 700 var(--fs-lead)/var(--lh-snug) var(--font-sans);
}
h2 span { font: 500 var(--fs-ui) var(--font-mono); color: var(--acc); margin-right: var(--space-2); }

p, li { color: var(--mut); }
strong { color: var(--fg); font-weight: 500; }
ul { margin: 0; padding-left: var(--space-5_5); }
li + li { margin-top: var(--space-1_5); }

@media (max-width: 600px) {
  main { padding: var(--space-11) 0 var(--space-16); }
}