.blog-main { max-width: 1160px; padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px); margin: auto; }
.blog-main h1 { max-width: 19ch; margin: 0 0 16px; font-size: clamp(36px, 5vw, 72px); line-height: 1.06; letter-spacing: -.045em; }
.blog-main p { color: var(--quiet); line-height: 1.7; }
.blog-intro { padding-block: 20px 32px; }
.blog-intro p { max-width: 62ch; font-size: 18px; }
.topic-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.topic-nav a { padding: 10px 16px; border: 1px solid var(--panel-line); border-radius: 30px; font-size: 14px; }
.blog-section { border-top: 1px solid var(--line); padding: 24px 0 40px; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.post-card { display: grid; grid-template-columns: minmax(90px, .65fr) 1.5fr; border: 1px solid var(--panel-line); border-radius: 16px; overflow: hidden; background: #121610; }
.post-card img { width: 100%; height: 100%; max-height: 255px; object-fit: contain; background: #242923; }
.post-card div { padding: 18px; }
.post-card h3 { margin: 0; font-size: 21px; line-height: 1.23; }
.post-card p { font-size: 14px; margin: 8px 0 0; }
.post-card:hover, .topic-nav a:hover { border-color: var(--yellow); }
.blog-article { max-width: 780px; margin: auto; }
.blog-crumb, .article-byline, .article-figure figcaption { color: var(--quiet); font-size: 14px; }
.blog-crumb { display: flex; gap: 12px; margin-bottom: 22px; }
.article-figure { margin: 24px 0 30px; }
.image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.image-pair div { position: relative; overflow: hidden; background: #242923; border-radius: 14px; }
.article-figure img { display: block; width: 100%; height: clamp(170px, 31vw, 300px); object-fit: contain; }
.image-pair span { position: absolute; bottom: 8px; left: 8px; padding: 2px 8px; border-radius: 4px; background: #131612ed; color: white; font-size: 12px; }
.chair-figure img { background: #eae9e3; border-radius: 14px; }
.article-figure figcaption { margin-top: 8px; }
.article-copy { max-width: 68ch; font-size: 17px; }
.article-copy h2 { margin: 36px 0 12px; font-size: clamp(23px, 3vw, 32px); }
.article-copy blockquote { margin: 16px 0; padding: 20px 24px; border-left: 3px solid var(--yellow); background: #181d15; }
.blog-article a { text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-block; margin-top: 30px; }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .post-card div { padding: 12px; } .post-card h3 { font-size: 18px; } .blog-crumb { font-size: 13px; } }