/* Interactive explainers are black-theme only, matching the main site and Sanjaya. */

:root {
  --explainer-shell: 1400px;
  --explainer-gutter: clamp(20px, 3vw, 48px);
}

nav.top,
.shell-back,
.page-intro,
footer.site {
  max-width: var(--explainer-shell) !important;
  padding-right: var(--explainer-gutter) !important;
  padding-left: var(--explainer-gutter) !important;
}

/* Raw React explainers use this shared shell instead of narrow Tailwind max-w
   utilities. */
.site-shell,
#stack-widget,
#graph-widget {
  max-width: var(--explainer-shell) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Back-link rows in raw pages may still carry inline max-widths. */
body > div[style*="max-width: 1400px"][style*="JetBrains Mono"] {
  max-width: var(--explainer-shell) !important;
  padding-right: var(--explainer-gutter) !important;
  padding-left: var(--explainer-gutter) !important;
}

.seo-copy {
  margin: 24px auto 0;
  color: #d6d3d1;
}

.seo-copy h2 {
  margin: 0 0 10px;
  color: #fafaf9;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}

.seo-copy p {
  max-width: 980px;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.55;
}

.seo-copy ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.seo-copy li {
  border: 1px solid #292524;
  border-radius: 8px;
  padding: 12px;
  background: #0f1318;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .seo-copy ul {
    grid-template-columns: 1fr;
  }
}