/* ============================================================
   dl-modern-blog-test.css — WebVeda-style Modern Blog overlay
   Scoped to body.dl-modern-blog-test (single post 38492 only).
   Brand-emerald accent (replacing source design's blue) per the
   feedback_everything_in_brand_new_design.md rule.
   Header (#dl-header) + Footer (#dl-footer) intentionally untouched.
   Rev-2: selectors now use #dl-main prefix to beat single.php
   inline <style> at (0,1,1,0) specificity.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

body.dl-modern-blog-test {
  --mb-bg:        #FFFFFF;
  --mb-bg-2:      #F4F8F6;
  --mb-bg-3:      #E8F0EC;
  --mb-bg-tint:   #EAF3EC;
  --mb-bg-cool:   #ECFDF5;
  --mb-ink:       #111111;
  --mb-ink-2:     #1F2D24;
  --mb-ink-3:     #4A4038;
  --mb-ink-4:     #6B6258;
  --mb-ink-5:     #94A3B8;
  --mb-border:    #E7D8C6;
  --mb-border-2:  #E7D8C6;
  --mb-brand:        #E8352B;
  --mb-brand-deep:   #1A1A1A;
  --mb-brand-darker: #14110E;
  --mb-brand-light:  #F6F1E8;
  --mb-brand-soft:   #E7D8C6;
  --mb-brand-text:   #14110E;
  --mb-accent-green: #E8352B;
  --mb-f-display: "General Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mb-f-body:    "General Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mb-r-md: 12px;
  --mb-r-lg: 16px;
  --mb-r-xl: 24px;
  --mb-r-pill: 999px;
  --mb-s-1: 0 1px 2px rgba(15, 31, 24, 0.04), 0 1px 1px rgba(15, 31, 24, 0.03);
  --mb-s-2: 0 4px 6px -1px rgba(15, 31, 24, 0.06), 0 2px 4px -2px rgba(15, 31, 24, 0.04);
  --mb-s-brand: 0 8px 30px -10px rgba(232, 53, 43, 0.45);
  --mb-ease: cubic-bezier(0.2, 0.7, 0.25, 1);
  --mb-d-fast: 150ms;
  background: var(--mb-bg) !important;
  font-family: var(--mb-f-body) !important;
  color: var(--mb-ink) !important;
}

/* ===== HERO: kill dark-emerald gradient, replace with modern white-bg ===== */
body.dl-modern-blog-test #dl-main .article-hero {
  background: #f4f8f6 !important;
  color: var(--mb-ink) !important;
  padding: 36px 0 10px !important;
  position: relative;
  overflow: hidden;
}
body.dl-modern-blog-test #dl-main .article-hero::before {
  background: radial-gradient(circle, rgba(232, 53, 43, 0.10) 0%, transparent 60%) !important;
  width: 600px !important; height: 600px !important;
  top: -160px !important; right: -240px !important;
}
body.dl-modern-blog-test #dl-main .article-hero::after { display: none !important; }
body.dl-modern-blog-test #dl-main .article-hero-bg { display: none !important; }

/* Hero wrap: matched to the newsletter band's content column (1240 px
   max-width + 20 px padding) so banner left + right edges align with
   the subscription card edges visible in the footer. Per user feedback
   2026-05-28 evening: "shift blog body to the same edges as subscription". */
body.dl-modern-blog-test #dl-main .article-hero .wrap {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

body.dl-modern-blog-test #dl-main .article-hero .ah-title {
  color: var(--mb-ink) !important;
  font-family: var(--mb-f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 5.4vw, 64px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

body.dl-modern-blog-test #dl-main .article-hero .ah-deck {
  color: var(--mb-ink-3) !important;
  font-family: var(--mb-f-body) !important;
  font-size: 19px !important;
  line-height: 1.55 !important;
  max-width: 720px !important;
  margin: 22px 0 32px !important;
}

body.dl-modern-blog-test #dl-main .article-hero-back {
  color: var(--mb-brand) !important;
  font-family: var(--mb-f-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

body.dl-modern-blog-test #dl-main .article-hero .ah-tag,
body.dl-modern-blog-test #dl-main .article-hero .ah-part {
  background: var(--mb-brand-light) !important;
  color: var(--mb-brand-darker) !important;
  border: 1px solid var(--mb-brand-soft) !important;
  font-family: var(--mb-f-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 5px 11px !important;
  border-radius: var(--mb-r-pill) !important;
}

/* Byline meta row: flush-left with the title / back-link / share strip.
   Card framing (bg + radius + 20px horizontal padding) removed per user
   feedback 2026-05-28 evening: "all elements should start same point, no
   indent, last date is off". Vertical breathing room kept via margin-top
   + a thin row gap. */
body.dl-modern-blog-test #dl-main .article-hero .ah-byline {
  margin-top: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--mb-ink-3) !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-byline svg { color: var(--mb-brand) !important; width: 15px !important; height: 15px !important; }
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .byline-item { color: var(--mb-ink-3) !important; font-size: 12.35px !important; font-weight: 500 !important; }
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill { padding: 5px 13px !important; font-size: 12.35px !important; }
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill-icon { width: 15px !important; height: 15px !important; }

/* Last-updated pill: flip to light tint on white hero */
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill {
  background: var(--mb-brand-light) !important;
  border: 1px solid var(--mb-brand-soft) !important;
  color: var(--mb-ink-2) !important;
  box-shadow: none !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill-icon,
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill-label,
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill-date { color: var(--mb-brand) !important; }
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill-sep { color: var(--mb-ink-4) !important; }
body.dl-modern-blog-test #dl-main .article-hero .ah-byline .ah-updated-pill-published { color: var(--mb-ink-3) !important; font-style: italic !important; }

/* Hero share strip — sits directly under .ah-byline, brand emerald icons
   on a pale-emerald chip, locked 2026-05-28 evening. Injected by
   assets/js/dl-modern-blog-test-share.js. */
body.dl-modern-blog-test #dl-main .article-hero .ah-share {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 28px !important;
  flex-wrap: wrap !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-share .ah-share-label {
  font-family: var(--mb-f-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: var(--mb-ink-4) !important;
  margin-right: 4px !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-share .ah-share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--mb-brand-soft, #E7D8C6) !important;
  color: var(--mb-brand, #E8352B) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-share .ah-share-btn:hover,
body.dl-modern-blog-test #dl-main .article-hero .ah-share .ah-share-btn:focus-visible {
  background: var(--mb-brand, #E8352B) !important;
  color: #FFFFFF !important;
  border-color: var(--mb-brand, #E8352B) !important;
  transform: translateY(-1px) !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-share .ah-share-copy {
  width: auto !important;
  padding: 0 16px !important;
  height: 44px !important;
  min-height: 44px !important;
  font-family: var(--mb-f-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-share .ah-share-copy-label {
  white-space: nowrap !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-share .ah-share-copy.is-copied {
  background: var(--mb-brand-light, #E8F1EC) !important;
  color: var(--mb-brand-darker, #1A1A1A) !important;
  border-color: var(--mb-brand, #E8352B) !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-share svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Hero grid: 2-column. Left holds title + deck + byline + share. Right
   holds the significance card injected via JS. Featured image lives in the
   blog body (moved by JS) and is no longer in the hero. Per user 2026-05-28
   evening: "add a block that defines the significance of the topic". */
body.dl-modern-blog-test #dl-main .article-hero-grid {
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 48px !important;
  align-items: start !important;
}
@media (max-width: 980px) {
  body.dl-modern-blog-test #dl-main .article-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}
/* Explicit grid placement: left text in col 1, significance card in col 2,
   both on row 1. Forces side-by-side regardless of auto-placement quirks. */
body.dl-modern-blog-test #dl-main .article-hero .article-hero-left {
  grid-row: 1 !important;
  grid-column: 1 / 2 !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-significance {
  grid-row: 1 !important;
  grid-column: 2 / 3 !important;
  background: #FFFFFF !important;
  border: 1px solid var(--mb-brand-soft) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 14px 40px -22px rgba(232, 53, 43, 0.30) !important;
  justify-self: end !important;
  width: 100% !important;
  max-width: 460px !important;
  margin-left: auto !important;
  align-self: start !important;
}
@media (max-width: 980px) {
  body.dl-modern-blog-test #dl-main .article-hero .article-hero-left,
  body.dl-modern-blog-test #dl-main .article-hero .ah-significance {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
  }
  body.dl-modern-blog-test #dl-main .article-hero .ah-significance {
    justify-self: stretch !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
}
/* Head bar */
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-head {
  background: var(--mb-brand) !important;
  color: #FFFFFF !important;
  padding: 16px 20px !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-head-label {
  font-family: var(--mb-f-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #FFFFFF !important;
}
/* Sections */
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-section {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--mb-brand-soft) !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-section:last-child {
  border-bottom: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-section-h {
  font-family: var(--mb-f-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mb-brand) !important;
  margin: 0 0 10px !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-section-body {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--mb-ink-2) !important;
  margin: 0 !important;
}
/* Key takeaways list */
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-takeaways {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-takeaways li {
  position: relative !important;
  padding: 6px 0 6px 18px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--mb-ink-2) !important;
}
body.dl-modern-blog-test #dl-main .article-hero .ah-significance .ah-sig-takeaways li::before {
  content: "▸" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  color: #C4633F !important;
  font-size: 12px !important;
}
/* Hide the image in its ORIGINAL hero position ONLY when the relocation JS
   has actually run and dropped a visible copy into the body (it then adds
   body.dl-mbt-image-moved). The relocation JS is pinned to a single post
   (38492); on every other article it never fires, so gating the hide on
   body.dl-mbt-image-moved keeps the server-rendered featured image visible
   in the hero on all other posts instead of hiding it with no replacement.
   Root-cause fix 2026-06-02: the hide rule had been globalised while its
   JS counterpart stayed pinned, hiding the featured image site-wide. */
body.dl-mbt-image-moved #dl-main .article-hero .article-hero-image:not(.article-hero-image--moved) {
  display: none !important;
}
/* The relocated featured image becomes a body figure: full prose column
   width, brand-emerald shadow retained, top spacing for breathing room.
   margin-top: 0 so its top edge aligns with the TOC column top edge. */
body.dl-modern-blog-test #dl-main .article-prose .article-hero-image--moved {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 32px !important;
  border-radius: var(--mb-r-xl) !important;
  box-shadow: 0 20px 50px -20px rgba(232, 53, 43, 0.35) !important;
}
/* Horizontal alignment: TOC and prose first child both sit flush at the
   grid row top. Per user 2026-05-28 evening "match horizontally same". */
body.dl-modern-blog-test #dl-main .article-toc {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-toc .toc-head,
body.dl-modern-blog-test #dl-main .article-toc > h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-prose > *:first-child,
body.dl-modern-blog-test #dl-main .article-prose .article-hero-image--moved:first-child {
  margin-top: 0 !important;
}
/* Hide stray editor <br> artifacts that are DIRECT children of the prose (they sit
   between the hidden byline/featured/toc injections and the Overview H2 and add a
   blank line that pushes "Overview" below the TOC head). Content <br>s live inside
   <p>, never as prose children. Per user 2026-05-31: "Overview must start same as TOC". */
body.dl-modern-blog-test #dl-main .article-prose > br { display: none !important; }
body.dl-modern-blog-test #dl-main .article-prose .article-hero-image--moved svg,
body.dl-modern-blog-test #dl-main .article-prose .article-hero-image--moved img,
body.dl-modern-blog-test #dl-main .article-prose .article-hero-image--moved .article-hero-image-svg,
body.dl-modern-blog-test #dl-main .article-prose .article-hero-image--moved .article-hero-image-svg svg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--mb-r-xl) !important;
}
body.dl-modern-blog-test #dl-main .article-prose .article-hero-image--moved .article-hero-image-svg {
  overflow: hidden !important;
}

/* ===== BODY TYPOGRAPHY ===== */
body.dl-modern-blog-test #dl-main h1,
body.dl-modern-blog-test #dl-main h2,
body.dl-modern-blog-test #dl-main h3,
body.dl-modern-blog-test #dl-main h4,
body.dl-modern-blog-test #dl-main h5 {
  font-family: var(--mb-f-display) !important;
  color: var(--mb-ink) !important;
  letter-spacing: -0.02em !important;
}

body.dl-modern-blog-test #dl-main h2 {
  font-weight: 700 !important;
  font-size: clamp(28px, 3.4vw, 38px) !important;
  line-height: 1.1 !important;
  margin: 48px 0 22px !important;
}
body.dl-modern-blog-test #dl-main h3 {
  font-weight: 700 !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  line-height: 1.2 !important;
  margin: 36px 0 16px !important;
}

body.dl-modern-blog-test #dl-main .entry-content p,
body.dl-modern-blog-test #dl-main .dl-ca-entry p {
  font-family: var(--mb-f-body) !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  color: var(--mb-ink-2) !important;
  margin: 0 0 20px !important;
}
body.dl-modern-blog-test #dl-main p strong,
body.dl-modern-blog-test #dl-main p b {
  font-weight: 600 !important;
  color: var(--mb-ink) !important;
}

/* ===== WIDTH: the REAL fix — override the 3-col article-grid =====
   single.php declares: .article-grid = 220px minmax(0,1fr) 280px.
   The middle column = container - 596px before any of our rules can act
   on `.entry-content`. Override the grid to 2-col and hide the right
   meta-sidebar. Locked in feedback_article_grid_narrows_middle_column.md. */
/* 3-col grid (Modern overlay). Tracks default single.php structure but
   tuned per user feedback 2026-05-28 evening: middle +15%, right -10%.
   Right toc-companion: 280 -> 252 (-10%). Left toc: 240 -> 180 (frees 60px).
   Gap: 48 -> 40 (frees 8px each gap). Net: middle (1fr) gains ~96px at
   1440vw which is +13-15% over the 709px baseline. */
/* 2-col grid (toc + prose). Companion sidebar hidden per user feedback
   2026-05-28 evening ("remove this 3rd column"). Middle reclaims the
   ~292px the right column was holding (252 col + 40 gap). */
/* Grid fills the wrap edge-to-edge so the article body left + right edges
   match the subscription/footer card edges directly. Per user feedback
   2026-05-28 evening: "shift blog body to the same edges as subscription".
   TOC stays fixed at 262 px; gap 80 px; middle 1fr absorbs the rest of
   the wrap. No max-width on the grid - the 1440 wrap above is the cap. */
body.dl-modern-blog-test #dl-main .article-grid {
  grid-template-columns: 262px minmax(0, 1fr) !important;
  gap: 80px !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-companion {
  display: none !important;
}
@media (max-width: 1400px) {
  body.dl-modern-blog-test #dl-main .article-grid {
    grid-template-columns: 244px minmax(0, 1fr) !important;
    gap: 64px !important;
  }
}
@media (max-width: 1100px) {
  body.dl-modern-blog-test #dl-main .article-grid {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 48px !important;
  }
}
@media (max-width: 880px) {
  body.dl-modern-blog-test #dl-main .article-grid {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 32px !important;
  }
}
@media (max-width: 760px) {
  body.dl-modern-blog-test #dl-main .article-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body.dl-modern-blog-test #dl-main .article-toc { position: static !important; }
}
/* Article-body wrap: matched to the newsletter band's content column
   (1240 px max-width + 20 px padding, same as inc/dl-footer.php
   .footer-pre-band.block.ca .wrap) so the body grid left + right edges
   align with the subscription card edges directly. Per user feedback
   2026-05-28 evening: "shift blog body to the same edges as subscription". */
body.dl-modern-blog-test #dl-main .article-body > .wrap {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Pure-white body section per user direction 2026-05-28 evening:
   "make all body text background white, no tint, no colour, pure white".
   Forces #FFFFFF on every wrapper that could leak a tint behind the grid. */
body.dl-modern-blog-test #dl-main .article-body,
body.dl-modern-blog-test #dl-main .article-body > .wrap,
body.dl-modern-blog-test #dl-main .article-grid,
body.dl-modern-blog-test #dl-main .article-prose,
body.dl-modern-blog-test #dl-main .article-toc {
  background: #FFFFFF !important;
}

/* Inner content max-widths (kept for prose readability) */
body.dl-modern-blog-test #dl-main .entry-content,
body.dl-modern-blog-test #dl-main .dl-ca-entry,
body.dl-modern-blog-test #dl-main .article-prose,
body.dl-modern-blog-test #dl-main .ast-container,
body.dl-modern-blog-test #dl-main .site-main,
body.dl-modern-blog-test #dl-main #primary,
body.dl-modern-blog-test #dl-main .ast-article-single,
body.dl-modern-blog-test #dl-main article.post,
body.dl-modern-blog-test #dl-main article.current_affairs {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--mb-bg) !important;
}

@media (max-width: 720px) {
  body.dl-modern-blog-test #dl-main .entry-content,
  body.dl-modern-blog-test #dl-main .dl-ca-entry {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Let prose, lists, and inline content fill the now-wider middle column.
   Per user feedback 2026-05-28 evening: removing the right sidebar
   without widening the inner prose is a no-op; prose was still pinned to
   the left at ~780px. Force the inner blocks to inherit the column. */
body.dl-modern-blog-test #dl-main .dl-ca-entry,
body.dl-modern-blog-test #dl-main .dl-ca-entry > *,
body.dl-modern-blog-test #dl-main .dl-ca-entry > .dl-kb-section,
body.dl-modern-blog-test #dl-main .dl-ca-entry > .dl-kb-section > *,
body.dl-modern-blog-test #dl-main .entry-content,
body.dl-modern-blog-test #dl-main .entry-content > *,
body.dl-modern-blog-test #dl-main .entry-content > .dl-kb-section,
body.dl-modern-blog-test #dl-main .entry-content > .dl-kb-section > *,
body.dl-modern-blog-test #dl-main .article-prose,
body.dl-modern-blog-test #dl-main .article-prose > *,
body.dl-modern-blog-test #dl-main .article-prose > .dl-kb-section,
body.dl-modern-blog-test #dl-main .article-prose > .dl-kb-section > * {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Big-screen reading-column cap. Per user judgment 2026-05-28 evening:
   on >=1920 viewports the 1fr middle column kept growing past the 60-80
   char comfort band (1138 px at 1920, 1778 at QHD, 3143 at 4K). Lock the
   outer prose container to 880 px (Style 3++ reading width) and left-
   align it to the TOC-side edge so excess whitespace sits to the right
   of the prose rather than between the TOC and the body. Only fires at
   widths where the natural column already exceeds 880; smaller viewports
   continue to fill the column. */
@media (min-width: 1100px) {
  body.dl-modern-blog-test #dl-main .entry-content,
  body.dl-modern-blog-test #dl-main .dl-ca-entry,
  body.dl-modern-blog-test #dl-main .article-prose {
    max-width: 820px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* ===== CALLOUT (current_relevance) ===== */
body.dl-modern-blog-test #dl-main .dl-callout {
  margin: 32px auto !important;
  padding: 24px 28px !important;
  background: linear-gradient(135deg, var(--mb-brand-light) 0%, var(--mb-bg-tint) 100%) !important;
  border-radius: var(--mb-r-xl) !important;
  border: 1px solid var(--mb-brand-soft) !important;
  border-left: 4px solid var(--mb-brand) !important;
  box-shadow: var(--mb-s-1) !important;
  max-width: 880px !important;
}
body.dl-modern-blog-test #dl-main .dl-callout-label {
  font-family: var(--mb-f-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mb-brand) !important;
}
body.dl-modern-blog-test #dl-main .dl-callout-list li {
  position: relative;
  padding-left: 26px !important;
  font-size: 15px !important;
  color: var(--mb-ink-2) !important;
}
body.dl-modern-blog-test #dl-main .dl-callout-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 14px;
  border-radius: var(--mb-r-pill);
  background: var(--mb-brand);
  box-shadow: 0 0 0 4px var(--mb-brand-light);
}

/* ===== TABLES — modern card style ===== */
body.dl-modern-blog-test #dl-main table {
  background: var(--mb-bg) !important;
  border-radius: var(--mb-r-lg) !important;
  border: 1px solid var(--mb-border) !important;
  box-shadow: var(--mb-s-1) !important;
  font-family: var(--mb-f-body) !important;
  overflow: hidden !important;
  margin: 28px auto !important;
  max-width: 1024px !important;
}
body.dl-modern-blog-test #dl-main table thead th {
  background: var(--mb-bg-2) !important;
  font-family: var(--mb-f-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--mb-ink) !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--mb-border) !important;
}
body.dl-modern-blog-test #dl-main table tbody td {
  padding: 14px 16px !important;
  font-size: 14.5px !important;
  color: var(--mb-ink-2) !important;
  border-bottom: 1px solid var(--mb-border) !important;
}
body.dl-modern-blog-test #dl-main table tbody tr:hover td { background: var(--mb-bg-2) !important; }

/* ===== FIGURES — card style ===== */
body.dl-modern-blog-test #dl-main figure {
  margin: 32px auto !important;
  padding: 24px !important;
  background: var(--mb-bg) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-r-xl) !important;
  box-shadow: var(--mb-s-1) !important;
  max-width: 1024px !important;
}
body.dl-modern-blog-test #dl-main figcaption {
  font-family: var(--mb-f-body) !important;
  font-size: 13.5px !important;
  color: var(--mb-ink-4) !important;
  font-style: italic !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* ===== MCQs — modern pills ===== */
body.dl-modern-blog-test #dl-main .dl-mcq,
body.dl-modern-blog-test #dl-main .dl-mcq-card {
  margin: 32px auto !important;
  padding: 28px !important;
  background: var(--mb-bg) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-r-xl) !important;
  box-shadow: var(--mb-s-2) !important;
  max-width: 880px !important;
}
body.dl-modern-blog-test #dl-main .dl-mcq-q {
  font-family: var(--mb-f-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--mb-ink) !important;
}
body.dl-modern-blog-test #dl-main .dl-mcq-options li,
body.dl-modern-blog-test #dl-main .dl-mcq ul.options li {
  padding: 14px 18px !important;
  background: var(--mb-bg-2) !important;
  border: 1.5px solid var(--mb-border) !important;
  border-radius: var(--mb-r-pill) !important;
  color: var(--mb-ink-2) !important;
  font-family: var(--mb-f-body) !important;
  font-size: 15px !important;
  transition: all var(--mb-d-fast) var(--mb-ease) !important;
}
body.dl-modern-blog-test #dl-main .dl-mcq-options li:hover,
body.dl-modern-blog-test #dl-main .dl-mcq ul.options li:hover {
  background: var(--mb-brand-light) !important;
  border-color: var(--mb-brand) !important;
  color: var(--mb-brand-darker) !important;
}
body.dl-modern-blog-test #dl-main .dl-mcq .answer,
body.dl-modern-blog-test #dl-main .dl-mcq-answer {
  background: var(--mb-bg-cool) !important;
  border-left: 4px solid var(--mb-accent-green) !important;
  border-radius: var(--mb-r-md) !important;
  padding: 16px 18px !important;
}

/* ===== SOURCES ===== */
body.dl-modern-blog-test #dl-main ul.dl-sources {
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border) !important;
  border-left: 4px solid var(--mb-brand) !important;
  border-radius: var(--mb-r-xl) !important;
  padding: 20px 24px 20px 50px !important;
  margin: 28px auto !important;
  font-family: var(--mb-f-body) !important;
  max-width: 880px !important;
}
body.dl-modern-blog-test #dl-main .dl-sources li {
  font-size: 14.5px !important;
  color: var(--mb-ink-2) !important;
}
body.dl-modern-blog-test #dl-main .dl-sources a {
  color: var(--mb-brand) !important;
  border-bottom: 1px solid rgba(232, 53, 43, 0.35) !important;
  font-weight: 500 !important;
}

/* ===== EEAT block — keep brand-tint, modern radius ===== */
body.dl-modern-blog-test #dl-main .dl-eeat-author-block {
  border-radius: var(--mb-r-xl) !important;
  box-shadow: var(--mb-s-2) !important;
  max-width: 880px !important;
  margin: 40px auto !important;
}
body.dl-modern-blog-test #dl-main .dl-eeat-name { font-family: var(--mb-f-display) !important; }
body.dl-modern-blog-test #dl-main .dl-eeat-bio,
body.dl-modern-blog-test #dl-main .dl-eeat-role,
body.dl-modern-blog-test #dl-main .dl-eeat-label { font-family: var(--mb-f-body) !important; }

/* ===== Link colour in body ===== */
body.dl-modern-blog-test #dl-main .entry-content a,
body.dl-modern-blog-test #dl-main .dl-ca-entry a {
  color: var(--mb-brand) !important;
  border-bottom: 1px solid rgba(232, 53, 43, 0.28) !important;
}

/* ===== Test-mode badge (top-right) ===== */
body.dl-modern-blog-test::before {
  content: "MODERN DESIGN · TEST · POST 38492";
  position: fixed;
  top: 80px; right: 14px;
  z-index: 9999;
  padding: 6px 14px;
  background: #E8352B;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-radius: 999px;
  box-shadow: 0 8px 30px -10px rgba(232, 53, 43, 0.45);
  pointer-events: none;
}
@media (max-width: 720px) {
  body.dl-modern-blog-test::before { top: auto; bottom: 16px; right: 16px; font-size: 9px; }
}

/* Footer Subscribe button overrides removed 2026-05-28 evening: reverted to
   default emerald brand for Sindoor. The global footer styles in inc/dl-footer.php
   already paint Subscribe at #E8352B with hover #E8352B; we no longer override. */


/* ===== PYQ Promise + inner collapsibles: Two-tone card pattern
   (sample #3 from /preview/pyq-section-samples-v2.html). Per user direction
   "apply 3". Each PYQ <li> becomes a card with a thick brand-emerald left
   strip and a Fraunces emerald inline heading; inner collapsible is a
   terracotta-outlined pill button. ===== */

body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-eyebrow {
  display: block !important;
  background: var(--mb-brand-light, #F6F1E8) !important;
  border-left: 4px solid var(--mb-brand, #E8352B) !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--mb-ink-2, #1F2D24) !important;
  font-family: var(--mb-f-display, 'Fraunces', serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 12px 18px 0 !important;
  margin: 0 0 14px !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row:first-of-type {
  background: var(--mb-brand-light, #F6F1E8) !important;
  border-left: 4px solid var(--mb-brand, #E8352B) !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--mb-ink-2, #1F2D24) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  padding: 0 18px 14px !important;
  margin: -14px 0 22px !important;
}

body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block ol,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 18px !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol > li {
  background: var(--sm-surface, #FFFFFF) !important;
  border: 1px solid var(--sm-hairline, #E2E2E2) !important;
  border-left: 3px solid var(--sm-accent, #E8352B) !important;
  border-radius: 10px !important;
  padding: 22px 26px !important;
  list-style: none !important;
  color: var(--sm-ink, #1A1A1A) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  position: relative !important;
  margin: 0 0 14px !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li::marker,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol > li::marker {
  content: "" !important;
}

body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li > strong:first-child,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol > li > strong:first-child {
  display: block !important;
  font-family: var(--sm-f-display, 'Fraunces', serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--sm-ink-strong, #1A1714) !important;
  text-transform: none !important;
  margin-bottom: 10px !important;
}
/* question intro + prompt -> match Operation .s4-stem / .s4-prompt (dark, bold, own line) */
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li .dl-pyq-stem,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol > li .dl-pyq-stem {
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--sm-ink-strong, #1A1714) !important;
  line-height: 1.5 !important;
  margin: 0 0 13px !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li .dl-pyq-prompt,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol > li .dl-pyq-prompt {
  display: block !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sm-ink-strong, #1A1714) !important;
  margin: 16px 0 13px !important;
}

body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li ol,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol > li ol {
  margin: 10px 0 12px 4px !important;
  padding: 0 0 0 22px !important;
  list-style: decimal !important;
  display: block !important;
  gap: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li ol > li,
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block .dl-promise-row > ol > li ol > li {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-promise-block > ol > li ol > li::before {
  content: none !important;
}

/* PYQ framework collapsible -> match Operation .fw / .fw-body byte-to-byte
   (light-grey rounded box, transparent summary with RED text + box chevron,
   muted body text with DARK labels). Replaces the old terracotta pill that
   filled solid when open. 2026-05-30. */
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework,
body.dl-modern-blog-test #dl-main .article-prose details.dl-prelims-framework,
body.dl-modern-blog-test #dl-main .article-prose details.dl-mains-framework {
  background: var(--sm-surface-2, #F7F7F7) !important;
  border: 1px solid var(--sm-hairline, #E2E2E2) !important;
  border-radius: 11px !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
  overflow: hidden !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework summary,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework summary {
  background: transparent !important;
  color: var(--sm-accent-ink, #CF2418) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework summary::-webkit-details-marker,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework summary::-webkit-details-marker {
  display: none !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework summary::before,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework summary::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border: 0 !important;
  border-right: 2px solid var(--sm-accent, #E8352B) !important;
  border-bottom: 2px solid var(--sm-accent, #E8352B) !important;
  transform: rotate(-45deg) !important;
  transition: transform .2s !important;
  flex-shrink: 0 !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework[open] summary::before,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework[open] summary::before {
  content: "" !important;
  transform: rotate(45deg) !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework[open],
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework[open] {
  background: var(--sm-surface-2, #F7F7F7) !important;
  border: 1px solid var(--sm-hairline, #E2E2E2) !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework[open] summary,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework[open] summary {
  background: transparent !important;
  color: var(--sm-accent-ink, #CF2418) !important;
  border-radius: 0 !important;
  border: 0 !important;
  display: flex !important;
  width: 100% !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework > *:not(summary),
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework > *:not(summary),
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework .dl-prelims-framework-body,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework .dl-mains-framework-body {
  background: transparent !important;
  color: var(--sm-ink-2, #555555) !important;
  padding: 2px 16px 15px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework p,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework p,
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework li,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework li {
  color: var(--sm-ink-2, #555555) !important;
}
body.dl-modern-blog-test #dl-main .article-prose .dl-prelims-framework strong,
body.dl-modern-blog-test #dl-main .article-prose .dl-mains-framework strong {
  color: var(--sm-ink-strong, #1A1714) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

/* ===== Unified font stack (Google Sans -> Roboto fallback) sitewide on
   the Modern overlay. Per user 2026-05-29: match the reference CSS at
   /c/Users/goyal/Desktop/adsfads.png (Google Sans, Roboto, RobotoDraft,
   Helvetica, Arial, sans-serif) with antialiased smoothing. ===== */
body.dl-modern-blog-test,
body.dl-modern-blog-test #dl-main,
body.dl-modern-blog-test #dl-main * {
  font-family: "General Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}