:root{
  --canvas:#fafafa; --surface:#ffffff; --ink:#171717; --ink-body:#2a2a2a; --ink-muted:#6b6b6b;
  --divider:#e5e5e5; --divider-strong:#d4d4d4; --btn:#171717; --btn-ink:#ffffff; --left:520px;
  --font:Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink-body);font-family:var(--font);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
a{color:inherit;text-decoration:none}

.page{display:grid;grid-template-columns:var(--left) minmax(0,1fr);min-height:100vh}

/* left column: the letter */
.letter{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;padding:48px 44px 40px 28px;border-right:1px solid var(--divider)}
.mark{width:44px;height:44px;display:block;margin-bottom:56px;color:var(--ink)}
.logo{display:block;width:210px;height:auto;margin:0 0 44px -6px}
@media (max-width:820px){.logo{width:170px;margin-bottom:30px}}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
h1{font-size:54px;font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink);margin-bottom:12px}
.letter p.sub{font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin-bottom:28px}
.letter p{font-size:16px;line-height:1.5;color:var(--ink-body);margin-bottom:20px;max-width:56ch}
.letter p.eyebrow{font-size:12px;margin-bottom:12px}
.letter p.closing{margin-bottom:10px}
.sign{margin:6px 0 10px}
.sign img,.sign svg{height:54px;display:block}
.sign.script{font-family:Caveat,"Segoe Script","Bradley Hand",cursive;font-size:38px;line-height:1.05;color:var(--ink);margin:10px 0 12px;letter-spacing:-.01em}
.by{font-size:16px;color:var(--ink-body)}

/* top nav */
.topnav{display:flex;gap:26px;padding:22px 44px 0 24px;font-size:14px;color:var(--ink-muted)}
.topnav a[aria-current="page"],.topnav a:hover{color:var(--ink)}
@media (max-width:820px){.topnav{padding:18px 22px 0;gap:18px;flex-wrap:wrap}}

/* right column */
.content{display:flex;flex-direction:column;min-width:0}
.sections{padding:52px 44px 24px 24px}
.section{display:grid;grid-template-columns:minmax(260px,480px) minmax(0,1fr);gap:48px;padding-bottom:88px}
.section h2{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin-bottom:14px}
.section .desc{font-size:19px;line-height:1.35;color:var(--ink-body);max-width:32ch}
.items{display:flex;flex-direction:column}
details{padding:0}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 0;font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
summary::-webkit-details-marker{display:none}
.plus{flex:none;width:22px;height:22px;position:relative}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%)}
.plus::before{width:18px;height:1.5px}
.plus::after{width:1.5px;height:18px;transition:transform .2s ease}
details[open] .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.body{margin:0 0 22px;padding:6px 0 6px 16px;border-left:1.5px solid var(--divider-strong);font-size:15px;line-height:1.5;color:var(--ink-body);max-width:62ch}
.body p+p{margin-top:10px}
.body a{border-bottom:1px solid var(--divider-strong)}

/* map */
#where{grid-template-columns:minmax(240px,1fr) minmax(0,1.3fr);align-items:start}
.map{max-width:680px;width:100%;margin-left:auto}
.map svg{width:100%;height:auto;display:block}
.africa-map path{fill:#ffffff;stroke:#b8b8b8;stroke-width:.9;stroke-linejoin:round}
.africa-map path.operating{fill:#171717;stroke:#171717}
.africa-map path.planned{fill:#e5e5e5}
.countries{list-style:none;margin-top:22px;display:flex;flex-direction:column}
.countries li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--divider);font-size:16px;color:var(--ink)}
.countries li span{color:var(--ink-muted);font-size:14px;text-align:right}
@media (max-width:1040px){#where{grid-template-columns:1fr}.map{margin-left:0;max-width:560px}}

/* bottom band */
.band{margin-top:auto;border-top:1px solid var(--divider);padding:40px 44px 44px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.band h3{font-size:36px;font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:18px;background:var(--btn);color:var(--btn-ink);padding:22px 30px;border-radius:2px;font-size:20px;font-weight:500;letter-spacing:-.01em}
.btn:hover{background:#000}
.btn svg{width:24px;height:24px}
.foot{border-top:1px solid var(--divider);padding:18px 44px 26px 24px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:13px;color:var(--ink-muted)}
.foot a:hover{color:var(--ink)}

@media (max-width:1280px){:root{--left:440px}h1{font-size:46px}.letter p.sub{font-size:26px}.section{grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:36px}}
@media (max-width:1040px){.section{grid-template-columns:1fr;gap:18px;padding-bottom:64px}.section .desc{max-width:60ch}}
@media (max-width:820px){
  .page{grid-template-columns:1fr}
  .letter{position:static;height:auto;border-right:0;border-bottom:1px solid var(--divider);padding:36px 22px 34px}
  .mark{margin-bottom:36px}
  h1{font-size:44px}.letter p.sub{font-size:24px}
  .sections{padding:36px 22px 8px}.section{padding-bottom:48px}
  .band{padding:32px 22px 36px}.band h3{font-size:28px}.btn{width:100%;justify-content:center}
  .foot{padding:16px 22px 24px}
}
@media (max-height:900px) and (min-width:821px){.letter{position:static;height:auto;overflow:visible}}