/* Backspin article layout v2 (v4.12.45) — shared reading layout for every Backspin article.
   Loaded last on article pages. Only presentation; article wording is untouched. */
:root{--ba-ink:#17140f;--ba-text:#3e382e;--ba-muted:#6f6555;--ba-red:#9e1b32;--ba-red-dark:#7a1427;--ba-khaki:#c9ae7e;--ba-khaki-soft:#f6efe2;--ba-line:#e6dac4}

/* Reading progress */
.ba-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:90;pointer-events:none;background:transparent}
.ba-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--ba-red),#c22a44 70%,var(--ba-khaki))}

/* Body rhythm */
body .article-body{padding:clamp(20px,4vw,40px)}
body .article-body > p,body .article-body li{max-width:68ch}
body .article-body{min-width:0}
body .article-body p{overflow-wrap:break-word}
body .article-body li{overflow-wrap:anywhere}
body .article-body li a,body .article-body p a{overflow-wrap:anywhere}
body .article-body p{font-size:18px;line-height:1.75;color:var(--ba-text)}
body .article-body p a,body .article-body li a{color:var(--ba-red);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(158,27,50,.35)}
body .article-body p a:hover,body .article-body li a:hover{text-decoration-color:var(--ba-red)}
body .article-body p.ba-lead{font-size:clamp(25px,3.4vw,30px);line-height:1.4;color:#14110d;font-weight:800;letter-spacing:-.01em}

/* Section headings: cardinal tick + room to breathe */
body .article-body h2{position:relative;font-size:clamp(25px,3.2vw,32px);line-height:1.08;letter-spacing:-.015em;color:var(--ba-ink);margin:2.6rem 0 .9rem;padding-top:18px;scroll-margin-top:96px;text-wrap:balance}
body .article-body h2::before{content:"";position:absolute;top:0;left:0;width:38px;height:4px;border-radius:2px;background:var(--ba-red)}
body .article-body > h2:first-child{margin-top:.4rem}
body .article-body h3{scroll-margin-top:96px;letter-spacing:-.005em}

/* In this article */
body .article-body .ba-toc{margin:1.6rem 0 2rem;padding:18px 20px 16px;background:var(--ba-khaki-soft);border:1px solid var(--ba-line);border-radius:16px}
.ba-toc .ba-toc-label{display:block;font:900 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.16em;color:var(--ba-red);margin:0 0 10px}
.ba-toc ol{list-style:none;counter-reset:toc;margin:0;padding:0;display:grid;gap:2px}
@media(min-width:760px){.ba-toc ol{grid-template-columns:1fr 1fr;column-gap:22px}}
.ba-toc li{counter-increment:toc;max-width:none!important;margin:0!important}
body .article-body .ba-toc a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(201,174,126,.45);color:var(--ba-ink)!important;text-decoration:none!important;font-weight:750;font-size:15.5px;line-height:1.3}
.ba-toc a::before{content:counter(toc,decimal-leading-zero);font:900 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ba-red);font-variant-numeric:tabular-nums}
body .article-body .ba-toc a:hover{color:var(--ba-red)!important}

/* Pull quotes: blockquote, big lines, quote lines */
body .article-body blockquote{position:relative;margin:2.2rem 0;padding:22px 22px 22px 66px;background:var(--ba-ink);border:0;border-radius:16px;color:#f4ecdc;font-weight:800;box-shadow:0 14px 34px rgba(23,20,15,.16)}
body .article-body blockquote::before{content:"\201C";position:absolute;left:16px;top:6px;font:900 74px/1 Georgia,"Times New Roman",serif;color:var(--ba-khaki)}
body .article-body blockquote p{margin:0!important;color:#f4ecdc!important;font-size:clamp(19px,2.3vw,23px)!important;line-height:1.38!important;font-weight:800;max-width:none}
body .article-body blockquote p + p{margin-top:.6rem!important}
body .article-body blockquote strong{color:#fff}
body .article-body .big-line,body .article-body .quote-line,body .article-body .pull-line{position:relative;margin:2.2rem 0!important;padding:16px 0 16px 22px!important;border:0!important;border-left:6px solid var(--ba-red)!important;background:none!important;color:var(--ba-ink)!important;font-weight:950;letter-spacing:-.02em;max-width:none}
body .article-body .big-line{font-size:clamp(26px,4.6vw,40px)!important;line-height:1.06!important}
body .article-body .quote-line,body .article-body .pull-line{font-size:clamp(21px,2.6vw,28px)!important;line-height:1.18!important}

/* Lists */
body .article-body > ul:not([class]){list-style:none;padding-left:0;margin:1.1rem 0 1.5rem}
body .article-body > ul:not([class]) > li{position:relative;padding-left:30px;margin:.55rem 0;font-size:18px;line-height:1.6;color:var(--ba-text)}
body .article-body > ul:not([class]) > li::before{content:"";position:absolute;left:2px;top:.52em;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--ba-red);box-shadow:0 0 0 2px rgba(201,174,126,.45)}
body .article-body > ol:not([class]){list-style:none;counter-reset:ba;padding-left:0;margin:1.1rem 0 1.5rem}
body .article-body > ol:not([class]) > li{counter-increment:ba;position:relative;padding-left:42px;margin:.7rem 0;font-size:18px;line-height:1.6;color:var(--ba-text)}
body .article-body > ol:not([class]) > li::before{content:counter(ba);position:absolute;left:0;top:.05em;width:28px;height:28px;border-radius:50%;background:var(--ba-red);color:#fff;font:900 13px/28px system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}

/* Call-to-action strips */
body .article-body .inline-cta{display:block;margin:2rem 0;padding:16px 18px;background:var(--ba-ink);border:0;border-left:0;border-radius:14px;color:#efe5d2;font-size:16px;line-height:1.5;box-shadow:inset 4px 0 0 var(--ba-red)}
body .article-body .inline-cta strong{color:#fff}
body .article-body .inline-cta a{color:var(--ba-khaki)!important;font-weight:900;text-decoration:none!important}
body .article-body .inline-cta a:hover{color:#fff!important}

/* Section break */
body .article-body hr{border:0;height:14px;margin:2.4rem 0;background:radial-gradient(circle,var(--ba-khaki) 1.6px,transparent 2px) center/16px 14px repeat-x}

/* Content boxes polish */
body .article-body .blueprint{border-radius:14px;box-shadow:0 8px 22px rgba(45,36,20,.06)}

/* Quick answers */
body .article-body .faq{border-top:0;margin:0 0 1.6rem;display:grid;gap:10px}
body .article-body .faq .ba-faq-item{background:var(--ba-khaki-soft);border:1px solid var(--ba-line);border-radius:14px;padding:16px 18px 14px 58px;position:relative}
body .article-body .faq .ba-faq-item::before{content:"Q";position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:8px;background:var(--ba-red);color:#fff;font:900 14px/28px system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}
body .article-body .faq .ba-faq-item h3{margin:2px 0 6px;font-size:17px;line-height:1.35}
body .article-body .faq .ba-faq-item p{margin:0 0 .35rem;font-size:16.5px;line-height:1.62;max-width:none}

/* Back to top */
.ba-top{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;font:900 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:var(--ba-muted)!important;text-decoration:none!important}
.ba-top:hover{color:var(--ba-red)!important}

@media(max-width:640px){
  body .article-body blockquote{padding:18px 18px 18px 54px}
  body .article-body blockquote::before{font-size:60px;left:12px}
  body .article-body .faq .ba-faq-item{padding:14px 14px 12px 52px}
  body .article-body .faq .ba-faq-item::before{left:12px}
}
@media(prefers-reduced-motion:reduce){.ba-progress{display:none}}

/* v4.15.3 desktop: posts without a sidebar get one centered, wider column instead of a left-pinned column beside an empty 300px slot. */
@media(min-width:980px){
  .article-layout:not(:has(> aside.side)){grid-template-columns:minmax(0,1fr);max-width:960px}
  .article-layout:not(:has(> aside.side)) .article-body{padding:48px 56px}
  .article-layout:not(:has(> aside.side)) .article-body > p,
  .article-layout:not(:has(> aside.side)) .article-body li{max-width:none;font-size:19px}
  .article-layout:not(:has(> aside.side)) .article-body .ba-lead{font-size:30px}
}
@media(min-width:1280px){
  .article-layout:not(:has(> aside.side)){max-width:1040px}
}

/* Blog typography v4 (Oct 2026): Poppins headlines + Inter text */
body .article-head h1{font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.06}
body .article-head>p{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
body .article-body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body .article-body p,body .article-body li{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body .article-body h2,body .article-body h3,body .article-body p.ba-lead,body .article-body .big-line,body .ahd-next-step .ans-h,body .keep-reading h2{font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif}
body .article-body h2{font-weight:700;letter-spacing:-.015em;line-height:1.15}
body .article-body h3{font-weight:700;letter-spacing:-.005em}
body .article-body p.ba-lead{font-weight:700;letter-spacing:-.01em;line-height:1.3}
body .article-body .big-line{font-weight:800;letter-spacing:-.02em;line-height:1.1}
body .article-body .ba-toc a{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600}