/* GENERATED by design-system/scripts/build.py from tokens.json and components.css. Do not edit by hand. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #121212);
  --ink: light-dark(#1a1a1a, #ececec);
  --ink-hover: light-dark(#444444, #c4c4c4);
  --ink-muted: light-dark(#555555, #b3b3b3);
  --text-secondary: light-dark(#666666, #a6a6a6);
  --text-meta: light-dark(#767676, #8c8c8c);
  --text-ghost: light-dark(#bbbbbb, #5c5c5c);
  --accent: light-dark(#186241, #7cc9a2);
  --on-ink: light-dark(#ffffff, #121212);
  --on-ink-warm: light-dark(#faf9f0, #121212);
  --surface-subtle: light-dark(#f8f9fa, #1a1a1a);
  --surface-code: light-dark(rgba(233,236,239,0.65), #1e1e1e);
  --surface-inline-code: light-dark(#e8e8e8, #2a2a2a);
  --surface-chip: light-dark(#f2f2f2, #242424);
  --surface-footnote: light-dark(#f0f0f0, #262626);
  --surface-output: light-dark(#f9f9f9, #181818);
  --surface-hover: light-dark(#f5f5f5, #1f1f1f);
  --border: light-dark(#dee2e6, #333333);
  --border-soft: light-dark(#ebebeb, #262626);
  --border-quote: light-dark(#e9ecef, #2e2e2e);
  --border-control: light-dark(#e8e8e8, #2e2e2e);
  --border-control-hover: light-dark(#e0e0e0, #3a3a3a);
  --border-hairline: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.12));
  --link-underline: light-dark(rgba(0,0,0,0.4), rgba(255,255,255,0.4));
  --toc-rail-hover: light-dark(#cccccc, #4d4d4d);
  --toc-rail-sub: light-dark(#999999, #666666);
  --syntax-keyword: light-dark(#003b4f, #8ec5e6);
  --syntax-function: light-dark(#4758ab, #a3b1f5);
  --syntax-string: light-dark(#20794d, #7fd1a5);
  --syntax-comment: light-dark(#5e5e5e, #8f8f8f);
  --syntax-number: light-dark(#ad0000, #ff8f85);
  --syntax-import: light-dark(#00769e, #6cc4e0);
  --syntax-attribute: light-dark(#657422, #c5d16b);
  --syntax-constant: light-dark(#8f5902, #e0b46a);
  --syntax-variable: light-dark(#111111, #e6e6e6);
  --font-sans: Commissioner, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Commissioner, sans-serif;
  --font-mono: Inconsolata, ui-monospace, Menlo, Consolas, monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.9rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --radius-chip: 3px;
  --radius-button: 4px;
  --radius-code: 0.25rem;
  --radius-card: 6px;
  --radius-portrait: 2.5rem;
  --measure: 36rem;
  --margin-column: 13rem;
  --page-wide: 60rem;
  --post-meta-min: 5.75rem;
  --target-min: 2.5rem;
  --size-h1: 2rem;
  --size-h2: 1.65rem;
  --size-h3: 1.45rem;
  --size-list-title: 1.3rem;
  --size-h4: 1.25rem;
  --size-brand: 1.15rem;
  --size-lede: 1.1rem;
  --size-body: 1rem;
  --size-summary: 0.875rem;
  --size-meta: 0.85rem;
  --size-small: 0.8rem;
  --size-date: 0.78rem;
  --size-label: 0.7rem;
  --thumb-rest: 0.9;
  --shadow-lift: 0 4px 12px light-dark(rgba(0,0,0,0.15), rgba(0,0,0,0.5));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Component and layout styles. Edit this file, then run `python3 design-system/scripts/build.py`
   to regenerate site.css. Use tokens only: no hex codes, rgb() or font names here. */

/* ---------- Base ---------- */
html { font-size: 118.75%; }  /* 19px when the browser default is 16px; respects the reader's setting */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { color: inherit; font-weight: 600; line-height: 1.2; margin: var(--space-6) 0 var(--space-4); text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-heading); }
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }
h5 { font-size: var(--size-lede); }
p { margin: 0 0 var(--space-4); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ink-muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
pre { background: var(--surface-subtle); border-radius: var(--radius-code); padding: var(--space-2); overflow-x: auto; font-family: var(--font-mono); font-size: var(--size-summary); }

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: 100;
  padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--on-ink);
  border-radius: var(--radius-button); text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--on-ink); }
.section-label {
  font-family: var(--font-sans); font-size: var(--size-label); font-weight: 600; letter-spacing: .08em;
  line-height: 1.75; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 var(--space-4); border: 0; padding: 0;
}

/* ---------- Navbar ---------- */
.site-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4);
  padding: var(--space-2) var(--space-5); background: var(--bg); color: var(--ink);
}
.site-nav__brand { font-size: var(--size-brand); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-nav__links { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav__links a {
  display: flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-2);
  color: var(--ink); text-decoration: none; font-size: var(--size-body);
}
.site-nav__links a:hover { color: var(--ink-muted); }
.site-nav__links a[aria-current="page"], .site-nav__links a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.site-nav__icon { width: 1em; height: 1em; display: block; fill: currentColor; }
@media (max-width: 575.98px) {
  .site-nav { padding-inline: var(--space-4); column-gap: var(--space-2); }
  .site-nav__links { gap: 0; }
  .site-nav__links a { padding: 0 var(--space-1); }
}

/* ---------- Home intro ---------- */
.intro { margin: 0 0 var(--space-6); }
.intro__title { margin: 0 0 var(--space-1); font-size: var(--size-h1); }
.intro__text { margin: 0; font-size: var(--size-lede); color: var(--text-secondary); line-height: 1.5; }
.intro__text a { color: var(--ink); }

/* ---------- Category chip ---------- */
.chip {
  display: inline-flex; align-items: center;
  color: var(--text-secondary); background: var(--surface-chip);
  font-size: var(--size-label); letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
  padding: .4em .8em; border-radius: var(--radius-chip); text-decoration: none;
  transition: color .15s ease-in, background-color .15s ease-in;
}
.chip:hover, .chip:focus-visible, .chip[aria-current="true"] { background: var(--ink); color: var(--on-ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }

/* ---------- Post list ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { display: flex; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.post-item:first-child { padding-top: var(--space-2); }
.post-item__meta {
  flex: 0 0 auto; min-width: var(--post-meta-min); white-space: nowrap; margin-top: .3em;
  display: flex; flex-direction: column; font-size: var(--size-date); color: var(--text-meta); letter-spacing: .01em;
}
.post-item__body { flex: 1 1 0; min-width: 0; }
.post-item__title { margin: 0 0 var(--space-1); font-size: var(--size-list-title); line-height: 1.25; }
.post-item__title a { font-family: var(--font-heading); color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -0.02em; }
.post-item:hover .post-item__title a, .post-item__title a:focus-visible { color: var(--ink-hover); }
.post-item__desc { font-size: var(--size-summary); color: var(--text-secondary); margin: var(--space-1) 0 0; line-height: 1.7; }
.post-item__thumb { flex: 0 0 20%; display: block; }
.post-item__thumb img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: .4em;
  border-radius: var(--radius-card); opacity: var(--thumb-rest);
}
.post-item:hover .post-item__thumb img { opacity: 1; }
@media (max-width: 767.98px) {
  .post-item { flex-direction: column; gap: var(--space-1); }
  .post-item__body { order: 1; }
  .post-item__meta { order: 2; flex-direction: row; gap: var(--space-2); margin-top: 0; }
  .post-item__meta > * + *::before { content: "·"; margin-right: var(--space-2); }
  .post-item__thumb { display: none; }  /* keep the list short on phones */
}

/* ---------- Categories (sidebar list and phone strip) ---------- */
.category-list__title { margin: 0 0 var(--space-1); font-size: var(--size-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); font-family: var(--font-sans); }
.category-list { list-style: none; margin: 0; padding: 0; }
.category-list a {
  display: block; padding: .15em 0; font-size: var(--size-small); color: var(--ink-muted);
  line-height: 1.8; text-decoration: none; transition: color .15s ease;
}
.category-list a:hover, .category-list a:focus-visible, .category-list a[aria-current="true"] { color: var(--ink); }
.category-list a[aria-current="true"] { font-weight: 600; }
.category-strip { margin: 0 0 var(--space-4); }
@media (min-width: 992px) { .category-strip { display: none; } }

/* ---------- Post header ---------- */
.post-header { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-hairline); margin-bottom: var(--space-6); }
.post-header__title { margin: 0; color: var(--ink); }
.post-header .chip-row { margin-top: var(--space-3); }
.post-header__desc { color: var(--text-secondary); line-height: 1.5; margin: var(--space-3) 0 var(--space-5); font-weight: 300; }
.post-header__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; }
.post-header__meta dt { font-size: var(--size-label); color: var(--text-secondary); font-weight: 600; letter-spacing: .03em; }
.post-header__meta dd { font-size: var(--size-meta); color: var(--ink-hover); margin: 0; }
.post-header__meta a { color: inherit; }
@media (max-width: 575.98px) { .post-header__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Prose (post body) ---------- */
.prose h2:where(:not(.section-label)) { border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.prose :where(p, li, figcaption) a:where(:not(.fn-ref, .fn-back)) {
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--link-underline);
}
.prose :where(p, li, figcaption) a:where(:not(.fn-ref, .fn-back)):hover { border-bottom-color: var(--ink); }
.prose :not(pre) > code {
  font-family: var(--font-mono); font-size: .9em; background: var(--surface-inline-code);
  padding: .1em .35em; border-radius: var(--radius-chip);
}
.prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4); border-left: .25rem solid var(--border-quote); color: var(--ink-muted); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose figure { margin: 0 0 var(--space-4); }
.prose figcaption { text-align: center; font-size: .9em; color: var(--text-secondary); }
.prose img { display: block; margin: 0 auto; }

/* ---------- Code block ---------- */
.code-block {
  background: var(--surface-code); border: 1px solid var(--surface-code); border-radius: var(--radius-code);
  margin: 0 0 var(--space-4); overflow-x: auto;
}
.code-block pre {
  margin: 0; padding: .85em 1em; background: transparent; border: 0; border-radius: 0; overflow: visible;
  font-family: var(--font-mono); font-size: var(--size-summary); line-height: 1.75; color: var(--syntax-keyword);
}
.code-block code { font-family: inherit; white-space: pre; }
.code-cell { margin: 0 0 var(--space-4); }
.code-cell .code-block { margin-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.code-output {
  background: var(--surface-output); border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: .85em 1em; font-family: var(--font-mono); font-size: var(--size-summary); color: var(--ink-hover); overflow-x: auto;
}
.code-output::before {
  content: "output"; display: block; font-family: var(--font-sans); font-size: var(--size-label); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-ghost); margin-bottom: .6em;
}
.code-output pre { margin: 0; padding: 0; background: transparent; font: inherit; white-space: pre-wrap; }
.tok-kw { color: var(--syntax-keyword); font-weight: 700; }
.tok-fu { color: var(--syntax-function); }
.tok-st { color: var(--syntax-string); }
.tok-co { color: var(--syntax-comment); }
.tok-dv { color: var(--syntax-number); }
.tok-im { color: var(--syntax-import); }
.tok-at { color: var(--syntax-attribute); }
.tok-cn { color: var(--syntax-constant); }
.tok-va { color: var(--syntax-variable); }
.tok-op { color: var(--syntax-comment); }

/* ---------- Footnotes ---------- */
.fn-ref { text-decoration: none; border: 0; padding: .6em .2em; margin: -.6em -.2em; }  /* larger tap area, same layout */
.fn-ref sup {
  font-size: .6em; font-weight: 600; font-family: var(--font-sans); color: var(--text-secondary);
  background: var(--surface-footnote); border-radius: var(--radius-chip); padding: .1em .35em; margin-left: .1em;
  vertical-align: super; line-height: 1; transition: background-color .15s ease, color .15s ease;
}
.fn-ref:hover sup, .fn-ref:focus-visible sup { background: var(--ink); color: var(--on-ink); }
.footnotes { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-soft); }
.footnotes ol { font-size: var(--size-meta); color: var(--text-secondary); padding-left: 1.2em; line-height: 1.65; margin: 0; }
.footnotes li + li { margin-top: var(--space-1); }
.footnotes .fn-back { color: var(--text-secondary); text-decoration: none; border: 0; margin-left: .3em; padding: .3em; }
.footnotes .fn-back:hover, .footnotes .fn-back:focus-visible { color: var(--ink); }

/* ---------- Table of contents ---------- */
.toc .section-label { margin-bottom: var(--space-3); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block; font-size: var(--size-small); color: var(--text-secondary); line-height: 1.45; padding: .35em 0 .35em .75em;
  border-left: 2px solid transparent; text-decoration: none; transition: color .15s ease, border-color .15s ease;
}
.toc a:hover, .toc a:focus-visible { color: var(--ink); border-left-color: var(--toc-rail-hover); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); font-weight: 500; }
.toc ul ul a { font-size: var(--size-date); padding-left: 1.5em; }
.toc ul ul a[aria-current="true"] { color: var(--ink-muted); border-left-color: var(--toc-rail-sub); font-weight: 400; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: var(--space-1); list-style: none; padding: 0; margin: var(--space-7) 0 var(--space-6); flex-wrap: wrap; }
.pagination a {
  display: flex; align-items: center; justify-content: center; min-height: var(--target-min); min-width: var(--target-min);
  box-sizing: border-box; padding: 0 .9em; color: var(--text-secondary); border: 1px solid var(--border-control);
  font-size: var(--size-small); border-radius: var(--radius-card); text-decoration: none;
}
.pagination a:hover, .pagination a:focus-visible { background: var(--surface-hover); color: var(--ink); border-color: var(--border-control-hover); }
.pagination a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ---------- About profile ---------- */
.profile { display: flex; gap: var(--space-6); padding-block: var(--space-6) var(--space-4); }
.profile__entity { flex: 0 0 38%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile__photo { width: 14em; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-portrait); margin-bottom: var(--space-5); background: var(--surface-chip); }
.profile__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.profile__link {
  display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--size-small); padding: 0 .7em;
  border: 1px solid currentColor; border-radius: var(--radius-button);
  color: var(--ink-muted); text-decoration: none; transition: transform .15s ease, background-color .15s ease;
}
.profile__link:hover, .profile__link:focus-visible {
  transform: scale(1.06); color: var(--on-ink-warm); background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-lift);
}
.profile__contents { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--border); padding-left: var(--space-6); }
.profile__contents h1 { margin-top: 0; font-size: var(--size-h2); }
.profile__contents a { color: var(--accent); font-weight: 500; text-decoration: underline; }
.profile__contents a:hover { text-decoration-thickness: 2px; }
@media (max-width: 991.98px) {
  .profile { flex-direction: column; gap: var(--space-4); padding-top: 0; }
  .profile__photo { width: 9em; margin-bottom: var(--space-4); }
  .profile__contents { border-left: 0; padding-left: 0; }
}

/* ---------- Page layout ---------- */
.page {
  box-sizing: border-box; max-width: calc(var(--measure) + var(--margin-column) + var(--space-8) + 2 * var(--space-5));
  margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8);
  display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--margin-column)); gap: var(--space-8);
}
.page--single { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--measure) + 2 * var(--space-5)); }
.page--wide { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--page-wide) + 2 * var(--space-5)); }
.page__main, .page__aside { min-width: 0; }
.page__aside > .toc { position: sticky; top: var(--space-6); }
@media (max-width: 991.98px) {
  .page { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--measure) + 2 * var(--space-5)); }
  .page__aside { display: none; }
}
@media (max-width: 575.98px) { .page { padding-inline: var(--space-4); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .profile__link:hover, .profile__link:focus-visible { transform: none; }
}