/* ON10 blog: index, categories and single posts. Loaded only on blog pages, after page.css. */
body.on10 .on10-blog-hero{padding:88px 0 40px;display:flex;flex-direction:column;gap:18px}
body.on10 .on10-blog-hero h1{font-family:'Archivo Black','Open Sans',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(40px,6vw,76px);line-height:1}
body.on10 .on10-blog-hero h1 strong{color:var(--red);font-weight:inherit}
body.on10 .on10-blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
body.on10 .on10-blog-cats a{border:1px solid #333538;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;text-decoration:none;color:#fff;background:#0A0A0A}
body.on10 .on10-blog-cats a:hover,body.on10 .on10-blog-cats a[aria-current]{border-color:var(--red);background:var(--red);color:#fff}

body.on10 .on10-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0}
body.on10 .on10-post-card{background:#0A0A0A;border:1px solid #2A2A2A;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
body.on10 .on10-post-card:hover{border-color:var(--red);transform:translateY(-3px)}
body.on10 .on10-post-img{display:block;aspect-ratio:1200/630;background:#141414;overflow:hidden}
body.on10 .on10-post-img img{width:100%;height:100%;object-fit:cover;display:block}
body.on10 .on10-post-noimg{display:flex;height:100%;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;font-size:42px;color:var(--red)}
body.on10 .on10-post-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
body.on10 .on10-post-cat{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
body.on10 .on10-post-card h2{font-size:22px;line-height:1.25;font-weight:800}
body.on10 .on10-post-card h2 a{text-decoration:none;color:#fff}
body.on10 .on10-post-card h2 a:hover{color:var(--red)}
body.on10 .on10-post-ex{color:var(--text-3);font-size:15px;line-height:1.55}
body.on10 .on10-post-meta{margin-top:auto;padding-top:6px;color:var(--grey);font-size:13px}
body.on10 .on10-blog-empty{color:var(--text-2);font-size:18px;padding:30px 0}

body.on10 .on10-pager ul{list-style:none;display:flex;gap:8px;justify-content:center;padding:0;margin:30px 0}
body.on10 .on10-pager a,body.on10 .on10-pager span{display:block;min-width:42px;text-align:center;padding:10px 14px;border:1px solid #333538;border-radius:999px;text-decoration:none;color:#fff;font-weight:700}
body.on10 .on10-pager .current{background:var(--red);border-color:var(--red)}

/* Call to action box (index and end of every post) */
body.on10 .on10-blog-cta{margin:56px auto;max-width:880px;align-items:flex-start;padding:44px 40px;gap:14px}
body.on10 .on10-blog-cta h2{font-family:'Archivo Black','Open Sans',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(28px,4vw,44px);line-height:1.05;color:#fff}
body.on10 .on10-blog-cta h2 strong{color:var(--red);font-weight:inherit}
body.on10 .on10-blog-cta .on10-lead{max-width:640px}
body.on10 .on10-blog-cta .on10-form{margin-top:6px}

/* Single post */
body.on10 .on10-article{max-width:820px;margin:0 auto;padding:56px 0 20px}
body.on10 .on10-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--grey);margin-bottom:26px}
body.on10 .on10-crumbs a{color:var(--text-3);text-decoration:none}
body.on10 .on10-crumbs a:hover{color:var(--red)}
body.on10 .on10-article-head{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
body.on10 .on10-article-head h1{font-family:'Archivo Black','Open Sans',sans-serif;font-weight:400;font-size:clamp(32px,5vw,54px);line-height:1.08;text-transform:none}
body.on10 .on10-article-meta{color:var(--grey);font-size:14px}
body.on10 .on10-article-img{margin:0 0 34px;border-radius:22px;overflow:hidden;border:1px solid #2A2A2A}
body.on10 .on10-article-img img{width:100%;height:auto;display:block}

body.on10 .on10-prose{font-size:19px;line-height:1.78;color:var(--text-2)}
body.on10 .on10-prose>*+*{margin-top:1.15em}
body.on10 .on10-prose h2{font-family:'Archivo Black','Open Sans',sans-serif;font-weight:400;font-size:clamp(24px,3.4vw,32px);line-height:1.15;color:#fff;margin-top:2.1em;text-transform:uppercase}
body.on10 .on10-prose h3{font-size:22px;line-height:1.3;font-weight:800;color:#fff;margin-top:1.7em}
body.on10 .on10-prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
body.on10 .on10-prose a:hover{color:#fff}
body.on10 .on10-prose strong{color:#fff}
body.on10 .on10-prose ul,body.on10 .on10-prose ol{padding-left:1.4em;display:flex;flex-direction:column;gap:.55em}
body.on10 .on10-prose li::marker{color:var(--red);font-weight:800}
body.on10 .on10-prose blockquote{border-left:4px solid var(--red);padding:6px 0 6px 22px;color:#fff;font-size:1.08em}
body.on10 .on10-prose img{border-radius:16px;max-width:100%;height:auto}
body.on10 .on10-prose table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #2A2A2A;border-radius:16px;overflow:hidden;font-size:16px}
body.on10 .on10-prose th,body.on10 .on10-prose td{padding:12px 16px;text-align:left;border-top:1px solid #2A2A2A;vertical-align:top}
body.on10 .on10-prose thead th{border-top:0;background:#141414;color:#fff}
body.on10 .on10-takeaways{background:#0F0F0F;border:1px solid #2A2A2A;border-left:4px solid var(--red);border-radius:16px;padding:20px 24px}
body.on10 .on10-takeaways p:first-child{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 8px}
body.on10 .on10-takeaways ul{margin:0}
body.on10 .on10-takeaways li,body.on10 .on10-takeaways p{font-size:17px;line-height:1.6}

body.on10 .on10-share-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:44px 0 0;padding-top:22px;border-top:1px solid #222}
body.on10 .on10-share-line span{color:var(--grey);font-size:14px;margin-right:6px}
body.on10 .on10-share-line a{border:1px solid #333538;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;text-decoration:none;color:#fff}
body.on10 .on10-share-line a:hover{border-color:var(--red)}
body.on10 .on10-related{margin-top:70px}
body.on10 .on10-related>h2{font-family:'Archivo Black','Open Sans',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(26px,3.6vw,38px)}
body.on10 .on10-article .on10-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:1024px){
  body.on10 .on10-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.on10 .on10-article{max-width:100%}
}
@media (max-width:640px){
  body.on10 .on10-blog-hero{padding:48px 0 24px}
  body.on10 .on10-blog-grid,body.on10 .on10-article .on10-blog-grid{grid-template-columns:1fr;gap:16px}
  body.on10 .on10-prose{font-size:17px}
  body.on10 .on10-blog-cta{padding:28px 22px;margin:40px 0}
  body.on10 .on10-article{padding-top:32px}
}

/* Homepage: latest posts */
body.on10 .on10-home-blog{display:flex;flex-direction:column;gap:14px}
body.on10 .on10-home-blog .on10-blog-grid{margin:14px 0 6px}
body.on10 .on10-post-card h3{font-size:22px;line-height:1.25;font-weight:800}
body.on10 .on10-post-card h3 a{text-decoration:none;color:#fff}
body.on10 .on10-post-card h3 a:hover{color:var(--red)}
body.on10 .on10-home-blog-more{text-align:center}
body.on10 .on10-more-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;border:1px solid #333538;color:#fff;font-weight:700;text-decoration:none;background:#0A0A0A}
body.on10 .on10-more-btn:hover{border-color:var(--red);background:var(--red)}
