/* ---- blog index header ---- */
.blog-header{border-bottom:1px solid var(--line)}
.blog-header-inner{width:100%;max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(20px,5vw,48px) clamp(40px,5vw,56px)}
.blog-header-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.blog-header-eyebrow-line{width:26px;height:2px;background:linear-gradient(90deg,#5b6bff,#a855f7)}
.blog-header-eyebrow-text{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b6b74}
.blog-header-title{margin:0;max-width:760px;font-size:clamp(32px,4.4vw,52px);line-height:1.06;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.blog-header-sub{margin:22px 0 0;max-width:560px;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ---- blog index grid wrapper ---- */
.blog-list{background:var(--bg-alt)}
.blog-list-inner{width:100%;max-width:1280px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,5vw,48px)}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(40px,5vw,56px);font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted-2)}
.pager-link{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:8px;border:1px solid #d9d6cd;background:var(--bg);color:var(--ink);font-weight:600}
.pager-status{color:var(--mono-ink)}

/* ============================================================
   Single post
   ============================================================ */
.post-page{background:var(--bg)}
.article-wrap{width:100%;max-width:760px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(20px,5vw,40px) clamp(56px,8vw,96px)}
.article-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mono-ink);margin-bottom:30px}
.article-back .arw{color:var(--violet)}
.article-meta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#9a9aa2;margin-bottom:20px}
.article-cat{color:var(--violet);text-transform:uppercase;letter-spacing:.1em}
.article-dot{width:4px;height:4px;border-radius:50%;background:#c9c7bf}
.article-title{margin:0;font-size:clamp(32px,4.6vw,52px);line-height:1.08;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.article-standfirst{margin:24px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--muted);text-wrap:pretty}

.author{display:flex;align-items:center;gap:14px;margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.author-avatar{width:44px;height:44px;border-radius:50%;background:var(--grad-badge);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex-shrink:0}
.author-meta{display:flex;flex-direction:column;gap:2px}
.author-name{font-size:15px;font-weight:600;color:var(--ink-3)}
.author-read{font-family:var(--mono);font-size:12px;color:#9a9aa2}

.article-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--line-2);margin:clamp(32px,4vw,44px) 0 clamp(8px,2vw,16px)}
.article-cover-ph{width:100%;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line-2);background:#eceae2;display:flex;align-items:center;justify-content:center;margin:clamp(32px,4vw,44px) 0 clamp(8px,2vw,16px)}
.article-cover-ph span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#a4a49c}
.article-gap{height:clamp(28px,4vw,40px)}

/* ---- rendered post body typography ---- */
.article,.article-standfirst{text-align:justify}
.article{font-size:18px;line-height:1.75;color:#2f2f38}
.article > *:first-child{margin-top:0}
.article p{margin:0 0 24px;text-wrap:pretty}
.article h2{margin:48px 0 18px;font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink);text-align:left}
.article h3{margin:36px 0 14px;font-size:clamp(20px,2vw,23px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.article a{color:#6d4ce8;border-bottom:1px solid rgba(109,76,232,.35)}
.article a:hover{color:var(--violet)}
.article ul,.article ol{margin:0 0 24px;padding-left:24px}
.article li{margin:0 0 10px}
.article blockquote{margin:32px 0;padding:6px 0 6px 24px;border-left:3px solid;border-image:linear-gradient(180deg,#4d5cff,#a855f7) 1;font-size:20px;line-height:1.6;color:var(--ink-2);font-style:italic}
.article img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2);margin:8px 0 28px}
.article code{font-family:var(--mono);font-size:.88em;background:#f0eee7;border:1px solid var(--line-2);border-radius:6px;padding:2px 6px}
.article pre{margin:0 0 24px;padding:20px 22px;background:#131318;color:#e9e9ef;border-radius:12px;overflow:auto;font-family:var(--mono);font-size:14px;line-height:1.6}
.article pre code{background:none;border:none;padding:0;color:inherit}
.article hr{margin:40px 0;border:none;border-top:1px solid var(--line-2)}

.article-foot{margin-top:clamp(48px,6vw,72px);padding-top:32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:960px){
  .article,.article-standfirst{text-align:left}
}