/* A page for one place — /places/<country>/<place>.
 * ---------------------------------------------------------------------------
 * Prefixed `pl-` (a place) and `pi-` (the index). Tokens, reset, type scale,
 * buttons, the plate and the window come from afrinkong.css.
 *
 * Five hundred and seventy-two of these exist, so the design has to survive
 * repetition: one column, one photograph, one paragraph, and the country it
 * belongs to never more than a click away. Nothing here is a card grid, because
 * a place is a page and not a tile.
 */

.pl-mast{position:sticky;top:0;z-index:40;height:var(--mast);display:flex;align-items:center;
  gap:var(--sp-4);padding:0 28px;background:var(--c-bg);border-bottom:2px solid var(--c-primary)}
.pl-mark{display:flex;flex-direction:column;line-height:1}
.pl-mark i{font-family:var(--fj-mono);font-style:normal;font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--c-muted)}
.pl-mark b{font-family:var(--fj-display);font-size:22px;letter-spacing:-.01em;
  text-transform:uppercase;margin-top:5px;white-space:nowrap}
.pl-routes{display:flex;gap:24px;margin-left:auto;font-family:var(--fj-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)}
.pl-routes a:hover{color:var(--c-accent)}

.pl{max-width:var(--frame);margin:0 auto;padding:var(--sp-5) 44px var(--sp-7);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:var(--sp-4) var(--sp-6);align-items:start}

/* The ladder this page sits in, at the top rather than the bottom: on a page
   this deep the first thing a visitor needs is where they are. */
.pl-where{grid-column:1/-1;border-bottom:var(--fj-rule);padding-bottom:14px}
.pl-where ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-muted)}
.pl-where li+li::before{content:"/";margin-right:9px;color:var(--c-border)}
.pl-where a:hover{color:var(--c-accent)}
.pl-where [aria-current]{color:var(--c-primary)}

.pl-body{min-width:0}
.pl-h1{font-size:clamp(34px,5.4vw,72px);line-height:.96;margin:10px 0 0;letter-spacing:-.015em;
  text-transform:none}
.pl-lede{margin-top:18px;font-size:19px;line-height:1.55;max-width:44ch}

.pl-hero{margin-top:var(--sp-4)}
.pl-hero img{width:100%;height:auto;object-fit:cover;display:block}
.pl-hero figcaption{margin-top:9px;font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted)}

.pl-tags{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.pl-tags>span{width:100%;font-family:var(--fj-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-muted)}
.pl-tag{font-family:var(--fj-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--c-border);padding:8px 11px;color:var(--c-muted);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pl-tag:hover{border-color:var(--c-accent);color:var(--c-accent)}

.pl-who{margin-top:var(--sp-5);border-top:2px solid var(--c-accent);padding-top:14px;
  max-width:52ch}
.pl-who b{display:block;font-family:var(--fj-display);font-size:24px;text-transform:uppercase;
  margin-top:8px;line-height:1.05}
.pl-who p{margin-top:8px;font-size:15.5px;color:var(--c-muted)}
/* The second sentence names the three countries where the company on the
   ground is ours as well. It is a supporting fact, not the headline, so it is
   set under the main line rather than beside it. */
.pl-who-more{margin-top:7px;font-size:14px;color:var(--c-muted)}
.pl-who .af-go{margin-top:11px}

.pl-acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:var(--sp-5)}

/* Everything else in this country, so a place is never a dead end. */
.pl-more{min-width:0;position:sticky;top:calc(var(--mast) + 22px)}
.pl-h2{font-family:var(--fj-display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-muted);border-top:2px solid var(--c-primary);padding-top:12px}
.pl-note{margin-top:8px;font-size:14.5px;color:var(--c-accent)}
.pl-sibs{margin-top:14px;max-height:52vh;overflow-y:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
.pl-sibs li{border-bottom:var(--fj-rule)}
.pl-sibs a{display:block;padding:11px 2px}
.pl-sibs b{display:block;font-family:var(--fj-display);font-size:16px;text-transform:uppercase;
  line-height:1.1;font-weight:700}
.pl-sibs span{display:block;margin-top:3px;font-family:var(--fj-mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.pl-sibs a:hover b{color:var(--c-accent)}
.pl-more .af-go{margin-top:14px}

/* THE GROUND IS DARKENED BEFORE ANYTHING IS DIMMED ON IT.
   This footer is painted in the country's own region tone, and everything in
   it fades for hierarchy — .62 on the next-country links, .6 on their labels,
   .7 on the bar. On basalt that is comfortable. On East Africa's #2B6E5E and
   North Africa's #865A28 it is not: ivory at .62 measures 3.09:1 and 3.11:1
   against those two, so the whole footer of every place page in two regions of
   five sat below the 4.5 bar.
   It went unseen because opacity is invisible to the contrast pass — getComputedStyle
   reports the undimmed colour, which is the trap the note further down this
   file warns about and which this footer then walked into anyway.
   Mixing 62% of the tone with basalt keeps the region legible as a colour and
   buys back the room: with the floor lifted to .68 the worst case across all
   five tones is 4.62:1. Measured, not guessed. */
.pl-foot{background:color-mix(in srgb,var(--plate-tone,var(--c-primary)) 62%,
  var(--c-primary));color:var(--c-bg);padding:var(--sp-5) 0}
.pl-foot-in{max-width:var(--frame);margin:0 auto;padding:0 44px}
.pl-foot .foot-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  padding-bottom:22px;margin-bottom:22px;border-bottom:var(--fj-rule-dark)}
.pl-foot .foot-next>span{width:100%;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.68}
.pl-foot .foot-next a{font-family:var(--fj-display);font-size:19px;text-transform:uppercase;
  opacity:.68;border-bottom:1px solid transparent}
.pl-foot .foot-next a[data-border]{opacity:1}
.pl-foot .foot-next a:hover{border-color:var(--c-bg)}
.pl-foot .foot-next i{font-style:normal;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.14em;margin-left:7px;opacity:.68}
.pl-foot .foot-next p{width:100%;margin-top:6px;font-size:12.5px;line-height:1.6;opacity:.68}
.pl-foot-bar{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.7}
.pl-foot-bar a{border-bottom:1px solid transparent}
.pl-foot-bar a:hover{border-color:var(--c-bg)}

/* ---- the index ----------------------------------------------------------- */

.pi{max-width:var(--frame);margin:0 auto;padding:var(--sp-6) 44px var(--sp-7)}
/* THE CAP BELONGS ON THE PROSE, NOT ON THE BLOCK. `.pi-open{max-width:60ch}`
   is 510 pixels of the sixteen-pixel body font, and the h1 inside it is set at
   ninety-two — so the block was deciding the headline's measure in a font the
   headline is not set in. The measure moves onto the lede, where it is
   measuring the thing it was written for, and the headline gets one of its
   own. Same fault on /meet and /wonders. */
.pi-open{padding-bottom:var(--sp-5);border-bottom:2px solid var(--c-primary)}
.pi-h1{font-size:clamp(40px,6.5vw,92px);line-height:.9;margin:12px 0 0;letter-spacing:-.02em;
  max-width:16ch;text-wrap:balance}
.pi-lede{margin-top:20px;font-size:17.5px;color:var(--c-muted);max-width:60ch}
/* Twenty-two countries, one line. The index is eighteen screens on a desktop
   and thirty-eight on a phone, and every one of the 572 place pages links into
   the middle of it, so the way to another country has to be at the top of the
   section you land in rather than nine countries back up the page. Sticky, so
   it is still the way out after you have scrolled into Zimbabwe. */
.pi-jump{position:sticky;top:var(--mast);z-index:20;margin-top:var(--sp-4);
  padding:12px 0 11px;background:var(--c-bg);border-top:2px solid var(--c-primary);
  border-bottom:var(--fj-rule);display:flex;flex-wrap:wrap;gap:2px 16px}
/* The hierarchy is name against count, and it is made with weight and size
   rather than by fading the count out: mixing it 62% toward the page ground
   put it at 2.64:1, which the contrast pass caught on the first run. */
.pi-jump a{font-family:var(--fj-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-primary);white-space:nowrap;
  border-bottom:1px solid transparent;padding:3px 0}
.pi-jump a i{font-style:normal;margin-left:5px;font-size:8.5px;
  letter-spacing:0;color:var(--c-muted)}
.pi-jump a:hover{color:var(--c-accent);border-bottom-color:var(--c-accent)}
/* Wrapped, twenty-two names are six lines and 144 pixels of a phone screen —
   a sixth of the viewport permanently occupied by the way out. One line that
   scrolls sideways costs 38. */
@media(max-width:700px){.pi-country{scroll-margin-top:calc(var(--mast) + 58px)}
  .pi-jump{flex-wrap:nowrap;overflow-x:auto;gap:0 14px;
    padding:9px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pi-jump::-webkit-scrollbar{display:none}
  .pi-jump a{font-size:9.5px;letter-spacing:.1em}
  .pi-jump a i{display:none}}
/* Arriving from /places#kenya must not put the heading under the strip. */
.pi-country{margin-top:var(--sp-5);border-top:2px solid var(--c-primary);
  padding-top:14px;scroll-margin-top:calc(var(--mast) + 92px)}
/* Each country's block carries its own region tone, so scrolling the index is
   the same sweep across the continent that every other surface makes. */
.pi-country h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  font-size:clamp(26px,3.2vw,42px)}
.pi-country h2 a{border-bottom:3px solid var(--plate-tone,var(--c-accent))}
.pi-country h2 span{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-muted)}
.pi-country ul{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:0 var(--sp-4)}
.pi-country li{border-bottom:var(--fj-rule)}
/* A long caption and a nowrap category label are two flex items in a 240px
   track, and at a middling width the pair is wider than the track and pushes
   past the edge of the page. Wrapping is the right answer rather than
   truncation: the caption is the thing being indexed. */
.pi-country li a{display:flex;justify-content:space-between;gap:6px 14px;
  align-items:baseline;flex-wrap:wrap;overflow-wrap:anywhere;
  padding:11px 2px;font-family:var(--fj-display);font-size:16px;text-transform:uppercase;
  font-weight:700}
.pi-country li i{flex:0 0 auto;font-style:normal;font-family:var(--fj-mono);font-size:8.5px;
  letter-spacing:.14em;color:var(--c-muted);white-space:nowrap}
.pi-country li a:hover{color:var(--c-accent)}

@media(max-width:1000px){
  .pl{grid-template-columns:1fr;padding:var(--sp-4) 28px var(--sp-6)}
  .pl-more{position:static}
  .pl-sibs{max-height:none;-webkit-mask-image:none;mask-image:none}
  .pi{padding:var(--sp-5) 28px var(--sp-6)}
}

@media(max-width:680px){
  .pl-mast{padding:0 14px;gap:12px}
  .pl-routes{display:none}
  .pl-mark b{font-size:17px}
  .pl-mast .af-btn{padding:11px 12px;font-size:9.5px;white-space:nowrap}
}

/* The masthead call went from "Plan a journey" to "Build a journey" when every
   journey CTA was pointed at the tunnel, and one extra character pushed the
   header two pixels past a 320px screen. The button is nowrap by design — a
   two-line call in a masthead looks broken — so the room comes out of the
   padding and the tracking instead. */
@media(max-width:380px){
  .pl-mast{gap:8px}
  .pl-mast .af-btn{padding:11px 8px;letter-spacing:.08em}
  .pl{padding:var(--sp-4) 18px var(--sp-6)}
  .pl-foot-in{padding:0 18px}
  .pl-h1{font-size:clamp(30px,9vw,44px)}
  .pl-lede{font-size:17px}
  .pi{padding:var(--sp-4) 18px var(--sp-6)}
  .pi-country ul{grid-template-columns:1fr}
}

@media(pointer:coarse){
  .pl-sibs a,.pi-country li a{padding-top:14px;padding-bottom:14px}
}

@media(pointer:coarse){
  .pi-jump a{padding:7px 0 8px}
  .pl-foot-bar a{padding-block:6px;display:inline-block}
}

/* The company line under the footer bar: quieter than the links above it,
   and the registered office quieter again. */
/* No colour of its own. .pl-foot paints a per-country plate tone and sets
   color:var(--c-bg) against it; this line arrived with --c-muted and --c-fg,
   which are the light-mode tokens — dark text on a dark plate, measured at
   2.25:1 where 4.5 is required. Inheriting is also the only safe answer here:
   the ground is a different tone on each of fifty-four countries, so a fixed
   dim value that clears AA on the darkest fails on the lightest.

   The hierarchy comes from size and position rather than from fading, and
   deliberately not from opacity: opacity leaves getComputedStyle reporting the
   undimmed colour, so the contrast pass would measure a ratio nobody sees. */
.pl-foot-co{margin-top:10px;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.12em;line-height:1.7}
.pl-foot-co b{font-weight:400}
.pl-foot-co .af-co-where{display:block;margin-top:5px;text-transform:none}

/* The three statements are styled in afrinkong.css now — three copies of this
   rule existed and /atlas, /meet, /journey and /places loaded none of them. */

/* THE DARK-GROUND CORRECTION IS TUNED FOR BASALT, AND THIS FOOTER IS NOT
   BASALT.

   afrinkong.css lists .pl-foot among the dark grounds and re-points --c-muted
   there to muted gold, which measures 6.02:1 on basalt and is exactly right
   everywhere else that list is used. This footer is the one member of it whose
   ground is not fixed: it is painted in the country's own region tone. Gold on
   East Africa's #2B6E5E is 2.25:1 and on North Africa's #865A28 is 2.24:1, so
   the three statements were unreadable on every place page in two regions of
   five — which is what the contrast pass caught on a page about Kenya.

   Ivory, undimmed, because there is no room for anything else: ivory itself is
   only 5.34:1 on the East tone, so a colour a shade quieter fails as surely as
   gold did. The quiet these want comes from size and letter-spacing, which
   they already have, and the pointer is answered by the rule under the word
   rather than by a lift in colour there is nowhere to go for. */
.pl-foot .af-co-link{color:var(--c-bg)}
.pl-foot .af-co-link:hover{color:var(--c-bg);border-bottom-color:var(--c-bg)}