/* The gateway's own stylesheet — everything that styles the homepage.
 * ---------------------------------------------------------------------------
 * THIS WAS 180 KB OF <style> INSIDE index.html.
 *
 * Inline CSS is the right call for the handful of rules that decide the first
 * paint. It is the wrong call for a hundred and eighty kilobytes of it, and it
 * had become that gradually: every wave of homepage work added rules to a block
 * that nobody could cache, on the one page every visitor sees, so a reader who
 * came back tomorrow re-downloaded every rule for every section they had
 * already scrolled past.
 *
 * As a file it is cached like any other. The HTML drops from 570 KB to about
 * 390, and a second visit pays for the markup and nothing else. The cost is one
 * request on the first visit, render-blocking in the head exactly as
 * afrinkong.css already is — which is the same trade the rest of the site
 * has always made.
 *
 * ORDER MATTERS AND IS PRESERVED. The <style> block sat AFTER the link to
 * afrinkong.css, so its rules won ties on equal specificity. The link that
 * replaced it sits in the same place, second. Moving it above afrinkong.css
 * would silently hand every tie to the other file.
 */
/* The tokens and the reset are NOT redefined here.
   ---------------------------------------------------------------------------
   They used to be: this file carried its own copy of the palette, the type
   stacks and the reset, which meant the design system had two definitions and
   the homepage was the one that quietly went stale — it was still on the old
   accent and the old metadata grey after both had been corrected for contrast
   everywhere else. afrinkong.css is loaded above and is now the only place any
   of it is declared. What follows is layout, which is genuinely this page's. */
.wa-frame{max-width:1240px;margin:0 auto;padding:0 44px}
.wa-stamp{display:block;font-family:var(--fj-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--c-accent)}
/* 44em of a 17px face is 748 pixels and 96 average characters a line. The
   comfortable range for continuous prose is 45-85; past 90 the eye loses
   the start of the next line on the way back. 72ch measures 78 average
   characters in this face — ch is the width of a zero, which here is 1.09
   times the average lowercase letter, so the two are not the same number. */
/* The note under a section head is the sentence that says why the section
   exists, and it was the same measure as body prose — 92 characters where the
   head above it is 30. Narrower, so the two read as one lockup. */
.wa-note{max-width:62ch;margin-top:16px;color:var(--c-muted);max-width:72ch}
/* The section lede, where a section writes one rather than using .wa-note.
   The wonders and Trans Afrique generators both emit .wa-say and neither ever
   had a rule for it, so two of the longest paragraphs on the homepage were
   setting to the full 1240px frame — 148ch measured, against the 92ch the
   prose check allows and roughly triple a comfortable measure. It is the same
   measure .wa-note takes, and it takes the cine zone's narrower one below for
   the same reason .wa-note does. */
.wa-say{max-width:72ch;margin-top:16px}
.wa-note-go{white-space:nowrap;color:var(--c-accent);border-bottom:1px solid var(--c-accent)}

/* ---- masthead ------------------------------------------------------------------
   Fixed, so the pinned hero stage can own the full viewport height beneath it. */
.wa-mast{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--c-bg);border-bottom:2px solid var(--c-primary)}
.wa-mast-in{display:flex;align-items:center;gap:34px;padding:14px 44px}
.wa-mark{margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.wa-mark b{font-family:var(--fj-display);font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;white-space:nowrap}
.wa-mark span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap}
/* Five items, not eight. Destinations, Experiences and Compare came out when
   the universal index shipped: two of them were anchors to sections further
   down this same page, the third is one keystroke away from anywhere on the
   site, and eight items plus the Explore key pushed "Begin a journey" — the
   page's primary call — sixty-six pixels off the right edge of a 1440 screen.
   A navigation bar is not an index. The index is the index. */
.wa-routes{display:flex;gap:26px}
.wa-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}
.wa-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)}
@media(max-width:1010px){.wa-routes{display:none}}
/* "Begin a journey" wrapped to two lines against the mark at phone widths, which
   was survivable on a cream bar and is not once the bar sits on a photograph. */
@media(max-width:560px){.wa-frame{padding:0 20px}.wa-mast-in{gap:16px;padding:14px 20px}.wa-mark b{font-size:20px}
  .btn{padding:9px 12px;font-size:9px;letter-spacing:.1em;white-space:nowrap}}

/* ---- hero: the Africa window -----------------------------------------------------
   The continent comes first. The window opens on the map — every destination
   marked, hover to read one, click to enter it — and choosing a destination
   replaces the map with that country's own outline, with a photograph masked
   into it where one exists and the shape filled in accent where none does yet.

   There is no pinned scroll. With twenty-two destinations a scroll-driven
   rotation stops being a journey and becomes a slideshow, and it cost three
   screens of scrolling before the page began. Selection is the right interaction
   at this size, and it behaves identically on a phone. */
/* THE HERO'S GROUND
   -----------------
   Deep forest, and only here. The rest of the page stays ivory, so scrolling
   out of the first screen is a release rather than a change of subject — the
   hero is the plate and the site is the paper it is bound into.

   It joins the dark-ground list in the design system rather than overriding
   colours by hand, which means it inherits the two corrections that list
   exists for: the accent goes to its lit variant (4.53:1 on forest, against
   burnt sienna's 1.9) and the metadata voice goes to muted gold (6.02:1,
   against the grey's 2.4). A hundred-odd rules written against --c-accent and
   --c-muted are correct on this surface without knowing they are on it.

   The continent gains from the ground more than anything else does. Sand land
   against ivory is 1.45:1 and needed 088 to be visible at all; against forest
   it is 12.6:1 and the coastline draws itself. */
.wa-open{position:relative;background:var(--c-primary);color:var(--c-bg)}
/* The calls, which were forest on ivory and cannot be forest on forest. */
.wa-open .wa-act{border-color:var(--c-gold);color:var(--c-bg)}
/* THE PRIMARY CALL IS A BORDER, NOT A BLOCK.
   It was a solid terracotta slab, which is the single loudest object on the
   page and the reason the whole hero read as a landing page rather than as a
   printed opening. A filled accent button asks to be clicked; a bordered one
   states that it can be. The difference matters here because the hero is not
   selling a click, it is establishing that somebody has thought about this.

   So the primary call becomes ivory — a full-weight ivory rule at 1.5px around
   ivory type on the forest ground, against the gold hairline the secondary
   calls carry. The two are told apart by weight and colour of line, not by one
   being a poster and the other being text. On hover it fills ivory and the
   type goes forest: the invert happens on intent, where a fill is a response
   rather than a permanent shout. */
.wa-open .wa-act.go{background:transparent;border-color:var(--c-bg);
  border-width:1.5px;color:var(--c-bg)}
.wa-open .wa-act.go:hover,.wa-open .wa-act.go:focus-visible{
  background:var(--c-bg);border-color:var(--c-bg);color:var(--c-primary)}
/* .wa-open's faint and plain variants went with the second and third hero
   calls. The unscoped .wa-act.faint / .plain below are still in use further
   down the page and stay. */
/* The rails: rules that were ink on paper become paper on ink. */
.wa-open .wa-regs,.wa-open .wa-ticks{border-color:var(--c-bg)}
.wa-open .wa-reg,.wa-open .wa-tick{color:var(--c-bg);border-right-color:var(--fj-rule-dark)}
/* With the continent and the primary call both off terracotta, the pressed
   region tab was the last accent block left in the hero — and being the only
   one made it the loudest object on the first screen. A rail tab is not the
   most important thing on this page. It takes the same mark the tick rail
   below it already takes: the ground and the type swap, and state is ivory. */
.wa-open .wa-reg[aria-pressed="true"]{background:var(--c-bg);color:var(--c-primary)}
.wa-open .wa-tick[aria-current]{background:var(--c-bg);color:var(--c-primary)}
.wa-open .wa-lens,.wa-open .wa-tags-in{border-color:var(--fj-rule-dark)}
.wa-open .wa-tag{color:var(--c-bg);border-color:var(--fj-rule-dark)}
/* The lens rail takes the same mark as the region rail above it. Two rails
   sitting one on top of the other, both saying "this one is on", were saying
   it in two different languages — ivory in the first, a terracotta slab in the
   second — and the slab won, so the loudest thing in the hero was whichever
   experience the reader last pressed. State in this section is ivory. */
.wa-open .wa-tag[data-on]{background:var(--c-bg);color:var(--c-primary);
  border-color:var(--c-bg)}
.wa-open .wa-terrain span{border-color:color-mix(in srgb,var(--c-gold) 42%,transparent)}
/* The readout. Its name is the one place ivory has to be at display size. */
/* On the dark ground every swatch takes the ivory ring the map's countries
   already have. Without it "an operator of ours" is forest on forest and the
   key has two entries where the map has three — the same fault the map itself
   was saved from by being stroked. */
.wa-open .wa-win-key span::before{box-shadow:0 0 0 1px var(--c-bg)}
.wa-open /* The readout is the map speaking. It was set at the weight of a section
   heading, which put it in competition with AFRICA two hundred pixels to its
   left — two display voices on one screen, one of which is a caption. It keeps
   its size and loses the argument: the region above it carries the mono voice,
   the name is the display face, and the sentence under it is prose. */
.wa-win-cap b{color:var(--c-bg)}
.wa-open .wa-win-go{color:var(--c-bg)}
.wa-open .wa-h1-big,.wa-open .wa-h1-rest{color:var(--c-bg)}
/* One screen, but not more than one composition.
   Everything above the rail is a fixed height once AFRICA has stopped growing —
   headline, lede, three calls — and the rail is pinned to the foot of the stage
   by margin-top:auto. So every pixel the stage gains beyond the height the
   composition wants goes into the one gap between them:

     1366 and below     0px
     1440, 1600        56px
     1920             234px
     2560             594px

   At 1920 the copy and the map both finish by 740 and the rail sits alone in
   the bottom-left corner with a quarter of a screen of nothing above it. At
   2560 it is two thirds of a screen.

   The cap is the height the composition is actually built for — 880 is 1440x900
   plus a little air — and past it the hero simply stops being taller and the
   next section starts to show at the fold, which is not a loss. It is what the
   page below is for. */
.wa-open-stage{display:flex;flex-direction:column;justify-content:center;
  min-height:min(calc(100vh - var(--mast)), 880px);padding:96px 0 0}
.wa-open-stage>.wa-frame{width:100%}
/* Three children, two columns: the headline and the tail of the copy stack in
   column one and the window spans both rows of column two. The window sits
   between them in the DOM rather than after both, which is what lets the phone
   put the map directly under the headline in source order — no visual reorder,
   so tab order and reading order stay the same thing. */
/* The first screen. One word at a size nothing else on the site may reach, the
   sentence that qualifies it at a fifth of that, and the promise in accent
   underneath — three weights, so the eye is told what to read in what order
   instead of being handed a block. AFRICA is set to the frame's width: it is
   architecture, not a heading, and the rest of the page hangs from it.

   The composition is deliberately not a two-column grid. The type holds the
   left three-fifths; the continent is taken out of the flow entirely and bled
   off the right edge of the screen, rising until it crosses behind the word.
   The overlap is over the Atlantic, which is empty, and the headline is made
   pointer-transparent so nothing on the map is caught underneath it. */
.wa-open-stage{position:relative}
/* The frame keeps its own measure and its own padding — the type is narrowed
   inside it, not the frame narrowed around the type, or the whole block drifts
   to the middle of the screen. And nothing here may be a positioned ancestor,
   or the continent's `right: 0` resolves against this column instead of the
   screen and stops short of the edge it is meant to run past. */
.wa-open-grid{display:flex;flex-direction:column;justify-content:center;
  flex:1 1 auto;z-index:2}
.wa-open-say,.wa-open-tail{max-width:min(66%,820px);position:relative}
/* The stage is taller than the composition wants above 1600, and every pixel of
   that goes into one gap between the calls and the foot — 203px at 1920, which
   111 established is allowed because the foot is a band across both columns.
   Allowed is not the same as good: some of it belongs to the copy, which was
   sitting in the top third with the lede tight under a 224px headline. The lede
   gets the air, the gap gives it up, and the composition stops being top-heavy. */
.wa-open-tail{padding-top:22px}
@media(min-width:1360px){.wa-open-tail{padding-top:38px}
  .wa-win{--fj-sheet-margin:26px}}
@media(min-width:1600px){.wa-open-tail{padding-top:56px}}
.wa-h1{display:block;margin:10px 0 0;pointer-events:none}
/* The clamp is the value with scripting off, and it is an approximation of the
   right answer rather than the right answer — see the fitter below the <h1>.
   Left alone it renders AFRICA at 109% of its column above 1600 and at 62% of
   it at 768. */
.wa-h1-big{display:block;margin-left:-.0235em;font-size:clamp(74px,15.5vw,232px);line-height:.78;
  letter-spacing:-.035em;font-weight:700}
/* The two lines under AFRICA are proportions of it, not of the window.
   AFRICA is fitted to its column now, and the column is a different function of
   the viewport than a vw-based clamp is, so a scale built on vw drifts against
   the thing it is supposed to be subordinate to: the qualifying line measured
   0.243 of the headline at 1440, 0.253 at 1920 and 0.265 at 390. Small numbers,
   but the whole hierarchy of the first screen rests on them holding.

   The fitter publishes the size it solved for as --fj-h1 and these key off it,
   at the ratios the composition already had at 1440 — the width it was drawn
   at. The clamps are floors for the phone, where a strict ratio would take the
   promise line down to 14px, and they are the value with scripting off. */
.wa-h1-rest{display:block;line-height:1;letter-spacing:-.015em;margin-top:.12em;
  font-size:clamp(26px, calc(var(--fj-h1, 3.6vw) * .244), 74px);
  margin-left:-.0577em}

/* Optical alignment, measured rather than eyeballed.
   The two lines were flush by their boxes and not by their ink. Painted to a
   canvas at 1440 and read column by column, AFRICA's first lit pixel sat 5px
   inside its box and ISN'T's sat 3px inside its — so the biggest word on the
   site hung two pixels right of the line under it, and both hung right of the
   lede, whose ink starts at zero. Three edges pretending to be one.
   Each line now hangs by its own sidebearing, expressed in em so it holds at
   every clamp step: 0.0235em for the display cut, 0.0577em for the smaller one.
   The ink of all three lands on the same vertical, which is what the frame edge
   was always supposed to mean. */
/* Pretty rather than balance: this is prose, it runs to two lines on a phone
   and one on a desktop, and evening a two-line paragraph makes the first line
   short for no reason a reader can see. pretty leaves the rag alone and only
   refuses to leave a word on its own — 98% / 37% at 430 becomes something the
   line-breaker had to work for. */
.wa-open .wa-lede{font-size:17.5px;color:var(--c-muted);max-width:32em;margin-top:0;
  text-wrap:pretty}
.wa-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.wa-act{display:inline-block;font-family:var(--fj-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:13px 22px;border:1px solid var(--c-primary);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.wa-act i{font-style:normal;margin-left:9px}
.wa-act.plain{border-color:transparent;padding-left:4px;padding-right:4px;color:var(--c-muted)}
.wa-act.plain:hover{color:var(--c-accent)}
.wa-act.go{background:var(--c-primary);color:var(--c-bg)}
.wa-act.go:hover{background:var(--c-accent);border-color:var(--c-accent)}
.wa-act.faint{border-color:var(--c-border);color:var(--c-muted)}
.wa-act.faint:hover{border-color:var(--c-primary);color:var(--c-primary)}

/* The bleed is a distance, not a share of the screen.
   `right: 0` reads as "run the continent off the edge", and at 1440 it does
   exactly that: the frame is 1240 wide and centred, so its right edge is at
   1340 and the map's is at 1440 — a hundred pixels past. At 1920 the same
   declaration puts the frame's edge at 1580 and the map's at 1920, and the
   composition comes apart: three hundred and forty pixels of nothing between
   the column the type is set in and the object that is meant to be crossing
   behind it. Measured across thirteen widths that gap is the single largest
   thing wrong with this hero above 1440.

   So the overhang is pinned at 100px past the frame and the map stops there,
   which resolves to right:0 at every width up to 1440 — the composition that
   was tuned — and holds the same relationship above it. max() rather than a
   media query because the frame's own width is already a min(). */
.wa-win{position:absolute;top:calc(var(--mast) + 1vh);width:min(50vw,640px);
  /* THE SHEET IS NOT TRIMMED BY THE WINDOW.
     The bleed was 100px, which at 1240 and above resolves to right:0 — the map's
     own box ended exactly on the viewport edge, so the island marks sat half off
     the screen and the continent's right side had no margin at all. That reads
     as a map cropped by the browser rather than a sheet lying on a surface,
     which is the whole idea 114 built the shadow and the engraved coast for.
     A sheet needs an edge you can see the whole of. */
  --fj-bleed:100px;
  /* Only where there is room for it. Below 1360 the bleed has already collapsed
     to nothing and the map is as narrow as the composition allows, so taking
     another 26px off its right edge walks the readout left into the calls —
     measured, 12x14 of overlap at 1180 and 6x46 at 1280. The margin is what a
     wide window can afford, not a constant. */
  --fj-sheet-margin:0px;
  right:max(var(--fj-sheet-margin),
            calc((100vw - min(1240px, 100vw)) / 2 - var(--fj-bleed)));
  z-index:1;display:grid;grid-template-columns:1fr;gap:12px}
/* The frame is the continent's own box, not a rectangle it is letterboxed into.
   It was 640 wide and 450 tall against a viewBox of 1000x1060, so the map
   painted 425x450 of it and 107 pixels down each side were empty. Two things
   followed from that and both were invisible until they were measured:

   The bleed was not happening. At 1440 the frame's right edge is the screen's,
   and the continent's right edge was 107px inside it — seven pixels short of
   the text frame it is supposed to run a hundred pixels past. The composition's
   own comment says the continent is bled off the right edge of the screen and
   rises until it crosses behind the word. It stopped short of both.

   And the map was small. 425 pixels of continent across a 1240-pixel frame, at
   every desktop width from 1180 to 2560, because the width was pinned and the
   height was capped at 450 whatever the stage had to give.

   aspect-ratio makes the width follow the height, margin-left:auto holds it to
   the right edge, and the height is what the stage can spare: the viewport less
   the masthead clearance and the readout under the map.

   With a floor, because that subtraction is against the viewport and the stage
   is not the viewport — it has a min-height, and on a short screen its content
   makes it taller than one. Measured on a 1440x500 window the stage was 707px
   tall and the map was 96x102: a hundred pixels of continent with six hundred
   pixels of room around it, because the formula had subtracted a fixed 320 from
   a 500-pixel viewport. 1920x540 gave 134x142. Below about 300px the countries
   stop being things a pointer can hit, so that is the floor, and the stage
   grows to take it. */
.wa-win-frame{position:relative;margin-left:auto;aspect-ratio:1000/1060;width:auto;
  /* The readout beneath the map is measured rather than assumed. This was a
     flat 320px, which is what the readout comes to at 487 wide with its caption
     on two lines. 083 narrowed it to clear the calls on short windows, the
     caption went to three lines, and at 464 wide it is 266px tall — so the
     readout ran 4px past the foot of the stage at 1366 and 26px at 1180, across
     the rule that ends the section. It cannot push back: the whole column is
     positioned absolutely and contributes nothing to the stage's height.
     The fitter publishes --fj-readout so the map takes exactly what is left;
     the fallback is the 487-wide case, which is right wherever it applies. */
  height:clamp(300px,
    calc(100vh - var(--mast) - var(--mast) - 1vh - 14px - var(--fj-readout, 215px)),
    560px)}
.wa-win-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.965);transition:opacity .6s ease,transform .8s ease;pointer-events:none}
.wa-win-state[data-on]{opacity:1;transform:none;pointer-events:auto}
.wa-win-shape{width:100%;height:100%;overflow:visible}
/* The map is zoomed by moving its viewBox, so it has to clip: with overflow
   visible the parts of the continent outside the current view keep painting,
   straight across the headline beside it. */
.wa-map-svg{width:100%;height:100%;overflow:hidden}
/* The fill now comes from the design system's .af-window-fill; this stays
   only to say so, because the class it named is no longer emitted. */
/* The readout sits under the map now, inside the frame padding, so the map
   itself can run past the right edge of the page. */
/* The readout is held to the right of the stage, and its box must not reach
   back across the calls in the other column. At a flat 520px it did: on a short
   window the map drops to its 300px floor, the readout rides up with it into the
   row the calls are on, and at 1280 the two boxes crossed by 31x46 and at 1180
   by 72x46. Tall windows never showed it, because there the readout sits two
   hundred pixels below the calls and the widths never come into it.

   34vw is the width that keeps it clear of the copy column — which is itself
   66% of a frame that is min(1240px, 100vw) — at every width from 1024 to 1360,
   and 520 goes on binding above that. */
.wa-win-side{display:flex;flex-direction:column;padding-right:44px;margin-left:auto;
  max-width:min(520px, 34vw);text-align:right;align-items:flex-end}
/* Twenty-three readouts in one box, one shown at a time — and the box has to be
   the height of the tallest of them, or the one that overruns it lands on
   whatever is underneath.

   It was 146px, with a note above it saying that was tall enough for the
   tallest readout, and that the tallest was the region one. Measured, the
   tallest is the idle one — the state the page opens in — at 163px, and its
   last line, the "see all destinations" link, hung seventeen pixels out of the
   box and crossed the legend under it by three at 1920, 1440, 1366 and 1180.
   Four more fixed heights further down this stylesheet were each a different
   guess at the same number.

   Stacking with grid instead of absolute positioning removes the guess: every
   cap is placed in the same single cell, so they still overlay and still
   cross-fade, and the container is exactly as tall as the tallest of the
   twenty-three. Hidden ones keep contributing their height, which is what makes
   it a constant rather than something that changes as you move across the map —
   the box measures the same before and after a selection, so nothing under it
   reflows. */
.wa-win-caps{display:grid;grid-template-columns:100%;flex:0 0 auto;width:100%}
/* Twenty-two captions stacked in one box, one shown at a time. Opacity alone
   hides them from the eye and from nothing else: all twenty-two stayed in the
   tab order, so a keyboard user crossing the hero took twenty-two stops on
   links they could not see, each one putting the focus ring on nothing.
   `visibility` removes an element from the tab order and the accessibility tree
   as well; the zero-second delayed transition keeps it visible for the length
   of the fade out, so the animation is unchanged. */
.wa-win-cap{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s;pointer-events:none}
.wa-win-cap[data-on]{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .45s ease,visibility 0s linear 0s}
/* THE MONO VOICE
   ---------------
   Three sizes, and each one means something. Counted across the hero it was
   seven combinations of size and tracking — 8.5/.16, 9/.16, 9.5/.16, 9.5/.2,
   10/.18, 10/.2, 11/.18 — which is not a scale, it is what happens when every
   component picks its own number. In one composition, in the same face, at
   sizes two and a half pixels apart, none of the differences carried meaning.

     11px / .18em    a call. The things you can do from here: the button and
                     the readout's way out of the hero.
     10.5px / .2em   the top control. The region tabs, and only those — the one
                     row that changes what the whole instrument is showing.
     9.5px / .155em  everything finer, and the readouts of it. The fifty-four
                     country names, the eight lenses, the eyebrow, the operator
                     line, the map's key and the terrain chips.

   Countries and lenses are peers — one picks a place, one picks a way of
   looking at it — so they share a register instead of sitting half a pixel
   apart, and the labels that report a selection share it with the controls
   that made it.

   THIS BLOCK DRIFTED ONCE AND THE DRIFT WAS INVISIBLE. It described three
   sizes while the hero was rendering six: 11/10.5/10 and 9.5/9/9, three of them
   inside a single pixel of each other and two of them the same pixel at
   different tracking. Half a pixel is not a hierarchy step, it is what happens
   when each component picks its own number and the comment above them stops
   being true. The count is asserted in tools/browser-checks.js at twelve
   widths; this text is the reason for the number, not the guarantee of it.

   The rule is that the tighter tracking goes with the things you press. */
.wa-win-cap b{letter-spacing:-.015em}
.wa-win-region{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.155em;text-transform:uppercase;color:var(--c-muted)}
/* The name of whatever the map is showing: the second-largest display item in
   the hero, and the last one that was still sized off the viewport after 072.
   Measured against the headline it held 0.178 from 1280 up, slid to 0.169 at
   1180, and collapsed to 0.136 at 768 — where the copy column is at its widest
   and the headline at its largest, so the map's caption was at its smallest
   relative to it exactly where the map is at its biggest. */
.wa-win-cap b{display:block;font-family:var(--fj-display);font-weight:700;
  text-transform:uppercase;line-height:1.02;margin-top:4px;
  font-size:clamp(26px, calc(var(--fj-h1, 2.9vw) * .178), 54px)}
/* Two names are long enough to take a second line, and because all fifty-five
   captions share one box a second line for one of them is a second line for all
   of them — which put the readout forty pixels below the hero the day Central
   African Republic joined. The ratio is stepped down rather than the size
   fixed, so this still tracks the headline at every width the way the rule
   above does. gateway.py measures the name and writes data-long; nothing here
   has to know which countries they are. */
.wa-win-cap[data-long] b{
  font-size:clamp(20px, calc(var(--fj-h1, 2.9vw) * .124), 38px)}
.wa-win-cap[data-long="24"] b{
  font-size:clamp(18px, calc(var(--fj-h1, 2.9vw) * .108), 33px)}
/* Balanced, because it is a caption of one or two lines and its second line
   was a widow: at 390 it broke 99% / 8% — one word, "here.", alone under a full
   line — and at 360 84% / 33%. A caption under a map is read as a shape before
   it is read as a sentence, and a shape with one word hanging off it reads as
   something that failed to load. balance rather than pretty because at two
   lines pretty only guarantees the last line is not tiny, while balance evens
   both, which is what a caption wants. */
.wa-win-tag{display:block;font-size:15px;color:var(--c-muted);margin-top:7px;
  text-wrap:balance}
.wa-win-op{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.155em;text-transform:uppercase;color:var(--c-accent);margin-top:12px}
.wa-win-go{display:inline-block;margin-top:10px;font-family:var(--fj-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:2px solid var(--c-accent);padding-bottom:4px}
/* A key, not a caption. It sat as a loose row of three under the readout with
   nothing tying it to the map it explains; it now carries the same hairline the
   rails carry and sits hard against the map's own right edge, so the eye reads
   map-then-key rather than three more words. */
.wa-win-key{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;
  margin-top:4px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--c-bg) 22%,transparent)}
/* The map's key is a readout of what the map is drawing, so it takes register C
   with the rest of them rather than being a sixth setting of its own. */
.wa-win-key span{display:flex;align-items:center;gap:7px;font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.155em;text-transform:uppercase;color:var(--c-muted)}
.wa-win-key span::before{content:"";width:10px;height:10px;flex:0 0 auto}
.wa-win-key span[data-tier="ours"]::before{background:var(--c-tier-ours)}
.wa-win-key span[data-tier="live"]::before{background:var(--c-accent-fill)}
/* A ten-pixel square of ink on ink is a square nobody can find, so the key's
   swatches carry the same hairline the countries carry. The key describes the
   map; it does not get its own brighter version of it. */
.wa-win-key span::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-bg) 34%,transparent)}
.wa-win-line{min-height:22px;margin-bottom:10px;font-size:14.5px;color:var(--c-accent);max-width:60em}

/* The map is the signature, and it says three things.
   ---------------------------------------------------------------------------
       SAND        Africa. The land itself, the ground everything sits on.
       TERRACOTTA  a destination. All fifty-one of them without a company of
                   ours, which is to say every country the ground journey
                   covers and does not also own the operator in.
       FOREST      ours. The three countries we run a company in.

   The middle line said "twenty-two" while the atlas grew to fifty-four, and
   the legend under the map used to key the sand as "Bookable" — which made
   the coastline a category a traveller could be in.

   It used to be a 13% tint of the ink for the continent and a 46% tint of the
   accent for a destination — grey and pale pink, two shades of almost-nothing,
   with no way to tell at a glance which of them we actually run. The
   three fills above are three different colours doing three different jobs, and
   the legend under the map names them.

   Ivory strokes keep the borders legible between two warm fills; the pressed
   state is burnt sienna, which is darker than terracotta and warmer than
   forest, so it is unambiguous against either.

   A BORDER IS A HAIRLINE AT EVERY SCALE

   1.4 was 1.4 *user units*, and the map is drawn in a 1000x1060 viewBox
   letterboxed into a frame. Measured, that put the borders between countries at
   0.49px on a phone, 0.66px at 1440 and 0.74px at 1920 — under one device pixel
   everywhere, so the browser could not draw a line and drew a grey smear
   instead. It is the reason the interior of the continent looked washed rather
   than engraved.

   And it went the other way on zoom: the same 1.4 units at Rwanda's fourteen-
   fold viewBox is a nine-pixel band of ivory across a country three hundred
   pixels wide.

   non-scaling-stroke takes the stroke out of the user-unit space entirely, so
   it is one CSS pixel at the continent and one CSS pixel at Rwanda, which is
   what a border on a map is. */
/* THE LAND
   --------
   Sand is #E9DDCA and the page is #F6F1E7, which is 1.19:1. That is not a
   colour difference, it is a rounding error: everywhere a country with no
   destination in it meets the sea — the Mauritanian coast, the Guinea coast,
   Liberia, the whole Atlantic edge north of Senegal — the continent simply
   stopped existing. The destinations read at 3.31:1 and the operators at 14.28,
   so what the map showed was twenty-two coloured shapes floating in the
   approximate arrangement of Africa, with Africa itself invisible behind them.

   Fifteen percent burnt sienna into the sand: 1.45:1 against the page, which is
   enough to draw a silhouette, and warm rather than grey — mixing toward the
   forest instead gets there too and turns the landmass the colour of a wet
   pavement.

   The number that had to be protected is the other one. A destination has to
   stay the loudest thing on the map, and terracotta against this land is
   2.28:1 — still half again the contrast the coastline has against the page,
   so the reading order is unchanged: destinations first, then the continent,
   then the sea. Taking the land darker than this closes that gap. */
/* THE LADDER THAT WAS BUILT HERE, AND WHY IT IS NOT HERE.
   The design blueprint names this map by hand — "never a fill larger than a
   button, and never a continent" — and the argument is good: an accent that
   covers half the viewport is not an accent, it is the ground, and the page
   then has no accent left to spend anywhere. So the whole map was rebuilt on
   the other principle. The tiers stopped being colours and became quantities
   of light on the ink the hero is already printed in: four rungs mixed from
   forest toward sand, an ivory hairline for the coast, terracotta demoted to a
   two-pixel stroke under the pointer. It was measured, tuned twice — once
   because mixing toward ivory arrives at wet pavement, once because a tone
   picked at 1440 is a pale slab at 768 where the map is most of the screen —
   and rendered at every width.

   Then both maps were put side by side and looked at, and the company chose
   this one. That is the right way round. A design document is an argument, and
   an argument that cannot survive being tested against the thing itself is not
   one worth keeping; the blueprint's own method section says every page was
   opened in a browser and looked at, and this is that method applied to the
   blueprint. The sentence about continents stands everywhere else on the site.
   It is overruled here, once, on the object it was written about, by the
   people whose company it is.

   What the ladder was right about is kept. The true-size overlay in the scale
   section is basalt rather than terracotta — it is a silhouette of somewhere
   the reader already knows and ink draws that better than pigment. The hero's
   primary call is a bordered ivory rule rather than a filled slab. Both rails
   mark state in ivory rather than each in a different colour. Those were never
   the map, and none of them were what was preferred back.

   The exemption is recorded in tools/design-checks.js, scoped to this one
   selector on this one surface, so it stays visible in every run rather than
   becoming a rule quietly nobody keeps. Everything below is the palette as it
   was before the ladder, unchanged, and the derivations above it still hold.

   ---------------------------------------------------------------------------
   One thing from the rebuild is a real fix and stays, further down: the lens
   rules carry two attributes, which outranks the three-class rule that hides
   the countries' hit circles, so pressing a lens put six pale bullseyes over
   the islands and one over Dakar. That was true before the ladder too — the
   discs were terracotta rather than pale — and nobody had seen it because
   nobody had looked at the map with a lens pressed. Matched at four now. */
:root{--c-land:color-mix(in srgb, var(--c-sand) 85%, var(--c-accent));
  /* Deep forest with enough gold in it to exist on a deep forest ground. Pure
     --c-primary is the tier's colour and measures 1.00:1 against the hero, so
     the three countries we run were literally holes in the continent. Derived
     rather than picked, like --c-land: 76% forest is 1.51:1 against the ground
     — above the 1.35 the coastline holds — 6.52:1 against the land beside it,
     and still 2.86:1 darker than a destination, so the three tiers stay three. */
  --c-tier-ours:color-mix(in srgb, var(--c-primary) 76%, var(--c-gold))}
/* INK AND PIGMENT, NOT UI FILLS.
   The countries were flat polygons with a 1px white stroke, which is what makes
   a map read as a political infographic rather than as a printed object. Three
   things change that, and none of them is a texture:

     the boundary is ivory at a third opacity and half the weight — a survey
       line drawn in the same ink as the paper, not a divider;
     the continent carries an engraved outer edge, darker than any internal
       boundary, so the coast reads as the edge of the land rather than as one
       more border;
     the paper sits on the ground rather than floating in it: a soft shadow
       under the whole sheet, offset down, at the opacity of something lying on
       a table.

   The shadow is a filter, and filter makes an element a containing block for
   fixed descendants. It is safe here — the map is nowhere near the fixed
   picture in the window band — but the rule is real and the band's own note
   explains it. Nothing that wraps .wa-seam-pic may borrow this. */
/* Two shadows, not one. A single soft drop is a glow; paper on a surface has a
   tight contact shadow where it touches and a wide diffuse one further out, and
   the eye reads the pair as thickness. Both are offset down, from the same light
   the whole page is lit by. */
.wa-win-state .wa-map-svg{filter:drop-shadow(0 2px 2px rgba(6,18,14,.55))
                                 drop-shadow(0 14px 30px rgba(6,18,14,.45))}
.wa-map-rest,.wa-map-live{filter:url(#fj-ink)}
/* Ivory at 46% was right when the land was a pale sand and the border had to
   cut into it. Against the ink ladder the same line is the brightest thing in
   the country, and fifty of them turn the continent into a wireframe. At 22%
   the boundary is a fact you can find when you look for it and not a structure
   you see first — which is the correct order for a border on a map whose
   argument is where we go, not who governs what. */
.wa-win-state .wa-map-rest path{fill:var(--c-land);
  stroke:color-mix(in srgb,var(--c-bg) 46%, transparent);stroke-width:.75;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.wa-win-state .wa-map-live path,.wa-win-state .wa-map-live circle{
  stroke:color-mix(in srgb,var(--c-bg) 46%, transparent);stroke-width:.75;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;transition:fill .2s}
/* The engraved coast, drawn from the survey rather than faked by stroking the
   countries harder — which only makes every border heavier.

   IT IS THE ONLY THING THAT DRAWS THE LAND THAT IS NOT AFRICA, AND IT WAS
   DRAWING IT IN BLACK ON BLACK. This layer carries all eighteen coastlines in
   the view, not only the continent's: Iberia, Italy, Greece, Turkey, Cyprus,
   the Levant, Arabia. Africa has fills behind it — fifty-two country polygons
   in terracotta — so ink there reads as an engraved edge, which is what it was
   chosen for. Everything above and east of the Mediterranean has no fill at
   all. `.wa-map-rest` holds a single path, so for that half of the map the
   coast is not the edge of the drawing, it *is* the drawing. Deep ink at 62%
   against a deep forest sea measures 1.06:1, and at that number the drawing
   does not exist: the Mediterranean read as the top of the image rather than
   as a sea with a far side, and Israel, Lebanon and the whole Levant were not
   on the map at all.

   The line goes to ivory for exactly the reason the fills stayed terracotta —
   contrast is against what a thing is drawn on, and these two halves are drawn
   on opposite grounds. Over the sea, ivory at 58% is the only version of this
   line that exists. Over terracotta it lands as a pale rim, which is what a
   printed chart does at a coast in any case, and it does not compete with the
   internal borders because those are thinner and stay where they were.

   Narrower with it, 1.6 rather than 2: a line that is finally visible does not
   need the weight it was carrying while it was trying to be. */
.wa-map-coast path{fill:none;stroke:color-mix(in srgb,var(--c-bg) 58%, transparent);
  stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
/* AN OPERATOR OF OURS HAS TO READ AGAINST THE GROUND IT IS ON.
   The tier is deep forest, and the hero's ground is deep forest, so Namibia,
   Cameroon and Uganda were drawn as holes in the continent — 1.1:1 against the
   ocean around them. This is the same fault 108 found with gold and the same
   answer: a tier has to contrast with what it sits on. The fill stays deep
   forest, which is the mark of ours; the gold keel is what makes it a country
   rather than a gap. */
.wa-win-state .wa-map-live[data-tier="ours"] path,
.wa-win-state .wa-map-live[data-tier="ours"] circle{
  stroke:var(--c-gold);stroke-width:1.7}
/* Madagascar keeps its distance and stops being adrift: the channel is 400km
   and there is a boat. */
.wa-map-strait{fill:none;stroke:color-mix(in srgb,var(--c-gold) 34%, transparent);
  stroke-width:1.4;stroke-dasharray:2 6;stroke-linecap:round}
.wa-map-isles text{font-family:var(--fj-mono);font-size:21px;letter-spacing:.1em;
  text-anchor:end;fill:color-mix(in srgb,var(--c-bg) 62%, transparent)}

/* ---- the cartographic layers ---------------------------------------------------
   Ocean first. The dark green ground was empty, which is what made the sheet
   look like a shape rather than a chart; the graticule is the projection's own
   meridians and parallels, curved because that is what an azimuthal projection
   does to them. Very faint — it should be texture until you look for it. */
.wa-map-grat path{fill:none;stroke:color-mix(in srgb,var(--c-gold) 22%, transparent);
  stroke-width:.7;vector-effect:non-scaling-stroke}
.wa-map-grat--minor path{stroke:color-mix(in srgb,var(--c-gold) 9%, transparent);stroke-width:.5}
.wa-map-coord text{font-family:var(--fj-mono);font-size:17px;letter-spacing:.12em;
  fill:color-mix(in srgb,var(--c-gold) 46%, transparent)}
/* Water on the land, over the fills and under nothing else: a river is a fact
   about the ground and a border is an argument about it. */
.wa-map-river{fill:none;stroke:color-mix(in srgb,var(--c-primary) 42%, transparent);
  stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linecap:round}
.wa-map-lake{fill:color-mix(in srgb,var(--c-primary) 34%, transparent);
  stroke:color-mix(in srgb,var(--c-primary) 52%, transparent);stroke-width:.6;
  vector-effect:non-scaling-stroke}
/* Journeys. Dashed, thin and gold — an expedition path, not an airline route.
   The dash is in user units so it scales with the map when a region is flown to,
   which keeps it looking drawn rather than rendered. */
.wa-map-route{fill:none;stroke:var(--c-gold);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:9 7;opacity:.72;transition:opacity .25s,stroke-width .25s}
/* Pointing at one journey should not mean reading three. The group dims and the
   one under the pointer comes up — the same move the region rail makes on the
   map, so the page has one idea of what "this one" looks like. A route is
   aria-hidden and not focusable: it is a drawing of the three itineraries that
   section 06 lists as text, and a second keyboard route to the same three would
   be the duplicate 082 spent a commit removing. */
.wa-map-routes:hover .wa-map-route{opacity:.28}
.wa-map-routes .wa-map-route:hover{opacity:1;stroke-width:3}
/* Cities. A gold point is a place; the ring is the target. Three are named —
   the three with a photograph in the collection — because labelling eleven puts
   type across half of West Africa. */
.wa-map-city-dot{fill:var(--c-gold);r:4.6}
.wa-map-city-ring{fill:none;stroke:color-mix(in srgb,var(--c-gold) 55%, transparent);
  stroke-width:1;vector-effect:non-scaling-stroke}
.wa-map-city-say{font-family:var(--fj-mono);font-size:21px;letter-spacing:.1em;
  fill:var(--c-bg);opacity:0;transition:opacity .25s}
.wa-map-city[data-lead] .wa-map-city-say{opacity:.92}
/* A city is a link now, so it needs a focus ring that reads on a photograph of
   ink: the halo grows and the name arrives, which is the same thing hover does.
   Keyboard and pointer should not be two different maps. */
.wa-map-city{cursor:pointer}
/* outline:none is safe here and only here: the ring is replaced two rules
   below, on :focus-visible, by the halo growing and the name arriving — a
   rectangle around a point on a map is not where the place is. */
.wa-map-city:focus{outline:none}
.wa-map-city:focus-visible .wa-map-city-ring{stroke:var(--c-bg);stroke-width:2;r:10}
.wa-map-city:focus-visible .wa-map-city-say{opacity:1}
.wa-map-city-ring{transition:r .18s ease,stroke .18s ease}
.wa-map-city:hover .wa-map-city-ring{stroke:var(--c-bg);r:10}
.wa-map-city:hover .wa-map-city-say,.wa-map-city:focus-within .wa-map-city-say{opacity:1}
.wa-map-city:hover .wa-map-city-dot{fill:var(--c-bg)}
.wa-map-rose{fill:none;stroke:color-mix(in srgb,var(--c-gold) 40%, transparent);
  stroke-width:1;vector-effect:non-scaling-stroke;
  /* The rose belongs to the sheet, not to the interface: it should grow and
     shrink with the paper as the map flies to a region, which non-scaling-stroke
     on its ring would prevent. The ring keeps a screen-constant hairline because
     a compass drawn with a heavy ring is a logo; the needle scales. */
  transition:opacity .3s}
.wa-map-rose path{vector-effect:none}
.wa-map-rose path{fill:color-mix(in srgb,var(--c-gold) 55%, transparent);stroke:none}
.wa-map-rose .wa-map-rose-x{fill:none;stroke:color-mix(in srgb,var(--c-gold) 30%, transparent)}
.wa-map-rose text{font-family:var(--fj-mono);font-size:17px;letter-spacing:.1em;
  text-anchor:middle;fill:color-mix(in srgb,var(--c-gold) 70%, transparent);stroke:none}
.wa-win-state .wa-map-live[data-tier="live"] path,
.wa-win-state .wa-map-live[data-tier="live"] circle{fill:var(--c-accent-fill)}
.wa-win-state .wa-map-live[data-tier="ours"] path,
.wa-win-state .wa-map-live[data-tier="ours"] circle{fill:var(--c-tier-ours)}

/* WHAT A LENS DOES TO THE MAP.
   ---------------------------------------------------------------------------
   Pressing WILDLIFE does not empty the continent and does not fly to a single
   best answer. It re-weights what is already drawn, in the same three steps
   the country field in /journey uses, so the two surfaces say the same thing
   in the same colours:

     leads    the country says this is what it is for  — full terracotta
     region   its region says so and it does not       — one step back
     open     written up here too                      — quiet, and still there

   Deliberately no grey-out and no dropped opacity on the third. A country that
   does not lead on wildlife is not unavailable, it is a country with a
   different answer, and the moment the map dims it the interface has started
   saying no on Afrinkong's behalf. `open` sits one further step toward the
   land it is drawn on and keeps its border, its title and its link.
   `ours` is left alone throughout: owning the company there is a different
   axis from what a traveller asked for, and overpainting it would lose a fact
   to answer a question that was not about it. */
.wa-win-state .wa-map-live[data-want="leads"][data-tier="live"] path,
.wa-win-state .wa-map-live[data-want="leads"][data-tier="live"] circle{
  fill:var(--c-accent-fill)}
.wa-win-state .wa-map-live[data-want="region"][data-tier="live"] path,
.wa-win-state .wa-map-live[data-want="region"][data-tier="live"] circle{
  fill:color-mix(in srgb, var(--c-accent-fill) 62%, var(--c-land))}
.wa-win-state .wa-map-live[data-want="open"][data-tier="live"] path,
.wa-win-state .wa-map-live[data-want="open"][data-tier="live"] circle{
  fill:color-mix(in srgb, var(--c-accent-fill) 12%, var(--c-land))}

/* And a cue that is not colour.
   Three tints of one hue is a category encoding that fails for anybody who
   cannot separate them, and measured, region and open were 1.30:1 apart — the
   readout says how many lead on this, but a map should not need to be read to
   be understood. The strongest tier also carries the heaviest border, which is
   how an atlas has always marked the thing it wants you to look at, and costs
   nothing to anybody who can see the colour anyway. */
.wa-win-state .wa-map-live[data-want="leads"] path,
.wa-win-state .wa-map-live[data-want="leads"] circle{
  stroke:var(--c-bg);stroke-width:1.6}
/* HOVER SAYS "THIS ONE". IT DOES NOT SAY "AND ALSO IT IS SOMETHING ELSE NOW".
   Every hovered country was filled burnt sienna, whatever it had been. On a
   destination that is a step within the same hue and reads as emphasis. On one
   of our own operators it replaced deep forest with sienna outright — so
   pointing at Cameroon made Cameroon look like Kenya, and the map's entire
   three-tone argument (the continent, a destination here, an operator of ours)
   collapsed to two under the pointer.

   Both tiers now move within themselves and the thing that actually says "this
   one" is the stroke, which goes from the page's ivory to the accent at two
   pixels and is the same signal on all three tiers, including on a country
   with no fill of its own.

   On the ink ladder the fill change goes away entirely. A hovered country
   rises one rung — the same amount, from wherever it was — and terracotta is
   left to do the only thing it should do on a map this size: draw the
   two-pixel line around the one country under the pointer. That line is
   smaller than a button. The fill never was. */
.wa-win-state .wa-map-live:hover path,.wa-win-state .wa-map-live:focus path,
.wa-win-state .wa-map-live.on path,.wa-win-state .wa-map-live:hover circle,
.wa-win-state .wa-map-live.on circle{stroke:var(--c-accent);stroke-width:2}
.wa-win-state .wa-map-live[data-tier="live"]:hover path,
.wa-win-state .wa-map-live[data-tier="live"].on path,
.wa-win-state .wa-map-live[data-tier="live"]:hover circle,
.wa-win-state .wa-map-live[data-tier="live"].on circle{fill:var(--c-accent)}
.wa-win-state .wa-map-live[data-tier="ours"]:hover path,
.wa-win-state .wa-map-live[data-tier="ours"].on path{
  fill:color-mix(in srgb, var(--c-primary) 66%, var(--c-accent))}
.wa-win-state .wa-map-live{cursor:pointer}
/* HOVER IS AN ELEVATION, NOT A REPAINT.
   Pointing at a country repainted its fill, which on a three-tier map means the
   tier changes under the pointer — 091 fixed the worst of that by keeping each
   tier inside its own hue, but a fill change is still the wrong verb. What the
   reader is doing is picking a sheet off the pile. So the country keeps its
   colour and gains a keel and a shadow: gold at full weight, and a drop shadow
   at the angle the whole sheet is already lit from. */
.wa-map-live path,.wa-map-live circle{transition:filter .18s ease}
/* Everything added to the map since 114 animates: the hover keel, the city halo,
   the route dim. The stylesheet's reduced-motion block zeroes transitions
   globally, but it does it with a wildcard on `*` — and an SVG geometry property
   animated through `r` is not covered by a rule written for CSS transitions on
   ordinary boxes in every engine. Named here so the answer does not depend on
   which engine is reading. */
@media(prefers-reduced-motion:reduce){
  .wa-map-live path,.wa-map-live circle,.wa-map-city-ring,.wa-map-city-say,
  .wa-map-route,.wa-city-art img{transition:none !important}
}
.wa-map-live:hover path,.wa-map-live:focus-visible path,.wa-map-live.on path,
.wa-map-live:hover circle,.wa-map-live.on circle{
  stroke:var(--c-gold);stroke-width:2.2;
  filter:drop-shadow(0 3px 6px rgba(6,18,14,.55))}

/* ---- the scale ---------------------------------------------------------------------
   The one place on the page where the interface is allowed to make an argument
   rather than present a choice. It is quiet: a flat continent, one outline laid
   inside it, and a number. */
.wa-scale{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;
  border-top:2px solid var(--c-primary);padding-top:30px}
.wa-scale-map svg{width:100%;max-width:500px;height:auto;display:block;margin:0 auto}
.wa-scale-land{fill:color-mix(in srgb,var(--c-primary) 13%,transparent)}
.wa-scale-in{opacity:0;transition:opacity var(--t-mid) var(--ease)}
.wa-scale-in[data-on]{opacity:1}
/* The true-size overlay was the largest single terracotta shape on the site —
   a country-sized accent fill making an argument that does not need colour to
   land. An atlas prints this comparison in the darkest ink it has, laid over
   the pale land, because the whole point is a silhouette: the reader is meant
   to see the outline of somewhere they already know sitting inside Africa. Ink
   does that better than pigment and costs the page nothing. */
.wa-scale-in path{fill:var(--c-primary);fill-opacity:.82}
.wa-scale-btns{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--c-accent)}
/* The true-size comparison is the page's one piece of argument-by-geometry and
   its controls were the quietest thing in the section. They take the weight the
   region rail carries, because they do the same job: choose what is drawn. */
.wa-scale-btn{background:none;border:0;border-right:var(--fj-rule);border-bottom:var(--fj-rule);
  cursor:pointer;text-align:left;padding:16px 18px 14px 0;transition:background var(--t-fast) var(--ease)}
.wa-scale-btn:nth-child(2n){border-right:0;padding-right:0}
.wa-scale-btn:hover{background:color-mix(in srgb,var(--c-bg) 92%,var(--c-accent))}
.wa-scale-btn b{display:block;font-family:var(--fj-display);font-size:19px;font-weight:700;
  text-transform:uppercase;line-height:1.05}
.wa-scale-btn span{display:block;font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);margin-top:6px}
.wa-scale-btn[aria-pressed="true"]{background:var(--c-primary)}
.wa-scale-btn[aria-pressed="true"] b{color:var(--c-bg)}
.wa-scale-btn[aria-pressed="true"] span{color:color-mix(in srgb,var(--c-accent) 42%,var(--c-bg))}
.wa-scale-sum{display:flex;align-items:baseline;gap:12px;margin-top:30px}
.wa-scale-sum b{font-family:var(--fj-display);font-size:clamp(48px,7vw,92px);font-weight:700;
  line-height:.9;color:var(--c-accent)}
.wa-scale-sum span{font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-muted)}
/* The comparison's own caption carries the fact the whole section exists for —
   that Mercator is why everybody remembers Africa as the size of Greenland — and
   it was set as a footnote to the drawing rather than as its point. */
.wa-scale-note{margin-top:18px;font-size:15px;color:var(--c-muted);max-width:40em}
@media(max-width:900px){.wa-scale{grid-template-columns:1fr;gap:30px}
  .wa-scale-map svg{max-height:none;max-width:460px;margin:0 auto}}

/* ---- the answer -------------------------------------------------------------------
   A tourism site answers "I want wildlife" with six cards and lets you sort it
   out. This answers with one country and a reason to go there, including the
   thing not to do first — "then don't start with Kilimanjaro". It is the only
   place on the site with an opinion, which is why it is set like a pull quote
   and not like a card. */
/* The answer arrives when an experience is pressed, and it arrived by simply
   existing — display:none to display:block, no transition possible across it.
   A panel that appears without a beat reads as a page jump rather than as an
   answer to something the reader just did. */
.wa-answer{display:none;border-top:2px solid var(--c-accent);padding:24px 0 6px;margin-top:18px}
.wa-answer[data-open]{animation:wa-answer-in .34s cubic-bezier(.2,.6,.2,1) both}
@keyframes wa-answer-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wa-answer[data-open]{animation:none}}
.wa-answer[data-open]{display:block}
.wa-pick[hidden]{display:none}
.wa-pick{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:start}
/* The hook is the site's opinion — "then don't start with Kilimanjaro" — and
   it is the closest thing this platform has to a voice. It was set above the
   recommendation at the weight of a label. */
.wa-pick-hook{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.7vw,38px);line-height:1.04;letter-spacing:-.01em}
/* The region a recommendation is in, which is how a reader places it before
   reading the name. It matched the metadata voice everywhere else, which is
   right — this only records that it was checked, not changed. */
.wa-pick-where{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.155em;
  text-transform:uppercase;color:var(--c-muted)}
.wa-pick-body b{display:block;font-family:var(--fj-display);font-size:26px;font-weight:700;
  text-transform:uppercase;color:var(--c-accent);margin:6px 0 8px}
.wa-pick-body p{font-size:14.5px;color:var(--c-muted)}
/* The reason, which is the half of the recommendation that earns it. Italic
   alone made it read as an aside to the summary above; it is the argument. */
.wa-pick-why{margin-top:12px;font-style:italic;color:var(--c-ink);
  border-left:2px solid var(--c-accent);padding-left:14px}
.wa-pick-go{display:inline-block;margin-top:14px;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--c-accent);padding-bottom:4px}
@media(max-width:820px){.wa-pick{grid-template-columns:1fr;gap:16px}}

/* ---- the atlas rungs: Africa, region, country ------------------------------------
   Three rows that are one control. The map is not an illustration with buttons
   under it — the buttons are how you move through it, and each one is a view the
   viewBox flies to. A visitor who presses "East Africa" is not filtering a list;
   they are looking at East Africa. */
.wa-regs{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--c-primary)}
/* The homepage's Trans Afrique section is gone and its rules went with it.
   Four cards explaining a crossing, three screens into a homepage, to a reader
   who had not decided they wanted one — the only part of it a door can use is
   the four names, and the door carries those itself now. About seventy lines
   of .wa-trans CSS were deleted rather than left to be proved dead later. */

/* THE WONDERS
   ---------------------------------------------------------------------------
   Two at hero scale, then a row of six. The experience grid directly above
   this is eight identical tiles, and eight identical tiles under eight
   identical tiles is the same section printed twice — the rhythm has to break
   or the reader stops reading.

   No photographs yet. Every wonder here is a real place with real pictures
   waiting, and the moment they resolve these cards take them; until then the
   type carries it on basalt, which is quieter than a stock photograph of
   somewhere that might not be the place. */
/* Left-aligned and larger. In the centred cine mode this headline was the
   third centred column in a row and read as a template; against the door's
   full-bleed photograph directly above it, a centred paragraph is the weakest
   available answer. The editorial mode puts the number on a rule across the
   top and starts the headline at the left margin, like the opening of an
   article — which is what an editorial collection is. */
.wa-wonders .wa-head h2{max-width:20ch;font-size:clamp(34px,4.6vw,64px);
  line-height:1.02;letter-spacing:-.02em}
.wa-wonders .wa-say{max-width:58ch}
/* A GALLERY, IN FOUR MOVEMENTS — intro, two featured, six supporting, close.
   It was two large text cards over a row of four small text cards, which is a
   contact sheet and not a gallery: nothing on it was ever the thing itself, and
   a section arguing that some places do not need explaining had nothing on it
   but explanation. The hierarchy is now the argument. One photograph large
   enough to stop you, two wonders given room, then the breadth.

   FIVE PHOTOGRAPHS CARRY THE WHOLE SECTION, and that is on purpose. The
   repository holds a picture OF four of the twenty-three wonders; the rest are
   drawn on their strand's ground, exactly as a country without a photograph is
   drawn on its region's. Filling the grid from the general wildlife and desert
   frames was the easy version and would have put an unplaceable photograph
   under a named place. */

/* The argument, and one picture at the size the argument deserves. Text left
   at 40%, image right at 60% — the reverse of the usual editorial split,
   because here the picture IS the point and the paragraph is the caption. */
.wo-intro{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:var(--sp-4);align-items:end;margin-top:var(--sp-5)}
.wo-intro-shot{margin:0;order:2;aspect-ratio:16/10;overflow:hidden;
  background:color-mix(in srgb,var(--c-bg) 8%,transparent)}
.wo-intro-shot img{width:100%;height:100%;object-fit:cover;display:block}
.wo-intro-say{order:1;padding-bottom:6px}
.wo-intro-say p{font-size:clamp(17px,1.7vw,22px);line-height:1.5;
  color:var(--fj-onbasalt);max-width:40ch;margin:0}
.wo-intro-n{margin-top:18px !important;font-family:var(--fj-mono);
  font-size:9.5px !important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-gold) !important}

/* The two featured. Each is a whole object rather than a heading with a rule
   over it: a photograph where there is one, the strand's ground where there is
   not, and the type sitting inside the frame either way so the pair balances
   whether or not both have a picture. */
.wo-lead{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);
  margin-top:var(--sp-5)}
.wa-wonders .wo-lead{margin-top:var(--sp-5)}
.wo-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(360px,46vh,520px);overflow:hidden;
  border-top:3px solid var(--c-accent-fill)}
.wo-feat-shot{position:absolute;inset:0}
.wo-feat-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* The scrim is on the frame, not the photograph: a filter on the img would
   cost a repaint on every scroll and this section is tall. */
.wo-feat.has-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--fj-basalt) 88%,transparent) 0%,
    color-mix(in srgb,var(--fj-basalt) 62%,transparent) 42%,
    color-mix(in srgb,var(--fj-basalt) 12%,transparent) 100%)}
/* The featured wonder with no photograph is a STATEMENT, not a gap. Given the
   same treatment as its neighbour it came out an empty dark rectangle that read
   as an image which had failed to load — the one thing a section about places
   worth crossing a continent for cannot afford. So it is typeset instead: the
   strand named at the top, then the line at display size doing the work the
   photograph does opposite. Justified to the top, so the pair reads as two
   different kinds of object rather than one good one and one broken one. */
.wo-feat.no-shot{justify-content:center;
  background:color-mix(in srgb,var(--c-bg) 7%,transparent)}
.wo-feat.no-shot[data-strand="wildlife"]{
  background:color-mix(in srgb,var(--c-gold) 15%,transparent)}
.wo-feat.no-shot[data-strand="earth"]{
  background:color-mix(in srgb,var(--c-accent) 16%,transparent)}
.wo-feat.no-shot .wo-feat-in{padding-top:var(--sp-3)}
.wo-feat-line{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.3vw,34px);line-height:1.06;letter-spacing:-.012em;
  color:var(--fj-onbasalt);margin-top:20px;max-width:15ch}
.wo-feat-in{position:relative;z-index:2;padding:var(--sp-4) var(--sp-3) var(--sp-3)}
.wo-feat-no{display:block;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.24em;color:var(--c-gold)}
.wo-feat-no i{font-style:normal;text-transform:uppercase;letter-spacing:.2em}
.wo-feat-no i::before{content:"\2002/\2002";opacity:.55}
.wo-feat-name{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.015em;
  color:var(--c-bg);margin:10px 0 0;max-width:12ch}
.wo-feat .wo-say{font-size:clamp(17px,1.5vw,21px);max-width:28ch;
  color:var(--fj-onbasalt)}
.wo-feat .wo-where{margin-top:14px}

/* The supporting gallery — the wonders this repository holds a photograph of,
   and only those. An earlier pass filled six cards regardless and drew a tinted
   4:3 plate where the picture was missing; on the page those read as three
   broken images rather than as a decision. A gallery holds pictures. */
.wo-rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3) var(--sp-3);margin-top:var(--sp-4)}
.wo-shot{aspect-ratio:4/3;overflow:hidden;margin-bottom:14px}
.wo-shot img{width:100%;height:100%;object-fit:cover;display:block}
.wo-card-in{height:100%}

/* And the rest, named. Being in a list beside a photograph of somewhere else
   is not a demotion — it is an index, and it says how much more there is
   without pretending to show what it cannot. */
.wo-more{margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:var(--fj-rule-dark)}
.wo-more-h{font-family:var(--fj-mono);font-size:10px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--c-gold);margin:0}
.wo-more-list{list-style:none;margin:18px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 30px}
.wo-more-list li{padding:9px 0;border-bottom:1px solid
  color-mix(in srgb,var(--c-bg) 12%,transparent)}
.wo-more-list b{display:block;font-family:var(--fj-display);font-weight:700;
  text-transform:uppercase;font-size:17px;line-height:1.1;color:var(--c-bg)}
.wo-more-list span{display:block;margin-top:5px;font-family:var(--fj-mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-gold)}
.wo-more-list span a{color:inherit;border-bottom:1px solid transparent}
.wo-more-list span a:hover{border-color:var(--c-gold)}
.wo-name{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,1.7vw,25px);line-height:1.04;letter-spacing:-.005em;
  color:var(--c-bg);margin:0}
.wo-where{margin-top:9px;font-family:var(--fj-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-gold)}
.wo-where a{color:inherit;border-bottom:1px solid transparent;transition:border-color .2s}
.wo-where a:hover{border-color:var(--c-gold)}
.wo-say{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--fj-onbasalt-dim);
  max-width:34ch}

/* The close: one line, then how the collection is cut. Said under the gallery
   rather than over it — a reader wants the taxonomy after seeing some of the
   thing, not before. */
.wo-close{margin-top:var(--sp-5)}
.wa-wonders .wo-close{margin-top:var(--sp-5)}
.wo-close-line{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3vw,44px);line-height:1.04;letter-spacing:-.015em;
  color:var(--c-bg);max-width:18ch;margin:0}
.wo-strands{list-style:none;margin:var(--sp-4) 0 0;padding:var(--sp-4) 0 0;
  border-top:var(--fj-rule-dark);display:grid;gap:2px 30px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wo-strands li{padding:11px 0;display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"name n" "say say";align-items:baseline;column-gap:12px}
.wo-strands b{grid-area:name;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent-lit);font-weight:400}
.wo-strands span{grid-area:say;font-size:14px;color:var(--fj-onbasalt-dim);
  margin-top:5px;max-width:32ch}
.wo-strands i{grid-area:n;font-style:normal;font-family:var(--fj-mono);font-size:10px;
  color:var(--fj-onbasalt-dim)}

@media(max-width:1000px){
  .wo-rest{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .wo-intro{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .wo-intro-shot{order:1}.wo-intro-say{order:2}
  .wo-lead{grid-template-columns:1fr;gap:var(--sp-3)}
  .wo-feat{min-height:clamp(300px,52vw,420px)}
}
@media(max-width:560px){
  .wo-rest{grid-template-columns:minmax(0,1fr)}
}

/* The descent, made legible.
   Region, country and experience are three rungs of one ladder — the continent
   narrowing to a place and then to a reason for going — and all three were set
   identically: 10px mono, .18em tracking, uppercase, muted. Three levels
   rendered at one weight read as three unrelated toolbars.
   They now step down in size and tracking, half a pixel and a few thousandths
   of an em at a time. Colour is left alone: it is already inverted per ground
   by the .wa-open rules, and a hierarchy that only exists on one background is
   not a hierarchy. Nothing is added and nothing moves — the eye is simply told
   which way is down. */
/* The top control. The mono scale is documented once, above .wa-win-cap b. */
.wa-reg{flex:1 1 auto;background:none;border:0;border-right:var(--fj-rule);cursor:pointer;
  font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-muted);padding:13px 14px;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.wa-reg:last-child{border-right:0}
.wa-reg:hover{color:var(--c-primary)}
.wa-reg[aria-pressed="true"]{background:var(--c-accent);color:var(--c-bg)}
/* A COUNTRY WITH NO PHOTOGRAPH IS STILL SOMEWHERE
   Selecting a country replaces the map with that country's outline, with a
   photograph masked into it where one exists. Two of twenty-two have one. The
   other twenty were a flat shape in the house accent — the same shape, the same
   colour, whichever country you picked, so choosing Rwanda and choosing Egypt
   produced the same picture in two outlines.

   regions.json already answers this, and has since it was written: every region
   carries a ground tone, and its note says that is what an unresolved slot is
   drawn on, so that moving from the Sahel to the Cape changes the colour of the
   page before a photograph exists. The place plates have always done it. The
   window never did.

   Keyed off a data-region the figures now carry — read from the readout that
   already knew it.

   This block once said it was generated from regions.json. It was not: it was
   typed by hand from the tones that were current the day it was written, and it
   went on printing them after the set was re-cut. It is generated now. */
/* gen:regiontone */
.wa-win-state[data-region="central"] .af-window-fill{fill:#113222}
.wa-win-state[data-region="east"] .af-window-fill{fill:#2B6E5E}
.wa-win-state[data-region="southern"] .af-window-fill{fill:#672E1D}
.wa-win-state[data-region="north"] .af-window-fill{fill:#865A28}
.wa-win-state[data-region="islands"] .af-window-fill{fill:#1A5151}
/* /gen:regiontone */

/* A country outside the region in view is still drawn — the continent does not
   stop existing — but it steps back rather than disappearing.

   It stepped back toward the page, not toward the continent, and that is the
   difference between dimming a thing and turning it into a different thing.
   opacity .28 composites terracotta to a pale warm pink, which still reads as a
   destination; it composites forest to a pale grey-green, which reads as a
   fourth category nobody defined. Namibia and Cameroon, dimmed, were the only
   cold colour on the map.

   Mixing toward the land instead keeps both tiers on the continent they are
   part of: a dimmed destination is a destination the region does not include,
   and a dimmed operator still looks like an operator. One step, the same size
   for both, and the map keeps three colours instead of growing a fifth. */
.wa-map-live[data-dim][data-tier="live"] path,
.wa-map-live[data-dim][data-tier="live"] circle{
  fill:color-mix(in srgb, var(--c-accent-fill) 34%, var(--c-land))}
.wa-map-live[data-dim][data-tier="ours"] path,
.wa-map-live[data-dim][data-tier="ours"] circle{
  fill:color-mix(in srgb, var(--c-primary) 30%, var(--c-land))}
.wa-map-live path,.wa-map-live circle{transition:fill var(--t-fast) var(--ease)}
.wa-win-state .wa-map-svg{transition:none}
.wa-terrain{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px 6px;margin-top:2px}
.wa-terrain span{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.155em;
  text-transform:uppercase;color:var(--c-muted);border:1px solid var(--c-border);
  padding:4px 8px}
.wa-tick[hidden]{display:none}

/* ---- the rail: every destination, and eight experiences -------------------------- */
/* The rungs stay inside the type column and drop to the foot of the stage. Run
   full width they cut straight across the continent, which is bled off the right
   edge and is not in the flow to push them out of the way. */
/* The rail was min(52%, 640px) under copy set to min(66%, 820px) — 161px
   narrower than everything above it, for no reason either number records, and
   two destinations short in the visible run.

   It can take the type's measure, but only where there is room for it. The rail
   and the map's readout share the lower half of the stage, and measured at nine
   widths the readout's left edge is where the ceiling is:

     1440 and up   67px of clearance at the wider measure
     1366          30px
     1280         -13px   the rail crosses the readout
     1024        -107px
      900        -130px

   So the wider measure is taken from 1360 up, where the map is bled off the
   right edge and the readout has gone with it, and below that the rail keeps
   the narrow one. A min-width query rather than a max-width one because this is
   an enhancement at large sizes, not a repair at small ones. */
.wa-win-rail{margin-top:auto;padding:var(--sp-4) 0 26px;min-width:0;position:relative;z-index:2;
  max-width:min(52%,640px)}
@media(min-width:1360px){.wa-win-rail{max-width:min(66%,820px)}}
/* Twenty-two destinations do not fit across 1152px — they measure 1615px — so
   the rail scrolls rather than wrapping into rows that shift the whole stage.
   Three rows would be needed, and at 1440 there are 56 pixels of slack. */
.wa-ticks{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;
  gap:0;border-top:2px solid var(--c-primary);
  /* The fade says which way there is more.
     It used to fade the right edge and only the right edge, always — so a rail
     scrolled to its end still promised more to the right, and a rail scrolled
     away from its start gave no sign there was anything to the left. Twenty-two
     destinations in a 760px window: the reader is looking at ten of them and
     the affordance was lying about both ends.

     Driven by the rail's own scroll position, so the left edge fades in as you
     leave the start and the right edge fades out as you reach the end. No
     script, no scroll listener — a scroll-driven animation is a timeline, and
     the browser runs it on the compositor. Where it is not supported the two
     custom properties keep their initial values and the mask is exactly the
     static one it replaces. */
  --fj-fade-l:0px; --fj-fade-r:46px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fj-fade-l),
    #000 calc(100% - var(--fj-fade-r)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--fj-fade-l),
    #000 calc(100% - var(--fj-fade-r)),transparent);
  animation:wa-rail-fade linear both;
  animation-timeline:scroll(self inline)}
@property --fj-fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --fj-fade-r{syntax:"<length>";inherits:false;initial-value:46px}
@keyframes wa-rail-fade{
  from{--fj-fade-l:0px;   --fj-fade-r:46px}
  to  {--fj-fade-l:46px;  --fj-fade-r:0px}}
.wa-ticks::-webkit-scrollbar{display:none}
/* The rail of twenty-two names under the map, which is the keyboard and
   touch equivalent of pressing a country on it. Forest at rest so it reads as
   a list of places rather than as metadata; sienna and ivory when it is the
   one selected, which is the same active state the region tabs use. */
.wa-tick{flex:0 0 auto;background:none;border:0;border-right:var(--fj-rule);cursor:pointer;
  font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.155em;text-transform:uppercase;
  color:var(--c-primary);padding:11px 8px;text-align:left;transition:color .2s,background .2s;white-space:nowrap}
.wa-tick:last-child{border-right:0}
.wa-tick:hover{background:var(--c-sand)}
.wa-tick[aria-pressed="true"],.wa-tick.on{background:var(--c-accent);color:var(--c-bg)}
.wa-tick[aria-current]{color:var(--c-bg);background:var(--c-primary)}
/* The eight experiences do not fit the type column at any width this page has,
   so the rail scrolls — and it scrolled with a hard edge, which reads as a row
   that has been cut off rather than one that continues. The country rail above
   it already solved this: a mask that fades whichever end has more behind it,
   driven by the rail's own scroll position, no listener. Same fade, same reason,
   so the two rails behave like one idea. */
.wa-tags-in{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;min-width:0;margin-top:14px;
  border-top:var(--fj-rule);border-bottom:var(--fj-rule);
  --fj-fade-l:0px; --fj-fade-r:40px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fj-fade-l),
    #000 calc(100% - var(--fj-fade-r)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--fj-fade-l),
    #000 calc(100% - var(--fj-fade-r)),transparent);
  animation:wa-rail-fade linear both;animation-timeline:scroll(self inline)}
.wa-tags-in::-webkit-scrollbar{display:none}
.wa-tag{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;background:none;
  border:0;border-left:var(--fj-rule);cursor:pointer;padding:14px 16px;font-family:var(--fj-mono);
  font-size:9.5px;letter-spacing:.155em;text-transform:uppercase;white-space:nowrap;color:var(--c-muted);
  transition:background .2s,color .2s}
.wa-tag:first-child{border-left:0}
.wa-tag:hover{color:var(--c-primary)}
.wa-tag[data-on]{background:var(--c-accent);color:var(--c-bg)}
.wa-tag svg{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- what Afrinkong is ------------------------------------------------------------ */
/* 88 top and bottom, like every other zone. A spacing audit across the whole
   page found the rhythm already consistent — 88/88 on every section and 48px
   after every section head — with this one band the single exception at
   70/62. It was the only thing that pass had to change. */
/* The brief is the page's thesis and it sat between two sections at the same
   rhythm as everything else, so the one paragraph that explains what this site
   is read as another block. It gets the air a thesis is entitled to. */
.wa-brief{padding:88px 0;border-top:var(--fj-rule);border-bottom:var(--fj-rule)}
/* The loudest sentence on the page after the hero, and it opened flush with
   everything else. A rule above it at the accent, the width of the em dash it
   deserves, so section 02 starts rather than continues. */
.wa-claim{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,46px);line-height:1.08;letter-spacing:-.01em}
.wa-claim em{font-style:normal;color:var(--c-accent)}
/* The three companies of our own, as identities. "Run by people who live there"
   is the platform's whole claim and it was being made by printing a name. */
.wa-ops{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;
  border-top:2px solid var(--c-primary)}
/* Three of these are companies we run and the fourth is everywhere else, and
   all four were drawn identically. The map spends a whole tier on that
   distinction; the operator cards can spend a keel, the same one 136 gave the
   destination grid, so the page says it the same way three times. */
.wa-op{display:block;padding:22px 24px 22px 0;border-right:var(--fj-rule);
  transition:background var(--t-fast) var(--ease)}
.wa-op:last-child{border-right:0;padding-right:0}
a.wa-op:hover{background:color-mix(in srgb,var(--c-bg) 92%,var(--c-accent))}
/* Where an operator is based is the claim this site rests on — "run by people
   who live there" — and it was the smallest type on the card. */
.wa-op-where{color:var(--c-accent);display:block;font-family:var(--fj-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-muted)}
.wa-op b{display:block;font-family:var(--fj-display);font-size:23px;font-weight:700;
  text-transform:uppercase;line-height:1.04;margin-top:9px}
.wa-op-base{display:block;font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-accent);margin-top:7px}
.wa-op p{font-size:14px;color:var(--c-muted);margin-top:12px}
.wa-op-go{display:inline-block;margin-top:14px;font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--c-accent);padding-bottom:3px}
.wa-op--rest b,.wa-op--rest .wa-op-base{color:var(--c-muted)}
@media(max-width:900px){.wa-ops{grid-template-columns:1fr 1fr}
  .wa-op:nth-child(2n){border-right:0;padding-right:0}
  .wa-op{border-bottom:var(--fj-rule)}}
@media(max-width:520px){.wa-ops{grid-template-columns:1fr}
  .wa-op{border-right:0 !important;padding-right:0 !important}}

/* ---- where do you want to begin ---------------------------------------------------- */
.wa-wants{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--c-primary);margin-bottom:6px}
.wa-want{background:none;border:0;border-right:var(--fj-rule);border-bottom:var(--fj-rule);cursor:pointer;
  text-align:left;padding:18px 18px 16px 0;transition:background var(--t-fast) var(--ease)}
.wa-want:nth-child(6n){border-right:0;padding-right:0}
.wa-want:hover{background:color-mix(in srgb,var(--c-bg) 92%,var(--c-accent))}
.wa-want i{display:block;font-style:normal;font-family:var(--fj-mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent)}
.wa-want b{display:block;font-family:var(--fj-display);font-size:clamp(17px,1.6vw,22px);font-weight:700;text-transform:uppercase;margin-top:8px;line-height:1.05}
/* Pressed is a state, not a hue: colour alone fails anyone who cannot see this
   particular pair, and the bar is the primary control over the grid below it.
   The keel says pressed as well as the fill does. */
.wa-want[aria-pressed="true"]{background:var(--c-primary);box-shadow:inset 4px 0 0 var(--c-accent-lit)}
.wa-want[aria-pressed="true"] b{color:var(--c-bg)}
.wa-want[aria-pressed="true"] i{color:var(--c-gold)}
/* The second dimension. "What do I want" and "when can I go" are the two
   questions a traveller actually has, and across a continent the second one has
   a real answer — the dry season in Zambia is the cyclone season in Mauritius.
   The count under each month is how many destinations are good in it, so the
   shape of the African year is legible before anything is pressed. */
/* #seasons. Twenty-three pages link "Travel seasons" here and the target did
   not exist, so all twenty-three landed at the top of the homepage. Extra
   scroll-margin so the arrival shows the two rails and the sentence under them
   rather than twelve months against the masthead with no explanation. */
.wa-months{display:grid;grid-template-columns:repeat(12,1fr);gap:0;
  border-bottom:var(--fj-rule);margin-bottom:16px;
  scroll-margin-top:calc(var(--mast) + 92px)}
/* Twelve buttons in a row said nothing about the year. A month with more
   destinations in it than another is the only fact this control holds, and it
   was spending it on a number in small type. The bar under each is that number,
   so the shape of the African year is visible before anything is pressed. */
.wa-month{position:relative;background:none;border:0;border-right:var(--fj-rule);cursor:pointer;
  padding:12px 4px 11px;text-align:center;transition:background var(--t-fast) var(--ease)}
.wa-month:last-child{border-right:0}
.wa-month:hover{background:color-mix(in srgb,var(--c-bg) 92%,var(--c-accent))}
.wa-month b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-primary)}
.wa-month span{display:block;font-family:var(--fj-display);font-size:17px;font-weight:700;
  color:var(--c-muted);margin-top:3px}
.wa-month[aria-pressed="true"]{background:var(--c-primary)}
.wa-month[aria-pressed="true"] b{color:var(--c-bg)}
.wa-month[aria-pressed="true"] span{color:color-mix(in srgb,var(--c-accent) 42%,var(--c-bg))}
.wa-dest-when{font-size:13.5px;color:var(--c-accent);margin-top:8px;display:none}
.wa-dest[data-when] .wa-dest-when{display:block}
@media(max-width:760px){.wa-months{grid-template-columns:repeat(6,1fr)}
  .wa-month:nth-child(6n){border-right:0}
  .wa-month:nth-child(-n+6){border-bottom:var(--fj-rule)}}
/* Unbounded, this ran to 167 characters a line across a 1440 screen. The
   comfortable range for continuous prose is 45-85; past 90 the eye loses the
   start of the next line. 72ch of CSS is 78 average characters in this face,
   which is where every capped paragraph on the site now lands. */
.wa-want-say{margin:16px 0 26px;font-size:15px;color:var(--c-muted);max-width:72ch}
.wa-dest[hidden]{display:none}
@media(max-width:1000px){.wa-wants{grid-template-columns:1fr 1fr 1fr}.wa-want:nth-child(4n){border-right:var(--fj-rule);padding-right:18px}.wa-want:nth-child(3n){border-right:0;padding-right:0}}
@media(max-width:620px){.wa-wants{grid-template-columns:1fr 1fr}.wa-want:nth-child(3n){border-right:var(--fj-rule);padding-right:18px}.wa-want:nth-child(2n){border-right:0;padding-right:0}}
@media(max-width:460px){.wa-wants{grid-template-columns:1fr}.wa-want{border-right:0 !important;padding-right:0 !important}}
@media(max-width:1080px){.wa-win{grid-template-columns:1fr}}
@media(max-width:1000px){.wa-win{grid-template-columns:1fr}
  .wa-win-frame{height:min(46vh,400px)}}
/* A phone is not the desktop layout stacked. Stacked, the hero ran to 1,323px on
   an 844px screen: the map — the entire idea — opened below the fold and its
   controls were two screens down. So on a phone the headline is short, the map
   comes straight after it, its controls come next, and the paragraph and the
   buttons go below all three. The signature is the first thing on the screen,
   which is the one thing that has to be true on the device most people use. */
/* The width at which the map comes out of the bleed and goes back into the flow.
   It was 860, and between 880 and 960 that left a band where the composition is
   still two columns but no longer has the room for two: measured at ten widths,
   the country rail crosses the map's legend from 960 down to 880, and the region
   rail crosses the caption as well from 940. Eighty pixels of the desktop
   layout in which the hero's two halves are physically on top of each other.

   PASS FOUR never saw it because PASS FOUR measures document overflow and this
   overflows nothing — the two columns simply occupy the same pixels. Its width
   list has 900 and 1024 in it and the band sits between them.

   1000 rather than 980, because 1000 is already a breakpoint in this file and
   one fewer number to keep in step is worth the twenty pixels. */
@media(max-width:1000px){
  .wa-open-stage{min-height:0;padding:96px 0 0}
  .wa-open-grid{grid-template-columns:1fr;gap:20px}
  .wa-open-say,.wa-open-tail,.wa-win,.wa-win-rail{grid-column:1;grid-row:auto}
  /* Order on a phone: headline, then what you can do, then the map, then the
     rails. Measured at 320, 390 and 768, the calls sat between 1072 and 1289
     pixels down — behind a six-hundred-pixel map — so the first screen of the
     device most people arrive on offered the headline and nothing to do with
     it. Two lines of `order` cost nothing and put the ladder above the fold. */
  .wa-open-say{order:1}
  .wa-open-tail{order:2}
  .wa-win{order:3}
  .wa-win-rail{order:4}
  /* The window is taken out of the flow and bled off the right edge on a
     desktop, which is the whole composition of the first screen. On a phone
     there is no room to bleed into: left absolute it stayed a 180-pixel column
     pinned to the right, half the screen wide, with the map inside it and the
     country names overflowing their own box. It goes back into the flow. */
  .wa-win{position:static;width:auto;max-width:none;top:auto;right:auto}
  .wa-open-say,.wa-open-tail{max-width:none}
  .wa-hair{margin-top:18px}
  .wa-open .wa-lede{margin-top:0;font-size:17px}
  .wa-acts{margin-top:20px}
  .wa-win{display:block}
  /* Sized from the width here, not from the height.
     071 gave the frame an aspect-ratio so the map would stop being letterboxed
     inside it, which is right on a desktop where the height is the constraint
     and the map is bled off the right edge. Stacked, the constraint is the
     column: a height capped at 320 times the map's 1000/1060 is a 302-pixel
     frame, and at 320px wide the column is 280. PASS FOUR found it as two
     pixels of horizontal overflow — the difference between the frame's overrun
     and the frame's own padding — which is what a 22-pixel mistake looks like
     from outside.

     The vh term is a ceiling on the height expressed as the width that produces
     it, so the ratio never has to be broken to honour it, and the map is
     centred rather than held to a right edge that is no longer being bled. */
  /* The vh ceiling needs a floor under it for the same reason the desktop rule
     does: stacked, the stage is content-tall and the viewport is not, so a 450
     pixel-tall window — 1440x900 at 200% zoom — gave a 221x234 map inside a
     1295px stage. There is room; the ceiling was just measuring the wrong box. */
  .wa-win-frame{width:min(100%, max(320px, calc(52vh * 1000 / 1060)));height:auto;
    margin-inline:auto}
  .wa-win-caps{margin-top:18px}
  /* The key is absolutely placed under the caption on desktop; unpinned on a
     phone it has to be given its own row, or the caption lands on top of it. */
  /* The rail is held to the type column on a desktop so it does not cut across
     the bled map. There is no bled map on a phone, and 52% of 360px is a
     166-pixel scroller with twenty-two names in it. */
  .wa-win-rail{margin-top:14px;padding-bottom:14px;max-width:none}
  /* The readout is right-aligned against the bled map on a desktop. On a
     phone there is no map beside it, and a 44-pixel right padding on a
     180-pixel column leaves a measure too narrow for the words in it. */
  .wa-win-side{padding-right:0;max-width:none;text-align:left;align-items:flex-start}
  .wa-win-key{justify-content:flex-start}
  .wa-brief{padding:48px 0 44px}}

/* The three calls only need to become equal-width blocks when they can no
   longer sit on one line. Carried up to 1000 with the rest of the stacked
   layout in 070, that rule broke the longest of them across two lines from
   960 down to 860 while there was still room for all three on one. */
@media(max-width:860px){.wa-acts .wa-act{flex:1 1 220px;min-width:0;text-align:center}}
/* Anything driven by a thumb gets a 44px target. The ticks were 33px. */
@media(pointer:coarse){
  .wa-tick{min-height:44px;padding-top:14px;padding-bottom:14px}
  .wa-want{padding-top:20px;padding-bottom:18px}}

/* ---- africa, in cities ----------------------------------------------------------- */
/* A collection, not a catalogue: the first two run the full width of the grid and
   the rest are a four-up. Twelve equal tiles would say "here are twelve things";
   a lead and a field says somebody chose. */
.wa-city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:var(--c-border);border:2px solid var(--c-primary);margin-top:var(--sp-5)}
.wa-city{position:relative;display:block;background:var(--c-bg);color:var(--c-ink);
  /* The card is paper on the dust, which is the whole reason 132 moved the
     section: a white card on a white ground is a grid of lines, a paper card on
     a dust ground is a stack of plates. */
  text-decoration:none;overflow:hidden;grid-column:span 2}
@media(min-width:1100px){
  .wa-city{grid-column:span 1}
  .wa-city[data-wide]{grid-column:span 2}
}
/* The picture is the card. aspect-ratio rather than a height so the box is
   reserved before the photograph lands — the whole grid is lazy-loaded and
   twelve unreserved boxes is a screen and a half of layout shift. */
.wa-city-art{display:block;position:relative;aspect-ratio:3/2;background:var(--reg-tone,var(--c-primary))}
.wa-city[data-wide] .wa-city-art{aspect-ratio:12/5}
@media(max-width:1099px){.wa-city[data-wide] .wa-city-art{aspect-ratio:3/2}}
.wa-city-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.wa-city:hover .wa-city-art img{transform:scale(1.03)}
/* A city with no photograph in the dataset yet. Not a grey box with a spinner —
   the region's own tone with the city's initials cut out of it, which reads as a
   plate rather than as something that failed to load. It is never filled with a
   generated picture: these are real cities you can buy a ticket to. */
.wa-city-plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--reg-tone,var(--c-primary))}
/* Two letters at 26% read as an abbreviation. Bigger, fainter and cropped by the
   card: a printer's proof, which is deliberate and unmistakably not a photograph
   — the distinction the whole treatment exists to keep. */
.wa-city-plate b{font-family:var(--fj-display);font-weight:700;font-size:104px;letter-spacing:-.045em;
  color:color-mix(in srgb,var(--c-bg) 17%,transparent);line-height:.8}
.wa-city-say{display:block;padding:20px 22px 24px}
.wa-city-say b{display:block;font-family:var(--fj-display);font-size:26px;font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.wa-city[data-wide] .wa-city-say b{font-size:34px}
.wa-city-where{display:block;margin-top:7px;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)}
.wa-city-line{display:block;margin-top:12px;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.wa-city-note{display:block;margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--c-muted)}
/* Four-up is three lines of note on the widest card and six on the narrowest,
   which makes the row ragged. The lead cards carry the sentence; the field
   carries the three words, and the sentence is there for anyone who asks the
   page for it rather than for the eye. */
@media(min-width:1100px){
  .wa-city:not([data-wide]) .wa-city-note{display:none}
}
/* On a phone every card is full width, so the lead pair stops being a lead —
   eleven identical cards in a column is the catalogue the wide layout avoids.
   The two with the largest photographs keep a taller frame, which is the only
   part of "a collection has a lead in it" that survives one column. */
@media(max-width:640px){
  .wa-city[data-wide] .wa-city-art{aspect-ratio:4/3}
  .wa-city-grid{grid-template-columns:1fr}
  .wa-city,.wa-city[data-wide]{grid-column:span 1}
  .wa-city-say b{font-size:24px}
  .wa-city-note{display:block}
}
/* One focus ring for the page. Several components had grown their own — an
   outline here, a background swap there, and on the map a ring that grows — and
   a reader tabbing through met a different answer in every section. The shape is
   the same everywhere it can be; only the map differs, because a rectangle round
   a country is not where the country is. */
.wa-city:focus-visible,.wa-dest a:focus-visible,.wa-exp:focus-visible,
.wa-want:focus-visible,.wa-tag:focus-visible,.wa-tick:focus-visible,
.wa-reg:focus-visible,.wa-seam-go:focus-visible{
  outline:3px solid var(--c-accent);outline-offset:-3px}
/* The closing card has no photograph by design — it is the one card that is not
   a place — so it fills its cell with type and takes whatever the grid has left
   over. The span is computed, not chosen: a twelfth city would make it 2. */
.wa-city--rest{background:var(--c-primary);color:var(--c-bg);display:flex;align-items:flex-end}
@media(min-width:1100px){
  .wa-city--rest[data-span="1"]{grid-column:span 1}
  .wa-city--rest[data-span="2"]{grid-column:span 2}
  .wa-city--rest[data-span="3"]{grid-column:span 3}
  .wa-city--rest[data-span="4"]{grid-column:span 4}
}
@media(max-width:1099px){.wa-city--rest{grid-column:1/-1}}
.wa-city--rest .wa-city-where{color:var(--c-gold)}
.wa-city--rest .wa-city-line{color:var(--c-accent-lit)}
/* Beats the four-up rule that hides the note on narrow cards: that rule is
   three class selectors deep, so this has to be too. */
.wa-city.wa-city--rest .wa-city-note{color:var(--c-sand);max-width:56ch;display:block}

/* ---- the window band ------------------------------------------------------------- */
/* THE PICTURE IS LOCKED TO THE VIEWPORT. THIS SECTION IS A WINDOW THAT TRAVELS
   ACROSS IT.
   ---------------------------------------------------------------------------
   Not a parallax and not a background. .wa-seam-pic holds one full viewport of
   photograph at position:fixed, so it never moves at all; the section is given
   clip-path:inset(0), which clips that fixed child to the section's own box.
   Scrolling therefore slides the window down the photograph, and the picture
   itself is still. There is no script — this is two properties.

   THE ONE WAY TO BREAK IT, WHICH BREAKS IT SILENTLY:

     transform, filter, backdrop-filter, perspective, will-change and contain
     each make an element a containing block for fixed-position descendants.

   Any one of them anywhere between this section and .wa-seam-pic — or on the
   section itself — turns that `fixed` into an `absolute` and the effect simply
   stops, with no error and no visible breakage beyond the picture beginning to
   scroll like an ordinary image. So nothing on .wa-seam or .wa-seam-pic may
   carry any of the six, and a hover or transition added to either later must
   not reach for one. This is asserted in tools/browser-checks.js rather than
   left as a comment, because a comment does not survive the next hover effect.

   background-attachment:fixed is the other way to do this and is not used: iOS
   Safari ignores it outright, which is a silent failure on the platform most of
   this page's readers are on.

   The tint is fixed WITH the picture, not laid on the band — a tint on the band
   would scroll while the photograph stood still, and the shading would crawl
   across the image. It is a transparent wash rather than a scrim: the strongest
   point is 58%, which is enough to carry ivory type and leaves the photograph
   luminous. A dark scrim would make the contrast trivial and the picture
   pointless.

   130svh, not vh: on a phone the toolbars change vh mid-scroll, which would
   resize the window while the reader is inside it. svh is the small viewport
   and does not move. */
/* clip-path already makes this a stacking context, so the copy's z-index cannot
   climb over the masthead and no isolation property is needed. Every property on
   these two rules is load-bearing; there is nothing here to copy loosely. */
.wa-seam{position:relative;clip-path:inset(0);min-height:130svh;
  display:flex;align-items:center}
.wa-seam-pic{position:fixed;inset:0;z-index:0}
.wa-seam-pic img,.wa-seam-pic video{width:100%;height:100%;object-fit:cover;display:block}
/* A clip in a seam autoplays muted and loops, which is the one arrangement a
   browser will start without being asked. It carries the still it replaced as
   its poster, so the frame is filled from the first paint and stays filled if
   the file never arrives or the visitor has asked for less motion. */
@media(prefers-reduced-motion:reduce){.wa-seam-pic video{display:none}
  .wa-seam-pic{background:var(--c-primary)}
  .wa-seam-pic::after{content:"";position:absolute;inset:0;
    background:url(/images/uploads/site-index-waza-elephants-1600w.jpg) center/cover}}
/* Deep forest rather than black, so the band belongs to the palette and the
   photograph stays warm under it.
   
   GRADED, NOT FLAT. Measured against the actual pixels behind the glyphs, a
   flat wash at half strength cannot carry this picture: the herd is lit from
   the front and the sky is pale, so ivory type crossing a sunlit elephant came
   out at 1.00:1 — invisible — while the same wash over the shaded left was
   already heavier than it needed to be. Raising a flat wash until the worst
   pixel passes means about 80% everywhere, which is the dark scrim this is
   meant not to be.
   
   So the weight goes where the type is and is released where it is not. Across
   the width it averages 44%, which is the "about half" this is built to; the
   right third is under 10% and the plain keeps its light. */
.wa-seam-tint{position:absolute;inset:0;background:
  linear-gradient(100deg,
    color-mix(in srgb,var(--c-primary) 82%,transparent) 0%,
    color-mix(in srgb,var(--c-primary) 78%,transparent) 34%,
    color-mix(in srgb,var(--c-primary) 62%,transparent) 50%,
    color-mix(in srgb,var(--c-primary) 24%,transparent) 72%,
    color-mix(in srgb,var(--c-primary) 6%,transparent) 100%)}
/* The dawn band, graded for its own photograph rather than inheriting the one
   above. The gradient above was measured against Waza: a herd lit from the
   front under a pale sky, which needs 82% on the left to carry ivory. This
   frame is pre-sunrise — the ground under the copy is forest in shadow and the
   only bright thing in it is the canopy along the top — so the same wash was
   spending twenty points it did not need and taking the photograph down with
   it. Measured on the default it ran 4.96 to 7.58 against a 4.5 bar.

   That headroom was less than it looked. The first attempt gave back twenty
   points to 62/56/40/14/2 and put the worst line at 2.93 — the relationship
   between wash and measured contrast over this frame is much steeper than the
   spare margin suggests, because most of the copy sits over forest that is
   already close to the tint's own colour. Six points was what there was to
   give. Worst line now 4.37 for the headline against a 3.0 bar and 5.79 for
   16px body against 4.5, across thirteen scroll positions at four widths. */
.wa-seam--dawn .wa-seam-tint{background:
  linear-gradient(100deg,
    color-mix(in srgb,var(--c-primary) 76%,transparent) 0%,
    color-mix(in srgb,var(--c-primary) 72%,transparent) 34%,
    color-mix(in srgb,var(--c-primary) 54%,transparent) 50%,
    color-mix(in srgb,var(--c-primary) 18%,transparent) 72%,
    color-mix(in srgb,var(--c-primary) 3%,transparent) 100%)}
.wa-seam-copy{position:relative;z-index:1;width:100%;max-width:1240px;
  margin:0 auto;padding:0 44px}
/* 640, not 560. "Cross Africa. Don't just visit it." is meant to break once,
   after the full stop; at 560 the second sentence took three lines and the
   proposition read as a stanza. */
.wa-seam-inner{max-width:640px}
 /* Ivory, not gold. Muted gold is the metadata voice everywhere else on this
    site and it was the obvious choice here, but measured against the pixels it
    actually sits on it reaches 3.15:1 where 4.5 is required — the wash that
    carries a 52px headline at 5:1 is nowhere near enough for 10px of gold. The
    voice is kept by size and letterspacing instead of by hue. */
.wa-seam-stamp{font-family:var(--fj-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-bg);margin:0}
/* THE DOOR IS A TITLE SEQUENCE, NOT A PARAGRAPH.
   ---------------------------------------------------------------------------
   Order is film grammar: the proposition opens cold, then a line that is pure
   invitation, then the name, then what it is, then the shape of it, then where
   it goes. The eyebrow says "series" rather than "Trans Afrique" for exactly
   that reason — the title card needs somewhere to land, and an eyebrow that
   has already said the name takes it.

   IT ALSO CARRIES THE SECTION THAT USED TO SIT BELOW IT. The homepage had a
   Trans Afrique section with four cards, country chains, strand lists and a
   floor price; it explained a product to somebody three screens into a
   homepage who had not decided they wanted one, and it is gone. The only part
   of it a door can honestly keep is the answer to *where does it go*, which is
   the row of four crossings at the foot of this block.

   Everything here is ivory. Terracotta is what the design called for on the
   wordmark and what a mockup can have, because a mockup controls its own
   background; measured against the pixels this photograph actually puts behind
   the letters — pale sky on the right, a tan vehicle through the middle —
   #CB6F4B ran 2.04 to 2.46:1 against the 3.0 that large text needs, at every
   width. The accent stays on the rule, where it is a shape rather than a
   letterform and can be any colour it likes. */
/* THE HEADLINE CARRIES THE PROPOSITION, so it takes the size a proposition
   needs and two lines of it. */
.wa-seam-copy h2{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.98;font-size:clamp(31px,4.2vw,62px);
  margin:18px 0 0;color:var(--c-bg)}
/* THE FOUR CROSSINGS, WHICH IS THE HOMEPAGE SECTION THAT USED TO BE BELOW.
   That section carried four cards with country chains, strand lists, a line of
   description each and a floor price. It is deleted, and this row is what a
   door can honestly keep of it: the answer to *where does it go*, in four
   names and four counts. They are links, so the door is a way into any one of
   them rather than a list of things that exist. */
.wa-door-cross{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;
  margin:24px 0 0;padding-top:20px;
  border-top:1px solid color-mix(in srgb,var(--c-bg) 30%,transparent)}
.wa-door-cross>span{flex:0 0 100%;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--c-bg);margin-bottom:12px}
.wa-door-cross a{display:flex;align-items:baseline;gap:8px;
  padding:4px 15px 4px 0;margin-right:15px;
  border-right:1px solid color-mix(in srgb,var(--c-bg) 26%,transparent)}
.wa-door-cross a:last-child{border-right:0;margin-right:0;padding-right:0}
.wa-door-cross b{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.01em;color:var(--c-bg);line-height:1.1}
.wa-door-cross i{font-style:normal;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.14em;color:var(--c-bg)}
.wa-door-cross a:hover b{color:var(--c-accent-lit)}

/* The title card. Set at the scale of a name rather than a heading — it is not
   the section's headline, the proposition above it is, and a second element at
   headline size would leave the reader with two things to read first. */
.wa-door-mark{margin:28px 0 0;font-family:var(--fj-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;
  font-size:clamp(24px,2.6vw,36px);color:var(--c-bg)}
.wa-door-sub{margin:12px 0 0;font-size:15.5px;line-height:1.55;color:var(--c-bg);
  max-width:46ch}
/* Shape without price, on one line. It was three chips in a grid with a line
   icon each; the icons were decoration on a block whose photograph is already
   doing the emotional work, and the middle chip said "15 countries, 4
   crossings" directly above a row that names all four and counts every one —
   the same fact printed twice, in the taller of the two ways. Derived from the
   levels, never typed. */
.wa-door-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;
  margin:20px 0 0;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-bg);line-height:1.9}
.wa-door-meta b{font-weight:400}
.wa-door-meta i{width:18px;height:1px;background:color-mix(in srgb,var(--c-bg) 46%,transparent);
  display:block}
.wa-seam-say{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--c-bg);
  max-width:38ch;margin:0}
/* A bordered box rather than an underlined phrase: this is the one thing to do
   from this section and it sits at the foot of nine other elements, where a
   text link disappears. Ivory on ivory outline, inverting to solid on hover —
   terracotta on terracotta would repeat the wordmark and lose to the
   photograph behind it. */
.wa-seam-go{display:inline-block;margin-top:32px;font-family:var(--fj-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-bg);
  border:1px solid var(--c-bg);padding:15px 26px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.wa-seam-go:hover{background:var(--c-bg);color:var(--c-primary)}
/* Under a laptop the copy is centred over the picture and the wash goes with
   it, because there is no longer a right-hand half to leave alone. The band
   also loses height: 130svh of photograph on a phone is three thumb-flicks of
   one image, which stops reading as a moment and starts reading as a stall. */
@media(max-width:950px){
  .wa-seam{min-height:104svh}
  .wa-seam-copy{padding:0 28px}
  .wa-seam-inner{max-width:none}
  /* UNIFORM HERE, AND IT HAS TO BE.
     The desktop wash is graded because the copy's horizontal position never
     changes — it is pinned to the left column, so weight put on the left stays
     under the type for the whole travel. Vertically there is no such thing: the
     copy traverses the entire viewport while the tint is fixed to it, so every
     line passes through every band of a vertical gradient. Grading it simply
     moves which scroll position fails. Measured, a 16/64/78/16 band left 16px
     type at 1.81:1 at the moment the copy crossed the released edge.

     So it is flat, and flat has to be set by the worst pixel the copy will ever
     cross. Cover-fitting 1600x1067 into a narrow viewport crops to the middle
     of the picture — sunlit dust at rgb(246,204,147) once the tint is taken back
     out — and carrying ivory over that at 4.5:1 needs 68%.

     That is more than the half-strength the desktop band runs at, and it is the
     honest price of putting 16px of text over a bright photograph on a narrow
     screen. The alternative worth knowing about is to stop putting copy on the
     picture below 950 and let the band be picture alone, which would keep it
     fully luminous; that is a design decision rather than a defect, so it is
     recorded here rather than taken quietly. */
  .wa-seam-tint{background:color-mix(in srgb,var(--c-primary) 68%,transparent)}
  /* Same reasoning, different photograph. The dawn band crops to the middle of
     a frame that is pre-sunrise all the way across — the brightest pixel the
     copy crosses on a phone is lit canopy rather than lit dust — so the flat
     wash the worst pixel demands here is lower. Measured, not assumed. */
  .wa-seam--dawn .wa-seam-tint{background:color-mix(in srgb,var(--c-primary) 66%,transparent)}
  .wa-seam-copy h2{font-size:clamp(26px,6vw,40px)}
  .wa-seam-say{font-size:16px;max-width:none}
  /* Stacked, and the dividers come off with the row: a vertical list of three
     rules down the left edge reads as three unfinished boxes. */
  .wa-door-cross a{padding-right:12px;margin-right:12px}
  .wa-door-cross b{font-size:13.5px}
  .wa-door-sub{max-width:none}
}

/* ---- zones and heads ------------------------------------------------------------ */
.wa-zone{padding:88px 0}
.wa-zone.dust{background:var(--fj-dust)}
.wa-zone.basalt{background:var(--fj-basalt);color:var(--fj-onbasalt)}
.wa-zone.basalt h2,.wa-zone.basalt h3{color:var(--c-bg)}
.wa-zone.basalt .wa-note{color:var(--fj-onbasalt-dim)}
.wa-head{display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:start;margin-bottom:48px}
/* The section number is the page's spine — 01 through 07 — and it was set at
   the same weight as the label beside it, so the sequence was invisible unless
   you went looking. It is the one place a figure beats a word on this page. */
.wa-head-no{border-top:2px solid var(--c-accent);padding-top:12px}
.wa-head-no b{color:var(--c-accent);display:block;font-family:var(--fj-display);font-size:38px;font-weight:700;line-height:1;color:var(--c-accent)}
.wa-head-no span{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);margin-top:8px}
/* The label above a section on a dark ground is the one place gold appears on
   this page — see the note beside it in afrinkong.css. */
.wa-zone.basalt .wa-head-no span{color:var(--c-gold)}
.wa-head h2{font-size:clamp(30px,4vw,54px);max-width:24ch}
.wa-head h2 em{font-style:normal;color:var(--c-accent)}
@media(max-width:880px){.wa-zone{padding:62px 0}.wa-head{grid-template-columns:1fr;gap:18px;margin-bottom:34px}}

/* FIVE WAYS FOR A SECTION TO BEHAVE
   Twelve numbered sections all built the same way — 88px of air, a number in a
   150px column, a headline beside it — read as twelve of the same thing, and a
   reader scrolling learns after the third that the fourth holds nothing new.
   The architecture stays: every section keeps its number, its label and its
   editorial head, because that numbering is what makes the page a document
   rather than a stack of panels. What changes is the rhythm.

   Each mode says what its section is for, and the sequence alternates so no two
   neighbours behave alike:

     is-cine    Cinematic.    Stop and look.      Most air, largest type, centred.
     is-find    Discovery.    Browse this.        Least air, head on one line.
     is-atlas   Atlas.        Look something up.  Tight, ruled, reference type.
     is-read    Editorial.    Read this.          Asymmetric, a measure to read.
     is-quiet   Philosophical. Sit with it.       Most air of all, type alone.

   The five are distinguished by measurements a reader feels rather than names
   they can see: padding runs 68px to 168px, and the headline clamp runs from
   26px to 72px.

   A SIXTH — is-kept, for a section that exists and is not asking to be acted
   on — was written for the Journey Fund and then removed, because the fund's
   presence on this page is a door inside the journey section rather than a
   section of its own, and nothing used it. It belongs with the homepage
   section it was drawn for, and should come back with it rather than sit here
   costing every reader of this page a rule that styles nothing. */

/* A — CINEMATIC. The two sections that ask you to imagine something rather than
   choose something. The number goes above the headline instead of beside it,
   because a centred column with a label hanging off its left is not centred. */
.wa-zone.is-cine{padding:132px 0}
.wa-zone.is-cine .wa-head{grid-template-columns:1fr;justify-items:center;
  text-align:center;gap:22px;margin-bottom:60px}
.wa-zone.is-cine .wa-head-no{border-top:none;padding-top:0}
.wa-zone.is-cine .wa-head-no b{font-size:26px}
.wa-zone.is-cine .wa-head h2{font-size:clamp(38px,5.4vw,72px);max-width:17ch;
  line-height:1.04;letter-spacing:-.02em}
.wa-zone.is-cine .wa-note{max-width:52ch;margin-left:auto;margin-right:auto}
.wa-zone.is-cine .wa-say{max-width:52ch;margin-left:auto;margin-right:auto}

/* B — EDITORIAL. Long-form. The number becomes a rule across the top of the
   headline rather than a column beside it, which lets the headline start at the
   left margin like the beginning of an article. */
.wa-zone.is-read{padding:104px 0}
.wa-zone.is-read .wa-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
.wa-zone.is-read .wa-head-no{display:flex;align-items:baseline;gap:14px;
  border-top:none;border-bottom:1px solid var(--fj-rule);padding:0 0 10px}
.wa-zone.is-read .wa-head-no b{font-size:22px}
.wa-zone.is-read .wa-head-no span{margin-top:0}
.wa-zone.is-read .wa-head h2{font-size:clamp(34px,4.6vw,62px);max-width:20ch;
  line-height:1.08}
.wa-zone.is-read .wa-note{max-width:56ch}

/* C — DISCOVERY. Sections you browse rather than read. The head folds onto one
   line so the grid begins in the first screen instead of below it, and the
   headline drops to a size that reads as a label over a set of things. */
.wa-zone.is-find{padding:68px 0}
.wa-zone.is-find .wa-head{grid-template-columns:auto 1fr;gap:26px;
  align-items:baseline;margin-bottom:28px}
.wa-zone.is-find .wa-head-no{display:flex;align-items:baseline;gap:12px;
  border-top:none;padding-top:0;white-space:nowrap}
.wa-zone.is-find .wa-head-no b{font-size:24px}
.wa-zone.is-find .wa-head-no span{margin-top:0}
.wa-zone.is-find .wa-head h2{font-size:clamp(26px,2.9vw,40px);max-width:34ch}

/* D — ATLAS. Reference. A rule under the whole head says the section is a table
   of something, and the headline steps down so the data below it is the largest
   thing on screen rather than the second largest. */
.wa-zone.is-atlas{padding:76px 0}
.wa-zone.is-atlas .wa-head{gap:32px;margin-bottom:30px;padding-bottom:22px;
  border-bottom:1px solid var(--fj-rule)}
.wa-zone.is-atlas .wa-head h2{font-size:clamp(26px,3vw,42px);max-width:28ch}

/* One rule colour per ground, because --c-border is sand and dust is sand.
   Measured: the site's hairline reads at 1.41:1 on cream, which is the
   convention — a rule that is felt rather than seen. On the dust sections the
   same colour came out at 1.01:1, which is not a quiet rule, it is no rule, and
   three of the six sections that use one sit on dust. These are picked to match
   the cream figure on their own ground rather than to beat it. */
.wa-zone{--fj-rule:var(--c-border)}
.wa-zone.dust{--fj-rule:#C0A87F}
.wa-zone.basalt{--fj-rule:var(--fj-onbasalt-dim)}

/* E — PHILOSOPHICAL. The two closings, which have no number and nothing to
   click. Type alone, and more air round it than anywhere else on the page —
   the pause is the content. */
.wa-zone.is-quiet{padding:168px 0;text-align:center}
.wa-zone.is-quiet .wa-head{grid-template-columns:1fr;justify-items:center;
  margin-bottom:0}
.wa-zone.is-quiet h2{font-size:clamp(32px,4.4vw,58px);max-width:17ch;
  line-height:1.16;margin-left:auto;margin-right:auto}
.wa-zone.is-quiet .wa-note{max-width:44ch;margin-left:auto;margin-right:auto}

/* On a phone the five collapse towards each other, because 168px of air above a
   40px headline is a screen and a half of nothing on a 390px screen. They keep
   their order of magnitude — quiet is still the most generous, discovery still
   the tightest — but the range narrows from 68-168 to 44-92. */
@media(max-width:880px){
  .wa-zone.is-cine{padding:84px 0}
  .wa-zone.is-cine .wa-head{margin-bottom:34px}
  .wa-zone.is-read{padding:72px 0}
  .wa-zone.is-find{padding:44px 0}
  .wa-zone.is-find .wa-head{grid-template-columns:1fr;gap:12px;margin-bottom:22px}
  .wa-zone.is-atlas{padding:56px 0}
  .wa-zone.is-atlas .wa-head{padding-bottom:16px;margin-bottom:22px}
  .wa-zone.is-quiet{padding:92px 0}
}

/* ---- the icon medallion ---------------------------------------------------------
   Inline SVG, drawn from the site's own stroke weight rather than pulled from an
   icon set: a webfont or a sprite would be a network request and a second visual
   language, and the gateway's whole argument is that it loads instantly. Each is
   a 24px glyph in a filled disc, the way the mockup has them. */
.wa-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:var(--c-primary);color:var(--c-bg);flex:0 0 auto}
.wa-ico svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.wa-zone.basalt .wa-ico{background:var(--c-accent)}

/* ---- regions: the continent as five rows, not five cards ------------------------ */
.wa-regions{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--c-primary)}
.wa-region{display:block;padding:26px 26px 22px 0;border-right:var(--fj-rule);border-bottom:var(--fj-rule);transition:background .2s}
.wa-region:last-child{border-right:0;padding-right:0}
.wa-region:hover{background:color-mix(in srgb,var(--c-bg) 93%,var(--c-accent))}
.wa-region h3{font-size:20px;margin:14px 0 8px}
.wa-region p{font-size:14px;color:var(--c-muted)}
.wa-region i{display:block;margin-top:16px;font-style:normal;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent)}
.wa-region.soon i{color:var(--c-muted)}
@media(max-width:1000px){.wa-regions{grid-template-columns:1fr 1fr 1fr}.wa-region:last-child{border-right:var(--fj-rule)}}
@media(max-width:680px){.wa-regions{grid-template-columns:1fr}.wa-region{border-right:0 !important;padding-right:0}}

/* ---- destinations --------------------------------------------------------------- */
/* Nothing matched. 151 of the 360 want-month-region combinations find no
   country, which is not a fault in the filters — nowhere in North Africa leads
   on wildlife — but an empty grid and "0 of 22" is a dead end in the middle of
   the page. This is the way back out, and the counts on it are computed against
   the same cards rather than guessed. */
.wa-none{grid-column:1/-1;padding:var(--sp-5) 0 var(--sp-4);max-width:62ch}
.wa-none-h{font-family:var(--fj-display);font-size:clamp(24px,3vw,34px);
  text-transform:uppercase;line-height:1.04;letter-spacing:-.01em}
.wa-none-p{margin-top:14px;font-size:16px;color:var(--c-muted)}
.wa-none-p a{color:var(--c-accent);border-bottom:1px solid var(--c-accent)}
.wa-none-ways{margin-top:22px;display:flex;flex-wrap:wrap;gap:1px;
  box-shadow:0 0 0 1px var(--c-border)}
.wa-none-way{flex:1 1 190px;background:var(--c-bg);border:0;cursor:pointer;
  text-align:left;padding:16px 18px;box-shadow:0 0 0 1px var(--c-border);
  transition:background var(--t-fast) var(--ease)}
.wa-none-way:hover{background:var(--fj-dust)}
.wa-none-way b{display:block;font-family:var(--fj-display);font-size:23px;
  font-weight:700;text-transform:uppercase;line-height:1}
.wa-none-way span{display:block;margin-top:7px;font-family:var(--fj-mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.wa-none-way:hover b{color:var(--c-accent)}
.wa-dests{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--c-primary)}
/* The grid is grouped by region rather than being one run of twenty-two cards.
   Grouping is what lets it hold fifty-four without becoming a wall. */
.wa-dest-reg{grid-column:1/-1;font-family:var(--fj-mono);font-size:10px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent);
  padding:22px 0 10px;border-bottom:var(--fj-rule)}
.wa-dest-reg:first-child{padding-top:14px}
.wa-dest-reg[hidden]{display:none}
/* The region tier. It used to be a mono label sitting between two grids, which
   made the ladder Africa / region / country true in the markup and invisible on
   the page. It now carries the region's own sentence and routes into the atlas
   at that region, so the middle rung is a place you can stand rather than a
   caption. */
/* A region band is a heading, a sentence and a count, and it sat on the page
   ground with nothing to separate it from the cards under it. The accent rule
   the section heads use, at the top, so the grid reads as five groups. */
.wa-dest:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(6,18,14,.14)}
.wa-dest-band{border-top:2px solid var(--c-accent);grid-column:1/-1;padding:34px 0 18px;border-top:2px solid var(--c-primary);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;align-items:baseline}
.wa-dest-band .wa-dest-reg{margin:0;font-family:var(--fj-display);font-size:clamp(21px,2.4vw,30px);
  letter-spacing:.01em;text-transform:uppercase;color:var(--c-primary)}
.wa-dest-line{grid-column:1;font-size:15.5px;color:var(--c-muted);max-width:62ch}
/* "14 places in the atlas" is the only link on a destination card that goes
   deeper rather than sideways, and it read as a caption. */
.wa-dest-count{grid-column:2;grid-row:1}
.wa-dest-count a{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-muted);white-space:nowrap;transition:color .2s}
.wa-dest-count a:hover{color:var(--c-accent)}
@media(max-width:760px){
  .wa-dest-band{grid-template-columns:minmax(0,1fr)}
  .wa-dest-count{grid-column:1;grid-row:auto}
}
/* An operator of ours is the strongest thing on this page and the grid said so
   in a line of small caps at the top of the card. The map spends three tiers and
   a gold keel making the same point; the grid can spend a rule. */
/* The page has three collections — cities, destinations, stories — and after
   143 two of them lifted on hover and this one did not. A card that acts should
   act the same way wherever it is. */
.wa-dest{transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s;padding:24px 26px 22px 0;border-bottom:var(--fj-rule);border-right:var(--fj-rule)}

.wa-dest:nth-child(3n){border-right:0;padding-right:0}
/* Twenty-two identical blocks is a directory. This grid varies on the one real
   difference in the data rather than on decoration: three of these countries are
   run by an operator in the group — Kamerun, Pearl Trails, Namib Skyline — and
   those three lead their region across two columns, because that is a fact about
   who answers the enquiry rather than a design flourish. Everything else stays
   the same width, which is what makes the difference legible. */
.wa-dest[data-ours]{box-shadow:inset 0 3px 0 var(--c-primary)}
.wa-dest[data-ours]{grid-column:span 2;padding-right:var(--sp-6)}
.wa-dest[data-ours] h3{font-size:clamp(28px,3.4vw,42px);margin-top:12px}
.wa-dest[data-ours] p{font-size:16px;max-width:56ch}
/* Each block carries its region's ink as a rule at the top edge, so scrolling
   the grid is the same sweep across the continent the map makes. */
.wa-dest{border-top:3px solid var(--reg-tone,var(--c-border))}
/* Filtering used to swap the grid between two states in one frame, which reads
   as the page having reloaded rather than as the same surface narrowing. The
   blocks dim for a beat and come back. No transform and no height animation —
   this runs on twenty-two elements and a grid reflow is the expensive part, so
   only opacity moves. The global reduced-motion rule removes it entirely. */
.wa-dest,.wa-dest-band{transition:opacity var(--t-mid) var(--ease)}
.wa-dests.is-settling .wa-dest,.wa-dests.is-settling .wa-dest-band,
.wa-dests.is-settling .wa-dest-more{opacity:.25;transition-duration:.08s}

/* ONE DAY — the peak, just before the last call.

   Bigger than anything else on the page except the hero, and it has to be:
   eleven numbered sections of evidence have been spent getting a reader here,
   and the register has to change or this reads as a twelfth. It sits on the
   dark ground with more air above and below than any other zone.

   The list is a list because the sentences are not a paragraph — each one is a
   separate thing a reader is asked to picture, and running them together makes
   them scan as examples rather than as memories. */
.wa-peak{padding:132px 0 124px}
.wa-peak h2{font-size:clamp(32px,4.4vw,58px);line-height:1.06;margin-top:18px;
  max-width:22ch}
/* Two columns from 900 up. Six memories in one narrow column ran the section to
   1,338px and left three fifths of the frame empty; the lines are short and
   they read as a set, so they belong side by side. */
.wa-peak-list{list-style:none;margin:var(--sp-5) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--sp-5);border-top:1px solid color-mix(in srgb,var(--c-bg) 15%,transparent)}
.wa-peak-list li{font-family:var(--fj-display);font-size:clamp(17px,1.8vw,23px);
  font-weight:400;line-height:1.34;color:var(--c-bg);padding:11px 0 11px 26px;
  border-bottom:1px solid color-mix(in srgb,var(--c-bg) 15%,transparent);
  position:relative}

/* A rule rather than a bullet: a bullet turns six memories into six features. */
.wa-peak-list li::before{content:"";position:absolute;left:0;top:1.05em;
  width:12px;height:1px;background:var(--c-accent)}
.wa-peak-turn{margin-top:var(--sp-5);font-family:var(--fj-display);font-weight:700;
  font-size:clamp(21px,2.6vw,34px);line-height:1.18;letter-spacing:-.015em;
  color:var(--c-bg);max-width:24ch;text-wrap:balance}
@media(max-width:880px){
  .wa-peak{padding:86px 0 80px}
  .wa-peak h2{max-width:none}
  .wa-peak-list{grid-template-columns:1fr}
}

/* AFRICA, IN MOTION — the window under the hero.

   Sixty/forty, picture on the left, because the picture is the argument and the
   words are the caption to it. It sits on the dark ground so the frame reads as
   a window cut into the page rather than a card sitting on it. */
/* The picture runs off the left edge of the page and the copy keeps the page's
   own right margin. Expressed against the section's width rather than with
   100vw: on a desktop with a classic scrollbar 100vw is wider than the section
   by the scrollbar, and the difference becomes horizontal overflow on the one
   page the whole site is judged by. */
/* AFRICA, IN MOTION — a band with a window cut into it.

   Three builds got here. Beside the copy in a column it was a card; bled to the
   left edge of the screen it read as falling off the page; inset across the
   frame with all four edges feathered it was still a rectangle, because
   softening the edges of a rectangle does not stop it being one.

   What makes a picture belong to a page is being CROPPED by it. So the window
   is flush to the top, the right and the bottom of the band — three edges the
   band itself ends, with nothing to blend because there is no page beside them
   — and only the fourth needs a gradient. That one runs a long way, and the
   copy sits on top of where it lands rather than in a column beside it. No
   gutter, no seam, no boundary anywhere a reader can point at.

   The band is a single grid cell with both children in it, so the stage and the
   copy overlap by construction rather than by absolute positioning against a
   height somebody has to keep in step. */
/* A dark panel, but not a .wa-zone: the band has to reach the section's own top
   and bottom edges and .wa-zone would put 88px of padding between them. So it
   takes the ground and the type colours itself, and it is in the token list in
   afrinkong.css that repoints --c-accent and --c-muted for dark grounds — the
   comment above that list says any new dark panel joins it, and the first build
   of this section did not, which put "01" at 2.31:1 on its own background. */
.wa-motion{position:relative;border-top:1px solid color-mix(in srgb,var(--c-bg) 13%,transparent);
  background:var(--fj-basalt);color:var(--fj-onbasalt)}
.wa-motion h2{color:var(--c-bg)}
.wa-motion .wa-note{color:var(--fj-onbasalt-dim)}
/* The band was sized when this section cross-faded photographs and held
   each for 5.2 seconds. It now carries a two-minute film in sixteen
   pieces, and at 62vh it was 559px of a 20,190px page — the third
   smallest section on the homepage, and the smallest thing above the
   fold that anybody actually watches. Measured, not guessed: see the
   table in the commit that changed it. */
.wa-mo-band{display:grid;min-height:clamp(560px,78vh,860px);isolation:isolate}
.wa-mo-band > *{grid-area:1 / 1}
.wa-mo-stage{position:relative}
/* Cropped by the band on three sides. The 34% is where the picture starts, not
   where it becomes visible: the gradient carries it a long way further left. */
.wa-mo-window{position:absolute;inset:0 0 0 34%;overflow:hidden;background:transparent}
.wa-mo-copy{position:relative;z-index:2;align-self:center;padding:56px 0}
/* Everything in the copy stops well before the picture starts. The rule over
   the number and the one over the controls ran the full width of the frame and
   drew two lines straight across the photograph — the only hard edges left in
   the section, and both of them mine. The measure is a fraction of the band so
   it tracks the window's 34% rather than being a number to keep in step. */
.wa-mo-copy h2{margin-top:16px;max-width:15ch}
.wa-mo-copy .wa-note{max-width:40ch}
.wa-mo-copy .wa-head-no,
.wa-mo-copy .wa-mo-controls{max-width:min(42%,500px)}
.wa-mo-copy .wa-frame{padding-right:0}

.wa-mo-shot{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1.1s var(--ease);pointer-events:none}
.wa-mo-shot[data-on]{opacity:1;pointer-events:auto}
/* One gradient, on the one edge that faces the page. It reaches 44% of the
   window's width, which is most of the way across the copy — the picture is
   already gone by the time the type starts, and there is no line where it
   went. */
.wa-mo-shot img,.wa-mo-shot video{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.06) 12%, rgba(0,0,0,.28) 24%,
    rgba(0,0,0,.66) 34%, #000 46%);
  mask-image:linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.06) 12%, rgba(0,0,0,.28) 24%,
    rgba(0,0,0,.66) 34%, #000 46%)}
.wa-mo-shot figcaption{position:absolute;right:0;bottom:0;
  padding:34px 32px 20px;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-bg);
  background:linear-gradient(to top,rgba(6,18,14,.66),rgba(6,18,14,0))}

/* The controls live with the copy, on the dark side, because that is the side
   a reader is reading from and the side with nothing in the way. */
.wa-mo-controls{display:flex;margin-top:var(--sp-5);
  border-top:1px solid color-mix(in srgb,var(--c-bg) 16%,transparent)}
.wa-mo-rail{display:contents}
.wa-mo-pick{padding:14px 20px 14px 0;text-align:left;background:transparent;
  border-top:2px solid transparent;margin-top:-1px;
  transition:border-color var(--t-fast) var(--ease)}
.wa-mo-pick + .wa-mo-pick{padding-left:20px;
  border-left:1px solid color-mix(in srgb,var(--c-bg) 16%,transparent)}
.wa-mo-pick b{display:block;font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fj-onbasalt-dim);
  transition:color var(--t-fast) var(--ease)}
.wa-mo-pick i{display:block;margin-top:5px;font-style:normal;font-size:13px;
  font-family:var(--fj-display);color:var(--fj-onbasalt-dim);
  transition:color var(--t-fast) var(--ease)}
.wa-mo-pick:hover b,.wa-mo-pick:hover i{color:var(--c-bg)}
.wa-mo-pick[aria-pressed="true"]{border-top-color:var(--c-accent)}
.wa-mo-pick[aria-pressed="true"] b{color:var(--c-accent)}
.wa-mo-pick[aria-pressed="true"] i{color:var(--c-bg)}
.wa-mo-hold{margin-left:auto;padding:14px 0 14px 20px;font-family:var(--fj-mono);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fj-onbasalt-dim);background:transparent;border-top:2px solid transparent;
  margin-top:-1px;border-left:1px solid color-mix(in srgb,var(--c-bg) 16%,transparent);
  transition:color var(--t-fast) var(--ease)}
.wa-mo-hold:hover{color:var(--c-bg)}
.wa-mo-hold .wa-mo-hold-off{display:none}
.wa-mo-hold[aria-pressed="true"] .wa-mo-hold-on{display:none}
.wa-mo-hold[aria-pressed="true"] .wa-mo-hold-off{display:inline}

/* Below 900 the picture cannot be half the band and still be a picture, so it
   stops overlapping: full width above, copy under it on the section's ground.
   The gradient turns to face up rather than left, for the same reason it faced
   left before — it is the edge the type is on. */
@media(max-width:900px){
  .wa-mo-band{display:block;min-height:0}
  .wa-mo-stage{height:clamp(280px,52vw,420px)}
  .wa-mo-window{position:absolute;inset:0}
  .wa-mo-copy{padding:var(--sp-5) 0 56px}
  .wa-mo-copy h2{max-width:none}
  /* The measure that keeps the rules off the picture is a desktop problem: here
     the picture is above the copy rather than behind it. */
  .wa-mo-copy .wa-head-no,
  .wa-mo-copy .wa-mo-controls{max-width:none}
  .wa-mo-shot img,.wa-mo-shot video{
    -webkit-mask-image:linear-gradient(to top,
      transparent 0%, rgba(0,0,0,.3) 10%, #000 30%);
    mask-image:linear-gradient(to top,
      transparent 0%, rgba(0,0,0,.3) 10%, #000 30%)}
  .wa-mo-shot figcaption{left:0;right:auto;padding:34px 20px 20px}
}
@media(max-width:560px){
  .wa-mo-controls{flex-wrap:wrap}
  .wa-mo-pick{flex:1 1 100%;padding:12px 0}
  .wa-mo-pick + .wa-mo-pick{padding-left:0;border-left:0;
    border-top:1px solid color-mix(in srgb,var(--c-bg) 16%,transparent)}
  .wa-mo-hold{flex:1 1 100%;margin-left:0;padding:12px 0;border-left:0;
    border-top:1px solid color-mix(in srgb,var(--c-bg) 16%,transparent)}
}
@media(prefers-reduced-motion:reduce){.wa-mo-shot{transition:none}}

/* WHAT DO YOU WANT TO FEEL — the first block under the hero.

   Eight cards, and the sentence is the card. Everything else on this page sets
   a name first and explains underneath; this one inverts that, because the
   thing being sold here is the morning and not the country. The label and the
   count sit at the foot in the metadata voice, doing the job the site always
   does — saying how many places this is true of, so a promise arrives attached
   to its evidence.

   Four across at full width, because eight in two rows reads as a set and eight
   in a line reads as a menu. */
.wa-feel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fj-rule-w,1px);
  background:var(--c-border);border:1px solid var(--c-border);margin-top:var(--sp-5)}
.wa-feel{position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--c-bg);padding:26px 24px 20px;text-decoration:none;
  transition:background var(--t-fast) var(--ease)}
.wa-feel:hover{background:var(--fj-dust)}
/* A CARD WITH A PHOTOGRAPH IN IT
   The photograph is above the words, not behind them, and that one decision is
   what lets the picture be a picture.

   It was behind them first. Type over a photograph has no ground colour, so it
   needed a scrim; the scrim was not dark enough, so the frame was dimmed to 62%;
   every contrast measurement then passed and the photographs could not be seen.
   Lightening it to 88% helped and did not fix it, because the cause was never
   the numbers — it was that the words were standing on the image.

   With the copy on its own ground the scrim goes, the brightness filter goes,
   and the photograph is served at the exposure it was taken at. It also puts the
   type back where the contrast pass can read it out of the cascade, so this
   stops being measured by hand and starts being checked on every run. */
.wa-feel.is-lit{padding:0;background:var(--c-bg);overflow:hidden;min-height:0}
/* 3:2, because that is what most of these frames were shot at — a 5:4 card
   centre-cropped a herd down to blurry grass and a desert sunrise down to empty
   sky. object-position holds the subject where the crop still bites. */
.wa-feel-art{display:block;width:100%;height:auto;aspect-ratio:3 / 2;
  object-fit:cover;object-position:var(--fj-feel-pos,50% 50%);
  transition:transform var(--t-slow,.6s) var(--ease)}
.wa-feel.is-lit:hover{background:var(--fj-dust)}
.wa-feel.is-lit:hover .wa-feel-art{transform:scale(1.03)}
.wa-feel-in{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;
  padding:22px 22px 20px}
@media(prefers-reduced-motion:reduce){.wa-feel-art{transition:none}
  .wa-feel.is-lit:hover .wa-feel-art{transform:none}}
.wa-feel-say{font-family:var(--fj-display);font-size:clamp(17px,1.5vw,21px);
  font-weight:700;line-height:1.24;letter-spacing:-.01em;color:var(--c-ink);
  text-wrap:balance}
/* The lens name is the smallest thing on the card on purpose. A visitor who
   already knows they want "wildlife" is served by the filters further down;
   this section is for the one who does not, and leading with the taxonomy
   would put them straight back into the browsing the section exists to delay. */
.wa-feel-what{margin-top:auto;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent)}
.wa-feel-n{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted)}
.wa-feel-count{display:none;justify-content:flex-end;gap:.5em;margin-top:10px;
  font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;color:var(--c-muted)}
.wa-feel-count b{font-weight:400;color:var(--c-accent)}
.wa-feel-close{margin-top:var(--sp-5);font-family:var(--fj-display);
  font-size:clamp(21px,2.3vw,30px);line-height:1.28;max-width:30ch;
  text-wrap:balance}
.wa-feel-close em{font-style:normal;color:var(--c-accent)}
.wa-feel-go{display:inline-block;margin-top:16px;font-family:var(--fj-mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:2px solid var(--c-accent);padding-bottom:5px;transition:color .2s}
.wa-feel-go:hover{color:var(--c-accent)}
@media(max-width:1099px){.wa-feel-grid{grid-template-columns:repeat(2,1fr)}}
/* MOBILE: A RAIL, NOT A COLUMN
   Eight cards stacked is eight scrolls before the section is over, and the
   reader has to leave the argument to get past it. Side by side they stay one
   thing you move through — 86% of the viewport so the next card is visibly
   there, snapping so it never rests half-way, and a count so it is obvious how
   much is left. Scroll-snap does the work; the script only writes the number. */
@media(max-width:560px){
  .wa-feel-grid{display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;gap:1px;
    overscroll-behavior-x:contain}
  .wa-feel-grid::-webkit-scrollbar{display:none}
  /* 84vw, not 84% — the brief is a share of the phone's screen, and the rail
     sits inside the section's gutters, so a percentage of the rail would come
     out several points short of it. snap-align:start rather than centre so
     every card's left edge lands on the same line as the copy above it. */
  .wa-feel-grid > .wa-feel{flex:0 0 84vw;scroll-snap-align:start}
  .wa-feel-count{display:flex}
  .wa-feel{padding:20px 18px 16px;gap:9px}
  .wa-feel.is-lit{padding:0}
  .wa-feel-in{padding:18px 18px 16px;gap:9px}
  .wa-feel-close{max-width:none}
}

/* WHEN CAN YOU TRAVEL — twelve months as evidence rather than as controls.

   Four across at full width. Twelve in a row is the filter strip in the grid
   above, which is the right shape for a control and the wrong one for a
   paragraph: each month here carries three country names and a count, and that
   does not fit in an eighth of the frame. Three rows of four reads as a year. */
.wa-season-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--fj-rule-w,1px);background:var(--c-border);
  border:1px solid var(--c-border);margin-top:var(--sp-5)}
.wa-season{background:var(--fj-dust);padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:6px}
.wa-season b{font-family:var(--fj-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-muted)}
/* The count is the loudest thing in the cell, because the claim this section
   makes is arithmetic: no month is empty, and here is how full each one is. */
.wa-season-n{display:flex;align-items:baseline;gap:9px;
  font-family:var(--fj-display);font-size:clamp(22px,2.2vw,30px);
  font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--c-ink)}
/* The figure beside the word. The word is the site's voice and the figure is
   what a reader compares — "Thirty-eight" and "Sixteen" are the same length on
   the page and thirty-eight is more than twice sixteen. */
.wa-season-n i{font-style:normal;font-family:var(--fj-mono);font-size:10px;
  font-weight:400;letter-spacing:.14em;color:var(--c-muted)}
/* THE SHAPE OF THE YEAR, WHICH WAS THE ONE THING THE SECTION NEVER DREW.
   The lede says January is the busiest and April the quietest; underneath it
   sat twelve identical cells that gave a reader no way to see it. The bar is
   the same count as the words, measured against the fullest month, so the year
   has a silhouette before a word of it is read. */
.wa-season-bar{display:block;height:3px;margin-top:2px;
  background:color-mix(in srgb,var(--c-ink) 10%,transparent)}
.wa-season-bar>span{display:block;height:100%;background:var(--c-accent);
  opacity:.55;transition:opacity .25s ease}
.wa-season:hover .wa-season-bar>span{opacity:.9}
/* The busiest month is marked, and the quietest is NOT greyed. Drawn in the
   muted tone it read as unavailable — which is the exact opposite of what this
   section exists to say, that no month is a bad month everywhere. The width
   already carries "fewer"; the colour would have carried "closed". */
.wa-season.is-top .wa-season-bar>span{opacity:.95}
.wa-season-who{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--c-muted)}
.wa-season-who a{border-bottom:1px solid var(--c-border);transition:border-color .2s,color .2s}
.wa-season-who a:hover{color:var(--c-accent);border-bottom-color:var(--c-accent)}
@media(max-width:900px){.wa-season-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .wa-season-grid{grid-template-columns:1fr}
  /* WRAP, or flex-basis:100% is a request nobody grants. The month, the count,
     the bar and the country names sit in one flex row here; without wrapping,
     the two items asking for a full line get squeezed instead of moved, and at
     320px the measure bar came out five pixels long. */
  .wa-season{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px 12px;
    padding:14px 16px}
  .wa-season b{min-width:34px}
  .wa-season-n{font-size:20px}
  /* The bar spans the row on a phone, under the month and its figure, rather
     than trying to share a baseline with them. */
  .wa-season-bar{flex-basis:100%;order:3}
  .wa-season-who{flex-basis:100%;order:4}
}

/* COME FOR THE MOMENT — four photographs at the size a photograph needs.

   Two up rather than four. Four across puts each frame at about 280px on a
   1440 screen, which is a thumbnail, and a thumbnail cannot carry the argument
   this section exists to make. Two up gives each one 570px and the section
   costs one more screen of scroll, which is the trade this page should make
   here and does not make in the destinations grid below.

   The caption sits under the picture rather than over it. Type on a photograph
   is what the band two sections up already does, at full bleed, with a graded
   wash measured against the frame — doing it again in a card, four times, on
   four photographs with four different exposures, is four more washes to
   measure and a weaker version of something the page has already said. */
/* Two voices above the grid, and they are not the same size. "Some places you
   visit. Some places change you." is the claim and is set as one; the sentence
   under it is the evidence, in the metadata voice the rest of the page uses for
   evidence. Running both at note size made the claim disappear into it. */
.wa-moment-lede{font-family:var(--fj-display);font-weight:700;
  font-size:clamp(21px,2.4vw,32px);line-height:1.2;letter-spacing:-.015em;
  margin:0 0 18px;text-wrap:balance}
.wa-moment-lede em{font-style:normal;color:var(--c-accent)}
.wa-moment-say{max-width:62ch}
/* The turn. It is the one sentence in this section that asks for something, so
   it steps out of the paragraph rather than ending it. */
.wa-moment-turn{display:block;margin-top:14px;font-family:var(--fj-display);
  font-size:clamp(16px,1.5vw,20px);font-weight:700;line-height:1.35;
  color:var(--c-ink);letter-spacing:-.01em}
.wa-moment-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-5);margin-top:var(--sp-5)}
.wa-moment{display:block;text-decoration:none;position:relative}
.wa-moment-art{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;
  background:var(--c-primary)}
.wa-moment-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.wa-moment:hover .wa-moment-art img{transform:scale(1.04)}
.wa-moment-say{display:block;padding:18px 0 0}
.wa-moment-say b{display:block;font-family:var(--fj-display);
  font-size:clamp(19px,1.9vw,26px);font-weight:700;line-height:1.22;
  letter-spacing:-.01em;color:var(--c-ink);text-wrap:balance}
.wa-moment-say i{display:block;margin-top:9px;font-style:normal;
  font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-accent)}
/* The whole card is the target, picture included. */
.wa-moment::after{content:"";position:absolute;inset:0}
.wa-moment:hover .wa-moment-say b{color:var(--c-accent)}
@media(max-width:760px){
  .wa-moment-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .wa-moment-say{padding-top:14px}
}

/* The rest of a region, as an index rather than as more write-ups.

   The grid grew with the dataset: 22 countries made this section 29% of the
   homepage, and the 54 we sell into would have made it about 40% — two fifths
   of the front page spent on one list where nothing outranks anything. Three
   countries a region keep the paragraph; the rest keep everything except the
   paragraph. Same element, same data-tags, same data-months, so the filters
   and the counts do not know the difference and a country does not stop being
   findable for being fourth alphabetically.

   It is one band across the grid rather than columns inside it. Columns were
   the first attempt and they were wrong: an operator's card is two columns
   wide, so three leads fill four slots of three and the tail was offered the
   two empty ones beside the third card — which rendered as two country names
   stranded in 275px of nothing, reading as a hole in the layout rather than as
   an index. A band is the same shape whether it carries two countries or
   twenty, which is the property this section needs most. */
.wa-dest-more{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:var(--sp-4);row-gap:2px;border-top:var(--fj-rule);padding:11px 0 13px;
  transition:opacity var(--t-mid) var(--ease)}
.wa-dest-more-head{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-muted);margin:0;padding-right:4px}
/* Overriding the card, not extending it: this element is a .wa-dest so that the
   filters see it, which means it arrives carrying a card's padding and rules. */
.wa-dest--brief{position:relative;padding:4px 0 4px 10px;border:0;
  box-shadow:inset 2px 0 0 var(--reg-tone,var(--c-border));
  display:inline-flex;align-items:baseline;gap:8px;transition:box-shadow .2s}
.wa-dest--brief:hover{transform:none;box-shadow:inset 3px 0 0 var(--c-accent)}
/* .wa-dest a is declared after this block at the same specificity, so it wins
   on source order; the extra class is what makes an index entry an index entry
   rather than a card's call to action shrunk down. */
.wa-dest.wa-dest--brief a{display:inline;margin:0;font-family:var(--fj-display);
  font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;
  border-bottom:0;padding-bottom:0;color:var(--c-ink)}
.wa-dest.wa-dest--brief a:hover{color:var(--c-accent)}
/* The whole entry is the target, not the six characters of the name. */
.wa-dest.wa-dest--brief a::after{content:"";position:absolute;inset:0}
.wa-dest-brief-when{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-muted);white-space:nowrap}
/* The season sentence is the answer to a month, so it appears when a month is
   what was asked — the same rule the full cards follow. In the band it would
   break the line, so the compact range stays and the sentence does not come. */
.wa-dest--brief .wa-dest-when{display:none}
@media(max-width:900px){.wa-dest[data-ours]{grid-column:span 1;padding-right:26px}}
/* The phone composition. At 320px the twenty-two blocks ran to eight thousand
   eight hundred pixels — a directory you scroll past rather than read. The
   summary clamps to three lines and the block tightens; the full write-up is one
   tap away on the country's own page, which is where a phone reader wants it.
   Nothing is removed, so the markup a crawler and a screen reader get is the
   same at every width. */
@media(max-width:700px){
  .wa-dest{padding:18px 0 16px;border-right:0}
  .wa-dest h3,.wa-dest[data-ours] h3{font-size:22px;margin:7px 0 5px}
  .wa-dest[data-ours] p{font-size:14.5px}
  .wa-dest>p:not(.wa-dest-near):not(.wa-dest-when){display:-webkit-box;
    -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .wa-dest a{margin-top:12px}
  .wa-dest-band{padding:26px 0 12px}
  .wa-dest-line{font-size:14.5px}
  /* An index entry is not a card and does not take the card's phone padding.
     The rules above are all `.wa-dest`, the same specificity as
     `.wa-dest--brief` and later in the sheet, so without the extra class they
     win: 18px of top padding on a 35px entry, and a left inset of zero that
     put the name hard against its own region rule. */
  .wa-dest.wa-dest--brief{padding:4px 0 4px 10px}
  .wa-dest.wa-dest--brief a{margin-top:0}
}
.wa-dest b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-accent);min-height:17px}
.wa-dest h3{font-size:25px;margin:9px 0 6px}
.wa-dest p{font-size:14.5px;color:var(--c-muted)}
/* What a country touches. Twenty-two countries listed as twenty-two separate
   things is a directory; the thing that makes them a continent is that most of
   them share a border with another one on this list. Read off the boundary
   polygons in links.json, so the seven that show nothing here — the islands and
   the ones whose neighbours are not published yet — show nothing rather than
   being given a neighbour to look complete. */
/* "Walk out of it into Nigeria" is the most useful sentence on a destination
   card and the only one that is also a set of links. It was set as an aside; it
   is the card's second call. */
.wa-dest-near{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--c-muted)}
/* `.wa-dest a` sets a two-pixel accent rule on every link in a block and is
   declared after this, so without matching its specificity these read as five
   more calls to action rather than as a sentence. */
.wa-dest .wa-dest-near a{display:inline;margin-top:0;font-family:inherit;font-size:inherit;
  letter-spacing:0;text-transform:none;padding-bottom:0;color:var(--c-ink);
  border-bottom:1px solid var(--c-border);transition:color .2s,border-color .2s}
.wa-dest .wa-dest-near a:hover{color:var(--c-accent);border-color:var(--c-accent)}
.wa-dest a{display:inline-block;margin-top:16px;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--c-accent);padding-bottom:4px;transition:color .2s}
.wa-dest a:hover{color:var(--c-accent)}
.wa-dest .soon{font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);display:inline-block;margin-top:16px;border-bottom:2px solid var(--c-border);padding-bottom:4px}
@media(max-width:900px){.wa-dests{grid-template-columns:1fr 1fr}.wa-dest:nth-child(3n){border-right:var(--fj-rule);padding-right:28px}.wa-dest:nth-child(2n){border-right:0;padding-right:0}}
@media(max-width:560px){.wa-dests{grid-template-columns:1fr}.wa-dest{border-right:0 !important;padding-right:0 !important}}

/* Three of the five steps name something this site can actually do, so they are
   links to the thing that does it. Four and five happen after you land and stay
   as prose — a link there would be a link to nothing. */
.wa-step--go{display:block;transition:background var(--t-fast) var(--ease)}
.wa-step--go:hover{background:var(--fj-dust)}
.wa-step--go:hover b{color:var(--c-accent)}
.wa-step-go{display:inline-block;margin-top:12px;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);
  border-bottom:1px solid var(--c-border);padding-bottom:3px}
.wa-step--go:hover .wa-step-go{color:var(--c-accent);border-color:var(--c-accent)}
.wa-scale-go{margin-top:18px}
@media(pointer:coarse){.wa-step--go{min-height:44px}}

/* ---- africa now ------------------------------------------------------------------
   Inverted, because it is an argument rather than a listing: the thing it argues
   against is a continent filed under wildlife and left there. Same dark-panel
   language as the contemporary chapter on every portrait and the module on
   /stories, so a reader who has met it once recognises it.

   Two of the nine carry a photograph, which is how many countries the resolver
   has covered. The other seven take a tonal plate at the same aspect ratio, so
   the strip does not reflow as the rest arrive. */
.wa-nows{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:color-mix(in srgb,var(--c-bg) 14%,transparent);margin-top:var(--sp-5)}
/* The contemporary strip is the one section that dates: it says what is
   happening now, on a page that is otherwise permanent. It read like the rest,
   so nothing marked it as perishable. The stamp does. */
.wa-now{display:flex;flex-direction:column;background:var(--fj-basalt);
  transition:background var(--t-fast) var(--ease)}
.wa-now:hover{background:color-mix(in srgb,var(--c-bg) 7%,var(--fj-basalt))}
.wa-now-art{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.wa-now-art img{width:100%;height:100%;object-fit:cover}
.wa-now-plate{position:absolute;inset:0;
  background:color-mix(in srgb,var(--reg-tone,var(--c-primary)) 62%,var(--c-primary))}
.wa-now-plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(247,242,231,.10),rgba(247,242,231,0) 62%)}
.wa-now-say{display:block;padding:20px 18px 22px}
.wa-now-say i{display:block;font-style:normal;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent)}
.wa-now-say b{display:block;margin-top:10px;font-family:var(--fj-display);font-size:20px;
  text-transform:uppercase;line-height:1.06;color:var(--c-bg)}
.wa-now-say p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--fj-onbasalt-dim)}
.wa-now:hover .wa-now-say b{color:var(--c-accent)}
@media(pointer:coarse){.wa-now{min-height:44px}}
/* ---- the strip turning over ------------------------------------------------
   OPACITY AND A SHORT RISE, NOTHING ELSE. The photograph and the caption fade
   together and the caption lifts a few pixels behind it, so a card reads as
   one thing changing rather than two. The transform is on the caption inside
   the card, never on an ancestor of the hero's fixed picture — a transform up
   there would make a containing block and the fixed-window band would quietly
   stop working. */
.wa-now-art img,.wa-now-say{transition:opacity .34s var(--ease,ease),
  transform .34s var(--ease,ease)}
.wa-now.is-turning .wa-now-art img{opacity:0}
.wa-now.is-turning .wa-now-say{opacity:0;transform:translateY(7px)}
/* The control only exists once the script has something to control, so it is
   built in the script and styled here. */
.wa-now-turn{margin:18px 0 0;display:flex;justify-content:flex-end}
.wa-now-hold{display:inline-flex;align-items:center;gap:9px;min-height:32px;
  padding:6px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fj-onbasalt-dim);
  transition:color var(--t-fast) var(--ease)}
.wa-now-hold:hover{color:var(--c-bg)}
@media(pointer:coarse){.wa-now-hold{min-height:44px}}
.wa-now-hold i{display:block;width:9px;height:11px;background:currentColor;
  /* two bars while it is running, one triangle once it is held */
  clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%)}
.wa-now-hold[aria-pressed="true"] i{clip-path:polygon(0 0,100% 50%,0 100%)}
@media(prefers-reduced-motion:reduce){
  .wa-now-art img,.wa-now-say{transition:none}
  .wa-now.is-turning .wa-now-say{transform:none}}
@media(max-width:900px){.wa-nows{grid-template-columns:1fr 1fr}}
/* The phone composition, which is not the desktop one in one column. Stacked
   four-by-three cards ran this section to three and a half phone screens — more
   than the argument is worth, and more than the six countries in it. The picture
   moves beside the writing at a third of the width, which is how a card of this
   kind is read on a phone anyway: the image identifies, the words carry it. */
@media(max-width:560px){
  .wa-nows{grid-template-columns:1fr}
  .wa-now{display:grid;grid-template-columns:38% 1fr;align-items:stretch}
  /* No aspect-ratio here: with height:100% in a grid row, an aspect ratio
     makes the width track the height, so a tall card grew its picture wider
     than the 38% column and painted over the first characters of every
     line beside it. The column decides the width; the row decides the
     height. */
  .wa-now-art{aspect-ratio:auto;height:100%;width:100%;min-width:0}
  .wa-now-say{padding:14px 14px 16px}
  .wa-now-say b{font-size:17px;margin-top:7px}
  .wa-now-say p{margin-top:6px;font-size:13.5px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---- experiences ---------------------------------------------------------------- */
.wa-exps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--c-primary)}
/* Eight cards that filter the grid two sections down, and nothing about them
   said they were pressable until you pressed one. A card that acts is a card
   that answers the pointer. */
/* THE DISC GETS ITS OWN LINE, AND THAT IS THE ALIGNMENT FIX.
   Beside the heading there is no honest way to align a 42px disc against an
   18px cap: top-aligned its centre falls a line and a half below the word it
   belongs to, centre-aligned it hangs off the top of the card, and every
   correction is a magic number that only holds at one width. Eight of them at
   eight different optical heights is what the row actually looked like. On its
   own line the alignment stops being a nudge and becomes structural — every
   disc sits on the top edge of its grid row because the row puts it there. */
.wa-exp{display:flex;flex-direction:column;align-items:flex-start;
  padding:26px 26px 20px 0;border-bottom:var(--fj-rule);
  border-right:var(--fj-rule)}
.wa-exp > div{display:flex;flex-direction:column;flex:1 1 auto;width:100%}
/* Outlined, not eight filled black dots. At 42px solid they were the heaviest
   thing in the section and the type was reading second; as rings they sit
   behind the words, and the fill is freed up to do the job it should have had
   all along — saying which one you have pressed. */
.wa-exp .wa-ico{width:44px;height:44px;margin-bottom:16px;background:none;
  color:var(--c-primary);
  border:1.5px solid color-mix(in srgb,var(--c-primary) 26%,transparent);
  transition:background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.wa-exp .wa-ico svg{width:22px;height:22px;stroke-width:1.5}
.wa-exp:hover .wa-ico{border-color:var(--c-primary)}
.wa-exp[aria-pressed="true"] .wa-ico{background:var(--c-accent);
  border-color:var(--c-accent);color:var(--c-bg)}
.wa-exp b{display:block;font-family:var(--fj-display);font-size:18px;font-weight:700;text-transform:uppercase;line-height:1.05}
/* CHILD SELECTOR, AND IT IS A BUG FIX, NOT A TIDY-UP.
   This was `.wa-exp span`, and the icon is a <span> too. At 0,1,1 that beat
   `.wa-ico`'s own 0,1,0, so the disc was handed display:block — which makes its
   align-items and justify-content inert — plus the description's font size,
   muted colour and top margin. Every glyph has been sitting hard against the
   top-left corner of its disc, ten pixels up and ten across, for as long as the
   section has existed. The description lives inside the div; the icon does not,
   so saying which one is meant is the whole fix. */
.wa-exp > div > span{display:block;font-size:13px;line-height:1.5;color:var(--c-muted);margin-top:7px;max-width:30ch}
/* The experience blocks are controls now, not captions. Six of them name a lens
   a country can declare it leads on, so they carry the true count and set the
   filter three screens down. The other four — rainforest, adventure, cities,
   eco-tourism — are categories every country is written up in, so there is no
   leader to name: they say so and go to the full list. Giving them the lens
   count of the lens they happen to sit inside would have been the mountains
   number wearing an adventure label. */
button.wa-exp{width:100%;text-align:left;background:none;font:inherit;color:inherit;
  border-left:0;border-top:0;border-right:0;cursor:pointer;
  transition:background var(--t-fast) var(--ease)}
.wa-exp--all{cursor:pointer}
.wa-exp[aria-pressed="true"]{background:var(--fj-dust)}
.wa-exp[aria-pressed="true"] b{color:var(--c-accent)}
/* THE COUNT IS THE CARD'S FLOOR, NOT THE NEXT THING AFTER THE SENTENCE.
   The descriptions run from one line to three, so left in the flow the eight
   counts landed at four different heights across two rows — the break that
   reads first, before anything about the discs. Pushed to the bottom of a
   stretched card and given a rule of its own, the eight sit on two lines that
   run the width of the section. */
.wa-exp-n{display:block;margin-top:auto;padding-top:13px;font-style:normal;
  font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em;line-height:1.6;
  text-transform:uppercase;color:var(--c-muted);
  border-top:1px solid color-mix(in srgb,var(--c-primary) 12%,transparent)}
.wa-exp[aria-pressed="true"] .wa-exp-n{color:var(--c-accent)}
.wa-exp{transition:background .18s,box-shadow .18s}
.wa-exp:hover{background:color-mix(in srgb,var(--c-bg) 96%,var(--c-primary))}
/* Column rules, cleared on whichever card ends the row at each width — the same
   idiom the regions, the stories and the cities already use, so the eight read
   as one grid rather than eight things floating in a band. */
.wa-exp:nth-child(4n){border-right:0;padding-right:0}
@media(max-width:1050px){.wa-exps{grid-template-columns:1fr 1fr 1fr}
  .wa-exp:nth-child(4n){border-right:var(--fj-rule);padding-right:26px}
  .wa-exp:nth-child(3n){border-right:0;padding-right:0}}
@media(max-width:760px){.wa-exps{grid-template-columns:1fr 1fr}
  .wa-exp:nth-child(3n){border-right:var(--fj-rule);padding-right:26px}
  .wa-exp:nth-child(2n){border-right:0;padding-right:0}}
@media(max-width:520px){.wa-exps{grid-template-columns:1fr}
  .wa-exp{border-right:0 !important;padding-right:0 !important}
  /* One per row: the count has nothing to align with, so the rule above it is
     just a line across a phone. */
  .wa-exp-n{border-top:0;padding-top:0;margin-top:11px}}

/* ---- the two flagship countries -------------------------------------------------- */
.wa-flag{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--c-accent)}
.wa-flag-col{padding:34px 40px 30px 0}
.wa-flag-col:last-child{border-left:var(--fj-rule-dark);padding-left:40px;padding-right:0}
.wa-flag-col .wa-stamp{color:var(--c-accent)}
.wa-flag-col h3{font-size:clamp(26px,3.2vw,40px);margin:14px 0 12px;color:var(--c-bg)}
.wa-flag-col p{color:var(--fj-onbasalt-dim);font-size:15.5px}
.wa-flag-col a{display:inline-block;margin-top:20px;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-bg);border-bottom:2px solid var(--c-accent);padding-bottom:4px}
.wa-flag-col a:hover{color:var(--c-accent)}
@media(max-width:820px){.wa-flag{grid-template-columns:1fr}.wa-flag-col{padding:26px 0 24px;border-bottom:var(--fj-rule-dark)}.wa-flag-col:last-child{border-left:0;padding-left:0}}

/* ---- why us: four claims, no icons ------------------------------------------------
   The experience row above already carries ten medallions. Repeating the device
   here would make two unrelated sections look like the same list, so this one is
   numbered instead. */
.wa-why{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--c-primary)}
.wa-why>div{padding:26px 26px 24px 0;border-right:var(--fj-rule)}
.wa-why>div:last-child{border-right:0;padding-right:0}
.wa-why i{display:block;font-style:normal;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;color:var(--c-accent)}
.wa-why b{display:block;font-family:var(--fj-display);font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.06;margin:12px 0 8px}
.wa-why p{font-size:14.5px;color:var(--c-muted)}
@media(max-width:900px){.wa-why{grid-template-columns:1fr 1fr}.wa-why>div:nth-child(2n){border-right:0;padding-right:0}}
@media(max-width:520px){.wa-why{grid-template-columns:1fr}.wa-why>div{border-right:0 !important;padding-right:0 !important;border-bottom:var(--fj-rule)}}

/* ---- the journey: five steps, read as a track ------------------------------------- */
/* Four, not five. The fifth step said "Return home with more than
   photographs", which is not a step and not a claim. */
/* THE FORK, ABOVE THE FOUR STEPS. Section 11 went straight into a numbered
   list that all begins at /journey — which builds a journey inside ONE country
   — so a reader who wants to cross several was never told the other road
   exists. Two doors first, each carrying the SHAPE of its price rather than a
   figure: "per vehicle, per day" against "for the whole crossing" is the
   difference, and the numbers alone would hide it. */
.wa-fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);margin-top:var(--sp-5)}
.wa-fork-door{border-top:3px solid var(--c-accent);padding:20px 0 4px;
  display:block;transition:border-color .2s}
.wa-fork-door:hover{border-top-color:var(--c-ink)}
.wa-fork-door i{font-style:normal;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.24em;color:var(--c-accent)}
.wa-fork-door b{display:block;margin-top:11px;font-family:var(--fj-display);
  font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.1vw,29px);
  line-height:1.04;letter-spacing:-.015em;color:var(--c-ink)}
.wa-fork-door p{margin-top:13px;font-size:15.5px;line-height:1.55;
  color:var(--c-muted);max-width:34ch}
.wa-fork-price{display:block;margin-top:18px;font-family:var(--fj-display);
  font-weight:700;font-size:19px;color:var(--c-ink)}
/* The unit, not the figure, is the thing a reader has to carry away. */
.wa-fork-price em{display:block;margin-top:5px;font-style:normal;
  font-family:var(--fj-mono);font-size:9.5px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-muted)}
/* Spans both doors so the rule under them is one rule, but the SENTENCE is
   capped where a sentence reads. Left to the full span it set at 173
   characters — nearly twice the line this site holds itself to, and the gate
   caught it the moment the fork went in. */
.wa-fork-note{grid-column:1/-1;margin:6px 0 0;padding-top:16px;
  border-top:var(--fj-rule);font-size:14.5px;line-height:1.6;
  color:var(--c-muted);max-width:74ch}
.wa-fork-note a{color:var(--c-accent);white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--c-accent) 40%,transparent)}
.wa-fork-note a:hover{border-bottom-color:var(--c-accent)}
@media(max-width:760px){.wa-fork{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}}

.wa-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--c-primary);margin-top:var(--sp-5)}
/* Four steps numbered 01 to 04, and the numbers were the same weight as the
   labels — the same fault 134 found in the section spine, one section down. */
.wa-step{position:relative;padding:30px 22px 24px 0}
/* The dot on the rule is what makes five boxes read as one sequence. It sits on
   the border above, so it is drawn outside the padding box on purpose. */
.wa-step::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;
  border-radius:50%;background:var(--c-accent)}
.wa-step i{color:var(--c-accent);display:block;font-style:normal;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;color:var(--c-muted)}
.wa-step b{display:block;font-family:var(--fj-display);font-size:23px;font-weight:700;text-transform:uppercase;margin:10px 0 8px}
.wa-step p{font-size:14px;color:var(--c-muted)}
@media(max-width:1000px){.wa-steps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.wa-steps{grid-template-columns:1fr}.wa-step{padding-top:26px;border-bottom:var(--fj-rule)}}

/* ---- seasons ---------------------------------------------------------------------- */
/* The rules that used to be here styled a .wa-seasons grid of .wa-season cells
   with a <ul> of months inside each. No markup on the site had that shape any
   more — the section they belonged to was removed and the CSS was not — so they
   sat here meaning nothing until a new section reused the same two class names
   and silently inherited a display:grid that shrink-wrapped its frame to 627px
   of a 1440 screen. Dead CSS is not inert; it is a trap with a name on it.
   The section that needs these names now defines them itself, above. */

/* ---- stories ---------------------------------------------------------------------- */
/* SIX CARDS, NINE CELLS, AND THREE OF THEM WERE EMPTY. The lead spanned two
   rows of a three-row grid while carrying one heading and one line, so its
   column had a hole under it the size of a card; the reading room then landed
   alone in the last row with two empty cells beside it. Now the lead runs the
   full height of column one — which is what "lead" was supposed to mean — the
   four regional stories fill columns two and three, and the reading room takes
   the last row across both. Nine cells, six cards, nothing empty. */
.wa-stories{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:0;
  border-top:2px solid var(--c-primary)}
/* The stories were flat cards on a flat ground. They lift on hover like the
   city plates do, so the two collections on this page behave the same way. */
.wa-story:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(6,18,14,.16)}
.wa-story{transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s;padding:26px 28px 24px 0;border-right:var(--fj-rule);border-bottom:var(--fj-rule)}
/* The stories are links now, not captions — the section named five pieces that
   were "being written" and linked to none of them, while twenty-two finished
   long reads sat on the site. */
.wa-story{display:block;transition:background var(--t-fast) var(--ease)}
.wa-story:hover{background:var(--fj-dust)}
.wa-story:hover h3{color:var(--c-accent)}
/* Every collection on this page ends its card with a call, and the three were
   set differently: the city card underlines, the destination card underlines,
   the story card did not. One call, one shape. */
.wa-story-go{display:inline-block;margin-top:14px;font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);
  border-bottom:2px solid var(--c-accent);padding-bottom:3px}
.wa-story:hover .wa-story-go{color:var(--c-accent)}
.wa-story--all{background:var(--fj-dust);padding-left:28px}
@media(pointer:coarse){.wa-story{min-height:44px}}
.wa-story:nth-child(3),.wa-story:nth-child(5){border-right:0;padding-right:0}
/* The lead runs TWO rows, not three. Three left four hundred pixels of nothing
   under two lines of type — a hole that reads as a bug however deliberate the
   grid is — and the reading room is a better closing object as a full-width
   band than as a card wedged into the corner. Two rows of stories, then one
   band across all three columns. */
.wa-story.wide{grid-column:1;grid-row:1 / span 2;display:flex;
  flex-direction:column}
.wa-story.wide .wa-story-go{margin-top:auto}
/* THE BAND SPANS THREE COLUMNS, SO ITS PROSE NEEDS A MEASURE OF ITS OWN.
   Left to fill the row it ran to 165 characters — nobody's reading line, and
   the one thing the contrast-and-measure gate catches on this page. Heading and
   sentence sit side by side instead, each capped where it reads, which is also
   the right shape for a band: a closing object, not a stretched card. */
.wa-story--all{grid-column:1 / -1;border-right:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 48px;
  align-content:start}
.wa-story--all i{grid-column:1;grid-row:1}
.wa-story--all h3{grid-column:1;grid-row:2;max-width:16ch}
.wa-story--all p{grid-column:2;grid-row:1 / span 3;align-self:center;
  font-size:16px;max-width:46ch}
.wa-story--all .wa-story-go{grid-column:1;grid-row:3;justify-self:start}
.wa-story i{display:block;font-style:normal;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)}
.wa-story h3{font-size:clamp(21px,2.4vw,30px);margin:12px 0 9px}
.wa-story p{font-size:14.5px;color:var(--c-muted)}
/* The lead is the one story set at display size, and it now has two rows of
   column to fill rather than one. */
.wa-story.wide h3{font-size:clamp(28px,3.8vw,50px)}
.wa-story.wide p{font-size:16px;max-width:32ch}
@media(max-width:900px){.wa-stories{grid-template-columns:1fr 1fr}
  .wa-story:nth-child(3),.wa-story:nth-child(5){border-right:var(--fj-rule);padding-right:28px}
  .wa-story:nth-child(2n){border-right:0;padding-right:0}
  /* Two columns: the explicit placement above would strand the lead in a
     column of its own for three rows. Back to the flow. */
  .wa-story.wide{grid-column:auto;grid-row:auto}
  /* Two columns of grid is already narrow enough that the band's own two
     columns would leave two words a line. Back to the flow, with the measure
     kept on the sentence. */
  .wa-story--all{grid-column:1 / -1;display:block}
  .wa-story--all h3,.wa-story--all p{max-width:46ch}}
@media(max-width:560px){.wa-stories{grid-template-columns:1fr}
  .wa-story{border-right:0 !important;padding-right:0 !important}
  .wa-story--all{grid-column:1;padding-left:20px}}

/* ---- the map, as the hero window ---------------------------------------------------
   Real Natural Earth boundaries, projected at build time by tools/africa_map.py and
   inlined — a country you can click has to be the shape of that country, and the
   alternative is a map library and a tile server for one static continent. The
   fills live with the hero, since the map is now only drawn there; what is left
   here is the behaviour that does not depend on the palette. */
/* The countries are tab stops again.

   082 took them out of the tab order, and was right to at the time: the rail of
   twenty-two names sitting directly under the map was the same twenty-two
   destinations in the same order doing the same thing, so the shapes were a
   duplicate keyboard route — and the worse of the two, since they live inside
   an svg with role="img", which a screen reader does not expose at all. What it
   bought was twenty-two fewer stops between the masthead and the calls.

   110 took that rail out of the hero. The argument went with it. A keyboard
   route that is a duplicate is redundant; the same route once the thing it
   duplicated is gone is the only one there is, and leaving tabindex="-1" on the
   shapes would have made the map reachable by pointer alone. So the tabindex
   comes off all twenty of them.

   The cost 082 measured is real and is back: twenty-two stops before the calls.
   It is the right trade now and was not then, which is the whole of the
   difference. */
.wa-map-live{cursor:pointer}
.wa-map-live:focus{outline:none}
.wa-map-live:focus-visible path,.wa-map-live:focus-visible circle{stroke:var(--c-primary);stroke-width:3}
/* An island is two circles: one you can see and one you can hit.
   The visible mark was r=9 in user units, which is a 8.6px dot at 1440 and a
   6.3px dot on a phone — the two smallest pointer targets on the map by an
   order of magnitude, and the only representation Mauritius and Seychelles get
   on it. r=12 draws something that reads as a mark rather than as dust, and a
   transparent r=26 in front of it gives the pointer a 25px target at 1440 and
   18px on a phone without changing what is drawn.

   The rule that used to be here — .wa-map-mark circle{stroke-width:2} — never
   applied to anything. .wa-win-state .wa-map-live circle outranks it two
   classes to one and sets the stroke itself, so the marks have been taking the
   countries' stroke since the day both rules were written. Stated at the same
   specificity now, so it means what it says. */
/* circle.wa-map-hit, not .wa-map-hit: the tier rules that fill a mark are
   `.wa-win-state .wa-map-live[data-tier="live"] circle`, which is two classes,
   an attribute and an element. A three-class selector loses to that however
   late it appears, so the hit circle came out filled — a 26px terracotta disc
   with the real mark drawn on top of it, which is a bullseye, not an island. */
/* And the same arithmetic one attribute higher. The lens rules carry two
   attributes — [data-want][data-tier] — which outranks a three-class selector
   however late it appears, so pressing a lens put the discs back: six pale
   bullseyes over the islands and one over Dakar, each with the real mark drawn
   on top of it. Matched at four, and later, so it holds in every state the
   continent can be in. */
.wa-win-state .wa-map-live circle.wa-map-hit,
.wa-win-state .wa-map-live:hover circle.wa-map-hit,
.wa-win-state .wa-map-live:focus circle.wa-map-hit,
.wa-win-state .wa-map-live.on circle.wa-map-hit,
.wa-win-state .wa-map-live[data-want] circle.wa-map-hit,
.wa-win-state .wa-map-live[data-dim] circle.wa-map-hit{fill:transparent;stroke:none}
.wa-win-state .wa-map-mark circle{stroke-width:1.5}

/* ---- the directory ----------------------------------------------------------------- */
.wa-dir-reg{font-family:var(--fj-mono);font-size:9px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-accent);margin:0 0 8px;padding-bottom:10px;
  border-bottom:var(--fj-rule-dark)}
.wa-dir{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--c-accent)}
.wa-dir-col{padding:0 22px 8px 0;border-right:var(--fj-rule-dark)}
.wa-dir-col:last-child{border-right:0;padding-right:0}
.wa-dir-col a{display:block;padding:12px 0;border-bottom:var(--fj-rule-dark);color:var(--fj-onbasalt);transition:color .2s,padding-left .2s}
.wa-dir-col a:hover{color:var(--c-bg);padding-left:6px}
.wa-dir-col a[data-tier="ours"] em{color:var(--c-accent)}
.wa-dir-col em{display:block;font-style:normal;font-family:var(--fj-display);font-size:19px;font-weight:700;text-transform:uppercase;line-height:1.05}
.wa-dir-col span{display:block;font-family:var(--fj-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fj-onbasalt-dim);margin-top:5px}
.wa-dir-up{border-bottom:1px solid var(--c-accent);white-space:nowrap}
@media(max-width:1000px){.wa-dir{grid-template-columns:1fr 1fr 1fr}.wa-dir-col:nth-child(3n){border-right:0;padding-right:0}}
@media(max-width:640px){.wa-dir{grid-template-columns:1fr 1fr}.wa-dir-col{border-right:0 !important;padding-right:0 !important}}

/* ---- the two flagship panels ------------------------------------------------------ */
.wa-panels{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--c-accent)}
.wa-panel{position:relative;isolation:isolate;min-height:520px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:44px 40px;overflow:hidden;color:var(--c-bg)}
.wa-panel img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* Where there is no photograph yet the panel is not left blank and it is not given
   a stand-in: it falls back to the basalt the section is already on, with an
   accent wash, so it reads as a designed panel rather than a hole. */
.wa-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(160deg,color-mix(in srgb,var(--c-accent) 30%,transparent) 0,
    rgba(10,15,12,.30) 42%,rgba(10,15,12,.86) 100%)}
.wa-panel .wa-stamp{color:color-mix(in srgb,var(--c-accent) 30%,var(--c-bg));text-shadow:0 1px 12px rgba(0,0,0,.6)}
.wa-panel h3{font-size:clamp(34px,4.6vw,64px);margin:12px 0 14px;color:var(--c-bg);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.wa-panel p{color:color-mix(in srgb,var(--c-bg) 88%,var(--c-primary));font-size:15.5px;max-width:34em;
  text-shadow:0 1px 14px rgba(0,0,0,.6)}
.wa-panel .wa-panel-go{display:inline-block;align-self:flex-start;margin-top:24px;font-family:var(--fj-mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-bg);
  border:1px solid color-mix(in srgb,var(--c-bg) 62%,transparent);padding:12px 20px;transition:background .2s,color .2s}
.wa-panel .wa-panel-go:hover{background:var(--c-bg);color:var(--c-primary)}
@media(max-width:820px){.wa-panels{grid-template-columns:1fr}.wa-panel{min-height:400px;padding:34px 26px}}

/* ---- plan ------------------------------------------------------------------------ */
.wa-plan{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--c-primary)}
.wa-plan>div{padding:24px 22px 20px 0;border-right:var(--fj-rule)}
.wa-plan>div:last-child{border-right:0}
.wa-plan .wa-ico{margin-bottom:14px}
.wa-plan b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:9px}
.wa-plan p{font-size:14px;color:var(--c-muted)}
@media(max-width:900px){.wa-plan{grid-template-columns:1fr 1fr}.wa-plan>div:nth-child(2n){border-right:0}}
@media(max-width:520px){.wa-plan{grid-template-columns:1fr}}

/* ---- closing --------------------------------------------------------------------- */
.wa-end{text-align:center;padding:96px 0}
.wa-end>.wa-stamp{margin-bottom:14px}
.wa-end h2{font-size:clamp(32px,5vw,68px)}
.wa-end h2 em{font-style:normal;color:var(--c-accent)}
.wa-end p{margin:18px auto 0;max-width:46ch;color:var(--c-muted)}
/* The close reads back what the visitor chose on the way down, because the page
   has been collecting an answer the whole time and ending on a generic form
   would throw it away. Nothing is chosen on arrival, so the invitation is the
   default and the summary only appears once there is something to summarise. */
.wa-end-said{margin-top:22px}
.wa-end-said .wa-stamp{margin-bottom:10px}
.wa-end-line{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,34px);line-height:1.1;color:var(--c-primary);max-width:26ch;margin:0 auto}
.wa-end-line em{font-style:normal;color:var(--c-accent)}
.wa-end .wa-acts{justify-content:center}

/* ---- footer ---------------------------------------------------------------------- */
/* The footer is the last thing on a page whose whole argument is that Africa is
   many places, and it was the one zone with no ground of its own — the same deep
   forest as the hero, which made the page end where it began. It keeps the ink
   and takes a rule at the top, so the page closes rather than loops. */
.wa-foot{background:var(--fj-basalt);color:var(--fj-onbasalt);padding:60px 0 0;
  border-top:3px solid var(--c-accent)}
/* Five columns at 34px on a 1240 frame is 226px each, which is wider than
   any link in them and narrower than the brand block wants. The gap does the
   separating and the columns stop being a table. */
/* Three columns and a wide brand block, not five columns of everything.
   The footer's job is to close the experience, not repeat the website: the
   deeper a visitor goes the more there is, and this is where it gets quiet
   again. */
.wa-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px}
.wa-foot-say{max-width:34ch}
/* The line that answers the hero. AFRICA ISN'T ONE PLACE opens the page; this
   closes it, in the display face rather than the body face so it reads as a
   statement and not as copy. */
.wa-foot-line{margin-top:20px;font-family:var(--fj-display);font-weight:700;
  font-size:clamp(19px,1.7vw,25px);line-height:1.16;color:var(--c-bg);max-width:18ch}
.wa-foot-line em{display:block;font-style:normal;color:var(--c-accent-lit)}
/* A count beside each region: the atlas habit of telling you how much is
   behind a door before you open it. */
.wa-foot-col a i{font-style:normal;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.1em;color:var(--fj-onbasalt-dim);margin-left:8px}
/* The atlas on one line, between the columns and the colophon. */
.wa-foot-atlas{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
  margin-top:var(--sp-5);padding-top:20px;border-top:var(--fj-rule-dark)}
.wa-foot-atlas b{font-family:var(--fj-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-accent);font-weight:400}
.wa-foot-atlas a{font-size:14.5px;color:var(--fj-onbasalt-dim);transition:color .2s}
.wa-foot-atlas a:hover{color:var(--c-bg)}
.wa-foot-rights{display:block;margin-bottom:7px}
/* On basalt the muted grey of the light footers is not readable, so the links
   take the on-basalt dim and lift to full ivory. Same object, own ground. */
.wa-foot .af-co-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.wa-foot .af-co-link{font-family:var(--fj-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fj-onbasalt-dim);display:inline-flex;
  align-items:center;min-height:24px;border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.wa-foot .af-co-link:hover{color:var(--c-bg);border-bottom-color:var(--c-accent)}
@media(max-width:900px){.wa-foot-atlas{gap:6px 16px}}
.wa-foot-brand{font-family:var(--fj-display);font-size:26px;font-weight:700;text-transform:uppercase;color:var(--c-bg)}
.wa-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}
.wa-foot-grid p{margin-top:16px;font-size:14.5px;max-width:32em;color:var(--fj-onbasalt-dim)}
.wa-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:14px;font-weight:400}
.wa-foot-col a,.wa-foot-col span{display:block;font-size:14.5px;padding:5px 0;color:var(--fj-onbasalt-dim);transition:color .2s}
.wa-foot-col a:hover{color:var(--c-bg)}
/* The last line on the page. It sat at the same weight as the link columns
   above it, so the page's legal footing and its navigation were one texture. */
.wa-foot-bar{margin-top:44px;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)}
/* The company line is a legal footnote and reads like one: the registered
   office is set below the entity rather than beside it, so the bar states who
   you contract with first and where the paperwork lives second. It is a
   registered office, labelled, and never presented as somewhere to call. */
  .wa-foot-bar b{color:var(--c-bg);font-weight:400}
  /* Set in a colour rather than dimmed with opacity. Opacity leaves
     getComputedStyle reporting the undimmed colour, so the contrast pass
     measures a ratio the reader never sees and passes text that may not be
     readable. The separation here is position and case, not fade. */
  .af-co-where{display:block;margin-top:7px;letter-spacing:.1em;text-transform:none}
@media(max-width:1080px){.wa-foot-grid{grid-template-columns:1fr 1fr 1fr;gap:30px}}
@media(max-width:760px){.wa-foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.wa-foot-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.001ms !important}}
@media(pointer:coarse){
  .wa-mark{padding:5px 0}
  .wa-dest a{padding-top:6px;padding-bottom:8px}
  .wa-win-go{padding-top:6px;padding-bottom:8px}
  .wa-foot-bar a{padding-block:6px;display:inline-block}
}

/* ---- 06 THE JOURNEY FUND: a road, and four things standing beside it ------
   This block replaced a four-column grid, and the grid is the thing worth
   describing because it is what everything here exists to avoid.

   Four equal columns, each with a rule over it, an ordinal, a name and a
   paragraph, is a feature grid. It reads as one whatever words are inside it,
   because equal treatment asserts equal meaning — and a longing, a decision,
   two years and a departure are not four comparable things. Given identical
   boxes the reader compares them instead of travelling through them.

   THE MECHANISM THAT REPLACES IT. There is no grid. One curve crosses the whole
   frame and each movement is pushed down by its own amount, so the four names
   sit at four different heights and no row can be read out of them. The offsets
   are the curve's own y at each movement's x, rounded — which is why they are
   four unrelated numbers rather than a scale.

   Nothing in the strip carries a border. What separates the four is distance
   along a road, which is the only separator this section is entitled to. */
.wa-fund .wa-frame{position:relative}
/* 50vw counts the scrollbar and the frame's content box does not, so the bleed
   overshoots by half a scrollbar and the document picks up a horizontal scroll.
   Clipped rather than solved with a magic number: clip does not create a
   containing block for fixed descendants, so it cannot reach the window band. */
.wa-fund{overflow-x:clip}

/* THE CLAIM AND THE BLEED.
   Type left, photograph right and running off the viewport edge — not to the
   frame, past it. The gutter between them is zero on purpose: a gap would make
   them two panels, and the composition depends on the image arriving as the
   page's right-hand edge rather than as an illustration beside the text. */
.wa-fund-top{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  /* Out to the viewport's right edge, exactly. 50% is half this element's own
     containing block — the frame's content box — and 50vw is half the window,
     so the difference is precisely the distance from the frame's edge to the
     window's, at every width, with no token to keep in step with .wa-frame.
     The first cut of this guessed at a --fj-frame variable that does not exist
     and fell back to a number that was wrong by sixty pixels. */
  margin-right:calc(50% - 50vw)}
@media(max-width:900px){
  .wa-fund-top{grid-template-columns:1fr;gap:0;margin-right:0}
}

/* THE COLUMN SPLITS UNDER THE RULE, AND ONLY THERE.
   The claim wants the full column: a headline at 92px with authored breaks has
   nowhere else to go. Everything under the rule is 30 and 40 characters wide,
   which is correct for reading and leaves half the column empty — at 1920 that
   was five hundred and twenty pixels of nothing beside two short paragraphs,
   with the map pushed below them into more of it.

   So the column is one track above the rule and two under it: prose left, map
   right, sharing the space the prose was never going to use. The measure does
   not change; the emptiness does. Above 1100 only, because below it the two
   tracks would each be too narrow to be either. */
@media(min-width:1100px){
  .wa-fund-say{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
    column-gap:clamp(28px,3vw,56px);align-items:start;
    /* The last row is empty on the prose side and carries the map's overhang.
       Without it the map spans the lede's row and the sub's row, both auto, and
       two hundred and fifty pixels of map get shared between two paragraphs
       that wanted fourteen pixels between them — which pushed them apart into
       what looked like two unrelated blocks. The slack has to go somewhere; it
       goes below the prose rather than inside it. */
    grid-template-rows:auto auto auto auto auto 1fr;
    grid-template-areas:"eye eye" "claim claim" "rule rule" "lead map" "sub map" ". map"}
  .wa-fund-eye{grid-area:eye}
  .wa-fund h2{grid-area:claim}
  .wa-fund-hr{grid-area:rule}
  .wa-fund-lead{grid-area:lead}
  .wa-fund-sub{grid-area:sub}
  .wa-fund-inset{grid-area:map;align-self:start;margin-top:0}
}

.wa-fund-eye{display:flex;align-items:baseline;gap:16px;margin:0 0 22px}
.wa-fund-eye b{font-family:var(--fj-display);font-size:30px;font-weight:700;
  line-height:.8;letter-spacing:-.03em;color:var(--c-accent)}
.wa-fund-eye span{font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-muted)}

.wa-fund h2{font-family:var(--fj-display);font-weight:700;
  /* The cap was 74 and the frame is 1240, so from about 1370 up the headline
     stopped growing while everything around it kept going and the claim got
     quietly smaller relative to the page it is making. 92 is the largest size
     at which the authored line "CAN START LONG" still clears the column at
     1240 — measured, not guessed, and the reason the cap is not simply higher. */
  font-size:clamp(34px,5.4vw,92px);line-height:1.0;letter-spacing:-.032em;
  text-transform:uppercase;color:var(--c-primary);margin:0;max-width:none}
.wa-fund h2 em{font-style:normal;color:var(--c-accent)}

/* A short rule with a diamond on it, under the claim. It is the one piece of
   ornament in the section and it earns its place by marking where the display
   type stops and the reading type starts — a job a gap does less clearly at
   this scale. */
.wa-fund-hr{display:block;position:relative;width:132px;height:1px;
  background:var(--c-primary);margin:clamp(22px,3vw,34px) 0}
.wa-fund-hr:after{content:"";position:absolute;right:-5px;top:-4px;width:9px;
  height:9px;background:var(--c-accent);transform:rotate(45deg)}

.wa-fund-lead{font-family:var(--fj-display);font-weight:600;
  font-size:clamp(19px,1.8vw,24px);line-height:1.22;letter-spacing:-.008em;
  color:var(--c-primary);margin:0 0 10px;max-width:30ch;text-wrap:balance}
.wa-fund-sub{font-size:16.5px;line-height:1.55;color:var(--c-muted);
  margin:0;max-width:40ch}

/* THE PHOTOGRAPH. No border, no radius, no frame — it is the edge of the page.
   The height is tied to the type beside it rather than to an aspect ratio, so
   the two columns finish together at every width they share. */
.wa-fund-pic{position:relative;margin:0;min-height:clamp(300px,42vw,520px);
  align-self:stretch}
/* THE CROP IS HELD, NOT LEFT TO THE DEFAULT.
   object-fit:cover with no object-position centres the crop, and this frame is
   1600x1067 landing in a box that gets narrower and taller as the viewport
   widens — so at 1920 the centre crop cut through the wing mirror and pushed
   the road's vanishing point off to the left, which is the one thing in the
   photograph that has to survive. The subject of this plate is a road running
   away from the reader.

   Four positions were rendered at 1920 and compared rather than reasoned about.
   62 and 72 both cut the mirror to a dark sliver at the left edge, which reads
   as a smudge on the print — worse than centring it, because a thing half
   cropped is a mistake and a thing fully cropped is a decision. 40 keeps the
   mirror whole as a foreground frame, holds the road's vanishing point inside
   the box, and puts the walking family at the optical centre. It is the only
   one of the four in which the photograph is still taken from inside a vehicle,
   which is the whole reason this frame and not another.

   Vertically 58% keeps the horizon above centre, where a road photograph wants
   it. */
.wa-fund-pic img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:40% 58%;min-height:clamp(300px,42vw,520px)}

/* THE CONTINENT, DRAWN OVER THE PHOTOGRAPH.
   Outline only, at a hairline, so the road runs through the country instead of
   over a printed shape of it. It is the same projection and the same viewBox as
   the hero's map — one Africa on this page, not two drawings of one. */
/* An inset on the page's own ground, in the left column's empty half — the
   reasoning is in the HTML beside it. Basalt outline, because dust is a light
   ground and this is now a printed object rather than an overlay: no shadow, no
   scrim, no filter, and therefore nothing on this page that could ever become a
   containing block for a fixed descendant. */
/* One element in the grid cell, not two. The map and its caption were both
   assigned grid-area:map and a grid area is a cell, not a flow — so they were
   stacked on top of each other and the caption printed across South Africa. */
.wa-fund-inset{margin:clamp(26px,3.4vw,44px) 0 0;
  width:clamp(150px,17vw,230px)}
/* Clipped, because the box is now cut to Africa and the coast path it is drawn
   from carries Turkey, the Levant and Arabia along with it. Those are correct
   on the hero, where the whole projection is on screen; in a 230px inset of
   one continent they are three shapes with no business being there. */
.wa-fund-map{display:block;width:100%;height:auto;overflow:hidden}
/* The chart's own caption, set as a chart's caption is: the thing's name at
   reading weight, its two ends under it, and the measures last and smallest.
   The name is trimmed of its series prefix here rather than in the generator,
   because "Trans Afrique — " is true and is also the six words before the six
   that matter at this size. */
.wa-fund-map-say{margin:14px 0 0}
.wa-fund-map-say b{display:block;font-family:var(--fj-display);font-weight:700;
  font-size:15px;line-height:1.12;letter-spacing:-.008em;text-transform:uppercase;
  color:var(--c-primary)}
.wa-fund-map-say span{display:block;font-family:var(--fj-mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--c-accent);margin-top:6px}
/* Not --c-muted. On dust it measures 4.55:1, which passes by five thousandths,
   and this is the smallest type in the section — ten pixels of tracked mono
   carrying the only numbers on the screen. Small type needs more margin than
   large type, not less, and a figure nobody can read is a figure that may as
   well not be printed. Deep forest at 62% of the way from muted clears 7:1 and
   still sits a clear step below the two lines above it. */
.wa-fund-map-say i{display:block;font-style:normal;font-family:var(--fj-mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c-primary) 62%,var(--c-muted));margin-top:5px}
.wa-fund-coast{fill:color-mix(in srgb,var(--c-primary) 7%,transparent);
  stroke:color-mix(in srgb,var(--c-primary) 62%,transparent);
  stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* The road is the East crossing, dashed, drawn from the four countries' own
   centroids. Dashed because it is a journey not yet taken. It is the loudest
   thing in the inset on purpose — the continent is context, the route is the
   point, and at 230px the route is what has to survive. */
.wa-fund-road{fill:none;stroke:var(--c-accent);stroke-width:4;
  stroke-dasharray:6 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* The start is a small solid mark; the arrival is a ring, which is how a chart
   distinguishes where a journey begins from where it is going. The ring is
   drawn in the page's own ground so it reads as a hole in the terracotta
   rather than as a second colour. */
.wa-fund-node{fill:var(--c-accent)}
.wa-fund-node.is-end{fill:var(--c-accent);stroke:var(--c-dust,var(--fj-dust));
  stroke-width:5;vector-effect:non-scaling-stroke}

/* THE NOTE COMES OFF THE PHOTOGRAPH, AND THE SUITE IS WHY.
   It was ivory italic laid over the sky with a text-shadow under it, which is
   the oldest trick there is and measured 1.36:1 against 4.5 needed. The shadow
   is not contrast; it is a hope that the pixel behind the letter is dark, and
   on this frame the pixel behind the letter is a pale morning sky.

   There is no honest fix that keeps it there. A scrim is a gradient, a plate
   behind it is a card, and moving it to the tarmac still leaves text over an
   image with no guaranteed ground — which is exactly what the check is
   conservative about, and correctly.

   So it sits under the plate instead, right-aligned to the photograph's own
   edge, in ink on the page's ground. That is where a journal puts a marginal
   note anyway: beside the plate, not printed across it. It gains 11:1 and
   loses nothing but the trick. */
.wa-fund-pic figcaption{position:absolute;left:0;right:0;top:calc(100% + 18px);
  font-family:var(--fj-text,Georgia,serif);font-style:italic;
  font-size:clamp(14px,1.25vw,17.5px);line-height:1.44;color:var(--c-primary);
  /* No authored break. It carried one from the wide layout, where the note sits
     in a 34ch column beside the plate and two lines fall where the break was
     put. Stacked at 768 the same break left the word "today" alone on a line of
     its own under a line half the measure. Balanced instead, so the two lines
     even themselves at whatever width the note is given. */
  text-align:left;max-width:34ch;padding-left:clamp(16px,3vw,44px);
  text-wrap:balance}
.wa-fund-pic figcaption:before{content:"";display:block;width:56px;height:1px;
  background:var(--c-accent);margin-bottom:12px}

/* ---- THE ROAD, AND THE FOUR ------------------------------------------------ */
.wa-fund-arc{position:relative;margin-top:clamp(44px,5.5vw,84px)}
/* One path, not four connectors, because it is one road. It is stretched with
   preserveAspectRatio="none" so it always spans the frame; a road that ends
   before the last movement is a road that has stopped being the argument. */
.wa-fund-line{position:absolute;top:0;left:0;width:100%;height:120px;
  overflow:visible;pointer-events:none}
.wa-fund-line path{fill:none;stroke:var(--c-primary);stroke-width:1.4;
  vector-effect:non-scaling-stroke}

/* THE ROAD DRAWS, AND IT IS THE ONLY THING IN THIS SECTION THAT MOVES.
   The direction promised this and the stylesheet declared two custom
   properties for it that nothing ever set — dead code, and the kind that reads
   as a feature until somebody looks.

   It is done on a scroll timeline rather than a clock, because the road's
   subject is the passage of time and time here is the reader's, not a
   designer's three hundred milliseconds. The path carries pathLength="1", so
   the dash is a fraction and no number has to be kept in step with the curve.

   Behind @supports on purpose: a browser without scroll-driven animations gets
   the road already complete, which is the correct page rather than a degraded
   one — and it is the same page reduced-motion gets. There is no state in
   which this section is missing its road. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes wa-fund-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
    .wa-fund-line path{stroke-dasharray:1;stroke-dashoffset:1;
      animation:wa-fund-draw linear forwards;
      animation-timeline:view();
      /* Finished by the time the strip is halfway up the viewport, so a reader
         who scrolls at any normal speed meets a road that has already arrived
         rather than one still catching up with them. */
      animation-range:entry 10% cover 46%}
  }
}

.wa-fund-moves{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,34px)}
/* The four offsets, solved rather than eyeballed. Each is the cubic's y where
   it crosses that column's left edge, minus the node's radius so the node sits
   centred ON the line instead of near it: 74.0, 84.6, 54.5, 92.1 less 4.5.
   The first cut of these was guessed and every node missed the road, which is
   the one thing this composition cannot get wrong — the road is what replaces
   the grid, and a road that does not touch what it connects is decoration.
   Change the path above and these must be re-solved with it. */
.wa-fund-move[data-at="1"]{margin-top:70px}
.wa-fund-move[data-at="2"]{margin-top:80px}
.wa-fund-move[data-at="3"]{margin-top:50px}
.wa-fund-move[data-at="4"]{margin-top:88px}
.wa-fund-move{position:relative;padding-top:26px}
/* The node where the road passes. The last one is terracotta and larger: it is
   an arrival, and the only place in this section colour means anything. */
.wa-fund-move:before{content:"";position:absolute;top:0;left:0;width:9px;
  height:9px;border-radius:50%;background:var(--c-primary)}
.wa-fund-move[data-at="4"]:before{width:13px;height:13px;top:-2px;
  background:var(--c-accent)}
.wa-fund-move i{display:block;font-style:normal;font-family:var(--fj-mono);
  font-size:11px;letter-spacing:.2em;color:var(--c-accent);margin-bottom:7px}
.wa-fund-move b{display:block;font-family:var(--fj-display);font-weight:700;
  font-size:clamp(24px,2.7vw,36px);line-height:1;letter-spacing:-.022em;
  text-transform:uppercase;color:var(--c-primary);margin-bottom:9px}
/* Balanced, because these are two-line paragraphs and the first of them left
   the word "dream." alone on a line twenty-one per cent the width of its box
   at every width measured. A runt under a display name is the detail that
   makes a composition look assembled rather than set. balance rather than
   pretty: pretty only rescues the last line, and with two lines the right
   answer is to even both. */
.wa-fund-move span{display:block;font-size:14.5px;line-height:1.5;
  color:var(--c-primary);max-width:26ch;text-wrap:balance}

/* ---- THE CLOSE ------------------------------------------------------------- */
/* THE CLOSE IS SET AGAINST THE ROAD, NOT AGAINST THE PAGE.
   The strapline and the call were centred on the frame while everything above
   them — the claim, the prose, the four movements — is set left. Centred type
   under a left-set composition reads as a different page's footer, and it is
   the one place a reader has to be told what to do next.

   They sit on the frame's centre still, because a close wants to be the one
   symmetrical moment after four screens of asymmetry, but the rule under the
   strapline is now the width of the strapline itself rather than a fixed 360.
   A rule that is wider or narrower than the words above it is a rule that was
   not measured against them. */
.wa-fund-strap{margin:clamp(48px,6vw,88px) 0 0;font-family:var(--fj-mono);
  font-size:clamp(10.5px,1.05vw,13px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-primary);text-align:center;max-width:none;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.wa-fund-strap:after{content:"";display:block;width:100%;height:1px;
  background:color-mix(in srgb,var(--c-primary) 34%,transparent)}
/* THE CALL IS THE ONLY BOXED CONTROL ON THE PAGE, AND IT SHOULD NOT BE.
   Every other call in this document is the same object: a mono label in
   letter-spaced caps with a two-pixel terracotta rule under it — .wa-pick-go,
   .wa-op-go, .wa-story-go, .wa-feel-go, fifty-seven .wa-win-go. This one was
   an outlined rectangle 220px wide floating in the middle of the frame, which
   is the house idiom nowhere and a product button everywhere.

   Same idiom, at the scale a section's closing call is owed: the rule runs the
   full frame, the label sits at the left of it and the arrow at the right, and
   the whole span is the target. It reads as a threshold rather than a button —
   which is what it is, the one door out of this section — and it finally
   matches the strapline's rule sitting directly above it. */
.wa-fund-go{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;width:100%;max-width:none;margin:clamp(24px,2.6vw,38px) 0 0;
  font-family:var(--fj-mono);font-size:clamp(11px,1.15vw,14px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-primary);
  border:0;border-bottom:2px solid var(--c-accent);
  /* The top padding is a touch target, not a rhythm: as a single line of 11px
     mono the row came to 26px high, and a full-width link that a thumb cannot
     reliably hit is worse than the button it replaced. 45px at the phone. */
  padding:clamp(18px,2vw,26px) 0 clamp(12px,1.4vw,18px);text-decoration:none;
  transition:color var(--t-fast) var(--ease)}
/* The arrow moves along the rule on hover, which is the only motion in the
   close and the same gesture the road makes above it. */
.wa-fund-go i{font-style:normal;margin-left:0;font-size:1.5em;line-height:0;
  transition:transform var(--t-fast) var(--ease)}
.wa-fund-go:hover{color:var(--c-accent)}
.wa-fund-go:hover i{transform:translateX(9px)}
/* FOCUS IS NOT HOVER, AND THIS CALL HAD THEM AS THE SAME THING.
   A keyboard reader arriving here got exactly what a mouse hovering gets and
   nothing said which of the two had happened. Hover is now the label taking
   the accent and the arrow moving; focus is a ring around the whole span, so a
   reader who tabs to it and a reader who points at it are told apart, and a
   reader who does both gets both without either being lost. The offset clears
   the rule so the ring reads as a ring and not as a second border. */
.wa-fund-go:focus-visible{outline:2px solid var(--c-accent);outline-offset:6px}

/* ---- 900 AND BELOW: THE ROAD ROTATES --------------------------------------
   A horizontal road with four stops has the same failure as four columns — on a
   phone it becomes four rows and the road disappears. So it does not become
   four rows. The curve is dropped and the line stands up: a hairline down the
   left edge with the movements hanging off it to the right, nodes intact. Same
   object, same meaning, ninety degrees round. */
@media(max-width:900px){
  .wa-fund-pic{min-height:0;margin:0 calc(50% - 50vw) clamp(26px,4vw,40px)}
  /* Wider than tall once it is stacked. At 900 a 16/10 plate is five hundred
     and sixty pixels of photograph before a word is read and the section came
     to 2226 — taller at 900 than at 390, which is the wrong way round for a
     layout that is supposed to be getting simpler. 2/1 at tablet widths and
     16/10 kept for the phone, where the plate is the first thing and can
     afford to be. */
  .wa-fund-pic img{min-height:0;aspect-ratio:2/1;height:auto}
}
@media(max-width:560px){
  .wa-fund-pic img{aspect-ratio:16/10}
}
@media(max-width:900px){
  /* THE NOTE WAS AS NARROW AS THE MAP, BECAUSE IT WAS INSIDE IT.
     The width was put on the figure, so the caption inherited it: at 390 the
     inset is 130px and the note ran "NAIROBI — CAPE TOWN" over two lines and
     "9 COUNTRIES · 35 TO 45 DAYS" over two more — four lines of a legend
     hyphenating itself beside a map the size of a postage stamp.

     The width belongs to the drawing. The figure takes the column and the note
     with it, and the map gets a measure of its own that is larger than the one
     it had at every width in this band. */
  .wa-fund-inset{width:auto;margin-top:clamp(22px,4vw,34px)}
  .wa-fund-map{width:clamp(150px,42vw,240px)}
  /* NOT back onto the photograph, and IN THE FLOW.
     Two bugs in one rule, both from the note's old life printed across the
     plate. It was still being positioned over the photograph below 900, where
     at 320 it was illegible against a pale sky and covering the road. And it
     was still absolute, which in a stacked flex column means it hangs below
     the plate over whatever comes next — so once it came off the photograph it
     landed on top of the eyebrow instead.

     Static here. The plate is first in the column and the note follows it, in
     the flow, which is the only arrangement that cannot collide with anything. */
  /* 34ch is a content-box measure and this element carries 88px of padding
     once it is bled, so the note came out three lines of a hundred and ten
     pixels — a measure narrower than the map beside it. The padding is doing
     the constraining here; the measure is lifted and balance evens what is
     left. */
  .wa-fund-pic figcaption{position:static;max-width:46ch;font-size:14.5px;
    margin-top:18px}
  /* The claim comes after the photograph on a phone: image first, then argument.
     align-items has to be restated. The two-column rule sets it to center for
     the grid, where it means vertical; in a flex COLUMN the cross axis is
     horizontal, so the same declaration centred the whole claim in its
     container — the eyebrow, headline and prose started at 218 while the road
     below them started at 44, and the offset grew with the viewport because it
     is half the difference between the text's shrink-to-fit width and the
     frame. A base rule that changes meaning when display changes. */
  .wa-fund-top{display:flex;flex-direction:column;align-items:stretch}
  .wa-fund-pic{order:-1}
  /* The plate is bled past the frame, so anything inside it inherits that and
     the note was starting at the viewport's own edge while every other line on
     the screen was inset. Given the frame's padding back, by hand, because the
     element it sits in no longer has any. */
  .wa-fund-pic figcaption{padding-inline:44px}

  .wa-fund-line{display:none}
  .wa-fund-arc:before{content:"";position:absolute;left:4px;top:8px;bottom:8px;
    width:1.4px;background:var(--c-primary)}
  .wa-fund-moves{grid-template-columns:1fr;gap:0}
  .wa-fund-move,
  .wa-fund-move[data-at="1"],.wa-fund-move[data-at="2"],
  .wa-fund-move[data-at="3"],.wa-fund-move[data-at="4"]{
    margin-top:0;padding:22px 0 22px 30px}
  .wa-fund-move:before{top:28px;left:0}
  .wa-fund-move[data-at="4"]:before{top:26px;left:-2px}
  .wa-fund-move span{max-width:38ch}
}
/* THE SPLIT UNDER THE RULE COMES BACK AT TABLET WIDTHS.
   Above 1100 the prose and the map share the column, because two paragraphs 30
   and 40 characters wide were never going to use it all. Stacked, the same
   thing is true and worse: at 900 the photograph is gone from beside the text,
   so lede, sub and a 200px map ran down the left of a 812px frame and six
   hundred pixels of the section were empty from the rule to the road.

   The same two-track split, then, in the band where the frame is wide enough
   to carry it — 680 up, because below that the prose track falls under the
   measure the sub was set for and two narrow columns are worse than one wide
   one. Written as a media list beside the 1100 rule rather than duplicated:
   one grid, declared once, for both places it is right.

   The 900 rule sets the inset's width and top margin for the stacked column it
   used to sit in; this block comes after it and restates both for the track it
   sits in here. */
@media(min-width:680px) and (max-width:900px){
  .wa-fund-say{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
    column-gap:clamp(24px,3vw,44px);align-items:start;
    grid-template-rows:auto auto auto auto auto 1fr;
    grid-template-areas:"eye eye" "claim claim" "rule rule" "lead map" "sub map" ". map"}
  .wa-fund-eye{grid-area:eye}
  .wa-fund h2{grid-area:claim}
  .wa-fund-hr{grid-area:rule}
  .wa-fund-lead{grid-area:lead}
  .wa-fund-sub{grid-area:sub}
  .wa-fund-inset{grid-area:map;align-self:start;
    width:clamp(200px,30vw,280px);margin-top:0}
  /* The phone rule gives the drawing its own measure inside a figure that
     takes the column. Here the figure IS the measure, so the drawing fills it. */
  .wa-fund-map{width:100%}
}

/* THE ROAD STANDS UP, BUT THE MOVEMENTS STAYED IN A PHONE'S WIDTH.
   Rotating the road at 900 was right and the consequence was not measured: the
   four movements kept the phone's stacking, name over sentence, so a name at
   36px and a sentence of nine words ran down the left third of an 812px frame
   with the other two thirds empty for the whole height of the road.

   Beside each other instead, on the same rail. The number sits over the name in
   a fixed left track and the sentence takes the rest of the line, its first
   line landing level with the name — which is how a timeline is set in a book,
   and the only arrangement that uses the width without cutting the road into
   columns. Below 680 it goes back to stacking, because there the left track
   would leave the sentence a measure narrower than the phone gives it. */
@media(min-width:680px) and (max-width:900px){
  .wa-fund-move{display:grid;
    grid-template-columns:minmax(0,clamp(150px,22vw,200px)) minmax(0,1fr);
    column-gap:clamp(24px,4vw,44px);
    grid-template-areas:"num ." "name say"}
  .wa-fund-move i{grid-area:num}
  .wa-fund-move b{grid-area:name;margin-bottom:0}
  .wa-fund-move span{grid-area:say;align-self:start;max-width:46ch}
}

/* THE CLAIM IS SET FOR A COLUMN IT NO LONGER STANDS IN.
   Above 900 the headline shares the frame with the photograph and its 5.4vw is
   measured against that half. Below 900 the photograph moves above it and the
   claim inherits the whole frame — but not the size. At 900 the longest line
   came to 388px inside 812px of measure: a display claim using forty-eight per
   cent of the page it was given, which reads as a heading that was scaled down
   rather than one that was set.

   The size is solved from the measure instead of guessed at a viewport
   fraction. This face sets the claim's longest line at eight times its font
   size, and the target is eighty per cent of the frame's inside width, so
   size = 0.8 * (100vw - 88px) / 8 — the calc below, exactly. Eighty rather
   than ninety-five because the last line is the shortest and a claim pushed to
   the very edge leaves a ragged right that has nowhere to go. The clamp ends
   are only guards; the calc lands inside them at every width in the band, and
   its bottom meets the phone rule's 44 at 560 without a step. */
@media(min-width:561px) and (max-width:900px){
  .wa-fund h2{font-size:clamp(44px,calc(10vw - 8.8px),82px)}
}
@media(max-width:560px){
  .wa-fund-pic figcaption{padding-inline:20px}
  .wa-fund h2{font-size:clamp(30px,8.6vw,44px)}
  .wa-fund-strap{text-align:left;align-items:flex-start}
}

/* The road draws once, on scroll, because its subject is the passage of time.
   It is the only animation in the section. Reduced motion yields it complete
   rather than yielding a degraded page. */
@media(prefers-reduced-motion:reduce){
  .wa-fund-line path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  /* The arrow still changes colour with the label; it just stops travelling. */
  .wa-fund-go i{transition:none}
  .wa-fund-go:hover i{transform:none}
}