/* The KaiZai blog's layout (#168 R4, designed in #190), served at /blog/blog.css.
   The tokens, the masthead, the footer, the seal, the focus ring and the type
   helpers are the site's own /kaizai.css. This file adds the article and index
   layout only and defines no custom property. One editorial column at 68ch on
   light paper; the stroke under the article title and the closing stamp at its
   end (specs/design-language-spec.md §5A, §7). Nothing here sets a fixed
   height on text, so WCAG 2.2's text-spacing override clips nothing, and the
   column reflows to 320px with only a code block scrolling, inside its box.
   The fonts are served from /blog/fonts/ under the SIL Open Font Licence (the
   OFL-*.txt files beside them), so no page loads anything from another origin. */
@font-face{font-family:Newsreader;font-style:normal;font-weight:300 500;font-display:swap;src:url(/blog/fonts/newsreader-latin.woff2) format('woff2')}
@font-face{font-family:Newsreader;font-style:italic;font-weight:300 500;font-display:swap;src:url(/blog/fonts/newsreader-italic-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/blog/fonts/jetbrains-mono-latin.woff2) format('woff2')}
.page-blog{background:var(--paper);color:var(--ink)}
.blog{max-width:calc(68ch + 2 * var(--pad));padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(56px,9vw,128px);font-family:Newsreader,Georgia,serif;font-size:19px;line-height:1.6;overflow-wrap:break-word}
.blog h1{margin:0 0 .3em;font-weight:400;font-size:clamp(34px,5vw,56px);line-height:1.1;letter-spacing:-.02em}
.blog h2,.blog h3,.blog h4{margin:1.8em 0 .5em;font-weight:500;line-height:1.2}
.blog h2{font-size:1.75rem}
.blog h3{font-size:1.375rem}
.blog h4{font-size:1.125rem}
.blog p,.blog ul,.blog ol,.blog blockquote,.blog pre{margin:0 0 1.1em}
.blog ul,.blog ol{padding-left:1.4em}
.blog li{margin:0 0 .35em}
.blog .head{margin:0 0 2.5em}
.blog .stroke{display:block;width:min(240px,62%);height:14px;margin:0 0 1.1em;fill:var(--ai)}
.blog .date{margin:0}
.blog blockquote{margin-left:0;padding-left:1.1em;border-left:2px solid var(--ai);color:var(--ink2);font-style:italic}
.blog code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.85em}
.blog pre{overflow-x:auto;max-width:100%;box-sizing:border-box;padding:1em;border:1px solid var(--rule);line-height:1.5;overflow-wrap:normal}
.blog pre code{font-size:14px}
.blog .end{margin:2.5em 0 0}
/* Index: newest first, each entry one target: title, date, excerpt. */
.blog .dek{margin:0 0 2.5em;color:var(--ink2)}
.blog .articles{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--rule)}
.blog .articles li{margin:0;border-top:1px solid var(--rule)}
.kh .blog .articles a{display:block;padding:1.15em 0;text-decoration:none;color:var(--ink)}
.blog .articles .t{display:block;font-size:1.5rem;line-height:1.25;color:var(--ai)}
.kh .blog .articles a:hover .t{color:var(--ink)}
.blog .articles .lab{display:block;margin-top:.45em}
.blog .articles .x{display:block;margin-top:.35em;color:var(--ink2);font-size:17px;line-height:1.5}
/* Empty index: what the page will hold, and a way on. */
.blog .empty{padding:1.5em 0 0;border-top:1px solid var(--rule)}
.blog .empty .lead{margin:0 0 .5em;font-size:1.5rem;line-height:1.3}
.blog .empty p{max-width:52ch;color:var(--ink2)}
.blog .empty .lead{color:var(--ink)}
.blog .go,.blog .back{display:flex;flex-wrap:wrap;gap:0 28px;margin:1.5em 0 0}
.blog .back{margin:3em 0 0}
/* After the closing stamp: Older / Newer, then all articles and the feed. */
.blog .posts{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;margin:3em 0 0;padding-top:1.5em;border-top:1px solid var(--rule)}
.kh .blog .posts .older,.kh .blog .posts .newer{display:flex;flex-direction:column;gap:.3em;min-height:44px;padding:4px 0;text-decoration:none}
.blog .posts .newer{grid-column:2;text-align:right}
.blog .posts .serif{font-size:1.125rem;line-height:1.3}
.blog .posts .back{grid-column:1 / -1;margin:.5em 0 0}
@media (max-width:560px){
  .blog{font-size:18px}
  .blog .posts{grid-template-columns:1fr}
  .blog .posts .newer{grid-column:1;text-align:left}
}