/* Blog styling. The shell (header, footer, tokens, buttons) comes from
 * /landing/styles.css, loaded before this file; everything here is the article
 * column and the grid, and it uses the same custom properties so the two
 * surfaces cannot drift apart in colour or rhythm. */

/* The index uses the full content width of the site; an article keeps a
 * reading measure (~72ch), because a 1180px line of prose is unreadable even
 * though it looks tidy in a screenshot. */
.blog-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 20px 88px;
}
.blog-wrap--wide {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 20px 88px;
}

.blog-head { margin-bottom: 40px; }
.blog-head h1 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}
.blog-head p { margin: 16px 0 0; max-width: 62ch; color: var(--muted); font-size: 17px; }

/* --- the index: a grid, three across on desktop, one on a phone --- */
.post-list {
  display: grid;
  gap: 30px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@media (max-width: 719px) {
  .post-list { grid-template-columns: 1fr; }
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.post-card .card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.post-card .card-link h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.24;
  text-wrap: balance;
}
.post-card .card-link:hover h2 { color: var(--accent); }

/* The cover keeps its own ratio: width 100%, height auto. `object-fit: cover`
 * inside a fixed-ratio box needs the box to be exactly as wide as the file's
 * ratio, and a mismatch crops the sides of the image — which on these covers
 * means cutting the title in half. */
.post-card .cover,
.article .article-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.post-card .cover { transition: border-color 140ms ease; }
.post-card .card-link:hover .cover { border-color: var(--border-strong); }

/* An article without a cover still reserves its box, so the titles in one row
 * of the grid stay on one line instead of jumping to the top. */
.post-card .cover--placeholder { aspect-ratio: 16 / 9; border-style: dashed; }

.post-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-2);
}
.tag {
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* --- the article --- */
.article h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}
.article .article-cover { margin: 28px 0 8px; }
.article .body { margin-top: 32px; font-size: 17px; line-height: 1.72; }
.article .body > * + * { margin-top: 20px; }
.article .body h2 { margin-top: 40px; font-size: 24px; }
.article .body h3 { margin-top: 32px; font-size: 19px; }
.article .body a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.article .body ul, .article .body ol { padding-left: 22px; }
.article .body li + li { margin-top: 8px; }
.article .body code {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
}
.article .body pre {
  overflow-x: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}
.article .body pre code { padding: 0; border: 0; background: none; }
.article .body blockquote {
  margin: 24px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
}
.article .body table { width: 100%; border-collapse: collapse; }
.article .body th, .article .body td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }

.article-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.empty {
  padding: 40px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}