/* Shared typography and navigation are defined in site.css. */
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.meta span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); font-size: 0.72rem; }
.role { margin: 0; padding: 0; list-style: none; }
.role li { padding: 12px 0; border-top: 1px solid var(--line); }
.diagram { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.node { padding: 16px; border: 1px solid var(--line); background: var(--white); font-size: 0.78rem; font-weight: 600; }
.node small { display: block; margin-top: 8px; color: var(--muted); font-size: 0.7rem; font-weight: 400; }
.node.accent { border-top: 3px solid var(--accent); }
.challenge { padding: 28px 0; border-top: 1px solid var(--line); }
.challenge:first-of-type { margin-top: 28px; }
.challenge-grid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; margin-top: 18px; }
.challenge-grid strong { color: var(--muted); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.challenge-grid p { max-width: 58ch; margin: 0; font-size: 1.02rem; }
.outcome { background: #e9ece5; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }
@media (max-width: 600px) {
  .diagram, .facts, .challenge-grid { grid-template-columns: 1fr; }
  .challenge-grid { gap: 8px; }
}