/* Shared stylesheet for the blog: blog/index.html and every post.
   Loads alongside site.css, which already covers nav, hero, footer,
   and the .legal article body pattern (heading scale, paragraph and
   list spacing, measure). This file adds only what's specific to
   posts: blockquotes, the byline, and the post-card grid on the index.
   Same token names as site.css on purpose, so the 2 files can't drift
   on color. */

.legal blockquote {
  border-left: 3px solid var(--mint);
  padding: 4px 0 4px 22px;
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 18px;
  font-style: italic;
}

.byline {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 40px; padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.byline-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.byline-name a { color: inherit; text-decoration: none; }
.byline-name a:hover { color: var(--mint-deep); }
.byline-meta { color: var(--graphite); font-size: 13.5px; }

.post-grid {
  display: grid; gap: 20px; margin-top: 40px;
}
.post-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 4px;
  padding: 30px 32px; text-decoration: none; display: block;
  transition: border-color .16s ease;
}
.post-card:hover { border-color: var(--mint-deep); }
.post-card .mono { color: var(--mint-deep); display: block; margin-bottom: 10px; }
.post-card h2 {
  font-weight: 800; font-size: clamp(21px, 2.6vw, 26px);
  color: var(--ink); margin-bottom: 10px; line-height: 1.1;
}
.post-card p { color: var(--graphite); font-size: 16px; margin: 0; }

@media (max-width: 620px) {
  .post-card { padding: 24px; }
}