@import url("./personal-home.css");

.blog-page { grid-template-columns:180px minmax(0,700px); }
.blog-sidebar .name { display:block; color:var(--ink); }
.blog-main h1 { margin:0; color:var(--ink); font-size:38px; font-weight:400; line-height:1.18; text-wrap:balance; }
.article-header { margin-bottom:32px; }
.article-meta { margin:0 0 12px; color:var(--muted); font-size:15px; }
.article-description { margin:14px 0 0; color:var(--muted); font-size:20px; line-height:1.45; }
.article-topics { display:flex; flex-wrap:wrap; gap:8px 18px; margin:17px 0 0; padding:0; list-style:none; font-size:15px; }
.article-topics a { color:var(--muted); }
.article-toc { margin:0 0 32px; padding:12px 0; border-block:1px solid color-mix(in srgb,var(--muted) 25%,transparent); font-size:16px; }
.article-toc summary { width:fit-content; color:var(--accent); cursor:pointer; }
.article-toc ul { padding-left:22px; }
.article-toc nav > ul { margin-bottom:4px; }
.article-toc li { margin:5px 0; }
.article-body { font-size:19px; line-height:1.65; overflow-wrap:break-word; }
.article-body > :first-child { margin-top:0; }
.article-body p { margin:0 0 20px; }
.article-body h1, .article-body h2 { margin:38px 0 16px; font-size:28px; line-height:1.25; }
.article-body h3 { margin:30px 0 12px; font-size:23px; line-height:1.3; }
.article-body h4, .article-body h5, .article-body h6 { margin:26px 0 12px; color:var(--ink); font-size:19px; font-weight:700; }
.article-body :is(h1,h2,h3,h4,h5,h6) { scroll-margin-top:28px; }
.article-body ul, .article-body ol { padding-left:26px; margin:0 0 22px; }
.article-body li { margin-bottom:10px; padding-left:3px; }
.article-body li > ul, .article-body li > ol { margin-top:10px; }
.article-body li > p { margin-bottom:10px; }
.article-body a { text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.article-body a:hover { text-decoration-color:currentColor; }
.article-body figure { margin:28px 0; }
.article-body img, .article-body video { max-width:100%; height:auto; }
.article-body figure img { display:block; }
.article-body figcaption, .article-body .footnotes { color:var(--muted); font-size:16px; }
.article-body figcaption { margin-top:10px; }
.article-body blockquote { margin:26px 0; padding:0 0 0 22px; border-left:2px solid var(--accent); color:var(--muted); }
.article-body hr { margin:32px 0; border:0; border-top:1px solid color-mix(in srgb,var(--muted) 25%,transparent); }
.article-body code { font:0.8em/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; background:color-mix(in srgb,var(--muted) 10%,transparent); padding:2px 5px; border-radius:3px; }
.article-body pre { max-width:100%; overflow-x:auto; padding:18px 20px; background:color-mix(in srgb,var(--muted) 8%,transparent); border-radius:3px; }
.article-body pre code { background:none; padding:0; font-size:14px; }
.article-body .highlight .c, .article-body .highlight .c1, .article-body .highlight .cm { color:var(--muted); font-style:italic; }
.article-body .highlight .k, .article-body .highlight .kn, .article-body .highlight .kd, .article-body .highlight .s, .article-body .highlight .s1, .article-body .highlight .s2 { color:var(--accent); }
.article-body table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:24px 0; font-size:17px; }
.article-body th, .article-body td { padding:10px 16px; text-align:left; border-bottom:1px solid color-mix(in srgb,var(--muted) 25%,transparent); }
.article-footer { margin-top:48px; padding-top:20px; border-top:1px solid color-mix(in srgb,var(--muted) 25%,transparent); font-size:16px; }
.blog-list { list-style:none; padding:0; margin:36px 0 0; }
.blog-list > li { margin-bottom:36px; }
.blog-list .article-meta { margin-bottom:7px; }
.blog-list h2 { font-size:25px; line-height:1.3; }
.blog-list .article-description { margin-top:9px; font-size:18px; }
.blog-pagination { display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-top:40px; font-size:16px; }
.blog-pagination span { color:var(--muted); }
@media(max-width:900px) { .blog-page { grid-template-columns:148px minmax(0,1fr); } }
@media(max-width:760px) {
  .blog-sidebar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-bottom:38px; }
  .blog-sidebar .name { margin:0 auto 0 0; font-size:25px; }
  .blog-sidebar .contact { margin:0; gap:18px; }
  .blog-sidebar .contact a:first-child { flex-basis:auto; }
  .blog-sidebar .theme { margin:0 -8px 0 0; }
  .blog-main h1 { font-size:32px; }
  .article-description { font-size:19px; }
  .article-body { font-size:18px; }
  .article-body h1, .article-body h2 { font-size:26px; }
}