/* Page shell, typography and the blue rule. The header and footer are the website ones (site partials, Tailwind). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
/* The public pages keep the footer at the bottom even when a page is short. */
body.public { display: flex; flex-direction: column; min-height: 100vh; }
body.public > main { flex: 1 0 auto; }

:where(.page) h1 { font-size: 32px; line-height: 40px; font-weight: 600; margin: 0 0 var(--s3); text-wrap: balance; letter-spacing: -0.01em; }
:where(.page) h2 { font-size: 24px; line-height: 32px; font-weight: 600; margin: var(--s5) 0 var(--s2); text-wrap: balance; }
:where(.page) p { margin: 0 0 var(--s3); text-wrap: pretty; }
:where(.page) a { color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.page) a:hover { text-decoration-thickness: 2px; }
:where(.page) :is(a, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:where(.page) code { font-family: var(--mono); }
::selection { background: var(--blue-tint); color: var(--charcoal); }

.page { max-width: 640px; margin: 0 auto; padding: var(--s6) var(--s3); }

.rule { width: 48px; height: 4px; background: var(--blue); margin-bottom: var(--s3); }

.qr { width: 192px; height: 192px; margin: 0 0 var(--s3); }
.codes { list-style: none; padding: 0; margin: 0 0 var(--s4); }