/* Blog article r3: compact post head per client comment. Scoped to this page. */
rd-body.page-blog-article .r3-post-head{max-width:1046px;margin:0 auto 34px}
rd-body.page-blog-article .r3-post-head h1{font-size:clamp(34px,3.4vw,48px);line-height:1.12;margin-top:14px}
rd-body.page-blog-article .r3-post-head .r2-cat{margin:18px 0 0;display:inline-block}
rd-body.page-blog-article .r3-byline{display:flex;align-items:center;gap:14px;margin-top:22px}
rd-body.page-blog-article .r3-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #fffdf4;box-shadow:0 2px 8px #172a3a2e;flex-shrink:0}
rd-body.page-blog-article .r3-byline .r2-post-meta{display:flex;flex-direction:column;gap:2px;margin-top:0!important}
rd-body.page-blog-article .r3-byline .r2-byline{font-weight:650;color:#19324a;font-size:15.5px}
rd-body.page-blog-article .r3-byline .r2-when{font-size:14px;color:#536571;white-space:normal}
@media(max-width:767px){
rd-body.page-blog-article .r3-post-head{text-align:left}
rd-body.page-blog-article .r3-post-head h1{font-size:31px}
rd-body.page-blog-article .r3-byline{gap:12px}
rd-body.page-blog-article .r3-avatar{width:42px;height:42px}
}

/* v2: round 2 comments */
/* #2 sticky TOC: shared CSS makes rd-body a clip container which kills sticky; clip keeps it scrollable-free */
rd-body.page-blog-article{overflow-x:clip;overflow-y:visible}
/* #2 readable TOC: plain paper, no notebook lines, darker text */
rd-body.page-blog-article .r2-toc::before{background:#fffdf6;border:1px solid #c6d2d8;clip-path:none;box-shadow:0 5px 18px #172a3a1e}
rd-body.page-blog-article .r2-toc li{border-bottom:1px solid #dbe3e8;font-size:14.5px}
rd-body.page-blog-article .r2-toc li::before{font-family:Outfit,Arial,sans-serif;font-size:13px;font-weight:700;color:#235b92;padding-top:3px}
rd-body.page-blog-article .r2-toc li a{color:#19324a!important}
rd-body.page-blog-article .r2-toc-note{display:none}
/* #3 #4 centred title block */
rd-body.page-blog-article .r3-post-head{text-align:center}
rd-body.page-blog-article .r3-post-head .r2-crumbs ol{justify-content:center}
rd-body.page-blog-article .r3-post-head .r2-cat{transform:rotate(-1.5deg)}
rd-body.page-blog-article .r3-byline{justify-content:center;text-align:left}
/* #6 author role */
rd-body.page-blog-article .r3-author-role{font-size:15px;font-weight:600;color:#235b92;margin-top:6px!important}
/* #7 lighter related card */
rd-body.page-blog-article .r2-rel-card>a::before{background:#fffdf6 url('../textures/ivory-fibre.webp');background-size:512px;border-color:#b9c7cf}
rd-body.page-blog-article .r2-rel-card p{color:#33485a}
@media(max-width:900px){
 rd-body.page-blog-article .r3-byline{justify-content:center}
}

/* v3: round 3 comments */
/* #13 breadcrumb: moved out of the centred title stack to the top left, aligned with the ToC column, as a taped paper index label */
rd-body.page-blog-article .r3-post-head .r2-crumbs{display:flex;justify-content:flex-start;margin:0 0 30px;text-align:left}
rd-body.page-blog-article .r3-post-head .r2-crumbs ol{position:relative;justify-content:flex-start;max-width:100%;padding:0;font-size:13.5px;color:#3e5261}

rd-body.page-blog-article .r3-post-head .crumb-here{max-width:44ch;color:#19324a}
rd-body.page-blog-article .r3-post-head .crumb-sep{color:#8aa3b4}
/* #12 byline: name only, then date and read time on one clean line */
rd-body.page-blog-article .r3-byline{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
rd-body.page-blog-article .r3-meta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0!important;text-align:left;line-height:1.3}
rd-body.page-blog-article .r3-author{font-size:16px;font-weight:700;color:#19324a}
rd-body.page-blog-article .r3-when{display:flex;align-items:center;flex-wrap:wrap;gap:2px 9px;font-size:14px;color:#536571}
rd-body.page-blog-article .r3-dot{width:4px;height:4px;border-radius:50%;background:#8aa3b4;flex-shrink:0}
/* #14 plain paper: no ruled lines on the Key Takeaways card */
rd-body.page-blog-article #article-body [data-article-takeaways]::before{background-image:none}
/* #15 internal link in the closing contact block */
rd-body.page-blog-article #contact .contact-intro p a{color:#1d5fae!important;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* #16 mobile and tablet ToC: floating pill at bottom left (like the live site), expands into a paper card above it */
rd-body.page-blog-article{--toc-b:20px}
rd-body.page-blog-article:has(#mockup-review){--toc-b:92px}
@media(max-width:700px){rd-body.page-blog-article:has(#mockup-review){--toc-b:76px}}
@media(max-width:1100px){
 rd-body.page-blog-article #article{z-index:2}
 rd-body.page-blog-article:has(#r2-toc.is-open) #article{z-index:95}
 rd-body.page-blog-article .r2-toc-open{position:fixed;left:16px;bottom:calc(var(--toc-b) + env(safe-area-inset-bottom,0px));z-index:62;display:inline-flex;align-items:center;gap:9px;height:46px;min-height:46px;max-width:calc(100vw + -140px);margin:0;padding:0 18px 0 15px;border:1px solid #9fb3c0;border-radius:999px;background:#fffdf6;color:#19324a;font-size:14px;font-weight:650;line-height:1;white-space:nowrap;box-shadow:0 10px 24px #172a3a33;transition:opacity .25s,visibility .25s,transform .25s,background-color .2s,color .2s}
 rd-body.page-blog-article .r2-toc-open span{overflow:hidden;text-overflow:ellipsis}
 rd-body.page-blog-article .r2-toc-open svg{flex-shrink:0}
 rd-body.page-blog-article .r2-toc-open .tdot{fill:#235b92}
 rd-body.page-blog-article .r2-toc-open .tbar{fill:currentColor}
 rd-body.page-blog-article .r2-toc-open:hover{border-color:#235b92}
 rd-body.page-blog-article .r2-toc-open[aria-expanded="true"]{background:#19324a;border-color:#19324a;color:#fffdf6}
 rd-body.page-blog-article .r2-toc-open[aria-expanded="true"] .tdot{fill:#9fc3e6}
 rd-body.page-blog-article .r2-toc-open.is-away{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}
 rd-body.page-blog-article .r2-toc{left:16px;right:auto;bottom:calc(var(--toc-b) + 58px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100vw + -32px));max-height:none;overflow:visible;padding:26px 22px 18px;transform-origin:16px 100%}
 rd-body.page-blog-article .r2-toc.is-open{box-shadow:0 0 0 100vmax #172a3a59;animation:r3-toc-in .22s ease-out}
 rd-body.page-blog-article .r2-toc::before{box-shadow:0 18px 40px #172a3a40}
 rd-body.page-blog-article .r2-toc.is-open::after{display:block;width:84px;height:24px;top:-12px}
 rd-body.page-blog-article .r2-toc-title{padding-right:40px}
 rd-body.page-blog-article .r2-toc ol{max-height:calc(100dvh + -190px + var(--toc-b) * -1);overflow-y:auto;overscroll-behavior:contain}
 rd-body.page-blog-article .r2-toc li{font-size:15.5px;padding:10px 0}
 rd-body.page-blog-article .r2-toc li:last-child{border-bottom:0}
 rd-body.page-blog-article .r2-toc-close{top:8px;right:8px}
}
@keyframes r3-toc-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 rd-body.page-blog-article .r2-toc.is-open{animation:none}
 rd-body.page-blog-article .r2-toc-open{transition:none}
}
@media(max-width:767px){
 rd-body.page-blog-article .r3-post-head .r2-crumbs{margin-bottom:24px}
 rd-body.page-blog-article .r3-post-head .r2-crumbs ol{justify-content:flex-start;padding:0;font-size:13px}
 rd-body.page-blog-article .r3-post-head .crumb-here{max-width:none}
 rd-body.page-blog-article .r3-author{font-size:15.5px}
 rd-body.page-blog-article .r3-when{font-size:13.5px}
}

/* #18 category below the breadcrumb; #19 head aligned with the article column:
   title centred above the featured image, byline left under the title */
rd-body.page-blog-article .r3-post-head{display:grid;grid-template-columns:230px minmax(0,760px);gap:0 56px;justify-content:center;text-align:left}
rd-body.page-blog-article .r3-post-head>*{grid-column:2}
rd-body.page-blog-article .r3-post-head .r2-cat{display:inline-block;margin:0 0 14px;justify-self:start}
rd-body.page-blog-article .r3-post-head h1{text-align:center}
rd-body.page-blog-article .r3-post-head .r3-byline{justify-content:flex-start}
@media(max-width:1100px){
 rd-body.page-blog-article .r3-post-head{display:block}
}

/* #20 title left aligned above the byline; #21 no tape anywhere in the post head */
rd-body.page-blog-article .r3-post-head{text-align:left}
rd-body.page-blog-article .r3-post-head h1{text-align:left}
rd-body.page-blog-article .r3-post-head .r2-cat{transform:none}
rd-body.page-blog-article .r3-byline{justify-content:flex-start}
rd-body.page-blog-article .r3-post-head .r2-crumbs ol::before,
rd-body.page-blog-article .r3-post-head .r2-crumbs ol::after{content:none!important;display:none!important}