.blog-list { display: grid; gap: 20px; }
.blog-article { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold-500); scroll-margin-top: 110px; }
.blog-article > summary { position: relative; display: block; cursor: pointer; padding: 28px 32px; list-style: none; }
.blog-article > summary::-webkit-details-marker { display: none; }
.blog-article > summary:hover { background: #faf8f5; }
.blog-article > summary:focus-visible, .blog-article a:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 4px; }
.blog-article > summary .eyebrow { display: block; margin: 0 0 12px; }
.draft-ten.draft-v4 .blog-article > summary h3 { font-size: clamp(1.2rem,2.2vw,1.6rem); line-height: 1.4; margin: 0 0 12px; max-width: 46ch; }
.blog-excerpt { display: block; max-width: 76ch; line-height: 1.7; color: var(--ink-soft); }
.blog-meta { display: block; margin-top: 18px; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); }
.blog-toggle { display: block; margin-top: 16px; font-size: .9rem; font-weight: 600; color: var(--plum-900,#3a2145); }
.blog-when-open { display: none; }
.blog-article[open] > summary .blog-when-open { display: inline; }
.blog-article[open] > summary .blog-when-closed { display: none; }
.blog-article[open] > summary { border-bottom: 1px solid var(--line); }
.blog-article-body { max-width: 82ch; padding: 32px; line-height: 1.85; }
.blog-article-body p { margin: 0 0 1.25em; }
.blog-article-body img { display: block; width: auto; max-width: 100%; height: auto; margin: 24px auto; }
.blog-article-body figure { margin: 24px 0; }
.blog-article-body figcaption { color: var(--ink-soft); font-size: .875rem; }
.blog-article-body :is(h2,h3,h4) { margin: 1.5em 0 .75em; line-height: 1.4; }
.blog-article-body :is(ul,ol) { padding-left: 1.5em; }
.blog-article-body li { margin-bottom: .6em; }
.blog-article-body a { overflow-wrap: anywhere; }
.blog-archive-link { margin-top: 32px; }
.blog-status:empty { display: none; }
.blog-status { padding: 16px 0; color: var(--ink-soft); }
@media (max-width: 640px) {
  .blog-article > summary, .blog-article-body { padding: 22px 20px; }
  .blog-article { scroll-margin-top: 90px; }
}