.blog-intro { max-width: 720px; margin-bottom: 36px; }
.bio-page .blog-category { margin: 0 0 9px; color: #705d89; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.blog-lead { max-width: 66ch; color: #534b60; font-size: clamp(18px, 2vw, 22px); line-height: 1.6; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog-card { background: #f8f7fb; border: 1px solid #e8e3ef; border-radius: 14px; overflow: hidden; }
.blog-card > a { display: block; height: 100%; color: inherit; text-decoration: none; }
.blog-card > a:focus-visible { outline: 3px solid #705d89; outline-offset: -4px; }
.blog-card img { display: block; width: 100%; height: 215px; object-fit: contain; background: #fff; }
.blog-card a > div { padding: 22px; }
.bio-page .blog-card h2 { color: #302b45; font-size: 21px; margin: 0 0 10px; }
.bio-page .blog-card p { margin-bottom: 10px; }
.blog-read, .blog-back, .blog-post a:not(.bio-button) { color: #604b79; font-weight: 600; }
.blog-card a:hover .blog-read { text-decoration: underline; }
.blog-post { max-width: 780px; }
.blog-post article > header { margin: 28px 0; }
.bio-page.blog-post h1 { font-size: clamp(35px, 5vw, 55px); margin-bottom: 16px; }
.bio-page.blog-post h2 { margin: 32px 0 12px; }
.blog-byline, .blog-reference, .blog-example figcaption { font-size: 14px; }
.blog-example { margin: 0 0 28px; text-align: center; }
.blog-example img { display: block; width: auto; max-width: 100%; max-height: 430px; height: auto; margin: 0 auto 8px; }
.blog-service { background: #f4f1f8; border-radius: 14px; margin-top: 38px; padding: 24px; }
.bio-page .blog-service h2 { margin-top: 0; }
.blog-service .bio-button { margin: 8px 0 0 12px; background: #705d89; }
.blog-service .bio-button:hover { background: #554469; }
@media (max-width: 950px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: minmax(0, 1fr); } .blog-service .bio-button { margin-left: 0; display: table; } }