/* ===============================================================
   SINGLE BLOG POST  ·  pages/blog-post.css
   ---------------------------------------------------------------
   Loaded only on single blog posts.
   Prefix: .bp

   Layout (per wireframe)
     Phone   < 768    one column. Left rail hidden, TOC inside article
     Tablet  768+     two columns: article + right sidebar (280px)
     Laptop  1200+    three columns: 250 | article | 300
     Large   1600+    270 | article | 320

   ALL CONTROLS ARE IN THE "CONTROL PANEL" BLOCK AT THE TOP.
   =============================================================== */

/* ===============================================================
   CONTROL PANEL  <- 90% of design changes can be made here
   =============================================================== */
body.lbg-blog-post,
.bp{
  --bp-left:250px;          /* left rail width */
  --bp-right:300px;         /* right sidebar width */
  --bp-gap:32px;            /* gap between columns */
  --bp-pad:24px;            /* top and bottom padding */

  --bp-card-bg:var(--white);
  --bp-card-border:var(--border-subtle);
  --bp-card-radius:var(--radius-lg);
  --bp-card-pad:18px;
  --bp-rule:1px solid var(--border-subtle);   /* divider line between columns */

  --bp-title:34px;          /* article title, desktop */
  --bp-body:17px;           /* article body text */
  --bp-line:1.7;            /* line height */
  --bp-measure:74ch;        /* max characters per line */

  --bp-h2:27px;
  --bp-h3:20px;
  --bp-block-radius:var(--radius-md);
}
@media (min-width:768px){  body.lbg-blog-post,.bp{--bp-title:36px;--bp-pad:32px;--bp-right:270px;--bp-gap:28px} }
@media (min-width:1024px){ body.lbg-blog-post,.bp{--bp-title:38px;--bp-right:300px;--bp-gap:32px} }
@media (min-width:1200px){ body.lbg-blog-post,.bp{--bp-title:42px;--bp-h2:31px;--bp-h3:22px;--bp-body:17.5px} }
@media (min-width:1600px){ body.lbg-blog-post,.bp{--bp-left:270px;--bp-right:320px;--bp-gap:40px;--bp-title:46px} }


/* ===============================================================
   1. GRID  +  SEPARATOR LINES ON BOTH SIDES
   ---------------------------------------------------------------
   IMPORTANT: how both lines stay the same length.

   .bp__left / .bp__right are full, stretched, NON-sticky columns
   carrying the borders. The grid row is as tall as the tallest
   column (the article), so both lines run from header to footer.
   .bp__rail is the inner sticky box that follows the scroll.
   (Sticky columns made the right line only as tall as its cards.)

   To change line thickness or colour: --bp-rule (CONTROL PANEL).
   =============================================================== */
.bp{
  display:grid;gap:var(--bp-gap);
  grid-template-columns:1fr;
  align-items:stretch;          /* <- this keeps both lines equal length */
}
.bp__left{display:none}
.bp__main{order:2;min-width:0;padding:var(--bp-pad) 0 8px}
.bp__right{order:3;min-width:0;padding:0 0 var(--bp-pad)}
.bp__rail{display:flex;flex-direction:column;min-height:0}
.bp__stack{display:flex;flex-direction:column;gap:16px}

@media (min-width:768px){
  /* Tablet: article + right sidebar, separator line on the right. */
  .bp{grid-template-columns:minmax(0,1fr) var(--bp-right)}
  .bp__right{
    padding:var(--bp-pad) 0 var(--bp-pad) 24px;
    border-left:var(--bp-rule);          /* <- RIGHT line, FULL height */
  }
  .bp__right .bp__rail{
    position:sticky;top:calc(var(--headH) + 16px);
    max-height:calc(100vh - var(--headH) - 32px);
    overflow-y:auto;overscroll-behavior:contain;
  }
}
@media (min-width:1200px){
  /* Laptop and PC: three columns */
  .bp{grid-template-columns:var(--bp-left) minmax(0,1fr) var(--bp-right)}
  .bp__left{
    display:block;order:1;
    padding:var(--bp-pad) 24px var(--bp-pad) 0;
    border-right:var(--bp-rule);         /* <- LEFT line, FULL height */
  }
  .bp__left .bp__rail{
    position:sticky;top:calc(var(--headH) + 16px);
    height:calc(100vh - var(--headH) - 32px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .bp__toc-inline{display:none !important}
  .bp__readm{display:none}
}

/* Thin, quiet scrollbar on the sticky rail */
.bp__rail{scrollbar-width:thin;scrollbar-color:var(--neutral-200) transparent}
.bp__rail::-webkit-scrollbar{width:6px}
.bp__rail::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:3px}
.bp__rail::-webkit-scrollbar-track{background:transparent}


/* ===============================================================
   2. CARD (same card in all three columns)
   =============================================================== */
.bp__card{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-card-border);
  border-radius:var(--bp-card-radius);
  padding:var(--bp-card-pad);
}
.bp__h4{
  font-family:var(--font-body);font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700);
  margin:0 0 8px;
}
.bp__cap{display:block;font-size:12.5px;line-height:1.5;color:var(--text-muted)}


/* ===============================================================
   3. LEFT RAIL
   =============================================================== */
.bp__readw{display:flex;align-items:center;gap:12px}
.bp__readi{
  width:40px;height:40px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-tint);color:var(--teal-700);
}
.bp__readn{display:block;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--teal-700)}
.bp__progress{height:6px;background:var(--neutral-200);border-radius:4px;overflow:hidden;margin-top:12px}
.bp__progress i{display:block;height:100%;width:0;background:var(--teal-700);transition:width 120ms linear}
.bp__pct{margin-top:8px}

.bp__back{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:22px;
  font-size:14px;font-weight:700;color:var(--teal-700);
}
@media (hover:hover){ .bp__back:hover{color:var(--orange-700)} }
.bp__back:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

/* --- TOC --- */
.bp__toc{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.bp__toc a{
  display:block;padding:6px 10px;border-radius:7px;
  border-left:2px solid transparent;
  font-size:13.5px;line-height:1.45;color:var(--text-body);
}
@media (hover:hover){ .bp__toc a:hover{background:var(--surface-alt)} }
.bp__toc a.is-here{color:var(--teal-700);font-weight:600;background:var(--teal-tint);border-left-color:var(--teal-700)}
.bp__toc .lvl3 a{padding-left:22px;font-size:12.5px;color:var(--text-muted)}
.bp__toc a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-2px}

/* --- Share --- */
.bp__share{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bp__sb{
  flex:1 1 70px;min-width:70px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--border-subtle);border-radius:9px;
  background:var(--white);color:var(--teal-700);
  font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .bp__sb:hover{border-color:var(--teal-700);background:var(--teal-tint)} }
.bp__sb:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.bp__sb.is-done{border-color:var(--teal-700);background:var(--teal-tint)}


/* ===============================================================
   4. ARTICLE HEAD
   =============================================================== */
/* --- Breadcrumb and the meta line right below it ----------------
   MOBILE (0-767px): these two lines NEVER wrap. If the text is
   wider than the screen it scrolls sideways (swipe on touch).
   768px and up: they wrap normally, so long dates or titles are
   never cut off. Net result: no wrap on mobile, no cut on desktop. */
.bp__crumb,
.bp__meta{display:flex;align-items:center}

.bp__crumb{flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--text-muted)}
.bp__crumb a{color:var(--text-muted)}
@media (hover:hover){ .bp__crumb a:hover{color:var(--orange-700)} }
.bp__crumb .sep{opacity:.5}
.bp__crumb > span:last-child{color:var(--text-body);font-weight:600}

.bp__meta{flex-wrap:wrap;gap:8px 10px;margin-top:14px;font-size:13px;color:var(--text-muted)}
.bp__meta .sep{opacity:.5}
.bp__readm{display:inline-flex;align-items:center;gap:6px}

/* LAST UPDATED: shown on desktop, tablet AND mobile.
   Never set display:none on this selector. */
.bp__upd{display:inline-flex;align-items:center;gap:6px;color:var(--teal-700);font-weight:600}
.bp__upd .ico{opacity:.75}

/* ---------- MOBILE: one line + horizontal scroll ---------- */
@media (max-width:767px){
  .bp__crumb,
  .bp__meta{
    flex-wrap:nowrap;                 /* <- never wraps to a 2nd line */
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  .bp__crumb::-webkit-scrollbar,
  .bp__meta::-webkit-scrollbar{display:none;height:0}
  .bp__crumb > *,
  .bp__meta > *{flex:0 0 auto;white-space:nowrap}

  /* Light fade on the right, only when the text overflows.
     blog.js adds the .is-over class. */
  @supports (mask-image:linear-gradient(90deg,#000,#000)){
    .bp__crumb.is-over,.bp__meta.is-over{
      mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    }
  }
}

.bp__title{
  font-family:var(--font-heading);font-weight:800;
  font-size:var(--bp-title);line-height:1.12;letter-spacing:var(--heading-ls);
  color:var(--text-heading);margin:14px 0 0;
}

.bp__feat{margin:20px 0 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--teal-tint)}
.bp__feat img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.bp__toc-inline{margin-top:22px}


/* ===============================================================
   5. ARTICLE PROSE
   ---------------------------------------------------------------
   Nothing needed from the author. Lists, tables, quotes, images
   and code from the editor are styled as card-like blocks here.
   =============================================================== */
.bp__prose{margin-top:24px;color:var(--text-body)}
.bp__prose p{font-size:var(--bp-body);line-height:var(--bp-line);margin:14px 0;max-width:var(--bp-measure)}
.bp__prose > p:first-child{font-size:calc(var(--bp-body) + 1.5px);color:var(--text-strong)}

.bp__prose h2,.bp__h2{
  font-family:var(--font-heading);font-weight:800;
  font-size:var(--bp-h2);line-height:1.18;letter-spacing:-.02em;
  color:var(--text-heading);
  margin:34px 0 8px;scroll-margin-top:calc(var(--headH) + 20px);
}
.bp__prose h3{
  font-family:var(--font-heading);font-weight:700;
  font-size:var(--bp-h3);line-height:1.25;letter-spacing:-.01em;
  color:var(--teal-600);
  margin:26px 0 6px;scroll-margin-top:calc(var(--headH) + 20px);
}
.bp__prose h4{font-family:var(--font-heading);font-weight:700;font-size:17px;color:var(--teal-700);margin:22px 0 6px}

.bp__prose a{color:var(--orange-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
@media (hover:hover){ .bp__prose a:hover{color:var(--orange-800);text-decoration-thickness:2.5px} }
.bp__prose strong,.bp__prose b{font-weight:600;color:var(--text-strong)}
.bp__prose em{font-style:italic}

/* --- Content block: list, table, quote, image, code --- */
.bp__prose ul,
.bp__prose ol,
.bp__prose blockquote,
.bp__prose figure,
.bp__prose pre,
.bp__prose table{
  margin:22px 0;
  border:1px solid var(--border-subtle);
  border-radius:var(--bp-block-radius);
  background:var(--white);
  padding:18px;
  max-width:100%;
}
.bp__prose ul,.bp__prose ol{padding-left:38px}
.bp__prose li{font-size:15.5px;line-height:1.6;color:var(--text-body);margin:9px 0}
.bp__prose ul li{list-style:disc}
.bp__prose ol li{list-style:decimal}
.bp__prose li::marker{color:var(--teal-700)}
.bp__prose li b,.bp__prose li strong{color:var(--text-strong)}

.bp__prose blockquote{
  border-left:3px solid var(--teal-700);
  border-radius:0 var(--bp-block-radius) var(--bp-block-radius) 0;
  padding:14px 0 14px 18px;background:var(--surface-alt);
}
.bp__prose blockquote p{margin:0;font-size:17px;font-weight:500;color:var(--teal-700);line-height:1.5;max-width:none}
.bp__prose blockquote cite{display:block;font-size:12.5px;color:var(--text-muted);margin-top:10px;font-style:normal}

.bp__prose figure{padding:14px}
.bp__prose img{width:100%;height:auto;border-radius:var(--radius-sm);display:block}
.bp__prose figcaption{font-size:12.5px;color:var(--text-muted);margin-top:10px}

.bp__prose pre{
  background:var(--surface-alt);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.7;color:var(--text-strong);
  overflow-x:auto;white-space:pre;
}
.bp__prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--teal-tint);color:var(--teal-900);padding:2px 6px;border-radius:4px}
.bp__prose pre code{background:none;padding:0}

.bp__prose table{border-collapse:collapse;width:100%;padding:0;font-size:13.5px;font-variant-numeric:tabular-nums;overflow:hidden}
.bp__prose th,.bp__prose td{border:1px solid var(--border-subtle);padding:10px 12px;text-align:left}
.bp__prose th{background:var(--surface-alt);color:var(--teal-700);font-weight:700}
.bp__prose td{color:var(--text-body)}

.bp__prose hr{border:0;height:1px;background:var(--border-subtle);margin:34px 0}
.bp__pages{margin-top:28px;font-size:15px}


/* ===============================================================
   6. FAQ
   =============================================================== */
.bp__faq{margin-top:8px}
.bp__faqrow{
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:2px 16px;margin-top:10px;
}
.bp__faqrow[open]{border-color:var(--teal-700)}
.bp__q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 0;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--teal-700);
}
.bp__q::-webkit-details-marker{display:none}
.bp__q:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.bp__qi{flex:none;color:var(--orange-700);transition:transform var(--dur) var(--ease)}
.bp__faqrow[open] .bp__qi{transform:rotate(45deg)}
.bp__a{padding:0 0 16px}
.bp__a p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-body);max-width:var(--bp-measure)}


/* ===============================================================
   7. IN-ARTICLE CTA
   =============================================================== */
.bp__cta{
  background:var(--surface-inverse);
  border-radius:var(--radius-xl);
  padding:30px 24px;text-align:center;margin-top:32px;
}
.bp__ctah{font-family:var(--font-heading);font-weight:800;font-size:21px;line-height:1.2;color:var(--white);margin:0}
.bp__ctat{font-size:14.5px;line-height:1.6;color:var(--neutral-100);margin:8px auto 0;max-width:48ch}
.bp__cta .btn{margin-top:18px}
@media (min-width:768px){ .bp__cta{padding:36px 28px} .bp__ctah{font-size:24px} }


/* ===============================================================
   8. RELATED POSTS
   =============================================================== */
.bp__relt{font-family:var(--font-heading);font-weight:800;font-size:21px;color:var(--text-heading);margin:36px 0 0}
.bp__rel{display:grid;gap:16px;grid-template-columns:1fr;margin-top:16px}
@media (min-width:600px){  .bp__rel{grid-template-columns:1fr 1fr} }
@media (min-width:1200px){ .bp__rel{grid-template-columns:repeat(3,1fr)} }

.bp__relcard{
  display:block;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
@media (hover:hover){ .bp__relcard:hover{border-color:var(--teal-700);box-shadow:var(--shadow-card);transform:translateY(-2px)} }
.bp__relcard:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.bp__relimg{display:block;background:var(--teal-tint);aspect-ratio:16/10;overflow:hidden}
.bp__relimg img{width:100%;height:100%;object-fit:cover}
.bp__ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted)}
.bp__relbody{display:block;padding:16px}
.bp__relmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bp__relh{display:block;font-family:var(--font-heading);font-weight:700;font-size:15.5px;line-height:1.3;color:var(--teal-700);margin-top:10px}


/* ===============================================================
   9. RIGHT SIDEBAR
   =============================================================== */
/* --- AUTHOR BOX --------------------------------------------------
   Alignment rules:
     1. Photo and text share one grid: photo auto, text minmax(0,1fr)
        (without minmax(0,...) a long name pushes the column out).
     2. align-items:center keeps photo and text centred on one line.
     3. Fixed line-height on name and role keeps their gap stable.
     4. Bio and social icons span the full width, same left edge.
   Same alignment on desktop, tablet and mobile. */
.bp__acard{display:block}
.bp__author{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin-top:10px;
}
.bp__avatar{
  width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--teal-tint);border:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:center;
}
.bp__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.bp__ainfo{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.bp__aname{
  display:block;font-family:var(--font-heading);font-weight:700;
  font-size:15.5px;line-height:1.25;color:var(--teal-700);
  overflow-wrap:anywhere;
}
.bp__arole{line-height:1.35}
.bp__abio{font-size:13px;line-height:1.6;color:var(--text-muted);margin-top:14px}

.bp__asocial{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bp__so{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-subtle);color:var(--teal-700);
}
@media (hover:hover){ .bp__so:hover{background:var(--teal-tint);border-color:var(--teal-700)} }
.bp__so:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.bp__newst{margin-bottom:12px}
.bp__news{display:grid;gap:10px}
.bp__news input{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--border-interactive);border-radius:var(--radius-sm);
  background:var(--white);color:var(--text-strong);font-family:var(--font-body);font-size:16px;
}
.bp__news input:focus{outline:none;border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(15,76,85,.25)}

.bp__pop{display:flex;gap:11px;align-items:center;padding:10px 0;border-top:1px solid var(--border-subtle)}
.bp__pop:first-of-type{border-top:0;padding-top:2px}
.bp__pthumb{
  width:56px;height:56px;flex:none;border-radius:9px;overflow:hidden;
  background:var(--teal-tint);border:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.bp__pthumb img{width:100%;height:100%;object-fit:cover}
.bp__poph{display:block;font-weight:600;font-size:13.5px;line-height:1.4;color:var(--teal-700)}
@media (hover:hover){ .bp__pop:hover .bp__poph{color:var(--orange-700)} }
.bp__pop:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}

.bp__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.bp__chip{
  display:inline-block;font-size:12.5px;color:var(--teal-700);
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:20px;padding:5px 11px;
}
@media (hover:hover){ .bp__chip:hover{background:var(--teal-tint);border-color:var(--teal-700)} }
.bp__chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}


/* ===============================================================
   10. BACK TO TOP
   ---------------------------------------------------------------
   Two places: under "On this page" in the left rail, and at the
   very end of the article. Both smooth-scroll to the top.
   =============================================================== */
.bp__totop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 16px;
  background:var(--white);color:var(--teal-700);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.bp__totop .ico{transform:rotate(180deg)}
@media (hover:hover){ .bp__totop:hover{border-color:var(--teal-700);background:var(--teal-tint)} }
.bp__totop:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.bp__endtop{
  margin-top:34px;padding-top:22px;
  border-top:1px solid var(--border-subtle);
  display:flex;justify-content:center;
}
.bp__totop--wide{min-height:48px;padding:0 26px;font-size:14px}


/* ===============================================================
   11. MOBILE  (0 - 767px)
   ---------------------------------------------------------------
   RULE: no section overflows, gets cut off or breaks by wrapping.
   Text is never too small and there are no large empty gaps.

   CSS ORDER MATTERS: shorthand `padding` first, THEN `padding-left`.
   Reversed, the shorthand wipes padding-left and list bullets/numbers
   land on or outside the card border. Do NOT swap these two lines.
   =============================================================== */
@media (max-width:767px){

  .bp{gap:20px}
  .bp__main{padding-top:18px}
  .bp__right{padding-bottom:8px}
  .bp__stack{gap:14px}

  /* --- 11.1 Table of contents HIDDEN on mobile --- */
  .bp__toc-inline{display:none !important}

  /* --- 11.2 Title and meta --- */
  .bp__title{line-height:1.14}
  .bp__meta{margin-top:12px;font-size:12.5px}
  .bp__feat{margin-top:16px}

  /* --- 11.3 Prose: text and blocks --- */
  .bp__prose{margin-top:20px}
  .bp__prose p{font-size:16.5px;line-height:1.68}
  .bp__prose li{font-size:16px;line-height:1.62}

  /* shorthand first... */
  .bp__prose ul,.bp__prose ol,.bp__prose blockquote,
  .bp__prose figure,.bp__prose pre,.bp__prose table{margin:18px 0;padding:14px}
  /* ...THEN the list's left padding. This keeps bullets and numbers
     inside the card. Never go below 26px. */
  .bp__prose ul,
  .bp__prose ol{padding:14px 14px 14px 32px;list-style-position:outside}
  .bp__prose li{margin:8px 0;padding-left:2px}
  .bp__prose li::marker{font-size:.95em}

  .bp__prose blockquote{padding:14px 14px 14px 16px}
  .bp__prose h2,.bp__h2{margin-top:28px}
  .bp__prose h3{margin-top:22px}

  /* --- 11.4 Share button --- */
  .bp__share{gap:6px}
  .bp__sb{flex:1 1 calc(50% - 3px);min-width:0;font-size:12px}

  /* --- 11.5 Author: same alignment on mobile --- */
  .bp__author{gap:12px}
  .bp__avatar{width:52px;height:52px}
  .bp__aname{font-size:15px}

  /* --- 11.6 CTA --- */
  .bp__cta{padding:24px 18px;margin-top:28px;border-radius:var(--radius-lg)}
  .bp__ctah{font-size:19px}
  .bp__ctat{font-size:14px}
  .bp__cta .btn{width:100%;max-width:320px}

  /* --- 11.7 Related articles and back to top --- */
  .bp__relt{font-size:19px;margin-top:30px}
  .bp__endtop{margin-top:28px}
  .bp__totop--wide{width:100%;max-width:320px}

  /* --- 11.8 Sidebar card --- */
  .bp__card{padding:16px}
  .bp__pthumb{width:52px;height:52px}
}

/* Very small phones (360px and below) */
@media (max-width:400px){
  body.lbg-blog-post,.bp{--bp-title:29px}
  .bp__prose ul,.bp__prose ol{padding-left:29px}
  .bp__sb{flex:1 1 calc(50% - 3px)}
  .bp__chip{font-size:12px}
}

/* ===============================================================
   12. OVERFLOW GUARD  (all widths)
   ---------------------------------------------------------------
   Stops long words, URLs, code or tables from overflowing the
   column. Do not remove this block.
   =============================================================== */
.bp,.bp__main,.bp__left,.bp__right,.bp__rail,.bp__stack{min-width:0}
.bp__prose{overflow-wrap:break-word}
.bp__prose a,
.bp__prose code,
.bp__poph,
.bp__relh,
.bp__aname{overflow-wrap:anywhere}

/* Wide tables scroll sideways inside the card.
   blog.js adds this wrapper automatically. */
.bp__tw{
  margin:22px 0;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border-subtle);
  border-radius:var(--bp-block-radius);
  background:var(--white);
}
.bp__tw table,
.bp__tw.bp__tw table{margin:0;border:0;border-radius:0;min-width:520px}
@media (max-width:767px){ .bp__tw table{min-width:460px;font-size:13px} }

/* Embed (YouTube, map) responsive */
.bp__prose iframe,
.bp__prose video,
.bp__prose embed,
.bp__prose object{max-width:100%;width:100%;border-radius:var(--radius-sm);display:block}
.bp__prose iframe{aspect-ratio:16/9;height:auto;border:0}

/* Featured and prose images are never cropped */
.bp__feat img,.bp__prose img{max-width:100%;height:auto}

/* Keep the middle column from getting too narrow on large screens */
@media (min-width:1400px){
  body.lbg-blog-post,.bp{--bp-left:240px;--bp-right:290px}
}

/* ===============================================================
   13. AUTHOR CARD + SUBSCRIBE (v2.4)
   =============================================================== */
a.bp__avatar{text-decoration:none}
a.bp__aname{text-decoration:none}
@media (hover:hover){ a.bp__aname:hover{text-decoration:underline;text-underline-offset:3px} }
.bp__avatar img{aspect-ratio:1/1}
.bp__asocial .bp__so .ico{width:16px;height:16px}
.bp__news .btn{width:100%;justify-content:center;min-height:46px}
.bp__news .btn[disabled]{opacity:1;cursor:pointer}
/* Below 1200px the sidebars stack under the article: keep cards full width and aligned */
@media (max-width:1199px){
  .bp__right .bp__stack{display:grid;gap:16px}
  .bp__acard .bp__author{grid-template-columns:56px minmax(0,1fr)}
  .bp__abio{margin-top:12px}
}