/* ── ARTICLE PAGE — SHARED STYLES ─────────────────────────────
   Each article defines these CSS custom properties in its own
   inline <style> block:

     --art-stripe-bg   top accent stripe gradient
     --cat-bg          category badge background colour
     --cat-color       category badge text colour
     --quote-bg        pull-quote box gradient  (articles with quotes)
     --accent          link/hover accent        (research articles only)
     --accent-bg       icon background          (research articles only)
─────────────────────────────────────────────────────────────── */

/* ── TOP STRIPE ── */
.art-stripe { height: 6px; background: var(--art-stripe-bg); }

/* ── WRAPPER ── */
.art-page-wrap { max-width: 760px; margin: 0 auto; padding: 0 3.5rem; }

/* ── HEADER ── */
.art-page-header { padding-top: calc(70px + 3.5rem); padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
.art-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .84rem; font-weight: 500; text-decoration: none; margin-bottom: 2rem; transition: color .18s; }
.art-back:hover { color: var(--blue); }
.art-page-cat { display: inline-block; padding: .28rem .875rem; border-radius: 100px; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 1.25rem; background: var(--cat-bg); color: var(--cat-color); }
.art-page-h1 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); margin-bottom: 1.5rem; }
.art-page-meta { display: flex; align-items: center; gap: .75rem; font-size: .84rem; color: var(--muted); flex-wrap: wrap; }
.art-page-meta strong { color: var(--text); font-weight: 600; }
.art-page-meta .sep { color: var(--border); }

/* ── HERO IMAGE ── */
.art-hero-img { margin: 2.5rem 0 0; border-radius: 16px; overflow: hidden; max-height: 400px; }
.art-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── BODY CONTENT ── */
.art-body-content { padding: 3.5rem 0 6rem; font-size: 1.05rem; color: var(--text); line-height: 1.85; }
.art-body-content .lead { font-size: 1.15rem; color: var(--muted); line-height: 1.78; margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
.art-body-content p { margin-bottom: 1.5rem; }
.art-body-content h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1.2; margin: 2.75rem 0 1rem; clear: both; }
.art-body-content h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin: 2rem 0 .75rem; clear: both; }
.art-body-content ul,
.art-body-content ol { margin: .5rem 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.art-body-content li { line-height: 1.7; }
.art-body-content strong { color: var(--ink); }

/* ── PULL QUOTES — float into page margin ── */
.art-quote {
  float: left;
  width: 210px;
  margin: 0.25rem 2.5rem 0.75rem -3.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--quote-bg, linear-gradient(135deg, #0E2847 0%, #185D9E 100%));
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.art-quote--right {
  float: right;
  margin: 0.25rem -3.5rem 0.75rem 2.5rem;
}
.art-quote::before {
  content: '\201C';
  position: absolute;
  top: -.4rem; left: .75rem;
  font-size: 5rem; font-weight: 900;
  color: rgba(255,255,255,.12); line-height: 1;
  pointer-events: none; font-family: Georgia, serif;
}
.art-quote p { font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.6; letter-spacing: -.02em; font-style: italic; position: relative; z-index: 1; margin: 0; }
.art-clearfix { clear: both; height: 0; }

/* ── INLINE CALLOUTS — key principles stay in text flow ── */
.art-insight-box { background: var(--blue-bg); border: 1.5px solid rgba(36,121,197,.2); border-radius: 16px; padding: 1.75rem 2rem; margin: 2rem 0; }
.art-insight-box .ib-label { font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: .75rem; }
.art-insight-box p { margin-bottom: 0; color: var(--text); }
.art-callout { background: var(--bg-alt); border-left: 4px solid var(--blue); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; margin: 2rem 0; font-size: .975rem; color: var(--text); line-height: 1.75; }

/* ── DRAFT PLACEHOLDER (skeleton articles) ── */
.placeholder { border: 1.5px dashed var(--border); border-radius: 8px; padding: 1.25rem 1.5rem; color: var(--muted); font-size: .875rem; min-height: 100px; margin-bottom: 1.5rem; font-style: italic; display: flex; align-items: center; }

/* ── RESEARCH DOWNLOAD BLOCK ── */
.art-research-dl { border: 1.5px solid var(--border); border-radius: 16px; padding: 1.5rem; margin: 3rem 0; background: var(--bg-alt); }
.rdl-label { font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.rdl-link { display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem; border-radius: 10px; background: var(--bg); border: 1.5px solid var(--border); text-decoration: none; margin-bottom: .625rem; transition: border-color .18s, box-shadow .18s; }
.rdl-link:last-child { margin-bottom: 0; }
.rdl-link:hover { border-color: var(--accent, var(--blue)); box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.rdl-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-bg, #EBF4FF); color: var(--accent, var(--blue)); font-size: .65rem; font-weight: 800; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rdl-body { flex: 1; min-width: 0; }
.rdl-title { display: block; font-size: .9rem; font-weight: 700; color: var(--ink); }
.rdl-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.rdl-arrow { font-size: .9rem; color: var(--muted); flex-shrink: 0; }

/* ── CTA BANNER ── */
.art-cta { background: var(--blue); padding: 5rem 3.5rem; text-align: center; position: relative; overflow: hidden; }
.art-cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 300px; background: radial-gradient(ellipse, rgba(255,255,255,.13) 0%, transparent 60%); pointer-events: none; }
.art-cta h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.035em; color: #fff; margin-bottom: .875rem; position: relative; z-index: 1; }
.art-cta p { font-size: 1rem; color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 2rem; position: relative; z-index: 1; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ── MOBILE ── */
@media (max-width: 640px) {
  .art-page-wrap { padding: 0 1.25rem; }
  .art-body-content { font-size: .975rem; }
  .art-quote,
  .art-quote.art-quote--right { float: none; width: auto; margin: 1.5rem 0; }
  .art-cta { padding: 4rem 1.5rem; }
}