/* Africa Press Review — rotogravure. An asymmetric 2fr/1fr split with the
   lead in the wide track and every other report hanging in the narrow one.
   The sidebar is a plain grid track: not sticky, no max-height, no
   internal scroll. On a 176-report site it is far longer than the lead and
   simply stacks with the page, which is the intended behaviour.
   No photography: the only <img> are the /about/ portrait and the citation
   card's source logo. */

:root {
  --bg: #d4c8d2;
  --fg: #241722;            /* 10.64:1 on --bg */
  --muted: #5f4b5a;         /* 4.92:1 on --bg */
  --accent: #5c1f4a;        /* 7.42:1 on --bg */
  --accent-bright: #8c2470; /* 4.99:1 on --bg */
  --rule: #b9a8b6;
  --font-head: Alegreya, Georgia, "Times New Roman", serif;
  --font-ui: "Alegreya Sans", 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-head);
       font-size: 1.0625rem; line-height: 1.62; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; }
.container { max-width: 980px; margin: 0 auto; padding: 0 24px; }

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

.nameplate { padding: 26px 0 0; border-bottom: 3px solid var(--accent); margin-bottom: 24px; }
.nameplate__brand { display: block; text-decoration: none; }
.nameplate__wordmark { display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(21px, 3.6vw, 29px); line-height: 1.1; letter-spacing: -.015em;
  color: var(--accent); overflow-wrap: break-word; }
.nameplate__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 18px; margin-top: 10px; padding-bottom: 10px; font-family: var(--font-ui);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-height: 1.6em; }
.nameplate__right > span { margin-left: 14px; }
.nameplate__count { font-weight: 700; color: var(--accent-bright); }
.nameplate__nav a { margin-left: 12px; text-decoration: none; color: var(--muted); font-weight: 500; }
.nameplate__nav a:hover { color: var(--accent-bright); }
.nameplate__nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent-bright); }

/* The asymmetric split. Both tracks carry min-width:0 so a long headline
   wraps inside its own column. */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 0; }
.lead { min-width: 0; overflow-wrap: break-word; padding-right: 28px; }
.lead__label { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 10px; }
.lead__headline { font-weight: 700; font-size: clamp(20px, 3.2vw, 26px); line-height: 1.22; }
.lead__headline a { text-decoration: none; }
.lead__headline a:hover { color: var(--accent-bright); }
.lead__standfirst { margin-top: 11px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.lead__byline { margin-top: 12px; font-style: italic; font-size: 14px; color: var(--muted); }

.sidebar { min-width: 0; overflow-wrap: break-word; border-left: 1px solid var(--rule); padding-left: 20px; }
.sidebar__label { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sidebar__list { list-style: none; margin: 0; padding: 0; }
.sidebar__row { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.sidebar__headline { font-weight: 500; font-size: 16px; line-height: 1.32; }
.sidebar__headline a { text-decoration: none; }
.sidebar__headline a:hover { color: var(--accent-bright); }
.empty { font-size: 13px; color: var(--muted); padding: 34px 0; }

.site-main { padding-bottom: 30px; }
.post { max-width: 660px; }
.post__dateline { font-family: var(--font-ui); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.post__title { font-weight: 700; font-size: clamp(24px, 3.8vw, 33px); line-height: 1.18; }
.post__subtitle { margin-top: 12px; font-style: italic; font-size: 1.08rem; line-height: 1.55; color: var(--muted); }
.post__body { margin-top: 24px; padding-top: 20px; border-top: 3px solid var(--accent); font-size: 1.0625rem; line-height: 1.78; }
.post__body p { margin: 0 0 1.15em; }
.post__body h2 { font-family: var(--font-ui); font-weight: 700; font-size: 1.24rem; margin: 1.7em 0 .5em; }
.post__body h3 { font-family: var(--font-ui); font-weight: 500; font-size: 1.06rem; margin: 1.5em 0 .45em; }
.post__body a { color: var(--accent-bright); }
.post__body blockquote { margin: 1.5em 0; padding-left: 18px; border-left: 3px solid var(--accent-bright);
  font-style: italic; color: var(--muted); }

.citation-card { max-width: 660px; margin-top: 30px; padding: 15px 17px; background: #fff; border-left: 3px solid var(--accent-bright); }
.citation-card__label { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 7px; }
.citation-card__source-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.citation-card__logo { max-height: 18px; width: auto; }
.citation-card__headline { margin-top: 6px; font-style: italic; font-size: 14px; line-height: 1.5; }
.citation-card__date { margin-top: 4px; font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.citation-card__cta { margin-top: 9px; font-family: var(--font-ui); font-weight: 700; font-size: 11px; }
.citation-card__cta a { color: var(--accent-bright); }

.about { max-width: 660px; }
.about__label { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 9px; }
.about__name { font-weight: 700; font-size: clamp(24px, 3.6vw, 31px); line-height: 1.18; }
.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: 1.0625rem; line-height: 1.78; }
.about__bio p { margin: 0 0 1.1em; }
.about__contact { margin-top: 20px; font-family: var(--font-ui); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.about__contact a { color: var(--accent-bright); }

.site-footer { margin-top: 34px; border-top: 3px solid var(--accent); padding: 14px 0 46px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .14em; 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(--accent); }
.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(--accent-bright); }
.site-footer__social { margin-top: 8px; text-align: right; }
.site-footer__copyright { margin-top: 9px; }

@media (max-width: 900px) { .container { padding: 0 20px; } .split { grid-template-columns: 3fr 2fr; }
  .lead { padding-right: 22px; } .sidebar { padding-left: 16px; } }
/* One column; the sidebar drops below and loses its left border. */
@media (max-width: 700px) {
  .split { grid-template-columns: 1fr; }
  .lead { padding-right: 0; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
  .sidebar { border-left: 0; padding-left: 0; padding-top: 20px; }
  .nameplate__meta { flex-direction: column; }
  .nameplate__right > span { margin-left: 0; margin-right: 14px; }
  .nameplate__nav a { margin-left: 0; margin-right: 12px; }
}
@media (max-width: 480px) { .about__photo { float: none; display: block; margin: 0 0 16px; } }