/* /blog and every post under it, which links this file from its page head. The full site width, as the
   other marketing pages are; the words keep a reading measure inside it. */
.blog .doc-head .lede,
.blog-post .doc-head .lede { max-width: 62ch; }

.blog-post .doc-head h1 { max-width: 760px; }

.blog-post .lede:empty { display: none; }

.post-back {
  margin: 28px 0 0;
  font-size: 13.5px;
}

.post-back a {
  color: var(--text-secondary);
  text-decoration: none;
}

.post-back a:hover { color: var(--text-primary); }

.blog-post .doc-head { padding-top: 14px; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 16px 0 8px;
  font: 500 12.5px var(--g-mono);
  color: var(--g-dim);
}

.post-docs-line {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font: 13px var(--g-sans);
}

/* Text at a reading measure; a figure takes the page. */
.post-body > :not(figure) { max-width: 760px; }

.post-body > h2 {
  margin: 36px 0 10px;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.post-body > figure:has(img) { margin: 30px 0 34px; }

.post-docs {
  max-width: 760px;
  margin: 40px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--g-action-line);
  border-radius: 12px;
  background: var(--g-action-dim);
}

.post-docs p {
  margin: 0 0 12px;
  font-size: 14.5px;
  color: var(--text-secondary);
}

.post-docs p:last-child { margin: 0; }

.post-docs strong { color: var(--text-primary); }