.blog-page { background: #f4f5f7; color: #273642; }
.blog-page .s-header { background: #1c2832; }
.blog-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.blog-hero { padding: 18rem 0 7rem; background: #1c2832; color: #fff; }
.blog-hero h1 { color: #fff; font-size: clamp(3.4rem, 4.5vw, 6.4rem); line-height: 1.15; max-width: 22ch; margin: 1.6rem 0 2.8rem; letter-spacing: -0.035em; }
.blog-intro { max-width: 66ch; font-size: 2.1rem; color: #d4dde3; margin-bottom: 0; }
.blog-category { color: #a64e00; font-size: 1.5rem; font-weight: 700; margin: 0 0 1.2rem; }
.blog-hero .blog-category { color: #ffb15d; }
.blog-breadcrumb { margin-bottom: 3rem; font-size: 1.5rem; }
.blog-breadcrumb a, .blog-byline a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.blog-byline { color: #d4dde3; font-size: 1.6rem; margin-bottom: 0; }
.blog-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 6rem; padding-block: 6rem; align-items: start; }
.blog-toc { position: sticky; top: 11rem; }
.blog-toc h2 { font-size: 1.7rem; color: #273642; margin: 0 0 1.6rem; }
.blog-toc ul { list-style: none; padding: 0; margin: 0; }
.blog-toc li { padding: 0; margin: 0 0 1.4rem; font-size: 1.5rem; line-height: 1.5; }
.blog-toc a { color: #344b5c; }
.blog-content { background: #fff; padding: clamp(2.4rem, 4vw, 5rem); min-width: 0; font-size: 1.8rem; line-height: 1.8; }
.blog-content p, .blog-content li { color: #273642; }
.blog-content h2, .blog-list h2, .blog-related h2 { font-size: clamp(2.5rem, 3vw, 3.2rem); color: #172d3d; line-height: 1.3; }
.blog-content h2 { margin: 4.8rem 0 1.6rem; scroll-margin-top: 12rem; }
.blog-content h3 { color: #172d3d; font-size: 2.2rem; margin-top: 3rem; }
.blog-content a, .blog-read { color: #135d85; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.blog-content a:hover, .blog-content a:focus-visible, .blog-read:hover { color: #943e00; }
.blog-answer { font-size: 2rem; font-weight: 600; padding-bottom: 2.6rem; border-bottom: 3px solid #f99e36; }
.blog-content ul, .blog-content ol { padding-left: 2.4rem; margin-left: 0; }
.blog-content li { padding-left: .4rem; }
.blog-table-wrap { overflow-x: auto; margin-block: 2.5rem; }
.blog-content table { width: 100%; font-size: 1.6rem; margin: 0; }
.blog-content th, .blog-content td { text-align: left; color: #273642; border-color: #d6dfe5; padding: 1.2rem; vertical-align: top; }
.blog-content th { background: #edf2f5; }
.blog-example { padding: 2rem 2.4rem; border-left: 3px solid #256782; background: #f0f5f8; }
.blog-cta { border-top: 1px solid #d6dfe5; margin-top: 4rem; padding-top: 1rem; }
.blog-content .blog-button { display: inline-block; color: #172d3d; background: #f99e36; border-radius: 3px; padding: 1.2rem 2rem; font-weight: 700; text-decoration: none; }
.blog-content .blog-button:hover { color: #172d3d; background: #ffb15d; }
.blog-list, .blog-related { padding-block: 6rem 8rem; }
.blog-list h2, .blog-related h2 { margin: 0 0 3rem; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
.blog-card { padding: 3rem; background: #fff; border-top: 3px solid #f99e36; }
.blog-card h3 { font-size: 2.5rem; line-height: 1.4; margin: 0 0 1.8rem; }
.blog-card h3 a { color: #172d3d; }
.blog-card h3 a:hover { text-decoration: underline; }
.blog-card time { display: block; font-size: 1.5rem; color: #52606b; margin-bottom: 1.6rem; }
.blog-card p:not(.blog-category) { color: #344b5c; font-size: 1.7rem; }
.blog-page a:focus-visible { outline: 3px solid #f99e36; outline-offset: 4px; }
.blog-skip { position: absolute; left: 2rem; top: -12rem; padding: 1rem 2rem; background: #fff; color: #172d3d; z-index: 1000; }
.blog-skip:focus { top: 1rem; color: #172d3d; }
.blog-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.blog-article-intro { margin-bottom: 2.8rem; }
.blog-local-guide .blog-content { text-align: left; }
.blog-local-guide .blog-content > h2 { border-top: 1px solid #d6dfe5; padding-top: 3.2rem; }
.blog-local-guide .blog-content > h2:first-of-type { border-top: 0; padding-top: 0; }
.blog-local-guide .blog-content li::marker { color: #a64e00; }
.blog-local-guide .blog-note { background: #fff5e8; border-left: 3px solid #f99e36; padding: 2rem 2.4rem; }
.blog-local-guide .blog-note strong { color: #864100; }
.blog-local-guide .blog-step { color: #172d3d; border-left: 3px solid #256782; padding: 1.2rem 1.8rem; background: #edf4f8; margin-top: 3.2rem; }
.blog-local-guide .blog-table-wrap table { min-width: 54rem; }
.blog-local-guide .blog-content th { background: #1c2832; color: #fff; }
.blog-local-guide .blog-content tbody tr:nth-child(even) { background: #f0f5f8; }
.blog-local-guide .blog-table-wrap:focus-visible { outline: 3px solid #f99e36; outline-offset: 4px; }
.blog-local-guide .blog-toc { max-height: calc(100vh - 14rem); overflow-y: auto; padding: .5rem; }
@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; gap: 3rem; }
    .blog-toc { position: static; }
    .blog-local-guide .blog-toc { max-height: none; overflow: visible; }
    .blog-toc ul { columns: 2; column-gap: 3rem; }
    .blog-toc li { break-inside: avoid; }
    .blog-hero { padding-top: 14rem; }
}
@media (max-width: 600px) {
    .blog-container { width: calc(100% - 32px); }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-toc ul { columns: 1; }
    .blog-content { padding: 2.4rem 1.8rem; }
    .blog-hero { padding-bottom: 4.5rem; }
    .blog-layout { padding-top: 3.5rem; }
    .blog-card { padding: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-page *, .blog-page *::before, .blog-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}