/* Press Africa Journal — colour bands instead of rules.
   Each band escapes the container gutter with its OWN declared negative
   margin / positive padding pair. Those are the only negative margins in
   this file and the container is never widened, so nothing else shifts.
   No photography: the only <img> are the /about/ portrait and the
   citation card's source logo. */

:root {
  --bg: #d8e4df;
  --fg: #1b1a17;          /* 13.33:1 on --bg */
  --muted: #4b4842;       /* 6.98:1 on --bg */
  /* Drafted #a1560c measured 4.18:1 on this paper — under AA. Darkened
     within the same burnt orange to 5.22:1. */
  --accent-ink: #8b4a0a;
  --band-dark: #1f3a4d;   /* #fff on it: 11.86:1 */
  --band-accent: #c4761c; /* --fg on it: 4.94:1 */
  --band-soft: #e8e2d6;   /* --fg on it: 13.49:1 */
  --on-dark: #ffffff;
  --on-dark-tint: #cfe0ea;/* 8.76:1 on --band-dark */
  --gutter: 24px;
  --font: Outfit, 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.6; -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: 960px; margin: 0 auto; padding: 0 var(--gutter); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.band--dark a:focus-visible, .band--accent a:focus-visible { outline-color: var(--on-dark); }
.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; }

/* The full-bleed pair. Applied per band, never to the container. */
.band {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.band--dark { background: var(--band-dark); color: var(--on-dark); padding-top: 22px; padding-bottom: 18px; }
.band__brand { display: block; text-decoration: none; color: var(--on-dark); }
.band__wordmark { display: block; font-weight: 700; font-size: clamp(21px, 3.6vw, 27px);
  line-height: 1.1; letter-spacing: -.02em; overflow-wrap: break-word; }
.band__tagline { margin-top: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark-tint); }

/* Ink on the accent band, not white: white on this orange measures
   3.53:1. Darkening the band far enough for white would have collapsed it
   toward the label colour and lost the band. Ink keeps the band vivid and
   reads at 4.94:1. */
.band--accent { background: var(--band-accent); color: var(--fg); padding-top: 8px; padding-bottom: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; min-height: 2.2em; }
.band__count { font-weight: 700; }
.band__nav { margin-left: auto; }
.band__nav a { margin-left: 16px; text-decoration: none; color: var(--fg); }
.band__nav a:hover { text-decoration: underline; }
.band__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--fg); }

.site-main { padding: 26px 0 0; }
.lead { padding-bottom: 24px; }
.lead__label { font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 10px; }
.lead__headline { font-weight: 700; font-size: clamp(20px, 3.2vw, 25px); line-height: 1.2; letter-spacing: -.02em; }
.lead__headline a { text-decoration: none; }
.lead__headline a:hover { color: var(--accent-ink); }
.lead__standfirst { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 620px; }

.band--soft { background: var(--band-soft); padding-top: 22px; padding-bottom: 24px; }
.band__grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 16px 30px; }
.band__item { min-width: 0; overflow-wrap: break-word; }
.band__headline { font-weight: 600; font-size: 15px; line-height: 1.34; }
.band__headline a { text-decoration: none; }
.band__headline a:hover { color: var(--accent-ink); }
.band__itemdate { margin-top: 5px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.empty { font-size: 13px; color: var(--muted); padding: 34px 0; }

.post { max-width: 660px; }
.post__dateline { font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.post__title { font-weight: 700; font-size: clamp(23px, 3.6vw, 31px); line-height: 1.16; letter-spacing: -.025em; }
.post__subtitle { margin-top: 12px; font-size: 1.05rem; line-height: 1.55; color: var(--muted); }
.post__body { margin-top: 24px; padding-top: 20px; border-top: 3px solid var(--band-dark); font-size: 1rem; line-height: 1.75; }
.post__body p { margin: 0 0 1.15em; }
.post__body h2 { font-weight: 700; font-size: 1.2rem; margin: 1.7em 0 .5em; }
.post__body h3 { font-weight: 600; font-size: 1.04rem; margin: 1.5em 0 .45em; }
.post__body a { color: var(--accent-ink); }
.post__body blockquote { margin: 1.5em 0; padding-left: 18px; border-left: 4px solid var(--band-accent); color: var(--muted); }

.citation-card { max-width: 660px; margin-top: 30px; padding: 15px 17px; background: var(--band-soft); }
.citation-card__label { font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 7px; }
.citation-card__source-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.citation-card__logo { max-height: 18px; width: auto; }
.citation-card__headline { margin-top: 6px; font-size: 14px; 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(--accent-ink); }

.about { max-width: 660px; }
.about__label { font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 9px; }
.about__name { font-weight: 700; font-size: clamp(23px, 3.6vw, 30px); line-height: 1.14; letter-spacing: -.02em; }
.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.75; }
.about__bio p { margin: 0 0 1.1em; }
.about__contact { margin-top: 20px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.about__contact a { color: var(--accent-ink); }

.site-footer { margin-top: 30px; border-top: 3px solid var(--band-dark); padding: 14px 0 44px;
  font-size: 10px; letter-spacing: .13em; 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(--accent-ink); }
.site-footer__social { margin-top: 8px; text-align: right; }
.site-footer__copyright { margin-top: 9px; }

@media (max-width: 900px) { :root { --gutter: 20px; } .band__grid { gap: 14px 24px; } }
/* Grid collapses; the bands stay full width because the pair scales with
   the gutter variable. */
@media (max-width: 700px) {
  .band__grid { grid-template-columns: 1fr; }
  .band__nav { margin-left: 0; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .about__photo { float: none; display: block; margin: 0 0 16px; }
}