/* swe4vibe lesson pages — article typography.
 * Reads the same :root tokens as styles.css (load after it); owns only the
 * long-form reading surface. Landing archetypes stay in styles.css. */

.lesson {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--s-7);
}
.lesson h1 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.05;
  font-size: var(--t-h2); margin-bottom: var(--s-3);
}
.lesson .subtitle {
  color: var(--ink-muted); font-style: italic; margin-bottom: var(--s-6);
}
.lesson h2 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.15;
  font-size: var(--t-h3); margin-top: var(--s-6); margin-bottom: var(--s-3);
}
.lesson p { margin-bottom: var(--s-4); }
.lesson ul { padding-left: 1.2em; margin-bottom: var(--s-4); display: grid; gap: var(--s-2); }
.lesson a { color: var(--accent); }

.lesson code {
  font-size: 0.9em; background: var(--bg-2);
  padding: 0.1em 0.35em; border-radius: 6px;
}
.lesson pre {
  background: linear-gradient(180deg, var(--surface-top), var(--surface));
  color: var(--on-surface); box-shadow: var(--shadow-card);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-card);
  overflow-x: auto; line-height: 1.6; margin-bottom: var(--s-4);
}
.lesson pre code { background: none; padding: 0; font-size: 0.875rem; }

/* The runnable prompt — the lesson's money move gets a card of its own. */
.lesson blockquote {
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-btn);
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-5);
}
.lesson blockquote p { margin-bottom: 0; }