.blog-body { background: radial-gradient(ellipse at 5% 0%, #341125 0, transparent 40%), var(--bg); }
.blog-header { gap: 1.5rem; }
.blog-header nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.blog-body a { color: #ffbf71; text-underline-offset: .2em; }
.blog-body a:hover { color: #fff1df; }
.blog-body .logo { color: var(--text-main); }
.blog-main { width: min(1200px, calc(100% - 3rem)); margin: 0 auto; padding-top: 100px; position: relative; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 999; padding: .75rem; background: #171526; }
.skip-link:focus { top: 1rem; }
.blog-body :focus-visible { outline: 3px solid #ffbf71; outline-offset: 4px; }
.blog-intro { max-width: 880px; padding: 5rem 0 3rem; }
.eyebrow { color: #ffbf71; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; margin-bottom: 1rem; }
.blog-main h1 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); line-height: 1.13; letter-spacing: -.035em; margin-bottom: 1.5rem; }
.blog-main h2 { font-size: 1.7rem; line-height: 1.3; margin-bottom: 1rem; letter-spacing: -.02em; }
.blog-main h3 { font-size: 1.15rem; line-height: 1.45; margin: 1.6rem 0 .65rem; }
.blog-main p { margin-bottom: 1.25rem; color: #dcc8c3; }
.category-links { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 2rem; }
.category-links a { padding: .45rem .85rem; border: 1px solid #704136; border-radius: 2rem; font-size: .85rem; text-decoration: none; }
.blog-category { margin-bottom: 4rem; scroll-margin-top: 7rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.blog-card { background: linear-gradient(150deg, #241526, #131321); border: 1px solid #48283c; padding: 1.5rem; border-radius: 14px; }
.blog-card h3 { margin-top: 0; }
.blog-card h3 a { text-decoration: none; color: #fff0e7; }
.blog-card span { font-size: .8rem; color: #c8a090; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .85rem; padding-top: 2rem; }
.article-heading { max-width: 860px; padding: 3rem 0 2rem; }
.article-heading > p:last-child { font-size: 1.2rem; line-height: 1.75; }
.article-meta { font-size: .85rem; }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 3rem; align-items: start; }
.article-toc { position: sticky; top: 100px; border-left: 2px solid #7c3f36; padding: .5rem 0 .5rem 1.25rem; }
.article-toc h2 { font-size: 1rem; }
.article-toc ol { list-style: none; padding: 0; }
.article-toc li { margin-bottom: .8rem; line-height: 1.4; }
.article-toc a { font-size: .85rem; text-decoration: none; }
.article-copy { font-size: 1.05rem; line-height: 1.85; min-width: 0; }
.article-copy section { margin-bottom: 2.8rem; scroll-margin-top: 7rem; }
.article-copy ol, .article-copy ul { padding-left: 1.4rem; margin-bottom: 1.5rem; }
.article-copy li { margin-bottom: .85rem; color: #dcc8c3; }
.product-note { background: #231523; border: 1px solid #74412f; border-radius: 12px; padding: 1.6rem; margin: 3rem 0; }
.product-note .btn { color: #fff; text-decoration: none; margin: 0 .75rem .75rem 0; }
.sources { font-size: .9rem; border-top: 1px solid #48283c; padding-top: 2rem; }
.related { margin: 3rem 0 5rem; border-top: 1px solid #48283c; padding-top: 2rem; }
.related ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: 1.5rem; margin: 1.5rem 0; }
.related li { padding: 1.2rem; background: #1b1424; border-radius: 10px; }
.related li p { font-size: .9rem; margin: .8rem 0 0; }
@media (max-width: 950px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-layout { grid-template-columns: 1fr; gap: 1rem; } .article-toc { position: static; max-width: 760px; } }
@media (max-width: 600px) { .blog-header { padding: 1rem; align-items: flex-start; flex-wrap: wrap; } .blog-header nav { gap: 1.1rem; font-size: .9rem; } .blog-main { width: calc(100% - 2rem); } .blog-grid, .related ul { grid-template-columns: 1fr; } .blog-intro { padding-top: 3rem; } .article-heading { padding-top: 2rem; } .article-copy { font-size: 1rem; } .product-note { padding: 1.1rem; } }