/* ==========================================================================
   Metacubic Blog & article styles (loaded after style.css)
   ========================================================================== */

/* article header */
.article-head{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;
  padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,64px)}
.article-head::before{content:"";position:absolute;inset:0;background:
  radial-gradient(640px circle at 85% -20%,rgba(109,93,246,.40),transparent 55%),
  radial-gradient(520px circle at 0% 120%,rgba(34,211,238,.24),transparent 55%)}
.article-head .container{position:relative;z-index:1;max-width:840px}
.article-head .cat{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-2);margin-bottom:1em;display:inline-block}
.article-head h1{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);max-width:18ch;margin-bottom:.5em}
.article-meta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;color:var(--on-dark-muted);
  font-size:.9rem;margin-top:1.2em}
.article-meta .by{display:inline-flex;align-items:center;gap:.6em;color:var(--on-dark)}
.article-meta .by i{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;
  place-items:center;font-family:var(--f-display);font-weight:800;color:#fff;font-style:normal;font-size:.85rem}
.article-meta span::before{content:"·";margin-right:18px;color:var(--ink-3)}
.article-meta span:first-of-type::before{content:none}

/* layout: content + sticky aside */
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,5vw,64px);
  max-width:1140px;margin-inline:auto;padding:clamp(40px,6vw,72px) var(--pad)}
@media (max-width:980px){.article-wrap{grid-template-columns:1fr}}
.article-body{max-width:720px;font-size:1.075rem}
.article-body h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:1.9em;scroll-margin-top:90px}
.article-body h2:first-of-type{margin-top:.2em}
.article-body h3{font-size:1.28rem;margin-top:1.5em}
.article-body p{margin-bottom:1.2em}
.article-body figure{margin:1.6em 0}
.article-body figure img{width:100%;border-radius:var(--r);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.article-body figcaption{font-size:.84rem;color:var(--muted);text-align:center;margin-top:.7em}
.article-body ul,.article-body ol{margin-bottom:1.3em}
.article-body li{margin-bottom:.55em}
.article-body blockquote{border-left:3px solid var(--brand);background:var(--mist);margin:1.6em 0;
  padding:.6em 1.3em;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:1.1rem;color:var(--text)}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(109,93,246,.4)}
.article-body a:hover{text-decoration-color:var(--brand)}
.lead-para{font-size:1.22rem;line-height:1.6;color:var(--text);margin-bottom:1.4em}
.keyfacts{background:var(--mist);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r);padding:22px 24px;margin:1.6em 0}
.keyfacts h4{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-700);margin:0 0 .8em}
.keyfacts ul{margin:0;padding-left:1.1em}
.keyfacts li{margin-bottom:.5em;font-size:.97rem}

/* inline CTA inside articles */
.inline-cta{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:28px 30px;margin:2em 0;
  position:relative;overflow:hidden}
.inline-cta::before{content:"";position:absolute;inset:0;background:
  radial-gradient(500px circle at 100% 0,rgba(109,93,246,.5),transparent 60%)}
.inline-cta>*{position:relative;z-index:1}
.inline-cta h3{color:#fff;font-size:1.3rem;margin-bottom:.4em}
.inline-cta p{color:var(--on-dark-muted);margin-bottom:1.1em;font-size:.98rem}

/* aside */
.article-aside{align-self:start;position:sticky;top:90px;display:flex;flex-direction:column;gap:22px}
@media (max-width:980px){.article-aside{position:static}}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--shadow-sm)}
.toc h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:8px}
.toc a{color:var(--muted);font-size:.9rem;display:block;padding-left:12px;border-left:2px solid var(--line)}
.toc a:hover,.toc a.active{color:var(--brand-700);border-color:var(--brand)}
.aside-cta{background:var(--grad);border-radius:var(--r);padding:24px;color:#fff;box-shadow:var(--shadow-glow)}
.aside-cta h4{color:#fff;font-size:1.1rem;margin:0 0 .4em}
.aside-cta p{color:rgba(255,255,255,.85);font-size:.9rem;margin-bottom:1em}
.aside-cta .btn{background:#fff;color:var(--brand-700)}
.aside-cta .btn:hover{background:#fff;color:var(--brand-700)}

/* tags + share */
.article-foot{max-width:720px;border-top:1px solid var(--line);margin-top:2.4em;padding-top:1.6em;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.article-foot .taglist{margin:0}

/* blog index */
.blog-hero{padding-bottom:clamp(30px,4vw,48px)}
.feat{display:grid;grid-template-columns:1.3fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:var(--shadow);margin-bottom:44px}
@media (max-width:820px){.feat{grid-template-columns:1fr}}
.feat__media{background:var(--ink);min-height:280px}
.feat__media img{width:100%;height:100%;object-fit:cover}
.feat__body{padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;justify-content:center}
.feat__body .cat{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-700);margin-bottom:1em}
.feat__body h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.5em}
.feat__body p{color:var(--muted);margin-bottom:1.4em}
.postcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.postcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.postcard__media{aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.postcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.postcard:hover .postcard__media img{transform:scale(1.05)}
.postcard__body{padding:22px;display:flex;flex-direction:column;flex:1}
.postcard .cat{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-700);margin-bottom:.7em}
.postcard h3{font-size:1.16rem;margin-bottom:.4em;line-height:1.25}
.postcard h3 a{color:var(--text)}.postcard h3 a:hover{color:var(--brand-700)}
.postcard p{color:var(--muted);font-size:.92rem;margin-bottom:1em;flex:1}
.postcard__meta{font-size:.82rem;color:var(--muted);font-family:var(--f-mono)}
.soon{opacity:.62;pointer-events:none}
.soon .postcard__media{filter:grayscale(.4)}
.badge-soon{display:inline-block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--mist-2);color:var(--muted);padding:.3em .6em;border-radius:6px;margin-left:8px}

/* category filter row */
.cat-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.cat-row a{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);border:1px solid var(--line);
  padding:.5em .9em;border-radius:999px}
.cat-row a:hover,.cat-row a.active{color:#fff;background:var(--ink);border-color:var(--ink)}

/* reading progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:80;transition:width .1s linear}