/* Blog article glue. The parts are the design system's: Prose for the body,
   the secondary small button (icon-only, round) to share; the trail and the
   byline are the paper page's; related posts are the index's cards. No dot
   field here: the page is for reading. */
.blog-read > .band { padding-block: 5rem 0; }   /* the trail sits where the paper page's does; the footer's own 128 closes the column */
.blog-article { max-width: var(--prose-max-width, 624px); margin-inline: auto; }
.blog-article .res-crumbs { margin-bottom: 2rem; }
.blog-article-head h1 { margin: 0; }
/* the byline is the paper card's: the author's portrait, name and date */
.blog-byline { display: flex; align-items: center; gap: 10px; margin: 1.5rem 0 0; font-size: var(--text-small-size); color: var(--text-secondary); }
.blog-byline .res-stack img { background: var(--stone-875); }
.blog-topics { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.blog-topics a {
    display: inline-flex; align-items: center;
    font-family: var(--font-family-label-mono); font-size: var(--text-mini-size); letter-spacing: .02em;
    color: var(--citron-300); white-space: nowrap; text-decoration: none;
}
.blog-topics a:hover, .blog-topics a:focus-visible { color: var(--text-primary); }
/* the body in the site's reading size: the page's own large text, not the docs' regular */
.blog-article-cover { margin: 2.5rem 0 0; }   /* the card's cover, at the column's width */
.blog-body { margin-top: 3.5rem; font-size: var(--text-large-size); line-height: var(--text-large-line-height); }
.blog-body :is(h2, h3, h4)[id] { scroll-margin-top: 6rem; }
.blog-section-copy { margin-left: 0.5em; padding: 0 0.25em; border: 0; border-radius: var(--tt-radius-4); background: none; color: var(--text-tertiary); font: var(--text-small-size) var(--font-family-sans); cursor: pointer; vertical-align: middle; }
.blog-section-copy:hover { color: var(--text-primary); }
.blog-section-copy:focus-visible { outline: var(--tt-focus-ring-width) solid var(--tt-color-focus-ring); outline-offset: var(--tt-focus-ring-offset); }
.blog-body a:not([class]) { color: var(--text-primary); }   /* the underline is the base's prose-link treatment (the Link atom's tokens) */
/* What blog.py's renderer emits, dressed in the system's parts without
   touching the renderer: a fence is the base well (pre), its lines plain
   text, not inline-code chips; Pygments' inline monokai ground gives way to
   the well's (its token colours stay); a blockquote in a post is a note, so
   it takes the Callout's note dress rather than Prose's display quote; a
   table takes DocTable's values. */
.blog-body pre:not(.code-block pre) code { background: none; border: 0; border-radius: 0; padding: 0; font-size: inherit; line-height: inherit; }
.blog-body .highlight { background: none !important; }   /* the inline style Pygments writes when noclasses=True */
.blog-body .highlight pre { margin: 0; }
.blog-body.prose > div.highlight { margin-block: var(--block-spacing) 0; }   /* Prose gives a div an aside's 36; a highlighted block keeps a plain block's spacing */
.blog-body blockquote:not(.callout) {
    margin-inline: 0; padding: 16px 20px; quotes: none;
    border-left: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--surface-canvas));
    font: inherit; font-size: var(--text-small-size); line-height: var(--text-small-line-height); letter-spacing: normal; color: var(--text-secondary);
}
.blog-body blockquote > p { text-indent: 0; }
.blog-body blockquote > p::before, .blog-body blockquote > p::after { content: none; }
.blog-body blockquote > * + * { margin-top: 8px; }
.blog-body table:not(.doc-table) { display: block; overflow-x: auto; border-collapse: separate; border-spacing: 0; font-size: var(--text-small-size); line-height: var(--text-small-line-height); }
.blog-body table:not(.doc-table) th { text-align: left; color: var(--text-primary); font-weight: var(--font-weight-semibold); white-space: nowrap; border-bottom: var(--border-hairline) solid var(--border-default); padding: 8px 24px 8px 0; }
.blog-body table:not(.doc-table) td { color: var(--text-secondary); border-bottom: var(--border-hairline) solid var(--border-default); vertical-align: top; min-width: 140px; padding: 12px 24px 12px 0; }
.blog-body table:not(.doc-table) tr:last-child td { border-bottom: none; }
/* The renderer's design-system markup. CodeBlock: the figure, its language
   label and Copy, in Google Sans Code (the system's code mono, as the docs'
   code blocks now set it) at the base well's 14px on 1.5; the token colours
   are Pygments'. Callout: a post's note, with more air between its parts
   than the component's 8 when a code block sits inside. */
.blog-body .code-block pre, .blog-body .code-block code { font-family: var(--font-family-code-mono); }
.blog-body .code-block pre code { background: none; }
.blog-body .code-block pre:not(:has([data-line])) { padding: 40px 16px 16px; }
.blog-body .code-block-copy .code-block-check-icon, .blog-body .code-block-copy[data-copied] .code-block-copy-icon { display: none; }
.blog-body .code-block-copy[data-copied] .code-block-check-icon { display: block; }
.blog-body .code-block:not(:has(.code-block-language)) .code-block-header { position: absolute; top: 8px; right: 12px; padding: 0; }   /* no language to label: Copy floats in the corner instead of holding an empty row */
.blog-body .callout-content > * + * { margin-top: 12px; }
.blog-body .callout-content > .code-block, .blog-body .callout-content > .code-block + * { margin-top: 16px; }
.blog-body .callout-content { min-width: 0; }   /* a long code line scrolls inside the note instead of widening it */
/* Inline marks the site's reset flattens (font: inherit, vertical-align:
   baseline) and posts use: italic, super- and subscript, inserted and
   highlighted text. The highlight is the citron the cards' topics wear. */
.blog-body em, .blog-body i { font-style: italic; }
.blog-body sup, .blog-body sub { position: relative; font-size: 0.75em; line-height: 0; }
.blog-body sup { top: -0.5em; }
.blog-body sub { bottom: -0.25em; }
.blog-body ins { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--citron-300) 60%, transparent); text-underline-offset: 3px; }
.blog-body mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--citron-300) 22%, transparent); color: var(--text-primary); }
.blog-body del { color: var(--text-tertiary); }
/* a post's video, like its pictures, never wider than the column */
.blog-body video { display: block; max-width: 100%; height: auto; border-radius: 8px; }
/* footnotes: a reference is a small citron number; the notes close the body
   under the tapered rule, in the small register */
.blog-body .footnote-ref a { color: var(--citron-300); text-decoration: none; padding-left: 1px; }
.blog-body .footnotes { margin-top: 3.5rem; padding-top: 1.5rem; background: var(--rule-h-taper) top / 100% var(--border-hairline) no-repeat; font-size: var(--text-small-size); line-height: var(--text-small-line-height); color: var(--text-tertiary); }
.blog-body .footnotes ol { margin: 0; }
.blog-body .footnotes p { margin: 0; }
.blog-body .footnote { text-decoration: none; color: var(--text-tertiary); margin-left: 4px; }
.blog-body .footnote:hover { color: var(--text-primary); }
.blog-article-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4rem; padding-top: 1.5rem; background: var(--rule-h-taper) top / 100% var(--border-hairline) no-repeat; }
.blog-article-foot .blog-topics { margin: 0; }
/* share: the secondary small button, icon-only and so round (32 by 32) */
.blog-share { display: flex; align-items: center; gap: 8px; flex: none; }
.blog-share-label { margin-right: 4px; font-size: var(--text-small-size); color: var(--text-tertiary); }
.blog-share-btn { width: 32px; padding-inline: 0; }
.blog-share-btn svg { display: block; }
@media (width <= 700px) {
    .blog-read > .band { padding-top: 2rem; }
    .blog-body { margin-top: 2.5rem; }
    .blog-article-cover { margin-top: 2rem; }
    .blog-article-foot { flex-direction: column; align-items: flex-start; }
}
/* the cards: a post's picture where a paper has its figure */
.blog-card { padding-top: 2.5rem; }
.blog-card[hidden] { display: none; }
.blog-card:hover .blog-cover img { scale: 1.02; }
.blog-card .res-stack img { background: var(--stone-875); }

/* three across in the frame. The script marks every shown card with its
   column and row, and two edge cases: the last card, and a card with no card
   under it (a filtered grid whose last row is short). From those: a card
   below the first row takes the rule along its top, a card with nothing under
   it the rule along its bottom, the first in a row drops the divider drawn
   before every cell after the first, and every corner where rules meet gets
   its dot. */
@media (width > 940px) {
    .blog-grid { --d: radial-gradient(circle at center, var(--text-tertiary) 2.5px, transparent 2.5px); }
    .blog-grid .res-cell {
        background-image: var(--rule-top, none), var(--rule-bot, none), var(--rule-right, none);
        background-position: top, bottom, right; background-repeat: no-repeat;
        background-size: 100% var(--border-hairline), 100% var(--border-hairline), var(--border-hairline) 100%;
    }
    .blog-grid .res-cell:not([data-row="0"]) { --rule-top: var(--rule-h-taper); --tl: var(--d); }
    .blog-grid .res-cell:not([data-row="0"]):is([data-col="2"], [data-last]) { --tr: var(--d); }
    .blog-grid .res-cell[data-open-below] { --rule-bot: var(--rule-h-taper); --bl: var(--d); --br: var(--d); }
    .blog-grid .res-cell[data-col="0"]::before { content: none; }
    .blog-grid .res-cell::after {
        content: ''; position: absolute; inset: -2.5px; pointer-events: none; z-index: 5;
        background: var(--tl, none) left top / 5px 5px no-repeat, var(--tr, none) right top / 5px 5px no-repeat,
                    var(--bl, none) left bottom / 5px 5px no-repeat, var(--br, none) right bottom / 5px 5px no-repeat;
    }
}
@media (width <= 700px) { .blog-card { padding-top: 2rem; } }