/* ---------------- long-form insight articles ----------------
 * Extends the .prose rules in site.css for the elements longer
 * articles use: h2 sections, ordered lists, tables, quotes, rules.
 * Loaded on single posts only (see functions.php).
 */
.prose h2{margin:clamp(42px,5vw,62px) 0 0;font-size:clamp(22px,2.6vw,28px);font-weight:500;line-height:1.22;letter-spacing:-.02em;color:#fff}
.prose h2:first-child{margin-top:0}
.prose h2 + p,.prose h3 + p{margin-top:12px}
.prose h3{font-size:clamp(17.5px,1.9vw,20px)}
.prose em{color:var(--txt-3);font-style:italic}

.prose ol{margin:17px 0 0;padding:0;list-style:none;counter-reset:gj-ol}
.prose ol > li{counter-increment:gj-ol;padding-left:30px}
.prose ol > li::before{content:counter(gj-ol);left:0;top:.08em;width:20px;height:20px;border-radius:50%;
  background:rgba(124,85,232,.16);border:1px solid rgba(185,162,255,.28);
  font-size:11.5px;font-weight:500;line-height:19px;text-align:center;color:var(--violet-lt)}
.prose li > ul{margin:11px 0 0}
.prose li > ul > li{counter-increment:none;padding-left:21px}
.prose li > ul > li::before{content:"";left:2px;top:.62em;width:5px;height:5px;border:0;background:var(--violet)}

.prose blockquote{margin:24px 0 0;padding:18px 22px;border-radius:14px;
  background:linear-gradient(155deg,rgba(124,85,232,.11),rgba(10,6,23,.6) 62%);
  border:1px solid rgba(185,162,255,.16)}
.prose blockquote p:first-child{margin-top:0}

.prose hr{margin:clamp(40px,5vw,56px) 0 0;border:0;border-top:1px solid var(--line-hi)}

.prose-table{margin:22px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px;background:var(--card)}
.prose table{width:100%;border-collapse:collapse;font-size:14.6px;line-height:1.5}
.prose th,.prose td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{font-weight:500;color:var(--txt);background:var(--card-hi);white-space:nowrap}
.prose td{font-weight:300;color:var(--txt-2)}
.prose tr:last-child td{border-bottom:0}
@media (max-width:640px){.prose table{font-size:13.6px}.prose th,.prose td{padding:10px 12px}.prose th{white-space:normal}}

/* ---------------- Insights pagination ----------------
 * WordPress wraps page numbers in .nav-links, which the header
 * also uses (absolutely centred). Undo that inside .pagination.
 */
.pagination{margin:clamp(34px,4vw,48px) 0 0}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pagination .nav-links{position:static;transform:none;left:auto;top:auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;white-space:normal}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;border-radius:20px;
  border:1px solid var(--line);background:var(--card);
  font-size:14px;font-weight:500;color:var(--txt-2);text-decoration:none;
  opacity:1!important;animation:none!important;
  transition:background .2s var(--e-soft),border-color .2s var(--e-soft),color .2s var(--e-soft)}
.pagination a.page-numbers:hover{background:var(--card-hi);border-color:var(--line-hi);color:#fff}
.pagination .page-numbers.current{background:rgba(124,85,232,.16);border-color:rgba(185,162,255,.32);color:var(--violet-lt)}
.pagination .page-numbers.dots{border:0;background:none}