/* Blog-only styles; shared brand, navigation and footer remain in style.css. */
.blog-document { scroll-behavior: auto; }
.blog-page { --blog-muted: #b2bfd0; }
.blog-page a:focus-visible, .blog-page button:focus-visible {
    outline: 3px solid var(--color-accent); outline-offset: 5px; border-radius: 3px;
}
.blog-skip { position: fixed; top: -6rem; left: 1rem; z-index: 2000; padding: .75rem 1rem; background: var(--color-accent); color: var(--color-primary); }
.blog-skip:focus { top: 1rem; }
.blog-main { padding: calc(var(--header-height) + 2rem) 0 5rem; }
.blog-breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; color: var(--blog-muted); font-size: .875rem; margin-bottom: 2.5rem; }
.blog-breadcrumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--blog-muted); }
.blog-breadcrumbs a { text-decoration: underline; text-underline-offset: .2em; }
.blog-hero { max-width: 850px; margin-bottom: 3rem; }
.blog-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; }
.blog-page h1 { color: var(--color-white); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.blog-lead { font-size: 1.125rem; line-height: 1.8; color: #c5d0df; margin-top: 1.5rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.blog-card { display: flex; flex-direction: column; min-width: 0; padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.blog-card h2 { color: var(--color-white); font-size: 1.4rem; line-height: 1.4; margin-bottom: 1rem; overflow-wrap: anywhere; }
.blog-card > p:not(.blog-kicker) { color: var(--blog-muted); margin-bottom: 1.5rem; }
.blog-card > a { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.blog-layout { display: grid; grid-template-columns: minmax(0, 740px) minmax(200px, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.blog-prose { min-width: 0; font-size: 1.0625rem; line-height: 1.85; overflow-wrap: anywhere; }
.blog-prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.35; color: var(--color-white); margin: 2.5rem 0 1rem; scroll-margin-top: 6.5rem; }
.blog-prose h2:first-child { margin-top: 0; }
.blog-prose h3 { color: var(--color-white); font-size: 1.2rem; margin: 1.5rem 0 .65rem; }
.blog-prose p, .blog-prose ul, .blog-prose ol { margin-bottom: 1.25rem; }
.blog-prose ul, .blog-prose ol { padding-left: 1.4rem; }
.blog-prose li { margin-bottom: .6rem; }
.blog-prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; }
.blog-prose strong { color: var(--color-white); }
.blog-toc { grid-column: 2; grid-row: 1; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.blog-toc h2 { color: var(--color-white); font-size: 1rem; margin-bottom: 1rem; }
.blog-toc ol { padding-left: 1.2rem; }
.blog-toc li { color: var(--blog-muted); margin-bottom: .55rem; }
.blog-toc a { display: inline-block; vertical-align: top; min-height: 44px; padding: .4rem 0; color: var(--blog-muted); line-height: 1.5; text-decoration: underline; text-underline-offset: .2em; }
.blog-toc a:hover { color: var(--color-accent); }
.blog-callout { padding: 1.5rem; margin: 2rem 0; border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface); }
.blog-callout h2 { margin-top: 0; }
.blog-back { display: inline-flex; align-items: center; min-height: 44px; }
.blog-page .nav__link:not(.nav__link--lang) { display: inline-flex; align-items: center; min-height: 44px; }
.blog-page .footer__nav a { min-height: 32px; display: inline-flex; align-items: center; }
.blog-page .nav__menu { gap: 1.5rem; }
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-layout { grid-template-columns: minmax(0, 1fr); }
    .blog-toc { grid-column: 1; grid-row: auto; margin-bottom: 1rem; }
    .blog-page .nav__menu { gap: 1rem; }
}
@media (max-width: 768px) {
    .blog-page .container { padding-inline: 1.25rem; }
    .blog-main { padding-top: calc(var(--header-height) + 1.5rem); }
    .blog-card { padding: 1.5rem; }
    .blog-breadcrumbs { margin-bottom: 2rem; }
    .blog-page .nav__menu { gap: .5rem; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; padding: 1rem 2rem; }
}
@media (prefers-reduced-motion: reduce) { .blog-page { scroll-behavior: auto; } .blog-page *, .blog-page *::before, .blog-page *::after { transition: none; } }