/* ============================================================
   Pitchref blog + changelog — extends css/style.css (loaded first:
   tokens, nav, footer, buttons, kicker, reveal all come from there).
   ============================================================ */

.blog-body main{padding-top:68px}
.nav-links a.active{color:#fff}

.wrap-narrow{max-width:780px;margin:0 auto;padding:0 32px}

/* ---------- hero head ---------- */
.blog-hero{position:relative;padding:84px 0 44px;
  background:radial-gradient(900px 420px at 18% -10%,rgba(237,28,36,.10),transparent 60%),
             radial-gradient(700px 420px at 85% 0%,rgba(109,91,255,.06),transparent 60%),var(--ink)}
.blog-hero h1{font-size:clamp(40px,5.6vw,72px);color:#fff;letter-spacing:-0.04em;line-height:1;margin:18px 0 18px}
.blog-hero .serif-i{color:var(--red);text-shadow:0 0 50px var(--red-glow)}
.blog-hero-cat .serif-i,.blog-hero-cat h1{color:#fff}
.blog-sub{font-size:17px;color:var(--on-ink-mute);max-width:60ch}
.hero-hairline{position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:linear-gradient(90deg,rgba(237,28,36,.65),rgba(109,91,255,.5) 45%,rgba(0,194,209,.4) 75%,transparent);
  opacity:.55}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:0.08em}
.crumbs a{color:var(--on-ink-mute-2);transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs .c-sep{color:rgba(244,244,246,0.25)}
.crumbs .c-here{color:var(--on-ink-mute);max-width:46ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- category filter ---------- */
.blog-list{padding:44px 0 120px}
.filter-bar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:40px}
.fpill{--cat:#FF6A70;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--on-ink-mute);border:1px solid var(--ink-line);border-radius:var(--r-pill);padding:8px 16px;
  transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease)}
.fpill:hover{color:#fff;border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.fpill.on{color:var(--cat);border-color:color-mix(in srgb,var(--cat) 55%,transparent);
  background:color-mix(in srgb,var(--cat) 8%,transparent)}
.filter-empty{margin-top:26px;font-family:var(--mono);font-size:13px;color:var(--on-ink-mute-2)}

/* ---------- category pill (on cards + posts) ---------- */
.cat-pill{--cat:#FF6A70;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--cat);
  border:1px solid color-mix(in srgb,var(--cat) 40%,transparent);border-radius:var(--r-pill);padding:4px 11px;
  transition:background .25s,transform .25s var(--ease)}
a.cat-pill:hover{background:color-mix(in srgb,var(--cat) 10%,transparent);transform:translateY(-1px)}
.pill-dot{width:5px;height:5px;border-radius:50%;background:var(--cat)}

/* ---------- featured card ---------- */
.bfeatured{display:grid;grid-template-columns:1.25fr 1fr;gap:0;margin-bottom:44px;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--ink-line);background:var(--ink-1);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.bfeatured:hover{border-color:rgba(237,28,36,.45);transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(237,28,36,.16),0 0 70px -18px var(--red-glow),0 30px 80px -30px rgba(0,0,0,.85)}
.bf-media{display:block;min-height:100%;overflow:hidden}
.bf-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bfeatured:hover .bf-media img{transform:scale(1.025)}
.bf-body{padding:38px 38px 34px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bf-title{font-size:clamp(24px,2.6vw,34px);letter-spacing:-0.03em;line-height:1.12}
.bf-title a{color:#fff;transition:color .25s}
.bf-title a:hover{color:var(--red-text)}
.bf-desc{font-size:15px;color:var(--on-ink-mute);line-height:1.65}
.bf-btn{margin-top:auto}

/* ---------- card grid ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--ink-line);background:var(--ink-1);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease),
             opacity .35s var(--ease),scale .35s var(--ease)}
.bcard:hover{border-color:rgba(237,28,36,.45);transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(237,28,36,.16),0 0 60px -18px var(--red-glow),0 24px 70px -28px rgba(0,0,0,.85)}
.bcard-media{display:block;overflow:hidden;border-bottom:1px solid var(--ink-line-2)}
.bcard-media img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;transition:transform .8s var(--ease)}
.bcard:hover .bcard-media img{transform:scale(1.03)}
.bcard-body{padding:22px 22px 20px;display:flex;flex-direction:column;gap:11px;flex:1}
.bcard-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bcard-date{font-family:var(--mono);font-size:11px;color:var(--on-ink-mute-2);text-transform:uppercase;letter-spacing:0.06em}
.bcard-title{font-size:18.5px;letter-spacing:-0.02em;line-height:1.25}
.bcard-title a{color:#fff;transition:color .25s}
.bcard-title a:hover{color:var(--red-text)}
.bcard-desc{font-size:13.5px;color:var(--on-ink-mute);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard-read{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--on-ink-mute-2);
  text-transform:uppercase;letter-spacing:0.08em}

/* client-side filtering */
.bcard.f-hide,.bfeatured.f-hide{display:none}

/* ---------- post page ---------- */
.post-head{padding:84px 0 0}
.post-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.pm-date,.pm-read,.pm-upd{font-family:var(--mono);font-size:11.5px;color:var(--on-ink-mute-2);
  text-transform:uppercase;letter-spacing:0.07em}
.pm-upd{color:var(--green)}
.post-title{font-size:clamp(34px,4.6vw,58px);color:#fff;letter-spacing:-0.035em;line-height:1.04;margin-bottom:20px}
.post-title .serif-i{color:var(--cat,#FF6A70)}
.post-lede{font-size:19px;color:var(--on-ink-mute);line-height:1.6;max-width:62ch;margin-bottom:38px}
.post-hero img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--ink-line);
  box-shadow:0 0 0 1px rgba(237,28,36,.10),0 0 70px -22px var(--red-glow),0 30px 90px -40px rgba(0,0,0,.9)}
.post-body{padding:52px 32px 8px}

/* ---------- prose ---------- */
.prose{font-size:16.5px;color:rgba(244,244,246,0.78);line-height:1.8}
.prose p{margin-bottom:20px}
.prose strong{color:#fff;font-weight:500}
.prose a{color:var(--red-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .2s}
.prose a:hover{color:#fff}
.prose h2{font-size:26px;color:#fff;letter-spacing:-0.02em;margin:46px 0 16px;padding-top:26px;
  border-top:1px solid var(--ink-line-2)}
.prose h3{font-size:19px;color:#fff;letter-spacing:-0.01em;margin:32px 0 12px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:4px;display:flex;flex-direction:column;gap:10px;list-style:none}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:'';position:absolute;left:0;top:11px;width:11px;height:6px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.prose ol{counter-reset:li}
.prose ol li{position:relative;padding-left:34px;counter-increment:li}
.prose ol li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:12.5px;color:var(--red-text)}
.prose blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--red);
  font-family:var(--serif);font-style:italic;font-size:20px;color:rgba(244,244,246,0.85);line-height:1.6}
.prose blockquote p{margin-bottom:0}
.prose code{font-family:var(--mono);font-size:.86em;color:#F5C56A;background:rgba(255,255,255,.05);
  border:1px solid var(--ink-line-2);border-radius:6px;padding:2px 7px}
.prose pre{margin:26px 0;padding:20px 22px;background:#070709;border:1px solid var(--ink-line);
  border-radius:var(--r-md);overflow-x:auto;box-shadow:0 18px 50px -24px rgba(0,0,0,.9)}
.prose pre code{background:none;border:0;padding:0;color:var(--on-ink);font-size:13.5px;line-height:1.7}
.prose hr{border:0;height:1px;margin:40px 0;
  background:linear-gradient(90deg,rgba(237,28,36,.5),rgba(109,91,255,.35) 50%,transparent)}
.prose img{border-radius:var(--r-md);border:1px solid var(--ink-line)}
.table-wrap{margin:26px 0;overflow-x:auto;border:1px solid var(--ink-line);border-radius:var(--r-md)}
.prose table{width:100%;border-collapse:collapse;font-size:14px}
.prose th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--on-ink-mute);text-align:left;padding:12px 16px;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--ink-line)}
.prose td{padding:12px 16px;border-bottom:1px solid var(--ink-line-2);color:rgba(244,244,246,0.75)}
.prose tr:last-child td{border-bottom:0}

/* ---------- tags / prev-next ---------- */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:26px;padding-bottom:8px}
.tag{font-family:var(--mono);font-size:11px;color:var(--on-ink-mute-2);border:1px solid var(--ink-line);
  border-radius:var(--r-pill);padding:5px 12px;text-transform:lowercase}
.post-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:34px;padding-bottom:10px}
.pn{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--ink-line);
  border-radius:var(--r-md);background:var(--ink-1);transition:border-color .3s,transform .3s var(--ease)}
.pn:hover{border-color:rgba(237,28,36,.4);transform:translateY(-2px)}
.pn-next{text-align:right;align-items:flex-end}
.pn-k{font-family:var(--mono);font-size:10.5px;color:var(--on-ink-mute-2);text-transform:uppercase;letter-spacing:0.08em}
.pn-t{font-size:14px;color:#fff;line-height:1.35}

/* ---------- related + CTA ---------- */
.post-related{padding:84px 0 30px}
.section-head-sm{margin-bottom:34px}
.section-head-sm h2{font-size:clamp(26px,3vw,38px);color:#fff;margin-top:14px}
.section-head-sm .serif-i{color:var(--red)}
.post-cta{padding:110px 0 130px;text-align:center;position:relative;overflow:hidden}
.post-cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 420px at 50% 0%,rgba(237,28,36,.16),transparent 62%)}
.cta-inner{position:relative;max-width:680px;margin:0 auto;padding:0 32px}
.post-cta h2{font-size:clamp(30px,4.4vw,52px);color:#fff;letter-spacing:-0.035em}
.post-cta .serif-i{color:var(--red);text-shadow:0 0 50px var(--red-glow)}
.post-cta p{margin:16px 0 30px;color:var(--on-ink-mute);font-size:16.5px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- changelog ---------- */
.clog{position:relative;padding:30px 0 110px}
.clog .wrap-narrow{position:relative}
.clog-rail{position:absolute;top:0;bottom:0;left:44px;width:1.5px;
  background:linear-gradient(180deg,var(--red),var(--geo) 45%,var(--geo-2) 80%,transparent);opacity:.4}
.clog-entry{position:relative;padding:0 0 44px 96px}
.clog-node{position:absolute;left:37.5px;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--ink);border:2px solid var(--red);
  box-shadow:0 0 0 4px rgba(237,28,36,.12),0 0 18px -2px var(--red-glow)}
.clog-date{font-family:var(--mono);font-size:11.5px;color:var(--on-ink-mute-2);text-transform:uppercase;
  letter-spacing:0.1em;margin-bottom:12px}
.clog-card{border:1px solid var(--ink-line);border-radius:var(--r-lg);background:var(--ink-1);
  padding:26px 28px 22px;transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.clog-card:hover{border-color:rgba(237,28,36,.4);transform:translateY(-2px);
  box-shadow:0 0 60px -22px var(--red-glow),0 22px 60px -30px rgba(0,0,0,.85)}
.clog-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ctag{--tag:#2BD576;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--tag);border:1px solid color-mix(in srgb,var(--tag) 45%,transparent);border-radius:var(--r-pill);
  padding:3px 10px;background:color-mix(in srgb,var(--tag) 7%,transparent)}
.clog-title{font-size:21px;color:#fff;letter-spacing:-0.02em;margin-bottom:10px}
.clog-body{font-size:14.5px}
.clog-body p{margin-bottom:12px}
.clog-body p:last-child{margin-bottom:0}
.clog-body ul{gap:7px;margin-bottom:12px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .bfeatured{grid-template-columns:1fr}
  .bf-media img{aspect-ratio:1200/630;height:auto}
}
@media (max-width:640px){
  .wrap-narrow{padding:0 22px}
  .blog-hero{padding:64px 0 34px}
  .blog-list{padding:34px 0 90px}
  .bgrid{grid-template-columns:1fr}
  .bf-body{padding:26px 24px}
  .post-body{padding:40px 22px 8px}
  .post-pn{grid-template-columns:1fr}
  .clog-rail{left:22px}
  .clog-node{left:15.5px}
  .clog-entry{padding-left:56px}
  .prose{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .bcard,.bfeatured,.pn,.clog-card,.fpill,.cat-pill{transition:none}
  .bcard-media img,.bf-media img{transition:none}
}