.qnein-blog-page { color: #2b2523; }
.qnein-blog-hero { max-width: 760px; margin: 0 auto; padding: 96px 24px 72px; text-align: center; }
.qnein-blog-kicker { margin: 0 0 18px; color: #a87566; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.qnein-blog-hero h1 { margin: 0 0 20px; font-family: Georgia, serif; font-size: clamp(42px, 6vw, 76px); font-weight: 400; line-height: 1; }
.qnein-blog-hero > p:last-child { max-width: 560px; margin: 0 auto; color: #746965; font-size: 16px; line-height: 1.7; }
.qnein-blog-categories { display: flex; align-items: center; gap: 24px; max-width: 1240px; margin: 0 auto 42px; padding: 0 24px; }
.qnein-blog-categories-label { color: #8a7972; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.qnein-blog-categories > div { display: flex; flex-wrap: wrap; gap: 8px; }
.qnein-blog-categories a { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; border: 1px solid #ded2cc; border-radius: 999px; color: #6e625e; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.qnein-blog-categories a:hover, .qnein-blog-categories a.is-active { border-color: #2b2523; background: #2b2523; color: #fff; }
.qnein-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; }
.qnein-blog-card { overflow: hidden; background: #f7f1ed; }
.qnein-blog-card-media { display: flex; aspect-ratio: 1.25; align-items: center; justify-content: center; overflow: hidden; background: #e9dcd5; color: #a87566; font-family: Georgia, serif; font-size: 30px; text-decoration: none; }
.qnein-blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.qnein-blog-card-copy { padding: 28px 28px 32px; }
.qnein-blog-date { margin: 0 0 12px; color: #a87566; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.qnein-blog-card h2 { margin: 0 0 12px; font-family: Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1.1; }
.qnein-blog-card h2 a { color: inherit; text-decoration: none; }
.qnein-blog-card-copy > p:not(.qnein-blog-date) { color: #746965; font-size: 14px; line-height: 1.7; }
.qnein-blog-read-more { display: inline-block; margin-top: 8px; color: #2b2523; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.qnein-blog-empty { grid-column: 1 / -1; padding: 60px 20px; color: #746965; text-align: center; }
.qnein-blog-empty { max-width: 980px; margin: 0 auto; padding: 82px 24px 96px; background: #f7f1ed; }
.qnein-blog-empty-mark { display: grid; width: 64px; height: 64px; margin: 0 auto 28px; place-items: center; border: 1px solid #b88a7c; border-radius: 50%; color: #a87566; font-family: Georgia, serif; font-size: 22px; }
.qnein-blog-empty h2 { margin: 0 0 18px; color: #2b2523; font-family: Georgia, serif; font-size: clamp(38px, 5vw, 60px); font-weight: 400; line-height: 1; }
.qnein-blog-empty h2 em { color: #a87566; font-weight: 400; }
.qnein-blog-empty > p:not(.qnein-blog-kicker) { max-width: 500px; margin: 0 auto; font-size: 15px; line-height: 1.75; }
.qnein-blog-empty-link { display: inline-flex; gap: 10px; margin-top: 30px; color: #2b2523; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
@media (max-width: 760px) { .qnein-blog-hero { padding: 70px 22px 52px; } .qnein-blog-categories { display: block; margin-bottom: 30px; overflow: hidden; padding: 0 20px; } .qnein-blog-categories-label { display: block; margin-bottom: 12px; } .qnein-blog-categories > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; } .qnein-blog-categories > div::-webkit-scrollbar { display: none; } .qnein-blog-categories a { flex: 0 0 auto; } .qnein-blog-grid { grid-template-columns: 1fr; padding: 0 20px 70px; } .qnein-blog-empty { padding: 60px 18px 70px; } }