.blog-page { background: var(--paper); color: var(--ink); }
.blog-page .site-header { color: var(--white); }
.blog-page .wordmark img { display: block; width: 218px; max-width: 52vw; height: auto; }
.blog-page .site-header nav [aria-current="page"] { color: var(--orange); }
.blog-shell { max-width: 1280px; margin: 0 auto; padding: 155px 24px 0; }
.blog-intro { padding-bottom: 55px; }
.blog-intro h1 { margin: 0; font-size: clamp(3.5rem, 8.3vw, 7.5rem); line-height: 1.03; letter-spacing: -.065em; text-align: left; text-wrap: initial; }
.blog-intro h1 span { color: #d77d00; }
.blog-intro-bottom { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-top: 36px; }
.blog-intro-bottom p { max-width: 610px; margin: 0; font-size: 1.2rem; line-height: 1.65; }
.template-label { border-left: 2px solid #d77d00; padding-left: 15px; color: #617183; font-size: .875rem; line-height: 1.6; }
.blog-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 22px; padding: 25px 0; border-top: 1px solid var(--dark-line); }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-filters button { padding: 10px 15px; color: #4d6072; background: none; border: 1px solid var(--dark-line); border-radius: 3px; cursor: pointer; }
.blog-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: white; }
.blog-search input { width: 230px; max-width: 100%; padding: 12px 14px; border: 1px solid var(--dark-line); border-radius: 3px; background: white; font: inherit; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.blog-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card { min-width: 0; padding: 28px; border: 1px solid var(--dark-line); background: white; }
.blog-card[hidden] { display: none; }
.blog-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 38px; align-items: center; padding: 28px; }
.blog-card-image { display: block; border: 1px solid var(--dark-line); overflow: hidden; }
.blog-card-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.blog-card-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .75rem; line-height: 1.4; color: #69798a; }
.blog-card-meta span:first-child { color: #a96000; font-weight: 700; }
.blog-card h2 { margin: 24px 0 18px; font-family: Onest, sans-serif; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.17; letter-spacing: -.04em; text-align: left; text-wrap: initial; }
.blog-featured h2 { font-size: clamp(2rem, 3.5vw, 3.3rem); }
.blog-card p { margin: 0 0 24px; color: #52667a; line-height: 1.7; }
.blog-read { display: inline-block; padding-bottom: 5px; border-bottom: 2px solid var(--orange); font-weight: 650; }
.blog-read:hover, .blog-card h2 a:hover { color: #a96000; }
.blog-status { display: block; padding-top: 18px; border-top: 1px solid var(--dark-line); color: #6d7c8c; font-size: .875rem; }
.blog-planned { display: flex; flex-direction: column; }
.blog-planned .blog-status { margin-top: auto; }
.blog-empty { padding: 40px 0; color: #52667a; }
.blog-contact { padding: 70px 0 85px; }
.blog-contact h2 { max-width: 800px; margin: 0 0 28px; font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.12; letter-spacing: -.05em; }
.blog-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 28px max(24px, calc((100vw - 1232px) / 2)); background: var(--ink); color: #a6b7c7; font-size: .9rem; }
.blog-footer p { margin: 0 auto 0 0; }
.blog-page :focus-visible { outline: 2px solid #b56700; outline-offset: 4px; }
.article-shell { max-width: 1232px; }
.article-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; color: #62778a; font-size: .875rem; }
.article-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.article-header { max-width: 930px; }
.article-header h1 { margin: 20px 0 26px; font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 1.08; letter-spacing: -.055em; }
.article-lead { max-width: 800px; font-size: 1.25rem; line-height: 1.65; color: #42586c; }
.article-author { display: flex; flex-wrap: wrap; gap: 14px; padding: 20px 0 30px; font-size: .9rem; }
.article-author span { color: #62778a; }
.article-layout { display: grid; grid-template-columns: minmax(0, 790px) minmax(220px, 1fr); align-items: start; gap: 70px; margin-top: 15px; }
.article-content { font-size: 1.1rem; line-height: 1.8; }
.article-content h2 { margin: 48px 0 18px; font-family: Onest, sans-serif; font-size: 2rem; line-height: 1.25; letter-spacing: -.03em; }
.article-content h3 { font-family: Onest, sans-serif; font-size: 1.35rem; }
.article-content > p { margin: 20px 0; }
.article-content ul, .article-content ol { padding-left: 26px; }
.article-content li { padding-left: 5px; margin: 9px 0; }
.article-content figure { margin: 35px 0; }
.article-content figure img { display: block; width: 100%; height: auto; border: 1px solid var(--dark-line); }
.article-content figcaption { margin-top: 10px; font-size: .875rem; color: #65788b; line-height: 1.55; }
.article-note { margin: 30px 0; padding: 22px 25px; border-left: 3px solid var(--orange); background: white; }
.article-note p { margin: 8px 0 0; }
.article-toc { position: sticky; top: 110px; padding: 22px 0; border-top: 2px solid var(--ink); font-size: .9rem; line-height: 1.5; }
.article-toc > strong { display: block; margin-bottom: 18px; }
.article-toc a { display: block; margin: 15px 0; color: #52667a; }
.article-toc a:hover { color: #a96000; }
.article-end { padding: 32px; margin-top: 45px; background: var(--ink); color: white; }
.article-end h2 { margin-top: 0; }
.article-end p { color: #adbece; }
@media (max-width: 950px) { .blog-cards { grid-template-columns: 1fr 1fr; } .blog-featured { grid-template-columns: 1fr; gap: 22px; } .article-layout { grid-template-columns: 1fr; gap: 10px; } .article-toc { grid-row: 1; position: static; } }
@media (max-width: 720px) { .blog-shell { padding: 112px 20px 0; } .blog-intro h1 { font-size: clamp(3rem, 13vw, 5rem); } .blog-intro-bottom { display: block; } .template-label { display: block; margin-top: 24px; } .blog-cards { grid-template-columns: 1fr; } .blog-card { padding: 22px; } .blog-search, .blog-search input { width: 100%; } .blog-contact { padding-bottom: 95px; } .article-header h1 { font-size: clamp(2.3rem, 9vw, 4rem); } .article-content { font-size: 1rem; } .article-content h2 { font-size: 1.65rem; } }