/* Blog-specific styles. Loads on top of landing.css and reuses its design
   tokens (--ink, --body, --blue, --border, --card, --soft, --radius, fonts)
   so the blog matches the rest of the site and follows the light/dark theme. */

.blog-hero{padding:clamp(2.4rem,6vw,4.2rem) 0 clamp(1.4rem,3vw,2rem);}
.crumbs{font:600 .82rem/1.4 var(--font-b);color:var(--muted);margin-bottom:1.1rem;}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--blue);}
.crumbs span{margin:0 .45rem;opacity:.6;}

.post-cat{display:inline-block;font:700 .72rem/1 var(--font-b);letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-glow);
  padding:.42rem .7rem;border-radius:999px;margin-bottom:1rem;}

.post-head h1{font-family:var(--display);font-weight:800;line-height:1.1;
  font-size:clamp(1.9rem,4.6vw,3rem);color:var(--ink);margin:0 0 .9rem;letter-spacing:-.02em;}
.post-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;
  font:500 .9rem/1.4 var(--font-b);color:var(--muted);}
.post-meta b{color:var(--body);font-weight:600;}
.post-meta .sep{opacity:.5;}

/* Article prose -------------------------------------------------------- */
.prose{max-width:720px;margin:0 auto;font:400 1.075rem/1.75 var(--font-b);color:var(--body);}
.prose>.lead{font-size:1.2rem;line-height:1.7;color:var(--ink);font-weight:500;margin:0 0 1.6rem;}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.8vw,1.7rem);
  color:var(--ink);line-height:1.25;margin:2.4rem 0 .9rem;letter-spacing:-.01em;}
.prose h3{font-family:var(--font-h);font-weight:600;font-size:1.18rem;color:var(--ink);margin:1.7rem 0 .6rem;}
.prose p{margin:0 0 1.15rem;}
.prose a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid var(--border-s);}
.prose a:hover{border-bottom-color:var(--blue);}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.3rem;}
.prose li{margin:0 0 .55rem;}
.prose strong{color:var(--ink);font-weight:700;}
.prose blockquote{margin:1.6rem 0;padding:.4rem 0 .4rem 1.2rem;border-left:3px solid var(--blue);
  color:var(--ink);font-size:1.12rem;font-style:italic;}
.callout{background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.3rem 1.5rem;margin:1.8rem 0;font-size:1rem;}
.callout p:last-child{margin-bottom:0;}

/* Author + related ----------------------------------------------------- */
.author-box{max-width:720px;margin:2.6rem auto 0;display:flex;gap:1rem;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.2rem 1.4rem;box-shadow:var(--shadow-sm);}
.author-box .av{flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;
  display:grid;place-items:center;font:800 1.1rem var(--display);}
.author-box b{display:block;color:var(--ink);font-family:var(--font-h);}
.author-box span{color:var(--muted);font-size:.9rem;}

.rel-posts{max-width:720px;margin:2.4rem auto 0;}
.rel-posts h2{font-family:var(--display);font-size:1.3rem;color:var(--ink);margin:0 0 1rem;}
.rel-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:.95rem 1.2rem;margin-bottom:.7rem;text-decoration:none;transition:.2s;}
.rel-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.rel-card b{color:var(--ink);font-family:var(--font-h);font-weight:600;}
.rel-card span{display:block;color:var(--muted);font-size:.88rem;margin-top:.15rem;}

/* Blog index grid ------------------------------------------------------ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.4rem;margin-top:2rem;}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem 1.6rem;text-decoration:none;transition:.2s;box-shadow:var(--shadow-sm);}
.post-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow);}
.post-card .post-cat{margin-bottom:.8rem;}
.post-card h2{font-family:var(--display);font-weight:700;font-size:1.28rem;line-height:1.25;
  color:var(--ink);margin:0 0 .6rem;letter-spacing:-.01em;}
.post-card p{color:var(--body);font:400 .98rem/1.6 var(--font-b);margin:0 0 1.1rem;flex:1;}
.post-card .pm{color:var(--muted);font:500 .84rem/1 var(--font-b);}

/* FAQ block on posts (reuses .faq look but scoped) */
.post-faq{max-width:720px;margin:2.6rem auto 0;}
.post-faq h2{font-family:var(--display);font-size:1.5rem;color:var(--ink);margin:0 0 1rem;}