/* =====================================================================
   A2 FARMER — Blog / Journal styles (loads with styles.css for brand tokens)
   ===================================================================== */

/* ---------- blog nav (self-contained, no JS dependency) ---------- */
.bnav{position:sticky;top:0;z-index:60;background:rgba(246,239,226,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bnav__inner{display:flex;align-items:center;gap:20px;padding:14px 0}
.bnav .brand{margin-right:auto}
.bnav__links{display:flex;align-items:center;gap:26px}
.bnav__links a{font-weight:500;font-size:.95rem;color:var(--ink)}
.bnav__links a:hover{color:var(--maroon)}
.bnav__links .btn{padding:10px 20px;font-size:.9rem}
@media(max-width:720px){.bnav__links a:not(.btn){display:none}}

/* ---------- blog hub ---------- */
.bloghero{background:linear-gradient(180deg,var(--paper),var(--paper-2));padding:clamp(48px,8vw,88px) 0 clamp(32px,5vw,56px);text-align:center}
.bloghero h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.bloghero p{color:var(--ink-soft);font-size:1.12rem;max-width:60ch;margin:16px auto 0}
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px;padding:clamp(40px,6vw,72px) 0}
.postcard{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.postcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.postcard__img{aspect-ratio:16/10;overflow:hidden}
.postcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.postcard:hover .postcard__img img{transform:scale(1.05)}
.postcard__body{padding:22px;display:flex;flex-direction:column;flex:1}
.postcard__tag{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.postcard h2{font-size:1.32rem;margin:8px 0 8px;line-height:1.2}
.postcard h2 a{color:var(--ink)}
.postcard h2 a:hover{color:var(--maroon)}
.postcard p{color:var(--ink-soft);font-size:.95rem;margin:0 0 16px}
.postcard__more{margin-top:auto;font-weight:600;color:var(--maroon);font-size:.92rem}

/* ---------- article ---------- */
.post{padding:clamp(28px,5vw,48px) 0 clamp(48px,7vw,88px)}
.post__wrap{max-width:760px;margin:0 auto}
.breadcrumb{font-size:.82rem;color:var(--ink-soft);margin:8px 0 26px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--maroon)}
.breadcrumb a:hover{text-decoration:underline}
.post__eyebrow{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.post h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;margin:0 0 16px}
.post__meta{color:var(--ink-soft);font-size:.9rem;margin:0 0 24px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.post__meta .dot{opacity:.5}
.post__hero{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin:0 0 32px;aspect-ratio:16/9}
.post__hero img{width:100%;height:100%;object-fit:cover}
.post__body{font-size:1.08rem;line-height:1.75;color:#302518}
.post__body p{margin:0 0 20px}
.post__body h2{font-size:clamp(1.5rem,3vw,2rem);margin:40px 0 14px;line-height:1.2}
.post__body h3{font-size:1.25rem;margin:30px 0 10px}
.post__body a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
.post__body a:hover{color:var(--maroon-2)}
.post__body strong{color:var(--ink);font-weight:600}
.post__body em{color:var(--maroon);font-family:var(--accent);font-style:italic;font-size:1.06em}
.post__body ul,.post__body ol{margin:0 0 22px;padding-left:22px}
.post__body li{margin:0 0 10px}
.post__body figure{margin:28px 0}
.post__body figure img{width:100%;border-radius:14px;box-shadow:var(--shadow-sm)}
.post__body figcaption{font-size:.84rem;color:var(--ink-soft);text-align:center;margin-top:8px}
.post__body blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--gold);font-family:var(--accent);font-style:italic;font-size:1.3rem;color:var(--ink)}
/* lab-proof callout */
.callout{background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;padding:18px 22px;margin:26px 0;font-size:.98rem}
.callout b{color:var(--green)}
/* comparison table */
.ctable{width:100%;border-collapse:collapse;margin:24px 0;font-size:.96rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ctable th,.ctable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.ctable thead th{background:var(--ink);color:#f3e8d6;font-family:var(--sans);font-weight:600}
.ctable tbody tr:nth-child(even){background:var(--paper)}
.ctable td:first-child{font-weight:600;color:var(--ink)}
.ctable .win{color:var(--green);font-weight:600}
/* key takeaways box */
.tldr{background:var(--paper-2);border-radius:14px;padding:22px 24px;margin:0 0 32px}
.tldr h2{margin:0 0 10px;font-size:1.1rem;font-family:var(--sans);font-weight:700;letter-spacing:.02em}
.tldr ul{margin:0;padding-left:20px}
.tldr li{margin:0 0 6px;font-size:.98rem;color:var(--ink-soft)}

/* faq inside article */
.post__faq{margin:40px 0 0}
.post__faq h2{margin-bottom:12px}
.post__faq details{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin:0 0 10px}
.post__faq summary{cursor:pointer;font-family:var(--serif);font-weight:600;font-size:1.06rem;padding:12px 0;list-style:none}
.post__faq summary::-webkit-details-marker{display:none}
.post__faq details p{margin:0 0 14px;color:var(--ink-soft);font-size:.98rem}

/* buy CTA */
.post__cta{margin:44px 0 0;background:linear-gradient(160deg,var(--maroon),var(--maroon-2));color:#fbf3e6;border-radius:20px;padding:36px;text-align:center}
.post__cta h2{color:#fff;font-size:1.7rem;margin:0 0 8px}
.post__cta p{color:#e6dac6;margin:0 0 20px}

/* related posts */
.related{border-top:1px solid var(--line);margin-top:52px;padding-top:36px}
.related h2{font-size:1.4rem;margin:0 0 20px;text-align:center}
.related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.related a{display:block;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:18px;transition:transform .25s,box-shadow .25s}
.related a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.related__tag{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.related h3{font-size:1.05rem;margin:6px 0 0;color:var(--ink);line-height:1.25}