/* ============================================================
   Article / blog post layout — pairs with style.css (tokens, nav, buttons)
   ============================================================ */

.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}

.article__back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: .92rem; font-weight: 500;
  margin-bottom: 26px; transition: color .2s;
}
.article__back:hover { color: var(--brand); }

.article__meta {
  font-family: 'JetBrains Mono', monospace; color: var(--brand);
  font-size: .85rem; font-weight: 500; margin-bottom: 12px;
}

.article__title {
  font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 800;
  letter-spacing: -1px; line-height: 1.12; margin-bottom: 18px;
}

.article__lead {
  color: var(--text-dim); font-size: 1.15rem; line-height: 1.6;
  margin: 4px 0 22px;
}

.article__body { font-size: 1.06rem; line-height: 1.8; color: var(--text-dim); }
.article__body h2 {
  color: var(--text); font-size: 1.5rem; font-weight: 700;
  margin: 42px 0 14px; letter-spacing: -.3px;
}
.article__body h3 {
  color: var(--text); font-size: 1.2rem; font-weight: 700; margin: 30px 0 10px;
}
.article__body p { margin-bottom: 18px; }
.article__body strong { color: var(--text); }
.article__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.article__body ul, .article__body ol { margin: 0 0 18px 1.3em; display: grid; gap: 8px; }
.article__body li { padding-left: 4px; }

.article__body pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; overflow-x: auto; margin: 0 0 22px;
  font-family: 'JetBrains Mono', monospace; font-size: .86rem; line-height: 1.7;
  color: var(--text);
}
.article__body :not(pre) > code {
  font-family: 'JetBrains Mono', monospace; font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 6px; color: var(--accent);
}
.article__body pre code { background: none; border: none; padding: 0; color: inherit; }

.article__body blockquote {
  border-left: 3px solid var(--brand); padding: 4px 0 4px 20px;
  margin: 0 0 22px; color: var(--text); font-style: italic;
  background: var(--brand-soft); border-radius: 0 8px 8px 0;
}
.article__body blockquote p:last-child { margin-bottom: 0; }

.article__cta {
  margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.article__cta p { color: var(--text-dim); font-size: 1.02rem; margin: 0; }

.article__note {
  margin: 30px 0 0; padding: 14px 18px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--border);
  color: var(--text-mute); font-size: .9rem;
}

/* Writing section on the home page reuses .projects / .project card styles;
   these just add the meta line and read-more link. */
.post-card__meta {
  font-family: 'JetBrains Mono', monospace; color: var(--brand);
  font-size: .8rem; font-weight: 500; margin-bottom: 8px;
}
.post-card__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  color: var(--brand); font-weight: 600; font-size: .92rem;
}
.post-card__more::after { content: '→'; transition: transform .2s var(--ease); }
.project:hover .post-card__more::after { transform: translateX(4px); }