:root {
  --bg: #f5f7fa; --panel: #ffffff; --border: #e1e6ec; --fg: #1b2330;
  --muted: #667085; --accent: #39b1d1; --accent-fg: #06222b; --link: #0e85a3; --chip-bg: #eef1f6;
  --editor-bg: #0f1420; --editor-fg: #c9d1d9; --ok: #2e8b3d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--fg); margin: 0;
  -webkit-font-smoothing: antialiased; letter-spacing: -.006em; line-height: 1.6;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- app bar ---- */
header { border-bottom: 1px solid var(--border); background: var(--panel); padding: 0 1rem; }
.navwrap { max-width: 1040px; margin: 0 auto; height: 56px; display: flex; align-items: center; gap: .5rem; }
.navwrap .grow { flex: 1; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--fg); }
.brand:hover { text-decoration: none; }
.logomark {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: var(--accent); color: var(--accent-fg); font-family: ui-monospace, Menlo, monospace;
  font-weight: 700; font-size: .78rem;
}
.wordmark { font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; }
.crumb-sep { color: var(--muted); font-weight: 600; font-size: 1.1rem; }
.crumb { color: var(--muted); font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; }
.crumb:hover { color: var(--fg); text-decoration: none; }
.navlink { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.navlink:hover { color: var(--fg); text-decoration: none; }

main { max-width: 760px; margin: 0 auto; padding: 2.4rem 1.1rem 4rem; }
main.index { max-width: 1040px; }

/* ---- index ---- */
.pagehead { margin-bottom: 2.2rem; }
.pagehead h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 .5rem; }
.pagehead .sub { color: var(--muted); font-size: 1rem; margin: 0; max-width: 60ch; }
.postmeta { color: var(--muted); font-size: .82rem; margin-top: .25rem; font-variant-numeric: tabular-nums; }

/* index cards: hero thumbnail + language/tag chips */
.postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; }
.card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border);
        color: var(--fg); overflow: hidden; transition: border-color .15s, transform .15s; }
.card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-3px); }
.card-thumb { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--editor-bg); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; }
.card-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.card-title { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.card:hover .card-title { color: var(--link); }
.card .postmeta { margin: .3rem 0 0; }
.card-summary { color: var(--muted); font-size: .9rem; margin: .55rem 0 0;
                display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* chips: language badge (per-language tint) + plain tags */
.lang, .tag { font-size: .7rem; font-weight: 600; padding: .12rem .5rem; border: 1px solid var(--border);
              font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.tag { color: var(--muted); background: var(--chip-bg); text-transform: lowercase; }
.lang { text-transform: lowercase; }
.lang-go   { color: #0c7a93; background: #e2f3f7; border-color: #bfe6ef; }
.lang-rust { color: #b25d05; background: #fbeede; border-color: #f1d3ad; }
.lang-c    { color: #3c5fa6; background: #e9eefb; border-color: #cad8f2; }

/* ---- article ---- */
.post h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 .4rem; }
.post .postmeta { margin-bottom: 2rem; }
.post h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; margin: 2.4rem 0 .8rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
.post h3 { font-size: 1.1rem; font-weight: 700; margin: 1.8rem 0 .6rem; }
.post p { margin: 0 0 1.1rem; }
.post ul, .post ol { padding-left: 1.3rem; margin: 0 0 1.1rem; }
.post li { margin: .35rem 0; }
.post strong { color: #0d1320; font-weight: 700; }
.post a { text-decoration: underline; text-underline-offset: 2px; }
.post blockquote {
  margin: 1.2rem 0; padding: .2rem 1rem; border-left: 3px solid var(--accent);
  color: var(--muted); background: var(--chip-bg);
}
.post hr { border: 0; border-top: 1px solid var(--border); margin: 2.4rem 0; }

/* inline + block code */
.post code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--chip-bg); padding: .1rem .35rem; color: #1b2330;
}
.post pre {
  background: var(--editor-bg); border: 1px solid var(--border);
  padding: .9rem 1rem; overflow-x: auto; margin: 0 0 1.2rem; line-height: 1.5;
}
.post pre code { background: none; padding: 0; font-size: .85rem; color: #c9d1d9; }

/* syntax highlighting (highlight.js token classes, our own palette) */
.post .hljs { background: transparent; color: #c9d1d9; }
.hljs-comment, .hljs-quote { color: #6b7480; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: #c4b5fd; }
.hljs-string, .hljs-regexp, .hljs-meta .hljs-string { color: #7ee787; }
.hljs-number, .hljs-symbol { color: #f0a868; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #8ab4ff; }
.hljs-type, .hljs-built_in, .hljs-class .hljs-title { color: #5bc8d8; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #e7ebf3; }
.hljs-meta, .hljs-comment .hljs-doctag { color: #8b94a7; }

/* images / diagrams */
.post img {
  display: block; max-width: 100%; height: auto; margin: 1.6rem 0;
  border: 1px solid var(--border); background: var(--editor-bg);
}

/* tables (GFM) */
.post table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 0 0 1.2rem; }
.post th, .post td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; }
.post th { background: var(--panel); font-weight: 600; }

.backlink { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }

footer {
  border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem;
  padding: 1.4rem 1.1rem; text-align: center;
}