/* ═══ Nkwata · Blog — index, article, related ═══ */

.b-hero{background:var(--espresso);color:var(--on-dark);padding:52px 0 46px;position:relative;overflow:hidden}
.b-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 44% at 86% 0%,rgba(221,106,69,.2),transparent 62%),
             radial-gradient(44% 46% at 4% 100%,rgba(176,141,87,.13),transparent 64%)}
.b-hero .wrap{position:relative;z-index:2}
.b-hero h1{color:#fff;font-size:clamp(32px,7.6vw,58px);font-weight:900;margin-top:20px;
  letter-spacing:-.04em;line-height:1.02}
.b-hero .dek{margin-top:18px;color:var(--on-dark-2);max-width:56ch;font-size:17px;line-height:1.62}

.b-body{padding:44px 0 20px}
.b-sec{margin-bottom:46px}
.b-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:20px}
.b-card{display:block;background:linear-gradient(180deg,#fff,#FDFBF7);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.b-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--brass)}
.b-card.pillar{border-left:3px solid var(--ember)}
.b-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:9px}
.b-k i{width:3px;height:3px;background:var(--line-2);display:block}
.b-card h3{font-size:20px;margin-top:11px;line-height:1.25;transition:color .2s}
.b-card:hover h3{color:var(--ember)}
.b-card p{margin-top:9px;color:var(--muted);font-size:14px;line-height:1.6}
.b-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:700;
  font-size:13.5px;color:var(--ember)}
.b-card:hover .arw{transform:translateX(5px)}

/* ── the article ── */
.post{padding:34px 0 20px}
.post-wrap{max-width:74ch}
.crumbs{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.crumbs a{border-bottom:1px solid transparent;transition:.2s}
.crumbs a:hover{border-color:var(--ember);color:var(--ember)}
.crumb-now{color:var(--ink)}
.post-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);font-weight:600}
.post h1{font-size:clamp(30px,7vw,50px);margin-top:14px;letter-spacing:-.038em;line-height:1.04}
.post-lede{font-family:var(--display);font-size:20px;font-weight:300;line-height:1.55;
  color:var(--ink-2);margin-top:18px}
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding-bottom:22px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-meta i{width:3px;height:3px;background:var(--line-2);display:block}

.post-body{margin-top:30px}
.post-body p{font-size:17.5px;line-height:1.78;color:var(--ink-2);margin-top:20px}
.post-body h2{font-size:clamp(22px,4.8vw,29px);margin-top:40px;letter-spacing:-.025em;
  padding-top:6px;position:relative}
.post-body h2::before{content:"";position:absolute;top:-14px;left:0;width:38px;height:2px;
  background:linear-gradient(90deg,var(--ember),transparent)}
.post-body ul.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.post-body ul.ticks li{display:flex;gap:13px;font-size:16.5px;line-height:1.62;color:var(--ink-2)}
.tick{width:7px;height:7px;background:var(--ember);flex:0 0 auto;margin-top:9px;
  transform:rotate(45deg)}
.pull-q{margin:26px 0 0;padding:20px 24px;border-left:3px solid var(--brass);
  background:linear-gradient(135deg,var(--plaster-2),#fff);border-radius:0 var(--r-m) var(--r-m) 0;
  font-family:var(--display);font-style:italic;font-size:18px;line-height:1.6;color:var(--ink)}
.callout{margin:26px 0 0;padding:22px;border-radius:var(--r-m);
  background:linear-gradient(135deg,var(--ember-wash),#FCF4EF);border:1px solid #EDCCBE}
.callout-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);font-weight:600;display:block;margin-bottom:9px}
.callout p{margin:0!important;font-size:16px!important;color:#6D2E1A!important;line-height:1.66!important}
.tw{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-m)}
.tw table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px}
.tw th{background:var(--espresso);color:#fff;text-align:left;padding:12px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.tw td{padding:12px 14px;border-top:1px solid var(--line);color:var(--ink-2)}
.tw tbody tr:nth-child(even){background:var(--plaster-2)}

.post-cta{margin-top:46px;padding:34px 26px;border-radius:var(--r-l);text-align:center;
  background:linear-gradient(160deg,var(--walnut),var(--espresso));color:var(--on-dark);
  border:1px solid rgba(176,141,87,.3);box-shadow:var(--sh-2);position:relative;overflow:hidden}
.post-cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 62% at 50% 0,rgba(221,106,69,.24),transparent 66%)}
.post-cta>*{position:relative;z-index:2}
.cta-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember-lift);font-weight:600}
.post-cta h3{color:#fff;font-size:26px;margin-top:10px;letter-spacing:-.025em}
.post-cta p{color:var(--on-dark-2);margin-top:11px;font-size:15.5px;max-width:44ch;
  margin-inline:auto;line-height:1.6}
.post-cta .btn{margin-top:20px}

.rel{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}
.rel h3{font-size:22px}
.rel-grid{display:grid;gap:14px;margin-top:18px;grid-template-columns:1fr}
.rel-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px;transition:transform .28s var(--ease),border-color .28s,box-shadow .28s}
.rel-card:hover{transform:translateY(-4px);border-color:var(--brass);box-shadow:var(--sh-1)}
.rel-k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);font-weight:600}
.rel-card b{display:block;font-family:var(--display);font-size:17px;margin-top:8px;line-height:1.28}
.rel-card p{margin-top:7px;font-size:13.5px;color:var(--muted);line-height:1.55}

@media(min-width:640px){
  .b-grid{grid-template-columns:repeat(2,1fr)}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){
  .b-grid{grid-template-columns:repeat(3,1fr)}
  .rel-grid{grid-template-columns:repeat(3,1fr)}
  .post{padding:52px 0 20px}
}