/* Calm editorial treatment: serif reading text, restrained surfaces, and compact UI. */

h1, h2, h3, h4 {
  margin-top: 0;
  font-family: var(--sans-font);
  font-weight: 700;
  text-wrap: balance;
}
h1, h2 {
  letter-spacing: -.018em;
  line-height: 1.06;
}
h1 {
  max-width: 900px;
  margin-bottom: 26px;
  font-size: var(--font-size-document-title);
}
h2 {
  margin-bottom: 16px;
  font-size: var(--font-size-section-title);
}
h3 { font-size: var(--font-size-card-title); line-height: 1.2; }
h4 { line-height: 1.3; }
p { margin-top: 0; }
p, li, dd { text-wrap: pretty; }
code, kbd, samp, pre, .mono { font-family: var(--mono-font); }

/*
 * Match monospace to the surrounding reading face only in prose. Compact UI,
 * diagrams, navigation, and code blocks keep Input Mono's native metrics.
 */
:where(.hero-introduction, .paper-body) p :is(code, kbd, samp),
:where(.hero-introduction, .paper-body)
  > :is(ul, ol, dl, blockquote):not([class])
  :is(code, kbd, samp),
:where(.hero-deck, .chapter-lede, .prose) :is(code, kbd, samp) {
  font-family: var(--mono-font-prose);
}

/* Dependency-free syntax highlighting for executable and data examples. */
.syntax-keyword { color: var(--violet); }
.syntax-string { color: var(--syntax-string); }
.syntax-number,
.syntax-literal { color: var(--pink-text); }
.syntax-property { color: var(--yellow); }
.syntax-function { color: var(--blue-structural); }
.syntax-comment {
  color: var(--faint);
  font-style: italic;
}
.syntax-operator { color: var(--pink-text); }
.syntax-punctuation { color: var(--faint); }