.blog-wrap{max-width:760px}
.blog-hero{background:var(--surface-alt);border-bottom:1px solid var(--border);padding:56px 0 40px}
.blog-hero h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.02em;margin-bottom:10px}
.blog-hero p{color:var(--text-muted);font-size:1.125rem;max-width:620px}
.blog-back{display:inline-block;font-size:.875rem;font-weight:600;color:var(--primary);margin-bottom:16px}
.blog-back:hover{text-decoration:underline}

.blog-list{padding-top:12px;padding-bottom:64px}
.blog-card{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:28px 0;border-bottom:1px solid var(--border-light)}
.blog-card__body{flex:1;min-width:0}
.blog-card h2,.blog-card h3{font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.3;letter-spacing:-.01em;margin:8px 0 6px}
.blog-card h2 a:hover,.blog-card h3 a:hover{color:var(--primary-light)}
.blog-card p{color:var(--text-muted);font-family:Charter,'Bitstream Charter','Sitka Text',Cambria,Georgia,serif;font-size:1rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__img{flex:none}
.blog-card__img img{width:200px;height:134px;object-fit:cover;border-radius:var(--radius-md);display:block}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8125rem;color:var(--text-light)}
.blog-chip{background:var(--surface-alt);color:var(--text);padding:2px 10px;border-radius:99px;font-weight:600}
.blog-chip:hover{background:var(--border)}
.blog-empty{text-align:center;padding:56px 0}
.blog-empty p{color:var(--text-muted);margin:8px 0 20px}
.blog-pager{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:.875rem;color:var(--text-muted)}
.blog-pager a{color:var(--primary);font-weight:700}

.blog-post{max-width:720px;margin:0 auto;padding:44px 20px 24px}
.blog-post__head h1{font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:14px}
.blog-subtitle{font-family:Charter,'Bitstream Charter','Sitka Text',Cambria,Georgia,serif;font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1.45;color:var(--text-muted);margin-bottom:18px}
.blog-meta--post{padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:28px}
.blog-cover{margin:0 0 32px}
.blog-cover img{width:100%;border-radius:var(--radius-md)}

.blog-prose{font-family:Charter,'Bitstream Charter','Sitka Text',Cambria,Georgia,'Times New Roman',serif;font-size:1.25rem;line-height:1.75;color:#242a3d;overflow-wrap:break-word}
.blog-prose p{margin:0 0 1.3em}
.blog-prose h1,.blog-prose h2{font-family:var(--font-heading);font-size:1.75rem;line-height:1.25;margin:1.7em 0 .5em}
.blog-prose h3,.blog-prose h4{font-family:var(--font-heading);font-size:1.35rem;line-height:1.3;margin:1.5em 0 .4em}
.blog-prose a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.blog-prose a:hover{color:var(--primary-light)}
.blog-prose ul,.blog-prose ol{list-style:revert;margin:0 0 1.3em;padding-left:1.5em}
.blog-prose li{margin:.4em 0}
.blog-prose blockquote{margin:1.7em 0;padding:2px 0 2px 24px;border-left:4px solid var(--accent);font-style:italic;font-size:1.1em;color:var(--primary-dark)}
.blog-prose pre{background:var(--primary-dark);color:#e8ecf8;padding:16px 18px;border-radius:var(--radius-md);overflow:auto;font-size:.9375rem;line-height:1.6;margin:1.5em 0}
.blog-prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em}
.blog-prose :not(pre)>code{background:var(--surface-alt);padding:2px 6px;border-radius:4px}
.blog-prose img{display:block;margin:1.8em auto;border-radius:var(--radius-sm)}
.blog-prose hr{border:0;text-align:center;margin:2.2em 0}
.blog-prose hr::before{content:"···";letter-spacing:.6em;font-size:1.75rem;color:var(--text-light)}
.ql-align-center{text-align:center}
.ql-align-right{text-align:right}
.ql-align-justify{text-align:justify}
.ql-indent-1{padding-left:3em}
.ql-indent-2{padding-left:6em}
.ql-indent-3{padding-left:9em}

.blog-tags{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0}
.blog-tags a{display:inline-block;background:var(--surface-alt);border:1px solid var(--border);padding:7px 16px;border-radius:99px;font-size:.875rem;font-weight:600}
.blog-tags a:hover{background:var(--border-light)}
.blog-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 0;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:.875rem}
.blog-share span{color:var(--text-muted);font-weight:600;margin-right:6px}
.blog-share a{color:var(--primary);font-weight:700;padding:4px 12px;border:1px solid var(--border);border-radius:99px}
.blog-share a:hover{background:var(--surface-alt)}
.blog-cta{margin:36px 0 0;background:var(--primary-dark);color:#fff;border-radius:var(--radius-lg);padding:28px;text-align:center}
.blog-cta h2{color:#fff;font-size:1.4rem;margin-bottom:8px}
.blog-cta p{color:#c9d2ee;margin-bottom:18px}
.blog-more{padding-top:24px;padding-bottom:64px}
.blog-more>h2{font-size:1.25rem;margin-bottom:0}
.blog-preview-bar{background:#fff8d6;border-bottom:1px solid #ecd98a;color:#5b4a00;text-align:center;font-size:.875rem;padding:10px 16px}

@media(max-width:640px){
  .blog-hero{padding:36px 0 28px}
  .blog-card{gap:14px;padding:22px 0}
  .blog-card__img img{width:96px;height:72px}
  .blog-prose{font-size:1.125rem}
  .blog-post{padding-top:28px}
}