:root {
  --accent: #b8530f; /* orange (default). blue: #2f3aa3 · neutral: #1a1a1a */
  --rule: #ddd0ab;   /* warm hairline dividers (matches code-block borders) */
}

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

body {
  background: #f4ecd6;
  color: #1b1b19;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ----- Links (accessibility-critical) ----- */
a { color: #1a14d4; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:visited { color: #551a8b; }
a:hover { color: #0d0a8f; text-decoration-thickness: 2px; }
a:active { color: #c0392b; }
a:focus-visible { outline: 2px solid #1a14d4; outline-offset: 2px; border-radius: 1px; }
:focus-visible { outline: 2px solid #1a14d4; outline-offset: 2px; }
::selection { background: #fde68a; }

/* ----- Skip link ----- */
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 50; background: #fff; border: 1px solid #1a14d4; padding: 8px 14px; font-size: 13px; text-decoration: none; }

/* ----- Chrome ----- */
.wrap { max-width: 760px; margin: 0 auto; }

/* Dividers are drawn as 720px centered rules (≈ post-header width), so they
   align with content instead of spanning the full window. */
.site-header { position: relative; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 728px; max-width: calc(100% - 32px); margin: 0 auto; border-bottom: 1px solid var(--rule); }
.site-header .wrap { padding: 7px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-nav { display: flex; gap: 16px; font-size: 13px; }
.site-nav [aria-current="page"] { font-weight: 700; }

main { flex: 1; width: 100%; }

.site-footer { position: relative; margin-top: auto; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; width: 728px; max-width: calc(100% - 32px); margin: 0 auto; border-top: 1px solid var(--rule); }
.site-footer .wrap { padding: 12px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #8a8a84; }

/* ----- Section labels ----- */
.label { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }

/* ----- Meta row (date · reading time · tags) ----- */
.meta { font-size: 13px; color: #6a6a66; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta .tags { display: inline-flex; gap: 10px; }
.meta .tags a { font-size: 13px; }

/* ----- Home: post index ----- */
.home .wrap { padding: 8px 16px 16px; }
.home h1 { margin: 0 0 16px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.label-recent { margin: 0 0 16px; }
.post-entry { margin-bottom: 15px; }
.post-entry h2 { margin: 0 0 3px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.post-entry h2 a { text-decoration-color: #bcbcf2; }
.post-entry .blurb { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: #44443f; max-width: 64ch; }

/* ----- Post ----- */
.post .wrap { padding: 8px 16px 16px; }
.back-link { margin: 0 0 14px; font-size: 13px; }
.post-header { margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--rule); }
.post-header h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.post-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: #6a6a66; }
.post-footer p { margin: 0 0 6px; }
.post-nav { margin-top: 32px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.post-nav .next { text-align: right; }

/* ----- Prose ----- */
.prose { font-size: 13px; line-height: 1.65; color: #1d1d1b; }
.prose p { margin: 0 0 13px; }
.prose h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; margin: 22px 0 8px; }
.prose ul, .prose ol { margin: 0 0 13px; padding-left: 20px; }
.prose li { margin-bottom: 5px; }
.prose code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.86em; background: #efe6cb; border: 1px solid #ddd0ab; border-radius: 3px; padding: 1px 5px; }
.prose pre { margin: 0 0 24px; background: #efe6cb; border: 1px solid #ddd0ab; border-radius: 4px; padding: 12px 14px; overflow: auto; font-size: 13px; line-height: 1.55; color: #22221f; }
.prose pre code { font-size: 13px; background: none; border: 0; border-radius: 0; padding: 0; }
.prose blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); color: #44443f; font-style: italic; }

/* ----- About / generic page (mirrors post prose typography) ----- */
.page .wrap { padding: 8px 16px 16px; }
.page main { font-size: 13px; line-height: 1.65; color: #1d1d1b; }
.page h1 { margin: 0 0 16px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.page p { margin: 0 0 13px; }
.page h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; margin: 22px 0 8px; }
.page ul, .page ol { margin: 0 0 13px; padding-left: 20px; }
.page li { margin-bottom: 5px; }