.blog-shell { min-height: calc(100vh - 170px); padding-bottom: 76px; }
.blog-intro { padding: clamp(64px, 9vw, 112px) 0 56px; background: radial-gradient(circle at 86% 20%, rgba(255,177,107,.22), transparent 24%), linear-gradient(115deg,#eaf7f3,#f5f8f8 68%); }
.blog-intro-inner { max-width: 860px; }
.blog-kicker { margin: 0 0 14px; color: var(--brand); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.blog-intro h1 { max-width: 780px; margin: 0; color: var(--brand-dark); font-size: clamp(36px,5.5vw,62px); font-weight: 900; line-height: 1.08; }
.blog-lead { max-width: 680px; margin: 22px 0 0; color: var(--muted); font-size: clamp(17px,2vw,20px); line-height: 1.7; }
.blog-list { padding-top: 46px; }
.blog-list-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.blog-list-heading .blog-kicker { margin-bottom: 8px; }
.blog-list-heading h2 { margin: 0; color: var(--ink); font-size: clamp(26px,3vw,36px); line-height: 1.2; }
.blog-count { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.blog-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); }
.blog-card-link { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.blog-card-link:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.blog-card img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--line); }
.blog-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px; }
.blog-card time,.blog-article-meta,.blog-updated { color: var(--muted); font-size: 14px; }
.blog-card h2 { margin: 10px 0; color: var(--ink); font-size: 20px; line-height: 1.35; }
.blog-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
.blog-card-read { margin-top: auto; color: var(--brand); font-weight: 800; }
.blog-article-shell { padding-top: 30px; }
.blog-article { max-width: 900px; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 30px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.blog-breadcrumb a,.blog-article-bottom a { color: var(--brand); text-decoration: none; }
.blog-breadcrumb a:hover,.blog-article-bottom a:hover { text-decoration: underline; }
.blog-article-header { max-width: 820px; margin: 0 auto 30px; }
.blog-article-header h1 { margin: 0; color: var(--ink); font-size: clamp(34px,5vw,52px); line-height: 1.12; }
.blog-article-description { margin: 18px 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.blog-article-meta { display: flex; align-items: center; gap: 10px; }
.blog-hero-image { max-width: 820px; margin: 0 auto 38px; }
.blog-hero-image img { display: block; width: 100%; max-height: 520px; border-radius: 18px; object-fit: cover; }
.blog-article-body { max-width: 780px; margin: 0 auto; color: var(--ink); font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.blog-article-body h2 { margin: 1.8em 0 .65em; color: var(--brand-dark); font-size: clamp(24px,3.2vw,32px); line-height: 1.25; }
.blog-article-body h3 { margin: 1.5em 0 .55em; color: var(--brand-dark); font-size: clamp(20px,2.7vw,25px); line-height: 1.3; }
.blog-intro h1,.blog-list-heading h2,.blog-card h2,.blog-article-header h1,.blog-article-body h2,.blog-article-body h3 { text-transform: capitalize; }
.blog-article-body p,.blog-article-body ul,.blog-article-body ol { margin: 0 0 1.15em; }
.blog-article-body img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: 12px; }
.blog-article-body a { color: var(--brand); text-underline-offset: 3px; }
.blog-article-body blockquote { margin: 24px 0; padding: 4px 20px; border-left: 4px solid var(--brand); color: var(--muted); }
.blog-article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.blog-article-body th,.blog-article-body td { padding: 10px; border: 1px solid var(--line); }
.blog-editorial-note { max-width: 780px; margin: 0 auto 20px; color: var(--muted); font-size: 13px; }
.blog-updated { max-width: 780px; margin: 32px auto 0; }
.blog-article-bottom { max-width: 780px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 800; }
:root[data-theme="dark"] .blog-intro { background: radial-gradient(circle at 86% 20%, rgba(255,154,98,.12), transparent 24%), linear-gradient(115deg,#123d39,#071c1a 68%); }
:root[data-theme="dark"] .blog-intro h1 { color: var(--brand-dark); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .blog-shell { padding-bottom: 52px; } .blog-intro { padding: 58px 0 42px; } .blog-list { padding-top: 30px; } .blog-grid { grid-template-columns: 1fr; gap: 16px; } .blog-list-heading { align-items: center; } .blog-card { border-radius: 14px; } .blog-card-copy { padding: 18px; } .blog-article-shell { padding-top: 22px; } .blog-breadcrumb { margin-bottom: 22px; } .blog-article-header h1 { font-size: clamp(31px,9vw,42px); } .blog-article-description { font-size: 16px; } .blog-article-body { font-size: 16px; line-height: 1.75; } .blog-hero-image img { border-radius: 12px; } }