.blog-page { background:#f6f5f2; }
.blog-intro { padding:clamp(3rem,7vw,6.5rem) 0 3rem; max-width:900px; }
.blog-intro h1 { font-size:clamp(2.8rem,6.5vw,5.8rem); line-height:1.06; letter-spacing:-.055em; margin:1rem 0 1.5rem; }
.blog-intro>p:last-child { font-size:1.2rem; max-width:600px; line-height:1.7; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.blog-card { background:#fff; border:1px solid #dedfd6; border-radius:18px; padding:2rem; box-shadow:0 3px 8px #173a2f04; transition:transform .22s ease,box-shadow .22s ease; }
.blog-card:hover { transform:translateY(-4px); box-shadow:0 16px 30px #173a2f0c; }
.blog-card h2 { font-size:1.5rem; line-height:1.3; letter-spacing:-.025em; }
.blog-card h2 a { text-decoration:none; }
.blog-card h2 a:hover { text-decoration:underline; text-underline-offset:4px; }
.blog-card p:not(.eyebrow) { color:#525c55; line-height:1.7; }
.blog-card>span { display:block; margin-top:1.8rem; font-size:.88rem; color:#526449; }
.blog-card-image { display:block; width:100%; height:auto; aspect-ratio:3/2; border-radius:10px; margin-bottom:1.4rem; }
.blog-next { margin:4rem 0; padding:3rem 0; border-top:1px solid #d9dcd3; }
.article-breadcrumb { display:flex; gap:.7rem; margin:2rem 0 3rem; font-size:.85rem; color:#58634f; }
.article { max-width:790px; margin:auto; }
.article-header h1 { font-size:clamp(2.3rem,5.5vw,4rem); line-height:1.12; letter-spacing:-.045em; margin:1rem 0 1.5rem; }
.article-deck { font-size:1.15rem; line-height:1.7; color:#525c55; }
.article-byline { font-size:.85rem; color:#636b61; padding:1rem 0; }
.article-cover { margin:1.5rem 0 2rem; }
.article-cover-image { display:block; width:100%; height:auto; border-radius:16px; }
.article-toc { border-block:1px solid #d7dbd0; padding:1.3rem 0; margin:1.6rem 0 2.5rem; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font-size:.88rem; }
.article-toc strong { flex-basis:100%; margin-bottom:.4rem; }
.article-body { font-size:1.04rem; line-height:1.85; color:#303d35; }
.article-body h2 { font-size:1.8rem; line-height:1.3; margin:3rem 0 1rem; letter-spacing:-.025em; scroll-margin-top:110px; }
.article-body h3 { font-size:1.28rem; line-height:1.4; margin:1.8rem 0 .65rem; }
.article-body h4 { font-size:1.07rem; margin:.3rem 0; }
.article-body a { text-underline-offset:4px; overflow-wrap:anywhere; }
.article-body li { padding-left:.3rem; margin-bottom:.65rem; }
.article-disclosure { font-size:.85rem; line-height:1.75; padding:1.1rem 1.4rem; border-left:3px solid #89967b; background:#eeeee7; border-radius:0 10px 10px 0; margin-bottom:2rem; }
.article-source { font-size:.82rem; line-height:1.6; color:#58634f; }
.article-action { font-weight:600; }
.article-action span { font-size:.88rem; font-weight:400; }
.article-table { overflow-x:auto; margin:1.5rem 0 2rem; border:1px solid #d8dcd2; border-radius:12px; }
.article-table table { border-collapse:collapse; width:100%; min-width:490px; font-size:.88rem; }
.article-table caption { text-align:left; padding:1rem; background:#eeeee7; font-weight:600; }
.article-table th,.article-table td { padding:1rem; text-align:left; border-bottom:1px solid #e1e3da; vertical-align:top; }
.article-table th { font-weight:700; }
.article-table tr:last-child td { border-bottom:0; }
.article-role,.article-invitation { background:#fff; border:1px solid #dedfd6; border-radius:14px; padding:1.4rem 1.6rem; margin:1.4rem 0; }
.article-role-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; color:#536846; font-size:.83rem; font-weight:700; }
.article-role h3 { margin-top:.7rem; }
.article-role p:last-child,.article-invitation p:last-child { margin-bottom:0; font-size:.9rem; }
.article-related { margin:4rem 0; padding-top:2.5rem; border-top:1px solid #d8dcd2; }
.article-related .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:760px) { .blog-grid,.article-related .blog-grid { grid-template-columns:1fr; } .blog-card { padding:1.5rem; } .article-body { font-size:1rem; } .article-role,.article-invitation { padding:1.2rem; } }
@media(prefers-reduced-motion:reduce) { .blog-card { transition:none; } .blog-card:hover { transform:none; } }