/* ============================================================
   Shared by the home page (styles.css) and the blog (blog.css):
   colour tokens, font stacks, reset. Change the palette here.

   Diagram palette: inline SVGs may use currentColor and these
   variables, and follow the light/dark theme automatically:
   --accent (link blue), --accent-2, --warn, --muted, --rule, --surface, --bg
   ============================================================ */

:root {
  --bg: #ffffff;
  --text: #242424;
  --muted: #6b6b6b;
  --rule: #e8e8e8;
  --surface: #f7f7f5;
  --code-bg: #f5f5f3;
  --accent: #1f5fc6;
  --accent-2: #0e7490;
  --warn: #b45309;

  --serif: 'Source Serif 4', Charter, 'Bitstream Charter', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --column: 680px;
  --wide: 960px;
  --gutter: 20px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --text: #e2e2e2;
    --muted: #9c9c9c;
    --rule: #2c2c2c;
    --surface: #1c1c1c;
    --code-bg: #1d1d1f;
    --accent: #8ab4f8;
    --accent-2: #6cc3d5;
    --warn: #d9a54a;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- post list: the /blog/ index and the home page's Writing section ---------- */
.list { list-style: none; }
.list-entry { border-bottom: 1px solid var(--rule); }
.list-link { display: flex; gap: 1.5rem; align-items: center; padding: 1.75rem 0; text-decoration: none; color: inherit; }
.list-text { flex: 1; min-width: 0; }
.list-kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
.list-title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.016em; }
.list-link:hover .list-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.list-summary {
  font-family: var(--serif); font-size: 1.05rem; color: var(--muted); margin-top: 0.35rem;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.list-meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; }
.list-thumb {
  flex: none; width: 160px; height: 107px; border-radius: 4px; overflow: hidden;
  background: var(--surface); display: grid; place-items: center; color: var(--text);
}
.list-thumb > svg, .list-thumb > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) {
  .list-thumb { width: 88px; height: 88px; }
  .list-link { gap: 1rem; }
}