/* ============================================================
   LEADSB2B — Blog & Article styles (extends site.css)
   ============================================================ */

/* ---------- Blog index ---------- */
.blog-hero{ padding:clamp(56px,7vw,104px) 0 clamp(32px,4vw,52px); border-bottom:1px solid var(--line); }
.blog-hero h1{ margin-top:20px; max-width:20ch; }
.blog-hero .lead{ margin-top:22px; max-width:60ch; }

.blog-toolbar{ position:sticky; top:66px; z-index:40; background:rgba(10,10,11,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.blog-toolbar__inner{ display:flex; gap:8px; overflow-x:auto; padding:14px 0; scrollbar-width:none; }
.blog-toolbar__inner::-webkit-scrollbar{ display:none; }
.cat-btn{ font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; padding:9px 15px; border:1px solid var(--line); border-radius:100px; color:var(--fg-3); white-space:nowrap; transition:all var(--t); }
.cat-btn:hover{ color:var(--fg); border-color:var(--line-3); }
.cat-btn.active{ background:var(--volt); color:#0A0A0B; border-color:var(--volt); font-weight:700; }

.feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin:clamp(40px,5vw,64px) 0; background:var(--bg-3); }
.feature__media{ position:relative; min-height:340px; background:
   repeating-linear-gradient(135deg,var(--bg-4) 0 2px,transparent 2px 11px), radial-gradient(120% 120% at 0% 0%,var(--volt-tint),transparent 55%), var(--bg-2); border-right:1px solid var(--line); display:flex; align-items:flex-end; padding:26px; }
.feature__media .ph{ font-family:var(--mono); font-size:11px; color:var(--fg-4); letter-spacing:.06em; text-transform:uppercase; }
.feature__body{ padding:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; }
.feature__cat{ font-family:var(--mono); font-size:11.5px; color:var(--volt); text-transform:uppercase; letter-spacing:.12em; }
.feature__title{ font-family:var(--head); font-weight:800; font-size:clamp(26px,3vw,42px); line-height:1.02; letter-spacing:-.025em; margin-top:16px; }
.feature__dek{ margin-top:16px; color:var(--fg-2); font-size:16px; line-height:1.55; }
.feature__meta{ margin-top:auto; padding-top:24px; display:flex; gap:16px; align-items:center; font-family:var(--mono); font-size:12px; color:var(--fg-3); }

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:clamp(56px,7vw,96px); }
.post{ display:flex; flex-direction:column; background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color var(--t),transform var(--t); }
.post:hover{ border-color:var(--line-3); transform:translateY(-3px); }
.post__media{ height:150px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;
   background:repeating-linear-gradient(135deg,var(--bg-4) 0 2px,transparent 2px 12px),var(--bg-2); }
.post__media.v1{ background:repeating-linear-gradient(135deg,var(--bg-4) 0 2px,transparent 2px 12px),radial-gradient(120% 120% at 100% 0%,var(--volt-tint),transparent 60%),var(--bg-2); }
.post__media.v2{ background:repeating-linear-gradient(90deg,var(--bg-4) 0 1px,transparent 1px 14px),var(--bg-2); }
.post__media.v3{ background:repeating-linear-gradient(0deg,var(--bg-4) 0 1px,transparent 1px 16px),radial-gradient(100% 100% at 0% 100%,var(--volt-tint),transparent 55%),var(--bg-2); }
.post__media .tagm{ position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--volt); background:rgba(10,10,11,.7); border:1px solid var(--volt-dim); padding:4px 9px; border-radius:100px; }
.post__body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.post__title{ font-family:var(--head); font-weight:750; font-size:19px; line-height:1.18; letter-spacing:-.015em; }
.post__dek{ margin-top:10px; color:var(--fg-3); font-size:13.5px; line-height:1.5; flex:1; }
.post__meta{ margin-top:18px; display:flex; gap:12px; font-family:var(--mono); font-size:11px; color:var(--fg-4); text-transform:uppercase; letter-spacing:.04em; }
@media(max-width:900px){ .posts{ grid-template-columns:repeat(2,1fr);} .feature{ grid-template-columns:1fr;} .feature__media{ min-height:200px; border-right:none; border-bottom:1px solid var(--line);} }
@media(max-width:580px){ .posts{ grid-template-columns:1fr;} }

/* ---------- Article ---------- */
.art-wrap{ max-width:760px; margin:0 auto; padding:0 var(--pad); }
.art-head{ padding:clamp(48px,6vw,88px) 0 clamp(28px,3vw,40px); }
.art-back{ font-family:var(--mono); font-size:12px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.06em; display:inline-flex; gap:8px; align-items:center; }
.art-back:hover{ color:var(--volt); }
.art-cat{ font-family:var(--mono); font-size:12px; color:var(--volt); text-transform:uppercase; letter-spacing:.14em; margin-top:30px; display:block; }
.art-title{ font-family:var(--head); font-weight:800; font-size:clamp(32px,4.6vw,58px); line-height:1.02; letter-spacing:-.03em; margin-top:18px; text-wrap:balance; }
.art-dek{ margin-top:22px; font-size:clamp(18px,1.8vw,22px); line-height:1.5; color:var(--fg-2); }
.art-meta{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:18px; align-items:center; font-family:var(--mono); font-size:12px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.04em; }
.art-meta .av{ width:34px; height:34px; border-radius:7px; background:var(--volt); color:#0A0A0B; display:grid; place-items:center; font-family:var(--display); font-size:15px; }
.art-meta .who{ display:flex; align-items:center; gap:10px; }

.art-figure{ margin:clamp(28px,3.4vw,44px) 0; height:clamp(220px,30vw,360px); border:1px solid var(--line); border-radius:var(--r); position:relative; display:flex; align-items:flex-end; padding:22px;
   background:repeating-linear-gradient(135deg,var(--bg-4) 0 2px,transparent 2px 12px),radial-gradient(110% 110% at 100% 0%,var(--volt-tint),transparent 60%),var(--bg-2); }
.art-figure .ph{ font-family:var(--mono); font-size:11px; color:var(--fg-4); letter-spacing:.06em; text-transform:uppercase; }

.art-body{ padding-bottom:clamp(40px,5vw,72px); }
.art-body p{ font-size:18px; line-height:1.72; color:var(--fg); margin-top:24px; }
.art-body p:first-child{ margin-top:0; }
.art-body .drop:first-letter{ font-family:var(--display); font-size:3.4em; line-height:.8; float:left; margin:6px 14px 0 0; color:var(--volt); }
.art-body h2{ font-family:var(--head); font-weight:800; font-size:clamp(24px,2.8vw,34px); line-height:1.12; letter-spacing:-.025em; margin:clamp(40px,4vw,60px) 0 0; padding-top:8px; }
.art-body h3{ font-family:var(--head); font-weight:750; font-size:21px; letter-spacing:-.015em; margin:34px 0 0; }
.art-body ul,.art-body ol{ margin:22px 0 0; padding-left:0; display:flex; flex-direction:column; gap:12px; }
.art-body li{ font-size:17px; line-height:1.6; color:var(--fg-2); padding-left:28px; position:relative; }
.art-body ul li::before{ content:"›"; position:absolute; left:6px; color:var(--volt); font-weight:700; }
.art-body ol{ counter-reset:li; }
.art-body ol li::before{ counter-increment:li; content:counter(li); position:absolute; left:0; top:0; font-family:var(--mono); font-size:12px; color:var(--volt); }
.art-body a{ color:var(--volt); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.art-body strong{ color:var(--fg); font-weight:700; }
.art-body blockquote{ margin:clamp(32px,4vw,48px) 0; padding:6px 0 6px 28px; border-left:3px solid var(--volt); font-family:var(--head); font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.22; letter-spacing:-.02em; color:var(--fg); }

.callout{ margin:clamp(32px,4vw,44px) 0; background:var(--bg-3); border:1px solid var(--line); border-left:3px solid var(--volt); border-radius:var(--r); padding:26px 28px; }
.callout__t{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--volt); }
.callout ul{ margin-top:14px !important; }
.callout p{ font-size:16px !important; }

.art-cta{ margin:clamp(40px,5vw,64px) 0 0; background:linear-gradient(135deg,var(--volt-tint),transparent 60%),var(--bg-3); border:1px solid var(--volt-dim); border-radius:var(--r-lg); padding:clamp(28px,3.4vw,40px); }
.art-cta__k{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--volt); }
.art-cta__t{ font-family:var(--head); font-weight:800; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; margin-top:12px; }
.art-cta__d{ margin-top:12px; color:var(--fg-2); font-size:15.5px; max-width:54ch; }
.art-cta .btn-row{ margin-top:22px; }

.art-share{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.art-share span{ font-family:var(--mono); font-size:11.5px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.08em; }
.chip{ font-family:var(--mono); font-size:11.5px; color:var(--fg-2); padding:6px 12px; border:1px solid var(--line); border-radius:100px; }

.related{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(48px,6vw,80px) 0; }
.related h2{ font-family:var(--head); font-weight:800; font-size:26px; letter-spacing:-.02em; margin-bottom:28px; }

/* ===== Medium-style reading upgrade ===== */
.art-wrap{ max-width:716px; }
.art-dek{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:clamp(19px,1.9vw,23px); line-height:1.5; color:var(--fg-2); }
.art-body p{ font-family:'Newsreader',Georgia,serif; font-size:20px; line-height:1.8; color:#E8E8E3; margin-top:26px; letter-spacing:.003em; }
.art-body p:first-child{ margin-top:0; }
.art-body .drop:first-letter{ font-family:var(--display); font-size:3.7em; line-height:.78; float:left; margin:8px 16px -2px 0; color:var(--volt); }
.art-body li{ font-family:'Newsreader',Georgia,serif; font-size:18.5px; line-height:1.68; color:#D8D8D2; }
.art-body h2{ scroll-margin-top:88px; margin-top:clamp(46px,5vw,68px); }
.art-body h3{ scroll-margin-top:88px; }
.art-body blockquote{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(23px,2.7vw,31px); line-height:1.34; color:var(--fg); letter-spacing:-.01em; }
.art-body a{ text-decoration-color:var(--volt-dim); text-underline-offset:3px; }
.art-body strong{ color:#F4F4F1; font-weight:600; }
.callout p{ font-family:'Newsreader',Georgia,serif; }
.callout li{ font-size:16px !important; }

/* Table of contents */
.toc{ margin:clamp(30px,3.6vw,44px) 0; padding:22px 26px; background:var(--bg-3); border:1px solid var(--line); border-left:3px solid var(--volt); border-radius:var(--r); }
.toc__t{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--volt); }
.toc ol{ margin-top:14px; display:flex; flex-direction:column; gap:10px; counter-reset:toc; padding:0; }
.toc li{ counter-increment:toc; padding-left:32px; position:relative; }
.toc li::before{ content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:2px; font-family:var(--mono); font-size:11px; color:var(--fg-4); }
.toc a{ font-family:var(--head); font-weight:600; font-size:15px; color:var(--fg-2); text-decoration:none; transition:color var(--t); line-height:1.35; display:inline-block; }
.toc a:hover, .toc a.active{ color:var(--volt); }

/* Reading progress */
.reading-progress{ position:fixed; top:0; left:0; right:0; height:3px; background:transparent; z-index:200; pointer-events:none; }
.reading-progress i{ display:block; height:100%; width:0; background:var(--volt); box-shadow:0 0 10px var(--volt); }

/* Share row + author card */
.share-row{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.share-row__l{ font-family:var(--mono); font-size:11.5px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.1em; margin-right:4px; }
.share-btn{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--fg-2); padding:8px 14px; border:1px solid var(--line-2); border-radius:100px; background:var(--bg-3); transition:all var(--t); cursor:pointer; }
.share-btn:hover{ border-color:var(--volt); color:var(--volt); }
.author-card{ margin-top:32px; display:flex; gap:18px; padding:26px; background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-lg); }
.author-card .av{ width:50px; height:50px; flex-shrink:0; border-radius:10px; background:var(--volt); color:#0A0A0B; display:grid; place-items:center; font-family:var(--display); font-size:22px; }
.author-card__name{ font-family:var(--head); font-weight:800; font-size:17px; }
.author-card__bio{ margin-top:6px; font-size:14px; color:var(--fg-3); line-height:1.55; max-width:52ch; }