/* Ananse Travel.
   Its own look, deliberately warmer than the newsroom's: somebody planning a
   trip is in a different frame of mind from somebody reading the wire, and a
   page that feels like a front page makes travel feel like homework.
   Same gold, so it still reads as Ananse. */

:root {
  --ink:      #0E1113;
  --ink-2:    #151A1D;
  --ink-3:    #1B2125;
  --line:     rgba(247,245,240,.10);
  --bone:     #F7F5F0;
  --muted:    rgba(247,245,240,.52);
  --gold:     #D4A537;
  --green:    #7BC67B;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* ── header ─────────────────────────────────────────────────────────────── */
#t-head { border-bottom: 1px solid var(--line); background: rgba(14,17,19,.94);
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); }
.hin { max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.brand { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.bm { font-weight: 800; letter-spacing: 3.4px; font-size: 16px; }
.bs { font-family: var(--serif); font-size: 17px; color: var(--gold); font-style: italic; }
.tnav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.tnav a { text-decoration: none; font-size: 14px; color: rgba(247,245,240,.72); }
.tnav a:hover { color: var(--gold); }
.tnav a.out { color: var(--muted); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 30px; }
.hero h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -1px;
  font-size: clamp(34px, 6.4vw, 62px); line-height: 1.03; margin: 0; }
.hero p { color: rgba(247,245,240,.68); font-size: 17.5px; line-height: 1.6;
  max-width: 640px; margin: 16px 0 0; }

.search { margin: 30px 0 0; position: relative; max-width: 620px; }
.search input {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line);
  color: var(--bone); border-radius: 12px; padding: 16px 18px;
  font-size: 16px; font-family: inherit; min-height: 56px;
}
.search input:focus { outline: none; border-color: var(--gold); }
.search input::placeholder { color: var(--muted); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.chips button {
  background: none; border: 1px solid var(--line); color: var(--bone);
  border-radius: 100px; padding: 8px 15px; font-size: 13px; cursor: pointer;
  font-family: inherit; min-height: 36px;
}
.chips button:hover { border-color: var(--gold); color: var(--gold); }
.chips button.on { background: var(--gold); border-color: var(--gold);
  color: var(--ink); font-weight: 700; }

.count { color: var(--muted); font-size: 13.5px; margin: 20px 0 14px; }

/* ── country grid ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.c {
  display: block; text-decoration: none; border: 1px solid var(--line);
  border-radius: 13px; background: var(--ink-2); padding: 18px 20px;
  transition: .16s; min-height: 118px;
}
.c:hover { border-color: rgba(212,165,55,.55); transform: translateY(-2px); }
/* FLAGS ARE IMAGES, NOT EMOJI. Windows ships no glyphs for the regional
   indicator pairs, so Chrome and Edge on Windows draw the two letters
   instead — a grid of 193 cards each reading "GH", "KE", "JP" where the flag
   should be, on the commonest desktop platform there is. The Atlas on the
   news site already uses this source; matching it keeps one answer to one
   question across both sites. */
.c .flag { width: 40px; height: auto; border-radius: 3px; margin-bottom: 9px;
  border: 1px solid rgba(247,245,240,.12); display: block; }
.c .nm { font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.c:hover .nm { color: var(--gold); }
.c .cap { font-size: 12px; color: var(--muted); margin-top: 3px; letter-spacing: .3px; }
.c .kn { font-size: 13px; color: rgba(247,245,240,.55); line-height: 1.5;
  margin-top: 9px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }

/* ── country page ───────────────────────────────────────────────────────── */
.chead { padding: 46px 0 8px; }
.chead .flag { font-size: 44px; line-height: 1; }
.chead h1 { font-family: var(--serif); font-size: clamp(32px, 6vw, 54px);
  font-weight: 700; margin: 10px 0 0; letter-spacing: -.8px; }
.chead .sub { color: var(--muted); font-size: 14px; margin-top: 6px; letter-spacing: .4px; }
.chead .known { color: rgba(247,245,240,.72); font-size: 16.5px;
  line-height: 1.62; max-width: 680px; margin: 14px 0 0; }

h2.sec { font-family: var(--serif); font-size: 27px; font-weight: 700;
  margin: 48px 0 4px; }
p.secsub { color: var(--muted); font-size: 14px; margin: 0 0 20px; line-height: 1.6; }

.places { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.place { display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 11px; background: var(--ink-2);
  padding: 15px 17px; transition: .15s; }
.place:hover { border-color: rgba(212,165,55,.5); }
.pn { font-family: var(--serif); font-size: 17px; line-height: 1.25;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.place:hover .pn { color: var(--gold); }
.pn i { font-style: normal; font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 6px; }
.pa { font-size: 13px; color: rgba(247,245,240,.55); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }

/* ── operators ──────────────────────────────────────────────────────────── */
.ops { display: flex; flex-direction: column; gap: 11px; }
.op { border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2);
  padding: 16px 19px; }
.otop { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.on { font-family: var(--serif); font-size: 19px; }
.pill { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 800; border-radius: 100px; padding: 3px 9px; }
.pill.yes { color: var(--green); border: 1px solid rgba(123,198,123,.45); }
.pill.no { color: var(--muted); border: 1px solid var(--line); }
.ometa { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.olic { font-size: 13px; color: rgba(247,245,240,.72); margin-top: 8px; }
.olic.dim { color: var(--muted); }
.oass { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.oweb { display: inline-block; margin-top: 9px; font-size: 12.5px;
  color: var(--gold); text-decoration: none; }

/* ── the authority block: the product, not a footnote ───────────────────── */
.ring { margin-top: 16px; border: 1px solid rgba(212,165,55,.32);
  background: rgba(212,165,55,.05); border-radius: 12px; padding: 17px 19px; }
.ring > b { display: block; font-size: 13px; letter-spacing: .4px;
  margin-bottom: 10px; color: var(--gold); }
.tel { display: inline-block; margin: 0 9px 8px 0; font-size: 13.5px;
  color: var(--bone); text-decoration: none;
  border-bottom: 1px solid rgba(247,245,240,.25); }
.tel:hover { color: var(--gold); border-color: var(--gold); }
.offs { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px; }
.off { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 12.5px; }
.off span { color: var(--muted); flex: 0 0 140px; }
.off a { color: rgba(247,245,240,.8); text-decoration: none; }
.off a:hover { color: var(--gold); }
.hrs { display: block; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.rnote { font-size: 12.5px; color: rgba(247,245,240,.62); line-height: 1.6; margin: 10px 0 0; }

/* ── the checklist ──────────────────────────────────────────────────────── */
.chk { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.chk li { position: relative; padding: 0 0 0 40px; margin-bottom: 15px;
  font-size: 15px; line-height: 1.62; color: rgba(247,245,240,.8); }
.chk li:before { counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid rgba(212,165,55,.5); color: var(--gold);
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; }
.chk a { color: var(--gold); }

/* ── notices ────────────────────────────────────────────────────────────── */
.note { border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0; background: var(--ink-2); padding: 18px 22px;
  font-size: 14.5px; line-height: 1.68; color: rgba(247,245,240,.76);
  margin: 26px 0 0; }
.note b { color: var(--bone); }
.empty { color: var(--muted); font-size: 14.5px; line-height: 1.65; padding: 18px 0; }
.loading { color: var(--muted); font-size: 14px; padding: 30px 0; }

/* ── footer ─────────────────────────────────────────────────────────────── */
#t-foot { border-top: 1px solid var(--line); margin-top: 70px; background: var(--ink-2); }
.fin { max-width: 1080px; margin: 0 auto; padding: 34px 24px 60px; }
.isnot { font-size: 13.5px; line-height: 1.72; color: rgba(247,245,240,.7);
  max-width: 780px; margin: 0; }
.isnot b { color: var(--gold); }
.flinks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0 0; }
.flinks a { font-size: 13.5px; color: rgba(247,245,240,.6); text-decoration: none; }
.flinks a:hover { color: var(--gold); }
.fine { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 18px 0 0; }

@media (max-width: 620px) {
  .hin { gap: 14px; }
  .tnav { gap: 14px; margin-left: 0; width: 100%; }
  .tnav a { font-size: 13px; }
  .off span { flex-basis: 100%; }
  .hero { padding: 40px 0 22px; }
}