/* The blog (tools/build_blog.py): articles in the legal pages' panel, a
   little wider type for long reading. */
.blog { color: var(--brown-dark); font-size: 17px; line-height: 1.6; font-weight: 400; }
.blog h2, .blog h3 { font-family: var(--font-title); color: var(--brown); line-height: 1.2; }
.blog ul, .blog ol { padding-left: 22px; }
.blog li { margin-bottom: 4px; }
.blog a { overflow-wrap: anywhere; }
.blog .toc { margin: 0 0 12px; padding: 10px 14px; background: var(--panel-grey); border-radius: 12px; }
.blog .toc a { display: inline-block; }
.blog h1 { font-family: var(--font-title); font-size: 28px; line-height: 1.15; color: var(--brown); margin: 6px 0 8px; }
.blog h2 { font-size: 22px; margin: 26px 0 8px; scroll-margin-top: 16px; }
.blog h3 { font-size: 18px; margin: 18px 0 6px; }
.blog p, .blog ul, .blog ol { margin: 0 0 12px; }
.blog li > ul { margin: 4px 0 0; }
.blog strong { font-weight: 700; }
.blog hr { border: 0; border-top: 2px solid var(--panel-line); margin: 20px 0; }
.blog-crumbs { font-size: 14px; margin-bottom: 4px; }
.blog-crumbs a { display: inline-block; padding: 6px 0; }
.blog-meta { font-size: 14px; color: #6f604b; margin-bottom: 14px; }
.blog-lead { margin-bottom: 14px; }
.blog-cta { text-align: center; margin: 18px 0; }
.blog-cta .btn { min-width: min(100%, 260px); }
.blog-q { margin: 14px 0 2px; }
.blog .toc { font-size: 16px; }
.blog .toc ol { margin: 0; padding: 0; list-style: none; }
.blog .toc li { margin: 0; }
.blog .toc a { padding: 5px 0; }
.blog-table { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
.blog-table table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.4; }
.blog-table th, .blog-table td { border: 2px solid var(--panel-line); padding: 7px 9px; text-align: left; vertical-align: top; }
.blog-table thead th, .blog-table th[scope="row"] { background: var(--panel-grey); font-weight: 700; }
.blog .blog-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.blog .blog-list li { margin: 0; }
.blog-card {
  display: block; padding: 12px 14px; text-decoration: none; color: var(--brown-dark);
  background: var(--panel-grey); border: 3px solid transparent; border-radius: 12px;
}
.blog-card:hover, .blog-card:focus-visible { border-color: var(--blue); }
.blog-card strong { display: block; font-family: var(--font-title); font-size: 18px; line-height: 1.2; color: var(--blue-deep); margin-bottom: 4px; }
.blog-card span { display: block; font-size: 15px; line-height: 1.45; }
.blog-more { margin-top: 28px; }
.blog-notice { margin: 22px 0 0; padding-top: 12px; border-top: 2px solid var(--panel-line); font-size: 13px; line-height: 1.45; color: #6f604b; }
@media (min-width: 700px) {
  .blog h1 { font-size: 34px; }
  .blog-list { grid-template-columns: 1fr 1fr; }
}