/* This stylesheet is loaded only by the Blog listing and article pages. */
.blog-system-ui{
  --blog-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --blog-code-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
/* System typography for blog content; the site navigation is restored below. */
.blog-system-ui,.blog-system-ui *{font-family:var(--blog-font)!important}
.blog-system-ui :is(pre,code,kbd,samp),
.blog-system-ui :is(pre,code,kbd,samp) *{font-family:var(--blog-code-font)!important}
.blog-system-ui :is(h1,h2,h3,h4,h5,h6){font-weight:600!important}
.blog-system-ui .blog-entry p:not(.blog-entry-meta){font-size:16px;line-height:1.5}

/* Match homepage navigation typography while retaining the blog width. */
.blog-system-ui .lz-brand{font-family:'Newsreader','NotoSerifSCSubset','Noto Serif SC','Source Han Serif SC','Source Han Serif CN','Songti SC','STSong','SimSun',serif!important}
.blog-system-ui .lz-navlinks,.blog-system-ui .lz-navlinks *{font-family:'IBM Plex Mono','NotoSerifSCSubset','Noto Serif SC','Source Han Serif SC','Songti SC','SimSun',monospace!important}

/* Blog text palette; navigation and figure data colors retain their own styles. */
.blog-system-ui{
  --blog-ink:#111111;
  --blog-secondary:#555555;
  --blog-muted:#777777;
}
.blog-system-ui main,
.blog-system-ui .blog-entry p:not(.blog-entry-meta),
.blog-system-ui .cb-section>p,
.blog-system-ui .cb-section strong,
.blog-system-ui .cb-section em,
.blog-system-ui .cb-summary,
.blog-system-ui .cb-opening,
.blog-system-ui .blog-contents .blog-contents-title{color:var(--blog-ink)}
.blog-system-ui .cb-header .blog-date,
.blog-system-ui .ra-header .blog-date,
.blog-system-ui .blog-index .blog-entry-meta,
.blog-system-ui .cb-figure figcaption,
.blog-system-ui .ra-content figcaption,
.blog-system-ui .ra-exhibit-caption,
.blog-system-ui .cb-note>div,
.blog-system-ui .ra-content details>div,
.blog-system-ui .cb-table-scroll td,
.blog-system-ui .cb-play-end p{color:var(--blog-secondary)}
.blog-system-ui .cb-figure figcaption b{color:inherit}
.blog-system-ui .blog-post-label,
.blog-system-ui .ra-endpoints,
.blog-system-ui .ra-back,
.blog-system-ui .blog-contents li::marker{color:var(--blog-muted)}
.blog-system-ui .blog-post-nav .blog-post-link{color:var(--blog-ink)}
.blog-system-ui .blog-post-arrow{color:#999999}
.blog-system-ui .blog-post-nav .blog-post-link:hover,
.blog-system-ui .blog-post-link:hover .blog-post-arrow{color:#a05238}

/* Match the homepage footer typography on the listing and all posts. */
.blog-system-ui main>footer,.blog-system-ui main>footer *{font-family:'IBM Plex Mono','NotoSerifSCSubset','Noto Serif SC','Source Han Serif SC','Songti SC','SimSun',monospace!important}
.blog-system-ui main>footer>div:first-child>div:first-child{font-family:'Newsreader','NotoSerifSCSubset','Noto Serif SC','Source Han Serif SC','Source Han Serif CN','Songti SC','STSong','SimSun',serif!important}

/* The fullscreen menu keeps the homepage's editorial typography. */
.blog-system-ui .lz-mobile-menu,.blog-system-ui .lz-mobile-menu *{font-family:'IBM Plex Mono','NotoSerifSCSubset','Noto Serif SC',monospace!important}
.blog-system-ui .lz-mobile-menu-header .lz-mobile-menu-brand,.blog-system-ui .lz-mobile-sections a{font-family:'Newsreader','NotoSerifSCSubset','Noto Serif SC',serif!important}