/* Mikango Tours — design system.
   Source of truth: design/MIKANGO TOURS DESIGN HANDOFF → README.md ("high fidelity,
   all colors/fonts/copy/spacing final"). Documented for this site in docs/DESIGN.md.

   Motif language is "boarding pass to the markets": woven stripe, dashed rules,
   sharp corners everywhere, circles only for stamps and luggage tags.

   No style="" attributes. If a page needs a look, it gets a class here. */

/* ── Tokens (from the handoff token table — do not invent values) ─────── */
:root {
  --ink: #201510;
  --paper: #f6eee0;
  --card: #fffaf2;
  --terracotta: #c1502e;
  --marigold: #dfa23a;
  --indigo: #1f3d46;
  --rust: #8a3a1f;
  --muted: #6b5f52;
  --rule: rgba(32, 21, 16, .25);
  --slot: #e9e0cd;

  --shell: 1180px;
  --gap: 1.5rem;

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
  font-weight: 800;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: 1.15rem; text-transform: none; letter-spacing: 0; line-height: 1.25; }
p { margin: 0 0 1rem; }
a { color: var(--terracotta); }
img { max-width: 100%; display: block; }

/* ── shell: the centred column every section uses ────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── stripe: the woven top band. 3 colors, 60px repeat (handoff motif). ─ */
.stripe {
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    var(--terracotta) 0 20px,
    var(--marigold) 20px 40px,
    var(--indigo) 40px 60px
  );
}

/* ── band: a full-width stripe of page ───────────────────────────────── */
.band { padding: clamp(3rem, 7vw, 5rem) 0; }
.band-card { background: var(--card); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }

/* ── rule-dash: the 2px dashed divider used under headers ─────────────── */
.rule-dash { border: 0; border-top: 2px dashed var(--rule); margin: 1rem 0 2rem; }

/* ── topbar ──────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.topbar .shell {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 66px;
  border-bottom: 2px dashed var(--rule);
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--indigo);
  text-decoration: none;
  white-space: nowrap;
}
/* tourno: the "Tour No. 001 · Nairobi, Kenya" slug opposite the wordmark */
.tourno {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* nav grows, actions keep their natural width — never a fixed % split */
.navrow { display: flex; gap: 1.4rem; flex: 1; }
.navrow a {
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.navrow a:hover { color: var(--terracotta); }
.spacer { flex: 1; }

/* ── btn: sharp corners, ink border. No radius anywhere but circles. ──── */
.btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border: 2px solid var(--ink);
  background: var(--terracotta);
  color: var(--card);
  text-decoration: none;
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--rust); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
/* on the indigo footer band the ghost needs cream ink, or it vanishes */
.btn-ghost-inv { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-ghost-inv:hover { background: var(--paper); color: var(--indigo); }

/* ── kicker: small tracked label above a headline ─────────────────────── */
.kicker {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(.75rem, 1.5vw, .9rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--marigold);
  margin-bottom: .9rem;
}

/* accent: the terracotta half of a two-tone headline */
.accent { color: var(--terracotta); }

/* ── pill: outlined subline, no fill ─────────────────────────────────── */
.pill {
  display: inline-block;
  border: 2px solid var(--ink);
  padding: .55rem 1.3rem;
  font-size: clamp(.72rem, 1.6vw, .88rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { padding: clamp(2.5rem, 5vw, 3.5rem) 0 0; text-align: center; }
.hero h1 { max-width: 14ch; margin-inline: auto; }

/* framewrap: positioning context so the stamp can overlap the frame ──── */
.framewrap { position: relative; margin: 2.5rem 0 1.5rem; }

/* frame: a 3px ink photo frame. Sharp corners. */
.frame { border: 3px solid var(--ink); background: var(--slot); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* slot: an empty image well. Labelled with what belongs there.
   Every photo on this site is still a slot — no photography supplied yet. */
.slot {
  background: var(--slot);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Strip ratio is taken from the flyer mockup (345×250 cell) so a crop made for
   print drops straight in. Do not change it without recropping. */
.strip .slot { aspect-ratio: 345 / 250; }

/* The hero runs at the SUPPLIED photo's native 1843×853 (2.16:1), not the
   poster's 1848×640 (2.89:1). Cropping to the poster ratio would cut 26% of the
   height off the only photo we have. Match this to the asset, not the flyer. */
.img-hero {
  width: 100%;
  aspect-ratio: 1843 / 853;
  object-fit: cover;
}

/* ── stamp: the price badge. Circle, dashed, rotated, overlaps the frame ─ */
.stamp {
  position: absolute;
  top: clamp(-28px, -3vw, -18px);
  right: clamp(-14px, -2vw, -8px);
  width: clamp(130px, 22vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px dashed var(--ink);
  background: var(--paper);
  transform: rotate(-9deg);
  display: grid;
  place-content: center;
  text-align: center;
  padding: .5rem;
  z-index: 2;
}
.stamp-lbl {
  font-size: clamp(.5rem, 1.1vw, .68rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust);
}
.stamp-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1;
  margin: .15rem 0;
}
.stamp-tc {
  font-size: clamp(.42rem, .9vw, .56rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  margin-top: .3rem;
  padding-top: .25rem;
}

/* ── chips: market names, separated by short dashed verticals ─────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  font-size: clamp(.72rem, 1.6vw, .92rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips li + li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-right: 1.1rem;
  vertical-align: -.15em;
  background: repeating-linear-gradient(180deg, var(--rule) 0 3px, transparent 3px 6px);
}

/* ── dateline: the date between two dashed rules ─────────────────────── */
.dateline {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 2rem 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dateline::before, .dateline::after {
  content: "";
  flex: 1;
  border-top: 2px dashed var(--rule);
}

/* ── tags: the luggage-tag row (circle ring + 3-letter code) ──────────── */
.tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  margin: 2.5rem 0;
  padding: 0;
  list-style: none;
}
.tag { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
/* ring: the circle. Color cycles indigo/terracotta/marigold for rhythm. */
.ring {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 3px solid var(--indigo);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--indigo);
  flex: none;
}
.ring-terracotta { border-color: var(--terracotta); color: var(--terracotta); }
.ring-marigold { border-color: var(--marigold); color: var(--marigold); }
.tag-name { font-size: .9rem; font-weight: 600; }

/* ── tagline: the italic display line ────────────────────────────────── */
.tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.75rem);
  color: var(--indigo);
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 40ch;
  text-transform: none;
}

/* ── grid + card: the inclusions grid ────────────────────────────────── */
/* minmax(400px) so the 8 cards land on 2 columns (the flyer's 2×4) and never
   3, which strands two orphans on the last row. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--gap);
  padding: 0;
  list-style: none;
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
}
/* card: an inclusion. Flex ROW (ring beside text). See DESIGN.md — .card
   and .surface are two names on purpose. */
.card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 1.25rem;
}
.card h3 { margin: 0 0 .15rem; }
.card p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ── surface: a plain container. Not a card: no flex, no ring. ────────── */
.surface { border: 2px solid var(--ink); background: var(--card); padding: 1.75rem; }

/* ── strip: the "A Taste of the Trip" scrapbook photo row ─────────────── */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}
/* 2px border + 5px matte, as the flyer has it */
.strip .frame { border-width: 2px; padding: 5px; background: var(--paper); }
/* alternating tilt, -1.5deg to 1.5deg, for the scrapbook feel */
.strip li:nth-child(odd) { transform: rotate(-1.5deg); }
.strip li:nth-child(even) { transform: rotate(1.5deg); }

/* ── days: the itinerary rows ────────────────────────────────────────── */
.days { display: grid; gap: 1rem; padding: 0; list-style: none; }
.day {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 1.1rem 1.25rem;
}
.day h3 { margin: 0 0 .15rem; }
.day p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ── note: small italic aside ────────────────────────────────────────── */
.note {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  color: var(--muted);
  text-align: center;
  margin-top: 2rem;
}

/* ── stub: the indigo ticket-stub footer, with perforation circles ────── */
.stub {
  position: relative;
  background: var(--indigo);
  color: var(--paper);
  padding: 3rem 0 2.5rem;
  margin-top: 4rem;
}
.stub::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 18px;
  background-image: radial-gradient(circle 9px at 16px 9px, var(--paper) 98%, transparent 100%);
  background-size: 32px 18px;
  background-repeat: repeat-x;
}
.stub .shell { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.stub a { color: var(--paper); }
.stub-lbl {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marigold);
  margin-bottom: .2rem;
}
.stub-val { font-weight: 600; font-size: .95rem; }
/* badge: the outlined "LIMITED SEATS" call, cream on indigo */
.badge {
  border: 2px solid var(--paper);
  padding: .5rem 1.1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.stub-foot {
  border-top: 1px solid rgba(246, 238, 224, .25);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .8rem;
  color: rgba(246, 238, 224, .7);
}

/* ── fine: the asterisk / T&C line ───────────────────────────────────── */
.fine { font-size: .78rem; color: var(--muted); }

/* The tourno slug wraps to four lines in a narrow topbar and shoves the
   Enquire button off-screen. It is decoration; the button is not. */
@media (max-width: 900px) {
  .tourno { display: none; }
}

/* ⚠️ Deliberate deviation from the flyer, which stamps the photo's TOP-right.
   The stamp is ~18% of the frame on desktop but ~33% on a phone, where it lands
   squarely on the aircraft — the subject of the only photo we have. Bottom-right
   is distant hills, so the stamp still overlaps a corner and costs nothing.
   Cropping cannot fix this: the plane sits at 55–79% across, under the stamp
   either way. */
@media (max-width: 640px) {
  .stamp { top: auto; bottom: -16px; }
}

/* The dashed separator is a ::before on each chip, so a wrapped line starts with
   an orphaned dash. Below 520px stack them instead. */
@media (max-width: 520px) {
  .chips { flex-direction: column; gap: .4rem; }
  .chips li + li::before { content: none; }
}
@media (max-width: 720px) {
  .navrow { display: none; }
  .stub .shell { gap: 1.25rem; }
  .stub .spacer { flex-basis: 100%; }
}