/* HSK-BASE-003/004/011: reading-first layout, scoped to the blog. */
.blog-page { --blog-ink:#292524; --blog-muted:#665e59; --blog-accent:#982929; --blog-line:#ded8d2; --blog-paper:#fffdf9; background:var(--blog-paper); color:var(--blog-ink); }
.blog-page .seo-hero { background:transparent; border-bottom:0; padding-bottom:0; }
.blog-page .seo-hero__grid { display:block; max-width:880px; }
.blog-page .seo-hero__facts { display:none; }
.blog-page .seo-hero h1 { color:var(--blog-ink); font-size:clamp(2rem,4.2vw,3.5rem); line-height:1.12; letter-spacing:-.035em; text-wrap:balance; }
.blog-page .seo-hero__lead { max-width:64ch; color:var(--blog-muted); font-size:20px; line-height:1.55; }
.blog-page .seo-breadcrumb { flex-wrap:wrap; white-space:normal; overflow:visible; font-size:13px; }
.blog-page .seo-breadcrumb [aria-current] { min-width:0; overflow-wrap:anywhere; }
.blog-page main a:not(.button) { color:var(--blog-accent); text-decoration:underline; text-underline-offset:4px; }
.blog-page main a:focus-visible, .blog-page summary:focus-visible { outline:3px solid var(--blog-accent); outline-offset:5px; border-radius:2px; }
.blog-index { max-width:1040px; padding-block:32px 80px; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px; }
.blog-card { padding:30px 0; border-top:1px solid var(--blog-line); }
.blog-card h2 { font-family:Georgia,'Times New Roman',serif; font-size:1.65rem; font-weight:600; line-height:1.24; margin:12px 0; }
.blog-card h2 a { color:var(--blog-ink) !important; text-decoration:none !important; }
.blog-card h2 a:hover { text-decoration:underline !important; }
.blog-card p { color:var(--blog-muted); line-height:1.65; }
.blog-card .kicker, .blog-card small { font-size:13px; color:var(--blog-muted); letter-spacing:.015em; }
.blog-existing { margin-top:36px; border-top:1px solid var(--blog-line); padding-top:28px; }
.blog-existing article { padding-block:12px; }
.blog-existing p { color:var(--blog-muted); }
.blog-article-page .seo-hero > .shell, .blog-reading { width:min(720px,calc(100% - 48px)); max-width:720px; margin-inline:auto; }
.blog-article-page .seo-hero__grid { padding-block:24px 0; }
.blog-article-page .seo-hero__eyebrow { color:var(--blog-accent); font-size:12px; letter-spacing:.13em; }
.blog-byline { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; padding-block:16px; border-block:1px solid var(--blog-line); font:13px/1.65 Inter,system-ui,sans-serif; color:var(--blog-muted); }
.blog-byline a { color:var(--blog-ink) !important; font-weight:600; }
.blog-scope { margin:12px 0 0; font:13px/1.6 Inter,system-ui,sans-serif; color:var(--blog-muted); }
.blog-reading { padding-block:28px 80px; font:20px/1.7 Georgia,'Times New Roman',serif; overflow-wrap:anywhere; }
.blog-reading p { margin:0 0 24px; }
.blog-reading h2 { font-family:Inter,system-ui,sans-serif; font-size:clamp(1.35rem,2.5vw,1.7rem); line-height:1.3; letter-spacing:-.02em; text-wrap:balance; margin:0 0 22px; }
.blog-reading section, .blog-related { margin-top:48px; scroll-margin-top:140px; }
.blog-reading .blog-opening { font-size:1.06em; }
.blog-reading li { margin:12px 0; padding-left:4px; }
.blog-reading ul, .blog-reading ol { padding-left:24px; }
.blog-toc { margin-top:28px; border-block:1px solid var(--blog-line); font:15px/1.6 Inter,system-ui,sans-serif; }
.blog-toc summary { cursor:pointer; padding-block:16px; min-height:48px; }
.blog-toc ol { margin:0 0 20px; }
.blog-toc li { margin:0; }
.blog-toc a { display:inline-block; min-height:44px; padding-block:10px; }
.blog-example { margin:30px 0; padding:22px 26px; border-left:3px solid var(--blog-accent); background:#f4efe8; }
.blog-example figcaption, .blog-example .blog-example-label, .blog-eyebrow { font:12px/1.6 Inter,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--blog-muted); margin-bottom:16px; }
.blog-example p[lang] { font-family:'Songti SC','Noto Serif CJK SC',serif; font-size:1.2em; line-height:1.7; }
.blog-example p:last-child { margin-bottom:0; }
.blog-practice { margin-top:48px; padding-block:26px; border-block:1px solid var(--blog-line); font-family:Inter,system-ui,sans-serif; }
.blog-practice > a { display:inline-block; font-size:18px; font-weight:600; line-height:1.5; min-height:44px; padding-block:8px; }
.blog-practice > p:last-child { font-size:14px; line-height:1.7; color:var(--blog-muted); margin:12px 0 0; }
.blog-reading .blog-sources { color:var(--blog-muted); font:14px/1.7 Inter,system-ui,sans-serif; }
.blog-reading .blog-sources h2 { font-size:16px; }
.blog-note { color:var(--blog-muted); font:14px/1.7 Inter,system-ui,sans-serif; margin-top:28px; }
.blog-related { border-top:1px solid var(--blog-line); padding-top:28px; }
.blog-related a { display:block; padding-block:12px; min-height:44px; font:16px/1.5 Inter,system-ui,sans-serif; }
@media (max-width:760px) { .blog-grid { grid-template-columns:1fr; } }
@media (max-width:480px) {
 .blog-article-page .seo-hero > .shell, .blog-reading { width:calc(100% - 40px); }
 .blog-reading { font-size:18px; }
 .blog-page .seo-hero__lead { font-size:18px; }
 .blog-example { padding:18px; }
 .blog-byline { gap:6px 14px; }
}