@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("/assets/fonts/AlteHaasGroteskRegular.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("/assets/fonts/AlteHaasGroteskBold.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}

/* Monochrome emoji text glyphs — only the subsets covering codepoints on the
   page are ever fetched. Emoji without a text glyph still fall back to the
   platform color font. */
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-0-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1f1e6-1f1ff;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-1-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d,U+2620,U+26a7,U+fe0f,U+1f308,U+1f38c,U+1f3c1,U+1f3f3-1f3f4,U+1f6a9,U+e0062-e0063,U+e0065,U+e0067,U+e006c,U+e006e,U+e0073-e0074,U+e0077,U+e007f;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-2-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+23,U+2a,U+30-39,U+a9,U+ae,U+200d,U+203c,U+2049,U+20e3,U+2122,U+2139,U+2194-2199,U+21a9-21aa,U+23cf,U+23e9-23ef,U+23f8-23fa,U+24c2,U+25aa-25ab,U+25b6,U+25c0,U+25fb-25fe,U+2611,U+2622-2623,U+2626,U+262a,U+262e-262f,U+2638,U+2640,U+2642,U+2648-2653,U+2660,U+2663,U+2665-2666,U+2668,U+267b,U+267e-267f,U+2695,U+269b-269c,U+26a0,U+26a7,U+26aa-26ab,U+26ce,U+26d4,U+2705,U+2714,U+2716,U+271d,U+2721,U+2733-2734,U+2747,U+274c,U+274e,U+2753-2755,U+2757,U+2764,U+2795-2797,U+27a1,U+27b0,U+27bf,U+2934-2935,U+2b05-2b07,U+2b1b-2b1c,U+2b55,U+3030,U+303d,U+3297,U+3299,U+fe0f,U+1f170-1f171,U+1f17e-1f17f,U+1f18e,U+1f191-1f19a,U+1f201-1f202,U+1f21a,U+1f22f,U+1f232-1f23a,U+1f250-1f251,U+1f310,U+1f3a6,U+1f3b5-1f3b6,U+1f3bc,U+1f3e7,U+1f441,U+1f499-1f49c,U+1f49f-1f4a0,U+1f4ac-1f4ad,U+1f4b1-1f4b2,U+1f4b9,U+1f4db,U+1f4f2-1f4f6,U+1f500-1f507,U+1f515,U+1f518-1f524,U+1f52f-1f53d,U+1f549,U+1f54e,U+1f5a4,U+1f5e8,U+1f5ef,U+1f6ab,U+1f6ad-1f6b1,U+1f6b3,U+1f6b7-1f6bc,U+1f6be,U+1f6c2-1f6c5,U+1f6d0-1f6d1,U+1f6d7,U+1f6dc,U+1f7e0-1f7eb,U+1f7f0,U+1f90d-1f90e,U+1f9d1-1f9d2,U+1f9e1,U+1fa75-1fa77,U+1faaf;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-3-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d,U+231a-231b,U+2328,U+23f0-23f3,U+2602,U+260e,U+2692,U+2694,U+2696-2697,U+2699,U+26b0-26b1,U+26cf,U+26d1,U+26d3,U+2702,U+2709,U+270f,U+2712,U+fe0f,U+1f302,U+1f321,U+1f392-1f393,U+1f3a9,U+1f3bd,U+1f3ee,U+1f3f7,U+1f3fa,U+1f451-1f462,U+1f484,U+1f489,U+1f48a,U+1f48c-1f48e,U+1f4a1,U+1f4a3,U+1f4a5,U+1f4b0,U+1f4b3-1f4b8,U+1f4bb-1f4da,U+1f4dc-1f4f1,U+1f4ff,U+1f508-1f514,U+1f516-1f517,U+1f526-1f529,U+1f52c-1f52e,U+1f550-1f567,U+1f56f-1f570,U+1f576,U+1f587,U+1f58a-1f58d,U+1f5a5,U+1f5a8,U+1f5b1-1f5b2,U+1f5c2-1f5c4,U+1f5d1-1f5d3,U+1f5dc-1f5de,U+1f5e1,U+1f5f3,U+1f6aa,U+1f6ac,U+1f6bd,U+1f6bf,U+1f6c1,U+1f6cb,U+1f6cd-1f6cf,U+1f6d2,U+1f6e0-1f6e1,U+1f6f0,U+1f97b-1f97f,U+1f9af,U+1f9ba,U+1f9e2-1f9e6,U+1f9ea-1f9ec,U+1f9ee-1f9f4,U+1f9f7-1f9ff,U+1fa71-1fa74,U+1fa79-1fa7b,U+1fa86,U+1fa8e-1fa8f,U+1fa91-1fa93,U+1fa96,U+1fa99-1faa0,U+1faa2-1faa7,U+1faaa-1faae;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-4-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+265f,U+26bd-26be,U+26f3,U+26f8,U+fe0f,U+1f004,U+1f0cf,U+1f380-1f384,U+1f386-1f38b,U+1f38d-1f391,U+1f396-1f397,U+1f399-1f39b,U+1f39e-1f39f,U+1f3a3-1f3a5,U+1f3a7-1f3a9,U+1f3ab-1f3b4,U+1f3b7-1f3bb,U+1f3bd,U+1f3c0,U+1f3c5-1f3c6,U+1f3c8-1f3c9,U+1f3cf-1f3d3,U+1f3f8-1f3f9,U+1f47e,U+1f4e2,U+1f4f7-1f4fd,U+1f52b,U+1f579,U+1f58c-1f58d,U+1f5bc,U+1f6f7,U+1f6f9,U+1f6fc,U+1f93f,U+1f941,U+1f945,U+1f947-1f94f,U+1f9e7-1f9e9,U+1f9f5-1f9f6,U+1fa70-1fa71,U+1fa80-1fa81,U+1fa83-1fa85,U+1fa87-1fa8a,U+1fa94-1fa95,U+1fa97-1fa98,U+1faa1,U+1faa9,U+1fadf;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-5-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+2693,U+26e9-26ea,U+26f1-26f2,U+26f4-26f5,U+26fa,U+26fd,U+2708,U+fe0f,U+1f301,U+1f303,U+1f306-1f307,U+1f309,U+1f310,U+1f3a0-1f3a2,U+1f3aa,U+1f3cd-1f3ce,U+1f3d5,U+1f3d7-1f3db,U+1f3df-1f3e6,U+1f3e8-1f3ed,U+1f3ef-1f3f0,U+1f488,U+1f492,U+1f4ba,U+1f54b-1f54d,U+1f5fa-1f5ff,U+1f680-1f6a2,U+1f6a4-1f6a8,U+1f6b2,U+1f6d1,U+1f6d5-1f6d6,U+1f6dd-1f6df,U+1f6e2-1f6e5,U+1f6e9,U+1f6eb-1f6ec,U+1f6f3-1f6f6,U+1f6f8,U+1f6fa-1f6fb,U+1f9bc-1f9bd,U+1f9ed,U+1f9f3,U+1fa7c;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-6-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d,U+2615,U+fe0f,U+1f32d-1f330,U+1f336,U+1f33d,U+1f344-1f37f,U+1f382,U+1f52a,U+1f7e9,U+1f7eb,U+1f942-1f944,U+1f950-1f96f,U+1f99e,U+1f9aa,U+1f9c0-1f9cb,U+1fad0-1fadc;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-7-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d,U+2600-2601,U+2603-2604,U+2614,U+2618,U+26a1,U+26c4-26c5,U+26c8,U+26f0,U+2728,U+2744,U+2b1b,U+2b50,U+fe0f,U+1f300,U+1f304-1f305,U+1f308,U+1f30a-1f30f,U+1f311-1f321,U+1f324-1f32c,U+1f331-1f335,U+1f337-1f33c,U+1f33e-1f344,U+1f3d4,U+1f3d6,U+1f3dc-1f3de,U+1f3f5,U+1f400-1f43f,U+1f490,U+1f4a7,U+1f4ae,U+1f525,U+1f54a,U+1f573,U+1f577-1f578,U+1f648-1f64a,U+1f6d8,U+1f940,U+1f980-1f9ae,U+1f9ba,U+1fa90,U+1faa8,U+1fab0-1fabf,U+1facd-1facf,U+1fae7;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-8-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d,U+2640,U+2642,U+2695-2696,U+26f7,U+26f9,U+2708,U+2764,U+27a1,U+fe0f,U+1f33e,U+1f373,U+1f37c,U+1f384-1f385,U+1f393,U+1f3a4,U+1f3a8,U+1f3c2-1f3c4,U+1f3c7,U+1f3ca-1f3cc,U+1f3eb,U+1f3ed,U+1f3fb-1f3ff,U+1f430,U+1f466-1f469,U+1f46b-1f478,U+1f47c,U+1f481-1f483,U+1f486-1f487,U+1f48b,U+1f48f,U+1f491,U+1f4bb-1f4bc,U+1f527,U+1f52c,U+1f574-1f575,U+1f645-1f647,U+1f64b,U+1f64d-1f64e,U+1f680,U+1f692,U+1f6a3,U+1f6b4-1f6b6,U+1f6c0,U+1f6cc,U+1f91d,U+1f926,U+1f930-1f931,U+1f934-1f93a,U+1f93c-1f93e,U+1f977,U+1f9af-1f9b3,U+1f9b8-1f9b9,U+1f9bc-1f9bd,U+1f9cc-1f9cf,U+1f9d1-1f9df,U+1fa70,U+1fa82,U+1fac3-1fac5,U+1fac8,U+1faef-1faf8;
}
@font-face {
  font-family: "Noto Emoji";
  src: url("/assets/fonts/noto-emoji-9-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d,U+2194-2195,U+2603,U+261d,U+2620,U+2639-263a,U+2665,U+26a1,U+26c4,U+270a-270d,U+2728,U+2763-2764,U+2b50,U+fe0f,U+1f31a-1f31f,U+1f32b,U+1f389-1f38a,U+1f3fb-1f3ff,U+1f440-1f450,U+1f463-1f465,U+1f479-1f47b,U+1f47d-1f480,U+1f485,U+1f48b-1f48c,U+1f493-1f49f,U+1f4a2,U+1f4a4-1f4a6,U+1f4a8-1f4ab,U+1f4af,U+1f525,U+1f573,U+1f590,U+1f595-1f596,U+1f5a4,U+1f5e3,U+1f600-1f644,U+1f648-1f64a,U+1f64c,U+1f64f,U+1f90c-1f925,U+1f927-1f92f,U+1f932-1f933,U+1f970-1f976,U+1f978-1f97a,U+1f9a0,U+1f9b4-1f9b7,U+1f9bb,U+1f9be-1f9bf,U+1f9d0,U+1f9e0-1f9e1,U+1fa75-1fa79,U+1fac0-1fac2,U+1fac6,U+1fae0-1faea,U+1faef-1faf8;
}

:root {
  --hue: 30;

  --hue-yellow: max(0, cos(calc((var(--hue) - 95) * 1deg)));
  --hue-cyan: max(0, cos(calc((var(--hue) - 200) * 1deg)));
  --hue-wash: max(var(--hue-yellow), var(--hue-cyan));
  --hue-wash-2: calc(var(--hue-wash) * var(--hue-wash));
  --hue-wash-4: calc(var(--hue-wash-2) * var(--hue-wash-2));
  --ink-l: calc(0.54 - 0.15 * var(--hue-wash-4));
  --ink-c: calc(0.2577 - 0.09 * var(--hue-wash-4));
  --paper: oklch(0.984 calc(0.012 + 0.016 * var(--hue-wash-2)) var(--hue));
  --wm-wash: color-mix(in oklch, var(--ink) 10%, var(--paper));
  --surface: #fff;

  --ink: oklch(var(--ink-l) var(--ink-c) var(--hue));
  --ink-contrast: #fff;
  --accent: var(--ink);
  --muted: var(--ink);
  --focus: #000;

  --font-body: "Alte Haas Grotesk", Helvetica, Arial, sans-serif,
    "Noto Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-mono: monospace;
  --size-base: 12px;
  --size-title: 20px;
  --weight-body: normal;
  --weight-strong: bold;

  --measure: 560px;
  --gutter: 24px;
  --rail-gap: 12px;
  --rail: 240px;
  --toc-rail: 240px;
  --space-xs: 8px;
  --space-s: 16px;
  --space: 24px;
  --space-l: 32px;

  --dot-size: 2px;
  --dot-gap: 8px;
  --dot-ox: 3px;
  --dot-oy: 2px;
  --rose-size: 240px;
  --rose-gap: 48px;
  --rose-rot: 45deg;
  --rose-opacity: 0.85;
  --rose-contrast: 1;
  --rose-saturate: 1;
  --rose-brightness: 1;
  --rose-invert: 0;
  --rose-blend: normal;
  --rose-period: calc(var(--rose-size) + var(--rose-gap));

  --dither-cell: 2px;
  --dither-dark: oklch(
    0.16 calc(0.05 + 0.02 * (1 - var(--hue-wash-2))) var(--hue)
  );
  --dither-mid: oklch(0.88 calc(0.07 + 0.03 * var(--hue-wash-2)) var(--hue));
  --dither-light: oklch(0.995 0.004 var(--hue));
  --dither-hover: 0.7;
  --dither-filter: url(#dither-3);
  --dither-hover-filter: url(#dither-hover);

  --swatch-30: oklch(0.63 0.26 30);
  --swatch-95: oklch(0.72 0.16 95);
  --swatch-145: oklch(0.58 0.2 145);
  --swatch-255: oklch(0.5 0.22 255);
  --swatch-330: oklch(0.58 0.24 330);
  --wm-fill: #000;
}

html {
  color-scheme: light;
}
html:has(#theme-hue-30:checked),
html[data-hue="30"] {
  --hue: 30;
}
html:has(#theme-hue-95:checked),
html[data-hue="95"] {
  --hue: 95;
}
html:has(#theme-hue-145:checked),
html[data-hue="145"] {
  --hue: 145;
}
html:has(#theme-hue-255:checked),
html[data-hue="255"] {
  --hue: 255;
}
html:has(#theme-hue-330:checked),
html[data-hue="330"] {
  --hue: 330;
}
html:has(#theme-dots-none:checked),
html[data-dots="none"] {
  --dot-size: 0px;
  --dot-gap: 8px;
  --dot-ox: 0px;
  --dot-oy: 0px;
}
html:has(#theme-dots-small:checked),
html[data-dots="small"] {
  --dot-size: 1px;
  --dot-gap: 4px;
  --dot-ox: 0px;
  --dot-oy: 0px;
}
html:has(#theme-dots-large:checked),
html[data-dots="large"] {
  --dot-size: 2px;
  --dot-gap: 8px;
  --dot-ox: 3px;
  --dot-oy: 2px;
}
html:has(#theme-dots-none:checked) .wm::before,
html[data-dots="none"] .wm::before {
  content: none;
  display: none;
}

html:has(#theme-dark:checked),
html[data-scheme="dark"] {
  color-scheme: dark;
  --ink-l: calc(0.68 + 0.06 * var(--hue-wash-4));
  --ink-c: calc(0.11 - 0.03 * var(--hue-wash-4));
  --paper: oklch(0.15 calc(0.01 + 0.006 * var(--hue-wash-2)) var(--hue));
  --wm-wash: color-mix(in oklch, var(--paper) 88%, var(--ink));
  --surface: oklch(0.19 calc(0.007 + 0.005 * var(--hue-wash-2)) var(--hue));
  --ink-contrast: oklch(0.13 0.008 var(--hue));
  --focus: #fff;
}
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) {
    color-scheme: dark;
    --ink-l: calc(0.68 + 0.06 * var(--hue-wash-4));
    --ink-c: calc(0.11 - 0.03 * var(--hue-wash-4));
    --paper: oklch(0.15 calc(0.01 + 0.006 * var(--hue-wash-2)) var(--hue));
    --wm-wash: color-mix(in oklch, var(--paper) 88%, var(--ink));
    --surface: oklch(0.19 calc(0.007 + 0.005 * var(--hue-wash-2)) var(--hue));
    --ink-contrast: oklch(0.13 0.008 var(--hue));
    --focus: #fff;
  }
}

body {
  position: relative;
}
.layout,
footer {
  position: relative;
  z-index: 1;
}
.wm {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  color: var(--ink);
  background: color-mix(in oklch, var(--ink) 10%, var(--paper));
}
.wm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: radial-gradient(
    circle at calc(var(--dot-size) / 2) calc(var(--dot-size) / 2),
    var(--paper) calc(var(--dot-size) / 2),
    transparent calc(var(--dot-size) / 2 + 0.4px)
  );
  background-size: var(--dot-gap) var(--dot-gap);
  background-repeat: repeat;
  background-position: calc(50% - var(--measure) / 2 + var(--dot-ox))
    var(--dot-oy);
  background-attachment: fixed;
}
.wm-field {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 300%;
  height: 300%;
  overflow: visible;
  transform: translate(-50%, -50%) rotate(var(--rose-rot));
  transform-origin: center;
  color: transparent;
  opacity: var(--rose-opacity);
  mix-blend-mode: var(--rose-blend);
  filter: invert(var(--rose-invert)) contrast(var(--rose-contrast))
    saturate(var(--rose-saturate)) brightness(var(--rose-brightness));
}
.wm-tile {
  fill: var(--wm-fill);
}
#wm-pat {
  width: var(--rose-period);
  height: var(--rose-period);
}
#wm-pat image {
  width: var(--rose-size);
  height: var(--rose-size);
}
html:has(#theme-dark:checked) .wm,
html[data-scheme="dark"] .wm {
  background: color-mix(in oklch, var(--paper) 88%, var(--ink));
}
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) .wm {
    background: color-mix(in oklch, var(--paper) 88%, var(--ink));
  }
}

@media (prefers-contrast: more) {
  :root {
    --paper: #fff;
    --surface: #fff;
    --ink: oklch(0.4 calc(0.18 - 0.05 * var(--hue-wash-4)) var(--hue));
    --accent: var(--ink);
    --muted: var(--ink);
  }
  .wm-field {
    opacity: 1;
  }
  html:has(#theme-dark:checked),
  html[data-scheme="dark"] {
    --paper: #000;
    --surface: #111;
    --ink: oklch(0.82 calc(0.16 - 0.04 * var(--hue-wash-4)) var(--hue));
    --ink-contrast: #000;
    --accent: var(--ink);
    --muted: var(--ink);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) {
    --paper: #000;
    --surface: #111;
    --ink: oklch(0.82 calc(0.16 - 0.04 * var(--hue-wash-4)) var(--hue));
    --ink-contrast: #000;
    --accent: var(--ink);
    --muted: var(--ink);
  }
}

/* blog/base — tokens, reset, page shell, shared primitives (.sec, .nav-rule, .disclosure) */

:root {
  /* Layout tokens owned by blog-core; the skin (colors, fonts, spacing
     scale, dither) is defined once in theme.css. */
  --grid: 4px;
  --leading: 1.3334;
  --leading-prose: 1.6667;
  --leading-tight: 1.2;

  --card: 280px;
  --size-root: 16px;
  --track-caps: 0.03em;
  --border-w: 1px;
  --border: var(--border-w) solid var(--ink);
  --radius: 0;
  --sidenote-gap: calc(var(--gutter) + var(--border-w) + var(--rail-gap));
  --mast-line: 16px;
  --mast-title: 24px;
  --toc-spy: 24vh;

  --mast-box: calc(
    3 * var(--border-w) + 4 * var(--space-xs) + var(--mast-line) +
      var(--mast-title)
  );
}
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 30;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading);
  color: var(--ink);
  font-weight: var(--weight-body);
  font-variant-emoji: text;
}
html {
  font-size: var(--size-root);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
::selection {
  background: var(--ink);
  color: var(--ink-contrast);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
::-webkit-scrollbar {
  width: var(--grid);
  height: var(--grid);
}
::-webkit-scrollbar-thumb {
  background: var(--ink);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
body {
  background: var(--paper);
  min-height: 100%;
}
html {
  overflow-x: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
a {
  color: var(--accent);
  text-decoration: underline;
}
a:hover {
  background: var(--ink);
  color: var(--ink-contrast);
  text-decoration: none;
}
a:hover,
a:hover *,
a:hover::before,
a:hover::after {
  color: var(--ink-contrast);
  text-decoration: none;
}
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--grid);
}
strong {
  font-weight: var(--weight-strong);
}
em {
  font-style: italic;
}
.layout {
  margin: 0;
}
.article-wrap {
  display: flex;
  flex-direction: column;
}
.article-body {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  row-gap: var(--rail-gap);
  width: var(--measure);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  overflow: visible;
  position: relative;
}
.article-body > .sec {
  margin: 0;
}
.sec {
  position: relative;
  overflow: visible;
  margin: 0;
  min-height: 0;
  padding: var(--space) var(--gutter);
  background: var(--surface);
  border: var(--border);
}
.sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  z-index: -1;
  pointer-events: none;
}
.rail-col {
  order: 2;
}
.disclosure {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.disclosure-label {
  display: block;
  cursor: pointer;
  font-weight: var(--weight-strong);
  padding: var(--space-xs) 0;
}
.disclosure-label:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.disclosure-label::before {
  content: "\25B8 ";
}
.disclosure:checked ~ .disclosure-label::before {
  content: "\25BE ";
}
.nav-rule {
  border: 0;
  border-top: var(--border);
  height: 0;
  margin: var(--space-xs) 0;
}
.layout {
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  width: min(
    var(--measure),
    round(
      down,
      calc(
        100% - 2 * var(--rail-gap) - env(safe-area-inset-left, 0px) -
          env(safe-area-inset-right, 0px)
      ),
      8px
    )
  );
  max-width: 100%;
  margin: max(var(--rail-gap), env(safe-area-inset-top, 0px)) auto 0;
  padding: 0;
}
.side-col,
.left-rail,
.right-rail {
  display: contents;
}
.left-stack {
  display: contents;
}
.left-rail .left-stack:not(:has(> *)) {
  display: none;
}
.article-wrap {
  order: 5;
}
.article-body > .sec {
  z-index: 1;
}
@media (forced-colors: active) {
  * {
    border-color: CanvasText;
  }
}

/* blog/chrome — site-head, footer, cite box, skip link */

.site-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space) 0 var(--space-s);
}
.site-head .site-title {
  display: block;
  text-decoration: none;
  font-weight: var(--weight-strong);
  text-align: center;
  margin: 0 0 var(--space-xs);
}
.site-head .site-title:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.head-dials {
  display: none;
}
.head-dials label {
  cursor: pointer;
}
.post-nav .site-head {
  max-width: var(--rail);
  width: 100%;
  margin: 0;
  padding: var(--space-xs);
  text-align: inherit;
  border: var(--border);
  background: var(--surface);
  display: grid;
  grid-template-rows: var(--mast-line) var(--border-w) var(--mast-title);
  row-gap: var(--space-xs);
}
.post-nav .site-head .site-title {
  text-align: inherit;
  margin: 0;
  line-height: var(--mast-line);
  height: var(--mast-line);
  overflow: hidden;
}
.post-nav .site-head .nav-rule {
  margin: 0;
  height: 0;
  align-self: center;
}
.post-nav .site-head nav {
  display: block;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-align: inherit;
  margin: 0;
  line-height: var(--mast-title);
  height: var(--mast-title);
}
.left-rail .site-head {
  max-width: var(--rail);
  width: 100%;
  margin: 0;
  padding: var(--space-xs);
  text-align: center;
  border: var(--border);
  background: var(--surface);
  display: grid;
  grid-template-rows: auto var(--border-w) auto;
  row-gap: var(--space-xs);
}
.left-rail .site-head .site-title {
  text-align: inherit;
  margin: 0;
  line-height: var(--mast-line);
  height: auto;
  min-height: var(--mast-line);
  overflow: visible;
}
.left-rail .site-head .nav-rule {
  margin: 0;
  height: 0;
  align-self: center;
}
.left-rail .site-head nav {
  display: block;
  flex-wrap: wrap;
  white-space: normal;
  text-align: center;
  margin: 0;
  line-height: var(--mast-title);
  height: auto;
  min-height: var(--mast-title);
}
.left-rail .site-head {
  order: 1;
}
.left-rail .cite-box {
  order: 4;
}
.cite-box {
  display: block;
}
.cite-box button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--weight-strong);
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.cite-box button:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
footer {
  max-width: var(--measure);
  width: min(
    var(--measure),
    calc(
      100% - 2 * var(--rail-gap) - env(safe-area-inset-left, 0px) -
        env(safe-area-inset-right, 0px)
    )
  );
  margin: var(--rail-gap) auto
    max(var(--space-l), env(safe-area-inset-bottom, 0px));
  padding: var(--space-xs);
  background: var(--surface);
  border: var(--border);
  position: relative;
  isolation: isolate;
  z-index: 1;
}
footer hr {
  display: none;
}
footer p {
  text-align: center;
}
.skip {
  position: absolute;
  left: var(--space-xs);
  top: -100px;
  z-index: 10000;
  padding: var(--space-xs);
  background: var(--surface);
  color: var(--ink);
}
.skip:focus {
  top: 8px;
}

/* blog/controls — the theme selector: hues, lattice, dark mode, invert, tooltips */

.theme-sel {
  max-width: var(--rail);
  width: 100%;
  margin: 0;
  padding: var(--space-xs);
  text-align: center;
  border: var(--border);
  background: var(--surface);
  display: grid;
  grid-template-rows: var(--mast-line) var(--border-w) var(--mast-title);
  row-gap: var(--space-xs);
}
.theme-label {
  margin: 0;
  height: var(--mast-line);
  line-height: var(--mast-line);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  overflow: hidden;
}
.theme-sel .nav-rule {
  margin: 0;
  height: 0;
  align-self: center;
}
.theme-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--grid);
  height: var(--mast-title);
  min-width: 0;
}
.theme-hues {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--mast-title);
  flex: 0 0 auto;
}
.theme-hues input,
.theme-dots input,
.theme-dark {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.theme-hues label,
.theme-dots label,
.theme-mode {
  flex: none;
  width: var(--mast-line);
  height: var(--mast-line);
  border: var(--border);
  cursor: pointer;
  position: relative;
  background: var(--surface);
}
.theme-dots {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--mast-title);
  flex: 0 0 auto;
}
.theme-hues label[for="theme-hue-30"] {
  background: var(--swatch-30);
}
.theme-hues label[for="theme-hue-95"] {
  background: var(--swatch-95);
}
.theme-hues label[for="theme-hue-145"] {
  background: var(--swatch-145);
}
.theme-hues label[for="theme-hue-255"] {
  background: var(--swatch-255);
}
.theme-hues label[for="theme-hue-330"] {
  background: var(--swatch-330);
}
.theme-hues input:checked + label,
.theme-dots input:checked + label {
  box-shadow:
    0 0 0 1px var(--surface),
    0 0 0 2px var(--ink);
}
.theme-hues input:focus-visible + label,
.theme-dots input:focus-visible + label,
.theme-dark:focus-visible + .theme-mode {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.theme-dot-none {
  background: var(--surface);
}
.theme-dot-none::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 7px;
  height: 1px;
  background: var(--ink);
  transform: rotate(-45deg);
}
.theme-dot-small {
  background-color: color-mix(in oklch, var(--ink) 10%, var(--paper));
  background-image: radial-gradient(
    circle at 0.5px 0.5px,
    var(--paper) 0.5px,
    transparent 0.51px
  );
  background-size: 4px 4px;
}
.theme-dot-large {
  background-color: color-mix(in oklch, var(--ink) 10%, var(--paper));
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--paper) 1px,
    transparent 1.1px
  );
  background-size: 8px 8px;
}
.theme-div {
  flex: none;
  width: var(--border-w);
  height: var(--mast-line);
  background: var(--ink);
}
.theme-mode::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--ink);
}
html:has(#theme-dark:checked) .theme-mode,
html[data-scheme="dark"] .theme-mode {
  background: var(--ink);
}
html:has(#theme-dark:checked) .theme-mode::after,
html[data-scheme="dark"] .theme-mode::after {
  background: var(--ink-contrast);
}
.theme-controls [data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + var(--grid));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 0 var(--grid);
  background: var(--ink);
  color: var(--ink-contrast);
  line-height: var(--mast-line);
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
.theme-controls [data-tip]:hover::before,
.theme-controls [data-tip]:focus-visible::before {
  display: block;
}
@supports (anchor-name: --x) {
  .theme-controls [data-tip]:hover {
    anchor-name: --tip;
  }
  .theme-controls [data-tip]::before {
    position: fixed;
    position-anchor: --tip;
    top: calc(anchor(bottom) + var(--grid));
    left: anchor(center);
    transform: translateX(-50%);
  }
}
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) .theme-mode {
    background: var(--ink);
  }
  html:not([data-scheme="light"]) .theme-mode::after {
    background: var(--ink-contrast);
  }
}
.left-rail .site-head,
.left-rail .toc,
.left-rail .cite-box,
.right-rail .theme-sel,
.right-rail .post-nav,
.article-wrap {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.right-rail .theme-sel {
  order: 2;
}


/* blog/index — mastheads, bylines, tools rows, index cards, term lists, pagers */

.sec.mast {
  padding: var(--space-xs);
}
.sec.mast > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--mast-line) var(--border-w) auto var(--border-w) var(
      --mast-line
    );
  row-gap: var(--space-xs);
  margin: 0;
  width: 100%;
}
.sec.mast .byline {
  margin: 0;
  height: var(--mast-line);
  line-height: var(--mast-line);
  overflow: hidden;
  min-width: 0;
}
.sec.mast .nav-rule {
  margin: 0;
  height: 0;
  align-self: center;
}
.sec.mast h1 {
  margin: 0;
  height: auto;
  min-height: var(--mast-title);
  font-size: var(--size-title);
  line-height: var(--leading-tight);
  font-weight: var(--weight-strong);
  text-align: center;
  overflow: visible;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.mast-tools {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--grid);
  margin: 0;
  height: var(--mast-line);
  line-height: var(--mast-line);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.mast-tools .mast-toc,
.mast-tools button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--weight-strong);
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.mast-tools .mast-read {
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.mast-tools > :first-child > .nav-sep:first-child {
  display: none;
}
.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  padding: var(--space-xs);
  text-transform: uppercase;
}
.pager .pager-prev {
  justify-self: start;
}
.pager .pager-at {
  justify-self: center;
  color: var(--muted);
}
.pager .pager-next {
  justify-self: end;
}
.pager a {
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.pager a:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.term-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.term-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  border-bottom: var(--border);
  padding: var(--grid) 0;
}
.term-list .term-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mast-tools .mast-toc:hover,
.mast-tools button:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.sec > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
}
.sec > header .byline {
  width: 100%;
  margin: 0 0 var(--space-xs);
}
.sec > header h1 {
  width: 100%;
  font-size: var(--size-title);
  line-height: var(--leading-tight);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  margin: 0;
}
.byline,
.sec > header address {
  color: var(--muted);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  font-style: normal;
  white-space: nowrap;
}
.byline time,
.byline .byline-date {
  justify-self: start;
  text-align: left;
  font-style: normal;
  color: var(--muted);
  text-transform: uppercase;
  text-decoration: none;
}
.byline .byline-date:hover,
.byline .author:hover {
  background: var(--ink);
  color: var(--ink-contrast);
  text-decoration: none;
}
.byline .permalink {
  display: none;
}
.byline .byline-cat {
  justify-self: center;
  text-align: center;
  font-weight: var(--weight-strong);
  color: var(--muted);
  text-transform: uppercase;
  text-decoration: none;
}
.byline .byline-cat:hover,
.byline .byline-cat:focus-visible,
.byline .byline-cat:hover *,
.byline .byline-cat:focus-visible * {
  background: var(--ink);
  color: var(--ink-contrast);
  text-decoration: none;
}
.byline .author,
.byline address {
  justify-self: end;
  text-align: right;
  font-style: normal;
  color: var(--muted);
  text-transform: none;
}
.sec > header > p:empty {
  display: none;
}
.byline-rule {
  border: 0;
  border-top: var(--border);
  height: 0;
  margin: 0 0 var(--space-xs);
}
.sec.mast > header .byline,
.sec.mast > header h1,
.sec.mast > header .nav-rule {
  margin: 0;
}
.sec.mast.index-mast {
  min-height: var(--mast-box);
}
.sec.mast.index-mast > header {
  grid-template-rows: var(--mast-line) var(--border-w) var(--mast-title);
  align-content: center;
  height: 100%;
}
.index-mast h1 {
  font-size: var(--size-base);
  font-weight: var(--weight-body);
  line-height: var(--mast-line);
  height: var(--mast-line);
  min-height: var(--mast-line);
  overflow: hidden;
}
.index-mast .mast-tools {
  display: flex;
  height: auto;
  align-items: center;
  white-space: normal;
}
.index-mast .mast-tools .nav-search {
  flex: 1;
  min-width: 0;
  display: flex;
}
.index-mast .mast-tools .nav-field {
  width: 100%;
}
.index-mast .mast-tools-rule {
  display: block;
}
.index-tools {
  padding: var(--space-xs);
  margin: 0 0 var(--rail-gap);
}
.index-tools .nav-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid);
  width: 100%;
  margin: 0;
  padding: 0;
}
.index-tools .sel {
  flex: none;
  min-width: 0;
}
.post-card {
  position: relative;
  margin: 0 0 var(--rail-gap);
}
article.post-card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--mast-line) var(--border-w) auto;
  row-gap: var(--grid);
  margin: 0 0 var(--space-xs);
  width: 100%;
}
.post-card > header .nav-rule {
  margin: 0;
  align-self: center;
}
.post-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.post-card .card-thumb,
.post-card .card-meta .author,
.post-card .byline-cat,
.post-card .card-more {
  position: relative;
  z-index: 2;
}
.post-card:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.post-card:hover h2,
.post-card:hover h2 a,
.post-card:hover .card-meta,
.post-card:hover .card-meta time,
.post-card:hover .card-meta .author,
.post-card:hover .card-ex,
.post-card:hover .card-foot .byline-cat,
.post-card:hover .card-more {
  color: var(--ink-contrast);
}
.post-card:hover a:hover,
.post-card:hover a:focus-visible {
  background: var(--ink-contrast);
  color: var(--ink);
}
.post-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--grid);
  margin: 0;
  width: 100%;
  color: var(--muted);
  line-height: var(--mast-line);
}
.post-card .card-meta .author {
  text-align: right;
  text-decoration: none;
}
.post-card .card-meta .author:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.post-card .card-meta time,
.post-card .card-meta .author {
  color: var(--muted);
}
.post-card .card-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  align-items: start;
}
.post-card:has(.card-thumb) .card-row {
  grid-template-columns: calc(40 * var(--grid)) minmax(0, 1fr);
}
.post-card .card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--border);
  background: var(--dither-light);
  text-decoration: none;
}
.post-card h2 {
  margin: 0;
  width: 100%;
  font-size: var(--size-title);
  line-height: var(--leading-tight);
  font-weight: var(--weight-strong);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
.post-card h2 a {
  text-decoration: none;
  font: inherit;
  color: inherit;
}
.post-card .card-ex {
  margin: 0;
  line-height: var(--leading-prose);
}
.post-card p.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--grid);
  margin: 0;
  width: 100%;
}
.post-card .card-foot .byline-cat {
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  color: var(--muted);
}
.post-card .card-more {
  margin: 0;
  text-align: right;
}
.post-card[hidden] {
  display: none;
}
.post-list {
  list-style: none;
}
.post-list li {
  margin: 0 0 var(--space);
}
.post-list h2 {
  display: inline;
  font-size: var(--size-base);
  font-weight: var(--weight-strong);
}
.post-list time {
  margin-left: var(--space-xs);
  color: var(--muted);
}
.post-list p {
  margin: var(--grid) 0 0;
  line-height: var(--leading-prose);
}
.interlink.card-open .link-card {
  display: block;
}

/* blog/nav — search, filters, post lists, ToC, link cards */

.post-nav {
  padding: var(--space);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rail-gap);
}
.post-nav > .nav-box {
  display: none;
}
.post-nav > .disclosure:checked ~ .nav-box {
  display: block;
}
.nav-box {
  border: var(--border);
  background: var(--surface);
  padding: var(--space-xs);
  text-align: left;
  width: 100%;
  max-width: var(--rail);
  margin: 0 auto 0 0;
}
.nav-search {
  margin: 0;
}
.nav-label {
  flex: none;
  white-space: nowrap;
  text-align: left;
}
.nav-field {
  position: relative;
  min-width: 0;
  width: 100%;
  border: var(--border);
  background: var(--surface);
  text-align: left;
  display: flex;
  align-items: center;
  padding: 0 var(--grid) 0 var(--space-xs);
}
.sel {
  position: relative;
}
.nav-search-icon {
  flex: none;
  color: var(--ink);
  display: block;
}
.nav-field input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: var(--grid) var(--grid) var(--grid) 0;
  text-align: left;
  outline: none;
}
.nav-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.sel > summary {
  display: flex;
  align-items: center;
  gap: var(--grid);
  list-style: none;
  cursor: pointer;
  padding: var(--grid) var(--grid) var(--grid) var(--space-xs);
  text-align: left;
  background: var(--surface);
  color: var(--ink);
}
.sel > summary:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.sel-label {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.sel-mark {
  flex: none;
  width: 12px;
  text-align: center;
  line-height: 1;
}
.sel-mark::before {
  content: "\25BE";
}
#post-cat[data-value]:not([data-value=""]) > summary,
#post-author[data-value]:not([data-value=""]) > summary {
  background: var(--ink);
  color: var(--ink-contrast);
}
#post-cat[data-value]:not([data-value=""]) .sel-mark::before,
#post-author[data-value]:not([data-value=""]) .sel-mark::before {
  content: "\00D7";
  color: var(--ink-contrast);
}
#post-cat[data-value]:not([data-value=""]):hover > summary,
#post-author[data-value]:not([data-value=""]):hover > summary {
  background: var(--surface);
  color: var(--ink);
}
#post-cat[data-value]:not([data-value=""]):hover .sel-mark::before,
#post-author[data-value]:not([data-value=""]):hover .sel-mark::before {
  color: var(--ink);
}
.sel > summary::-webkit-details-marker,
.sel > summary::marker {
  display: none;
  content: none;
}
.sel[open] {
  z-index: 21;
}
.sel-menu {
  position: absolute;
  right: calc(-1 * var(--border-w));
  left: calc(-1 * var(--border-w));
  top: 100%;
  z-index: 20;
  margin: 0;
  list-style: none;
  border: var(--border);
  background: var(--surface);
  text-align: left;
}
.sel-menu button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  padding: var(--grid) var(--space-xs);
  text-align: left;
  cursor: pointer;
}
.sel-menu li + li {
  border-top: var(--border);
}
.sel-menu button:hover,
.sel-menu button:focus-visible {
  background: var(--ink);
  color: var(--ink-contrast);
}
.nav-all {
  list-style: none;
  min-height: calc(4 * (2 * var(--leading-tight) + var(--grid)));
}
.nav-all li {
  margin: 0 0 var(--grid);
  line-height: var(--leading-tight);
  min-height: calc(2 * var(--leading-tight));
}
.nav-all li:last-child {
  margin: 0;
}
.nav-all li a {
  display: block;
  min-width: 0;
  text-decoration: none;
  font-weight: var(--weight-strong);
  overflow-wrap: break-word;
  text-wrap: wrap;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.nav-all li a:hover {
  text-decoration: none;
}
.nav-all li a:hover .nav-meta,
.nav-all li a:hover .nav-meta time,
.nav-all li a:hover .nav-cat {
  color: var(--ink-contrast);
}
.nav-all li a[aria-current] {
  background: var(--ink);
  color: var(--ink-contrast);
}
.nav-all li a[aria-current] .nav-meta,
.nav-all li a[aria-current] .nav-meta time,
.nav-all li a[aria-current] .nav-cat {
  color: var(--ink-contrast);
}
.nav-meta {
  display: block;
  font-style: normal;
  color: var(--muted);
  text-align: left;
  width: 100%;
}
.nav-meta time,
.nav-meta .nav-cat {
  font-style: normal;
  color: var(--muted);
}
.nav-cat {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  text-decoration: none;
  font-style: normal;
}
.nav-all > li.off-page {
  display: none;
}
.nav-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--grid);
  margin: var(--space-xs) 0 0;
  background: var(--surface);
}
.nav-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--grid);
  margin: 0;
}
.nav-pager button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.nav-pager button:disabled {
  opacity: 0.4;
  cursor: default;
}
.nav-pager button:not(:disabled):hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
.nav-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--grid);
  margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-xs)) 0;
  padding: var(--space-xs);
  text-align: center;
  background: var(--surface);
}
.nav-page .nav-sep {
  margin: 0;
  flex: none;
}
.nav-page > a {
  flex: none;
  white-space: nowrap;
}
.nav-page .nav-label {
  flex: none;
  white-space: nowrap;
}
.nav-page .nav-search {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
}
.nav-page .nav-field {
  width: 100%;
}
.nav-page details.nav-cat-sel {
  flex: none;
  display: block;
  width: auto;
  min-width: 96px;
  padding: 0;
  border: var(--border);
  color: var(--ink);
  background: var(--surface);
  box-sizing: border-box;
}
.nav-page details.nav-cat-sel > summary {
  display: flex;
  align-items: center;
  flex: 1;
  padding: var(--grid) var(--space-xs);
  box-sizing: border-box;
}
.nav-page .page-sel {
  display: inline-flex;
  flex: none;
  width: max-content;
  max-width: none;
  border: 0;
  background: transparent;
  vertical-align: baseline;
}
.nav-page .page-sel > summary {
  display: inline-flex;
  width: auto;
  flex: none;
  padding: 0;
  gap: 0;
  background: transparent;
  text-decoration: underline;
  color: var(--ink);
}
.nav-page .page-sel .sel-label {
  display: inline;
  flex: none;
  min-width: 0;
  width: auto;
}
.nav-page .page-sel:not([open]) > .sel-menu {
  display: none;
}
.nav-page .page-sel .sel-menu {
  left: 0;
  right: auto;
  min-width: 24px;
  width: max-content;
  text-align: left;
}
.left-rail .toc {
  order: 3;
}
.right-rail .post-nav {
  order: 6;
}
.right-rail .post-nav {
  padding: 0;
  align-items: stretch;
}
.post-nav > .disclosure-label {
  border: var(--border);
  background: var(--surface);
  padding: var(--space-xs);
  text-align: center;
  width: 100%;
}
.post-nav > .disclosure:checked ~ .nav-box {
  width: 100%;
  max-width: none;
}
.toc {
  border: 0;
  padding: 0;
  background: transparent;
  width: 100%;
}
.toc > .disclosure-label {
  margin: 0;
  text-align: center;
  border: var(--border);
  background: var(--surface);
  padding: var(--space-xs);
  width: 100%;
}
.toc > nav {
  display: none;
}
.toc > .disclosure:checked ~ nav {
  display: grid;
}
.toc-scrim {
  display: none;
}
.toc nav {
  grid-template-rows: var(--mast-line) var(--border-w) auto;
  row-gap: var(--space-xs);
  text-align: left;
}
.toc h2 {
  font-weight: var(--weight-strong);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  height: var(--mast-line);
  line-height: var(--mast-line);
  overflow: hidden;
}
.toc .nav-rule {
  margin: 0;
  height: 0;
  align-self: center;
}
.toc-notes {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: var(--weight-body);
  text-align: right;
}
.toc-note {
  text-decoration: none;
  font-weight: var(--weight-strong);
}
.toc ol {
  list-style: none;
  counter-reset: toc-h2;
  margin: 0;
  text-align: left;
}
.toc li {
  margin: 0 0 var(--grid);
  line-height: var(--leading-tight);
  min-width: 0;
}
.toc li a {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  text-decoration: none;
}
.toc li a::before {
  flex: none;
  order: 1;
}
.toc li a::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  min-width: var(--space-xs);
  align-self: center;
  height: 0;
  margin: 0 var(--grid);
  border-bottom: var(--border-w) dotted currentColor;
}
.toc-label {
  order: 3;
  flex: 0 1 auto;
  text-align: right;
  min-width: 0;
}
.toc li a:hover,
.toc li a:hover::before,
.toc li a:hover .toc-label {
  text-decoration: none;
  background-color: var(--ink);
  color: var(--ink-contrast);
}
.toc li.toc-l2 {
  counter-increment: toc-h2;
  counter-reset: toc-h3;
}
.toc li.toc-l2 a::before {
  content: counter(toc-h2) ".\00A0";
}
.toc li.toc-l3 {
  counter-increment: toc-h3;
  padding-left: var(--space-s);
}
.toc li.toc-l3 a::before {
  content: counter(toc-h2) "." counter(toc-h3, lower-alpha) ".\00A0";
}
.toc li.toc-passed > a {
  font-weight: var(--weight-strong);
}
.toc li.toc-current > a,
.toc li.toc-current > a::before,
.toc li.toc-current > a .toc-label {
  background-color: var(--ink);
  color: var(--ink-contrast);
  font-weight: var(--weight-strong);
}
.layout.is-index .post-nav {
  display: none;
}
.interlink {
  position: relative;
}
.link-card {
  display: none;
  position: absolute;
  top: calc(100% + var(--grid));
  left: 0;
  z-index: 10;
  width: var(--card);
  max-width: min(var(--card), calc(100vw - 2 * var(--rail-gap)));
  background: var(--wm-wash, var(--paper));
  color: var(--ink);
  border: var(--border);
  padding: calc(var(--space-xs) + var(--grid)) var(--space-xs) var(--space-xs);
  margin-top: calc(-1 * var(--grid));
  line-height: var(--leading);
  font-weight: var(--weight-body);
  text-align: left;
  text-decoration: none;
}
.link-card strong {
  display: block;
  margin: 0 0 var(--grid);
}
.link-card span {
  display: block;
  color: var(--muted);
}
.interlink:hover .link-card,
.interlink:hover .link-card * {
  color: var(--ink);
  background: var(--wm-wash, var(--paper));
  text-decoration: none;
}
.interlink:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
@media (hover: hover) and (pointer: fine) {
  .interlink:hover .link-card,
  .interlink:focus .link-card,
  .interlink:focus-visible .link-card {
    display: block;
  }
}
@supports (position-try-fallbacks: flip-inline) {
  .link-card {
    position-try-fallbacks: flip-inline;
  }
}

/* blog/prose — article typography: headings, lists, quotes, code, figures */

h1,
h2,
h3,
.prose h2 > .hlink,
.prose h3 > .hlink {
  font-weight: var(--weight-strong);
}
.prose > * {
  max-width: 100%;
}
.prose p,
.prose li {
  position: relative;
}
.prose p {
  margin: 0 0 var(--space-s);
  line-height: var(--leading-prose);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}
.prose li {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}
.prose h2,
.prose h3,
.prose h4 {
  margin: var(--space) 0 var(--space-s);
  line-height: var(--leading-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.sec > :first-child,
.sec > .prose > :first-child {
  margin-top: 0;
}
.article-body > .sec > .prose > :last-child {
  margin-bottom: 0;
}
.prose h2 {
  font-weight: var(--weight-strong);
  text-align: left;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
.prose h3 {
  font-weight: var(--weight-strong);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  line-height: 1;
  margin: var(--space-s) 0 var(--space-xs);
}
.prose h4 {
  font-weight: var(--weight-body);
  text-decoration: underline;
  text-transform: none;
  font-style: normal;
}
.prose h2 > .hlink,
.prose h3 > .hlink {
  font-weight: var(--weight-strong);
}
.prose .h2-sec,
.prose .h3-sec {
  position: relative;
}
.prose ul {
  list-style: none;
  margin: 0 0 var(--space-s);
  padding-left: var(--space-s);
}
.prose ul > li {
  position: relative;
  margin: 0 0 var(--grid);
  line-height: var(--leading-prose);
}
.prose ul > li::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-s));
  top: 6px;
  width: var(--grid);
  height: var(--grid);
  background: var(--ink);
}
.prose ul > li:has(ul, ol)::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-s) + 2px);
  top: 12px;
  height: calc(100% + var(--grid) - 12px);
  border-left: var(--border-w) solid var(--ink);
  opacity: 0.6;
  pointer-events: none;
}
.prose ul ul {
  list-style: none;
  margin: var(--grid) 0 0;
  padding-left: var(--space-s);
}
.prose ol {
  margin: 0 0 var(--space-s);
  padding-left: var(--space);
}
.prose ol > li {
  margin: 0 0 var(--grid);
  line-height: var(--leading-prose);
}
.prose blockquote {
  padding: 0 0 0 var(--space-s);
  margin: 0 0 var(--space-s) var(--space-s);
  border-left: var(--border-w) solid var(--ink);
  font-style: italic;
}
.prose blockquote p {
  margin: 0;
}
.prose blockquote .bq-by {
  display: block;
  text-align: right;
}
.prose code {
  font-family: var(--font-mono);
  padding: 0 var(--grid);
}
.prose pre {
  padding: var(--space-xs);
  overflow-x: auto;
  margin: 0 0 var(--space-s);
}
.prose pre code {
  padding: 0;
}
.prose figure {
  margin: 0 0 var(--space-s);
  width: auto;
  max-width: 100%;
}
.prose > figure {
  display: inline-block;
  vertical-align: top;
  margin-inline: var(--space-s);
  max-width: calc(100% - 2 * var(--space-s));
}
.article-body > .sec > .prose > figure:last-child {
  margin-bottom: 0;
}
.article-body > .sec > .prose > figure:first-child {
  margin-top: 0;
}
.prose figure > a:first-of-type {
  display: block;
  border: var(--border);
  overflow: hidden;
  cursor: pointer;
  background: var(--dither-light);
  text-decoration: none;
}
.prose figure > a:first-of-type:hover,
.prose figure > a:first-of-type:focus-visible {
  background: var(--paper);
  color: inherit;
  text-decoration: none;
}
.prose figure img {
  display: block;
  max-width: 100%;
  height: auto;
}
.prose > figure img {
  width: auto;
}
.gallery figure img {
  width: 100%;
}
.prose figure figcaption {
  display: table;
  margin: calc(-1 * var(--border-w)) 0 0 auto;
  padding: var(--grid) var(--space-xs);
  border: var(--border);
  background: var(--surface);
  font-style: italic;
  font-weight: var(--weight-strong);
  max-width: 100%;
}
.prose figure figcaption a {
  text-decoration: none;
  color: inherit;
  font: inherit;
}
.prose figure:hover figcaption,
.prose figure:hover figcaption a,
.prose figure:has(a:focus-visible) figcaption,
.prose figure:has(a:focus-visible) figcaption a {
  background: var(--ink);
  color: var(--ink-contrast);
}
.prose > hr {
  margin: 0 0 var(--space);
  border: 0;
  border-top: var(--border);
}
.prose :is(h2, h3) {
  position: relative;
  overflow: visible;
}
.prose :is(h2, h3) > .hlink {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: inherit;
}
.prose :is(h2, h3):hover > .hlink,
.prose :is(h2, h3):hover > .hlink::before,
.prose :is(h2, h3) > .hlink:focus-visible,
.prose :is(h2, h3) > .hlink:focus-visible::before {
  background: var(--ink);
  color: var(--ink-contrast);
  text-decoration: none;
}
.prose :is(h2, h3) > .hlink::before {
  position: absolute;
  right: 100%;
  top: 0;
  white-space: pre;
  pointer-events: none;
}
.prose h2 > .hlink::before,
.prose h3 > .hlink::before {
  content: none;
}
.prose h2:hover > .hlink::before,
.prose h2 > .hlink:hover::before,
.prose h2 > .hlink:focus-visible::before {
  content: "## ";
}
.prose h3:hover > .hlink::before,
.prose h3 > .hlink:hover::before,
.prose h3 > .hlink:focus-visible::before {
  content: "### ";
}
.prose :is(h2, h3, h4)[id] {
  scroll-margin-top: var(--toc-spy);
}
.prose h2:hover,
.prose h2:hover > .hlink,
.prose h2:has(> .hlink:focus-visible),
.prose h2:has(> .hlink:focus-visible) > .hlink,
.prose h3:hover,
.prose h3:hover > .hlink,
.prose h3:has(> .hlink:focus-visible),
.prose h3:has(> .hlink:focus-visible) > .hlink,
.prose h4:hover {
  text-decoration: none;
}
.prose a.outlink {
  text-decoration-style: dotted;
}

/* blog/media — .ht image treatment, galleries, lightbox */

.article-body > .sec:has(.ht) {
  overflow: visible;
}
.post-card .card-thumb .ht,
.post-card .card-thumb .ht-map {
  height: 100%;
}
.post-card .card-thumb .ht img {
  height: 100%;
  object-fit: cover;
}
.dither-fx {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ht {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--dither-light);
  width: 100%;
}
.ht::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dither-mid);
  mix-blend-mode: color;
  opacity: var(--ht-tint, 0);
  pointer-events: none;
  z-index: 2;
}
.ht-map {
  display: block;
  position: relative;
  overflow: hidden;
  filter: var(--ht-map, var(--dither-hover-filter, url(#dither-hover)));
}
.ht img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: var(--ht-img, none);
}
.ht-ink {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--ht-ink-op, var(--dither-hover));
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3Crect x='1' width='1' height='1' fill='%23888'/%3E%3Crect x='2' width='1' height='1' fill='%23222'/%3E%3Crect x='3' width='1' height='1' fill='%23aaa'/%3E%3Crect y='1' width='1' height='1' fill='%23ccc'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23444'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23eee'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23666'/%3E%3Crect y='2' width='1' height='1' fill='%23333'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23bbb'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23111'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23999'/%3E%3Crect y='3' width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23777'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23ddd'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23555'/%3E%3C/svg%3E");
  background-size: var(--dither-cell) var(--dither-cell);
  mix-blend-mode: overlay;
}
.prose figure > a:hover .ht-map,
.prose figure > a:focus-visible .ht-map,
.gallery figure > a:hover .ht-map,
.gallery figure > a:focus-visible .ht-map,
.post-card .card-thumb:hover .ht-map,
.post-card .card-thumb:focus-visible .ht-map {
  filter: var(--ht-map-h, var(--dither-filter, url(#dither-3)));
}
.prose figure > a:hover .ht::after,
.prose figure > a:focus-visible .ht::after,
.gallery figure > a:hover .ht::after,
.gallery figure > a:focus-visible .ht::after,
.post-card .card-thumb:hover .ht::after,
.post-card .card-thumb:focus-visible .ht::after {
  opacity: var(--ht-tint-h, 1);
}
.prose figure > a:hover .ht img,
.prose figure > a:focus-visible .ht img,
.gallery figure > a:hover .ht img,
.gallery figure > a:focus-visible .ht img,
.post-card .card-thumb:hover .ht img,
.post-card .card-thumb:focus-visible .ht img {
  filter: var(--ht-img-h, grayscale(1));
}
.prose figure > a:hover .ht-ink,
.prose figure > a:focus-visible .ht-ink,
.gallery figure > a:hover .ht-ink,
.gallery figure > a:focus-visible .ht-ink,
.post-card .card-thumb:hover .ht-ink,
.post-card .card-thumb:focus-visible .ht-ink {
  opacity: var(--ht-ink-op-h, 1);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  margin: 0 0 var(--space);
}
.gallery figure {
  margin: 0;
}
.gallery figure > a {
  display: block;
  border: var(--border);
  overflow: hidden;
  cursor: zoom-in;
  isolation: isolate;
  background: var(--ink);
  text-decoration: none;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery a:hover,
.gallery a:focus-visible {
  background: var(--paper);
  color: inherit;
  text-decoration: none;
}
.gallery figcaption {
  display: table;
  margin: calc(-1 * var(--border-w)) 0 0 auto;
  padding: var(--grid) var(--space-xs);
  border: var(--border);
  background: var(--surface);
  font-style: italic;
  font-weight: var(--weight-strong);
  max-width: 100%;
}
dialog.lightbox {
  border: var(--border);
  background: var(--paper);
  padding: var(--space-xs);
  max-width: 90%;
}
dialog.lightbox img {
  max-width: 100%;
  max-height: 85vh;
  display: block;
  border: var(--border);
}
dialog.lightbox button {
  border: var(--border);
  background: var(--paper);
  color: var(--ink);
  padding: var(--grid) var(--space-xs);
  margin-top: var(--space-xs);
  cursor: pointer;
}
dialog.lightbox button:hover {
  background: var(--ink);
  color: var(--ink-contrast);
}
dialog.lightbox::backdrop {
  background: color-mix(in srgb, var(--paper) 85%, transparent);
}
.link-card .ht {
  margin: 0 0 var(--space-xs);
}
.link-card .ht img {
  border: 0;
  margin: 0;
}

/* blog/notes — footnotes, sidenotes, adjacent-post nav */

.fn {
  scroll-margin-top: 50vh;
}
.fn-on {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.fn-ref {
  font-weight: var(--weight-strong);
  cursor: pointer;
  text-decoration: none;
}
.fn-scrim {
  display: none;
}
.fn-note {
  display: none;
  font-style: italic;
  line-height: var(--leading);
  border: var(--border);
  padding: var(--grid);
  background: var(--wm-wash, var(--paper));
  text-decoration: none;
  color: inherit;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.fn-note strong {
  flex: none;
  margin: 0;
  font-style: normal;
  font-weight: var(--weight-strong);
}
.fn-note .sn-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.fn-note .fn-img,
.fn-end .fn-img {
  display: block;
  max-width: 100%;
  height: auto;
}
.fn-note .fn-xref,
.fn-end .fn-xref {
  font-weight: var(--weight-strong);
}
.fn-end {
  display: flex;
  gap: var(--grid);
  scroll-margin-top: 50vh;
  font-style: italic;
  line-height: var(--leading);
  border: var(--border);
  padding: var(--grid);
  background: var(--wm-wash, var(--paper));
}
.fn-end + .fn-end {
  margin-top: var(--grid);
}
.fn-end strong {
  flex: none;
  margin: 0;
  font-style: normal;
  font-weight: var(--weight-strong);
}
.fn-end .sn-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.fn:hover .fn-ref {
  background: var(--ink);
  color: var(--ink-contrast);
  text-decoration: none;
}
@supports (top: anchor(top)) {
  @media (max-width: 1099px) {
    #fn-1 {
      anchor-name: --fn-1;
    }
    #fn-1 .fn-note {
      position-anchor: --fn-1;
    }
    #fn-2 {
      anchor-name: --fn-2;
    }
    #fn-2 .fn-note {
      position-anchor: --fn-2;
    }
    #fn-3 {
      anchor-name: --fn-3;
    }
    #fn-3 .fn-note {
      position-anchor: --fn-3;
    }
    #fn-4 {
      anchor-name: --fn-4;
    }
    #fn-4 .fn-note {
      position-anchor: --fn-4;
    }
    #fn-5 {
      anchor-name: --fn-5;
    }
    #fn-5 .fn-note {
      position-anchor: --fn-5;
    }
    #fn-6 {
      anchor-name: --fn-6;
    }
    #fn-6 .fn-note {
      position-anchor: --fn-6;
    }
    #fn-7 {
      anchor-name: --fn-7;
    }
    #fn-7 .fn-note {
      position-anchor: --fn-7;
    }
    #fn-8 {
      anchor-name: --fn-8;
    }
    #fn-8 .fn-note {
      position-anchor: --fn-8;
    }
    #fn-9 {
      anchor-name: --fn-9;
    }
    #fn-9 .fn-note {
      position-anchor: --fn-9;
    }
    #fn-10 {
      anchor-name: --fn-10;
    }
    #fn-10 .fn-note {
      position-anchor: --fn-10;
    }
    #fn-11 {
      anchor-name: --fn-11;
    }
    #fn-11 .fn-note {
      position-anchor: --fn-11;
    }
    #fn-12 {
      anchor-name: --fn-12;
    }
    #fn-12 .fn-note {
      position-anchor: --fn-12;
    }
    #fn-13 {
      anchor-name: --fn-13;
    }
    #fn-13 .fn-note {
      position-anchor: --fn-13;
    }
    #fn-14 {
      anchor-name: --fn-14;
    }
    #fn-14 .fn-note {
      position-anchor: --fn-14;
    }
    #fn-15 {
      anchor-name: --fn-15;
    }
    #fn-15 .fn-note {
      position-anchor: --fn-15;
    }
    #fn-16 {
      anchor-name: --fn-16;
    }
    #fn-16 .fn-note {
      position-anchor: --fn-16;
    }
    #fn-17 {
      anchor-name: --fn-17;
    }
    #fn-17 .fn-note {
      position-anchor: --fn-17;
    }
    #fn-18 {
      anchor-name: --fn-18;
    }
    #fn-18 .fn-note {
      position-anchor: --fn-18;
    }
    #fn-19 {
      anchor-name: --fn-19;
    }
    #fn-19 .fn-note {
      position-anchor: --fn-19;
    }
    #fn-20 {
      anchor-name: --fn-20;
    }
    #fn-20 .fn-note {
      position-anchor: --fn-20;
    }
    #fn-21 {
      anchor-name: --fn-21;
    }
    #fn-21 .fn-note {
      position-anchor: --fn-21;
    }
    #fn-22 {
      anchor-name: --fn-22;
    }
    #fn-22 .fn-note {
      position-anchor: --fn-22;
    }
    #fn-23 {
      anchor-name: --fn-23;
    }
    #fn-23 .fn-note {
      position-anchor: --fn-23;
    }
    #fn-24 {
      anchor-name: --fn-24;
    }
    #fn-24 .fn-note {
      position-anchor: --fn-24;
    }
    .fn-note {
      top: anchor(bottom);
      left: anchor(right);
    }
  }
  @media (min-width: 1100px) {
    .fn-note {
      position-anchor: none;
      top: 0;
      left: 100%;
    }
    .theme-sel {
      anchor-name: --theme;
      position: relative;
      z-index: 1;
    }
    .left-rail .toc {
      position: relative;
      z-index: 1;
    }
    .left-rail .toc > nav {
      anchor-name: --toc;
      position: relative;
      z-index: 1;
    }
    .right-rail .nav-box {
      anchor-name: --posts;
      position: relative;
      z-index: 1;
    }
    .right-rail::before {
      content: "";
      position: fixed;
      position-anchor: --posts;
      left: calc(50% + var(--measure) / 2 + var(--rail-gap));
      width: var(--toc-rail);
      top: 0;
      bottom: anchor(bottom);
      z-index: 0;
      pointer-events: none;
      background-color: var(--wm-wash, var(--paper));
      background-image: radial-gradient(
        circle at calc(var(--dot-size, 0px) / 2) calc(var(--dot-size, 0px) / 2),
        var(--paper) calc(var(--dot-size, 0px) / 2),
        transparent calc(var(--dot-size, 0px) / 2 + 0.4px)
      );
      background-size: var(--dot-gap, 8px) var(--dot-gap, 8px);
      background-repeat: repeat;
      background-position: calc(50% - var(--measure) / 2 + var(--dot-ox, 0px))
        var(--dot-oy, 0px);
      background-attachment: fixed;
    }
  }
}
.notes {
  margin: var(--space) 0;
}
.note {
  position: relative;
  border: var(--border);
  padding: var(--space-xs);
  margin: 0 0 var(--space-xs);
  line-height: var(--leading);
  background: var(--surface);
}
.note strong {
  margin-right: var(--grid);
}
.note::before {
  content: "";
  position: absolute;
  right: 100%;
  top: var(--grid);
  width: calc(var(--space-xs) + var(--space));
  height: 0;
  border-top: var(--border-w) solid var(--ink);
  background: none;
  z-index: -2;
  pointer-events: none;
}
.fn-back {
  text-decoration: none;
  margin-left: auto;
  align-self: flex-start;
  font-style: normal;
}
.post-meta {
  color: var(--muted);
  margin: 0;
  padding: var(--space-xs);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.post-meta i {
  overflow-wrap: anywhere;
  hyphens: none;
}
.post-adj {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xs);
}
.post-prev,
.post-next {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 48%;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.post-prev {
  text-align: left;
}
.post-next {
  text-align: right;
  margin-left: auto;
}
.post-adj-k {
  display: block;
  font-weight: var(--weight-strong);
}
.post-adj-t {
  display: block;
}
.disclosure:focus-visible + label,
.fn-on:focus-visible ~ .fn-ref {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* blog/layout — breakpoint composition: how the shell and components arrange at each width */

@media (min-width: 824px) {
  .mast-tools,
  .mast-tools-rule {
    display: none;
  }
  .sec.mast > header {
    grid-template-rows: var(--mast-line) var(--border-w) auto;
  }
}
@media (max-width: 823px) {
  .layout {
    position: relative;
  }
  .head-dials {
    display: inline;
  }
  .layout:not(:has(#theme-pop)) .head-theme {
    display: none;
  }
  .layout:not(:has(#toc-toggle)) .mast-toc {
    display: none;
  }
  .left-rail .site-head {
    order: 1;
    position: relative;
    z-index: 9;
  }
  .article-wrap {
    order: 3;
  }
  .left-rail .toc {
    order: 4;
  }
  .cite-box {
    display: none;
  }
  .right-rail .theme-sel {
    display: contents;
  }
  .post-nav {
    display: none;
  }
  .theme-label,
  .post-nav > .disclosure-label {
    display: none;
  }
  .theme-sel .nav-rule {
    display: none;
  }
  .theme-controls {
    display: none;
    order: 2;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    padding: var(--space-xs);
    border: var(--border);
    background: var(--surface);
    gap: var(--grid);
  }
  .theme-hues,
  .theme-dots {
    height: auto;
  }
  #theme-pop:checked ~ .theme-controls {
    display: flex;
  }
  .toc {
    position: relative;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .toc > .disclosure-label {
    display: none;
  }
  .toc > nav {
    display: none;
  }
  .toc > .disclosure:checked ~ nav {
    display: grid;
    position: fixed;
    left: 50%;
    top: var(--space-l);
    transform: translateX(-50%);
    z-index: 32;
    width: min(var(--card), calc(100vw - 2 * var(--rail-gap)));
    max-height: min(70vh, calc(100dvh - 2 * var(--space-l)));
    overflow: auto;
    scrollbar-gutter: stable;
    margin: 0;
    padding: var(--space-xs);
    border: var(--border);
    background: var(--surface);
  }
  .toc h2 {
    display: block;
  }
  .toc .nav-rule:first-of-type {
    display: block;
  }
  .toc ol {
    border-top: 0;
    padding-top: 0;
  }
  .toc-scrim {
    display: none;
  }
  .toc > .disclosure:checked ~ .toc-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 31;
  }
}
@media (min-width: 824px) and (max-width: 1099px) {
  .layout {
    display: grid;
    grid-template-columns: var(--rail) var(--measure);
    justify-content: center;
    align-items: start;
    column-gap: var(--rail-gap);
    row-gap: var(--rail-gap);
    width: max-content;
    max-width: none;
    margin: var(--rail-gap) auto 0;
    position: relative;
  }
  .side-col {
    display: flex;
    flex-direction: column;
    gap: var(--rail-gap);
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--rail-gap);
    align-self: start;
    width: var(--rail);
    max-width: var(--rail);
    max-height: calc(100dvh - 2 * var(--rail-gap));
    overflow: auto;
    scrollbar-gutter: stable;
    z-index: 5;
  }
  .left-rail,
  .right-rail {
    display: contents;
  }
  .right-rail > .theme-sel {
    order: 1;
  }
  .left-rail > .cite-box {
    order: 2;
  }
  .right-rail > .post-nav {
    order: 3;
  }
  .article-wrap {
    grid-column: 2;
    grid-row: 1;
    width: var(--measure);
    max-width: var(--measure);
    margin: 0;
  }
  .article-body {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .cite-box {
    display: block;
    text-align: center;
  }
  .cite-box .nav-box {
    display: grid;
    grid-template-rows: auto var(--border-w) auto;
    row-gap: var(--space-xs);
    padding: var(--space-xs);
    max-width: none;
    margin: 0;
    text-align: center;
    background: var(--surface);
  }
  .post-nav {
    display: flex;
    padding: 0;
    align-items: stretch;
  }
  .post-nav > .disclosure-label {
    display: none;
  }
  .post-nav > .nav-box {
    display: block;
    max-width: none;
    margin: 0;
  }
  .theme-sel .nav-rule {
    display: block;
    margin: 0;
    height: 0;
    align-self: center;
  }
  .theme-label {
    height: var(--mast-line);
    padding: 0;
    border: 0;
    cursor: default;
  }
  .theme-controls {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: var(--mast-title);
    padding: 0;
    border: 0;
    gap: var(--grid);
  }
  .toc {
    border: var(--border);
    padding: var(--space-xs);
    background: var(--surface);
  }
  .toc > .disclosure-label {
    display: none;
  }
  .toc > nav {
    display: grid;
  }
  .left-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rail-gap);
    order: 2;
  }
  .left-rail .site-head {
    order: 1;
  }
  .right-rail .theme-sel {
    order: 1;
  }
  .right-rail .post-nav {
    order: 2;
  }
}
@media (min-width: 1100px) {
  .layout {
    display: grid;
    grid-template-columns: var(--rail) var(--measure) var(--rail);
    grid-template-rows: auto 1fr;
    justify-content: center;
    column-gap: var(--rail-gap);
    row-gap: var(--rail-gap);
    width: max-content;
    max-width: none;
    margin: var(--rail-gap) auto 0;
    position: relative;
  }
  .side-col {
    display: contents;
  }
  .left-rail {
    display: flex;
    flex-direction: column;
    gap: var(--rail-gap);
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: var(--rail-gap);
    width: var(--rail);
    max-width: var(--rail);
    max-height: calc(100dvh - 2 * var(--rail-gap));
    overflow: auto;
    scrollbar-gutter: stable;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    text-align: center;
    z-index: 5;
  }
  .right-rail {
    display: grid;
    grid-template-rows: subgrid;
    grid-column: 3;
    grid-row: 1 / -1;
    gap: var(--rail-gap);
    position: static;
    width: var(--rail);
    max-width: var(--rail);
    margin: 0;
    padding: 0;
    pointer-events: auto;
    align-items: stretch;
    text-align: center;
    z-index: 5;
  }
  .left-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rail-gap);
    min-width: 0;
    order: 2;
  }
  .left-rail .site-head,
  .left-rail .toc,
  .left-rail .cite-box,
  .left-rail .left-stack,
  .right-rail .theme-sel,
  .right-rail .post-nav {
    pointer-events: auto;
    width: 100%;
    max-width: var(--rail);
    min-width: 0;
    overflow-wrap: break-word;
    text-wrap: wrap;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .left-rail .site-head,
  .right-rail .theme-sel {
    grid-row: 1;
    height: auto;
    align-self: stretch;
  }
  .right-rail .post-nav {
    grid-row: 2;
  }
  .left-rail .toc {
    max-width: var(--toc-rail);
    margin-left: auto;
  }
  .article-wrap {
    display: grid;
    grid-template-rows: subgrid;
    grid-column: 2;
    grid-row: 1 / -1;
    width: var(--measure);
    max-width: var(--measure);
    margin: 0;
  }
  .article-body {
    display: contents;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .sec.mast {
    grid-row: 1;
    align-self: stretch;
    height: auto;
    display: grid;
  }
  .article-rest {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--rail-gap);
  }
  .article-rest > .index-tools,
  .article-rest > .post-card {
    margin-bottom: 0;
  }
  .right-rail .post-nav {
    display: flex;
    padding: 0;
    align-items: stretch;
  }
  .cite-box {
    display: block;
    text-align: center;
  }
  .cite-box .nav-box {
    display: grid;
    grid-template-rows: var(--mast-line) var(--border-w) var(--mast-title);
    row-gap: var(--space-xs);
    padding: var(--space-xs);
    max-width: none;
    margin: 0;
    text-align: center;
    background: var(--surface);
  }
  .cite-box .nav-rule {
    margin: 0;
    height: 0;
    align-self: center;
  }
  .cite-box .cite-url {
    margin: 0;
    height: var(--mast-line);
    line-height: var(--mast-line);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cite-box .cite-copy {
    margin: 0;
    height: var(--mast-title);
    line-height: var(--mast-title);
  }
  .cite-box button {
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    font-weight: var(--weight-strong);
    color: inherit;
    cursor: pointer;
    padding: 0;
  }
  .cite-box button:hover {
    background: var(--ink);
    color: var(--ink-contrast);
  }
  .post-nav > .disclosure-label {
    display: none;
  }
  .post-nav > .nav-box {
    display: block;
    max-width: none;
    margin: 0;
  }
  .theme-sel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: var(--rail);
    padding: var(--space-xs);
    border: var(--border);
    background: var(--surface);
    display: grid;
    grid-template-rows: var(--mast-line) var(--border-w) var(--mast-title);
    row-gap: var(--space-xs);
  }
  .theme-sel .nav-rule {
    display: block;
    margin: 0;
    height: 0;
    align-self: center;
  }
  .theme-label {
    height: var(--mast-line);
    min-height: 0;
    line-height: var(--mast-line);
    padding: 0;
    border: 0;
    cursor: default;
  }
  .theme-controls {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: var(--mast-title);
    padding: 0;
    border: 0;
    gap: var(--grid);
  }
  .left-rail .site-head {
    grid-template-rows: auto var(--border-w) auto;
    align-content: center;
    align-items: stretch;
  }
  .left-rail .site-head .site-title {
    height: auto;
    min-height: var(--mast-line);
    overflow: visible;
  }
  .left-rail .site-head nav {
    height: auto;
    min-height: var(--mast-title);
    white-space: normal;
    flex-wrap: wrap;
  }
  .theme-sel {
    grid-template-rows: auto var(--border-w) auto;
    align-content: center;
    align-items: stretch;
  }
  .sec.mast > header {
    grid-template-rows: auto var(--border-w) auto;
    align-content: center;
    height: 100%;
  }
  .sec.mast h1 {
    height: auto;
    overflow: visible;
    line-height: var(--leading-tight);
  }
}
@media (max-width: 823px) {
  .toc-label {
    text-wrap: pretty;
  }
}
@media (min-width: 824px) {
  .toc {
    border: var(--border);
    padding: var(--space-xs);
    background: var(--surface);
  }
  .toc > .disclosure-label {
    display: none;
  }
  .toc > nav {
    display: grid;
  }
}
@media (max-width: 1099px) {
  .fn {
    position: relative;
  }
  .fn-on:checked ~ .fn-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
  }
  .fn:hover .fn-note,
  .fn:target .fn-note,
  .fn-on:checked ~ .fn-note {
    display: flex;
    gap: var(--grid);
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    width: var(--card);
    max-width: min(var(--card), calc(100vw - 2 * var(--rail-gap)));
    margin: 0;
    padding: calc(var(--space-xs) + var(--grid)) var(--space-xs) var(--space-xs);
    z-index: 30;
    pointer-events: auto;
  }
  @supports (position-try-fallbacks: flip-inline) {
    .fn:hover .fn-note,
    .fn:target .fn-note,
    .fn-on:checked ~ .fn-note {
      position-try-fallbacks: flip-inline;
    }
  }
}
@media (max-width: 1099px) {
  .fn-on:checked ~ .fn-ref {
    background: var(--ink);
    color: var(--ink-contrast);
    text-decoration: none;
  }
}
@media (min-width: 1100px) {
  .fn-on,
  .fn-scrim {
    display: none;
  }
  .fn-ref {
    cursor: pointer;
  }
  .fn-note {
    display: flex;
    gap: var(--grid);
    align-items: flex-start;
    position: absolute;
    left: 100%;
    right: auto;
    top: 0;
    bottom: auto;
    width: var(--toc-rail);
    max-width: var(--toc-rail);
    margin: 0 0 0 var(--sidenote-gap);
    background: var(--wm-wash, var(--paper));
    border-color: var(--ink);
    z-index: 1;
    user-select: text;
    pointer-events: auto;
    cursor: text;
  }
  .fn-note::before {
    content: "";
    display: block;
    position: absolute;
    right: 100%;
    left: auto;
    top: calc(var(--space-xs) + var(--size-base) * var(--leading) / 2);
    width: var(--rail-gap);
    height: var(--border-w);
    border: 0;
    background: var(--ink);
    z-index: -1;
    pointer-events: none;
  }
  .fn-note[data-drop]::before {
    top: calc(
      var(--space-xs) + var(--size-base) * var(--leading) / 2 - var(--fn-drop)
    );
    width: var(--sidenote-gap);
    height: var(--fn-drop);
    background: none;
    border-top: var(--border-w) solid var(--ink);
    border-right: var(--border-w) solid var(--ink);
  }
  .fn:hover .fn-note,
  .fn:hover .fn-note .sn-text,
  .fn:hover .fn-note strong {
    background: var(--ink);
    color: var(--ink-contrast);
  }
}
@media (min-width: 824px) and (max-width: 1099px) {
  footer {
    margin-left: calc(
      50% - (var(--rail) + var(--rail-gap) + var(--measure)) / 2 + var(--rail) +
        var(--rail-gap)
    );
    margin-right: auto;
  }
}
@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* blog/print — print normalization (absolute colors, no dither) */

@media print {
  body {
    background: #fff;
    color: #000;
  }
  .post-nav,
  .toc,
  .wm,
  .theme-sel,
  .left-rail,
  .right-rail {
    display: none;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-weight: var(--weight-body);
  }
  .fn-note {
    display: block;
    position: static;
    width: auto;
    margin: var(--space-xs) 0;
  }
  .fn-on,
  .fn-scrim {
    display: none;
  }
  .dither-fx,
  .ht-ink {
    display: none;
  }
  .ht,
  .ht-map,
  .ht img {
    filter: none;
    mix-blend-mode: normal;
    background: transparent;
  }
}