/**
 * DigitallyLearn long-form blog typography & components.
 * Loaded only on single posts (dl-modern-loader.php).
 * Editorial palette: pure black + crimson + Plus Jakarta Sans / Inter.
 */

/* Editorial body typography (scoped to .entry-content on single posts) */
body.single-post .entry-content { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: #1a1a1a; }
body.single-post .entry-content p { font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; }
body.single-post .entry-content h2 { font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.25; margin: 44px 0 14px; letter-spacing: -0.005em; color: #0A0A0A; }
body.single-post .entry-content h3 { font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.3; margin: 28px 0 10px; color: #0A0A0A; }
body.single-post .entry-content ul,
body.single-post .entry-content ol { font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; padding-left: 24px; }
body.single-post .entry-content li { margin-bottom: 6px; }
body.single-post .entry-content strong { font-weight: 600; color: #0A0A0A; }
body.single-post .entry-content a { color: #E63946; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.single-post .entry-content a:hover { color: #5a8edd; }
body.single-post .entry-content blockquote { border-left: 3px solid #E63946; padding: 4px 18px; margin: 22px 0; font-style: italic; color: rgba(10,10,10,0.78); background: rgba(230, 57, 70, 0.04); }

/* Featured-image hero (canonical only - AMP Reader auto-injects its own).
   Renders at top of .entry-content via dl-featured-image.php filter (priority 10
   above byline at priority 8). Aspect-ratio reserves layout space → zero CLS. */
.dl-featured-image {
  margin: 0 0 24px;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fafaf8;
  border: 1px solid rgba(10,10,10,0.06);
}
.dl-featured-image img,
.dl-featured-image .dl-featured-image-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}
/* G8 h_overflow blocker fix (2026-05-21): the IMG carries HTML width="1200"
 * attribute baked in by wp_get_attachment_image(). With Astra/Smush plugin
 * stacking it occasionally won by specificity at 320px and 768px, producing
 * scrollWidth 1248 > viewport. Adding !important on max-width defeats any
 * cross-plugin override. Verified via audit_data/screenshots/soils-p4-g46r2
 * and ci-p7-g46r2. */
.dl-kb-blog .dl-featured-image img,
.dl-ca-entry .dl-featured-image img,
.single-post .wp-post-image,
.single .wp-post-image {
  max-width: 100% !important;
  height: auto !important;
}
/* Same blocker class on comment-form fieldset/textarea at narrow viewports:
 * the Astra parent's <fieldset class="comment-form-comment"> renders at 409px
 * with no width constraint, overflowing 320px viewports. Constrain.
 */
.comment-form-comment,
.comment-form-comment .ast-grid-common-col,
.comment-form-comment textarea,
#comment {
  max-width: 100% !important;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .dl-featured-image { border-radius: 0; margin-inline: -16px; margin-bottom: 18px; }
}

/* Eyebrow + deck (above content; rendered via post-meta filter) */
.dl-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #E63946; font-weight: 600; margin-bottom: 8px; }
/* .dl-deck color iterations 2026-05-17:
 *   rgba(10,10,10,0.72) - alpha-based, violated text-color discipline
 *   #4a443c (muted tier) - solid but too distinct from body
 *   #2a2520 (soft tier)  - current: closer to body, subtle hierarchy
 * Per feedback_brand_palette_editorial.md tier system. */
.dl-deck { font-size: 17px; line-height: 1.5; color: #2a2520; margin: 0 0 18px; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }

/* Figures (inline SVG illustrations) */
/* 2026-05-26: in-article figures now use the hybrid pattern (dark caption strip
   embedded inside the SVG itself; cream body for chart content). The rendered
   <figcaption> below the SVG duplicates the caption visually. Hide visually
   while keeping it in DOM for screen-reader + SEO + Layer B verification.
   Border + overflow on .dl-figure also removed since the dark strips inside
   the SVG provide their own framing. See
   feedback_figure_hybrid_pattern_light_body_dark_strips.md. */
.dl-figure { margin: 28px 0 8px; border: 0; background: transparent; }
.dl-figure svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.dl-figure figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Force canonical Inter stack on every SVG descendant regardless of inline
 * font-family="Inter, sans-serif" attribute baked into authored SVG markup
 * (covers <text>, <tspan>, <g>, and any other SVG element that carries the
 * presentation attribute). */
article.dl-kb-blog svg,
article.dl-kb-blog svg *,
article.dl-ca-entry svg,
article.dl-ca-entry svg *,
.dl-figure svg,
.dl-figure svg *,
.dl-hero-figure svg,
.dl-hero-figure svg * {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* Table of contents — canonical styles live in dl-components.css line 490.
 * This stub kept as a no-op marker; remove if grep ever shows nothing
 * relies on it. */
.dl-toc { /* see dl-components.css for active rules */ }
.dl-toc-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #E63946; font-weight: 600; margin-bottom: 10px; }
.dl-toc ol { margin: 0; padding-left: 22px; font-size: 14.5px; line-height: 1.7; }
.dl-toc a { color: #1a1a1a; text-decoration: none; }
.dl-toc a:hover { color: #E63946; text-decoration: underline; }

/* Callout */
/* Callout component (Component A - locked 2026-05-07).
   Override the design-system .dl-callout flex layout (which forced
   eyebrow + body into a horizontal 2-column row that broke any time the
   eyebrow text was longer than ~80px). The eyebrow now sits as a single
   row above the body, the body flows naturally beneath. Adapts to short
   eyebrow text, multi-line eyebrow text, and any body length. */
.dl-callout {
  display: block;            /* defeat dl-design-system.css flex */
  border: 1px solid rgba(10,10,10,0.1);
  background: #fafaf8;
  padding: 16px 20px;
  margin: 22px 0;
  border-radius: 4px;
}
.dl-callout-label {
  display: block;                       /* full-row eyebrow, never collapses */
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #E63946;
  margin-bottom: 8px;
  white-space: normal;
  line-height: 1.35;
}
.dl-callout-body { display: block; }
.dl-callout p { margin: 0 0 8px; }
.dl-callout p:last-child { margin-bottom: 0; }

/* PYQ trail (black band) */
.dl-pyq-trail { background: #0A0A0A; color: var(--dl-on-dark); padding: 20px 22px; border-radius: 4px; margin: 22px 0; }
.dl-pyq-trail-label { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #E63946; margin-bottom: 10px; }
body.dl-modern .dl-pyq-trail ul { padding-left: 18px; margin: 0; list-style: disc; color: rgba(246,241,232,0.85); }
body.dl-modern .dl-pyq-trail li { color: rgba(246,241,232,0.85); margin-bottom: 6px; }
body.dl-modern .dl-pyq-trail li strong,
body.dl-modern .dl-pyq-trail strong { color: #ffffff; background: transparent; }
body.dl-modern .dl-pyq-trail em { color: rgba(230, 57, 70, 1); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; }

/* Glossary box */
.dl-glossary { background: #fafaf8; border: 1px solid rgba(10,10,10,0.1); padding: 16px 20px; border-radius: 4px; margin: 22px 0; }
.dl-glossary-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #E63946; font-weight: 600; margin-bottom: 10px; }
.dl-glossary dt { font-weight: 600; color: #0A0A0A; margin-top: 8px; }
.dl-glossary dd { margin: 2px 0 0; color: rgba(10,10,10,0.78); font-size: 14.5px; line-height: 1.55; }
.dl-glossary dl { margin: 0; }

/* Series navigation - flex layout so PREV-only or NEXT-only doesn't render
   an empty grid cell. Box styles apply ONLY to the <a> element; child
   spans get text styling only (the `a *` universal selector previously
   propagated border + min-height to every descendant, creating nested
   empty cards). Color override beats Astra parent's `a { color: #E63946 }`.
   Locked 2026-05-11. */
.dl-series-nav { display: flex; gap: 14px; margin: 36px 0 12px; flex-wrap: wrap; }
html body .dl-series-nav > a,
html body .dl-series-nav > a:link,
html body .dl-series-nav > a:visited,
html body .dl-series-nav > a:active,
html body .dl-series-nav > a:focus,
html body .dl-series-nav > span.dl-disabled {
    flex: 1 1 280px;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 44px; padding: 18px 20px;
    /* box-shadow inset = bulletproof 4-side card outline that can't be
       killed by any `border-bottom: 0` rule (Astra's dynamic CSS has one).
       border is intentionally 0 here. */
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(26,23,20,0.32);
    border-radius: 4px;
    text-decoration: none;
    color: #1a1714;
    background: transparent;
    transition: box-shadow 150ms ease, background 150ms ease, transform 150ms ease;
    box-sizing: border-box;
}
html body .dl-series-nav > a:hover {
    box-shadow: inset 0 0 0 1px #E63946;
    background: rgba(246,241,232,0.6);
    transform: translateY(-1px);
}
html body .dl-series-nav > a > span {
    text-decoration: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    flex: 0 0 auto;
    min-height: 0;
    display: block;
    color: #1a1714;
}
html body .dl-series-nav .dl-series-nav-eyebrow {
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a443c; font-weight: 700;
    margin-bottom: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
html body .dl-series-nav .dl-series-nav-title {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 16px; line-height: 1.32;
    color: #1a1714; font-weight: 600;
}
html body .dl-series-nav .dl-disabled { opacity: 0.45; cursor: not-allowed; }
html body .dl-series-nav .next, html body .dl-series-nav-next { text-align: left; }

/* =====================================================================
   ASTRA `a { border-bottom: 0 }` ANTIDOTE - site-wide.
   Astra's dynamic CSS sets `a { border-bottom: 0 }` in the
   inline <head> style block. This strips the bottom edge of every
   anchor-based card sitewide. For components NOT migrated to
   `box-shadow: inset` (which is the cleanest fix; see series-nav,
   share-btn, related-item), restore width + style here. Each component's
   border-bottom-color is already set via its `border: 1px solid <color>`
   shorthand and survives Astra's strip - only width + style are killed.
   Scoped to known anchor-card classes so inline body links aren't affected.
   Locked 2026-05-11. */
html body a.dl-kb-widget-item,
html body a.dl-kb-practice-btn,
html body a.dl-hub-btn,
html body a.dl-hub-btn--primary,
html body a.dl-hub-btn--ghost,
html body a.dl-hub-btn--sm,
html body a.dl-hub-subarea-card,
html body a.dl-hub-recent-card,
html body a.dl-hub-featured-link,
html body a.dl-hub-crosssell-card,
html body a.dl-hub-sibling-pill,
html body a.dl-hub-pill,
html body a.dl-context-badge,
html body a.dl-footer-link,
html body a.dl-drawer-row,
html body .dl-context-badge a {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

/* TOC item links explicitly stripped of underline / border-bottom.
   The TOC is a navigation aid; numbered chips already mark each row.
   Locked 2026-05-12 per user feedback (over-underlined TOC). */
html body a.dl-toc-item-link,
html body a.dl-toc-item-link:hover,
html body a.dl-toc-item-link:visited,
html body .dl-toc a,
html body .dl-toc a:hover,
html body .dl-toc a:visited,
html body .dl-toc-list a {
    text-decoration: none !important;
    border-bottom: 0 !important;
}
html body a.dl-toc-item-link:hover { color: var(--dl-terracotta, #E63946); }

/* Editorial link discipline - kill Astra's inline-head dynamic CSS
   `.entry-content a { text-decoration: underline }`. Higher specificity
   + to win. NOTE: .dl-series-nav a is intentionally NOT
   in this rule - series-nav cards need their `border-bottom` (it's the
   box's bottom edge, not an underline). Series-nav handles its own
   text-decoration: none in its scoped block above. */
html body.single .entry-content a,
html body.single .entry-content a:visited,
html body.single .entry-content a:hover,
html body.single .entry-content a *,
html body.ast-single-post .entry-content a,
html body.ast-single-post .entry-content a:visited,
html body.ast-single-post .entry-content a:hover,
html body.ast-single-post .entry-content a *,
html body .dl-related-in a,
html body .dl-related-in a * {
    text-decoration: none;
    border-bottom: 0;
}
/* Body-prose hover only (re-add subtle terracotta underline for paragraph
   + list links on hover; intentional affordance, not rest-state). */
html body.single .entry-content > p > a:hover,
html body.single .entry-content > ul > li > a:hover,
html body.single .entry-content > ol > li > a:hover,
html body.ast-single-post .entry-content > p > a:hover,
html body.ast-single-post .entry-content > ul > li > a:hover,
html body.ast-single-post .entry-content > ol > li > a:hover {
    text-decoration: underline;
    text-decoration-color: #E63946;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Post-navigation width (Round-2 fix 2026-05-07): Astra renders
   nav.post-navigation full-bleed (1920 px on a 1920 vw), which produced a
   visual disconnect against the 720 px-wide centered comments-area below.
   Constrain post-nav to the same 720 px reading column so the article →
   nav → comments stack reads as one continuous column. */
body.dl-modern nav.post-navigation,
body.dl-modern .post-navigation {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dl-space-4);
  padding-right: var(--dl-space-4);
  box-sizing: border-box;
}
@media (max-width: 600px) {
  body.dl-modern nav.post-navigation,
  body.dl-modern .post-navigation {
    padding-left: var(--dl-space-3);
    padding-right: var(--dl-space-3);
  }
}

/* Comments area width (Component D - locked 2026-05-07).
   Astra renders #comments / .comments-area full-bleed below .entry-content,
   producing a 1184 px form against a 714 px article reading column at
   1280 vw - the form bled outside the article column. Constrain comments
   to match the reading column with intrinsic centering. Adapts to all
   viewport widths via max-width + auto margin. */
body.dl-modern .comments-area,
body.dl-modern #comments {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dl-space-4);
  padding-right: var(--dl-space-4);
  box-sizing: border-box;
}
body.dl-modern .comment-form,
body.dl-modern .comment-respond {
  max-width: 100%;
}
@media (max-width: 600px) {
  body.dl-modern .comments-area,
  body.dl-modern #comments {
    padding-left: var(--dl-space-3);
    padding-right: var(--dl-space-3);
  }
}

/* WordPress comment form - Astra renders #reply-title in a faint near-
   invisible color against cream. Force editorial typography + ink. */
body.dl-modern #reply-title,
body.dl-modern .comments-title,
body.dl-modern .comment-reply-title {
  font-family: var(--dl-font-display);
  font-size: var(--dl-text-2xl);
  font-weight: 600;
  line-height: var(--dl-lh-snug);
  margin: 32px 0 16px;
  color: var(--dl-ink);
}
body.dl-modern .comment-form .comment-notes,
body.dl-modern .comment-form .logged-in-as,
body.dl-modern .comment-form label {
  color: var(--dl-ink-soft);
  font-size: var(--dl-text-sm);
}
body.dl-modern .comment-form a { color: var(--dl-accent); }
body.dl-modern .comment-form textarea,
body.dl-modern .comment-form input[type="text"],
body.dl-modern .comment-form input[type="email"],
body.dl-modern .comment-form input[type="url"] {
  border: 1px solid var(--dl-line-strong);
  background: var(--dl-paper);
  color: var(--dl-ink);
  font-family: var(--dl-font-body);
  border-radius: var(--dl-radius-md);
  padding: 10px 14px;
}
body.dl-modern .comment-form input[type="submit"],
body.dl-modern .submit {
  background: var(--dl-accent);
  color: #ffffff;
  border: 1px solid var(--dl-accent);
  padding: 12px 22px;
  min-height: 44px;
  border-radius: var(--dl-radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dl-duration-fast) var(--dl-ease);
}
body.dl-modern .comment-form input[type="submit"]:hover,
body.dl-modern .submit:hover {
  background: var(--dl-accent-hover);
  border-color: var(--dl-accent-hover);
}

/* MCQ practice block */
.dl-mcq-list { margin: 24px 0; }
/* 2026-05-26: inner border + crimson left stripe removed sitewide per user
   direction ("inner border still not removed"). Keeps the cream background
   and padding for rhythm but drops all chrome so the MCQ reads as flush
   on its parent .dl-mcq-section card. */
.dl-mcq { border: 0; background: #fafaf8; padding: 18px 22px; margin: 0 0 16px; border-radius: 8px; }
.dl-mcq > p:first-child { margin-top: 0; font-size: 16.5px; }
.dl-mcq ol { margin: 6px 0 14px; padding-left: 26px; }
.dl-mcq ol[type="a"] li,
.dl-mcq ol[type="A"] li,
.dl-mcq ol li { font-size: 15.5px; line-height: 1.6; margin-bottom: 4px; color: #1a1a1a; }
/* UPSC convention: stem question + numbered statements + closing prompt as
   discrete blocks. .dl-mcq-statements styles the statement list distinctly
   from the option list (decimal numbering, slightly tighter spacing). */
.dl-mcq .dl-mcq-statements { margin: 10px 0 12px; padding-left: 1.8em; }
.dl-mcq .dl-mcq-statements > li { font-size: 15.5px; line-height: 1.6; margin-bottom: 8px; color: #1a1a1a; padding-left: 4px; }
/* Statement-I / Statement-II variant - labels are inline, suppress decimal. */
.dl-mcq .dl-mcq-statements--labeled { list-style: none; padding-left: 0; }
.dl-mcq .dl-mcq-statements--labeled > li { padding-left: 0; }
.dl-mcq .dl-mcq-statements--labeled > li strong { color: #0A0A0A; }
.dl-mcq-answer { margin-top: 10px; }
.dl-mcq-answer > summary { cursor: pointer; list-style: none; padding: 8px 14px; background: #0A0A0A; color: #fff; border-radius: 3px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; transition: background 150ms ease; }
.dl-mcq-answer > summary::-webkit-details-marker { display: none; }
.dl-mcq-answer > summary::marker { content: ''; }
.dl-mcq-answer > summary::before { content: '+'; font-weight: 700; font-size: 16px; line-height: 1; color: #E63946; }
.dl-mcq-answer[open] > summary::before { content: '−'; }
.dl-mcq-answer > summary:hover { background: #1a1a1a; }
/* Brand-palette migration 2026-05-25: legacy white #ffffff + vermilion #E63946
   replaced with green-tint surface + brand-ink so the answer body matches the
   rest of the PYQ + MCQ chrome. Border + radius set to 0 because the parent
   .dl-mcq-answer card now carries the visible border + radius. */
.dl-mcq-answer-body { margin-top: 12px; padding: 14px 16px; background: transparent; border: 0; border-radius: 0; }
.dl-mcq-answer-body p { font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; color: #1A1A1A; }
.dl-mcq-answer-body p:last-child { margin-bottom: 0; }
.dl-mcq-answer-body strong { color: #1A1A1A; }
.dl-mcq-answer-body em { color: #E8352B; font-style: italic; }

/* MCQ provenance tags (Component B - locked 2026-05-07).
   Every MCQ block declares whether the question is a corpus-verified PYQ
   or a custom-authored "Only for Practice" question. Two tag variants:
     .dl-mcq-tag--pyq      - terracotta outline pill with red dot
     .dl-mcq-tag--practice - tan outline pill, "ONLY FOR PRACTICE" caps
   Authoring shape:
     <p><span class="dl-mcq-tag dl-mcq-tag--practice">Only for practice</span> Q1. ...</p>
   or (for PYQ):
     <p><span class="dl-mcq-tag dl-mcq-tag--pyq">UPSC Prelims 2024</span> Q1. ...</p> */
.dl-mcq-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.dl-mcq-tag--pyq {
  background: rgba(230, 57, 70, 0.07);
  color: #E63946;
  border: 1px solid rgba(230, 57, 70, 0.32);
}
.dl-mcq-tag--pyq::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #E63946;
  flex-shrink: 0;
}
.dl-mcq-tag--practice {
  background: rgba(212, 163, 115, 0.18);
  color: #6B4A26;
  border: 1px solid rgba(212, 163, 115, 0.55);
}

/* ---------------------------------------------------------------------------
   PYQ-Anchored Editorial Pattern (added 2026-05-07)
   --------------------------------------------------------------------------- */

/* Context badge: Subject · Sub-subject · Part X of Y
   Sits flush above TOC. Cream/paper card with terracotta-soft tint. */
.dl-context-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 16px;
  margin: 8px 0 16px;
  background: rgba(230, 57, 70, 0.06);
  border-left: 3px solid #E63946;
  border-radius: 0 4px 4px 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #0A0A0A;
}
.dl-context-badge .dl-context-subject,
.dl-context-badge .dl-context-subsubject,
.dl-context-badge .dl-context-series {
  font-weight: 600;
}
.dl-context-badge .dl-context-subsubject { color: rgba(10,10,10,0.78); }
.dl-context-badge .dl-context-series { color: #E63946; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }
.dl-context-badge .dl-context-sep { color: rgba(10,10,10,0.35); font-weight: 400; }

/* Promise block: PYQ promise + MCQ promise.
   Sits between context badge and TOC.
   Brand palette migration 2026-05-25: legacy cream #f5efe2 + vermilion #E63946
   replaced with brand-green family on light surface, per
   feedback_brand_palette_featured_and_inline_guidelines.md (2026-05-24 lock).
   Cream / vermilion / tan / navy were retired sitewide for new content. */
.dl-promise-block {
  background: #F3FAF6;
  border: 1px solid #E7D8C6;
  border-left: 4px solid #E8352B;
  border-radius: 8px;
  padding: 22px 28px;
  margin: 20px 0 28px;
  /* 3D elevation, brand-green-tinted shadow per user 2026-05-25.
     Two-layer: tight bottom-edge + diffuse halo. Same scale as MCQ block
     so PYQ + MCQ read as paired floating cards in the article flow. */
  box-shadow:
    0 1px 3px rgba(15, 69, 48, 0.10),
    0 10px 28px rgba(15, 69, 48, 0.12);
}
.dl-promise-block .dl-promise-row { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #1A1A1A; }
.dl-promise-block .dl-promise-row:last-child { margin-bottom: 0; }
.dl-promise-block .dl-promise-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E8352B;
  font-weight: 700;
  margin-right: 8px;
}
.dl-promise-block .dl-promise-row strong { color: #1A1A1A; font-weight: 600; }

/* PYQ Promise list (Component C - locked 2026-05-07).
   When the row contains a list of PYQs (preferred authoring shape over prose),
   render one PYQ per line with a soft accent dot. Adapts to 2 to 12+ items. */
.dl-promise-block .dl-promise-row ol,
.dl-promise-block .dl-promise-row ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.dl-promise-block .dl-promise-row li {
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.55;
  color: #1A1A1A;
}
.dl-promise-block .dl-promise-row li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8352B;
}
.dl-promise-block .dl-promise-row li strong { color: #1A1A1A; font-weight: 600; }
.dl-promise-block .dl-promise-row li em { font-style: italic; color: #E8352B; }

/* PYQ list item spacing (2026-05-17 evening): each numbered PYQ in the
 * promise list reads as a distinct unit. Bumped vertical gap between
 * questions from ~10px default to 32px so the question + its collapsible
 * + the next question don't run together visually. */
body.dl-modern .dl-promise-block ol.dl-promise-list > li {
  margin-top: 0;
  margin-bottom: 32px;
}
body.dl-modern .dl-promise-block ol.dl-promise-list > li:last-child {
  margin-bottom: 0;
}

/* PYQ meta tag (citation + word-limit). Replaces bold-white treatment in
   .dl-pyq-trail and is the single canonical class for citation metadata. */
.dl-pyq-meta {
  color: #E63946;
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: normal;
}
.dl-pyq-trail .dl-pyq-meta { color: rgba(230, 57, 70, 1); }
/* Override the legacy bold-white rule when authors switch to the new class */
.dl-pyq-trail li .dl-pyq-meta,
body.dl-modern .dl-pyq-trail li .dl-pyq-meta { color: #E63946; font-weight: 600; }

/* Inline callout pill at section starts: "Builds your answer for X"
   (Component A - locked 2026-05-07). Re-engineered for full-width adaptive
   layout: eyebrow + meta-tag + body now stack VERTICALLY when the row
   cannot fit on a single line, instead of squeezing each child into a
   narrow column with broken word-wrapping. Switch from inline-flex to
   block flex with wrap; arrow is a ::before glyph in the first line. */
.dl-pyq-callout-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 16px;
  margin: 4px 0 16px;
  background: rgba(230, 57, 70, 0.07);
  border: 1px solid rgba(230, 57, 70, 0.18);
  border-radius: 12px;            /* rounded rect, not pill - accommodates multi-line wrap */
  font-size: 13px;
  line-height: 1.5;
  color: #0A0A0A;
  max-width: 100%;
}
.dl-pyq-callout-pill::before {
  content: '→';
  flex-shrink: 0;
  align-self: baseline;
  color: #E63946;
  font-weight: 700;
}
/* Eyebrow + tag + body inside the pill share a wrap-friendly inline flow.
   No fixed widths, no flex-shrink: 0 except the arrow. */
.dl-pyq-callout-pill > * { min-width: 0; }
@media (max-width: 600px) {
  .dl-pyq-callout-pill { padding: 10px 14px; border-radius: 10px; }
}
.dl-pyq-callout-pill a {
  color: #E63946;
  text-decoration: none;
  font-weight: 600;
  /* WCAG 2.5.5 touch-target floor (component-level, not per-page). */
  display: inline-block;
  min-height: 44px;
  padding-block: 11px;
}
.dl-pyq-callout-pill a:hover { text-decoration: underline; }

/* Question-Answer Bridge: model-answer skeleton box.
   Placed after body sections, before series cross-links. */
.dl-qa-bridge {
  background: #fafaf8;
  border: 1px solid rgba(10,10,10,0.1);
  border-left: 3px solid #E63946;
  border-radius: 0 4px 4px 0;
  padding: 22px 26px;
  margin: 36px 0 24px;
}
.dl-qa-bridge-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E63946;
  font-weight: 700;
  margin-bottom: 6px;
}
.dl-qa-bridge h3 {
  font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #0A0A0A;
}
.dl-qa-bridge .dl-qa-pyq-tag {
  font-size: 12.5px;
  font-style: italic;
  font-weight: 600;
  color: #E63946;
  margin-bottom: 14px;
  display: block;
}
.dl-qa-bridge ol { margin: 12px 0 0; padding-left: 22px; }
.dl-qa-bridge ol li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.6; }
.dl-qa-bridge ol li strong { color: #0A0A0A; }

/* Mobile */
@media (max-width: 720px) {
  body.single-post .entry-content h2 { font-size: 22px; }
  body.single-post .entry-content h3 { font-size: 17px; }
  body.single-post .entry-content p,
  body.single-post .entry-content ul,
  body.single-post .entry-content ol { font-size: 15.5px; }
  .dl-series-nav { grid-template-columns: 1fr; }
  .dl-context-badge { font-size: 11.5px; padding: 8px 12px; gap: 6px 8px; }
  .dl-promise-block { padding: 14px 16px; }
  .dl-promise-block .dl-promise-row { font-size: 14px; }
  .dl-qa-bridge { padding: 18px 18px; }
  .dl-pyq-callout-pill { font-size: 12.5px; }
}

/* ========================================================================
   PYQ Practice - detailed model answers (added 2026-05-07)
   Renders at the end of the article, before the Series progress callout.
   Uses native <details>/<summary> so each answer is collapsible.
   ======================================================================== */
body.dl-modern .dl-pyq-practice {
  margin: 56px 0 32px;
  padding: 32px;
  background: var(--dl-paper-warm);
  border: 1px solid var(--dl-line);
  border-radius: 12px;
}
body.dl-modern .dl-pyq-practice-head h2 {
  margin: 0 0 8px;
  font-family: var(--dl-font-display, var(--dl-font-body));
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.01em;
  color: var(--dl-ink);
}
body.dl-modern .dl-pyq-practice-lede {
  color: var(--dl-ink-mute);
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.6;
}
body.dl-modern .dl-pyq-answer {
  border-bottom: 1px solid var(--dl-line);
  padding: 18px 0;
}
body.dl-modern .dl-pyq-answer:first-of-type { padding-top: 0; }
body.dl-modern .dl-pyq-answer:last-of-type { border-bottom: 0; padding-bottom: 0; }
body.dl-modern .dl-pyq-answer > summary {
  cursor: pointer;
  list-style: none;
  display: block;
}
body.dl-modern .dl-pyq-answer > summary::-webkit-details-marker { display: none; }
body.dl-modern .dl-pyq-answer > summary::marker { content: ''; }

/* Visible "Click for model answer" button cue inside each summary */
body.dl-modern .dl-pyq-answer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 18px 9px 16px;
  background: var(--dl-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  transition: background 160ms ease, transform 100ms ease;
  user-select: none;
}
body.dl-modern .dl-pyq-answer-toggle::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
  margin-left: 2px;
  transition: transform 200ms ease;
}
body.dl-modern .dl-pyq-answer > summary:hover .dl-pyq-answer-toggle {
  background: var(--dl-accent-hover, #C72D3A);
}
body.dl-modern .dl-pyq-answer > summary:hover .dl-pyq-answer-toggle {
  transform: translateY(-1px);
}
/* Toggle text: show "Click for model answer" closed, "Hide model answer" open */
body.dl-modern .dl-pyq-answer .dl-pyq-answer-toggle-hide { display: none; }
body.dl-modern .dl-pyq-answer[open] .dl-pyq-answer-toggle-show { display: none; }
body.dl-modern .dl-pyq-answer[open] .dl-pyq-answer-toggle-hide { display: inline; }
body.dl-modern .dl-pyq-answer[open] .dl-pyq-answer-toggle::after {
  transform: rotate(-135deg);
}
body.dl-modern .dl-pyq-answer-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.dl-modern .dl-pyq-answer-summary .dl-pyq-meta {
  color: var(--dl-accent);
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
}
body.dl-modern .dl-pyq-answer-q {
  margin: 0;
  font-family: var(--dl-font-display, var(--dl-font-body));
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.4;
  color: var(--dl-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
body.dl-modern .dl-pyq-fit-accept,
body.dl-modern .dl-pyq-fit-partial {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-style: normal;
  margin-left: 4px;
}
body.dl-modern .dl-pyq-fit-accept {
  background: rgba(230, 57, 70, 0.10);
  color: var(--dl-accent);
}
body.dl-modern .dl-pyq-fit-partial {
  background: rgba(212, 163, 115, 0.18);
  color: #8a5a1f;
}
body.dl-modern .dl-pyq-answer-body {
  margin-top: 16px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--dl-accent);
}
body.dl-modern .dl-pyq-answer-body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--dl-ink);
}
body.dl-modern .dl-pyq-answer-body ol,
body.dl-modern .dl-pyq-answer-body ul {
  margin: 8px 0 14px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
}
body.dl-modern .dl-pyq-answer-body li { margin-bottom: 6px; color: var(--dl-ink); }
body.dl-modern .dl-pyq-answer-disclosure {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(212, 163, 115, 0.10);
  border-left: 3px solid #d4a373;
  border-radius: 0 4px 4px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dl-ink-mute);
}
body.dl-modern .dl-pyq-answer-disclosure strong { color: #8a5a1f; }

@media (max-width: 768px) {
  body.dl-modern .dl-pyq-practice { padding: 22px 18px; margin: 36px 0 24px; }
  body.dl-modern .dl-pyq-answer-body { padding-left: 14px; }
  body.dl-modern .dl-pyq-answer-body p,
  body.dl-modern .dl-pyq-answer-body li { font-size: 14.5px; }
}

/* ============================================================
   A11y touch-target sweep (WCAG 2.5.5).
   Astra parent rules win same-specificity battles, so use
   body.dl-modern + on each interactive nav surface
   that the responsive audit flags. Component-level: applies to
   every page using these components, not per-instance.
   ============================================================ */
body.dl-modern .dl-toc a,
body.dl-modern .dl-toc-list a,
body.dl-modern .entry-content .dl-toc a,
body.dl-modern .entry-content .dl-toc-list a,
body.dl-modern .ast-article-single .dl-toc a,
body.dl-modern .ast-article-single .dl-toc-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
    line-height: 1.4;
}
body.dl-modern .dl-breadcrumb a,
body.dl-modern .dl-breadcrumb [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-block: 4px;
    padding-inline: 4px;
}
body.dl-modern .dl-series-nav a,
body.dl-modern .dl-series-nav span.dl-disabled {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    padding: 16px 18px;
}
/* Astra's auto-rendered post-navigation widget (Prev/Next post links).
   Defaults give a 17 px-tall <a> on mobile; bump to 44 px tap target. */
body.dl-modern nav.post-navigation .nav-previous a,
body.dl-modern nav.post-navigation .nav-next a,
body.dl-modern .ast-article-single nav.post-navigation a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
}

/* Inline anchor inside the MCQ-promise row - keep it on the prose line but
   give it a 44 px tappable region so the audit's tap-target detector clears
   without breaking line layout. */
body.dl-modern .dl-promise-row a,
body.dl-modern .dl-promise-block a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    vertical-align: middle;
}

/* WordPress core skip-link (.skip-link.screen-reader-text) is 1×1 by
   default - invisible to sighted users but the responsive audit's tap-
   target detector flags it. Bump to 44×44 while keeping the visual hide
   via the inherited clip rule from .screen-reader-text; on focus, WP/Astra
   already reveals it with proper styling. */
body.dl-modern a.skip-link.screen-reader-text {
    width: 44px;
    height: 44px;
}

/* ============================================================================
   SOP rules A-H (locked 2026-05-14 after Cyclones Part 2 review)
   Source: memory/feedback_cluster_authoring_sop.md
   ============================================================================ */

/* Responsive table wrap. Tables wider than the article body get a
   horizontal scroll container so mobile readers can swipe instead of
   the rightmost column being cut off. Locked 2026-05-16 after ENSO
   Part 1 mobile audit. */
body.dl-modern .dl-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
    /* Subtle visual cue that the table scrolls: gradient fades on edges */
    background:
        linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat,
        linear-gradient(to left, #ffffff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat,
        linear-gradient(to right, rgba(26,23,20,0.18), rgba(26,23,20,0)) left center / 14px 100% no-repeat,
        linear-gradient(to left, rgba(26,23,20,0.18), rgba(26,23,20,0)) right center / 14px 100% no-repeat,
        #ffffff;
    background-attachment: local, local, scroll, scroll, local;
    border-radius: 4px;
}
body.dl-modern .dl-table-wrap:focus-visible {
    outline: 2px solid var(--dl-accent);
    outline-offset: 2px;
}
body.dl-modern .dl-table-wrap .dl-comparison-table {
    margin: 0;   /* container provides margin */
    min-width: 560px;  /* prevent over-collapse on tiny screens */
}

/* Rule E: Table typography matches body */
body.dl-modern .dl-comparison-table {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 0.95em;
    line-height: 1.55;
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    background: #ffffff;
}
body.dl-modern .dl-comparison-table caption {
    font-size: 0.9em;
    font-style: italic;
    color: #4a443c;
    text-align: left;
    padding: 8px 0;
    caption-side: top;
}
body.dl-modern .dl-comparison-table thead th {
    font-weight: 700;
    font-size: 0.9em;
    text-align: left;
    padding: 10px 14px;
    background: #1a1714;
    color: #f6f1e8;
    border-bottom: 2px solid #1a1714;
}
body.dl-modern .dl-comparison-table tbody td {
    font-weight: 400;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(74,68,60,0.18);
    vertical-align: top;
}
body.dl-modern .dl-comparison-table tbody tr:hover { background: rgba(230, 57, 70, 0.06); }

/* Rule B: Bulleted current-relevance callout */
body.dl-modern .dl-callout-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.dl-modern .dl-callout-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    line-height: 1.55;
}
body.dl-modern .dl-callout-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #E63946;
}

/* Rule H: Mains answer framework collapsible (alpha 0.08 -> 0.16, Variant A 2026-05-16) */
body.dl-modern .dl-mains-framework {
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: rgba(230, 57, 70, 0.16);
    border-left: 3px solid #E63946;
    border-radius: 4px;
}
body.dl-modern .dl-mains-framework summary {
    cursor: pointer;
    font-weight: 600;
    color: #1a1714;
    padding: 4px 0;
    list-style: none;
}
body.dl-modern .dl-mains-framework summary::-webkit-details-marker { display: none; }
body.dl-modern .dl-mains-framework summary::before {
    content: "▶  ";
    color: #E63946;
    font-size: 0.8em;
    margin-right: 4px;
}
body.dl-modern .dl-mains-framework[open] summary::before {
    content: "▼  ";
}
body.dl-modern .dl-mains-framework-meta {
    font-size: 0.9em;
    color: #4a443c;
    margin: 8px 0;
}
body.dl-modern .dl-mains-framework-body p { margin: 8px 0; }
body.dl-modern .dl-mains-framework-themes {
    margin: 8px 0 8px 20px;
    padding: 0;
}
body.dl-modern .dl-mains-framework-themes li { padding: 4px 0; }

/* Rule I: Prelims answer framework collapsible (alpha 0.18 -> 0.32, Variant A 2026-05-16) */
body.dl-modern .dl-prelims-framework {
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: rgba(212,163,115,0.32);
    border-left: 3px solid #d4a373;
    border-radius: 4px;
}
body.dl-modern .dl-prelims-framework summary {
    cursor: pointer;
    font-weight: 600;
    color: #1a1714;
    padding: 4px 0;
    list-style: none;
}
body.dl-modern .dl-prelims-framework summary::-webkit-details-marker { display: none; }
body.dl-modern .dl-prelims-framework summary::before {
    content: "▶  ";
    color: #d4a373;
    font-size: 0.8em;
    margin-right: 4px;
}
body.dl-modern .dl-prelims-framework[open] summary::before {
    content: "▼  ";
}
body.dl-modern .dl-prelims-framework-meta {
    font-size: 0.9em;
    color: #4a443c;
    margin: 8px 0;
}
body.dl-modern .dl-prelims-framework-body p { margin: 8px 0; }
body.dl-modern .dl-prelims-framework-facts {
    margin: 8px 0 8px 20px;
    padding: 0;
}
body.dl-modern .dl-prelims-framework-facts li { padding: 4px 0; }

/* Rule J: multi-statement PYQ stem rendered as <ol> */
body.dl-modern .dl-pyq-statements {
    margin: 8px 0 8px 22px;
    padding: 0;
    list-style: decimal;
}
body.dl-modern .dl-pyq-statements li {
    padding: 3px 0;
    line-height: 1.55;
}

/* Rule O: Prelims PYQ options reproduced as ordered list (a/b/c/d) */
body.dl-modern .dl-pyq-options {
    margin: 10px 0 8px 22px;
    padding: 0;
    list-style: lower-alpha;
}
body.dl-modern .dl-pyq-options li {
    padding: 4px 0;
    line-height: 1.55;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Rule C: Series internal navigation (new markup shape; supersedes line 113+) */
body.dl-modern nav.dl-series-nav {
    margin: 36px 0 24px;
    padding: 16px 20px;
    background: #f6f1e8;
    border: 1px solid rgba(26,23,20,0.15);
    border-radius: 6px;
    display: block;
    flex-wrap: initial;
    gap: 0;
}
body.dl-modern .dl-series-nav-heading {
    margin: 0 0 12px;
    font-weight: 700;
    color: #1a1714;
    font-size: 1.05em;
}
body.dl-modern .dl-series-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
body.dl-modern .dl-series-nav-item {
    flex: 1 1 280px;
    margin: 0;
    padding: 0;
}
body.dl-modern .dl-series-nav-item a {
    display: block;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid rgba(26,23,20,0.2);
    border-radius: 4px;
    text-decoration: none;
    color: #1a1714;
    transition: all 0.2s ease;
}
body.dl-modern .dl-series-nav-item a:hover {
    border-color: #E63946;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15);
}
/* Planned (not-yet-published) sibling cards in pre-commit cluster model.
 * Locked 2026-05-17 evening. The card shows the locked title + slug-equivalent
 * info so readers see the spine, but it is not clickable (no <a> wrapper).
 * Visually muted to distinguish from live cards. When the part is published,
 * the manifest's status flips from 'planned' to 'live' and the next render
 * produces an <a> wrapper automatically. */
body.dl-modern .dl-series-nav-item--planned .dl-series-nav-anchor {
    display: block;
    padding: 12px 16px;
    background: rgba(26, 23, 20, 0.04);
    border: 1px dashed rgba(26, 23, 20, 0.18);
    border-radius: 4px;
    color: rgba(26, 23, 20, 0.62);
    cursor: not-allowed;
}
body.dl-modern .dl-series-nav-item--planned .dl-series-nav-label {
    color: rgba(26, 23, 20, 0.45);
    font-style: italic;
}
body.dl-modern .dl-series-nav-item--planned .dl-series-nav-title {
    color: rgba(26, 23, 20, 0.65);
}
body.dl-modern .dl-series-nav-label {
    display: block;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #E63946;
    font-weight: 700;
    margin-bottom: 4px;
}
body.dl-modern .dl-series-nav-title {
    display: block;
    font-size: 1.0em;
    font-weight: 600;
    color: #1a1714;
    line-height: 1.4;
}
/* Series-nav additions locked 2026-05-22: Part X of Y indicator,
   inline prev/next link pair before the grid, neighbour highlight on the
   current article's prev/next sibling cards inside the grid. */
body.dl-modern .dl-series-nav-position {
    margin: -6px 0 14px;
    color: rgba(26,23,20,0.65);
    font-size: 0.85em;
    font-weight: 500;
    letter-spacing: 0.02em;
}
body.dl-modern .dl-series-prev-next {
    display: flex;
    gap: 12px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}
body.dl-modern .dl-series-prev-next-link {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid rgba(26,23,20,0.18);
    border-left: 4px solid #E63946;
    border-radius: 4px;
    text-decoration: none;
    color: #1a1714;
    transition: all 0.2s ease;
}
body.dl-modern .dl-series-prev-next-link--next {
    border-left: 1px solid rgba(26,23,20,0.18);
    border-right: 4px solid #E63946;
    text-align: right;
}
body.dl-modern .dl-series-prev-next-link:hover {
    box-shadow: 0 0 0 2px rgba(230,57,70,0.18);
}
body.dl-modern .dl-series-prev-next-direction {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #E63946;
    font-weight: 700;
    margin-bottom: 4px;
}
body.dl-modern .dl-series-prev-next-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #1a1714;
    line-height: 1.32;
}
/* Neighbour highlight inside the grid (current article's prev + next) */
body.dl-modern .dl-series-nav-item--prev a,
body.dl-modern .dl-series-nav-item--next a {
    border-color: rgba(230,57,70,0.55);
    background: rgba(230,57,70,0.04);
}


/* ---- DL inline-figure brand stamp RETIRED 2026-05-26 evening ----
 * Pseudo-element `.dl-figure::after` previously rendered a vermilion DL
 * brand stamp at bottom-right of every inline figure. User removed the
 * brand mark inside visuals per feedback_no_sources_line_inside_visual.md
 * (revised 2026-05-26): NO credit / brand / copyright text is allowed
 * inside any in-article SVG / PNG. Article-level page footer is the
 * only place credit appears.
 * Selector kept (no rules) so any old override that re-enables ::after
 * needs to be intentional, not accidental. */

/* ---- Article column hard-stop (locked 2026-05-16 per user red-line audit) -
 * User flagged: body paragraphs respect the intended reading column (~728px)
 * but H2 titles and bulleted lists overflow past the right edge. Pattern:
 * <p> inherits a max-width from somewhere; headings/lists/tables don't.
 * Fix: constrain the article wrapper (.dl-kb-blog and .dl-ca-entry) to a
 * single 728px column. All children — p, h1-h6, ul, ol, li, table, figure,
 * blockquote, aside, section — naturally fit within. Single rule inherits
 * to every single-post on the site.
 *
 * 728px chosen to match the existing computed maxWidth of body <p>
 * (728.643px) so paragraphs sit exactly as before; what changes is that
 * headings + lists now share the same right boundary instead of stretching
 * wider.
 */
body.dl-modern.single-post .entry-content > article.dl-kb-blog,
body.dl-modern.single-post .entry-content > article.dl-ca-entry,
body.dl-modern .entry-content .dl-kb-blog,
body.dl-modern .entry-content .dl-ca-entry {
  max-width: 728px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
/* Defensive: make sure heading/list children explicitly cap to parent so
 * any Astra/parent rule with higher specificity doesn't escape the column. */
body.dl-modern .entry-content .dl-kb-blog h1,
body.dl-modern .entry-content .dl-kb-blog h2,
body.dl-modern .entry-content .dl-kb-blog h3,
body.dl-modern .entry-content .dl-kb-blog h4,
body.dl-modern .entry-content .dl-kb-blog ul,
body.dl-modern .entry-content .dl-kb-blog ol,
body.dl-modern .entry-content .dl-kb-blog blockquote,
body.dl-modern .entry-content .dl-kb-blog table,
body.dl-modern .entry-content .dl-kb-blog figure,
body.dl-modern .entry-content .dl-kb-blog aside,
body.dl-modern .entry-content .dl-ca-entry h1,
body.dl-modern .entry-content .dl-ca-entry h2,
body.dl-modern .entry-content .dl-ca-entry h3,
body.dl-modern .entry-content .dl-ca-entry h4,
body.dl-modern .entry-content .dl-ca-entry ul,
body.dl-modern .entry-content .dl-ca-entry ol,
body.dl-modern .entry-content .dl-ca-entry blockquote,
body.dl-modern .entry-content .dl-ca-entry table,
body.dl-modern .entry-content .dl-ca-entry figure,
body.dl-modern .entry-content .dl-ca-entry aside {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ---- Column hard-stop v2 (locked 2026-05-16, follow-up after v1 diagnostic) -
 * v1 set article max-width:728 but paragraphs INSIDE .dl-promise-block render
 * 44px narrower because that container has padding:0 22px. H2/H3 outside the
 * promise block stretch to article-full-width (728), producing the visible
 * misalignment the user flagged with the red line. Three targeted fixes:
 *   1. Promise-block: drop horizontal padding so its content aligns with the
 *      article's right edge (keep top/bottom for breathing room).
 *   2. Paragraphs: reset Astra's inherited max-width:728.643px so they fill
 *      100% of the article column instead of relying on inherited cascade.
 *   3. Lists: explicit max-width:100% + consistent padding-left for bullets.
 * Result: every block child of the article shares the same right edge.
 */
/* v2 promise-block padding-strip REMOVED 2026-05-17 — restored 22px 28px inner
 * padding on .dl-promise-block (line 446) so content is comfortably inset from
 * the now-2px border. */
body.dl-modern .entry-content .dl-kb-blog p,
body.dl-modern .entry-content .dl-ca-entry p {
  max-width: 100% !important;
}
body.dl-modern .entry-content .dl-kb-blog ul,
body.dl-modern .entry-content .dl-kb-blog ol,
body.dl-modern .entry-content .dl-ca-entry ul,
body.dl-modern .entry-content .dl-ca-entry ol {
  max-width: 100% !important;
  padding-left: 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Column hard-stop v4: interior container padding strip (2026-05-16) ----
 * v3 targeted .dl-*-framework-BODY but the horizontal padding actually lives
 * on the outer <details> wrappers (.dl-mains-framework, .dl-prelims-framework)
 * and on the inline boxes (.dl-callout, .dl-mcq, .dl-mcq-answer-body).
 * Empirical right-edge audit (2026-05-16):
 *   h2/h3/p (main column)               -> right=1003-1004 (target)
 *   p inside .dl-mains/prelims-framework -> right=989  (14px short)
 *   p inside .dl-callout                 -> right=983  (20px short)
 *   p inside .dl-mcq                     -> right=981  (22px short)
 *   p inside .dl-mcq-answer-body         -> right=964  (39px short, nested)
 * Strip horizontal padding so text inside these boxes aligns with the column
 * right edge. Keep a small left inset (12-14px) where a left-border needs
 * breathing room; zero right-padding everywhere.
 */
body.dl-modern .entry-content .dl-kb-blog .dl-callout,
body.dl-modern .entry-content .dl-ca-entry .dl-callout {
  padding-left: 14px !important;
  padding-right: 0 !important;
}
body.dl-modern .entry-content .dl-kb-blog .dl-mcq,
body.dl-modern .entry-content .dl-ca-entry .dl-mcq {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
body.dl-modern .entry-content .dl-kb-blog .dl-mcq-answer-body,
body.dl-modern .entry-content .dl-ca-entry .dl-mcq-answer-body {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
body.dl-modern .dl-mains-framework,
body.dl-modern .dl-prelims-framework {
  padding-left: 12px !important;
  padding-right: 0 !important;
}

/* ---- Style 3++ Rule HD5 (2026-05-17): suppress default <ul> bullet when
 * list items already carry parenthesised letter/roman markers like (a), (b),
 * (c) or (i), (ii), (iii). Otherwise the rendered <li> shows both the bullet
 * AND the parenthesised marker = double-marker, redundant.
 * Selector matches any <li> whose first <strong> child starts with `(letter)`
 * or `(roman)` pattern. Uses :has() (supported across modern browsers).
 */
body.dl-modern article.dl-kb-blog ul li:has(> strong:first-child),
body.dl-modern article.dl-ca-entry ul li:has(> strong:first-child) {
  /* placeholder; real targeting happens in the renderer adding a class */
}
body.dl-modern article.dl-kb-blog ul.dl-lettered-list,
body.dl-modern article.dl-ca-entry ul.dl-lettered-list {
  list-style: none !important;
  padding-left: 0 !important;
}
body.dl-modern article.dl-kb-blog ul.dl-lettered-list > li,
body.dl-modern article.dl-ca-entry ul.dl-lettered-list > li {
  position: relative;
  padding-left: 0;
  margin-bottom: 12px;
}

/* Framework outdent v5/v6 REMOVED 2026-05-17 — user prefers the strip back at
 * the LI content area (same width as the question stem text), matching its
 * pre-outdent size. */