.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:64px; }
.blog-card { background:white; border-radius:28px; overflow:hidden; }
.blog-card h2 { font-size:28px; overflow-wrap:anywhere; }
.blog-card p { color:#656a82; }
.blog-card-body { padding:28px; }
.blog-cover { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.cover-placeholder { background:#000015; color:#b2ee51; padding:32px; font-weight:800; font-size:40px; line-height:1; display:flex; align-items:flex-end; }
.article-meta { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:14px; color:#656a82; margin-bottom:20px; }
.blog-empty { min-height:330px; margin-bottom:64px; max-width:850px; }
.empty-symbol { font-size:48px; color:#357fec; display:block; margin-bottom:24px; }
.article-page { max-width:1000px; margin:auto; }
.article-page h1 { font-size:clamp(36px,5vw,64px); overflow-wrap:anywhere; }
.article-body { max-width:820px; margin:32px auto; padding:48px; font-size:19px; overflow-wrap:anywhere; }
.article-body h2 { margin-top:40px; }.article-body h2:first-child {margin-top:0;}
.article-body p {margin-bottom:24px;}.article-body li {margin-bottom:10px;}
.article-cover {width:100%;max-height:520px;object-fit:cover;border-radius:28px;}
.byline {margin:24px 0 0;font-size:15px;}.preview-banner {background:#b2ee51;padding:16px;border-radius:12px;}
@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}.article-body{padding:24px;font-size:17px;}.blog-card h2{font-size:25px;}}
.blog-filters{margin:0 0 40px}.blog-search{display:flex;gap:12px;max-width:680px;margin:0 auto 28px;background:white;padding:8px;border-radius:18px;box-shadow:0 8px 24px #1a1c2808}.blog-search input{min-width:0;flex:1;border:0;background:transparent;padding:10px 16px;font:inherit;color:#1a1c28}.blog-search input:focus-visible{outline:2px solid #357fec;border-radius:10px}.category-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;padding:20px;background:#e9edfa;border-radius:16px}.category-filters a{padding:8px 12px;border-radius:8px;color:#656a82;font-size:16px}.category-filters a[aria-current]{background:#fff;color:#175cbe;font-weight:800}.category-filters a:hover{color:#175cbe}.blog-card-image{position:relative}.cover-date{position:absolute;right:16px;bottom:16px;color:white;background:#000015c9;padding:6px 12px;border-radius:8px;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.article-page{max-width:1272px}.article-reading{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start;margin-top:32px}.article-reading.with-toc{grid-template-columns:260px minmax(0,1fr)}.article-reading .article-body{margin:0;max-width:none;min-width:0}.article-toc{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;background:white;border:1px solid #dfe3f2;border-radius:20px;padding:24px}.article-toc h2{font-size:22px;letter-spacing:-.02em;margin-bottom:16px}.article-toc a{display:block;border-left:3px solid transparent;padding:9px 0 9px 12px;font-size:15px;line-height:1.5;color:#656a82}.article-toc a.toc-level-3{padding-left:24px}.article-toc a[aria-current]{border-color:#357fec;color:#175cbe;background:#f2f6fe}.article-body h2,.article-body h3{scroll-margin-top:32px}.article-body h3{font-size:24px;margin-top:30px}.article-table{overflow:auto;margin:28px 0;border:1px solid #e1e4ed;border-radius:12px}.article-table table{min-width:420px;text-align:left}.article-table th,.article-table td{padding:14px 18px;border-bottom:1px solid #e1e4ed;font-size:16px;text-align:left;letter-spacing:normal;font-weight:500}.article-table thead th{background:#edf3ff;color:#1a1c28;font-weight:700}.article-table tr:last-child td{border-bottom:0}
@media(max-width:900px){.article-reading.with-toc{grid-template-columns:minmax(0,1fr)}.article-toc{position:static;max-height:320px}.article-body{padding:28px}}
@media(max-width:600px){.blog-search{gap:6px}.blog-search input{font-size:15px;padding:10px 8px}.blog-search button{padding:10px 14px}.category-filters{gap:6px;padding:12px}.category-filters a{font-size:14px;padding:6px 10px}.article-reading .article-body{padding:22px}.cover-date{right:12px;bottom:12px}}
.blog-search button { border: 0; }

.blog-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:-24px 0 64px}.blog-pagination a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 14px;background:white;border-radius:10px}.blog-pagination a[aria-current]{background:#175cbe;color:white}.blog-pagination a:hover{box-shadow:0 0 0 2px #357fec}

/* Extend only the background; keep category links inside the content width. */
.category-filters { border-radius:0; box-shadow:0 0 0 100vmax #e9edfa; clip-path:inset(0 -100vmax); }

.article-toc { top:calc(var(--site-header-height,124px) + 24px); max-height:calc(100dvh - var(--site-header-height,124px) - 48px); }
@media(max-width:900px){.article-toc{max-height:320px;}}

.related-articles{margin-top:48px}.related-articles>h2{margin-bottom:28px}.related-articles .blog-grid{margin-bottom:40px}

.article-image{margin:28px 0}.article-image img{display:block;max-width:100%;height:auto;margin:auto;border-radius:16px}.article-image figcaption{margin-top:10px;text-align:center;color:#656a82;font-size:14px;overflow-wrap:anywhere}

/* Card summaries take at most three lines; full text remains in the article. */
.blog-card-body > p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }

.article-body a, .article-body a:visited, .article-body a:hover, .article-body a:focus { color: #175cbe; }