/* ============================================================
   Blog index — page-specific styles. Loaded only on /blog.
   Relies on theme.css design tokens.
   ============================================================ */

.blog-wrap{padding:60px 0 84px}
.blog-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* ---------- card ---------- */
.blog-card{display:block;background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:28px 30px;box-shadow:0 1px 2px rgba(36,33,58,.04);transition:border-color .15s,box-shadow .15s}
.blog-card:hover{border-color:var(--border-strong);box-shadow:0 1px 2px rgba(36,33,58,.05),0 18px 40px -26px rgba(36,33,58,.3)}
.blog-card .dnone{display:none}

/* ---------- title ---------- */
.blog-card a[itemprop="url"]{display:block;text-decoration:none;margin-bottom:8px}
.blog-card h2{margin:0;font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1.28;color:var(--fg);transition:color .15s}
.blog-card a[itemprop="url"]:hover h2,.blog-card:hover h2{color:var(--accent)}

/* ---------- meta line ---------- */
.blog-card article{color:var(--fg-subtle);font-size:13.5px;line-height:1.6}
.blog-card [itemprop="author"]{color:var(--fg-muted);font-weight:550}
.blog-card time{white-space:nowrap}

/* ---------- image (hidden, microdata kept) ---------- */
.blog-card .img_header{display:none}

/* ---------- author avatar ---------- */
.blog-avatar{display:inline-block;width:26px;height:26px;vertical-align:middle;margin-right:9px;position:relative;top:-1px}

/* ============================================================
   Single post
   ============================================================ */
.post-head{max-width:840px;margin:0 auto;text-align:center;padding-top:6px}
.post-back{display:inline-block;margin-bottom:22px;color:var(--fg-muted);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .15s}
.post-back:hover{color:var(--accent)}
.post-head h1{margin:0;font-size:clamp(27px,3.8vw,40px);font-weight:720;letter-spacing:-.03em;line-height:1.14;color:var(--fg)}
.post-byline{text-align:center;margin:20px 0 0;color:var(--fg-subtle);font-size:14px}
.post-byline [itemprop="author"]{color:var(--fg-muted);font-weight:550}

.post-body{max-width:820px;margin:34px auto 0}
.post-body .img_header{margin:0 0 32px}
.post-body .img_header img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.post-body br{display:none}
.post-body p{color:var(--fg-muted);font-size:16.5px;line-height:1.78;margin:0 0 20px}
.post-body h3{font-size:21px;font-weight:660;letter-spacing:-.02em;color:var(--fg);margin:36px 0 12px}
.post-body h4{font-size:18.5px;font-weight:640;letter-spacing:-.015em;color:var(--fg);margin:30px 0 12px}
.post-body h6{font-size:16px;font-weight:650;color:var(--fg);margin:28px 0 10px}
.post-body img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border);margin:8px 0 6px}
.post-body ul,.post-body ol{color:var(--fg-muted);font-size:16px;line-height:1.75;margin:0 0 18px;padding-left:26px}
.post-body li{margin:8px 0}
.post-body strong{color:var(--fg);font-weight:650}
.post-body a{color:var(--accent);font-weight:500;text-decoration:none}
.post-body a:hover{text-decoration:underline}

@media (max-width:640px){
  .post-body p,.post-body ul,.post-body ol{font-size:15.5px}
  .post-body h3{font-size:19px}
}

/* ---------- excerpt ---------- */
.blog-card p[itemprop="description"]{margin:12px 0 0;color:var(--fg-muted);font-size:15px;line-height:1.65}

/* ---------- read more ---------- */
.blog-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--accent);font-weight:560;font-size:14px;text-decoration:none}
.blog-card__more::after{content:"\2192";transition:transform .15s}
.blog-card__more:hover{text-decoration:none}
.blog-card__more:hover::after{transform:translateX(3px)}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .blog-wrap{padding:44px 0 60px}
  .blog-card{padding:22px 20px}
  .blog-card h2{font-size:19px}
}