/* ==========================================================================
   blog.css — blog listing (blog.html) and every individual post
   (_layouts/post.html). One shared stylesheet so every post looks and
   behaves the same, instead of styling being duplicated per post.
   Long-form reading text stays serif at a generous size/line-height —
   that's a deliberate, separate choice from the sans-serif UI chrome
   used everywhere else, kept for readability.
   ========================================================================== */

.posts,
.post {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.date {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0.35rem 0 1rem;
}

/* -------------------------------------------------------------------- */
/* Listing — each post as its own card                                  */
/* -------------------------------------------------------------------- */

.posts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 0 3rem;
}

.posts .post {
  max-width: none;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}

.posts .post > h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  margin: 0 0 0.2rem;
}

.posts .post .entry {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin-bottom: 1rem;
}

.posts .post .read-more {
  color: var(--blue);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}

.posts .post .read-more:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------- */
/* Single post                                                          */
/* -------------------------------------------------------------------- */

.post > h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 1.5rem 0 0.2rem;
}

.post .entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  margin-bottom: 4rem;
}

.post blockquote {
  margin: 1.8em 0.8em;
  border-left: 2px solid color-mix(in srgb, var(--red) 30%, var(--border));
  padding: 0.1em 1em;
  color: var(--ink-soft);
  font-size: 22px;
  font-style: italic;
}

.post .comments {
  margin-top: 10px;
}

.entry > p {
  line-height: 32px;
  font-size: 21px;
  font-family: var(--font-serif);
  text-align: left;
}

@media screen and (max-width: 640px) {
  .entry > p {
    line-height: 28px;
    font-size: 18px;
  }
}

.entry > ol,
.entry > ul {
  font-size: 21px;
}

@media screen and (max-width: 640px) {
  .entry > ol,
  .entry > ul {
    font-size: 18px;
  }
}

.post-footer {
  margin-top: 3rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------- */
/* Inline code                                                          */
/* -------------------------------------------------------------------- */

code {
  font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
}

code.language-plaintext {
  background: var(--surface-alt);
  color: var(--ink);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* -------------------------------------------------------------------- */
/* Syntax highlighting (Rouge / Gruvbox-dark) — a self-contained dark    */
/* code theme, unrelated to the site's own light/dark mode.             */
/* -------------------------------------------------------------------- */

.highlight {
  background-color: #282828;
  padding: 7px 7px 7px 10px;
  margin: 20px 0 20px 0;
  overflow: auto;
}

.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }

.highlight, .highlight .w {
  color: #fbf1c7;
  background-color: #282828;
}

.highlight .err {
  color: #fb4934;
  background-color: #282828;
  font-weight: bold;
}

.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #928374;
  font-style: italic;
}

.highlight .cp { color: #8ec07c; }
.highlight .nt { color: #fb4934; }
.highlight .o, .highlight .ow { color: #fbf1c7; }
.highlight .p, .highlight .pi { color: #fbf1c7; }

.highlight .gi {
  color: #b8bb26;
  background-color: #282828;
}

.highlight .gd {
  color: #fb4934;
  background-color: #282828;
}

.highlight .gh {
  color: #b8bb26;
  font-weight: bold;
}

.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
  color: #fb4934;
}

.highlight .kc { color: #d3869b; }
.highlight .kt { color: #fabd2f; }
.highlight .kd { color: #fe8019; }

.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
  color: #b8bb26;
  font-style: italic;
}

.highlight .si {
  color: #b8bb26;
  font-style: italic;
}

.highlight .sr {
  color: #b8bb26;
  font-style: italic;
}

.highlight .sa { color: #fb4934; }
.highlight .se { color: #fe8019; }
.highlight .nn { color: #8ec07c; }
.highlight .nc { color: #8ec07c; }
.highlight .no { color: #d3869b; }
.highlight .na { color: #b8bb26; }

.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #d3869b;
}

.highlight .ss { color: #83a598; }