.blog-article-content { color: var(--km-text, #c8c8c8); font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.blog-article-content h2 { margin: 2.5rem 0 1rem; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.2; color: #fff; }
.blog-article-content h3 { margin: 2rem 0 .75rem; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; color: #fff; }
.blog-article-content h4, .blog-article-content h5, .blog-article-content h6 { margin: 1.5rem 0 .6rem; color: #fff; }
.blog-article-content > :first-child { margin-top: 0; }
.blog-article-content p { margin: 0 0 1.15rem; }
.blog-article-content a { color: #f06a82; text-decoration: underline; }
.blog-article-content blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid #d7193f; background: rgba(255,255,255,.04); }
.blog-article-content ul { margin: 1rem 0 1.5rem; padding-left: 1.5rem; list-style: disc outside; }
.blog-article-content ol { margin: 1rem 0 1.5rem; padding-left: 1.5rem; list-style: decimal outside; }
.blog-article-content ul ul { list-style: circle outside; } .blog-article-content ol ol { list-style: lower-alpha outside; }
.blog-article-content li { margin: .45rem 0; padding-left: .25rem; line-height: 1.65; }
.blog-article-content .table-responsive { width: 100%; margin: 1.5rem 0 2rem; overflow-x: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: #111; -webkit-overflow-scrolling: touch; }
.blog-article-content .table-responsive:focus { outline: 2px solid #d7193f; outline-offset: 3px; }
.blog-article-content table { width: 100%; min-width: 760px; border-collapse: collapse; color: #e7e7e7; }
.blog-article-content th, .blog-article-content td { padding: 14px 16px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; vertical-align: top; line-height: 1.55; overflow-wrap: anywhere; }
.blog-article-content th:last-child, .blog-article-content td:last-child { border-right: 0; } .blog-article-content tbody tr:last-child td { border-bottom: 0; }
.blog-article-content thead { background: #8f111f; } .blog-article-content th { color: #fff; font-weight: 700; }
.blog-article-content tbody tr:nth-child(even) { background: rgba(255,255,255,.025); } .blog-article-content tbody tr:hover { background: rgba(215,25,63,.08); }
.blog-article-content pre { padding: 1rem; overflow-x: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #111; color: #f3b5c0; }
.blog-article-content figure { margin: 1.5rem 0 2rem; } .blog-article-content figcaption { margin-top: .5rem; color: #999; font-size: .9rem; }
.blog-article-content aside { margin: 1.5rem 0; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.03); }
.blog-page { padding: 7rem 1rem 5rem; }
.blog-page-header { max-width: 780px; margin-bottom: 2rem; }
.blog-page-header h1 { margin: .4rem 0 1rem; max-width: 760px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; color: #fff; }
.blog-page-header > p:last-child { color: #aaa; font-size: 1.1rem; }
.blog-eyebrow, .blog-card-category { color: #ef5270; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.blog-category-controls { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0; }
.blog-category-controls a { padding: .65rem 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #ccc; text-decoration: none; }
.blog-category-controls a:hover, .blog-category-controls a:focus-visible, .blog-category-controls a.is-active { border-color: #d7193f; background: #8f111f; color: #fff; outline: none; }
.blog-featured-card { display: grid; grid-template-columns: 1.15fr .85fr; margin: 2rem 0 3rem; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: #151515; }
.blog-featured-media, .blog-card-media { display: block; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.blog-featured-media img, .blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-copy { padding: clamp(1.4rem, 4vw, 3rem); align-self: center; }
.blog-featured-copy h2 { margin: .5rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.15; color: #fff; }
.blog-featured-copy h2 a, .blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card-meta, .blog-article-meta { color: #999; font-size: .9rem; margin: 1rem 0 1.25rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.blog-card { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #151515; }
.blog-card-body { padding: 1.2rem; } .blog-card-body h2 { margin: .4rem 0 .7rem; font-size: 1.2rem; line-height: 1.25; color: #fff; } .blog-card-body > p:not(.blog-card-category) { color: #aaa; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #777; letter-spacing: .12em; font-size: .75rem; background: linear-gradient(135deg,#141414,#242424); }
.blog-article-excerpt { max-width: 760px; color: #aaa; font-size: 1.1rem; } .blog-article-hero { margin: 2rem 0 3rem; } .blog-article-hero img { width: 100%; max-height: 620px; object-fit: cover; border-radius: 14px; display: block; } .blog-article-hero figcaption { margin-top: .6rem; color: #999; font-size: .9rem; } .blog-breadcrumbs { display: flex; gap: .6rem; color: #999; font-size: .9rem; margin-bottom: 2rem; } .blog-breadcrumbs a { color: #ef5270; } .blog-article-cta { margin-top: 3rem; padding: 2rem; border-radius: 12px; background: #181818; text-align: center; } .blog-article-cta h2 { color: #fff; }
.blog-empty { padding: 3rem 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; text-align: center; color: #aaa; }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .blog-page { padding-top: 5rem; } .blog-featured-card { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .blog-page-header h1 { font-size: clamp(2rem, 10vw, 3rem); } }
@media (max-width: 768px) { .blog-article-content { font-size: .98rem; } .blog-article-content table { min-width: 680px; } .blog-article-content th, .blog-article-content td { padding: 11px 12px; } }