/* ==========================================================================
   CRESSCIT — Content pages (about, statistics)
   Long-form reading layout. Tokens only (css/tokens.css); loaded after main.css.
   ========================================================================== */

/* @component: page-shell */
.page {
  max-width: var(--maxw-narrow);
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--space-7)) var(--gutter) var(--space-7);
}
.page__eyebrow {
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--emerald);
}
.page__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
  color: var(--cream);
}
.page__lede {
  margin-top: var(--space-4);
  font-size: var(--fs-400);
  color: var(--cream);
  max-width: 60ch;
}
.page__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-200);
  color: var(--cream-dim);
}

/* @component: prose */
.prose { margin-top: var(--space-6); color: var(--cream-dim); }
.prose h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--hairline);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  letter-spacing: .02em;
  color: var(--cream);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: var(--space-5);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--cream);
}
.prose p, .prose ul, .prose ol { margin-top: var(--space-3); max-width: 65ch; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--emerald); }
.prose strong { color: var(--cream); font-weight: 600; }
.prose a:not(.btn) {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--emerald);
  text-underline-offset: 3px;
}
.prose a:not(.btn):hover { color: var(--emerald); }

/* @component: diff-list (numbered differentiators) */
.diff-list { list-style: none; padding-left: 0 !important; }
.diff-list li {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--hairline);
}
.diff-list li + li { margin-top: 0; }
.diff-list__num {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: 1;
  color: var(--emerald);
}
.diff-list__body strong { display: block; margin-bottom: var(--space-1); }

/* @component: stat-list (one quotable stat per line) */
.stat-list { list-style: none; padding-left: 0 !important; }
.stat-list li {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
}
.stat-list li + li { margin-top: 0; }
.stat-list__line { color: var(--cream); }
.stat-list__src { display: block; margin-top: var(--space-1); font-size: var(--fs-200); color: var(--cream-dim); }
.stat-list--own .stat-list__line strong { color: var(--emerald); }

/* @component: note-box */
.note-box {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-md);
  background: var(--ink-2);
  font-size: var(--fs-200);
}
.note-box p:first-child { margin-top: 0; }

/* @component: page-cta */
.page-cta {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 480px) {
  .diff-list li { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* Placeholder chips in prose can be sentence-length — let them wrap. */
.prose .ph { white-space: normal; }