/* ============ insights ============ */

/* ---------- the category index ----------
   Four photographic cards immediately under the page heading, because the
   categories are how people navigate this page. Each is a whole photograph
   with the text laid over the foot of it, so the card identifies its strand
   rather than decorating it: the boardroom, people at the work, an office in
   Accra, and the firm at one of its own events.

   Sat on a 2px ink grid rather than a gap, so the four read as one object.
   The gradient is a pseudo-element behind the text and above the image, which
   keeps the white legible over whatever part of the photograph lands there. */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--ground-dark)}
.cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:330px;padding:26px 24px 22px;overflow:hidden;isolation:isolate;background:var(--ink);
  color:inherit}
.cat img.catbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s ease}
.cat::after{content:'';position:absolute;inset:0;z-index:-1;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(10,14,16,0) 0%,rgba(10,14,16,.06) 34%,rgba(10,14,16,.58) 70%,rgba(10,14,16,.88) 100%)}
.cat:hover img.catbg{transform:scale(1.05)}
.cat:hover::after{opacity:.82}
.cat .cnum{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:#5FE08F;
  text-shadow:0 1px 10px rgba(10,14,16,.6);font-variant-numeric:tabular-nums}
.cat h2,
.cat h3{font-size:1.34rem;font-weight:700;letter-spacing:-.022em;line-height:1.12;margin:10px 0 9px;
  color:#fff;text-shadow:0 1px 12px rgba(10,14,16,.5)}
/* Three lines held open on every card. The content is bottom-aligned, so a
   two-line description would push its title down out of line with the three
   beside it. */
.cat p{font-size:.93rem;color:#D2DBD7;line-height:1.5;margin:0 0 18px;min-height:4.5em}
@media (max-width:960px){.cat p{min-height:0}}
.cat .cfoot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.3);padding-top:13px}
.cat .ccount{font-size:.78rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cat .cgo{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-lift)}
.cat.soon .cnum{color:#F0D998}
.cat.soon .ccount{color:#D2DBD7;font-weight:600}
@media (max-width:960px){.cats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cats{grid-template-columns:1fr}.cat{min-height:240px}}

/* ---------- the lead story ---------- */
.lead-story{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,60px);
  align-items:center;color:inherit}
@media (max-width:900px){.lead-story{grid-template-columns:1fr}}
.lead-story .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mist)}
.lead-story h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;letter-spacing:-.025em;
  margin:14px 0 18px}
.lead-story:hover h2{color:var(--green-deep)}
.lead-story .lead{max-width:32em;margin:0 0 24px}

/* ---------- an article row ----------
   A list rather than a grid of cards, because these are read by scanning
   titles. The thumbnail is the article's own cover, the same image the
   article page and the search result carry. The date is its own column so
   the dates line up down the page. */
.rows{border-top:2px solid var(--ink)}
.arow{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:clamp(16px,2.4vw,30px);
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:start;color:inherit}
.arow .th{aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.arow .th img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.arow:hover .th img{transform:scale(1.04)}
.arow .tag{margin-bottom:8px}
.arow h3{font-size:1.24rem;font-weight:700;letter-spacing:-.018em;line-height:1.24;margin:0 0 8px}
.arow:hover h3{color:var(--green-deep)}
.arow p{font-size:.96rem;color:#4B5457;line-height:1.55;margin:0 0 10px;max-width:46em}
.arow .by{font-size:.84rem;color:var(--slate)}
.arow .when{font-size:.78rem;color:var(--slate);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:2px}
@media (max-width:720px){.arow{grid-template-columns:96px minmax(0,1fr)}
  .arow .when{grid-column:2;padding-top:6px}}
@media (max-width:480px){.arow{grid-template-columns:1fr}.arow .th{display:none}}

/* ---------- a section head with its own "see all" ---------- */
.shead{display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;
  margin-bottom:26px}
.shead .slabel{margin-bottom:8px}
.shead .title{margin-bottom:10px}
.shead p{font-size:1.02rem;color:#4B5457;max-width:38em;margin:0}

/* ---------- shared ---------- */
.author-line{display:flex;align-items:center;gap:11px;font-size:.88rem;color:var(--slate)}
.author-line img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.author-line b{color:var(--ink);font-weight:600}
.lead-story .author-line{gap:12px;font-size:.92rem}
.lead-story .author-line img{width:44px;height:44px}
.rail-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:baseline;justify-content:space-between;
  border-top:2px solid var(--ink);padding-top:16px;margin-bottom:30px}
.rail-head h2{font-size:1.45rem;letter-spacing:-.018em}
.rail-head p{font-size:.96rem;color:#4B5457;margin:6px 0 0;max-width:46em}
.rail-head a{font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--green-deep);white-space:nowrap}
.rail-head a:hover{color:var(--green)}
.topics a{font-size:.86rem;font-weight:600;border:1px solid var(--rule);padding:8px 15px;color:#4B5457;transition:.16s}