/* /about and any other prose page.
   app.css locks the document to the viewport for the map, which is exactly
   wrong for something meant to be read, so scrolling is restored here rather
   than duplicating the palette. */

html:has(body.doc), body.doc {
  height: auto;
  overflow: auto;
}

body.doc {
  font-size: 15px;
  line-height: 1.65;
}

body.doc main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 6rem;
}

body.doc h1 {
  font-size: 1.9rem;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
}

body.doc h2 {
  font-size: 1.2rem;
  margin: 2.75rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

body.doc h3 {
  font-size: 1rem;
  margin: 1.75rem 0 0.4rem;
  color: var(--accent);
}

body.doc .lead {
  color: var(--dim);
  font-size: 1.05rem;
}

body.doc a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

body.doc code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-size: 0.9em;
}

body.doc pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  font-size: 0.9em;
}

body.doc pre code {
  background: none;
  border: 0;
  padding: 0;
}

/* The synthetic-data warning. Loud on purpose: a visitor drawing conclusions
   from generated numbers is the one failure this page exists to prevent. */
body.doc .notice {
  background: color-mix(in srgb, #f6c344 12%, var(--panel));
  border: 1px solid color-mix(in srgb, #f6c344 45%, var(--line));
  border-radius: 5px;
  padding: 0.9rem 1.1rem;
  margin: 1.75rem 0;
}

body.doc dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  margin: 1rem 0;
}

body.doc dt {
  color: var(--dim);
}

body.doc dd {
  margin: 0;
}

body.doc ul {
  padding-left: 1.35rem;
}

body.doc li {
  margin: 0.35rem 0;
}

body.doc strong {
  color: #fff;
}