/* ================================================================
   hub.css — HUB_AFRICA_EDITORIAL_V1 (pairs with templates/market-hub.html)
   The three hub kinds (country, airport, destination) in the same
   editorial language as the home and route pages: ivory masthead with
   mono breadcrumbs and eyebrow, serif headline, an "at a glance" panel
   with a 1px ink border and the hard offset shadow, the photo as a
   framed plate; numbered sections separated by ink rules; journeys as
   editorial rows (index · kind · serif title · facts · price · arrow);
   airports as framed cards, destinations as chips; serif FAQ summaries;
   the in-page index as a mono list in a sticky right rail, a scrolling
   chip strip under the header on small screens. Tokens come from
   site.css (--page, --paper, --sand, --ink, --accent, --line, --display,
   --mono, --shadow-hard, --r-sm). site.css loads after this file, so
   shared classes (.eyebrow, .shell) keep their rules from there.
   pipeline/build.py copies site/assets/ into build/ and stamps the
   stylesheet links with a content hash.
   ================================================================ */

/* ---------- masthead ---------- */
.hb-mast{position:relative;background:var(--page);color:var(--ink);border-bottom:1px solid var(--line);padding:28px 0 56px}
.hb-mast::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line-soft)}
.hb-mast-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.hb-mast-copy{min-width:0;max-width:760px}
.hb-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 30px;padding:0;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hb-crumbs a{color:var(--body);text-decoration:none}.hb-crumbs a:hover{color:var(--accent)}
.hb-crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.hb-crumbs li:last-child{color:var(--ink);overflow-wrap:anywhere}
.hb-kicker{margin:0 0 18px;color:var(--ink)}
.hb-kicker .mk{color:var(--body)}
.hb-mast h1{max-width:20ch;margin:0 0 22px;font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.hb-lede{margin:0 0 26px;max-width:62ch;color:var(--body);font-size:17.5px;line-height:1.6}
.hb-rule{width:72px;height:1px;margin:0 0 22px;border:0;background:var(--ink)}
.hb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:1px solid var(--ink);border-radius:var(--r-sm);background:var(--ink);color:#fff!important;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none!important;transition:background .15s,border-color .15s}
.hb-btn:hover{background:var(--accent);border-color:var(--accent)}
.hb-btn--ghost{background:#fff;color:var(--ink)!important}.hb-btn--ghost:hover{background:var(--paper);border-color:var(--ink)}
.hb-btn svg{flex-shrink:0}

/* the "at a glance" panel: sibling of the route page's price card */
.hb-glance{position:relative;margin-top:36px;padding:22px 24px 24px;background:#fff;border:1px solid var(--ink);box-shadow:var(--shadow-hard);color:var(--ink)}
.hb-glance h4{margin:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hb-glance dl{margin:0;border-top:1px solid var(--line)}
.hb-glance dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.hb-glance dt{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--body)}
.hb-glance dd{margin:0;font-family:var(--display);font-weight:500;font-size:22px;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.hb-glance .hb-btn{width:100%;margin-top:18px}.hb-glance .hb-btn--ghost{margin-top:8px}
.hb-glance p{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}.hb-glance p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the masthead photo as a framed plate */
.hb-plate{margin:44px 0 0;position:relative}
.hb-plate img{display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover;border:1px solid var(--ink);box-shadow:var(--shadow-hard);background:var(--sand)}

/* ---------- layout ---------- */
.hb-page{padding:56px 0 24px;background:var(--page);color:var(--ink)}
.hb-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:start}
/* the index stays first in the DOM (content order unchanged); the grid places it right */
.hb-main{grid-column:1;grid-row:1;min-width:0;counter-reset:hbsec}
.hb-index{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 40px);overflow-y:auto;min-width:0;padding:20px 22px;background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow-hard)}
.hb-index h4{margin:0 0 10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hb-index ol{margin:0;padding:0;list-style:none}
.hb-index li{border-top:1px solid var(--line-soft)}.hb-index li:first-child{border-top:0}
.hb-index ol a{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:baseline;gap:0 8px;padding:9px 0;color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.4;text-decoration:none}
.hb-index ol a::before{content:"\25C6";font-size:8px;color:transparent;transition:color .15s}
.hb-index ol a:hover,.hb-index ol a.is-active{color:var(--accent);text-decoration:none}
.hb-index ol a:hover::before,.hb-index ol a.is-active::before{color:var(--accent)}
.hb-index ol a small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.hb-index li.sep{border-top:0;height:10px}
.hb-index .hb-btn{width:100%;margin-top:14px}.hb-index .hb-data-link{margin-top:8px;font-size:11.5px}

/* ---------- numbered editorial sections ---------- */
.hb-card{padding:40px 0 44px;background:transparent;border-top:1px solid var(--ink);scroll-margin-top:calc(var(--header-h) + 16px)}
.hb-main>.hb-card:first-child{border-top:0;padding-top:0}
.hb-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin:0 0 26px}
.hb-head h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.hb-head h2::before{counter-increment:hbsec;content:counter(hbsec,decimal-leading-zero);display:block;margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--accent)}
.hb-head p{margin:10px 0 0;max-width:64ch;color:var(--body);font-size:16px;line-height:1.6}
.hb-more{flex-shrink:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px;white-space:nowrap}
.hb-more:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}

/* airports: framed cards (home .ed-gw) */
.hb-places{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.hb-places a{display:flex;flex-direction:column;gap:10px;min-height:150px;padding:18px 18px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .18s,box-shadow .18s}
.hb-places a:hover{border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:var(--shadow-hard);text-decoration:none}
.hb-places .where{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hb-places h3{margin:0;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.hb-places .go{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.hb-places .go svg{color:var(--ink)}

/* destinations A–Z: letter strip + chips (home .ed-chips) */
.hb-az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.hb-az a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.hb-az a:hover{border-color:var(--ink);background:var(--paper);text-decoration:none}
.hb-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hb-chips li{scroll-margin-top:calc(var(--header-h) + 16px)}
.hb-chips a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;transition:border-color .15s,background .15s}
.hb-chips a:hover{border-color:var(--ink);background:var(--paper);text-decoration:none}
.hb-chips small{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em}

/* featured journeys: editorial rows (home .ed-routes), index from a CSS counter */
.hb-feat{counter-reset:hbfeat;border-top:1px solid var(--ink)}
.hb-feat a{display:flex;align-items:center;gap:18px;padding:18px 6px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .15s}
.hb-feat a:hover{background:var(--paper);text-decoration:none}
.hb-feat a::before{counter-increment:hbfeat;content:counter(hbfeat,decimal-leading-zero);flex:0 0 40px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted)}
.hb-feat .body{flex:1;min-width:0}
.hb-feat .where{display:block;margin:0 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hb-feat h3{margin:0 0 4px;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.hb-feat .meta{display:block;font-size:14px;line-height:1.5;color:var(--body);font-variant-numeric:tabular-nums}
.hb-feat .go{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.hb-feat .go svg{transition:transform .15s}
.hb-feat a:hover .go{color:var(--accent)}.hb-feat a:hover .go svg{transform:translateX(3px)}
.hb-price{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.hb-price b{font-size:17px;color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}

/* route groups: a mono group heading over the same rows */
.hb-dest{scroll-margin-top:calc(var(--header-h) + 16px)}
.hb-dest+.hb-dest{margin-top:30px}
.hb-dest-head{display:flex;align-items:baseline;gap:14px;margin:0;padding:0 0 10px;border-bottom:1px solid var(--ink)}
.hb-dest-head h3{margin:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hb-dest-head small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.hb-routes{margin:0;padding:0;list-style:none}
.hb-routes li{border-bottom:1px solid var(--line)}
.hb-routes a{display:flex;align-items:center;gap:18px;padding:14px 6px;color:var(--ink);text-decoration:none;transition:background .15s}
.hb-routes a:hover{background:var(--paper);text-decoration:none}
.hb-routes .lbl{flex:1;min-width:0}
.hb-routes .t{display:block;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.hb-routes small{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--body);font-variant-numeric:tabular-nums}
.hb-routes a>svg{flex-shrink:0;color:var(--ink);transition:transform .15s}
.hb-routes a:hover>svg{transform:translateX(4px);color:var(--accent)}
.hb-star{display:inline-block;margin-left:10px;padding:2px 7px;border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--accent);font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.hb-fine{margin:22px 0 0;color:var(--muted);font-size:13.5px;line-height:1.65}.hb-fine a{color:var(--accent)}
.hb-empty p{margin:0 0 18px;color:var(--body);font-size:16px;line-height:1.6}

/* about / planning / questions */
.hb-about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:26px 40px}
.hb-about>div{padding-top:16px;border-top:1px solid var(--line)}
.hb-about h3{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:23px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.hb-about p{margin:0;color:var(--body);font-size:16px;line-height:1.7;white-space:pre-line}
.hb-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 48px}
.hb-two>:only-child{grid-column:1/-1}
.hb-notes{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.hb-notes li{position:relative;padding-left:26px;font-size:16px;line-height:1.65;color:var(--body)}
.hb-notes li::before{content:"\25C6";position:absolute;left:0;top:8px;color:var(--accent);font-size:9px}
.hb-faq{border-bottom:1px solid var(--line-soft)}.hb-faq:last-of-type{border-bottom:0}
.hb-faq summary{position:relative;padding:16px 44px 16px 0;font-family:var(--display);font-size:20px;font-weight:500;line-height:1.3;color:var(--ink);cursor:pointer;list-style:none}
.hb-faq summary::-webkit-details-marker{display:none}
.hb-faq summary:hover{color:var(--accent)}
.hb-faq summary::after{content:"+";position:absolute;right:0;top:14px;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:16px;line-height:1;color:var(--ink)}
.hb-faq[open] summary::after{content:"\2212";background:var(--ink);color:#fff;border-color:var(--ink)}
.hb-faq p{margin:0;padding:0 0 18px;max-width:68ch;color:var(--body);font-size:16px;line-height:1.7;white-space:pre-line}

/* ---------- responsive ---------- */
@media (max-width:1080px){
.hb-mast{padding-bottom:44px}.hb-mast-grid{grid-template-columns:1fr;gap:28px}.hb-glance{max-width:520px;margin-top:0}.hb-plate{margin-top:36px}.hb-plate img{aspect-ratio:16/7}
.hb-page{padding-top:0}.hb-layout{grid-template-columns:minmax(0,1fr);gap:0}
.hb-main{grid-column:1;grid-row:2;padding-top:40px}
/* the index becomes a scrolling chip strip pinned under the header */
.hb-index{grid-column:1;grid-row:1;top:var(--header-h);max-height:none;overflow:visible;z-index:5;margin:0 -24px;padding:10px 0;background:var(--page);border:0;border-bottom:1px solid var(--line);box-shadow:none}
.hb-index h4,.hb-index .hb-btn,.hb-index li.sep{display:none}
.hb-index ol{display:flex;gap:8px;padding:0 24px;overflow-x:auto;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hb-index ol::-webkit-scrollbar{display:none}
.hb-index li{flex-shrink:0;border-top:0}
.hb-index ol a{display:inline-flex;align-items:baseline;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:11.5px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.hb-index ol a::before{display:none}
.hb-index ol a:hover{border-color:var(--ink);color:var(--ink)}
.hb-index ol a.is-active{border-color:var(--ink);background:var(--ink);color:#fff}.hb-index ol a.is-active small{color:rgba(255,255,255,.7)}
.hb-card,.hb-dest,.hb-chips li{scroll-margin-top:calc(var(--header-h) + 64px)}
.hb-two{grid-template-columns:1fr}
}
@media (max-width:860px){.hb-head{flex-direction:column;align-items:flex-start;gap:14px}.hb-card{padding:32px 0 36px}.hb-feat .go{display:none}.hb-feat h3{font-size:20px}}
@media (max-width:600px){
.hb-mast{padding:20px 0 36px}.hb-crumbs{margin-bottom:22px}.hb-mast h1{font-size:clamp(30px,8.5vw,40px)}.hb-lede{font-size:16px}.hb-plate img{aspect-ratio:4/3}
.hb-actions .hb-btn{flex:1 1 auto}.hb-glance dd{font-size:20px}
.hb-feat a{flex-wrap:wrap;gap:8px 14px;padding:16px 0}.hb-feat a::before{display:none}.hb-feat .body{flex-basis:100%}
.hb-routes a{flex-wrap:wrap;gap:6px 14px;padding:14px 0}.hb-routes .lbl{flex-basis:100%}.hb-routes a>svg{display:none}
.hb-price{flex-direction:row;align-items:baseline;gap:6px;text-align:left}
.hb-faq summary{font-size:18px}
}
@media print{.hb-plate,.hb-actions,.hb-index,.hb-glance .hb-btn{display:none!important}.hb-layout{grid-template-columns:1fr}.hb-main{grid-column:1;grid-row:auto}.hb-faq summary::after{display:none}details>*:not(summary){display:block}}