/* Blog pages only. Loaded from /blog, not from the rest of the site. */
.blog-page { padding-top: 92px; }
.blog-page .blog-article,
.blog-page .blog-index { padding-bottom: 72px; }
.blog-article { max-width: 680px; }
.blog-index { max-width: 760px; }
.blog-crumb { color: var(--mist); font-size: 14px; margin: 8px 0 22px; }
.blog-crumb a { text-decoration: none; }
.blog-crumb a:hover { color: var(--washi); }
.blog-mast h1 { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.25; font-weight: 400; margin: 0 0 10px; }
.blog-meta, .blog-index time { color: var(--mist); font-size: 14px; }
.blog-toc { margin: 22px 0 8px; border-top: 1px solid var(--indigo-line); border-bottom: 1px solid var(--indigo-line); padding: 10px 0; }
.blog-toc summary { cursor: pointer; color: var(--kincha); }
.blog-toc ol { margin: 10px 0 0; padding-left: 1.2em; }
.blog-toc a { text-decoration: none; }
.blog-body { font-size: 17px; line-height: 1.85; }
.blog-body h2 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 400; line-height: 1.35; margin: 1.6em 0 .5em; }
.blog-body h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
.blog-body p, .blog-body ul, .blog-body blockquote { margin: 0 0 1em; }
.blog-body ul { padding-left: 1.2em; }
.blog-body a { text-decoration: underline; text-underline-offset: .18em; }
.blog-body blockquote { margin-left: 0; padding-left: 14px; border-left: 2px solid var(--kincha); color: var(--washi-deep); }
.blog-table-wrap { overflow-x: auto; margin: 0 0 1.2em; -webkit-overflow-scrolling: touch; }
.blog-table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: 15px; line-height: 1.55; }
.blog-table th, .blog-table td { border-bottom: 1px solid var(--indigo-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.blog-table th { color: var(--kincha); font-weight: 600; }
.blog-table th:first-child, .blog-table td:first-child { position: sticky; left: 0; background: var(--night); min-width: 7em; }
.blog-cta { margin: 1.4em 0; }
.blog-cta .pills, .blog-hero-pills { justify-content: flex-start; }
.blog-hero-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; margin: 18px 0; padding-top: 14px; border-top: 1px solid var(--indigo-line); }
.blog-hero-link { display: contents; text-decoration: none; }
.blog-hero-card img { width: 112px; height: 74px; object-fit: cover; }
.blog-hero-copy { display: grid; align-content: center; gap: 2px; }
.blog-hero-seal { color: var(--kincha); font-size: 12px; }
.blog-hero-name { font-family: var(--f-display); font-size: 1.2rem; }
.blog-hero-role { color: var(--mist); font-size: 14px; }
.blog-hero-pills { grid-column: 1 / -1; }
.blog-related { margin-top: 2em; }
.blog-related ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.blog-related a { text-decoration: none; }
.blog-index-list { display: grid; gap: 22px; margin-top: 28px; }
.blog-index-card a { display: grid; gap: 6px; text-decoration: none; }
.blog-index-card img { width: 100%; height: auto; }
.blog-index-card h2 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 400; line-height: 1.3; }
.blog-index-card p { color: var(--mist); }
.blog-pager { display: flex; gap: 16px; align-items: center; margin-top: 28px; }
@media (max-width: 640px) {
  .blog-hero-card { grid-template-columns: 96px minmax(0, 1fr); }
  .blog-page { padding-top: 78px; }
}