/* Blog: list (home.php, category.php, tag.php) and posts (single.php). Loaded on those pages only. */

#page.blog,#page.bpost{padding-top:0}
.blog-kick{color:var(--brand);font:700 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}

/* Covers: the featured image, or a drawn cover for posts without one */
.bcov{position:relative;aspect-ratio:3/2;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#1f5a38,#0f2a1d)}
.bcov::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.18) 0 18%,transparent 19%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.12) 0 24%,transparent 25%)}
.bcov.t2{background:linear-gradient(135deg,#2f6f4a,#a77a10)}
.bcov.t3{background:linear-gradient(135deg,#123a2a,#2b8a5a)}
.bcov.t4{background:linear-gradient(135deg,#3b3a1a,#1f5a38)}
.bcov.t5{background:linear-gradient(135deg,#0f2a1d,#4a6b2a)}
.bcov.t6{background:linear-gradient(135deg,#5a3d12,#1f5a38)}
.bcov-e{position:relative;font-size:clamp(46px,7vw,84px);line-height:1}
.bcov-c{position:absolute;left:14px;bottom:12px;background:rgba(255,255,255,.92);color:var(--brand-d);font:700 12px var(--f-body);padding:5px 10px;border-radius:999px}
.bcov.has-img{background:#0f2a1d;display:block}
.bcov.has-img::before{display:none}
.bcov.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}

/* Photo banner on the blog list */
.bhero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#0f2a1d,#1f5a38);color:#fff;min-height:clamp(320px,38vw,460px);display:flex;align-items:center}
.bhero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:-2}
.bhero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,22,14,.94) 0%,rgba(8,22,14,.78) 38%,rgba(8,22,14,.25) 72%,rgba(8,22,14,.1) 100%)}
.bhero-in{width:100%;padding-top:44px;padding-bottom:52px}
.bhero .crumb,.bp-hero .crumb{color:rgba(255,255,255,.75)}
.bhero .crumb a,.bp-hero .crumb a{color:#fff}
.bhero .blog-kick{color:var(--gold);margin-top:22px}
.bhero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;max-width:14ch;line-height:1.02}
.bhero-sub{max-width:52ch;margin-top:16px;font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.86)}

/* Topic tabs */
.btabs{background:var(--surface);border-bottom:1px solid var(--line)}
.btabs .wrap{display:flex;align-items:center;gap:6px 28px;overflow-x:auto;scrollbar-width:none}
.btabs .wrap::-webkit-scrollbar{display:none}
.btabs-l{color:var(--muted);font-size:14px;flex:none}
.btabs a{flex:none;position:relative;padding:18px 0;font-weight:600;color:#3d5145;font-size:15px}
.btabs a:hover{color:var(--brand)}
.btabs a[aria-current]{color:var(--brand)}
.btabs a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}

/* Cards */
.blog-body{padding-top:40px}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.bcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,38,26,.12)}
.bcard:hover .bcov.has-img img{transform:scale(1.06)}
.bcard-ph{display:block;overflow:hidden}
.bcard-b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcat{align-self:flex-start;color:var(--brand);font:700 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.bcat:hover{text-decoration:underline}
.bcard h2{font-size:21px;margin:0;line-height:1.22;font-weight:800}
.bcard h2 a:hover{color:var(--brand)}
.bcard p{color:var(--muted);font-size:15px;margin:0;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard-f{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.bmore{color:var(--brand);font-weight:700}
.bmore span{display:inline-block;transition:transform .2s}
.bcard:hover .bmore span{transform:translateX(4px)}
.bcard.big{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.bcard.big .bcov{height:100%;min-height:380px;aspect-ratio:auto}
.bcard.big .bcard-b{padding:clamp(24px,3.4vw,44px);justify-content:center}
.bcard.big h2{font-size:clamp(26px,2.8vw,36px)}
.bcard.big p{-webkit-line-clamp:4;font-size:16px}
.bcard.big .bcard-f{margin-top:12px}
.blog-pg{margin-top:30px}
.blog-pg .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.blog-pg .page-numbers{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:700}
.blog-pg .page-numbers.current{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.blog-cta{margin-top:52px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:radial-gradient(circle at 90% 10%,rgba(240,180,41,.22),transparent 40%),linear-gradient(120deg,#0f2a1d,#1f5a38);color:#fff;border-radius:22px;padding:34px 38px}
.blog-cta .blog-kick{color:var(--gold)}
.blog-cta h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 8px}
.blog-cta p{color:#cfe0d4;margin:0;max-width:58ch}
.blog-cta .btn{flex:none}

/* Post hero */
.bp-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#0f2a1d,#1f5a38);color:#fff;min-height:clamp(380px,42vw,540px);display:flex;align-items:flex-end}
.bp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bp-hero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,22,14,.35) 0%,rgba(8,22,14,.2) 30%,rgba(8,22,14,.88) 82%,rgba(8,22,14,.95) 100%),linear-gradient(90deg,rgba(8,22,14,.55),transparent 70%)}
.bp-hero-in{width:100%;padding-top:28px;padding-bottom:40px}
.bp-hero .crumb{margin-bottom:auto}
.bp-hero .bcat{display:inline-block;margin-top:clamp(60px,10vw,150px);background:var(--gold);color:#1a1300;padding:6px 12px;border-radius:999px;letter-spacing:.1em}
.bp-hero .bcat:hover{text-decoration:none;filter:brightness(1.06)}
.bp-hero h1{font-size:clamp(32px,4.6vw,56px);font-weight:800;line-height:1.05;margin-top:14px;max-width:20ch}
.bp-lead{font-size:clamp(16px,1.7vw,20px);color:rgba(255,255,255,.88);margin-top:14px;max-width:62ch;line-height:1.5}
.bp-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:14px;color:rgba(255,255,255,.78)}
.bp-meta span+span::before{content:"\2022";margin-right:18px;opacity:.6}

/* Post body */
.bp-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;margin-top:44px;align-items:start}
.bp-side{position:sticky;top:calc(var(--navh,52px) + 16px);display:grid;gap:14px}
.bp-toc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.bp-toc summary{font:700 15px var(--f-head);cursor:pointer;list-style:none}
.bp-toc summary::-webkit-details-marker{display:none}
.bp-toc ol{margin:10px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14px}
.bp-toc a{color:var(--ink);font-weight:500}
.bp-toc a:hover{color:var(--brand);font-weight:700}
.bp-shop{background:linear-gradient(140deg,#fff8e6,#fdeec4);border:1px solid #f3dca0;border-radius:16px;padding:18px}
.bp-shop b{font-family:var(--f-head);font-size:17px}
.bp-shop p{font-size:14px;color:#5a4a1a;margin:6px 0 12px}
.bp-shop .btn{padding:10px 18px;font-size:14px}
.bp-body{max-width:760px;font-size:17.5px;line-height:1.78}
.bp-body>*+*{margin-top:18px}
.bp-body>p:first-child{font-size:19px;line-height:1.65}
.bp-body h2{font-size:clamp(25px,2.8vw,32px);margin-top:48px!important;scroll-margin-top:calc(var(--navh,52px) + 14px)}
.bp-body h3{font-size:20px;margin-top:28px!important}
.bp-body li+li{margin-top:6px}
.bp-body strong{color:var(--brand-d)}
.bp-body .le-fig{margin:30px 0 8px!important}
.bp-body .le-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:0 14px 34px rgba(18,38,26,.16)}
.bp-body figcaption{font-size:14px;color:var(--muted);margin-top:10px;padding-left:12px;border-left:3px solid var(--gold);line-height:1.5}
.bp-body .le-keys{background:linear-gradient(140deg,#eef6ef,#e3f0e6);border:1px solid #cfe2d4;border-left:5px solid var(--brand);border-radius:16px;padding:18px 22px}
.bp-body .le-keys>p:first-child{font:700 13px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.bp-body .le-keys ul{margin:0}
.bp-body .le-box{background:#fff8e6;border:1px solid #f3dca0;border-radius:16px;padding:16px 20px}
.bp-body .le-table{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 6px 18px rgba(18,38,26,.05)}
.bp-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.bp-body th,.bp-body td{padding:12px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.bp-body th{background:var(--brand-d);color:#fff;font-family:var(--f-head);white-space:nowrap}
.bp-body tbody tr:nth-child(even) td{background:#f7faf5}
.bp-body tr:last-child td{border-bottom:0}
.bp-body .le-steps{counter-reset:s;list-style:none;padding-left:0}
.bp-body .le-steps>li{counter-increment:s;position:relative;padding-left:46px}
.bp-body .le-steps>li::before{content:counter(s);position:absolute;left:0;top:1px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font:700 14px/32px var(--f-body);text-align:center}
.bp-body .le-faq{border-top:1px solid var(--line);padding-top:6px}
.bp-body .le-faq h3{font-size:18px;margin-top:24px!important}
.bp-body .le-faq h3:first-child{margin-top:0!important}
.bp-body .le-faq h3+p{margin-top:6px}
.bp-body .le-shopnote{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.bp-note{font-size:14px!important;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:36px!important;line-height:1.6}
.bp-prod,.bp-more{padding:0;margin-top:64px}
.bp-prod h2,.bp-more h2{font-size:clamp(26px,3vw,34px);margin-bottom:22px}
.bp-more .bgrid.three .bcard h2{font-size:19px}

@media(min-width:1100px){
	.blog .bgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
	.blog .bcard:not(.big) h2{font-size:19px}
	.blog .bcard:not(.big) .bcard-b{padding:18px 18px 20px}
}
@media(max-width:980px){
	.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.bcard.big{grid-template-columns:1fr}
	.bcard.big .bcov{min-height:0;aspect-ratio:16/9}
	.bp-grid{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:28px}
	.bp-side{position:static}
	.bp-shop{display:none}
}
@media(max-width:720px){
	.bgrid{grid-template-columns:1fr;gap:18px}
	.bhero.has-img::after{background:linear-gradient(180deg,rgba(8,22,14,.55),rgba(8,22,14,.9))}
	.bhero-in{padding-top:28px;padding-bottom:36px}
	.btabs .wrap{gap:6px 22px}
	.blog-body{padding-top:26px}
	.blog-cta{flex-direction:column;align-items:flex-start;padding:26px 22px}
	.bp-hero{min-height:540px}
	.bp-hero.has-img::after{background:linear-gradient(180deg,rgba(8,22,14,.25) 0%,rgba(8,22,14,.15) 28%,rgba(8,22,14,.82) 58%,rgba(8,22,14,.96) 100%)}
	.bp-hero .bcat{margin-top:170px}
	.bp-meta span+span::before{margin-right:10px}
	.bp-meta{gap:4px 10px}
	.bp-body{font-size:16.5px}
	.bp-body>p:first-child{font-size:17.5px}
	.bp-body .le-fig img{border-radius:14px}
	.bp-body th,.bp-body td{padding:9px 10px;font-size:14px}
	.bp-body th{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.bcard,.bcov.has-img img,.bmore span{transition:none}.bcard:hover{transform:none}.bcard:hover .bcov.has-img img{transform:none}}