/* The country landing pages — /botswana, /kenya, /ghana and sixteen more.
 * ---------------------------------------------------------------------------
 * GENERATED. Do not edit: `python3 tools/tourism/build.py homes` overwrites it
 * from TEMPLATE in tools/tourism/home.py. Edit that.
 *
 * Nineteen pages carried this same 10 KB block inline, which is 197 KB of CSS
 * describing one page shape. Tokens, reset and primitives are not here; they
 * are in /styles/afrinkong.css, which these pages already link.
 */

/* Tokens, reset, type scale and primitives are in /styles/afrinkong.css.
   What follows is this page shape only. */
.mast{position:sticky;top:0;z-index:70;background:var(--c-bg);border-bottom:2px solid var(--c-primary)}
.mast-in{display:flex;align-items:center;gap:34px;padding:14px 0}
.mark{margin-right:auto;display:flex;flex-direction:column;gap:3px}
.mark-up{font-family:var(--fj-mono);font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-accent)}
.mark b{font-family:var(--fj-display);font-size:26px;font-weight:700;text-transform:uppercase;line-height:1;white-space:nowrap}
.mark span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap}
.routes{display:flex;gap:26px}
.routes a{font-family:var(--fj-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--c-muted);padding:4px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.routes a:hover{color:var(--c-primary);border-color:var(--c-accent)}
.btn{font-family:var(--fj-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-bg);background:var(--c-primary);padding:12px 20px;transition:background .2s}
.btn:hover{background:var(--c-accent)}
/* The masthead row, measured rather than guessed. The 1010px breakpoint was set
   before the Explore key existed; with it there the row wanted 1,271px on the
   longest country name and pushed "Plan a journey" 179px off a 1011 screen and
   126px off a 1024 one, on nineteen pages.

   Two in-page anchors — Highlights, Why go — came out of the nav as well: a
   masthead that scrolls with you is for leaving the page, and the page's own
   sections are a scroll away. Four routes left, all of them somewhere else.

   Below 1180 the routes go. Below 480 the mark's tagline goes with them: one
   line of nowrap mono, and it was the whole of the 320px overflow. */
@media(max-width:1180px){.routes{display:none}}
@media(max-width:560px){.frame{padding:0 20px}.mark b{font-size:20px}
  .mast-in{gap:12px}
  .btn{padding:10px 14px;font-size:10px;letter-spacing:.12em}}
@media(max-width:480px){.mark span{display:none}
  .mark-up{font-size:8px;letter-spacing:.2em}}
/* "Madagascar" and "South Africa" set at 20px are 147 and 150 pixels of nowrap
   on their own; with the Explore key and the call beside them the row wanted
   349 on a 320 screen. The country name is the one thing on this masthead that
   cannot be shortened, so everything around it gives way instead. */
@media(max-width:400px){.frame{padding:0 16px}.mast-in{gap:10px}
  .mark b{font-size:17px}}

.open{padding:calc(var(--sp-6) + 8px) 0 var(--sp-6);border-bottom:var(--fj-rule)}
.open-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.open-grid.no-shape{grid-template-columns:1fr;max-width:36em}
.open h1{font-size:clamp(46px,7vw,104px);margin:14px 0 0;letter-spacing:-.02em}
/* The tagline is the country's argument and gets its own line at display size,
   rather than being appended to the name in accent — which made the name the
   smaller half of its own headline. */
.open-tag{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,34px);line-height:1.05;color:var(--c-accent);margin-top:10px}
.lede{font-size:19px;color:var(--c-muted);margin-top:22px;max-width:38em}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* The window. Height-led, so every country is drawn at the same visual weight
   whatever its proportions — Chad and Rwanda should feel like the same kind of
   object on the page. */
.ct-window{height:min(58vh,520px)}
.ct-window svg{height:100%}

/* This country's year. Twelve cells beats a season paragraph: a visitor answers
   "can I go when I am free" in about a second. */
.ct-cal{padding:30px 0;border-bottom:var(--fj-rule)}
.ct-cal-h{font-family:var(--fj-mono);font-size:10px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:14px}
.ct-cal-row{display:grid;grid-template-columns:repeat(12,1fr);gap:0;border:var(--fj-rule)}
.ct-mon{display:flex;align-items:center;justify-content:center;padding:12px 0;
  border-right:var(--fj-rule);background:var(--c-bg)}
.ct-mon:last-child{border-right:0}
.ct-mon b{font-family:var(--fj-mono);font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--c-muted)}
.ct-mon.is-on{background:var(--c-accent)}
.ct-mon.is-on b{color:var(--c-bg);font-weight:700}
.ct-cal-note{margin-top:12px;font-size:15px;color:var(--c-muted);max-width:52em}

/* THE FOUR DEPTHS. One country, four questions, and until now three of them
   were unreachable from here.

   Four equal cells rather than a hierarchy: the reader knows which question
   they are asking and the page should not rank the answers for them. Rules
   instead of cards — a box around each would make four small brochures out of
   what is really one table of contents, and the site already has twelve card
   classes without inventing a thirteenth.

   The cell for the page you are on stays in the row rather than being dropped.
   Four depths with one missing reads as three depths; four with one marked
   reads as a position. */
.ct-depths{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--c-accent)}
.ct-depth{display:flex;flex-direction:column;gap:8px;padding:26px 26px 30px 0;
  border-right:var(--fj-rule);transition:background .2s}
.ct-depth:last-child{border-right:0;padding-right:0}
.ct-depth:not(:first-child){padding-left:26px}
.ct-depth:hover{background:var(--c-sand)}
.ct-depth-k{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-accent)}
.ct-depth b{font-family:var(--fj-display);font-size:clamp(17px,1.7vw,21px);
  font-weight:700;line-height:1.15;color:var(--c-primary)}
.ct-depth-n{font-size:14px;line-height:1.5;color:var(--c-muted)}
/* You are here: readable, unclickable-looking, still in the row. */
.ct-depth.is-here{opacity:.55}
.ct-depth.is-here:hover{background:none}
.ct-depth.is-here .ct-depth-n{font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase}
/* Two-up before one-up: four columns of fourteen-pixel prose stop working long
   before the screen is phone-width. */
@media(max-width:900px){
  .ct-depths{grid-template-columns:repeat(2,1fr)}
  .ct-depth:nth-child(2n){border-right:0;padding-right:0}
  .ct-depth:nth-child(2n+1){padding-left:0}
  .ct-depth:nth-child(n+3){border-top:var(--fj-rule);padding-top:26px}
}
@media(max-width:560px){
  .ct-depths{grid-template-columns:1fr}
  .ct-depth{border-right:0;padding:22px 0}
  .ct-depth:not(:first-child){border-top:var(--fj-rule);padding-left:0}
}

/* Who runs this country. The platform's whole claim is that somebody local
   does, so the page says which company, from where, and since when. */
.ct-close{padding-bottom:8px}
.ct-op{border-top:2px solid var(--c-accent);padding-top:22px;max-width:44em}
.ct-op>span{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-muted)}
.ct-op b{display:block;font-family:var(--fj-display);font-size:clamp(24px,3vw,36px);
  font-weight:700;text-transform:uppercase;line-height:1.04;margin-top:8px}
.ct-op-base{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-accent);margin-top:8px}
/* The operator block's own width is 44em of a 17px face — 748 pixels, 96
   average characters. Capped where the paragraph is, not where the block is,
   so the heading above it keeps the block's full width. */
.ct-op p{color:var(--c-muted);margin-top:12px;max-width:72ch}
.ct-op .af-go{margin-top:16px}
.ct-op--none b{font-size:clamp(20px,2.2vw,27px)}
@media(max-width:640px){.ct-cal-row{grid-template-columns:repeat(6,1fr)}
  .ct-mon:nth-child(6n){border-right:0}
  .ct-mon:nth-child(-n+6){border-bottom:var(--fj-rule)}}

/* The region strip: the page's one link outward, and what makes a country page
   part of an atlas rather than a leaflet. */
.ct-note-go{white-space:nowrap;color:var(--c-accent);border-bottom:1px solid var(--c-accent)}
/* WHERE IT IS: the locator, the atlas and the neighbours, in one section.
   It was a row of links called "Also in East Africa", which answered the
   question a reader has after the map rather than the one they have before it.
   The two maps are built by tools/tourism/countrymap.py and are identical in
   grammar on all fifty-four countries — only the geography changes. */
.ct-where{background:var(--fj-dust);border-bottom:var(--fj-rule);padding:var(--sp-5) 0}
.ct-where-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:var(--sp-5);align-items:start}
.ct-where-h{font-family:var(--fj-mono);font-size:10px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent);margin:0}
.ct-where-line{margin-top:10px;font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.ct-where-loc{margin-top:var(--sp-3);max-width:190px}
/* THE LAND IN BRIEF. A reading of the plate next to it, not a fact box bought
   in from somewhere else: every row is measured off the same projection or read
   out of the same border table, which is why there is no population and no area
   here. Set as a definition list because that is what it is — the label is the
   question and the value is the answer — and ruled row by row so the eye can
   run down the answers without reading the labels twice. */
.ct-brief{margin-top:var(--sp-4);border-top:var(--fj-rule);padding-top:14px}
/* The comparison, offered beside the map of where you are. Set as a door
   rather than a link: it leads somewhere with a different shape, and a reader
   deciding between two countries is about to do real work. */
.ct-compare{display:block;margin-top:var(--sp-4);padding:16px 18px;
  border-left:3px solid var(--c-accent);
  background:color-mix(in srgb,var(--c-accent) 6%,transparent);
  transition:background var(--t-fast) var(--ease)}
.ct-compare:hover{background:color-mix(in srgb,var(--c-accent) 11%,transparent)}
.ct-compare b{display:block;font-family:var(--fj-display);font-weight:700;
  font-size:16px;line-height:1.2}
.ct-compare:hover b{color:var(--c-accent)}
/* NOT --c-muted. Muted measures 4.51:1 on plain ivory — four hundredths
   over AA — and this card puts a 6% accent wash behind it, which drops it to
   4.21 and fails. The ground moved, so the ink moves with it: full ink, and the
   hierarchy carried by size and by the heading above it instead of by colour. */
.ct-compare span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;
  color:var(--c-primary)}
@media(pointer:coarse){.ct-compare{min-height:44px}}
.ct-brief-h{font-family:var(--fj-mono);font-size:9.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin:0}
.ct-brief-list{margin:12px 0 0}
.ct-brief-row{display:grid;grid-template-columns:78px minmax(0,1fr);
  gap:14px;padding:9px 0;border-bottom:1px solid
  color-mix(in srgb,var(--c-primary) 10%,transparent)}
.ct-brief-row:last-child{border-bottom:0}
.ct-brief-row dt{font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);padding-top:2px}
.ct-brief-row dd{margin:0;font-size:14px;line-height:1.45;color:var(--c-primary)}
/* A neighbour we publish is a link on the plate, in its shape and in its name.
   Hover and focus lift it out of the quiet layer rather than adding anything to
   it, so nothing moves and the map does not reflow. The focus ring is drawn as
   a stroke because an outline on an svg child is not reliably painted. */
.cm-link{cursor:pointer}
.cm-link path{transition:fill .18s}
.cm-link:hover path,.cm-link:focus-visible path{
  fill:color-mix(in srgb,var(--c-accent) 22%,var(--c-bg))}
.cm-link:hover .cm-near-name,.cm-link:focus-visible .cm-near-name{
  fill:var(--c-accent)}
.cm-link:focus-visible{outline:none}
.cm-link:focus-visible path{stroke:var(--c-accent);
  stroke-width:calc(var(--u) * .008)}
.ct-where-also{margin-top:var(--sp-4);font-family:var(--fj-mono);font-size:9.5px;
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)}
.ct-where-also+.ct-near-row{margin-top:10px}
.ct-where-map{margin:0;min-width:0}
.ct-where-map figcaption{margin-top:12px;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
@media(max-width:860px){.ct-where-in{grid-template-columns:minmax(0,1fr)}}
.ct-near{background:var(--fj-dust);border-bottom:var(--fj-rule);padding:26px 0}
.ct-near h2{font-family:var(--fj-mono);font-size:10px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:14px}
.ct-near-row{display:flex;flex-wrap:wrap;gap:0 34px}
.ct-near-row a{padding:8px 0;transition:color var(--t-fast) var(--ease)}
.ct-near-row a:hover{color:var(--c-accent)}
.ct-near-row em{font-style:normal;font-family:var(--fj-display);font-size:19px;font-weight:700;text-transform:uppercase}
.ct-near-row span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted);margin-left:10px}
@media(max-width:900px){.open-grid{grid-template-columns:1fr;gap:34px}
  .ct-window{height:min(46vh,360px);max-width:420px}
  .ct-near-row{gap:0 22px}}
/* A grid item will not shrink below the widest unbreakable thing inside it, and
   here that is the country's name set at the clamp's 46px floor: "MADAGASCAR"
   is 328 pixels on its own, so the whole opening column stayed 328 wide inside
   a 320 screen and took the stamp, the tagline, the lede and the calls out with
   it. The floor comes down before the phone does. */
@media(max-width:420px){.open h1{font-size:clamp(30px,10vw,46px)}}

.highs{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 32px}
.ct-high b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent)}
.ct-high h3{font-size:22px;margin:8px 0 8px}
.ct-high p{font-size:15px;color:var(--c-muted)}
.ct-high .ct-shot{display:block;margin-bottom:16px}
/* height:auto is what lets the <img> carry width and height. Without it both
   dimensions are definite from the attributes, aspect-ratio is ignored, and a
   4:3 slot renders at the photograph's own 16:9 — which is why these tags were
   written without them and 122 images across twenty pages reserved no space at
   all. With it the attributes are a ratio hint, aspect-ratio still decides the
   shape, and the box is held before the file arrives. */
.ct-high .ct-shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:900px){.highs{grid-template-columns:1fr 1fr;gap:28px 24px}}
@media(max-width:560px){.highs{grid-template-columns:1fr}}

/* Two columns, not three: these carry a sentence each now, and a sentence
   in a third of the measure sets to four words a line. */
.groups{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--c-primary)}
.ct-group{padding:26px 34px 22px 0;border-right:var(--fj-rule);border-bottom:var(--fj-rule)}
.ct-group:nth-child(2n){border-right:0;padding-right:0}
.ct-group>b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:14px}
.ct-group li{padding:13px 0;border-bottom:var(--fj-rule)}
.ct-group li:last-child{border-bottom:0}
.ct-group li b{display:block;font-family:var(--fj-display);font-size:16px;font-weight:700;text-transform:uppercase}
.ct-group li span{display:block;font-size:14px;line-height:1.5;color:var(--c-muted);margin-top:5px}
@media(max-width:900px){.groups{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.groups{grid-template-columns:1fr}.ct-group{border-right:0;padding-right:0}}

.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--c-accent)}
.ct-reason{padding:28px 34px 24px 0}
.ct-reason b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:10px}
.ct-reason h3{font-size:24px;margin-bottom:10px}
.ct-reason p{font-size:15px}
@media(max-width:760px){.reasons{grid-template-columns:1fr}}

.end{text-align:center;padding:92px 0}
.end h2{font-size:clamp(30px,4.6vw,60px)}
.end h2 em{font-style:normal;color:var(--c-accent)}
.end p{margin:16px auto 0;max-width:46ch;color:var(--c-muted)}
.end .acts{justify-content:center}

.foot{background:var(--fj-basalt);color:var(--fj-onbasalt);padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.foot-brand{font-family:var(--fj-display);font-size:26px;font-weight:700;text-transform:uppercase;color:var(--c-bg)}
.foot-brand span{display:block;font-family:var(--fj-mono);font-size:9.5px;font-weight:400;letter-spacing:.28em;color:var(--c-accent);margin-top:7px}
.foot-grid p{margin-top:14px;font-size:14.5px;max-width:32em;color:var(--fj-onbasalt-dim)}
.foot-col b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent);margin-bottom:12px;font-weight:400}
.foot-col a,.foot-col span{display:block;font-size:14.5px;padding:5px 0;color:var(--fj-onbasalt-dim)}
.foot-col a:hover{color:var(--c-bg)}
/* Where you are, at the foot of the page: the ladder you came down and the
   countries beside this one. It replaces nothing — the site map is still below
   — but it is the last chance to say that this country has neighbours. */
.foot-where{padding-bottom:26px;margin-bottom:26px;border-bottom:var(--fj-rule-dark)}
.foot-where ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.foot-where li+li::before{content:"/";margin-right:10px;color:var(--fj-onbasalt-dim);
  opacity:.5}
.foot-where a{color:var(--fj-onbasalt-dim)}
.foot-where a:hover{color:var(--c-bg)}
.foot-where [aria-current]{color:var(--c-accent)}
.foot-next{margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.foot-next>span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fj-onbasalt-dim);width:100%}
.foot-next a{font-family:var(--fj-display);font-size:19px;text-transform:uppercase;
  color:var(--fj-onbasalt-dim);border-bottom:1px solid transparent}
.foot-next a[data-border]{color:var(--c-bg)}
.foot-next a:hover{border-color:var(--c-accent)}
.foot-next i{font-style:normal;font-family:var(--fj-mono);font-size:9px;letter-spacing:.14em;
  margin-left:7px;color:var(--fj-onbasalt-dim)}
.foot-next p{width:100%;margin-top:6px;font-size:12.5px;line-height:1.6;
  color:var(--fj-onbasalt-dim)}
.foot-bar{margin-top:40px;padding:20px 0;border-top:var(--fj-rule-dark);font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fj-onbasalt-dim)}
.foot-bar a{border-bottom:1px solid var(--c-accent)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.001ms !important}}
@media(pointer:coarse){
  .mark{padding:5px 0}
  .foot-bar a{padding-block:6px;display:inline-block}
}