/* Africa Press Today — a wide table. Date, report, byline, with alternating
   row fills under a filled header row.
   Every row is a three-track grid; the report track carries min-width:0 and
   overflow-wrap so a long headline wraps inside its cell instead of
   widening the track. No headline in this design exceeds 16px — the
   uniformity is the design.
   No photography: the only <img> are the /about/ portrait and the citation
   card's source logo. */

:root {
  --bg: #d4d6e0;
  --fg: #15181c;      /* 12.29:1 on --bg */
  /* Drafted #5b6470 measured 4.14:1 on the page background — it passed on
     the row fills but failed in the masthead, where it also sits.
     Darkened within the same slate to 5.14:1 on page, 7.45:1 on white. */
  --muted: #4d5661;
  --row-a: #ffffff;
  --row-b: #e7ebef;
  --font: Chivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font);
       font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--font); margin: 0; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 22px; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--fg);
  color: #fff; font-weight: 600; font-size: 12px; padding: 10px 16px; text-decoration: none; }
.skip-link:focus { left: 0; }

/* No rule beneath the masthead — the filled header row provides the edge. */
.nameplate { padding: 24px 0 14px; }
.nameplate__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.nameplate__mast { min-width: 0; }
.nameplate__brand { display: block; text-decoration: none; }
.nameplate__wordmark { display: block; font-weight: 700; font-size: clamp(19px, 3vw, 24px);
  line-height: 1.1; letter-spacing: -.03em; overflow-wrap: break-word; }
.nameplate__tagline { margin-top: 7px; font-size: 10px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.nameplate__meta { flex: 0 0 auto; text-align: right; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); line-height: 1.9; }
.nameplate__date, .nameplate__count { min-height: 1em; }
.nameplate__count { font-weight: 600; color: var(--fg); }
.nameplate__nav { margin-top: 3px; font-weight: 600; }
.nameplate__nav a { margin-left: 14px; text-decoration: none; color: var(--muted); }
.nameplate__nav a:hover { color: var(--fg); }
.nameplate__nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }

.table__head, .table__row { display: grid; grid-template-columns: 78px 1fr 118px; }
.table__head { background: var(--fg); color: #fff; font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; }
.table__head > span { padding: 8px 10px; }
.table__body { list-style: none; margin: 0; padding: 0; }
.table__row { align-items: baseline; background: var(--row-a); }
.table__row:nth-child(even) { background: var(--row-b); }
.table__row > span { padding: 11px 10px; }
.table__date { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.table__report { min-width: 0; overflow-wrap: break-word; }
.table__headline { font-weight: 400; font-size: 15px; line-height: 1.38; }
.table__row--first .table__headline { font-weight: 600; font-size: 16px; }
.table__headline a { text-decoration: none; }
.table__headline a:hover { text-decoration: underline; }
.table__byline { font-size: 11px; color: var(--muted); min-width: 0; overflow-wrap: break-word; }
.empty { font-size: 13px; color: var(--muted); padding: 34px 0; }

.site-main { padding-bottom: 0; }
.post { max-width: 680px; background: var(--row-a); padding: 22px 22px 26px; }
.post__dateline { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.post__title { font-weight: 700; font-size: clamp(21px, 3.2vw, 27px); line-height: 1.2; letter-spacing: -.03em; }
.post__subtitle { margin-top: 11px; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.post__body { margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--fg); font-size: 1rem; line-height: 1.72; }
.post__body p { margin: 0 0 1.15em; }
.post__body h2 { font-weight: 700; font-size: 1.15rem; margin: 1.7em 0 .5em; }
.post__body h3 { font-weight: 600; font-size: 1.02rem; margin: 1.5em 0 .45em; }
.post__body a { color: var(--fg); text-decoration: underline; }
.post__body blockquote { margin: 1.5em 0; padding-left: 18px; border-left: 3px solid var(--fg); color: var(--muted); }

.citation-card { max-width: 680px; margin-top: 18px; padding: 15px 22px; background: var(--row-b); }
.citation-card__label { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.citation-card__source-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.citation-card__logo { max-height: 18px; width: auto; }
.citation-card__headline { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
.citation-card__date { margin-top: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.citation-card__cta { margin-top: 9px; font-weight: 600; font-size: 11px; }
.citation-card__cta a { color: var(--fg); text-decoration: underline; }

.about { max-width: 680px; background: var(--row-a); padding: 22px 22px 26px; }
.about__label { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.about__name { font-weight: 700; font-size: clamp(21px, 3.2vw, 26px); line-height: 1.16; letter-spacing: -.03em; }
.about__photo { width: 150px; height: 150px; object-fit: cover; object-position: 50% 30%; float: right; margin: 0 0 16px 20px; }
.about__bio { margin-top: 20px; font-size: 1rem; line-height: 1.72; }
.about__bio p { margin: 0 0 1.1em; }
.about__contact { margin-top: 20px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.about__contact a { color: var(--fg); text-decoration: underline; }

.site-footer { margin-top: 0; border-top: 2px solid var(--fg); padding: 14px 0 44px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-footer__row { display: flex; justify-content: space-between; gap: 20px; }
.site-footer__name { font-weight: 700; color: var(--fg); }
.site-footer__links a, .site-footer__social a { margin-left: 14px; color: var(--muted); text-decoration: none; }
.site-footer__links a:hover, .site-footer__social a:hover { color: var(--fg); }
.site-footer__social { margin-top: 8px; text-align: right; }
.site-footer__copyright { margin-top: 9px; }

@media (max-width: 900px) { .container { padding: 0 18px; }
  .table__head, .table__row { grid-template-columns: 72px 1fr 104px; } }
/* Byline track is dropped; the byline moves beneath the headline. */
@media (max-width: 700px) {
  .table__head { grid-template-columns: 72px 1fr; }
  .table__head > span:last-child { display: none; }
  .table__row { grid-template-columns: 72px 1fr; }
  .table__byline { grid-column: 2; padding-top: 0; font-size: 10px; }
  .nameplate__row { flex-direction: column; gap: 12px; }
  .nameplate__meta { text-align: left; }
  .nameplate__nav a { margin-left: 0; margin-right: 14px; }
}
/* Date moves above the headline too. */
@media (max-width: 480px) {
  .table__head { display: none; }
  .table__row { grid-template-columns: 1fr; }
  .table__date { padding-bottom: 0; }
  .table__report, .table__byline { grid-column: 1; }
  .table__report { padding-top: 2px; padding-bottom: 2px; }
  .about__photo { float: none; display: block; margin: 0 0 16px; }
}