/* Blog: the list of posts and a post. The text column is .help-sheet from help.css. */

.blog-list { margin: 28px 0 0; padding: 0; list-style: none; }
.blog-list li { padding: 22px 0 20px; border-top: 1px solid var(--rule); }
.blog-list li:last-child { border-bottom: 1px solid var(--rule); }
.blog-date {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tick);
}
.help-sheet .blog-list a { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; text-decoration: none; }
.help-sheet .blog-list a:hover { color: var(--muted); }
.help-sheet .blog-list p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Images and tables come from Markdown, so they are styled without classes. */
.blog-post img {
  display: block; width: 100%; height: auto; margin: 8px 0 22px;
  border: 1px solid var(--field-border); border-radius: var(--radius);
}
.blog-post blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 2px solid var(--rule-head); color: var(--muted); }
.blog-post blockquote p { margin: 0; }
.blog-post table { display: block; overflow-x: auto; margin: 0 0 14px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.blog-post th, .blog-post td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.blog-post th {
  border-bottom-color: var(--rule-head);
  font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--label);
}
.blog-post td:first-child { color: var(--muted); }

.help-sheet .blog-signup { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--rule-head); }
.help-sheet .blog-signup .btn { color: var(--solid-fg); text-decoration: none; }