/* ===== Blog listing ===== */
.blog-hero { background: linear-gradient(180deg, var(--cream-deep), var(--cream)); padding: 42px 0 32px; border-bottom: 1px solid var(--line); }
.blog-hero h1 { font-size: clamp(2.4rem,5vw,3.6rem); color: var(--pine); margin: 12px 0 14px; }
.blog-hero p { font-size: 1.1rem; color: var(--ink-soft); max-width: 44em; line-height: 1.6; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 26px; padding: 32px 0; }
.post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post-card .pthumb { height: 150px; background: linear-gradient(135deg, var(--pine), var(--pine-soft)); position: relative; }
.post-card .pthumb.c2 { background: linear-gradient(135deg, #b5673a, var(--copper-soft)); }
.post-card .pthumb.c3 { background: linear-gradient(135deg, #4f6f61, var(--sage)); }
.post-card .pthumb span { position: absolute; bottom: 14px; left: 18px; font-family: var(--serif); font-style: italic; color: rgba(246,241,231,.9); font-size: 1.1rem; }
.post-card .pbody { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card .cat { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; }
.post-card h3 { font-size: 1.3rem; color: var(--pine); line-height: 1.2; margin-bottom: 10px; }
.post-card .excerpt { font-size: .94rem; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.post-card .read { margin-top: 16px; font-weight: 600; font-size: .9rem; color: var(--pine); }
.post-card .pmeta { font-size: .78rem; color: var(--sage); margin-top: 6px; }
.post-card.soon { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: transparent; min-height: 240px; color: var(--sage); }
.post-card.soon:hover { transform: none; box-shadow: none; }

/* ===== Article ===== */
.article-hero { padding: 40px 0 24px; border-bottom: 1px solid var(--line); background: var(--cream); }
.article-hero .wrap { max-width: 760px; }
.article-cat { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.article-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); color: var(--pine); margin: 14px 0 16px; line-height: 1.1; }
.article-dek { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.5; font-family: var(--serif); font-style: italic; }
.article-meta { display: flex; gap: 16px; align-items: center; margin-top: 24px; font-size: .84rem; color: var(--sage); flex-wrap: wrap; }
.article-meta .by { color: var(--ink-soft); font-weight: 600; }

.article-body { max-width: 720px; margin: 0 auto; padding: 30px 0 10px; }
.article-body > p { font-size: 1.08rem; color: var(--ink); line-height: 1.75; margin-bottom: 22px; }
.article-body h2 { font-size: 1.6rem; color: var(--pine); margin: 32px 0 12px; }
.article-body h3 { font-size: 1.2rem; color: var(--pine-soft); margin: 28px 0 10px; }
.article-body a { color: var(--copper); font-weight: 600; }
.article-body ul { margin: 0 0 22px 4px; list-style: none; }
.article-body li { font-size: 1.06rem; color: var(--ink); line-height: 1.7; margin-bottom: 12px; padding-left: 22px; position: relative; }
.article-body li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }

.pullquote { font-family: var(--serif); font-size: 1.5rem; line-height: 1.32; color: var(--pine); border-left: 4px solid var(--copper); padding: 6px 0 6px 26px; margin: 34px 0; }
.caveat { background: var(--cream-deep); border-left: 4px solid var(--copper); border-radius: 0 var(--r) var(--r) 0; padding: 20px 24px; margin: 30px 0; }
.caveat b { color: var(--pine); }
.caveat p { margin: 6px 0 0; font-size: .98rem; color: var(--ink-soft); line-height: 1.6; }

.article-cta { background: linear-gradient(135deg, var(--pine), var(--pine-soft)); border-radius: var(--r-lg); padding: 38px 36px; text-align: center; margin: 36px auto 0; max-width: 720px; box-shadow: var(--shadow-lg); }
.article-cta h3 { font-family: var(--serif); color: var(--cream); font-size: 1.7rem; margin-bottom: 10px; }
.article-cta p { color: rgba(246,241,231,.82); margin: 0 auto 22px; max-width: 34em; }

.article-foot { max-width: 720px; margin: 30px auto 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 26px; }
.article-foot a { font-weight: 600; color: var(--pine); }
.article-foot a:hover { color: var(--copper); }

@media (max-width: 640px){ .article-body > p, .article-body li { font-size: 1rem; } }

/* ===== Article FAQ (SEO) ===== */
.article-faq { max-width: 720px; margin: 8px auto 0; }
.article-faq h2 { font-size: 1.6rem; color: var(--pine); margin: 34px 0 10px; }
.article-faq h3 { font-size: 1.12rem; color: var(--pine-soft); margin: 22px 0 6px; }
.article-faq p { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.7; }
.article-faq a { color: var(--copper); font-weight: 600; }


/* ===== Blog filter / search ===== */
.blog-filter { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin: 4px 0 32px; }
.filter-pills { display:flex; flex-wrap:wrap; gap:8px; }
.fpill { font-family:var(--sans); font-size:.88rem; color:var(--pine); background:var(--paper); border:1px solid var(--line); padding:8px 15px; border-radius:100px; cursor:pointer; transition:all .15s; line-height:1; }
.fpill span { opacity:.55; font-size:.8em; margin-left:3px; }
.fpill:hover { border-color:var(--pine-soft); }
.fpill.active { background:var(--pine); color:var(--cream); border-color:var(--pine); }
.fpill.active span { opacity:.7; }
.filter-search input { font-family:var(--sans); font-size:.95rem; padding:10px 18px; border:1px solid var(--line); border-radius:100px; background:var(--paper); min-width:240px; color:var(--ink); }
.filter-search input:focus { outline:none; border-color:var(--copper); box-shadow:0 0 0 3px rgba(194,112,61,.12); }
.no-results { text-align:center; color:var(--ink-soft); padding:50px 0; font-family:var(--sans); font-size:1.05rem; }
@media (max-width:640px){ .blog-filter{flex-direction:column;align-items:stretch;} .filter-search input{min-width:0;width:100%;} }