/* ═══════════════════════════════════════════════════════════
   blog.css — layered on top of style.css
   Inherits the olive palette and type scale from the main site.
   ═══════════════════════════════════════════════════════════ */

.blog-body{
  background:var(--bg);
  position:relative;
}
.blog-body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52vw 52vw at 82% -8%, rgba(168,189,143,.10), transparent 62%),
    radial-gradient(46vw 46vw at 8% 104%, rgba(90,112,80,.14), transparent 64%);
}
.blog-body > *{ position:relative; z-index:1; }

/* ─────────────── NAV ─────────────── */
.bnav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px var(--pad);
  border-bottom:1px solid var(--line-2);
  background:rgba(8,10,8,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  position:sticky; top:0; z-index:40;
}
.bnav__brand{ display:flex; align-items:center; gap:12px; font-size:13.5px; }
.bnav__mark{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:9px;
  font-family:var(--mono); font-size:11px; color:var(--amber);
  background:var(--glass);
  transition:border-color .4s, transform .5s var(--e-out);
}
.bnav__brand:hover .bnav__mark{ border-color:rgba(168,189,143,.5); transform:rotate(-90deg); }
.bnav__links{ display:flex; gap:4px; flex-wrap:wrap; }
.bnav__links a{
  padding:8px 14px; border-radius:99px; font-size:12.5px;
  color:var(--ink-2); border:1px solid transparent;
  transition:color .3s, border-color .35s, background .35s;
}
.bnav__links a:hover{ color:var(--ink); border-color:var(--line); background:var(--glass); }

/* ─────────────── LAYOUT ─────────────── */
.bwrap{
  max-width:1100px; margin-inline:auto;
  padding:clamp(28px,4vw,52px) var(--pad) clamp(60px,8vw,110px);
}

.bcrumb{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
  margin-bottom:clamp(34px,5vw,60px);
}
.bcrumb a{ color:var(--muted); transition:color .3s; }
.bcrumb a:hover{ color:var(--amber); }
.bcrumb span{ opacity:.4; }
.bcrumb em{ font-style:normal; color:var(--amber); }

/* ─────────────── LISTING HERO ─────────────── */
.bhero{ margin-bottom:clamp(44px,6vw,76px); max-width:760px; }
.bhero__label{
  display:inline-block; padding:6px 14px; border-radius:99px;
  border:1px solid var(--line); background:var(--glass);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:26px;
}
.bhero h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(38px,6.5vw,78px); line-height:1.02; letter-spacing:-.03em;
}
.bhero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--marble),var(--amber) 46%,var(--terra) 78%,var(--marble));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 9s linear infinite;
}
.bhero p{
  margin-top:22px; color:var(--muted);
  font-size:clamp(15px,1.5vw,17.5px); line-height:1.75; max-width:56ch;
}
.bcats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.bcats li{
  padding:6px 14px; border:1px solid var(--line-2); border-radius:99px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); background:var(--glass);
}

/* ─────────────── CARDS ─────────────── */
.blist-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
.bcard{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--bg); padding:clamp(24px,3vw,36px);
  overflow:hidden; transition:background .5s;
}
.bcard::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 0%, rgba(168,189,143,.09), transparent 70%);
  opacity:0; transition:opacity .5s;
}
.bcard:hover{ background:var(--bg-2); }
.bcard:hover::before{ opacity:1; }
.bcard > *{ position:relative; }
.bcard__n{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--faint);
}
.bcard__cat{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber);
}
.bcard__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(19px,2.1vw,26px); line-height:1.2; letter-spacing:-.015em;
  color:var(--ink); transition:color .4s;
}
.bcard:hover .bcard__title{ color:var(--amber); }
.bcard__desc{
  color:var(--muted); font-size:14px; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bcard__meta{
  margin-top:auto; padding-top:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.bcard--lg{ min-height:250px; }

/* ─────────────── POST ─────────────── */
.bpost{ max-width:740px; margin-inline:auto; }
.bpost__head{ margin-bottom:clamp(36px,5vw,56px); }
.bpost__cat{
  display:inline-block; padding:6px 14px; border-radius:99px;
  border:1px solid var(--line); background:var(--glass);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:24px;
}
.bpost__head h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(31px,5vw,58px); line-height:1.07; letter-spacing:-.028em;
  margin-bottom:24px;
}
.bpost__lede{
  font-size:clamp(17px,2vw,21px); line-height:1.62; color:var(--ink-2);
  padding-left:20px; border-left:2px solid var(--terra);
}
.bpost__meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.bpost__meta strong{ color:var(--ink-2); font-weight:400; }
.bpost__meta i{ width:3px; height:3px; border-radius:50%; background:var(--faint); }

.bpost__body h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,3.2vw,36px); line-height:1.16; letter-spacing:-.02em;
  color:var(--ink); margin:clamp(44px,5vw,64px) 0 20px;
}
.bpost__body p{
  color:var(--ink-2); font-size:clamp(15.5px,1.6vw,17.5px);
  line-height:1.82; margin-bottom:20px;
}
.bpost__body strong{ color:var(--ink); font-weight:500; }
.bpost__body em{ color:var(--amber); font-style:italic; }
.bpost__body code{
  font-family:var(--mono); font-size:.86em;
  background:var(--glass); border:1px solid var(--line-2);
  padding:2px 7px; border-radius:5px; color:var(--amber);
  word-break:break-word;
}
.blist{ margin:8px 0 26px; display:grid; gap:12px; }
.blist li{
  position:relative; padding-left:26px;
  color:var(--ink-2); font-size:clamp(15px,1.55vw,16.5px); line-height:1.72;
}
.blist li::before{
  content:''; position:absolute; left:6px; top:.62em;
  width:7px; height:7px; border-radius:2px;
  background:var(--terra); transform:rotate(45deg);
}
.blist strong{ color:var(--ink); font-weight:500; }

/* ─────────────── FAQ ─────────────── */
.bfaq{
  max-width:740px; margin:clamp(52px,7vw,84px) auto 0;
  padding-top:clamp(34px,4vw,48px); border-top:1px solid var(--line);
}
.bfaq h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; margin-bottom:24px;
}
.bfaq details{
  border-bottom:1px solid var(--line-2);
  padding:18px 0;
}
.bfaq summary{
  cursor:pointer; list-style:none;
  font-size:clamp(15.5px,1.6vw,17.5px); color:var(--ink);
  display:flex; align-items:flex-start; gap:14px;
  transition:color .3s;
}
.bfaq summary::-webkit-details-marker{ display:none; }
.bfaq summary::before{
  content:'+'; color:var(--amber); font-family:var(--mono);
  font-size:16px; line-height:1.3; flex-shrink:0;
  transition:transform .35s var(--e-out);
}
.bfaq details[open] summary::before{ transform:rotate(45deg); }
.bfaq summary:hover{ color:var(--amber); }
.bfaq details p{
  margin:14px 0 4px 28px; color:var(--muted);
  font-size:15.5px; line-height:1.78;
}

/* ─────────────── CTA ─────────────── */
.bcta{
  max-width:740px; margin:clamp(56px,7vw,88px) auto 0;
  padding:clamp(30px,4vw,46px);
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(170deg, rgba(232,236,225,.045), rgba(232,236,225,.012));
  text-align:center;
}
.bcta h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(23px,3vw,34px); letter-spacing:-.02em; margin-bottom:14px;
}
.bcta p{ color:var(--muted); font-size:15.5px; line-height:1.72; max-width:46ch; margin:0 auto 26px; }
.bcta__row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.bcta__btn{
  position:relative; overflow:hidden;
  padding:13px 26px; border-radius:99px;
  border:1px solid var(--line); background:var(--glass);
  font-size:13.5px; color:var(--ink);
  transition:color .45s, border-color .45s;
}
.bcta__btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,var(--amber),var(--terra));
  transform:translateY(101%); transition:transform .55s var(--e-out);
}
.bcta__btn span,.bcta__btn{ position:relative; }
.bcta__btn:hover::before{ transform:translateY(0); }
.bcta__btn:hover{ color:#0b100b; border-color:transparent; }
.bcta__btn--wa{ border-color:rgba(132,160,109,.42); color:var(--jade); }
.bcta__btn--wa::before{ background:#25d366; }
.bcta__btn--wa:hover{ color:#0a120a; }

/* ─────────────── RELATED ─────────────── */
.brelated{ margin-top:clamp(56px,7vw,90px); }
.brelated h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(23px,3vw,34px); letter-spacing:-.02em; margin-bottom:24px;
}
.brelated__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}

/* ─────────────── FOOTER ─────────────── */
.bfoot{
  border-top:1px solid var(--line);
  padding:clamp(26px,3vw,38px) var(--pad);
  max-width:1100px; margin-inline:auto;
}
.bfoot__row{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.bfoot__row a{ transition:color .35s; }
.bfoot__row a:hover{ color:var(--amber); }

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width:900px){
  .brelated__grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .blist-grid{ grid-template-columns:1fr; }
  .bnav{ flex-direction:column; align-items:flex-start; gap:14px; }
  .bnav__links{ width:100%; }
  .bcard--lg{ min-height:0; }
  .bpost__lede{ padding-left:16px; }
}