/* PandoraBot article + blog styles.
   Kept in a separate file from the generated index.*.css so that importing a
   new pandorabot-static-site zip cannot clobber it. Uses the site's existing
   tokens (--ink/--muted/--line/--paper/--accent) so articles inherit the theme
   colour from `theme-*` on <main>. */

.art-wrap { background: var(--paper); padding-block: 54px 20px }
.art { width: min(860px, calc(100% - 48px)); margin-inline: auto }

/* ---------- header ---------- */
.art-hero { border-bottom: 1px solid var(--line); padding-bottom: 30px; margin-bottom: 38px }
.art-hero h1 {
  letter-spacing: -.045em; margin: 16px 0 18px;
  font-size: clamp(32px, 4.2vw, 52px); line-height: 1.03; max-width: 20ch;
}
.art-lede { color: #3c414f; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 62ch; margin: 0 0 20px }
.art-meta { color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 }
.art-meta time { color: inherit }

/* ---------- body ---------- */
.art-body { font-size: 17px; line-height: 1.72; color: #23283c }
.art-body > p { margin: 0 0 22px; max-width: 68ch }
.art-body h2 {
  letter-spacing: -.035em; margin: 46px 0 16px; scroll-margin-top: 28px;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.14; max-width: 26ch;
}
.art-body h3 { margin: 32px 0 10px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em }
.art-body a { color: var(--accent); text-underline-offset: 3px }
.art-body ul, .art-body ol { margin: 0 0 22px; padding-left: 22px; max-width: 66ch }
.art-body li { margin-bottom: 9px }
.art-body strong { font-weight: 660 }
.art-body figure { margin: 34px 0 }
.art-body figcaption, .art-note { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 10px }

/* ---------- data table ---------- */
.art-table { margin: 26px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff }
.art-table table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px }
.art-table th, .art-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line) }
.art-table thead th { background: #f6f4fd; font-weight: 640; font-size: 12.5px; letter-spacing: .02em; color: var(--ink) }
.art-table tbody tr:last-child td, .art-table tbody tr:last-child th { border-bottom: 0 }
.art-table tbody th { font-weight: 600 }
.art-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap }
.art-table tr.total td, .art-table tr.total th { font-weight: 700; background: rgba(var(--accent-rgb), .06) }

/* ---------- callout + CTA ---------- */
.art-callout {
  border: 1px solid rgba(var(--accent-rgb), .22); border-left: 4px solid var(--accent);
  background: #fff; border-radius: 12px; padding: 18px 20px; margin: 30px 0;
}
.art-callout p { margin: 0; font-size: 15.5px; line-height: 1.65 }
.art-callout p + p { margin-top: 10px }

.art-cta {
  background: linear-gradient(150deg, #171334, #241c46); color: #fff;
  border-radius: 20px; padding: 30px 32px; margin: 44px 0;
}
.art-cta h2 { margin: 0 0 10px; font-size: 23px; line-height: 1.2; letter-spacing: -.03em; color: #fff }
.art-cta p { margin: 0 0 18px; color: #c9c6dd; font-size: 15px; line-height: 1.6; max-width: 56ch }
.art-cta a {
  display: inline-flex; align-items: center; gap: 9px; background: #fff; color: #171334;
  border-radius: 11px; padding: 12px 20px; font-size: 14.5px; font-weight: 640; text-decoration: none;
}
.art-cta a:hover { transform: translateX(3px) }

/* ---------- FAQ ---------- */
.art-faq { margin: 44px 0 0 }
.art-faq details { border-bottom: 1px solid var(--line); padding: 18px 2px }
.art-faq summary { cursor: pointer; font-weight: 620; font-size: 16px; line-height: 1.4; list-style: none }
.art-faq summary::-webkit-details-marker { display: none }
.art-faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 500 }
.art-faq details[open] summary::after { content: "\2212" }
.art-faq p { margin: 12px 0 0; color: #3c414f; font-size: 15.5px; line-height: 1.68; max-width: 68ch }

.art-disclaimer { border-top: 1px solid var(--line); margin-top: 46px; padding-top: 20px; color: var(--muted); font-size: 12.5px; line-height: 1.65 }

/* ---------- charts ---------- */
.art-chart { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px }
.art-chart svg { display: block; width: 100%; height: auto }

/* ---------- blog index ---------- */
.blog-grid { display: grid; gap: 14px; margin: 36px 0 0 }
.blog-card {
  border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 24px 26px;
  transition: border-color .18s, transform .18s, box-shadow .18s; display: block; text-decoration: none; color: inherit;
}
.blog-card:hover { border-color: rgba(var(--accent-rgb), .42); transform: translateY(-2px); box-shadow: 0 16px 40px #221b3f12 }
.blog-card .kicker { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase }
.blog-card h2 { margin: 11px 0 9px; font-size: clamp(20px, 2vw, 25px); line-height: 1.16; letter-spacing: -.032em; max-width: 30ch }
.blog-card p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 72ch }
.blog-card .more { color: var(--accent); font-size: 13.5px; font-weight: 620 }
.blog-card .more .arrow { margin-left: 6px }

@media (max-width: 700px) {
  .art { width: min(100% - 32px, 860px) }
  .art-body { font-size: 16.5px }
  .art-cta { padding: 24px 22px }
  .art-body h2 { margin-top: 38px }
}