: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}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;height:60px;padding:0 28px;background:rgba(250,250,250,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--divider)}
.brand{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.brand img{height:32px;width:auto;display:block}
.menu{display:flex;gap:28px;font-size:14px;color:var(--ink-muted)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink)}
.burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative;margin-right:-8px}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .2s ease,top .2s ease}
.burger span:first-child{top:15px}.burger span:last-child{top:24px}
.menu-open .burger span:first-child{top:19.5px;transform:rotate(45deg)}.menu-open .burger span:last-child{top:19.5px;transform:rotate(-45deg)}
@media (max-width:900px){
  .brand span{display:none}
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;gap:0;background:var(--canvas);border-bottom:1px solid var(--divider);font-size:18px;color:var(--ink)}
  .menu a{padding:16px 22px;border-top:1px solid var(--divider)}
  .menu-open .menu{display:flex}
}

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

/* left column: the letter */
.letter{padding:44px 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:26px;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)}

/* right column */
.content{display:flex;flex-direction:column;min-width:0}
.sections{padding:52px 44px 24px 24px}
.section{display:grid;grid-template-columns:minmax(240px,400px) minmax(0,1fr);gap:48px;padding-bottom:72px}
.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{border-right:0;border-bottom:1px solid var(--divider);padding:32px 22px 30px}
  .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}
}