/*
 * ===***===***=== Bite Size Bytes ===***===***===
 *
 * 'bsb' theme stylesheet. Intentionally dark styling only. No framework. Nothing to override.
 *
 * NOTE: In some places, draft and/or newer selectors are implemented. Additionally, there are places where equivalent
 *       longhands are used pending final decision of which form will be officially recognized. This is an intentional
 *       choice for future-proofing, while adhering to the "No shorthand" principle.
 */

/*
 * ===***===***=== How To Edit This File ===***===***===
 *
 * Measured results of phase 1, not preferences. BSB_Theme_Audit.md §1.
 *
 * 1. No shorthand property. Every shorthand is written as its longhands, including the values a browser supplies by
 *    itself: `background` is eight declarations, `grid-column` is two. The one exception is `-webkit-line-clamp`, kept
 *    because its unprefixed longhands are not settled; the unprefixed property was deleted rather than expanded.
 *
 * 2. Box-model and flow properties are logical, never physical: `margin-block-start`, `padding-inline-end`,
 *    `inset-block-start`, `border-block-start-width`, `text-align: start` and `text-align: end`.
 *
 * 3. Every selector is declared exactly once outside the media and container queries, and at most once inside any
 *    single media block and once per any single container block. To add a declaration to a selector that already has a
 *    rule, edit that rule. A rule that no longer applies is deleted, never overridden back to its base value.
 *
 * 4. Two rules merged into one keep the position of the first occurrence and carry the last-wins values. Moving the
 *    merged rule to the last position reorders it against every rule in between and changes the cascade.
 *
 * 5. One `@media` block per breakpoint, grouped at the end, width queries descending, then `prefers-reduced-motion`. A
 *    block whose conditions are or-joined sorts on its width; where two blocks share a width, the one with fewer
 *    conditions comes first.
 *
 * 6. A rule that asks about one component's own width is a `@container` query in that component's own section, never
 *    a viewpoint query in the responsive section. The track's width and the window's are different numbers: a 640px
 *    window in one column gives the articles a 588px track, and a 1061px window with the sidebar back gives it 624px.
 */


/* ===***===***=== §0: Fonts ===***===***=== */

/*
 * The font list here is generated by build-fonts.py. Every range below is emitted from the built file's own cmap.
 * Do not hand-edit this list; rerun the script.
 */

/*
 * Fira Code latin, weight 400, 29.7 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-latin-400.woff2') format('woff2');
    unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2007-2008, U+200B, U+2012-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+204A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/*
 * Fira Code latin-ext, weight 400, 11.6 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-0130, U+0132-0151, U+0154-017E, U+0192, U+01FC-01FF, U+0218-021B, U+0237, U+02B9-02BA, U+02C7, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0305-0307, U+030A-030C, U+030F, U+0313-0314, U+0326-0327, U+0335-0336, U+0342, U+0345, U+1E80-1E85, U+1E9E, U+1EF2-1EF3, U+20AF, U+20B9-20BA, U+20BD, U+2113;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/*
 * Fira Code greek, weight 400, 14.1 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-greek-400.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03E1, U+03F0-03FF, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/*
 * Fira Code cyrillic, weight 400, 20.7 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-cyrillic-400.woff2') format('woff2');
    unicode-range: U+0400-0479, U+048A-052F;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/*
 * Fira Code icons, weight 400, 615.7 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-icons-400.woff2') format('woff2');
    unicode-range: U+E000-E00A, U+E0A0-E0A3, U+E0B0-E0C8, U+E0CA, U+E0CC-E0D2, U+E0D4, U+E0D6-E0D7, U+E200-E2A9, U+E300-E3E3, U+E5FA-E6BB, U+E700-E958, U+EA60-EA88, U+EA8A-EA8C, U+EA8F-EAC7, U+EAC9, U+EACC-EB09, U+EB0B-EB4E, U+EB50-EC5E, U+EC60-EC84, U+ED00-EFCF, U+F000-F385, U+F400-F533;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/*
 * Fira Code symbols, weight 400, 28.6 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-symbols-400.woff2') format('woff2');
    unicode-range: U+1405, U+140A, U+2070, U+2074-208E, U+2102, U+210D, U+2115-2116, U+2119-211A, U+211D, U+2124, U+212E, U+2153-215F, U+218A-218B, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21DE-21DF, U+21E4-21EA, U+2200, U+2202-220F, U+2211, U+2217, U+2219-221A, U+221E, U+2227-222B, U+2234-2237, U+2241-224B, U+2260-2262, U+2264-2265, U+2282-228B, U+229C, U+22A2-22AF, U+2300, U+2302-2306, U+2310, U+2318, U+2320-2321, U+2324-2328, U+232B, U+2387-2388, U+238B, U+239B-23AD, U+23CE-23CF, U+23FB-23FE, U+2400-2426, U+2500-25AF, U+25B2, U+25B6, U+25BA, U+25BC, U+25C0, U+25C4, U+25C6-25C7, U+25C9-25CB, U+25CE-25D3, U+25D5-25D7, U+25D9-25E5, U+25E7-25EB, U+25EF-25F7, U+2610-2612, U+2620, U+2630-2637, U+2639-263C, U+2640, U+2642, U+2660, U+2663, U+2665-2666, U+266A-266B, U+26A1, U+2713, U+276C-2771, U+27A1, U+27E8-27E9, U+27F0-28FF, U+2B05-2B07, U+2B58, U+2E3A-2E3B, U+300C-300D, U+FF62-FF63, U+1D539, U+1F10D-1F10F, U+1F16D-1F16F, U+1F1AD, U+1F310;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/*
 * Fira Code latin, weight 500, 29.3 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-latin-500.woff2') format('woff2');
    unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2007-2008, U+200B, U+2012-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+204A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/*
 * Fira Code latin-ext, weight 500, 11.7 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-0130, U+0132-0151, U+0154-017E, U+0192, U+01FC-01FF, U+0218-021B, U+0237, U+02B9-02BA, U+02C7, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0305-0307, U+030A-030C, U+030F, U+0313-0314, U+0326-0327, U+0335-0336, U+0342, U+0345, U+1E80-1E85, U+1E9E, U+1EF2-1EF3, U+20AF, U+20B9-20BA, U+20BD, U+2113;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/*
 * Fira Code greek, weight 500, 14.1 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-greek-500.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03E1, U+03F0-03FF, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/*
 * Fira Code cyrillic, weight 500, 20.6 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-cyrillic-500.woff2') format('woff2');
    unicode-range: U+0400-0479, U+048A-052F;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/*
 * Fira Code icons, weight 500, 616.2 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-icons-500.woff2') format('woff2');
    unicode-range: U+E000-E00A, U+E0A0-E0A3, U+E0B0-E0C8, U+E0CA, U+E0CC-E0D2, U+E0D4, U+E0D6-E0D7, U+E200-E2A9, U+E300-E3E3, U+E5FA-E6BB, U+E700-E958, U+EA60-EA88, U+EA8A-EA8C, U+EA8F-EAC7, U+EAC9, U+EACC-EB09, U+EB0B-EB4E, U+EB50-EC5E, U+EC60-EC84, U+ED00-EFCF, U+F000-F385, U+F400-F533;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/*
 * Fira Code symbols, weight 500, 28.3 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-symbols-500.woff2') format('woff2');
    unicode-range: U+1405, U+140A, U+2070, U+2074-208E, U+2102, U+210D, U+2115-2116, U+2119-211A, U+211D, U+2124, U+212E, U+2153-215F, U+218A-218B, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21DE-21DF, U+21E4-21EA, U+2200, U+2202-220F, U+2211, U+2217, U+2219-221A, U+221E, U+2227-222B, U+2234-2237, U+2241-224B, U+2260-2262, U+2264-2265, U+2282-228B, U+229C, U+22A2-22AF, U+2300, U+2302-2306, U+2310, U+2318, U+2320-2321, U+2324-2328, U+232B, U+2387-2388, U+238B, U+239B-23AD, U+23CE-23CF, U+23FB-23FE, U+2400-2426, U+2500-25AF, U+25B2, U+25B6, U+25BA, U+25BC, U+25C0, U+25C4, U+25C6-25C7, U+25C9-25CB, U+25CE-25D3, U+25D5-25D7, U+25D9-25E5, U+25E7-25EB, U+25EF-25F7, U+2610-2612, U+2620, U+2630-2637, U+2639-263C, U+2640, U+2642, U+2660, U+2663, U+2665-2666, U+266A-266B, U+26A1, U+2713, U+276C-2771, U+27A1, U+27E8-27E9, U+27F0-28FF, U+2B05-2B07, U+2B58, U+2E3A-2E3B, U+300C-300D, U+FF62-FF63, U+1D539, U+1F10D-1F10F, U+1F16D-1F16F, U+1F1AD, U+1F310;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/*
 * Fira Code latin, weight 600, 31.0 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-latin-600.woff2') format('woff2');
    unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2007-2008, U+200B, U+2012-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+204A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/*
 * Fira Code latin-ext, weight 600, 12.4 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-0130, U+0132-0151, U+0154-017E, U+0192, U+01FC-01FF, U+0218-021B, U+0237, U+02B9-02BA, U+02C7, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0305-0307, U+030A-030C, U+030F, U+0313-0314, U+0326-0327, U+0335-0336, U+0342, U+0345, U+1E80-1E85, U+1E9E, U+1EF2-1EF3, U+20AF, U+20B9-20BA, U+20BD, U+2113;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/*
 * Fira Code greek, weight 600, 14.7 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-greek-600.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03E1, U+03F0-03FF, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/*
 * Fira Code cyrillic, weight 600, 23.1 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-cyrillic-600.woff2') format('woff2');
    unicode-range: U+0400-0479, U+048A-052F;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/*
 * Fira Code icons, weight 600, 615.8 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-icons-600.woff2') format('woff2');
    unicode-range: U+E000-E00A, U+E0A0-E0A3, U+E0B0-E0C8, U+E0CA, U+E0CC-E0D2, U+E0D4, U+E0D6-E0D7, U+E200-E2A9, U+E300-E3E3, U+E5FA-E6BB, U+E700-E958, U+EA60-EA88, U+EA8A-EA8C, U+EA8F-EAC7, U+EAC9, U+EACC-EB09, U+EB0B-EB4E, U+EB50-EC5E, U+EC60-EC84, U+ED00-EFCF, U+F000-F385, U+F400-F533;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/*
 * Fira Code symbols, weight 600, 28.7 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Fira Code';
    src: url('../fonts/fira-code-symbols-600.woff2') format('woff2');
    unicode-range: U+1405, U+140A, U+2070, U+2074-208E, U+2102, U+210D, U+2115-2116, U+2119-211A, U+211D, U+2124, U+212E, U+2153-215F, U+218A-218B, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21DE-21DF, U+21E4-21EA, U+2200, U+2202-220F, U+2211, U+2217, U+2219-221A, U+221E, U+2227-222B, U+2234-2237, U+2241-224B, U+2260-2262, U+2264-2265, U+2282-228B, U+229C, U+22A2-22AF, U+2300, U+2302-2306, U+2310, U+2318, U+2320-2321, U+2324-2328, U+232B, U+2387-2388, U+238B, U+239B-23AD, U+23CE-23CF, U+23FB-23FE, U+2400-2426, U+2500-25AF, U+25B2, U+25B6, U+25BA, U+25BC, U+25C0, U+25C4, U+25C6-25C7, U+25C9-25CB, U+25CE-25D3, U+25D5-25D7, U+25D9-25E5, U+25E7-25EB, U+25EF-25F7, U+2610-2612, U+2620, U+2630-2637, U+2639-263C, U+2640, U+2642, U+2660, U+2663, U+2665-2666, U+266A-266B, U+26A1, U+2713, U+276C-2771, U+27A1, U+27E8-27E9, U+27F0-28FF, U+2B05-2B07, U+2B58, U+2E3A-2E3B, U+300C-300D, U+FF62-FF63, U+1D539, U+1F10D-1F10F, U+1F16D-1F16F, U+1F1AD, U+1F310;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/*
 * Space Grotesk latin, weight 300 700, 20.7 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-latin-300-700.woff2') format('woff2');
    unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

/*
 * Space Grotesk latin-ext, weight 300 700, 17.4 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-latin-ext-300-700.woff2') format('woff2');
    unicode-range: U+0100-0130, U+0132-0151, U+0154-0180, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0243, U+0251, U+0259, U+02B9-02BA, U+02BE-02BF, U+02C7-02CC, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+0309-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335-0338, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EF2-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+20BF, U+2113;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

/*
 * Space Grotesk symbols, weight 300 700, 6.5 KB. Range emitted from the built file's cmap. Do not edit by hand.
 */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-symbols-300-700.woff2') format('woff2');
    unicode-range: U+0394, U+03A9, U+03C0, U+0E3F, U+2070-2071, U+2074-2079, U+207D-2089, U+208D-208E, U+2094, U+2116, U+2120, U+2126, U+212E, U+2153-2154, U+215B-215E, U+2194-2199, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+27E8-27E9, U+E132-E133, U+FB00-FB04;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}


/* ===***===***=== §1: Custom Properties ===***===***=== */

:root {

    /*
     * Sizing Properties
     */

    /* Height */

    --header-h: 68px;

    /* Width */

    --measure: 85ch;
    --sidebar-w: 310px;
    --shell-max: 1560px;

    /*
     * Spacing Properties
     */

    /* Padding */

    --gutter: clamp(20px, 4vw, 56px);

    /*
     * Color Properties
     */

    /* MD3 tonal surfaces: each step lighter AND tinted with the primary hue. */
    --surface: #101416;
    --container-low: #161B1D;
    --container: #1B2123;
    --container-hi: #232A2D;

    --on-surface: #D8DEE0; /* deliberately not pure white */
    --on-surface-var: #929DA0;
    --on-surface-dim: #6B7679;

    --primary: #52D0BD;
    --primary-container: #143D38;
    --on-primary-container: #80ECDA;
    --tertiary: #FBBF49;

    --outline: #323C3F;
    --outline-variant: #232A2D;

    /*
     * Font Properties
     */

    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
    --base-size: 1.0625rem;

    /*
     * Background Properties
     */

    --dot-alpha: .13;
    --wash-alpha: .16;

    /*
     * Border and Box Decoration Properties
     */

    /* Border Radius */

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-full: 999px;

    /* Box Shadow */

    --elev-1: 0 1px 3px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .20);
    --elev-2: 0 2px 8px -1px rgba(0, 0, 0, .32), 0 1px 4px rgba(0, 0, 0, .22);
    --elev-3: 0 10px 26px -8px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .26);

    /*
     * Transform Properties
     */

    --slide-prv: 14px;
    --slide-nxt: -14px;
}


/* ===***===***=== §2: CSS Reset and Baseline ===***===***=== */

/*
 * Derived by measurement, not convention. The full derivation, the five-browser cross-engine data and the per-rule
 * costs are in BSB_Reset_Derivation.md. Nothing here is a design choice; every rule removes a value the browser was
 * supplying and the theme was silently relying on.

/*
 * Box model. Δ 0/0
 */
*, *::before, *::after {

    /* Sizing Properties */

    box-sizing: border-box;
}

/*
 * §2.1: Set geometry to a known zero. Δ real pages 4/0 (one <ol> in .prose on post.html), worst case 1058/—. Each
 * value it exposes is listed in the worklist and needs an explicit theme rule.
 */
:where(*) {

    /* Spacing Properties */

    margin-block-start: 0;
    margin-block-end: 0;

    margin-inline-start: 0;
    margin-inline-end: 0;

    padding-block-start: 0;
    padding-block-end: 0;

    padding-inline-start: 0;
    padding-inline-end: 0;

    /* Background Properties */

    background-color: transparent;

    /* Border and Box Decoration Properties */

    border-block-start-width: 0;
    border-block-start-style: none;

    border-block-end-width: 0;
    border-block-end-style: none;

    border-inline-start-width: 0;
    border-inline-start-style: none;

    border-inline-end-width: 0;
    border-inline-end-style: none;
}

/*
 * §2.2: Corrections to UA defaults. Δ real pages 0/0, worst case 5/0 on bare code/kbd/samp/pre. The UA resolves the
 * generic `monospace` family against OS font settings, so the rendered face differs by platform.
 */
:where(code, kbd, samp, pre) {

    /* Font Properties */

    font-family: var(--font-mono);
}

/*
 * Δ 10 to 54 properties per real page, 0 layout. The theme sets max-width on <img> only, so an SVG, video or <picture>
 * wider than its column overflows with nothing to stop it. Touches svg, video, picture. Safe: nothing currently
 * overflows, so this is a guard.
 */
:where(img, picture, video, canvas, svg) {

    /* Sizing Properties */

    max-width: 100%;
}

/*
 * Δ 0 on every real page, since no post yet carries a content image. Media is inline by default, and a line box
 * reserves descender space below the baseline, so the gap under an image is line-box space that no margin can remove.
 * Measured on the live site: a 100px image inside a figure makes the figure 108.05px tall; with this rule, exactly
 * 100px. <svg> is deliberately excluded. All 27 SVGs on a test page already compute to display: block from existing
 * theme rules, so leaving svg out costs nothing today and keeps an inline icon inside a sentence possible later
 * without having to override the reset.
 */
:where(img, picture, video, canvas) {

    /* Display Properties */

    display: block;
}

/*
 * Δ 0/0 everywhere: the theme already sets this on <img> and there is no video yet. Preserves aspect ratio when an
 * HTML height attribute is present. Insurance.
 */
:where(img, video) {

    /* Sizing Properties */

    height: auto;
}

/*
 * Form controls do not inherit the page font. Measured on post.html the only control present is button.nav-toggle,
 * which has no text and is hidden above 500px, so this is invisible today. It goes live the moment the comments plugin
 * is enabled, at which point every field would otherwise render in Arial at 13.333px.
 *
 * The longhand list is the UNION across five engines, not one engine's answer. Measured: `font: inherit` expands to 19
 * longhands in Chrome 155, Edge 155, Firefox 158 and Opera 153, to 17 in Safari 26.6, and to 18 in Chromium 141. No
 * engine emits all twenty. Chromium spells the width axis `font-stretch` while Gecko and WebKit spell it `font-width`,
 * and Safari omits `font-language-override` and `font-variant-emoji` entirely. Both spellings are listed, since an
 * engine silently drops a property it does not know. Verified in Chromium: this block computes identically to
 * `font: inherit`, and `font-width` and `font-language-override` are dropped with no other effect.
 *
 * Δ 12 properties per real page, 0 layout.
 */
:where(input, button, textarea, select) {

    /* Font Properties */

    font-family: inherit;
    font-width: inherit;
    font-stretch: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;

    font-language-override: inherit;

    font-variation-settings: inherit;
    font-kerning: inherit;
    font-variant-ligatures: inherit;
    font-variant-position: inherit;
    font-variant-caps: inherit;
    font-variant-numeric: inherit;
    font-variant-alternates: inherit;
    font-variant-east-asian: inherit;
    font-variant-emoji: inherit;

    font-size-adjust: inherit;
    font-optical-sizing: inherit;

    font-feature-settings: inherit;

    /* Text Properties */

    line-height: inherit;
}

/*
 * A long unbroken token, which a technical blog produces constantly, overflows the measure rather than breaking. The
 * property inherits, so it reaches inline descendants including <code> inside a paragraph, which is the point: measured
 * on the live site, code is the ONLY thing that overflows, so excluding it would remove the entire benefit.
 *
 * `break-word` rather than `anywhere`: the two behave identically in normal flow, and `anywhere` additionally reduces
 * min-content contribution, which silently papers over flex and grid layout bugs instead of exposing them. That
 * distinction was not academic here. While this rule was being verified it had NO effect on the one page that
 * overflowed, because `.prose h3` was a flex container and a flex item's default min-width: auto floors it at
 * min-content, which `break-word` does not reduce. The theme was fixed rather than the rule weakened.
 *
 * Measured at a 320px viewport with the theme fix in place: page overflow 120px -> 0. At 1440px, zero glyph movement
 * across every page.
 */
:where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th, blockquote, figcaption) {

    /* Text Properties */

    overflow-wrap: break-word;
}

/*
 * h1 through h4 already carry text-wrap: balance from the shared heading block. This extends it to h5 and h6, which
 * have no rule.
 *
 * Δ real pages 0/0, worst case 4/0 on h5 and h6 only.
 */
:where(h1, h2, h3, h4, h5, h6) {

    /* Text Properties */

    text-wrap-mode: initial;
    text-wrap-style: balance;
}

/*
 * DECLINED, `text-wrap: pretty` on paragraphs, with the measurement that settled it. The rule applies correctly, with
 * the computed value going auto -> pretty, and it changes nothing on this content: across 25 paragraphs and 63 lines
 * on a real post, the count of paragraphs ending in a very short last line is 8 before and 8 after, and not one
 * paragraph changes height. The paragraphs here run three to four lines, which gives the algorithm too little to work
 * with. Unsupported in Gecko as well. Declined as a declaration with no measured benefit; one line to add later if the
 * writing shifts toward longer prose, and measurable again at that point.
 */

html {

    /* Text Properties */

    text-size-adjust: 100%;
}

body {

    /* Legacy Properties (Only for baseline reset use.) */

    -webkit-font-smoothing: antialiased;

    /* Spacing Properties */

    margin-block-start: 0;
    margin-block-end: 0;

    margin-inline-start: 0;
    margin-inline-end: 0;

    /* Color Properties */

    color: var(--on-surface);

    /* Font Properties */

    font-family: var(--font-body);
    font-size: var(--base-size);

    /* Text Properties */

    line-height: 1.65;

    hyphens: none;

    /* Text Decoration Properties */

    text-rendering: optimizeLegibility;


    /* Background Properties */

    background-image: radial-gradient(70rem 40rem at 8% -6%, color-mix(in srgb, var(--primary) calc(var(--wash-alpha) * 100%), transparent), transparent 70%), radial-gradient(50rem 34rem at 96% 22%, rgba(251, 191, 73, .055), transparent 70%), radial-gradient(color-mix(in srgb, var(--on-surface-var) calc(var(--dot-alpha) * 100%), transparent) 1px, transparent 1px); /* Texture: two soft washes + a dot grid. Scrolls with the page, so no fixed-attachment seams. */

    background-size: auto, auto, 26px 26px;

    background-repeat: no-repeat, no-repeat, repeat;

    background-color: var(--surface);
}

img {

    /* Sizing Properties */

    height: auto;

    max-width: 100%;
}

/*
* Global link color. Without this, a link the theme does not style explicitly falls back to the browser default purple.
*/
a {

    /* Color Properties */

    color: var(--primary);
}

/*
 * Hides content visually while keeping it in the accessibility tree. The :focus-within / :active exception lets focusable
 * content inside the class become visible when it is reached.
 */
.visually-hidden:where(:not(:focus-within, :active)) {

    /* Position Properties */

    position: absolute !important;

    /* Sizing Properties */

    height: 1px !important;

    width: 1px !important;

    /* Spacing Properties */

    margin-block-start: -1px !important;
    margin-block-end: -1px !important;

    margin-inline-start: -1px !important;
    margin-inline-end: -1px !important;

    padding-block-start: 0 !important;
    padding-block-end: 0 !important;

    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;

    /* Layout Properties */

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    /* Text Properties */

    white-space-collapse: collapse !important;
    text-wrap-mode: nowrap !important;

    /* Border and Box Decoration Properties */

    clip-path: inset(50%) !important;

    border-block-start-width: 0 !important;
    border-block-start-style: none !important;

    border-block-end-width: 0 !important;
    border-block-end-style: none !important;

    border-inline-start-width: 0 !important;
    border-inline-start-style: none !important;

    border-inline-end-width: 0 !important;
    border-inline-end-style: none !important;
}

.skip-link {

    /* Position Properties */

    z-index: 99;

    /* Spacing Properties */

    padding-block-start: 0.6rem;
    padding-block-end: 0.6rem;

    padding-inline-start: 1rem;
    padding-inline-end: 1rem;


    /* Color Properties */

    color: var(--on-primary-container);

    /* Background Properties */

    background-image: initial;

    background-size: initial;

    background-position-x: initial;
    background-position-y: initial;

    background-origin: initial;
    background-repeat: initial;

    background-attachment: initial;
    background-clip: initial;

    background-color: var(--primary-container);

    /* Border and Box Decoration Properties */

    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);

    border-end-start-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);
}

.skip-link:focus-within {

    /* Position Properties */

    position: fixed;

    inset-block-start: 1rem;

    inset-inline-start: 1rem;
}

:focus-visible {

    /* Border and Box Decoration Properties */

    border-start-start-radius: var(--r-xs);
    border-start-end-radius: var(--r-xs);

    border-end-start-radius: var(--r-xs);
    border-end-end-radius: var(--r-xs);

    /* User Interface Properties */

    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--primary);

    outline-offset: 2px;
}

/* 3  Header =============================================================== */
.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgba(16, 20, 22, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline-variant);
}

.header-inner {
    max-width: var(--shell-max);
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding-block-start: 14px;
    padding-inline-end: var(--gutter);
    padding-block-end: 14px;
    padding-inline-start: var(--gutter);
    display: flex;
    align-items: center;
    row-gap: 20px;
    column-gap: 20px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    row-gap: 9px;
    column-gap: 9px;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--on-surface);
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
}

.wordmark-dot {
    width: 9px;
    height: 9px;
    border-start-start-radius: 2px;
    border-start-end-radius: 2px;
    border-end-end-radius: 2px;
    border-end-start-radius: 2px;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--primary);
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

.nav {
    margin-inline-start: auto;
}

.nav-pills {
    display: flex;
    align-items: center;
    row-gap: 4px;
    column-gap: 4px;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    padding-block-start: 5px;
    padding-inline-end: 5px;
    padding-block-end: 5px;
    padding-inline-start: 5px;
    list-style-position: initial;
    list-style-image: initial;
    list-style-type: none;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container-hi);
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline);
    border-inline-end-color: var(--outline);
    border-block-end-color: var(--outline);
    border-inline-start-color: var(--outline);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-full);
    border-start-end-radius: var(--r-full);
    border-end-end-radius: var(--r-full);
    border-end-start-radius: var(--r-full);
    box-shadow: var(--elev-2);
}

/* Merged at the first declaration, carrying last-wins values from 2 blocks. 0 value overrides, 0 identical repeats. */
.nav-pills a {
    display: inline-flex;
    align-items: center;
    padding-block-start: 8px;
    padding-inline-end: 16px;
    padding-block-end: 8px;
    padding-inline-start: 16px;
    border-start-start-radius: var(--r-full);
    border-start-end-radius: var(--r-full);
    border-end-end-radius: var(--r-full);
    border-end-start-radius: var(--r-full);
    font-size: .875rem;
    line-height: 1;
    color: var(--on-surface-var);
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    transition-behavior: normal, normal;
    transition-duration: 0.18s, 0.18s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    transition-property: background-color, color;
    row-gap: 7px;
    column-gap: 7px;
}

.nav-pills a:hover {
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgba(216, 222, 224, 0.08);
    color: var(--on-surface);
}

.nav-pills a.is-active {
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 500;
}

.nav-toggle {
    display: none;
    background-image: none;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    border-block-start-width: 0;
    border-inline-end-width: 0;
    border-block-end-width: 0;
    border-inline-start-width: 0;
    border-block-start-style: initial;
    border-inline-end-style: initial;
    border-block-end-style: initial;
    border-inline-start-style: initial;
    border-block-start-color: initial;
    border-inline-end-color: initial;
    border-block-end-color: initial;
    border-inline-start-color: initial;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    cursor: pointer;
    padding-block-start: 8px;
    padding-inline-end: 8px;
    padding-block-end: 8px;
    padding-inline-start: 8px;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--on-surface);
    margin-block-start: 4px;
    margin-inline-end: 0;
    margin-block-end: 4px;
    margin-inline-start: 0;
    border-start-start-radius: 2px;
    border-start-end-radius: 2px;
    border-end-end-radius: 2px;
    border-end-start-radius: 2px;
}


.nav-icon {
    width: 15px;
    height: 15px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    opacity: .75;
    transition-behavior: normal;
    transition-duration: 0.18s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: opacity;
}

.nav-pills a:hover .nav-icon {
    opacity: 1;
}

.nav-pills a.is-active .nav-icon {
    opacity: 1;
}


/* 4  Page head ============================================================ */
/* ── Full-width page head ───────────────────────────────────────────────────
   Titles span the grid so the sidebar starts level with the content below,
   rather than riding up beside the heading. */
/* Merged at the first declaration, carrying last-wins values from 2 blocks. 2 value overrides, 7 identical repeats. */
/* ── Sticky page head ───────────────────────────────────────────────────────
   Title and meta stay pinned under the navbar while the body scrolls beneath. */
.page-head {
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline-variant);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    position: sticky;
    inset-block-start: var(--header-h);
    z-index: 15;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Merged at the first declaration, carrying last-wins values from 2 blocks. 2 value overrides, 0 identical repeats. */
.page-head-inner {
    max-width: var(--shell-max);
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding-block-start: clamp(22px, 2.6vw, 34px);
    padding-inline-end: var(--gutter);
    padding-block-end: clamp(22px, 2.6vw, 34px);
    padding-inline-start: var(--gutter);
    /* One box on every page, so moving Home -> Blog -> About never shifts the content below. Content is centred inside it. */
    min-height: clamp(148px, 13vw, 196px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-head .page-title,
.page-head .post-title {
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0.5rem;
    margin-inline-start: 0;
}

.page-head-intro {
    margin-block-start: .75rem;
}

.page-head-intro p {
    color: var(--on-surface-var);
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
}

.page-head .post-meta {
    margin-block-start: .9rem;
}

/* ── Sticky page head ───────────────────────────────────────────────────────
   Title and meta stay pinned under the navbar while the body scrolls beneath. */


/* ===***===***=== §5: Shell ===***===***=== */

/*
 * §5.1: The page skeleton. One grid, two tracks, collapsing to one at the 1060px line in §18.
 */
.shell {
    display: grid;
    align-items: start;
    row-gap: clamp(28px, 4vw, 56px);
    column-gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);

    max-width: var(--shell-max);

    margin-inline-start: auto;
    margin-inline-end: auto;

    padding-block-start: clamp(28px, 3.5vw, 44px);
    padding-block-end: clamp(48px, 6vw, 80px);

    padding-inline-start: var(--gutter);
    padding-inline-end: var(--gutter);
}

/*
 * §5.2: The article track as a query container. Its width is the question every component inside it actually asks, and
 * it is not the window's. At a 640px window in one column, this track is 588px. At a 1061px window with the sidebar
 * back, it is 624px. `inline-size` contains the width only, so nothing here has to be given a height. The name is
 * declared rather than left anonymous, so a reader of any @container block can see which box it asks. `container` is a
 * shorthand, forbidden by rule 1.
 */
.content {
    container-type: inline-size;
    container-name: article;
}


/* 6  Type ================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--on-surface);
    letter-spacing: -.02em;
    line-height: 1.2;
    text-wrap-mode: initial;
    text-wrap-style: balance;
    margin-block-start: 2rem;
    margin-inline-end: 0;
    margin-block-end: 0.75rem;
    margin-inline-start: 0;
}

h1 {
    font-size: clamp(2.15rem, 1.5rem + 3vw, 3.5rem);
    font-weight: 700;
    margin-block-start: 0;
}

h2 {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
    font-weight: 500;
}

h3 {
    font-size: 1.28rem;
    font-weight: 500;
}

/* h4 lands on body size, and the scale stops there: a heading is never smaller
   than the copy it introduces. Left to the browser, h5 and h6 rendered at
   14.11px and 11.39px against 17px body text, in the body font rather than the
   display font. The deeper levels separate by color and case instead of size.
   h4, h5 and h6 appear only in page content, never in a template, so each is
   defined once here with its final value rather than being restated under
   .prose the way h2 and h3 are. */
h4 {
    font-size: 1.0625rem;
    font-weight: 600;
}

h5 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--on-surface-var);
    margin-block-start: 1.75rem;
}

h6 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--on-surface-var);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-block-start: 1.5rem;
}

.prose p, .prose ul, .prose ol, .prose blockquote {
    max-width: var(--measure);
}

.prose p {
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 1.15rem;
    margin-inline-start: 0;
}

.prose a {
    color: var(--primary);
    text-underline-offset: .18em;
    text-decoration-color: rgba(82, 208, 189, .45);
}

.prose a:hover {
    text-decoration-color: currentColor;
}

.prose ul, .prose ol {
    padding-inline-start: 1.3rem;
}

.prose li {
    margin-block-end: .4rem;
}

.prose hr {
    border-block-start-width: 1px;
    border-inline-end-width: 0;
    border-block-end-width: 0;
    border-inline-start-width: 0;
    border-block-start-style: solid;
    border-inline-end-style: initial;
    border-block-end-style: initial;
    border-inline-start-style: initial;
    border-block-start-color: var(--outline-variant);
    border-inline-end-color: initial;
    border-block-end-color: initial;
    border-inline-start-color: initial;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    margin-block-start: 2.5rem;
    margin-inline-end: 0;
    margin-block-end: 2.5rem;
    margin-inline-start: 0;
}

.prose blockquote {
    margin-block-start: 1.5rem;
    margin-inline-end: 0;
    margin-block-end: 1.5rem;
    margin-inline-start: 0;
    padding-block-start: 0.2rem;
    padding-inline-end: 0;
    padding-block-end: 0.2rem;
    padding-inline-start: 1.15rem;
    border-inline-start-width: 3px;
    border-inline-start-style: solid;
    border-inline-start-color: var(--primary-container);
    color: var(--on-surface-var);
}

/* ── Content elements the browser was styling ──────────────────────────────
   Markdown can emit all of these and the theme named none of them, so their
   appearance came from the user-agent stylesheet. Every value below was
   measured as browser-supplied before being stated here, and each follows an
   idiom already in this file rather than a new invention. Derivation and the
   per-element measurements: BSB_Reset_Derivation.md §1.0.1. */
/* Figures. The image-captions plugin emits these, and the browser indents them
   40px on both sides. Rhythm matches blockquote. */
.prose figure {
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.prose figcaption {
    margin-block-start: .5rem;
    font-size: .875rem;
    color: var(--on-surface-var);
}

/* Definition lists. Indent matches .prose ul/ol, spacing matches .prose li. */
.prose dl {
    margin-block-end: 1.15rem;
}

.prose dt {
    font-weight: 600;
    color: var(--on-surface);
}

.prose dd {
    margin-inline-start: 1.3rem;
    margin-block-end: .4rem;
}

/* A fenced block codesh did not claim. Every codesh block nests its <pre> two
   levels down, under .codesh-block > .codesh-code, so the child combinator
   here reaches only the uncovered case and cannot collide with the plugin.
   Verified on the live site: 16 of 16 <pre> elements sit inside .codesh-block
   and none is a direct child of .prose. */
.prose > pre {
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
    padding-block-start: 14px;
    padding-inline-end: 16px;
    padding-block-end: 14px;
    padding-inline-start: 16px;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container);
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline-variant);
    border-inline-end-color: var(--outline-variant);
    border-block-end-color: var(--outline-variant);
    border-inline-start-color: var(--outline-variant);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
    border-end-start-radius: var(--r-md);
    overflow-x: auto;
}

/* Highlight. The browser's yellow is unreadable on a dark surface. Follows the
   inline-code treatment exactly, with the tertiary tint in place of primary. */
.prose mark {
    padding-block-start: 0.12em;
    padding-inline-end: 0.4em;
    padding-block-end: 0.12em;
    padding-inline-start: 0.4em;
    border-start-start-radius: var(--r-xs);
    border-start-end-radius: var(--r-xs);
    border-end-end-radius: var(--r-xs);
    border-end-start-radius: var(--r-xs);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: color-mix(in srgb, var(--tertiary) 22%, transparent);
    color: var(--on-surface);
}

/* Disclosure. The marker glyph and its placement are an engine choice; the
   native one is kept because it is the accessible default. */
.prose details {
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
    padding-block-start: 0.75rem;
    padding-inline-end: 1rem;
    padding-block-end: 0.75rem;
    padding-inline-start: 1rem;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container-low);
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline-variant);
    border-inline-end-color: var(--outline-variant);
    border-block-end-color: var(--outline-variant);
    border-inline-start-color: var(--outline-variant);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
    border-end-start-radius: var(--r-md);
}

.prose summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--on-surface);
}

/* Tables. The theme carried no table rule of any kind, so a Markdown table
   rendered wholly from the browser: 1px cell padding and gray borders against
   a dark surface. The header row takes the stronger --outline to separate it
   from the body; rows take the lighter --outline-variant, which is the divider
   used everywhere else in this file. */
.prose table {
    width: 100%;
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
    border-collapse: collapse;
    font-size: .95rem;
}

.prose th {
    padding-block-start: 0.6rem;
    padding-inline-end: 0.75rem;
    padding-block-end: 0.6rem;
    padding-inline-start: 0.75rem;
    font-family: var(--font-display);
    font-weight: 600;
    text-align: start;
    color: var(--on-surface);
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline);
}

.prose td {
    padding-block-start: 0.6rem;
    padding-inline-end: 0.75rem;
    padding-block-end: 0.6rem;
    padding-inline-start: 0.75rem;
    vertical-align: top;
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline-variant);
}

.prose caption {
    caption-side: bottom;
    margin-block-start: .5rem;
    font-size: .875rem;
    text-align: start;
    color: var(--on-surface-var);
}

/* `anywhere` here, where the reset uses `break-word` for prose, and the
   difference is the whole point. A table column is sized by its min-content
   width, and `break-word` does not reduce min-content, so a four-column table
   of unbreakable values measured 551px wide inside a 280px column and pushed
   the page 251px sideways at a 320px viewport. `anywhere` does reduce it, and
   the same table then measures 280px with zero page overflow.
   In prose that reduction would hide layout bugs, which is why the reset
   avoids it; in a table cell it is the mechanism that lets a column fit.
   This keeps display: table, so the accessibility tree still reports a table
   with its rows and cells, which a display: block scroll wrapper would have
   put in question. */
.prose :is(td, th) {
    overflow-wrap: anywhere;
}

.page-title, .post-title {
    margin-block-end: .5rem;
}

/* Section headings share the homepage title treatment. Post titles stay in
   text colour — they are content, not navigation. */
.page-title {
    color: var(--primary);
}

/* Anchored headings clear both sticky bars */
.prose :is(h2, h3, h4) {
    scroll-margin-top: calc(var(--header-h) + 190px);
}

/* Section headings inside prose were blending into body copy */
.prose h2, .prose h3 {
    margin-block-start: 2.75rem;
    padding-block-start: .2rem;
    color: var(--on-surface);
}

.prose h2 {
    font-size: 1.6rem;
    font-weight: 600;
    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline-variant);
    padding-block-start: 1.6rem;
}

.prose h3 {
    font-size: 1.28rem;
    font-weight: 600;
}

/* The marker is an inline-block, not a flex item, and the heading stays a block.
   Making the heading a flex container turned every child into a flex item, and a
   flex item's default min-width: auto floors it at min-content. A long identifier
   in a heading then pushed the page 120px past a 320px viewport, and
   overflow-wrap: break-word could not recover it, because break-word does not
   reduce min-content contribution. Measured identical either way: 6x6 marker,
   2px radius, translateY(-3.072px), heading height 27.77px. */
.prose h3::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-start-start-radius: 2px;
    border-start-end-radius: 2px;
    border-end-end-radius: 2px;
    border-end-start-radius: 2px;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--primary);
    margin-inline-end: .55em;
    transform: translateY(-.15em);
}

/* Anchors plugin: keep the link, hide the clutter until hover */
.prose :is(h2,h3,h4) > a.anchor,
.prose :is(h2,h3,h4) > a[href^="#"]:first-child {
    opacity: 0;
    margin-inline-start: .35em;
    color: var(--on-surface-dim);
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    transition-behavior: normal;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: opacity;
}

.prose :is(h2,h3,h4):hover > a.anchor,
.prose :is(h2,h3,h4):hover > a[href^="#"]:first-child {
    opacity: .6;
}


/* 7  Form controls ======================================================== */
/* ── Form controls ─────────────────────────────────────────────────────────
   Inert until the comments plugin is enabled, and authored now because leaving
   them is exactly what put 83 browser-supplied values in this file. All thirty
   of the measured cross-engine divergences live in these seven elements:
   Chromium, Gecko and WebKit disagree on their backgrounds (239, 233 and 192
   gray), their padding (6px, 4px, 6px) and their border styles (1px solid
   against Gecko's 2px inset). Not one of those survives a dark theme.
   Revisit once comments emits a real form and these can be checked against it
   rather than against a synthetic one.
   .nav-toggle keeps its own appearance: at 0,1,0 it outranks these. */
input, textarea, select {
    padding-block-start: 0.5rem;
    padding-inline-end: 0.7rem;
    padding-block-end: 0.5rem;
    padding-inline-start: 0.7rem;
    color: var(--on-surface);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container-low);
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline);
    border-inline-end-color: var(--outline);
    border-block-end-color: var(--outline);
    border-inline-start-color: var(--outline);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);
    border-end-start-radius: var(--r-sm);
}

/* A focus ring on every control, including the nav toggle, which had none. */
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible {
    outline-color: var(--primary);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

/* The filled treatment belongs to a button that submits something, not to
   every <button>. Claiming the bare element was measured to reach .nav-toggle:
   `button:hover` at 0,1,1 outranks `.nav-toggle` at 0,1,0, which would have
   put a filled teal pill behind the hamburger on hover, and the generic rule
   also handed it a 999px radius and a teal text colour it never asked for.
   Scoping by role rather than excluding one class keeps the rule honest about
   what it is for. */
form button, button[type="submit"], button[type="reset"] {
    padding-block-start: 0.5rem;
    padding-inline-end: 1rem;
    padding-block-end: 0.5rem;
    padding-inline-start: 1rem;
    color: var(--on-primary-container);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--primary-container);
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: transparent;
    border-inline-end-color: transparent;
    border-block-end-color: transparent;
    border-inline-start-color: transparent;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-full);
    border-start-end-radius: var(--r-full);
    border-end-end-radius: var(--r-full);
    border-end-start-radius: var(--r-full);
    cursor: pointer;
}

form button:hover, button[type="submit"]:hover, button[type="reset"]:hover {
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--primary);
    color: var(--surface);
}

fieldset {
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 1rem;
    padding-inline-end: 1rem;
    padding-block-end: 1rem;
    padding-inline-start: 1rem;
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline-variant);
    border-inline-end-color: var(--outline-variant);
    border-block-end-color: var(--outline-variant);
    border-inline-start-color: var(--outline-variant);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
    border-end-start-radius: var(--r-md);
}

legend {
    padding-inline-start: 0.4rem;
    padding-inline-end: 0.4rem;
    color: var(--on-surface-var);
}

option {
    color: var(--on-surface);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container-low);
}


/* ===***===***=== §8: Section Head ===***===***=== */

/*
 * Section heads sit above every content area, so the decoration is consistent between Home, Blog and About.
 */

.section-head {

    /* Display Properties */

    display: flex;

    /* Spacing Properties */

    margin-block-start: 0;
    margin-block-end: 1.4rem;

    margin-inline-start: 0;
    margin-inline-end: 0;

    column-gap: 14px;
    row-gap: 14px;

    /* Layout Properties */

    align-items: center;
}

.section-label {

    /* Display Properties */

    display: inline-flex;

    /* Spacing Properties */

    margin-block-start: 0;
    margin-block-end: 0;

    margin-inline-start: 0;
    margin-inline-end: 0;

    column-gap: 0.4em;
    row-gap: 0.4em;

    /* Layout Properties */

    align-items: baseline;

    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;

    /* Color Properties */

    color: var(--primary);

    /* Font Properties */

    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .86rem;
}

.section-label .prompt {

    /* Color Properties */

    color: var(--primary);
    opacity: .75;

    /* Font Properties */

    font-weight: 400;
}

.section-rule {

    /* Sizing Properties */

    height: 1px;

    /* Layout Properties */

    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;

    /* Background Properties */

    background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, transparent), transparent);

    background-size: initial;

    background-position-x: initial;
    background-position-y: initial;

    background-origin: initial;
    background-repeat: initial;

    background-attachment: initial;
    background-clip: initial;

    background-color: initial;
}

.section-more {

    /* Layout Properties */

    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;

    /* Color Properties */

    color: var(--on-surface-var);

    /* Font Properties */

    font-family: var(--font-mono);
    font-size: .74rem;

    /* Text Properties */

    white-space-collapse: collapse;
    text-wrap-mode: nowrap;

    letter-spacing: .06em;

    /* Text Decoration Properties */

    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
}

a.section-more:hover {

    /* Color Properties */

    color: var(--primary);
}

/* A post count is not a link, so it should not invite a click. */
.section-count {

    /* Color Properties */

    color: var(--on-surface-dim);

    /* User Interface Properties */

    cursor: default;
}

/*
 * §8.1: The head against its own track. At 590px the label and the link have taken the row and the rule between them
 * has nothing left to draw. The number is the track's width rather than the window's.
 *
 * `flex-wrap` is a guard rather than a fix. Measured down to a 380px window the head stays 23px tall with it and
 * without it, the rule absorbing the slack before the next declaration hides it. It is here for the day a section
 * label grows, which is what guards are for.
 */
@container article (max-width: 590px) {
    .section-head {

        /* Layout Properties */

        flex-wrap: wrap;
    }

    .section-rule {

        /* Display Properties */

        display: none;
    }
}


/* 9  Cards and listing ==================================================== */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    row-gap: clamp(16px, 2vw, 22px);
    column-gap: clamp(16px, 2vw, 22px);
}

.post-card {
    display: flex;
    flex-direction: column;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container);
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline-variant);
    border-inline-end-color: var(--outline-variant);
    border-block-end-color: var(--outline-variant);
    border-inline-start-color: var(--outline-variant);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-lg);
    border-start-end-radius: var(--r-lg);
    border-end-end-radius: var(--r-lg);
    border-end-start-radius: var(--r-lg);
    box-shadow: var(--elev-1);
    padding-block-start: 20px;
    padding-inline-end: 20px;
    padding-block-end: 16px;
    padding-inline-start: 20px;
    transition-behavior: normal, normal, normal;
    transition-duration: 0.18s, 0.18s, 0.18s;
    transition-timing-function: ease, ease, ease;
    transition-delay: 0s, 0s, 0s;
    transition-property: border-color, box-shadow, transform;
}

.post-card:hover {
    border-block-start-color: var(--outline);
    border-inline-end-color: var(--outline);
    border-block-end-color: var(--outline);
    border-inline-start-color: var(--outline);
    box-shadow: var(--elev-3);
    transform: translateY(-2px);
}

.post-card-link {
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    color: inherit;
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

/* Merged at the first declaration, carrying last-wins values from 2 blocks. 0 value overrides, 0 identical repeats. */
.post-card-title {
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -.015em;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0.5rem;
    margin-inline-start: 0;
    color: var(--on-surface);
    transition-behavior: normal;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: color;
}

.post-card:hover .post-card-title {
    color: var(--primary);
}

.post-card-excerpt {
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    font-size: .925rem;
    line-height: 1.6;
    color: var(--on-surface-var);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* The unprefixed `line-clamp` was removed here, and it is the only shorthand
       deliberately absent from this file rather than expanded.
       It is a shorthand under CSS Overflow 4, but its longhand set is unsettled:
       the current editor's draft gives the grammar as
       `none | [<'max-lines'> || <'block-ellipsis'>] -webkit-legacy?`, two
       longhands with a trailing keyword, while Igalia's implementer explainer
       gives three (`continue`, `max-lines`, `block-ellipsis`) with -webkit-legacy
       as a value of `continue`. The CSSWG has an open issue calling the shorthand
       syntax ambiguous and an open PR rewriting it, and neither source states
       what a bare integer sets `block-ellipsis` to. No shipping browser
       implements the unprefixed property, so the declaration was inert and
       nothing is lost by its absence.
       Expanding it would have meant guessing between two contradictory published
       definitions and encoding the guess where nothing can contradict it.
       When the syntax settles, the real longhands replace this comment. */
    -webkit-line-clamp: 4;
    overflow-x: hidden;
    overflow-y: hidden;
}

.post-card-tags {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    margin-block-start: 14px;
    padding-block-start: 12px;
    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline-variant);
}


/* Mono metadata picks up a hint of the accent on hover surfaces */
.post-card:hover .post-date {
    color: var(--primary);
}


/* 10  Tags ================================================================ */
.tag {
    display: inline-flex;
    align-items: center;
    row-gap: 4px;
    column-gap: 4px;
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .02em;
    text-transform: lowercase;
    padding-block-start: 4px;
    padding-inline-end: 11px;
    padding-block-end: 4px;
    padding-inline-start: 11px;
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline);
    border-inline-end-color: var(--outline);
    border-block-end-color: var(--outline);
    border-inline-start-color: var(--outline);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);
    border-end-start-radius: var(--r-sm);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--surface);
    color: var(--on-surface-var);
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    transition-behavior: normal, normal;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    transition-property: border-color, color;
}

/* Merged at the first declaration, carrying last-wins values from 2 blocks. 1 value override, 0 identical repeats. */
/* ── Teal accents, as in the concept ───────────────────────────────────── */
.tag::before {
    content: '#';
    opacity: .85;
    color: var(--primary);
}

.tag:hover {
    border-block-start-color: var(--primary);
    border-inline-end-color: var(--primary);
    border-block-end-color: var(--primary);
    border-inline-start-color: var(--primary);
    color: var(--primary);
}

.tag-count {
    color: var(--on-surface-dim);
    font-size: .62rem;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
}


/* ===***===***=== §11: Post Page ===***===***=== */

.post-date, .post-meta time {

    /* Display Properties */

    display: block;

    /* Spacing Properties */

    margin-block-end: .5rem;

    /* Color Properties */

    color: var(--on-surface-dim);

    /* Font Properties */

    font-family: var(--font-mono);
    font-size: .68rem;

    /* Text Properties */

    letter-spacing: .1em;
}

.post-title {

    /* Font Properties */

    font-size: clamp(2rem, 1.4rem + 2.8vw, 3.15rem);
}

.post-meta {

    /* Display Properties */

    display: flex;

    /* Spacing Properties */

    column-gap: 10px;
    row-gap: 10px;

    /* Layout Properties */

    align-items: center;

    flex-wrap: wrap;
}

.post-meta time {

    /* Spacing Properties */

    margin-block-end: 0;

    /* Text Properties */

    letter-spacing: .09em;
}

.post-meta-tags {

    /* Display Properties */

    display: flex;

    /* Spacing Properties */

    column-gap: 6px;
    row-gap: 6px;

    /* Layout Properties */

    flex-wrap: wrap;
}

.post-nav {

    /* Display Properties */

    display: grid;

    /* Spacing Properties */

    margin-block-start: 3rem;

    padding-block-start: 1.75rem;

    /* Layout Properties */

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    column-gap: 14px;
    row-gap: 14px;

    /* Border and Box Decoration Properties */

    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline-variant);
}

.post-nav a {

    /* Display Properties */

    display: flex;

    /* Spacing Properties */

    padding-block-start: 15px;
    padding-block-end: 15px;

    padding-inline-start: 18px;
    padding-inline-end: 18px;

    column-gap: 22px;
    row-gap: 22px;

    /* Layout Properties */

    align-items: flex-start;

    /* Text Decoration Properties */

    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;

    /* Background Properties */

    background-image: initial;

    background-size: initial;

    background-position-x: initial;
    background-position-y: initial;

    background-origin: initial;
    background-repeat: initial;

    background-attachment: initial;
    background-clip: initial;

    background-color: var(--container-low);

    /* Border and Box Decoration Properties */

    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline-variant);

    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline-variant);

    border-inline-start-width: 1px;
    border-inline-start-style: solid;
    border-inline-start-color: var(--outline-variant);

    border-inline-end-width: 1px;
    border-inline-end-style: solid;
    border-inline-end-color: var(--outline-variant);

    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);

    border-end-start-radius: var(--r-md);
    border-end-end-radius: var(--r-md);

    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;

    /* Transition Properties */

    transition-delay: 0s, 0s;
    transition-duration: 0.18s, 0.18s;
    transition-property: border-color, background-color;
    transition-timing-function: ease, ease;
    transition-behavior: normal, normal;
}

.post-nav a:hover {

    /* Background Properties */

    background-image: initial;

    background-size: initial;

    background-position-x: initial;
    background-position-y: initial;

    background-origin: initial;
    background-repeat: initial;

    background-attachment: initial;
    background-clip: initial;

    background-color: var(--container);

    /* Border and Box Decoration Properties */

    border-block-start-color: var(--primary);
    border-block-end-color: var(--primary);

    border-inline-start-color: var(--primary);
    border-inline-end-color: var(--primary);
}

/*
 * Chevrons, no box. On hover the teal travels outward and the trail fades:
 * 1 chevron = teal · 2 = new teal, old 50% · 3 = new teal, 50%, dim.
 */
.post-nav-arrow {

    /* Display Properties */

    display: inline-flex;

    /* Spacing Properties */

    margin-block-start: 1px; /* Sits on the Older/Newer line, not the middle of the card. */

    /* Layout Properties */

    align-items: center;

    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.post-nav-arrow svg {

    /* Display Properties */

    display: block;

    /* Spacing Properties */

    margin-block-start: 0;
    margin-block-end: 0;

    margin-inline-start: -4px;
    margin-inline-end: -4px;

    /* Transition Properties */

    transition-delay: 0s, 0s, 0s;
    transition-duration: 0.3s, 0.3s, 0.3s;
    transition-property: opacity, transform, color;
    transition-timing-function: ease, ease, ease;
    transition-behavior: normal, normal, normal;
}

/*
 * One chevron travels the whole distance; the other two are the trail it leaves behind.
 *   c3 = the head. Starts stacked on c1, slides continuously to its own position, stays 100% teal the whole way.
 *   c1 = trail at first position. Lit as the head departs, fades to 50% as the head reaches second position, dim by
 *        the time it reaches third.
 *   c2 = trail at second position. Lit as the head departs it, settles at 50%.
 * --slide is the distance from the head's resting spot back to the stack, so it flips sign per direction.
 */
.post-nav-arrow .c1 {

    /* Color Properties */

    color: var(--on-surface-dim);
}

.post-nav-arrow .c2 {

    /* Color Properties */

    opacity: 0;
}

.post-nav-arrow .c3 {

    /* Color Properties */

    opacity: 0;
}

.post-nav-prev .post-nav-arrow .c3 {

    /* Custom Properties */

    --slide: 14px;

    /* Transform Properties */

    transform: translateX(var(--slide));
}

.post-nav-next .post-nav-arrow .c3 {

    /* Custom Properties */

    --slide: -14px;

    /* Transform Properties */

    transform: translateX(var(--slide));
}

.post-nav a:hover .post-nav-arrow .c1 {

    /* Animation Properties */

    animation-name: bsb-chev-t1;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-timeline: auto;

    animation-range-start: normal;
    animation-range-end: normal;
}

.post-nav a:hover .post-nav-arrow .c2 {

    /* Animation Properties */

    animation-name: bsb-chev-t2;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-timeline: auto;

    animation-range-start: normal;
    animation-range-end: normal;
}

.post-nav a:hover .post-nav-arrow .c3 {

    /* Color Properties */

    color: var(--primary);

    /* Animation Properties */

    animation-name: bsb-chev-head;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-timeline: auto;

    animation-range-start: normal;
    animation-range-end: normal;

}

.post-nav-body {

    /* Display Properties */

    display: flex;

    /* Sizing Properties */

    min-width: 0;

    /* Spacing Properties */

    column-gap: 0.18rem;
    row-gap: 0.18rem;

    /* Layout Properties */

    flex-direction: column;
}

.post-nav-label {

    /* Color Properties */

    color: var(--on-surface-dim);

    /* Font Properties */

    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .74rem;

    /* Text Properties */

    text-transform: uppercase;

    letter-spacing: .12em;
}

.post-nav-title {

    /* Legacy Properties */

    /*
    * Even out the two clamped lines rather than filling the first and leaving a short remainder, which on the
    * right-aligned Newer card reads as a ragged left edge.
    */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Unprefixed `line-clamp` removed; see the note at the other clamp above. */

    /* Display Properties */

    display: -webkit-box;

    /* Layout Propertes */

    overflow-x: hidden;
    overflow-y: hidden;

    /* Color Properties */

    color: var(--on-surface);

    /* Font Properties */

    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.02rem;

    /* Text Properties */

    line-height: 1.3;

    text-wrap-mode: initial;
    text-wrap-style: balance;

    /* Transition Properties */

    transition-delay: 0s;
    transition-duration: 0.18s;
    transition-property: color;
    transition-timing-function: ease;
    transition-behavior: normal;
}

.post-nav a:hover .post-nav-title {

    /* Color Properties */

    color: var(--primary);
}

.post-nav-date {

    /* Color Properties */

    color: var(--on-surface-dim);

    /* Font Properties */

    font-family: var(--font-mono);
    font-size: .68rem;

    /* Text Properties */

    letter-spacing: .09em;
}

.post-nav-prev {

    /* Layout Properties */

    justify-content: flex-start;

    grid-column-start: 1;
    grid-column-end: auto;
}

.post-nav-next {

    /* Layout Properties */

    justify-content: flex-end;

    flex-direction: row;

    grid-column-start: 2;
    grid-column-end: auto;

    /* Text Properties */

    text-align: end;
}

.post-nav-next .post-nav-body {

    /* Layout Properties */

    align-items: flex-end;
}

/* Slightly bigger, less dim metadata */
.post-date, .post-meta time, .card-label {

    /* Font Properties */

    font-size: .78rem;
}

/*
 * §11.1: Post navigation against its own track. Dropping the title and the date takes the pair from 147px tall to 81px,
 * measured on all ten posts at a a 590px track, and leaves the two arrows at the track's edges.
 */
@container article (max-width: 590px) {
    .post-nav-title, .post-nav-date {

        /* Display Properties */

        display: none;
    }

    .post-nav {

        /* Layout Properties */

        justify-content: space-between;

        grid-template-columns: auto auto;
    }
}

/* 12  Sidebar ============================================================= */
.sidebar {
    display: flex;
    flex-direction: column;
    row-gap: 18px;
    column-gap: 18px;
}

/* Merged at the first declaration, carrying last-wins values from 2 blocks. 0 value overrides, 0 identical repeats. */
/* A hairline under the command, like a terminal rule */
.card {
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container);
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline-variant);
    border-inline-end-color: var(--outline-variant);
    border-block-end-color: var(--outline-variant);
    border-inline-start-color: var(--outline-variant);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-lg);
    border-start-end-radius: var(--r-lg);
    border-end-end-radius: var(--r-lg);
    border-end-start-radius: var(--r-lg);
    padding-block-start: 18px;
    padding-inline-end: 20px;
    padding-block-end: 20px;
    padding-inline-start: 20px;
    box-shadow: var(--elev-1);
    position: relative;
}

.card-low {
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container-low);
}

/* Merged at the first declaration, carrying last-wins values from 3 blocks. 5 value overrides, 6 identical repeats. */
.card-label {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none; /* commands are lowercase */
    color: var(--primary);
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0.9rem;
    margin-inline-start: 0;
    display: flex;
    align-items: baseline;
    row-gap: 0.45em;
    column-gap: 0.45em;
}

.about-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -.02em;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0.4rem;
    margin-inline-start: 0;
}

.about-bio {
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--on-surface-var);
}

.cred-list, .link-list, .related-list {
    list-style-position: initial;
    list-style-image: initial;
    list-style-type: none;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    padding-block-start: 0;
    padding-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
}

.cred-list li {
    font-size: .875rem;
    line-height: 1.5;
    padding-block-start: 0.45rem;
    padding-inline-end: 0;
    padding-block-end: 0.45rem;
    padding-inline-start: 0;
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline-variant);
}

.cred-list li:last-child {
    border-block-end-width: 0;
    border-block-end-style: initial;
    border-block-end-color: initial;
    padding-block-end: 0;
}

.related-list li {
    padding-block-start: 0.45rem;
    padding-inline-end: 0;
    padding-block-end: 0.45rem;
    padding-inline-start: 0;
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline-variant);
}

.related-list li:last-child {
    border-block-end-width: 0;
    border-block-end-style: initial;
    border-block-end-color: initial;
}

.related-list a {
    color: var(--on-surface);
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    font-size: .875rem;
    line-height: 1.45;
}

.related-list a:hover {
    color: var(--primary);
}

.link-list {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    column-gap: 2px;
}

.link-list li {
    padding-block-start: 0;
    padding-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
}

.link-list a {
    display: inline-flex;
    align-items: center;
    row-gap: 9px;
    column-gap: 9px;
    padding-block-start: 5px;
    padding-inline-end: 0;
    padding-block-end: 5px;
    padding-inline-start: 0;
    color: var(--primary);
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    font-size: .84rem;
    font-weight: 500;
}

.link-list a:hover {
    text-decoration-line: underline;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    text-underline-offset: .18em;
}

.link-icon, .link-list svg {
    width: 15px;
    height: 15px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    opacity: .85;
}

.link-list a:hover .link-icon {
    opacity: 1;
}


/* Merged at the first declaration, carrying last-wins values from 2 blocks. 0 value overrides, 1 identical repeat. */
.card-label .prompt {
    color: var(--on-surface-dim);
    font-weight: 400;
    user-select: none;
    opacity: .75;
}

/* A hairline under the command, like a terminal rule */


.card-label::after {
    content: '';
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    height: 1px;
    background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 28%, transparent), transparent);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    transform: translateY(-.28em);
}

/* ── Sidebar prompt: the $ carries the accent ───────────────────────────── */
.card-label, .card-label .prompt {
    color: var(--primary);
}


/* ===***===***=== Part 13 - Code Blocks ===***===***=== */

[data-theme="dark"] .codesh-block {
    /* Code may exceed the prose measure; it must never break the page. */
    max-width: min(100%, calc(var(--measure) + 16rem));
    position: relative;

    overflow-x: hidden;
    overflow-y: hidden;

    background-color: #1D1D20;

    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline);
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline);

    border-inline-start-width: 1px;
    border-inline-start-style: solid;
    border-inline-start-color: var(--outline);
    border-inline-end-width: 1px;
    border-inline-end-style: solid;
    border-inline-end-color: var(--outline);

    border-image-outset: initial;
    border-image-repeat: initial;
    border-image-slice: initial;
    border-image-source: initial;
    border-image-width: initial;

    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    border-end-start-radius: var(--r-md);
    border-end-end-radius: var(--r-md);

    box-shadow: var(--elev-3);

    margin-block-start: 1.75rem;
    margin-block-end: 1.75rem;

    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* codesh.css sets its own monospace stack on this element at (0,1,1), which beats the reset's :where(code, kbd, samp,
   pre, tt) at (0,0,0). theme.css is the last stylesheet on the page, so an equal-specificity rule here wins on source
   order and the code blocks get Fira Code and its ligatures. .codesh-block is set to font-family: inherit by the plugin,
   so it follows this element without a rule of its own. */
[data-theme="dark"] .codesh-block pre {
    font-family: var(--font-mono);
    font-size: .875rem;
    line-height: 1.7;
    tab-size: 4;
    overflow-x: auto;

    background-color: #0A0C10;

    padding-block-start: 1rem;
    padding-block-end: 1rem;

    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

[data-theme="dark"] .codesh-block code {
    text-wrap-mode: nowrap;
    white-space-collapse: preserve;
}

.prose :not(pre) > code {
    font-family: var(--font-mono);
    font-size: .86em;
    padding-block-start: 0.12em;
    padding-inline-end: 0.4em;
    padding-block-end: 0.12em;
    padding-inline-start: 0.4em;
    border-start-start-radius: var(--r-xs);
    border-start-end-radius: var(--r-xs);
    border-end-end-radius: var(--r-xs);
    border-end-start-radius: var(--r-xs);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: color-mix(in srgb, var(--primary) 9%, var(--container-hi));
    color: color-mix(in srgb, var(--on-primary-container) 55%, var(--on-surface));
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: color-mix(in srgb, var(--primary) 22%, transparent);
    border-inline-end-color: color-mix(in srgb, var(--primary) 22%, transparent);
    border-block-end-color: color-mix(in srgb, var(--primary) 22%, transparent);
    border-inline-start-color: color-mix(in srgb, var(--primary) 22%, transparent);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

/* codesh header: codesh emits EITHER .codesh-lang (a language badge) OR .codesh-title (a filename) — never both. Style
   them as the same component so a block with a filename doesn't look unfinished next to one with a badge. */
[data-theme="dark"] .codesh-block .codesh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 10px;
    column-gap: 10px;

    background-attachment: initial;
    background-clip: initial;
    background-color: initial;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary) 11%, var(--container-hi)), var(--container-hi) 62%);
    background-origin: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-repeat: initial;
    background-size: initial;

    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline);

    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    border-end-start-radius: 0;
    border-end-end-radius: 0;

    padding-block-start: 9px;
    padding-block-end: 9px;

    padding-inline-start: 12px;
    padding-inline-end: 12px;
}

/* Merged at the first declaration, carrying last-wins values from 2 blocks. 0 value overrides, 26 identical repeats. */
/* Badge and filename are the SAME component: identical background, border and text colour. Only the typographic
   treatment differs — tracked uppercase for a language, literal case for a filename. Selector prefixed with
   [data-theme="dark"] because codesh styles .codesh-lang from a .dark rule, which outranks an unprefixed theme rule. */
[data-theme="dark"] .codesh-block .codesh-header .codesh-lang,
[data-theme="dark"] .codesh-block .codesh-header .codesh-title {
    display: inline-flex;
    align-items: center;

    color: var(--on-surface);
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1;
    text-wrap-mode: nowrap;
    white-space-collapse: collapse;

    background-attachment: initial;
    background-clip: initial;
    background-color: var(--surface);
    background-image: initial;
    background-origin: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-repeat: initial;
    background-size: initial;

    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline);
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline);

    border-inline-start-width: 1px;
    border-inline-start-style: solid;
    border-inline-start-color: var(--outline);
    border-inline-end-width: 1px;
    border-inline-end-style: solid;
    border-inline-end-color: var(--outline);

    border-image-outset: initial;
    border-image-repeat: initial;
    border-image-slice: initial;
    border-image-source: initial;
    border-image-width: initial;

    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);
    border-end-start-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);

    padding-block-start: 4px;
    padding-block-end: 4px;

    padding-inline-start: 10px;
    padding-inline-end: 10px;
}

[data-theme="dark"] .codesh-block .codesh-header .codesh-lang {
    letter-spacing: .1em;
    text-transform: uppercase;
}

[data-theme="dark"] .codesh-block .codesh-header .codesh-title {
    letter-spacing: .01em;
    text-transform: none;
}

/* An empty spacer span shouldn't render as an empty pill */
[data-theme="dark"] .codesh-block .codesh-header .codesh-lang:empty,
[data-theme="dark"] .codesh-block .codesh-header .codesh-title:empty {
    display: none;
}

/* Copy button: same hover language as the tags */
[data-theme="dark"] .codesh-block .codesh-copy {
    display: inline-flex;
    align-items: center;
    row-gap: 6px;
    column-gap: 6px;

    color: var(--on-surface-var);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;

    background-attachment: initial;
    background-clip: initial;
    background-color: var(--surface);
    background-image: initial;
    background-origin: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-repeat: initial;
    background-size: initial;

    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline);
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--outline);

    border-inline-start-width: 1px;
    border-inline-start-style: solid;
    border-inline-start-color: var(--outline);
    border-inline-end-width: 1px;
    border-inline-end-style: solid;
    border-inline-end-color: var(--outline);

    border-image-outset: initial;
    border-image-repeat: initial;
    border-image-slice: initial;
    border-image-source: initial;
    border-image-width: initial;

    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);
    border-end-start-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);

    margin-inline-start: auto;

    padding-block-start: 4px;
    padding-block-end: 4px;

    padding-inline-start: 11px;
    padding-inline-end: 11px;

    cursor: pointer;
    transition-behavior: normal, normal, normal;
    transition-delay: 0s, 0s, 0s;
    transition-duration: 0.15s, 0.15s, 0.15s;
    transition-property: border-color, color, background-color;
    transition-timing-function: ease, ease, ease;
}

[data-theme="dark"] .codesh-block .codesh-copy:hover {
    color: var(--primary);

    background-color: var(--surface);

    border-block-start-color: var(--primary);
    border-block-end-color: var(--primary);

    border-inline-start-color: var(--primary);
    border-inline-end-color: var(--primary);
}

[data-theme="dark"] .codesh-block .codesh-copy svg {
    height: 13px;
    width: 13px;
}

/* Keep the plugin's own success state visible over the above */
[data-theme="dark"] .codesh-block .codesh-copy.copied {
    color: var(--on-primary-container);

    background-attachment: initial;
    background-clip: initial;
    background-color: var(--primary-container);
    background-image: initial;
    background-origin: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-repeat: initial;
    background-size: initial;

    border-block-start-color: var(--primary);
    border-block-end-color: var(--primary);

    border-inline-start-color: var(--primary);
    border-inline-end-color: var(--primary);
}


/* 14  Homepage ============================================================ */
/* Home uses the same page-head box as every other page — no override — so the
   step between Home, Blog and About is only the content itself. */
.home-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 2.9vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.04;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0.85rem;
    margin-inline-start: 0;
    color: var(--primary);
}

/* Tagline and hero line read as one two-line statement. */
.home-line {
    font-family: var(--font-body);
    font-size: clamp(.98rem, .92rem + .3vw, 1.12rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    max-width: 60ch;
    text-wrap-mode: initial;
    text-wrap-style: balance;
}

.home-line-1 {
    color: var(--on-surface);
}

.home-line-2 {
    color: var(--on-surface-var);
}

.home-specimen {
    margin-block-end: clamp(30px, 4vw, 48px);
}

[data-theme="dark"] .home-specimen .codesh-block {
    max-width: none;

    margin-block-start: 0;
    margin-block-end: 0;
}

.home-intro {
    margin-block-end: clamp(26px, 3.5vw, 40px);
}


/* 15  Pagination ========================================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 12px;
    column-gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline-variant);
}

.pagination a, .pagination span:not(.page-count) {
    padding-block-start: 9px;
    padding-inline-end: 16px;
    padding-block-end: 9px;
    padding-inline-start: 16px;
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-style: solid;
    border-inline-end-style: solid;
    border-block-end-style: solid;
    border-inline-start-style: solid;
    border-block-start-color: var(--outline);
    border-inline-end-color: var(--outline);
    border-block-end-color: var(--outline);
    border-inline-start-color: var(--outline);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-start-start-radius: var(--r-full);
    border-start-end-radius: var(--r-full);
    border-end-end-radius: var(--r-full);
    border-end-start-radius: var(--r-full);
    font-size: .875rem;
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    color: var(--on-surface-var);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--container-hi);
}

.pagination a:hover {
    color: var(--on-primary-container);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: var(--primary-container);
    border-block-start-color: var(--primary-container);
    border-inline-end-color: var(--primary-container);
    border-block-end-color: var(--primary-container);
    border-inline-start-color: var(--primary-container);
}

.pagination .is-disabled {
    opacity: .35;
}

.page-count {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-surface-dim);
}


/* ===***===***=== §16: Footer ===***===***=== */

.site-footer {

    /* Spacing Properties */

    margin-block-start: auto;

    /* Background Properties */

    background-image: initial;

    background-size: initial;

    background-position-x: initial;
    background-position-y: initial;

    background-origin: initial;
    background-repeat: initial;

    background-attachment: initial;
    background-clip: initial;

    background-color: var(--container-low);

    /* Border and Box Decoration Properties */

    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--outline-variant);
}

.footer-inner {

    /* Display Properties */

    display: flex;

    /* Sizing Properties */

    max-width: var(--shell-max);

    /* Spacing Properties */

    margin-inline-start: auto;
    margin-inline-end: auto;

    padding-block-start: 28px;
    padding-block-end: 28px;

    padding-inline-start: var(--gutter);
    padding-inline-end: var(--gutter);

    column-gap: 12px;
    row-gap: 12px;

    /* Layout Properties */

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;
}

.footer-meta {

    /* Spacing Properties */

    margin-block-start: 0;
    margin-block-end: 0;

    margin-inline-start: 0;
    margin-inline-end: 0;

    /* Color Properties */

    color: var(--on-surface-dim);

    /* Font Properties */

    font-size: .82rem;

    /* Text Properties */

    text-align: end;
}

.footer-meta a {

    /* Color Properties */

    color: var(--on-surface-var);
}


/* 17  Dead rules ========================================================== */
.listing-header {
    margin-block-end: clamp(24px, 3vw, 40px);
}

.listing-intro p {
    color: var(--on-surface-var);
}

.post-header {
    margin-block-end: 2rem;
}


/* ===***===***=== §18: Responsive Layout ===***===***=== */

/*
 * §18.1: Keyframes. Declared before the breakpoints so a query can reference an animation that is already defined
 * above it.
 */

/* head: constant-speed travel, teal throughout */
@keyframes bsb-chev-head {
    0%, 12% {

        /* Color Properties */

        opacity: 0;

        /* Transform Properties */

        transform: translateX(var(--slide));
    }
    14% {

        /* Color Properties */

        opacity: 1;

        /* Transform Properties */

        transform: translateX(var(--slide));
    }
    88%, 100% {

        /* Color Properties */

        opacity: 1;

        /* Transform Properties */

        transform: translateX(0);
    }
}

/* trail at first position */
@keyframes bsb-chev-t1 {
    0%, 12% {

        /* Color Properties */

        color: var(--on-surface-dim);
    }
    14% {

        /* Color Properties */

        color: var(--primary);
    }
    50% {

        /* Color Properties */

        color: color-mix(in srgb, var(--primary) 50%, var(--on-surface-dim));
    }
    88%, 100% {

        /* Color Properties */

        color: var(--on-surface-dim);
    }
}

/* trail at second position */
@keyframes bsb-chev-t2 {
    0%, 48% {

        /* Color Properties */

        opacity: 0;
        color: var(--primary);
    }
    52% {

        /* Color Properties */

        opacity: 1;
        color: var(--primary);
    }
    88%, 100% {

        /* Color Properties */

        opacity: 1;
        color: color-mix(in srgb, var(--primary) 50%, var(--on-surface-dim));
    }
}

/*
 * §18.2: Breakpoints. Three, and every number sits in a gap in the device distribution wide enough that a scrollbar
 * and a left-hand dock, 87px between them, cannot carry a reader across it.
 *
 *    1060px - the sidebar leaves the article's side. Centered in the 953 - 1177 gap, where the two column track still
 *             reads at 60 characters.
 *     500px - the header row gives way to the drawer, code blocks run to the page gutter, and the footer centers. The
 *             wordmark-to-nav gap reaches its 20px flex floor here and has no slack left.
 *     814px - height, not width. The two sticky bars run 230px to 362px together, so this is the shortest window that
 *             still leaves 400px to read in. Centered in the 742 - 886 height gap.
 *
 * Anything that asks about one component's own width is a @container query in that component's section, by criterion 12.
 */

@media (max-width: 1060px) {
    .shell {

        /* Layout Properties */

        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {

        /* Position Properties */

        position: static;
    }
}

@media (max-width: 1060px), (max-height: 814px) {
    .page-head {

        /* Position Properties */

        position: static;

        /* Color Properties */

        backdrop-filter: none;
    }
}

@media (max-width: 500px) {
    .nav-toggle {

        /* Display Properties */

        display: block;
    }

    .nav {

        /* Sizing Properties */

        max-height: 0;

        /* Layout Properties */

        flex-basis: 100%;

        overflow-x: hidden;
        overflow-y: hidden;

        /* Transition Properties */

        transition-delay: 0s;
        transition-duration: 0.25s;
        transition-property: max-height;
        transition-timing-function: ease;
        transition-behavior: normal;
    }

    /*
     * Eight pills: 126px for three, 36px for each one after. A ninth needs 342px and is clipped, `.nav` being
     * `overflow-y: hidden`.
     */
    .nav.is-open {

        /* Sizing Properties */

        max-height: 306px;
    }

    .nav-pills {


        /* Spacing Properties */

        margin-block-start: 10px;

        /* Layout Properties */

        align-items: stretch;

        flex-direction: column;

        /* Border and Box Decoration Properties */

        border-start-start-radius: var(--r-lg);
        border-start-end-radius: var(--r-lg);

        border-end-start-radius: var(--r-lg);
        border-end-end-radius: var(--r-lg);
    }

    .nav-pills a {

        /* Layout Properties */

        /*
         * This property is commented out intentionally, pending remediation of nav menu issues.
         */
        /* justify-content: center; */
    }

    .footer-inner {

        /* Layout Properties */

        justify-content: center;
    }

    .footer-meta {

        /* Text Properties */

        text-align: center;
    }

    [data-theme="dark"] .codesh-block {

        /* Sizing Properties */

        max-width: none;

        /* Spacing Properties */

        margin-inline-start: calc(var(--gutter) * -1);
        margin-inline-end: calc(var(--gutter) * -1);

        /* Border and Box Decoration Properties */

        border-inline-start-width: 0;
        border-inline-start-style: initial;
        border-inline-start-color: initial;

        border-inline-end-width: 0;
        border-inline-end-style: initial;
        border-inline-end-color: initial;

        border-start-start-radius: 0;
        border-start-end-radius: 0;

        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-nav a:hover .post-nav-arrow .c1,
    .post-nav a:hover .post-nav-arrow .c2,
    .post-nav a:hover .post-nav-arrow .c3 {

        /* Color Properties */

        opacity: 1;

        /* Transform Properties */

        transform: none;

        /* Animation Properties */

        animation-name: none;
        animation-duration: auto;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-fill-mode: none;
        animation-play-state: running;
        animation-timeline: auto;

        animation-range-start: normal;
        animation-range-end: normal;


    }

    *, *::before, *::after {

        /* Transition Properties */

        transition-duration: .01ms !important;

        /* Animation Properties */

        animation-duration: .01ms !important;
    }
}