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

:root {
  /* dark palette (default) */
  --bg: #0d0f14;
  --text: #f2eee5;
  --body: #c9c4b8;
  --muted: #a4a1ad;
  --accent: #e5ae4f;
  --accent-soft: rgba(229, 174, 79, .14);
  --line: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .04);
  --serif: Georgia, "Times New Roman", serif;
  --body-bg:
    radial-gradient(circle at 16% 12%, rgba(74, 85, 122, .08), transparent 28rem),
    radial-gradient(circle at 85% 45%, rgba(79, 57, 29, .055), transparent 30rem),
    var(--bg);

  /* Chroma code-block palette — warm terminal on near-black surface */
  --code-bg: #11141b;
  --code-fg: #d8d2c4;
  --code-comment: #766f60;
  --code-string: #b7bd7a;
  --code-keyword: #e5ae4f;
  --code-func: #d9954f;
  --code-number: #c9a26a;
  --code-punct: #948d7d;
  --code-variable: #cdbf9a;
  --code-diff-add: #9bbf74;
  --code-diff-add-bg: rgba(155, 191, 116, .12);
  --code-diff-del: #cf7a63;
  --code-diff-del-bg: rgba(207, 122, 99, .12);
  --code-diff-head: #86a3c9;
  --code-error: #e0685f;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf8f4;
    --text: #1c1a17;
    --body: #3d3832;
    --muted: #7a7268;
    --accent: #a5741a;
    --accent-soft: rgba(165, 116, 26, .12);
    --line: rgba(0, 0, 0, .12);
    --surface: rgba(0, 0, 0, .04);
    --body-bg:
      radial-gradient(circle at 16% 12%, rgba(165, 116, 26, .05), transparent 28rem),
      radial-gradient(circle at 85% 45%, rgba(180, 150, 100, .04), transparent 30rem),
      var(--bg);

    /* Chroma code-block palette — warm terminal on warm paper surface */
    --code-bg: #f1ebdd;
    --code-fg: #3d3832;
    --code-comment: #948c7c;
    --code-string: #5f7233;
    --code-keyword: #a5741a;
    --code-func: #9a5a17;
    --code-number: #8a6d3f;
    --code-punct: #6b6355;
    --code-variable: #55503f;
    --code-diff-add: #3f7d3f;
    --code-diff-add-bg: rgba(63, 125, 63, .1);
    --code-diff-del: #a83f3f;
    --code-diff-del-bg: rgba(168, 63, 63, .1);
    --code-diff-head: #4a6b8a;
    --code-error: #b3372c;
  }
}

html[data-theme="dark"] {
  --bg: #0d0f14;
  --text: #f2eee5;
  --body: #c9c4b8;
  --muted: #a4a1ad;
  --accent: #e5ae4f;
  --accent-soft: rgba(229, 174, 79, .14);
  --line: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .04);
  --body-bg:
    radial-gradient(circle at 16% 12%, rgba(74, 85, 122, .08), transparent 28rem),
    radial-gradient(circle at 85% 45%, rgba(79, 57, 29, .055), transparent 30rem),
    var(--bg);

  --code-bg: #11141b;
  --code-fg: #d8d2c4;
  --code-comment: #766f60;
  --code-string: #b7bd7a;
  --code-keyword: #e5ae4f;
  --code-func: #d9954f;
  --code-number: #c9a26a;
  --code-punct: #948d7d;
  --code-variable: #cdbf9a;
  --code-diff-add: #9bbf74;
  --code-diff-add-bg: rgba(155, 191, 116, .12);
  --code-diff-del: #cf7a63;
  --code-diff-del-bg: rgba(207, 122, 99, .12);
  --code-diff-head: #86a3c9;
  --code-error: #e0685f;
}

html[data-theme="light"] {
  --bg: #faf8f4;
  --text: #1c1a17;
  --body: #3d3832;
  --muted: #7a7268;
  --accent: #a5741a;
  --accent-soft: rgba(165, 116, 26, .12);
  --line: rgba(0, 0, 0, .12);
  --surface: rgba(0, 0, 0, .04);
  --body-bg:
    radial-gradient(circle at 16% 12%, rgba(165, 116, 26, .05), transparent 28rem),
    radial-gradient(circle at 85% 45%, rgba(180, 150, 100, .04), transparent 30rem),
    var(--bg);

  --code-bg: #f1ebdd;
  --code-fg: #3d3832;
  --code-comment: #948c7c;
  --code-string: #5f7233;
  --code-keyword: #a5741a;
  --code-func: #9a5a17;
  --code-number: #8a6d3f;
  --code-punct: #6b6355;
  --code-variable: #55503f;
  --code-diff-add: #3f7d3f;
  --code-diff-add-bg: rgba(63, 125, 63, .1);
  --code-diff-del: #a83f3f;
  --code-diff-del-bg: rgba(168, 63, 63, .1);
  --code-diff-head: #4a6b8a;
  --code-error: #b3372c;
}

body {
  min-height: 100vh;
  background: var(--body-bg);
  color: var(--body);
  font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.03rem;
  line-height: 1.75;
}

/* ── Site wrapper ─────────────────────────────────────────────── */

.site-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2.2rem 5rem;
}

/* ── Site header ──────────────────────────────────────────────── */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 5.2rem;
  margin-bottom: 2.5rem;
}

.monogram {
  font-family: var(--serif);
  color: var(--accent);
  font-size: 1.7rem;
  letter-spacing: -.16em;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  align-items: center;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  margin-left: 1.7rem;
  transition: color .2s;
}

.site-header nav a:hover { color: var(--text); }

/* ── Single post — two-column wide-canvas layout ──────────────── */

.post-cols {
  display: grid;
  grid-template-columns: minmax(0, 47rem) 17rem;
  gap: 5rem;
  justify-content: center;
}

@media (max-width: 72rem) {
  .post-cols {
    grid-template-columns: minmax(0, 47rem);
    justify-content: center;
  }
  .post-rail { display: none; }
}

.post-wrap {
  width: 100%;
  max-width: 47rem;
  min-width: 0;
  margin: 0 auto;
}

.post-rail {
  position: sticky;
  top: 2.5rem;
  align-self: start;
  font-size: .88rem;
}

.rail-heading {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  white-space: nowrap;
}

.rail-heading::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--line);
}

.post-rail nav ul {
  list-style: none;
}

.post-rail nav li {
  padding: .3rem 0;
}

.post-rail nav a {
  color: var(--muted);
  text-decoration: none;
}

.post-rail nav a:hover { color: var(--accent); }

h1.post-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
  color: var(--text);
}

.accent-rule {
  width: 58px;
  height: 3px;
  background: var(--accent);
  margin: 1.4rem 0 1.5rem;
}

.post-subtitle {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--text);
  opacity: .85;
  line-height: 1.3;
  margin-bottom: .5rem;
}

.post-meta {
  margin: 1.6rem 0 3rem;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.post-content { font-size: 1.1rem; }

.post-content p { margin-bottom: 1.3rem; }

.post-content h2 {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 2.8rem 0 1.1rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}

.post-content h2::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--line);
}

.post-content h3 {
  font-family: var(--serif);
  color: var(--text);
  font-size: 1.2rem;
  margin: 2rem 0 .8rem;
}

.post-content a { color: var(--accent); }

.post-content strong { color: var(--text); font-weight: 600; }

.post-content ul,
.post-content ol {
  margin: 0 0 1.3rem 1.5rem;
}

.post-content li { margin-bottom: .3rem; }

.post-content code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: .1em .35em;
  border-radius: 3px;
}

.post-content pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  margin-bottom: 1.3rem;
  font-size: .9rem;
  line-height: 1.6;
}

.post-content pre code {
  background: none;
  padding: 0;
  color: var(--body);
}

/* ── Chroma syntax highlighting (fenced code blocks) ──────────── */

.post-content .highlight {
  margin-bottom: 1.3rem;
  overflow-x: auto;
  border-radius: 4px;
}

.post-content .highlight pre.chroma {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  margin-bottom: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--code-fg);
}

.post-content .highlight pre.chroma code {
  background: none;
  padding: 0;
  color: inherit;
}

.chroma .c, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cm {
  color: var(--code-comment);
  font-style: italic;
}

.chroma .k, .chroma .kn, .chroma .kd, .chroma .kc,
.chroma .kr, .chroma .kt, .chroma .kp, .chroma .nt {
  color: var(--code-keyword);
  font-weight: 600;
}

.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
.chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx,
.chroma .ss, .chroma .sa, .chroma .l {
  color: var(--code-string);
}

.chroma .nf, .chroma .fm, .chroma .nb {
  color: var(--code-func);
}

.chroma .m, .chroma .mi, .chroma .mf, .chroma .mh, .chroma .mo, .chroma .il {
  color: var(--code-number);
}

.chroma .o, .chroma .ow, .chroma .p {
  color: var(--code-punct);
}

.chroma .n, .chroma .nx, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi {
  color: var(--code-variable);
}

.chroma .gi {
  color: var(--code-diff-add);
  background: var(--code-diff-add-bg);
  display: block;
}

.chroma .gd {
  color: var(--code-diff-del);
  background: var(--code-diff-del-bg);
  display: block;
}

.chroma .gu, .chroma .gh {
  color: var(--code-diff-head);
  font-weight: 600;
}

.chroma .ge {
  font-style: italic;
}

.chroma .err {
  color: var(--code-error);
}

.post-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5rem 0;
  padding: .5rem 0 .5rem 1.4rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Post list (homepage + section pages) ─────────────────────── */

.post-list-wrap { max-width: 47rem; margin: 0 auto; }

.post-list-heading {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: .2rem;
  white-space: nowrap;
}

.post-list-heading::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--line);
}

.post-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.post-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.post-num {
  font-family: var(--serif);
  color: var(--accent);
  font-size: 1.5rem;
}

.post-row-title {
  font-family: var(--serif);
  color: var(--text);
  font-size: 1.55rem;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.post-row:hover .post-row-title { color: var(--accent); }

.post-row time {
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}

@media (max-width: 38rem) {
  .post-row {
    grid-template-columns: 3.2rem 1fr;
    gap: .5rem 1.4rem;
  }
  .post-row time {
    grid-column: 2;
    white-space: normal;
  }
}

@media (max-width: 38rem) {
  .theme-toggle { margin-left: 2.4rem; }
}

/* ── Pagination ───────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  font-size: .88rem;
}

.pag-link {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1rem;
}

.pag-link:hover { opacity: .75; }

.pag-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pag-info { color: var(--muted); }

/* ── Generic list page (taxonomy, section) ────────────────────── */

.list-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 2rem;
}

/* ── Site footer ──────────────────────────────────────────────── */

.site-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
}

.heart { color: var(--accent); }

/* ── Theme toggle ─────────────────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  margin-left: 1.7rem;
  transition: color .2s, border-color .2s;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}