/* Blog pages — extends style.css (shares :root vars, .blob, .grain, .card, .lang-switch, footer) */

.blog-body { text-align: left; }

.blog-nav {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto; padding: 1.4rem 1.2rem 0;
  display: flex; justify-content: space-between; align-items: center;
}
.blog-home {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  color: #e8eaf0; text-decoration: none; letter-spacing: .02em;
}
.blog-home:hover { color: var(--c2); }
.blog-nav .lang-switch { position: static; }

.blog-main { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 1.2rem; }

.blog-header { padding: 3rem 0 1rem; }
.blog-header h1 {
  font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin-bottom: .6rem;
}
.blog-header .lead { color: #aab3c5; max-width: 60ch; }

/* listing */
.post-list { display: flex; flex-direction: column; gap: 1.2rem; padding: 1rem 0 3rem; }
.post-card { text-align: left; }
.post-card h2 { font-size: 1.25rem; margin: .3rem 0 .5rem; }
.post-card h2 a { color: #e8eaf0; text-decoration: none; }
.post-card h2 a:hover { color: var(--c2); }
.post-card p { color: #aab3c5; font-size: .95rem; line-height: 1.6; }
.post-meta { color: #8a93a6; font-size: .82rem; letter-spacing: .03em; }
.post-meta a { color: #8a93a6; text-decoration: none; }
.post-meta a:hover { color: var(--c2); }
.read-more {
  display: inline-block; margin-top: .7rem;
  color: var(--c2); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.read-more:hover { text-decoration: underline; }

/* single post */
.post { padding: 2.5rem 0 3rem; }
.post-header h1 {
  font-family: var(--font-display); font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  line-height: 1.25; margin: .6rem 0;
}
.post-content { margin-top: 1.6rem; line-height: 1.75; color: #ccd3e0; }
.post-content h2, .post-content h3 { color: #e8eaf0; margin: 1.8em 0 .6em; line-height: 1.3; }
.post-content h2 { font-size: 1.35rem; }
.post-content h3 { font-size: 1.1rem; }
.post-content p, .post-content ul, .post-content ol { margin: 0 0 1em; }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li { margin-bottom: .35em; }
.post-content a { color: var(--c2); }
.post-content strong { color: #e8eaf0; }
.post-content blockquote {
  border-left: 3px solid var(--c1); padding: .2em 0 .2em 1em;
  color: #aab3c5; margin: 0 0 1em;
}
.post-content code {
  background: rgba(255,255,255,.08); border-radius: 4px;
  padding: .12em .38em; font-size: .88em;
}
.post-content pre {
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 1em; overflow-x: auto; margin: 0 0 1.2em;
}
.post-content pre code { background: none; padding: 0; font-size: .85em; }
.post-content img { max-width: 100%; height: auto; border-radius: 10px; margin: .4em 0; }
.post-content figure { margin: 1.4em 0; }
.post-content figcaption { color: #8a93a6; font-size: .82rem; margin-top: .5em; text-align: center; }
.post-content hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 2em 0; }
.post-content table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; font-size: .92em; }
.post-content th, .post-content td { border: 1px solid rgba(255,255,255,.12); padding: .5em .7em; text-align: left; }
.post-content th { background: rgba(255,255,255,.06); color: #e8eaf0; }