/* blog-article-shell-base.css — GENERATED by _scripts/split-blog-components.mjs.
   Do not edit; edit blog-article-shell.css and regenerate.

   This is blog-article-shell.css with the editorial COMPONENT layer removed.
   Those components are defined once in public/blog-editorial.css instead of
   being redefined across three recovered stylesheets and 14 merged per-post
   dialects. Everything else here is preserved verbatim; compound rules that
   mixed component and non-component selectors are rewritten to keep the
   survivors rather than deleted. */

/* ═══════════════════════════════════════════════════════════════════════════
   blog-article-shell.css — the EDITORIAL ("article-shell") design system.

   ~10 posts were authored with a second self-contained inline <style> shell
   (the ".vshr-article-shell / .vshr-editorial-body" system — distinct from the
   ".vshr-blog" modern system restored in blog-content.css). WordPress kses
   stripped those <style> blocks on import, so the posts rendered as raw markup.
   This recovers the system as a THEME stylesheet (DRY, survives kses).

   Markup anatomy (lives inside the frame's .e-content):
     .vshr-blog-wrap.vshr-archetype-*
       > article.vshr-article-shell
           > header.vshr-blog-hero            ← HIDDEN (frame renders .bp-head)
           > .vshr-article-frame
               > .vshr-blog.vshr-editorial-body.vshr-(no|has)-toc
                   .lead, h2/h3, .section-eyebrow
                   .vshr-toc / .toc           ← HIDDEN (frame renders .bp-toc)
                   .vshr-module(-evidence|-boxed|-inline|-structured|-advisory)
                   .insight-box, .checklist-card (.check-item/.check-num/…)
                   .check-proof/.check-redflag/.callout-label
                   .vshr-pull-quote/.pull-quote, .source-note
                   .mid-cta                   ← kept (inline CTA, not frame chrome)
                   .faq-section/.faq-item/.faq-question/.faq-answer
                   .author-card               ← HIDDEN (frame renders .bp-author)
                   .closing-cta/.cta-section  ← HIDDEN (frame renders .bp-cta)
                   .vshr-disclaimer

   Original authored palette was indigo/violet; retargeted here to the VSHR
   brand (navy #07192E · blue #2170b5 · link #1665a8 · accent magenta #ea1c72 ·
   surface #f6f8fb · Work Sans body) so it sits cohesively beside the other blog
   system. Scoped to .vshr-blog-wrap so it cannot leak to the 166 plain posts or
   the .vshr-blog modern posts. Geometric/abstract only — no decorative grain.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens (scoped to the editorial wrapper) ──────────────────────────────── */
.vshr-blog-wrap {
  --as-navy:        #07192E;
  --as-blue:        #2170b5;
  --as-blue-strong: #1665a8;
  --as-blue-soft:   #edf4fb;
  --as-magenta:     #ea1c72;
  --as-text:        #0f1a2a;
  --as-text-muted:  #5f6d7e;
  --as-bg:          #f6f8fb;
  --as-surface:     #ffffff;
  --as-surface-raised: #f0f3fa;
  --as-border:      #dce1e8;
  --as-border-light:#edf0f5;
  --as-success:     #10B981;
  --as-warning:     #F59E0B;

  --as-radius-xl:   20px;
  --as-radius-lg:   16px;
  --as-radius-md:   12px;
  --as-radius-sm:   8px;

  --as-fs-eyebrow:  11px;
  --as-fs-caption:  13px;
  --as-fs-body-sm:  15px;
  --as-fs-body:     17px;
  --as-fs-body-lg:  18px;
  --as-fs-h2:       clamp(1.55rem, 3vw, 1.95rem);
  --as-fs-h3:       1.1rem;
  --as-fs-module-title: 1.05rem;
  --as-fs-faq-h2:   clamp(1.2rem, 2vw, 1.5rem);

  --as-sans: 'Work Sans', var(--font-sans, system-ui), -apple-system, sans-serif;

  --as-gradient: linear-gradient(180deg, var(--as-blue), #0a92d0 45%, var(--as-magenta));
  --as-gradient-cta:
    radial-gradient(at 85% 15%, rgba(33, 112, 181, 0.45) 0%, transparent 52%),
    radial-gradient(at 15% 80%, rgba(234, 28, 114, 0.30) 0%, transparent 46%),
    linear-gradient(155deg, #07192E 0%, #0d2a48 55%, #123a63 100%);

  color: var(--as-text);
  font-family: var(--as-sans);
}
.vshr-blog-wrap *,
.vshr-blog-wrap *::before,
.vshr-blog-wrap *::after { box-sizing: border-box; }

/* ── HIDE the chrome the new frame already renders ─────────────────────────── */
/* (scoped to .e-content so it only suppresses the post's OWN duplicates) */
.e-content .vshr-blog-wrap .vshr-blog-hero,
.e-content .vshr-blog-wrap .toc,
.e-content .vshr-blog-wrap .vshr-toc,
.e-content .vshr-blog-wrap .author-card,
.e-content .vshr-blog-wrap .cta-section,
.e-content .vshr-blog-wrap .closing-cta,
.e-content .vshr-blog-wrap .vshr-disclaimer { display: none !important; }

/* The shell/frame wrappers are transparent pass-throughs — the .e-content
   column already supplies width, padding and rhythm, so don't re-box them. */
.vshr-blog-wrap,
.vshr-blog-wrap .vshr-article-shell,
.vshr-blog-wrap .vshr-article-frame,
.vshr-blog-wrap .vshr-blog,
.vshr-blog-wrap .vshr-editorial-body {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
}

/* ── body typography ───────────────────────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog { color: var(--as-text); }
.vshr-blog-wrap .vshr-blog p {
  margin: 0 0 1.25em;
  font-size: var(--as-fs-body);
  line-height: 1.78;
  color: var(--as-text);
}
.vshr-blog-wrap .vshr-blog strong { color: var(--as-navy); font-weight: 700; }

.vshr-blog-wrap .vshr-blog .lead {
  font-size: var(--as-fs-body-lg);
  line-height: 1.72;
  color: var(--as-text);
  padding: 20px 24px 20px 28px;
  margin: 0 0 1.8rem;
  background: linear-gradient(180deg, rgba(243, 248, 253, 0.96), rgba(255, 255, 255, 0.98));
  border: 1px solid var(--as-border-light);
  border-left: 4px solid var(--as-blue);
  border-radius: 0 var(--as-radius-sm) var(--as-radius-sm) 0;
}

.vshr-blog-wrap .vshr-blog h2 {
  margin: 2.4rem 0 0.9rem;
  padding: 1.1rem 0 0.18em 0.7em;
  border-top: 1px solid var(--as-border-light);
  border-left: 4px solid var(--as-blue);
  font-family: var(--as-sans);
  font-size: var(--as-fs-h2);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--as-navy);
  text-wrap: balance;
}
.vshr-blog-wrap .vshr-blog h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.vshr-blog-wrap .vshr-blog h2 + p { font-size: var(--as-fs-body-lg); line-height: 1.82; }

.vshr-blog-wrap .vshr-blog h3 {
  margin: 2.1rem 0 0.6rem;
  font-family: var(--as-sans);
  font-size: var(--as-fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--as-blue-strong);
}
.vshr-blog-wrap .vshr-blog h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--as-navy);
}

.vshr-blog-wrap .vshr-blog ul,
.vshr-blog-wrap .vshr-blog ol {
  margin: 0 0 1.4rem;
  padding-left: 1.5rem;
  font-size: var(--as-fs-body);
  line-height: 1.72;
  color: var(--as-text);
}
.vshr-blog-wrap .vshr-blog li { margin-bottom: 0.45rem; }
.vshr-blog-wrap .vshr-blog li::marker { color: var(--as-blue); }

.vshr-blog-wrap .vshr-blog a {
  color: var(--as-blue-strong);
  text-decoration: underline;
  text-decoration-color: rgba(22, 101, 168, 0.32);
  text-underline-offset: 3px;
}
.vshr-blog-wrap .vshr-blog a:hover { color: var(--as-navy); text-decoration-color: currentColor; }

.vshr-blog-wrap .vshr-blog .section-eyebrow {
  display: block;
  margin: 2.8rem 0 0.4rem;
  font-family: var(--as-sans);
  font-size: var(--as-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-blue);
}

.vshr-blog-wrap .vshr-blog .source-note {
  margin: -8px 0 24px;
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  line-height: 1.65;
  color: var(--as-text-muted);
}

/* ── pull-quote ────────────────────────────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog .vshr-pull-quote,
.vshr-blog-wrap .vshr-blog .pull-quote {
  margin: 2em 0;
  padding: 1.4em 1.7em;
  background: linear-gradient(180deg, rgba(243, 248, 253, 0.96), #fff);
  border-left: 4px solid var(--as-magenta);
  border-radius: 0 var(--as-radius-sm) var(--as-radius-sm) 0;
  font-size: 1.15em;
  line-height: 1.55;
  font-style: italic;
  color: var(--as-navy);
}
.vshr-blog-wrap .vshr-blog .vshr-pull-quote p,
.vshr-blog-wrap .vshr-blog .pull-quote p { margin: 0; }

/* ── mid-article CTA (inline, NOT frame chrome — kept) ─────────────────────── */
.vshr-blog-wrap .vshr-blog .mid-cta {
  position: relative;
  margin: 28px 0 32px;
  padding: 24px 26px;
  background: var(--as-gradient-cta);
  border: 1px solid rgba(33, 112, 181, 0.28);
  border-radius: var(--as-radius-md);
  box-shadow: 0 20px 40px rgba(7, 25, 46, 0.18);
  overflow: hidden;
}
.vshr-blog-wrap .vshr-blog .mid-cta h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.vshr-blog-wrap .vshr-blog .mid-cta p {
  margin: 0 0 16px;
  max-width: 64ch;
  font-size: var(--as-fs-body-sm);
  line-height: 1.6;
  color: rgba(244, 248, 252, 0.84);
}
.vshr-blog-wrap .vshr-blog .mid-cta .closing-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vshr-blog-wrap .vshr-blog .mid-cta .cta-btn-closing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: none;
  border-radius: 999px;
  background: var(--as-magenta);
  color: #fff;
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(234, 28, 114, 0.3);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.vshr-blog-wrap .vshr-blog .mid-cta .cta-btn-closing:hover {
  background: #d41456;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 28, 114, 0.4);
}
.vshr-blog-wrap .vshr-blog .mid-cta .closing-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.vshr-blog-wrap .vshr-blog .mid-cta .closing-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ── focus + reduced motion ────────────────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog a:focus-visible, .vshr-blog-wrap .vshr-blog button:focus-visible{
  outline: 2px solid var(--as-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .vshr-blog-wrap .vshr-blog *,
  .vshr-blog-wrap .vshr-blog *::before,
  .vshr-blog-wrap .vshr-blog *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vshr-blog-wrap .vshr-blog .mid-cta{ padding: 16px; }
  .vshr-blog-wrap .vshr-blog .mid-cta .closing-links { flex-direction: column; align-items: stretch; }}