/* blog.css: the blog index and post pages, in the tokens of system.css. */
.blog-hero { padding-block: clamp(56px, 8vw, 110px) clamp(24px, 4vw, 48px); background: var(--c-paper-alt); }
.blog-hero__wrap { display: grid; gap: var(--space-3); }
.blog-hero .h1 { max-width: 18ch; }
.blog-all { padding-block: clamp(32px, 5vw, 72px) var(--section-y); }
.blog-status { color: var(--c-ink-soft); font-size: var(--fs-body); }
.blog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
.blog-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow: var(--shadow-l, 0 18px 40px -20px rgba(0,24,72,.35)); transform: translateY(-2px); }
.blog-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.blog-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-paper-alt); }
.blog-card__body { display: grid; gap: var(--space-2); padding: var(--space-4); }
.blog-card__meta, .blog-post__meta { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; }
.blog-card__title { font: 800 var(--fs-h3)/1.2 var(--font-display); color: var(--c-ink); margin: 0; }
.blog-card__text { margin: 0; color: var(--c-ink-soft); }
.blog-card__more { font-weight: 700; color: var(--c-brand-text); }
.blog-post { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; padding-block: clamp(40px, 6vw, 88px) var(--section-y); }
.blog-post__back { display: inline-block; margin-bottom: var(--space-4); font-weight: 600; }
.blog-post__title { margin: var(--space-2) 0 var(--space-4); }
.blog-post__cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); margin-bottom: var(--space-5); }
.blog-post__body { font: 400 var(--fs-body)/1.7 var(--font-text); color: var(--c-ink); }
.blog-post__body p, .blog-post__body ul, .blog-post__body ol, .blog-post__body figure, .blog-post__body blockquote { margin: 0 0 1.2em; }
.blog-post__body h2 { font: 800 var(--fs-h2)/1.15 var(--font-display); margin: 1.8em 0 .6em; }
.blog-post__body h3, .blog-post__body h4 { font: 800 var(--fs-h3)/1.25 var(--font-display); margin: 1.6em 0 .5em; }
.blog-post__body img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.blog-post__body a { color: var(--c-brand-text); text-decoration: underline; }
.blog-post__body blockquote { padding-left: var(--space-4); border-left: 4px solid var(--c-brand); color: var(--c-ink-soft); }
.blog-post__body li { margin-bottom: .4em; }
.blog-post__cta { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-l); background: var(--c-navy-deep); color: var(--c-on-brand); display: grid; gap: var(--space-3); justify-items: start; }
.blog-post__cta h2 { font: 800 var(--fs-h3)/1.2 var(--font-display); margin: 0; color: var(--c-on-brand); }
.blog-post__cta p { margin: 0; color: var(--c-on-navy-soft); }