/* Shared prose-page layout — "Institutional Density" re-skin.
   Used by about.html, research.html, ai-stance.html (the .about-page pattern).
   Loaded after density.css (provides the --cn-* tokens). Phase Two static sweep. */

.about-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
}
.about-page > h1 {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  font-size: var(--cn-text-display);
  line-height: 1.1;
  color: var(--cn-ink);
  margin: 0 0 var(--space-sm);
}
.about-page h2 {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  font-size: var(--cn-text-h2);
  color: var(--cn-ink);
  border-bottom: 2px solid var(--cn-bronze);
  padding-bottom: 0.4rem;
  margin: var(--space-lg) 0 var(--space-sm);
}
.about-page h3, .about-page h4 {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  font-size: var(--cn-text-h3);
  color: var(--cn-ink);
  margin: var(--space-md) 0 0.4rem;
}
.about-page p, .about-page li {
  font-size: var(--cn-text-body);
  line-height: 1.75;
  color: var(--cn-ink);
  margin: 0 0 var(--space-sm);
}
.about-page p strong { color: var(--cn-ink); }
.about-page a { color: var(--cn-teal); }
.about-page blockquote {
  border-left: 3px solid var(--cn-bronze);
  padding-left: var(--space-md);
  font-style: italic;
  color: var(--cn-ink-muted);
  margin: var(--space-md) 0;
}

/* Principle / feature cards (research, about) */
.principle-card {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-left: 3px solid var(--cn-bronze);
  border-radius: var(--cn-radius);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
}
.principle-card h4 { margin: 0 0 0.3rem; display: flex; align-items: baseline; gap: 0.5rem; }
.principle-card p { font-size: var(--cn-text-small); margin: 0; color: var(--cn-ink-muted); line-height: 1.6; }
.principle-num { color: var(--cn-bronze); font-family: var(--cn-font-mono); }