.blog-page { background: #e8e1d6; color: #2c251f; }
.blog-banner { isolation: isolate; color: #fff; }
.blog-banner .banner-overlay { background: rgba(14,14,13,.56); }
.blog-banner .banner-title h1 { font-size: clamp(46px, 6vw, 108px); line-height: 1.05; overflow-wrap: anywhere; }
.blog-collection { padding: clamp(55px, 5vw, 85px) var(--side-space) clamp(80px, 8vw, 130px); }
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 26px; margin-bottom: 38px; border-bottom: 1px solid #c8bfb1; }
.blog-categories { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-categories a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 23px; border: 1px solid #c8bfb1; border-radius: 30px; color: #605a50; text-decoration: none; font-size: 12px; transition: background .2s ease; }
.blog-categories a i { font-size: 12px; }
.blog-categories a:hover { background: #d9cfbf; }
.blog-categories .is-active { background: #2c2d28; color: #f5f3ee; border-color: #2c2d28; }
.blog-total { flex-shrink: 0; color: #756f64; font-size: 10px; letter-spacing: .12em; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.blog-card { min-width: 0; display: flex; flex-direction: column; padding: 14px; overflow: hidden; border: 1px solid #eee8df; border-radius: 14px; background: #f7f4ef; transition: box-shadow .3s ease; }
.blog-card:hover { box-shadow: 0 12px 30px #302c2612; }
.blog-card-content { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 25px; }
.blog-card-content .blog-card-meta { align-self: stretch; margin-top: 0; }
.blog-card-content h2 { margin-bottom: 28px; }
.blog-card-content .blog-read-more { margin-top: auto; }
.blog-card-image { position: relative; display: block; aspect-ratio: 1.25; overflow: hidden; border-radius: 9px; background: #d5cbbd; }
.blog-card-image > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.blog-card-date { position: absolute; top: 13px; right: 13px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 30px; background: #fffdf5f2; color: #39362e; box-shadow: 0 2px 9px #00000012; font-size: 10px; line-height: 1; }
.blog-card-image:hover img { transform: scale(1.05); }
.blog-card-meta { display: flex; justify-content: space-between; gap: 15px; margin: 22px 0 15px; color: #756f64; font-size: 10px; letter-spacing: .04em; }
.blog-card h2 { margin: 3px 5px 16px; font-size: clamp(19px, 1.45vw, 25px); font-weight: 500; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
.blog-card h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card > p { margin: 18px 0 24px; color: #756f64; font-size: 13px; line-height: 1.8; }
.blog-read-more { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 7px; border-bottom: 1px solid #ada18f; color: #2c251f; text-decoration: none; font-size: 10px; letter-spacing: .1em; }
.blog-read-more i { transition: transform .2s ease; }
.blog-read-more:hover i { transform: translateX(4px); }
.blog-page a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.blog-empty { padding: 40px 0 100px; }
.blog-empty h2 { font-size: 36px; font-weight: 300; }
.blog-empty p { font-size: 14px; color: #756f64; }
.blog-page .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.blog-page .pagination { margin-top: 60px; }
.blog-page .pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.blog-page .page-numbers { display: inline-flex; justify-content: center; align-items: center; min-width: 40px; min-height: 40px; padding: 8px 14px; border: 1px solid #c8bfb1; color: inherit; text-decoration: none; font-size: 12px; }
.blog-page .page-numbers.current { background: #2c2d28; color: #fff; }
.blog-article-banner { min-height: 480px; padding-top: 150px; padding-bottom: 70px; }
.blog-article-banner .banner-title { position: static; transform: none; padding: 0; max-width: 1050px; }
.blog-article-banner .banner-title h1 { margin-top: 25px; font-size: clamp(34px, 4.5vw, 72px); }
.blog-back { color: #fff; text-decoration: none; font-size: 10px; letter-spacing: .1em; }
.blog-article-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: clamp(35px, 5vw, 80px); max-width: 1600px; margin: 0 auto; padding: 65px var(--side-space) 75px; }
.blog-article-content { min-width: 0; }
.blog-article-content .blog-prose > *, .blog-article-content .blog-tags, .blog-article-content .blog-article-end { margin-left: 0; margin-right: 0; }
.blog-sidebar { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); display: grid; gap: 30px; min-width: 0; max-height: calc(100dvh - 48px - var(--wp-admin--admin-bar--height, 0px)); overflow-y: auto; scrollbar-width: thin; }
.blog-sidebar-section { padding: 24px; border: 1px solid #d7cebf; border-radius: 12px; background: #f2ede5; }
.blog-sidebar-section h2 { margin: 0 0 20px; font-size: 23px; font-weight: 400; letter-spacing: -.035em; }
.blog-sidebar-categories { display: grid; gap: 9px; }
.blog-sidebar-categories a { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 6px; color: #605a50; text-decoration: none; font-size: 12px; }
.blog-sidebar-categories a:hover { background: #e8e1d6; }
.blog-sidebar-categories a.is-active { background: #2c2d28; color: #f7f4ef; }
.blog-sidebar-categories small { margin-left: auto; opacity: .65; }
.blog-sidebar-projects { display: grid; gap: 18px; }
.blog-sidebar-project { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.blog-sidebar-project img { width: 72px; height: 80px; flex-shrink: 0; object-fit: cover; border-radius: 7px; }
.blog-sidebar-project > span { min-width: 0; }
.blog-sidebar-project strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.blog-sidebar-project small { display: block; margin-top: 7px; color: #756f64; font-size: 10px; line-height: 1.5; }
.blog-sidebar-project > i { margin-left: auto; font-size: 10px; color: #9b8c74; }
.blog-sidebar-project:hover strong { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1000px) { .blog-article-body { grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; } .blog-sidebar-section { padding: 18px; } }
@media (max-width: 800px) { .blog-article-body { grid-template-columns: minmax(0, 1fr); } .blog-sidebar { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 600px) { .blog-sidebar { grid-template-columns: minmax(0, 1fr); } }
.blog-article-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.blog-article-meta a { color: inherit; text-decoration: none; }
.blog-article-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-article-end, .blog-tags { max-width: 780px; margin-left: auto; margin-right: auto; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-tags a { border: 1px solid #c8bfb1; border-radius: 25px; padding: 7px 14px; color: #605a50; text-decoration: none; font-size: 11px; }
.blog-prose { font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.blog-prose > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.blog-prose p { margin: 0 auto 25px; }
.blog-prose .blog-article-lead { font-size: clamp(19px, 1.65vw, 23px); line-height: 1.75; letter-spacing: -.02em; }
.blog-prose h2, .blog-prose h3, .blog-prose h4 { margin: 48px auto 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; }
.blog-prose h2 { font-size: 32px; }
.blog-prose h3 { font-size: 26px; }
.blog-prose a { color: inherit; text-underline-offset: 4px; }
.blog-prose img, .blog-prose video { max-width: 100%; height: auto; }
.blog-prose iframe { max-width: 100%; }
.blog-prose figure { width: 100%; max-width: 780px; margin: 32px auto; }
.blog-prose figure img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: 12px; }
.blog-prose figcaption { margin-top: 12px; font-size: 12px; line-height: 1.6; color: #756f64; }
.blog-prose blockquote { margin: 30px 0; padding: 15px 25px; border-left: 2px solid #9b8c74; font-size: 21px; }
.blog-prose pre { padding: 20px; overflow-x: auto; background: #dcd3c5; }
.blog-prose table { border-collapse: collapse; width: 100%; }
.blog-prose th, .blog-prose td { padding: 12px; border: 1px solid #c8bfb1; }
.blog-page-links { display: flex; gap: 15px; }
.blog-tags { margin-top: 35px; }
.blog-article-end { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 55px; padding-top: 25px; border-top: 1px solid #c8bfb1; }
.blog-article-end > span { font-size: 12px; color: #756f64; }
.blog-single > .post-navigation { padding: 0 var(--side-space) 70px; }
.blog-single .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 30px; }
.blog-single .post-navigation a { color: inherit; text-decoration: none; }
.blog-single .post-navigation span { display: block; font-size: 9px; letter-spacing: .1em; color: #756f64; }
.blog-single .post-navigation strong { display: block; margin-top: 14px; font-size: 24px; font-weight: 400; }
.blog-single .nav-next { margin-left: auto; text-align: right; }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; gap: 45px; }
    .blog-toolbar { align-items: flex-start; }
    .blog-categories a { padding: 10px 16px; }
    .blog-total { padding-top: 12px; }
    .blog-article-banner { padding-top: 200px; padding-bottom: 55px; }
    .blog-article-body { padding: 45px 22px 60px; }
    .blog-prose { font-size: 15px; }
    .blog-single .post-navigation strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .blog-card-image > img, .blog-read-more i, .blog-categories a { transition: none; } .blog-card-image:hover img { transform: none; } }