/* =====================================================================
   Premium blog — index, single article, dynamic CTA.
   Loads after refinements.css on blog index, single posts and archives.
   ===================================================================== */

/* ---------- Reading progress ---------- */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;background:transparent;pointer-events:none}
.reading-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--volt),var(--volt2));box-shadow:0 0 12px var(--volt-glow,rgba(64,102,255,.6));transition:width .1s linear}

/* ---------- Index hero ---------- */
.blog-index-hero{padding:calc(var(--nav-h) + clamp(3rem,7vw,6rem)) 0 clamp(1.5rem,3vw,2.5rem)}
.blog-index-hero__h1{font-family:var(--ff-display);font-weight:600;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.6rem,6vw,5rem);margin:.4rem 0 0}
.blog-index-hero__sub{color:var(--chalk2);max-width:60ch;margin-top:1.5rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6}

/* ---------- Index layout ---------- */
.blog-index{padding-top:clamp(1rem,2vw,2rem)}
.blog-index__rule{height:1px;background:var(--line);margin:clamp(2.5rem,5vw,4rem) 0}

/* Featured lead article */
.blog-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.blog-feature__media{display:block;border-radius:var(--r-xl);overflow:hidden;background:var(--ink3);aspect-ratio:16/11;border:1px solid var(--line)}
.blog-feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.blog-feature:hover .blog-feature__media img{transform:scale(1.04)}
.blog-feature__title{font-family:var(--ff-display);font-weight:600;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.8rem,3.2vw,2.9rem);margin:.8rem 0 1rem}
.blog-feature__title a{color:var(--chalk);text-decoration:none;background-image:linear-gradient(var(--volt2),var(--volt2));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease-out)}
.blog-feature__title a:hover{background-size:100% 2px}
.blog-feature__excerpt{color:var(--chalk2);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;margin-bottom:1.6rem;max-width:48ch}
.blog-card__cat--featured{color:var(--ink);background:var(--volt2);padding:.18em .6em;border-radius:100px;font-weight:600}

/* 3-up grid + reading-time meta */
.blog-grid--3{grid-template-columns:repeat(3,1fr)}
.blog-card__meta{display:flex;align-items:center;gap:.4em;flex-wrap:wrap}
.post-thumb-fallback{width:100%;height:100%;background:radial-gradient(120% 120% at 0 0,var(--ink3),var(--ink2));display:grid;place-items:center}
.post-thumb-fallback span{width:46px;height:46px;border-radius:50%;background:conic-gradient(from 180deg,var(--volt),var(--gold),var(--volt2));opacity:.5}

/* =====================================================================
   SINGLE POST
   ===================================================================== */
.post-hero{padding:calc(var(--nav-h) + clamp(2.5rem,6vw,5rem)) 0 0;text-align:center}
.post-hero__inner{max-width:820px}
.breadcrumb.post-hero__bc{justify-content:center;display:flex;gap:.5rem;flex-wrap:wrap;font-size:13px;color:var(--chalk3)}
.post-hero__bc a{color:var(--chalk3);text-decoration:none;transition:color .25s}
.post-hero__bc a:hover{color:var(--chalk)}
.post-hero__cat{display:inline-block;margin-top:1.4rem;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--volt2);border:1px solid var(--volt-dim);background:var(--volt-dim);padding:.4em .9em;border-radius:100px;text-decoration:none;transition:border-color .25s}
.post-hero__cat:hover{border-color:var(--volt2)}
.post-hero__title{font-family:var(--ff-display);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2.1rem,4.6vw,3.7rem);margin:1.2rem auto .6rem;max-width:18ch}
.post-hero__deck{color:var(--chalk2);font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.55;max-width:60ch;margin:1.2rem auto 0}
.post-hero__meta{display:inline-flex;align-items:center;gap:.85rem;margin-top:2rem;text-align:left}
.post-hero__avatar,.post-author__av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--volt),var(--volt2));color:#fff;font-family:var(--ff-display);font-weight:600;font-size:14px;letter-spacing:.02em;flex-shrink:0}
.post-hero__byline{display:flex;flex-direction:column;line-height:1.35}
.post-hero__author{font-weight:600;color:var(--chalk)}
.post-hero__sub{font-size:13px;color:var(--chalk3)}
.post-hero__media{margin:clamp(2.5rem,5vw,4rem) auto 0;max-width:var(--max-w)}
.post-hero__media img{width:100%;height:auto;border-radius:var(--r-xl);border:1px solid var(--line);display:block}

/* Body + sidebar grid */
.post-layout{display:grid;grid-template-columns:230px minmax(0,720px);gap:clamp(2rem,5vw,4.5rem);justify-content:center;padding:clamp(2.5rem,5vw,4rem) var(--pad,24px)}
.post-aside__sticky{position:sticky;top:calc(var(--nav-h) + 2rem);display:flex;flex-direction:column;gap:2rem}

/* Table of contents */
.post-toc__label,.post-share__label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk3);margin:0 0 .9rem}
.post-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line2);display:flex;flex-direction:column}
.post-toc li{margin:0}
.post-toc a{display:block;padding:.4rem 0 .4rem 1rem;margin-left:-1px;border-left:2px solid transparent;color:var(--chalk3);text-decoration:none;font-size:14px;line-height:1.4;transition:color .25s,border-color .25s}
.post-toc a:hover{color:var(--chalk)}
.post-toc a.is-active{color:var(--chalk);border-left-color:var(--volt2)}

/* Share rail */
.post-share{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.post-share__btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--ink2);color:var(--chalk2);cursor:pointer;transition:border-color .25s,color .25s,transform .25s}
.post-share{flex-direction:row;flex-wrap:wrap}
.post-share__label{width:100%}
.post-share__btn:hover{color:var(--chalk);border-color:var(--volt2);transform:translateY(-2px)}
.post-share__btn.is-copied{border-color:var(--green);color:var(--green)}

/* ---------- Article typography ---------- */
.post-body{font-size:clamp(1.08rem,1.35vw,1.22rem);line-height:1.8;color:var(--chalk2)}
.post-body > p:first-of-type{font-size:1.15em;color:var(--chalk)}
.post-body > p:first-of-type::first-letter{float:left;font-family:var(--ff-display);font-weight:600;font-size:3.6em;line-height:.82;padding:.05em .12em 0 0;color:var(--chalk);background:linear-gradient(180deg,var(--chalk),var(--volt2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.post-body p{margin:0 0 1.5rem}
.post-body h2{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.55rem,2.6vw,2.1rem);color:var(--chalk);margin:2.8rem 0 1rem;scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.post-body h3{font-family:var(--ff-display);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.25rem,1.9vw,1.5rem);color:var(--chalk);margin:2rem 0 .8rem}
.post-body a{color:var(--volt2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .25s}
.post-body a:hover{color:var(--chalk)}
.post-body strong{color:var(--chalk);font-weight:600}
/* Lists — the global "ul,ol{list-style:none}" reset removes markers,
   so we draw our own bullets/numbers for the article body. */
.post-body ul,.post-body ol{margin:0 0 1.6rem;padding:0;list-style:none;counter-reset:li}
.post-body li{position:relative;margin:0 0 .7rem;padding-left:1.8rem;line-height:1.7}
.post-body ul > li::before{content:"";position:absolute;left:.25rem;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--volt2);box-shadow:0 0 8px rgba(64,102,255,.5)}
.post-body ol{counter-reset:li}
.post-body ol > li{counter-increment:li}
.post-body ol > li::before{content:counter(li);position:absolute;left:0;top:.05em;width:1.3rem;height:1.3rem;display:grid;place-items:center;font-family:var(--ff-display);font-size:.78em;font-weight:600;color:var(--volt2);border:1px solid var(--volt-dim);border-radius:50%;line-height:1}
.post-body li strong{color:var(--chalk)}
.post-body blockquote{margin:2.2rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:3px solid var(--volt2);font-family:var(--ff-display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.4;color:var(--chalk);letter-spacing:-.01em}
.post-body blockquote p{margin:0}
.post-body img{max-width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);margin:2rem 0}
.post-body hr{border:0;height:1px;background:var(--line);margin:2.5rem 0}
.post-body code{font-family:var(--ff-mono);font-size:.9em;background:var(--ink3);border:1px solid var(--line);padding:.12em .4em;border-radius:6px;color:var(--chalk)}
.post-body figure{margin:2rem 0}
.post-body figcaption{font-size:13px;color:var(--chalk3);text-align:center;margin-top:.6rem}

/* ---------- Dynamic in-article CTA ---------- */
.post-cta{position:relative;margin:2.8rem 0;border:1px solid var(--line2);border-radius:var(--r-xl);background:linear-gradient(180deg,var(--ink2),var(--ink3));overflow:hidden;isolation:isolate}
.post-cta__glow{position:absolute;inset:-40% -10% auto -10%;height:200px;background:radial-gradient(60% 100% at 30% 0,var(--volt-dim),transparent 70%);z-index:-1;pointer-events:none}
.post-cta__inner{padding:clamp(1.6rem,3vw,2.4rem)}
.post-cta__eyebrow{display:flex;align-items:center;gap:.5em;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--volt2);margin:0 0 .8rem}
.post-cta__h{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.4rem,2.4vw,1.95rem);color:var(--chalk);margin:0 0 .7rem}
.post-cta__p{color:var(--chalk2);font-size:1rem;line-height:1.6;margin:0 0 1.5rem;max-width:52ch}
/* The CTA sits inside .post-body, where "a" links are volt + underlined.
   Force the button back to a solid, high-contrast button. */
.post-body a.btn,.post-cta a.btn{text-decoration:none;background-image:none}
.post-body a.btn--primary,.post-cta a.btn--primary{color:#fff;background:var(--volt);border:1px solid rgba(64,102,255,.6)}
.post-body a.btn--primary:hover,.post-cta a.btn--primary:hover{color:#fff;background:var(--volt2)}

/* ---------- Tags, author, related ---------- */
.post-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.5rem 0 0}
.post-tag{font-size:13px;color:var(--chalk3);border:1px solid var(--line2);border-radius:100px;padding:.35em .9em;text-decoration:none;transition:color .25s,border-color .25s}
.post-tag:hover{color:var(--chalk);border-color:var(--volt2)}
.post-author{display:flex;gap:1.1rem;align-items:flex-start;margin:2.5rem 0 0;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink2)}
.post-author__av{width:54px;height:54px;font-size:16px}
.post-author__name{font-family:var(--ff-display);font-weight:600;color:var(--chalk);margin:0 0 .3rem}
.post-author__bio{color:var(--chalk3);font-size:14px;line-height:1.6;margin:0}
.related-posts{border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,5rem)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
	.post-layout{grid-template-columns:minmax(0,720px)}
	.post-aside{order:2}
	.post-aside__sticky{position:static;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
	.post-toc{display:none}
	.blog-feature{grid-template-columns:1fr}
	.blog-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
	.blog-grid--3{grid-template-columns:1fr}
	.post-hero__title{font-size:clamp(1.9rem,8vw,2.4rem)}
	.post-body > p:first-of-type::first-letter{font-size:3em}
}