/* ---------- blog ---------- */
body.blog { background: var(--paper-2); }
.blog-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px); background: var(--accent); color: #fff;
}
.blog-logo img { width: 92px; }
.blog-top nav { display: flex; gap: clamp(12px, 3vw, 28px); align-items: center; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.blog-top nav a { text-decoration: none; }
@media (max-width: 560px) { .blog-top nav a:not(.nav-cta) { display: none; } }

.art-wrap { width: min(760px, 100% - 32px); margin: 0 auto; padding: 28px 0 72px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.art h1 { font-weight: 300; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 .4em; }
.art-meta { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.art-hero { margin: 0 0 28px; border-radius: 22px; overflow: hidden; }
.art-hero img { width: 100%; }
.art h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 1.8em 0 .5em; scroll-margin-top: 16px; }
.art h3 { font-weight: 400; font-size: 1.25rem; margin: 1.4em 0 .3em; }
.art p, .art li { font-size: 18px; }
.art a { color: var(--accent-ink); text-underline-offset: 3px; }
.art ul, .art ol { padding-left: 1.2em; }
.art li { margin-bottom: .45em; }
.art li::marker { color: var(--accent-dark); }
.art hr { border: 0; border-top: 1px solid rgba(30,26,27,.15); margin: 28px 0; }
.art blockquote { margin: 0; padding: 20px 24px; background: #fff; border-radius: 20px; border-left: 4px solid var(--accent); }
.art blockquote p:first-child { margin-top: 0; }
.art blockquote p:last-child, .art blockquote ul:last-child { margin-bottom: 0; }
.art table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; font-size: 16px; display: block; overflow-x: auto; }
.art th, .art td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(30,26,27,.08); vertical-align: top; }
.art th { font-weight: 500; background: #FBEDEC; }
.art-fig { margin: 28px 0; }
.art-fig img { width: 100%; border-radius: 18px; }
.art-fig figcaption { font-size: 15px; color: var(--muted); margin-top: 8px; }
.art-cta { background: var(--accent); color: #fff; border-radius: 24px; padding: 24px 26px; margin: 28px 0; }
.art-cta p { margin: 0 0 14px; }
.art-cta-t { font-size: 1.4rem; font-weight: 400; }
.art-cta .btn { background: #fff; color: var(--accent-ink); }

.blog-list { padding: 40px 0 80px; }
.blog-list h1 { font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .3em; }
.blog-lead { color: var(--muted); max-width: 60ch; margin: 0 0 2em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; text-decoration: none; transition: transform .2s ease; }
.card:hover { transform: translateY(-3px); }
.card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card-t { padding: 16px 18px 6px; font-size: 1.2rem; font-weight: 400; line-height: 1.3; }
.card-d { padding: 0 18px 20px; color: var(--muted); font-size: 15px; }
.blog-foot { background: var(--accent); color: #fff; padding: 28px 16px; text-align: center; font-size: 15px; }
.blog-foot a { color: #fff; }