/* Insights article refinements — Aug 2026 */

/* ======== Vertical rhythm & base ======== */
/* 8px base rhythm scale for all spacing, margins, padding */
:root {
  --ri-1: 4px; --ri-2: 8px; --ri-3: 12px; --ri-4: 16px; --ri-5: 20px;
  --ri-6: 24px; --ri-7: 32px; --ri-8: 40px;
}

/* ======== Tighter rhythm between bullet points across all Insights articles ======== */
.article-content .article-bullets {
  margin: 16px 0 0;
}
.article-content .article-bullets + .article-bullets {
  margin-top: 6px;
}

/* ======== Consistent small upper-case sub-headings ======== */
.article-content h3 {
  margin: var(--ri-5) 0 var(--ri-2);
  color: var(--jp-slate-700);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ======== Article-panel callout (reused across both new pages) ======== */
.article-callout {
  margin: var(--ri-6) 0;
  padding: var(--ri-4) var(--ri-5);
  border-left: 3px solid var(--jp-amber);
  background: var(--jp-warm-white);
}
.article-callout h3 {
  margin: 0 0 var(--ri-3);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jp-slate-700);
}
.article-callout p { margin-bottom: var(--ri-4); }
.article-callout p:last-child { margin-bottom: 0; }

/* ======== Full-width table within article content ======== */
.article-table-wrap { overflow-x: auto; margin: var(--ri-6) 0 var(--ri-3); }
.article-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; line-height: 1.55; }
.article-table th,
.article-table td {
  padding: var(--ri-3) var(--ri-4);
  border: 1px solid rgb(var(--jp-slate-700-rgb) / 0.14);
  text-align: left;
  vertical-align: top;
}
.article-table th {
  background: var(--jp-slate-700);
  color: var(--jp-warm-white);
  font-size: 0.73rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 850;
}
.article-table td {
  color: rgb(var(--jp-slate-700-rgb) / 0.84);
}
.article-table caption {
  caption-side: bottom;
  font-size: 0.85rem;
  color: rgb(var(--jp-slate-700-rgb) / 0.6);
  font-style: italic;
  margin-top: var(--ri-3);
}

/* ======== Sources list ======== */
.article-sources { margin: var(--ri-3) 0 0; padding-left: var(--ri-4); }
.article-sources li { margin: 0 0 var(--ri-3); font-size: 0.88rem; line-height: 1.55; color: rgb(var(--jp-slate-700-rgb) / 0.66); }

/* ======== Pull quote ======== */
.article-pullquote {
  margin: var(--ri-7) 0;
  padding-left: var(--ri-5);
  border-left: 3px solid var(--jp-amber);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.38;
  color: var(--jp-slate-700);
}
.article-pullquote cite {
  display: block;
  margin-top: var(--ri-4);
  font-family: var(--font-sans);
  font-size: 0.83rem;
  color: rgb(var(--jp-slate-700-rgb) / 0.6);
}

/* ======== Superscript source markers ======== */
.article-superscript { font-size: 0.81rem; vertical-align: super; line-height: 1; color: inherit; }

/* ======== Aside badge enhancements ======== */
.article-aside { padding: var(--ri-5) var(--ri-4); }
.article-aside span { font-size: 0.7rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jp-slate-700); }
.article-aside strong { color: var(--jp-amber); }

/* ======== Featured insight card hover ======== */
.insights-feature-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.insights-feature-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgb(var(--jp-slate-950-rgb) / 0.15); }

/* ======== Premium reading refinements ======== */
.article-content h2 {
  margin-top: 48px;
  scroll-margin-top: 120px;
}
.article-content > p:first-of-type {
  font-size: 1.14rem;
  line-height: 1.75;
  color: rgb(var(--jp-slate-700-rgb) / 0.9);
}
.article-content .article-bullets li::marker { color: var(--jp-amber); }
.article-sources li::marker { color: rgb(var(--jp-slate-700-rgb) / 0.4); }

@media (max-width: 900px) {
  .article-callout { padding: var(--ri-4); }
  .article-pullquote { font-size: 1.25rem; }
}