/* The atlas — /atlas.
 * ---------------------------------------------------------------------------
 * The one page on this site where geography is the interface rather than an
 * illustration inside it. Everything here is prefixed `at-`; the tokens, the
 * reset, the type scale and the buttons come from afrinkong.css and are never
 * redefined below.
 *
 * The whole page is one screen on a desktop: a map that fills the space it is
 * given and a panel beside it that changes as you descend. Nothing scrolls
 * except the panel, because a map you have to scroll to is not a map.
 */

/* ---- chrome -------------------------------------------------------------- */

.at-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)}
.at-mark{display:flex;flex-direction:column;line-height:1}
.at-mark i{font-family:var(--fj-mono);font-style:normal;font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--c-muted)}
.at-mark b{font-family:var(--fj-display);font-size:22px;letter-spacing:-.01em;
  text-transform:uppercase;margin-top:5px}
.at-routes{display:flex;gap:26px;margin-left:auto;font-family:var(--fj-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)}
.at-routes a:hover{color:var(--c-accent)}

/* ---- the two halves ------------------------------------------------------ */

.at{display:grid;grid-template-columns:1fr min(40vw,520px);
  height:calc(100vh - var(--mast));height:calc(100dvh - var(--mast))}

/* The map column: the continent, and the two questions under it. */
.at-map{display:flex;flex-direction:column;min-width:0;min-height:0}
/* The ground the continent sits on. One very soft pool of light behind the
   middle of Africa and nothing else: depth, not weather. */
.at-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:radial-gradient(120% 90% at 46% 44%,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 62%), var(--fj-dust)}
.at-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}

/* ---- the geography ------------------------------------------------------- */

/* Context: the forty-odd countries with nothing behind them yet. They are the
   shape of the continent and nothing more, so they are drawn at the weight of a
   printed rule and never respond to anything. */
.at-rest path{fill:rgba(31,33,28,.055);stroke:var(--c-bg);stroke-width:.9;
  vector-effect:non-scaling-stroke}

/* The roster. Three tiers, three weights, and the difference is meant to be
   legible at a glance: ours, bookable, and on the map because it is next door. */
.at-c path,.at-c circle{fill:rgba(190,85,39,.42);stroke:var(--c-bg);stroke-width:1.1;
  vector-effect:non-scaling-stroke;
  transition:fill var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)}
.at-c[data-tier="ours"] path,.at-c[data-tier="ours"] circle{fill:var(--c-accent)}
.at-c:hover path,.at-c:hover circle,.at-c:focus-visible path,.at-c:focus-visible circle{
  fill:var(--c-primary)}
.at-c{cursor:pointer}
.at-c:focus{outline:none}
.at-c:focus-visible path,.at-c:focus-visible circle{stroke:var(--c-primary);stroke-width:2.4}

/* Dimmed: still there, still the shape of the continent, no longer the subject.
   Opacity rather than a paler fill, so the context countries underneath stay
   visible through them and the continent does not develop holes. */
.at-c[data-dim] path,.at-c[data-dim] circle{fill:rgba(31,33,28,.1)}
.at-c[data-dim]{pointer-events:none}
.at-c[data-lit] path,.at-c[data-lit] circle{fill:var(--c-primary)}
/* Next door. Once one country is the subject, the rest of its region has to
   stay on the map and stop competing with it — you can still press them, they
   are simply no longer the point. */
.at-c[data-near] path,.at-c[data-near] circle{fill:rgba(190,85,39,.1)}
.at-c[data-near]:hover path,.at-c[data-near]:hover circle{fill:rgba(190,85,39,.5)}
/* Hovering a region in the list. Not a selection — a look. */
.at-c[data-peek] path,.at-c[data-peek] circle{fill:var(--c-primary)}

/* A country with a photograph in it stops being filled: the picture is the
   fill. The outline stays, because the outline is what says which country. */
.at-c[data-win] path{fill:none;stroke:var(--c-primary);stroke-width:1.6}
.at-win{opacity:0;transition:opacity var(--t-slow) var(--ease);pointer-events:none}
.at-win[data-on]{opacity:1}

/* Labels ride the zoom. Their size is set by the script as the view narrows;
   everything else about them is here. The halo is what keeps a name readable
   over a border. */
.at-labels{pointer-events:none;font-family:var(--fj-mono);letter-spacing:.14em;
  text-transform:uppercase;fill:var(--c-primary);text-anchor:middle;
  paint-order:stroke;stroke:var(--c-bg);stroke-width:3.5px;stroke-linejoin:round}
.at-label{opacity:0;transition:opacity var(--t-mid) var(--ease)}
.at-label[data-on]{opacity:1}
.at-label[data-quiet]{opacity:.45}
/* A country filled with ink needs its name in paper, or the label disappears
   into the country it is naming. */
.at-label[data-inv]{fill:var(--c-bg);stroke:var(--c-primary)}
/* Dropped by the decluttering pass: there was no room for it at this zoom. */
.at-label[data-hide]{opacity:0}

/* ---- the constellation --------------------------------------------------- */

/* The same continent, read as a network. The countries stay where they are —
   every node sits at its own country's centre — so switching modes is a change
   of drawing rather than a change of subject, and nothing has to be relearned.
   Lines are hairlines and nodes are small: a graph that shouts is a graph
   nobody reads. */
.at-web{pointer-events:none}
.at-web line{stroke:var(--c-primary);stroke-opacity:.16;stroke-width:1;
  vector-effect:non-scaling-stroke;transition:stroke-opacity var(--t-mid) var(--ease)}
/* A shared land border is the only line here that changes what a journey can
   physically be, so it is the only one drawn solid. */
.at-web line[data-kind="border"]{stroke-opacity:.42;stroke-width:1.6}
.at-web line[data-kind="lens"]{stroke:var(--c-accent);stroke-opacity:.4;
  stroke-dasharray:3 4}
.at-web line[data-lit]{stroke:var(--c-accent);stroke-opacity:.9;stroke-width:2}
.at-web circle{fill:var(--c-bg);stroke:var(--c-primary);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.at-web circle[data-tier="ours"]{fill:var(--c-accent);stroke:var(--c-accent)}
.at-web circle[data-lit]{fill:var(--c-primary);stroke:var(--c-primary)}
.at-web circle[data-dim]{opacity:.28}
/* In links mode the land itself steps back to a whisper: the network is the
   drawing, and a filled continent underneath it is two drawings at once. */
.at[data-web] .at-c path,.at[data-web] .at-c circle{fill:rgba(31,33,28,.07)}
.at[data-web] .at-rest path{fill:rgba(31,33,28,.035)}
.at[data-web] .at-win{opacity:0}

.at-mode{position:absolute;top:18px;right:22px;z-index:5;display:flex;
  border:1px solid var(--c-border);background:rgba(247,242,231,.9)}
.at-modeb{background:none;border:0;cursor:pointer;font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);padding:9px 13px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.at-modeb[aria-pressed="true"]{background:var(--c-primary);color:var(--c-bg)}
.at-modeb:hover[aria-pressed="false"]{color:var(--c-primary)}

/* ---- what is next to this ------------------------------------------------ */

/* The answer to the question the site could not answer: what is next to it.
   Every row carries the evidence for itself, because "you may also like" with
   no reason behind it is the thing this is meant to replace. */
.at-next{margin-top:var(--sp-5);border-top:2px solid var(--c-accent);padding-top:14px}
.at-next-head{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-muted)}
.at-next ul{margin-top:10px}
.at-next li{border-bottom:var(--fj-rule)}
.at-next button{display:grid;grid-template-columns:1fr auto;gap:6px 14px;width:100%;
  text-align:left;background:none;border:0;cursor:pointer;padding:13px 4px;color:inherit;
  font:inherit;transition:background var(--t-fast) var(--ease)}
.at-next button:hover{background:var(--fj-dust)}
.at-next b{font-family:var(--fj-display);font-size:19px;text-transform:uppercase;line-height:1.05}
.at-next-km{font-family:var(--fj-mono);font-size:9px;letter-spacing:.12em;color:var(--c-muted);
  white-space:nowrap;padding-top:4px}
.at-next-why{grid-column:1/-1;font-size:14.5px;line-height:1.5;color:var(--c-muted)}
.at-next-why em{font-style:normal;color:var(--c-accent)}
.at-next-note{margin-top:12px;font-size:13px;line-height:1.6;color:var(--c-muted)}

/* ---- breadcrumb ---------------------------------------------------------- */

.at-crumb{position:absolute;top:20px;left:26px;z-index:5;display:flex;align-items:center;
  gap:2px;flex-wrap:wrap;max-width:calc(100% - 52px)}
.at-crumb-seg{background:none;border:0;cursor:pointer;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted);padding:7px 9px;
  transition:color var(--t-fast) var(--ease)}
.at-crumb-seg:hover{color:var(--c-accent)}
.at-crumb-seg[aria-current]{color:var(--c-primary)}
.at-crumb-sep{font-family:var(--fj-mono);font-size:10px;color:var(--c-border);
  user-select:none;pointer-events:none}

/* ---- the lenses ---------------------------------------------------------- */

/* The two questions, on their own strip under the map rather than floating over
   it. Laid across the continent they sat on Namibia; a traveller should not have
   to read a filter through a country. */
.at-tools{flex:0 0 auto;display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"want go" "when go" "count go";gap:7px 20px;
  padding:14px 26px 15px;border-top:2px solid var(--c-primary);background:var(--c-bg)}
.at-lens{display:flex;align-items:center;gap:12px;grid-area:want;min-width:0}
.at-lens--when{grid-area:when}
.at-lens-say{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-muted);flex:0 0 auto;width:34px}
.at-chips{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 0;min-width:0}
.at-chip{background:rgba(247,242,231,.86);border:1px solid var(--c-border);cursor:pointer;
  font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-ink);padding:7px 10px;transition:background var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.at-chip i{font-style:normal;margin-left:7px;color:var(--c-muted);font-size:8.5px}
.at-chip:hover{border-color:var(--c-primary)}
.at-chip[aria-pressed="true"]{background:var(--c-primary);color:var(--c-bg);border-color:var(--c-primary)}
.at-chip[aria-pressed="true"] i{color:var(--fj-onbasalt-dim)}
.at-chip--m{padding:7px 8px;letter-spacing:.1em;min-width:38px;text-align:center}
.at-count{grid-area:count;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);padding-left:46px;margin-top:2px}

.at-surprise{grid-area:go;align-self:center;cursor:pointer;
  background:var(--c-primary);color:var(--c-bg);border:1px solid var(--c-primary);
  font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:14px 20px;transition:background var(--t-fast) var(--ease)}
.at-surprise i{font-style:normal;margin-left:9px}
.at-surprise:hover{background:var(--c-accent);border-color:var(--c-accent)}

/* ---- the panel ----------------------------------------------------------- */

.at-panel{position:relative;border-left:2px solid var(--c-primary);overflow:hidden;
  background:var(--c-bg)}
/* Four panes stacked in the same box, one shown. `visibility` and not just
   opacity: an invisible pane that is still visible to the browser keeps its
   buttons in the tab order and in the accessibility tree, so a keyboard user
   would walk through four continents' worth of controls to reach the one on
   screen. The delay is what lets it fade out before it is taken away. */
.at-pane{position:absolute;inset:0;overflow-y:auto;padding:var(--sp-5) var(--sp-4) var(--sp-5);
  opacity:0;transform:translateX(14px);pointer-events:none;visibility:hidden;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
    visibility 0s linear var(--t-mid)}
.at-pane[data-on]{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
    visibility 0s}
.at-h1{font-size:clamp(38px,4.4vw,64px);line-height:.94;margin:10px 0 0}
.at-sub{font-family:var(--fj-text);font-size:19px;line-height:1.4;color:var(--c-accent);
  margin-top:12px}
.at-lede{margin-top:16px;color:var(--c-muted);font-size:16.5px}
.at-body{margin-top:14px;font-size:16.5px}
.at-foot-note{margin-top:var(--sp-4);font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}

/* Terrain words: the physical difference between one region and the next, set
   as a row of stamps rather than a sentence nobody reads. */
.at-terrain{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px}
.at-terrain span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);border:1px solid var(--c-border);padding:5px 8px}

/* A row is the one repeating unit of the panel: a region, a country, a place.
   Same shape at every rung, so descending feels like the same gesture. */
.at-rows{margin-top:var(--sp-4);border-top:2px solid var(--c-primary)}
.at-rows li{border-bottom:var(--fj-rule)}
.at-row{display:grid;grid-template-columns:34px 1fr 18px;gap:12px;align-items:start;width:100%;
  text-align:left;background:none;border:0;cursor:pointer;padding:15px 4px;color:inherit;
  font:inherit;transition:background var(--t-fast) var(--ease)}
.at-row:hover{background:var(--fj-dust)}
.at-row-no{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.12em;color:var(--c-muted);
  padding-top:5px}
.at-row-body b{display:block;font-family:var(--fj-display);font-size:21px;font-weight:700;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.06}
.at-row-line{display:block;margin-top:5px;font-size:15px;line-height:1.5;color:var(--c-muted)}
.at-row-meta{display:block;margin-top:7px;font-family:var(--fj-mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.at-row-go{font-family:var(--fj-mono);color:var(--c-muted);padding-top:4px;
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.at-row:hover .at-row-go{color:var(--c-accent);transform:translateX(3px)}
.at-row[aria-current]{background:var(--fj-dust)}
.at-row[aria-current] .at-row-go{color:var(--c-accent)}
/* Ours reads differently from bookable-through-a-partner, at every rung. */
.at-row[data-tier="ours"] .at-row-no{color:var(--c-accent)}

.at-nojs{padding:0 4px 14px;font-size:14px;color:var(--c-muted)}

/* Season: twelve cells, the good ones filled. It answers "when" in the width of
   a paragraph, which a paragraph cannot. */
.at-season{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:18px}
.at-season span{font-family:var(--fj-mono);font-size:8.5px;letter-spacing:.02em;text-align:center;
  padding:7px 0;border:1px solid var(--c-border);color:var(--c-muted)}
.at-season span[data-on]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-bg)}

/* The opinion. Set as a quotation because that is what it is: somebody who has
   been, telling you where to start and what not to do first. */
.at-why{margin-top:var(--sp-4);border-left:2px solid var(--c-accent);padding:2px 0 2px 18px}
.at-why b{display:block;font-family:var(--fj-display);font-size:22px;text-transform:uppercase;
  line-height:1.06}
.at-why p{margin-top:8px;font-size:16px;color:var(--c-muted)}
.at-why .af-go{margin-top:12px;background:none;border:0;cursor:pointer;padding:0}

.at-who{margin-top:var(--sp-4);border-top:2px solid var(--c-accent);padding-top:14px}
.at-who b{font-family:var(--fj-display);font-size:19px;text-transform:uppercase;display:block}
.at-who span{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);margin-top:5px}
.at-who p{margin-top:9px;font-size:15.5px;color:var(--c-muted)}
.at-who .af-go{margin-top:11px;display:inline-block}

.at-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-4)}

/* The lens badges on a place — what this thing is, in the same words the
   filters use, so the connection between the two is not a leap. */
.at-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.at-tags button{background:none;border:1px solid var(--c-border);cursor:pointer;
  font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-muted);padding:5px 8px}
.at-tags button:hover{border-color:var(--c-accent);color:var(--c-accent)}

.at-empty{margin-top:var(--sp-4);border:1px dashed var(--c-border);padding:18px;
  font-family:var(--fj-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-muted);line-height:1.9}

/* ---- tablet -------------------------------------------------------------- */

@media(max-width:1180px){
  .at{grid-template-columns:1fr min(46vw,440px)}
  .at-tools{padding:12px 18px 13px;gap:6px 14px}
  /* Wrapped, the two rows of chips eat a third of a tablet's height. One
     scrolling row each keeps the map the biggest thing on the screen. */
  .at-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .at-chips::-webkit-scrollbar{display:none}
  .at-chip{flex:0 0 auto}
}

/* ---- phone --------------------------------------------------------------- */

/* Not the desktop layout squeezed. The map becomes a band you can still press,
   and the panel below it is the thing you actually read and scroll — which is
   the order a phone reads anything. */
@media(max-width:820px){
  .at{display:block;height:auto}
  /* The map column stops being a column. The continent alone stays pinned —
     small, always there, still pressable — and the two questions scroll away
     with everything else, because on a phone the thing you are reading is the
     panel and the map is the orientation above it. */
  .at-map{display:contents}
  .at-stage{position:sticky;top:var(--mast);z-index:3;height:32vh;height:32dvh;
    min-height:230px;border-bottom:2px solid var(--c-primary)}
  /* The masthead loses its nav rather than its identity: the same routes are in
     the footer of every page this one leads to, and a wrapped three-line
     masthead would cost a fifth of the screen the map needs. */
  .at-mast{padding:0 14px;gap:14px}
  .at-routes{display:none}
  .at-mast .af-btn{padding:11px 13px;font-size:9.5px}
  .at-mark b{font-size:19px}
  .at-crumb{top:10px;left:12px}
  .at-crumb-seg{padding:9px 7px}
  .at-mode{top:8px;right:10px}
  .at-modeb{padding:11px 11px}
  .at-tools{grid-template-columns:1fr;grid-template-areas:"want" "when" "go";
    gap:6px;padding:10px 12px 11px}
  .at-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .at-chips::-webkit-scrollbar{display:none}
  .at-chip{flex:0 0 auto}
  .at-count{display:none}
  .at-surprise{justify-self:stretch;text-align:center;padding:12px 14px;font-size:9.5px}
  .at-panel{border-left:0;overflow:visible;height:auto}
  .at-pane{position:static;display:none;padding:var(--sp-4) 20px var(--sp-6);transform:none;
    opacity:1;overflow:visible}
  .at-pane[data-on]{display:block}
  .at-h1{font-size:clamp(34px,10vw,52px)}
}

@media(pointer:coarse){
  .at-chip,.at-crumb-seg{min-height:44px}
  .at-row{padding:17px 4px}
}

/* Motion is the one thing here that is genuinely decoration: the view still
   arrives, it just arrives immediately. */
@media(prefers-reduced-motion:reduce){
  .at-pane{transform:none}
}