/* ============================================================================
   home.css — components that exist only on the homepage.

   The palette, the header, the footer, the bands and the headings moved
   to theme.css, which every page loads. What is left here is the hero
   video, the credential pills, the reason panels, the journey rail, the
   3D map, the season calendar, the stories gallery and the guide — none
   of which appear anywhere else.

   Still scoped to body.home-page, so linking it from another page would
   do nothing.
   ========================================================================= */

/* Immersive hero with a stable poster behind the conditional video. */
.home-page .hero-a { background: var(--navy-900); min-block-size: min(84svh, 52rem); }
/* Desktop: the copy sits in the left third, so the veil is heaviest there
   and clears to almost nothing on the right, where the booking card has its
   own white ground and the photograph can be seen. */
.home-page .hero-a .hero-scrim {
  background: linear-gradient(90deg, rgb(16 27 45 / 82%) 0%, rgb(16 27 45 / 52%) 48%, rgb(16 27 45 / 12%) 100%),
              linear-gradient(0deg, rgb(16 27 45 / 44%), transparent 58%);
}

/* Below the two-column breakpoint the copy spans the full width, so a veil
   that clears to 12% on the right leaves the ends of every line sitting on
   bare photograph. Measured at 2.8:1 on a phone. Vertical instead, and even
   across. */
@media (width < 64rem) {
  .home-page .hero-a .hero-scrim {
    background: linear-gradient(180deg,
      rgb(16 27 45 / 74%) 0%,
      rgb(16 27 45 / 66%) 38%,
      rgb(16 27 45 / 76%) 70%,
      rgb(16 27 45 / 90%) 100%);
  }
}
.home-page .hero-a h1 { max-width: 11ch; letter-spacing: 0; }
.home-page .hero-a .hero-lede { max-width: 48ch; color: var(--powder-100); }
.home-page .hero-video { pointer-events: none; }
.home-page .hero-video video { filter: saturate(1.05); }
.home-page .awards { gap: 1.15rem 2rem; }
.home-page .award { max-inline-size: 19rem; }
.home-page .award svg { color: var(--gold-300); }
.home-page .award b { color: #fff; letter-spacing: 0.04em; }
.home-page .award span span { color: var(--powder-200); }
.home-page .booking { border: 1px solid rgb(16 27 45 / 12%); border-radius: 8px; }
.home-page .booking h2 { color: var(--navy-900); }
.home-page .booking .switcher { background: var(--powder-200); border-radius: 8px; }
.home-page .booking .switcher button {
  min-width: 0;
  min-height: 3.65rem;
  padding: 0.48rem 0.36rem;
  flex-direction: column;
  gap: 0.18rem;
  line-height: 1.2;
  font-size: 0.72rem;
  white-space: normal;
}
.home-page .booking .switcher button svg { width: 1.2rem; height: 1.2rem; color: var(--navy-700); }
.home-page .booking .switcher button[aria-pressed='true'] { background: #fff; color: var(--navy-900); }
.home-page .booking .switcher button[aria-pressed='true'] svg { color: var(--gold); }
.home-page .switcher-trip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.35rem; }
.home-page .booking-label { color: var(--navy-800); }
.home-page .booking .input { min-height: 48px; border-color: var(--line-strong); color: var(--navy-900); }
.home-page .month-hint { display: block; min-height: 1.2em; margin-top: 0.35rem; color: var(--text-3); font-size: var(--t-xs); }
.home-page .booking-note { color: var(--text-3); }

/* Credential pills remain neutral until the real scans are supplied. */
.home-page .proof { gap: 0; background: transparent; padding: 1rem var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-page .proof-item { justify-content: stretch; background: transparent; padding: 0.45rem; }
.home-page .credential-pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--navy-900);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, translate 180ms ease;
}
.home-page .credential-pill:hover { border-color: var(--gold); background: var(--powder-100); translate: 0 -2px; }
.home-page .credential-pill > svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--gold); }
.home-page .credential-pill span { margin-left: auto; color: var(--text-3); font-size: 0.68rem; font-weight: 600; }
.home-page .proof-note { display: grid; align-content: center; gap: 0.18rem; padding-inline: 0.8rem; }
.home-page .proof-note b { font-size: var(--t-xs); color: var(--navy-800); }
.home-page .proof-note > span { font-size: 0.7rem; color: var(--text-3); }
.certificate-dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(86vh, 52rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--navy-900);
  background: var(--powder-100);
  box-shadow: 0 24px 80px rgb(16 27 45 / 38%);
}
.certificate-dialog::backdrop { background: rgb(16 27 45 / 70%); backdrop-filter: blur(4px); }
.certificate-dialog-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line); }
.certificate-dialog-head .eyebrow { margin: 0 0 0.25rem; }
.certificate-dialog-head h2 { margin: 0; font-size: 1.35rem; }
.certificate-close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--navy-900); background: white; cursor: pointer; }
.certificate-close svg { width: 1.15rem; height: 1.15rem; }
.certificate-document { min-height: 20rem; margin: 1.25rem; padding: 2rem; display: grid; place-content: center; justify-items: center; gap: 0.6rem; border: 1px dashed var(--line-strong); background: linear-gradient(140deg, #fff, var(--powder-100)); text-align: center; }
.certificate-document > svg { width: 3rem; height: 3rem; color: var(--gold); }
.certificate-document h3 { margin: 0; font-size: 1.2rem; }
.certificate-document p { max-width: 38ch; margin: 0; color: var(--text-2); font-size: var(--t-sm); }
.certificate-image { display: block; max-width: calc(100% - 2.5rem); max-height: 68vh; margin: 1.25rem auto; object-fit: contain; }

/* Three clear destination cards. */
.home-page .duo.duo-3 { grid-template-columns: 1fr; }
@media (width >= 52rem) { .home-page .duo.duo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-page .panel { min-height: 25rem; border-radius: 8px; overflow: hidden; }
.home-page .panel > div:not(.panel-media) { position: relative; z-index: 1; align-self: end; padding: 1.2rem; color: #fff; }
.home-page .panel h3 { color: #fff; font-size: 1.3rem; }
.home-page .panel p { color: var(--powder-200); }
.home-page .panel-media::after { background: linear-gradient(0deg, rgb(16 27 45 / 88%), transparent 75%); }
.home-page .panel .btn-on-photo { z-index: 2; }

/* Image-led reason cards expand on pointer, keyboard focus, or touch. */
.home-page #why { overflow: hidden; }
.home-page #why .sec-title { margin-bottom: 1.8rem; }
.home-page .features {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding: 0.35rem 0.25rem 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--line-strong) transparent;
}
.home-page .feature {
  position: relative;
  flex: 1 0 5.2rem;
  min-width: 5.2rem;
  min-height: 25rem;
  padding: 1rem 0.7rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.65rem;
  border-radius: 7px;
  background: var(--navy-900);
  color: #fff;
  cursor: pointer;
  scroll-snap-align: start;
  transition: flex-basis 480ms cubic-bezier(.2,.8,.2,1), box-shadow 250ms ease;
}
.home-page .feature::before,
.home-page .feature::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.home-page .feature::before { z-index: -2; background: var(--feature-image) center / cover no-repeat; transition: scale 600ms ease; }
.home-page .feature::after { z-index: -1; background: linear-gradient(0deg, rgb(16 27 45 / 90%), rgb(16 27 45 / 12%) 75%); }
.home-page .feature.is-open { flex-basis: 18rem; box-shadow: 0 16px 38px rgb(16 27 45 / 23%); }
.home-page .feature.is-open::before { scale: 1.06; }
.home-page .feature:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }
.home-page .feature-mark { inset: 0.9rem 0.8rem auto auto; z-index: 0; width: 2rem; height: 2rem; opacity: 0.9; color: var(--gold-300); }
.home-page .feature h3 { position: relative; z-index: 1; margin: 0; color: #fff; font-size: 0.92rem; line-height: 1.3; writing-mode: vertical-rl; rotate: 180deg; }
.home-page .feature.is-open h3 { writing-mode: horizontal-tb; rotate: none; font-size: 1.05rem; }
.home-page .feature p { position: relative; z-index: 1; display: none; margin: 0; max-width: 34ch; color: var(--powder-100); font-size: var(--t-sm); line-height: 1.55; }
.home-page .feature.is-open p { display: block; }
.home-page .feature.is-open { flex-shrink: 0; }
.home-page .hslide:not(.is-on) { display: none; }
.home-page .why-foot { color: var(--text-2); }
.home-page .tzm-figure { padding: 0.6rem; border-color: var(--line); background: var(--powder-200); }
/* A wide-ish box rather than a tall column: Tanzania is about as wide as
   it is tall, so a tall frame just adds empty sea above and below it. */
.home-page .tzm-osm-map { block-size: clamp(22rem, 46vw, 32rem); overflow: hidden;
                          border-radius: 6px; background: var(--powder-200); }
.home-page .tzm-osm-map[hidden] { display: none; }
.home-page .tzm-osm-map .maplibregl-ctrl-group { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 8px rgb(16 27 45 / 16%); }
.home-page .tzm-osm-map .maplibregl-ctrl-attrib { color: var(--navy-900); background: rgb(248 251 253 / 92%); }
/* MapLibre positions a marker by setting `position: absolute` and a
   transform on the element it is given. `.home-page .tzm-map-pin` is more
   specific than MapLibre's own `.maplibregl-marker`, so declaring
   `position: relative` here quietly won — every marker then offset from its
   place in normal document flow instead of from the map's origin, took up
   layout space, and pushed the ones after it further down. Five of the
   twenty-one, the whole coast and the islands, ended up rendering outside
   the map container.

   The children below are positioned against this element, so it does need to
   be a containing block — `absolute` is one, and it is what MapLibre wants. */
.home-page .tzm-map-pin.maplibregl-marker { position: absolute; }
.home-page .tzm-map-pin { position: relative; width: 40px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.home-page .tzm-map-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 50%; }
.home-page .tzm-map-pin .tzm-dot { position: absolute; inset: 9px auto auto 10px; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; background: var(--gold-300); box-shadow: 0 2px 8px rgb(16 27 45 / 38%); rotate: -45deg; transition: scale 180ms ease, background-color 180ms ease; }
.home-page .tzm-map-pin .tzm-label { position: absolute; left: 34px; top: 5px; z-index: 1; padding: 0.28rem 0.5rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 4px; background: var(--navy-900); color: #fff; font: 700 0.72rem/1.2 var(--font-ui); white-space: nowrap; fill: currentColor; stroke: none; opacity: 0; transition: opacity 160ms ease; }
.home-page .tzm-map-pin.is-hover .tzm-label,
.home-page .tzm-map-pin.is-active .tzm-label,
.home-page .tzm-map-pin:focus-visible .tzm-label { opacity: 1; }
.home-page .tzm-map-pin.is-hover .tzm-dot,
.home-page .tzm-map-pin.is-active .tzm-dot { scale: 1.22; background: var(--sun-200); }
.home-page .tzm[data-map-ready='true'] .tzm-legend { padding-inline: 0.5rem; }

/* Month-by-month calendar and visa handoff. */
.season-panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.85fr); gap: 1.25rem; align-items: stretch; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1); box-shadow: 0 16px 45px rgb(16 27 45 / 8%); }
.season-calendar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
.season-month { min-height: 5.2rem; display: grid; place-content: center; justify-items: center; gap: 0.55rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--navy-900); font: inherit; font-size: var(--t-sm); font-weight: 750; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, translate 180ms ease; }
.season-month:hover { translate: 0 -2px; border-color: var(--navy-700); }
.season-month:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.season-month.is-selected { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.season-marker { width: 1.4rem; height: 0.25rem; border-radius: 2px; background: var(--season-green); }
.season-month[data-season-month='2'] .season-marker,
.season-month[data-season-month='3'] .season-marker,
.season-month[data-season-month='4'] .season-marker { background: var(--season-rains); }
.season-month[data-season-month='10'] .season-marker { background: var(--season-short); }
.season-month[data-season-month='5'] .season-marker,
.season-month[data-season-month='6'] .season-marker,
.season-month[data-season-month='7'] .season-marker,
.season-month[data-season-month='8'] .season-marker,
.season-month[data-season-month='9'] .season-marker { background: var(--season-dry); }
.season-detail { align-self: center; padding: 0.5rem 0.7rem; }
.season-detail .eyebrow { margin: 0 0 0.5rem; color: var(--gold); }
.season-detail h3 { margin: 0 0 0.6rem; color: var(--navy-900); font-size: 1.5rem; }
.season-detail > p:not(.eyebrow) { margin: 0; color: var(--text-2); line-height: 1.65; }
.season-detail .season-note { margin-top: 1rem !important; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: var(--t-xs); }
.season-key { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.65rem 1.2rem; padding-top: 0.2rem; color: var(--text-2); font-size: var(--t-xs); }
.season-key span { display: flex; align-items: center; gap: 0.45rem; }
.season-key i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--season-dry); }
.season-key [data-season-key='green'] i { background: var(--season-green); }
.season-key [data-season-key='rains'] i { background: var(--season-rains); }
.season-key [data-season-key='short'] i { background: var(--season-short); }
.visa-panel { margin-top: 1.5rem; padding: clamp(1.2rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr); gap: 2rem; align-items: center; border-radius: 8px; color: #fff; background: var(--navy-900); }
.visa-panel .eyebrow { margin: 0 0 0.55rem; color: var(--gold-300); }
.visa-panel h3 { margin: 0 0 0.65rem; color: #fff; font-size: 1.4rem; }
.visa-panel p { margin: 0; color: var(--powder-200); line-height: 1.6; }
.visa-check { display: grid; gap: 0.55rem; }
.visa-check label { color: var(--powder-100); font-size: var(--t-sm); font-weight: 700; }
.visa-check .input { min-height: 48px; border-color: var(--line-strong); background: #fff; color: var(--navy-900); }
.visa-check [data-visa-result] { min-height: 2.8em; font-size: var(--t-xs); }
.visa-check .btn[aria-disabled='true'] { opacity: 0.52; pointer-events: none; }

/* Founder letter and image gallery. */
.home-page #founder { background: var(--navy-900); }
.home-page #founder::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(16 27 45 / 92%), rgb(16 27 45 / 73%) 72%, rgb(16 27 45 / 61%)); }
.home-page .founder-media img { opacity: 0.54; }
.home-page .founder-card { max-width: 50rem; padding: clamp(1rem, 2.5vw, 2.2rem); border-left: 3px solid var(--gold-300); background: rgb(16 27 45 / 68%); backdrop-filter: blur(3px); }
.home-page .founder-card .sec-title { margin-bottom: 1rem; }
.home-page .founder-sign b { color: #fff; }
.story-gallery { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.story-tabs { display: grid; align-content: start; gap: 0.5rem; }
.story-tabs button { min-height: 4.2rem; display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-1); color: var(--navy-900); text-align: left; font: inherit; font-weight: 800; cursor: pointer; }
.story-tabs button[aria-selected='true'] { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.story-tabs button span { font-size: var(--t-sm); }
.story-card { min-height: 25rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 48px rgb(16 27 45 / 12%); }
.story-card picture { min-height: 25rem; }
.story-card img { width: 100%; height: 100%; object-fit: cover; }
.story-card > div { align-self: center; padding: clamp(1.3rem, 4vw, 3rem); }
.story-card .eyebrow { margin: 0 0 0.6rem; color: var(--gold); }
.story-card h4 { margin: 0 0 0.75rem; color: var(--navy-900); font-size: 1.7rem; }
.story-card p:not(.eyebrow) { color: var(--text-2); line-height: 1.65; }
.story-card a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--navy-900); font-weight: 800; text-decoration-color: var(--gold-300); text-underline-offset: 0.25em; }
.story-card a svg { width: 1rem; height: 1rem; }
.story-invitation { margin-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--line); }
.story-invitation p { max-width: 55ch; margin: 0; color: var(--navy-800); }

/* Homepage package rail: photo-forward, without access or lock badges. */
.home-page .tours.is-rail > .tour {
  flex-basis: clamp(16rem, 78vw, 22rem);
  aspect-ratio: 3 / 4;
  min-height: 32rem;
  padding: 1rem;
  border: 1px solid rgb(191 212 226 / 80%);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  scroll-snap-align: center;
  box-shadow: 0 16px 32px rgb(16 27 45 / 16%);
  transform: scale(0.94);
  transition: transform 450ms cubic-bezier(.2,.8,.2,1), box-shadow 350ms ease;
}
/* THE SCRIM, and why it is this heavy.

   These cards put white text straight onto a photograph. Measured from the
   rendered pixels, the blurb on the sunset card was running at 2.5:1 and the
   category label at about 1.2:1 — a text-shadow is a nicety, not a substitute
   for a ground. Twelve cards means twelve unpredictable photographs, so the
   scrim has to be strong enough for the brightest one rather than tuned to
   the average.

   Dark at both ends because that is where the text is: category, title and
   route sit at the top of the card, blurb and price at the bottom. The middle
   stays open so the photograph is still a photograph.

   Measure after changing this, with tools/contrast-pixels.mjs and
   tools/measure-contrast.py. Do not judge it by eye on one card. */
.home-page .tours.is-rail > .tour > .tour-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgb(13 22 37 / 88%) 0%,
      rgb(13 22 37 / 62%) 26%,
      rgb(13 22 37 / 48%) 46%,
      rgb(13 22 37 / 78%) 72%,
      rgb(13 22 37 / 94%) 100%);
}

/* The un-centred cards are pushed back by dimming their PHOTOGRAPH, not the
   card. `opacity` on the card composites its text too, which is what put
   every price, blurb and chip on eleven of the twelve cards under the
   minimum in the first place. */
.home-page .tours.is-rail > .tour > .tour-media img {
  filter: brightness(0.82) saturate(0.92);
  transition: filter 350ms ease, scale 500ms ease;
}
.home-page .tours.is-rail > .tour.is-current > .tour-media img {
  filter: none;
}
.home-page .tours.is-rail > .tour.is-current { z-index: 2; transform: scale(1); box-shadow: 0 18px 42px rgb(16 27 45 / 20%); }
.home-page .tours.is-rail > .tour > .tour-media { inset: 0; }
.home-page .tours.is-rail > .tour > .tour-media img { transition: scale 500ms ease; }
.home-page .tours.is-rail > .tour.is-current > .tour-media img { scale: 1.045; }
.home-page .tour-offer,
.home-page .tour-flags,
.home-page .save-btn { display: none !important; }
.home-page .tours.is-rail > .tour .tour-head,
.home-page .tours.is-rail > .tour .tour-body { position: relative; z-index: 2; }
.home-page .tours.is-rail > .tour .tour-head { padding: 0.2rem 0.2rem 0; }
.home-page .tours.is-rail > .tour .tour-over h3 { color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 60%); font-size: 1.12rem; }
.home-page .tours.is-rail > .tour .tour-over p { color: var(--powder-200); text-shadow: 0 1px 8px rgb(0 0 0 / 65%); }
.home-page .tours.is-rail > .tour .tour-dur { background: rgb(255 255 255 / 92%); color: var(--navy-900); }
.home-page .tours.is-rail > .tour .tour-body { padding: 0.35rem 0.1rem 0; }
.home-page .tours.is-rail > .tour .tour-body > p {
  display: block;
  overflow: visible;
  color: var(--powder-200);
  text-shadow: 0 1px 8px rgb(0 0 0 / 70%);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.home-page .tours.is-rail > .tour .tour-foot { align-items: end; gap: 0.5rem; padding-top: 0.8rem; }
.home-page .tours.is-rail > .tour .price > span { color: var(--powder-200); text-shadow: 0 1px 8px rgb(0 0 0 / 70%); }
.home-page .tours.is-rail > .tour .price > b { color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 65%); }
.home-page .tours.is-rail > .tour .price > small { color: var(--powder-200); text-shadow: 0 1px 8px rgb(0 0 0 / 70%); }
.home-page .tours.is-rail > .tour .price > b { font-size: 1.35rem; }
.home-page .tours.is-rail > .tour .tour-go {
  border-color: rgb(255 255 255 / 72%);
  background: rgb(16 27 45 / 24%);
  color: #fff;
  backdrop-filter: blur(3px);
}
.home-page .tours.is-rail > .tour h3 a::before { z-index: 2; }
.home-page .offer-note { display: none; }
.home-page .rail-tabs { gap: 0.45rem; }
.home-page .rail-tabs .tab { border-color: var(--line); background: var(--surface-1); color: var(--navy-800); }
.home-page .rail-tabs .tab[aria-pressed='true'] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.home-page .rail-nav { border-color: var(--navy-900); background: var(--gold-300); color: var(--navy-900); }
.home-page .rail-wrap + .notice { display: none; }
.home-page #package-rail > .tour:nth-child(n + 13) { display: none; }

@media (width >= 56rem) {
  .home-page .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .season-calendar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (width < 56rem) {
  .season-panel,
  .visa-panel,
  .story-card { grid-template-columns: 1fr; }
  .season-key { grid-column: auto; }
  .story-gallery { grid-template-columns: 1fr; }
  .story-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-tabs button { min-height: 3.5rem; justify-content: center; gap: 0.35rem; padding: 0.55rem 0.35rem; font-size: var(--t-xs); }
  .story-card, .story-card picture { min-height: 0; }
  .story-card picture { aspect-ratio: 16 / 10; }
  .story-card img { display: block; }
  .story-invitation { align-items: flex-start; flex-direction: column; }
}
@media (width < 36rem) {
  .home-page .proof { grid-template-columns: 1fr; padding-inline: 0.75rem; }
  .home-page .proof-note { min-height: 3rem; }
  .home-page .feature { min-height: 21rem; }
  .home-page .feature.is-open { flex-basis: 15rem; }
  .home-page .tzm-osm-map { min-height: 24rem; }
  .season-calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .season-month { min-height: 4.6rem; }
  .story-tabs button { flex-direction: column; }
  .certificate-document { min-height: 15rem; margin: 0.75rem; padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .feature,
  .home-page .feature::before,
  .home-page .tours.is-rail > .tour,
  .home-page .tours.is-rail > .tour > .tour-media img { transition: none; }
  .home-page .feature.is-open::before,
  .home-page .tours.is-rail > .tour.is-current > .tour-media img { scale: 1; }
}

/* ---------------------------------------------------------------------------
   Section 13 — "See Our Stories" and the invitation
   ------------------------------------------------------------------------- */
.home-page .stories-sub {
  margin: 0 0 1rem;
  color: var(--navy-900);
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
}
.home-page .story-invitation {
  gap: 1.25rem 2rem;
  border-top: 1px solid var(--line);
}
.home-page .story-invitation h3 {
  margin: 0 0 0.3rem;
  color: var(--navy-900);
  font-size: var(--t-lg);
}
.home-page .story-invitation p { color: var(--text-2); }

/* The caveat under the 3D map. Shown by tz-map.js only once the map has
   actually drawn, because beside the flat SVG fallback it would be false. */
.home-page .tzm-caveat {
  display: flex;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sun-300);
  border-radius: 6px;
  background: var(--powder-100);
  color: var(--text-2);
  font-size: var(--t-xs);
  line-height: 1.6;
}
.home-page .tzm-caveat[hidden] { display: none; }
.home-page .tzm-caveat > svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
  color: var(--gold);
}
.home-page .tzm-caveat b { color: var(--navy-900); }

/* ---------------------------------------------------------------------------
   Section 14 — The Guide to Tanzania

   One lead piece and a numbered list, on navy. It is the last content band
   before the closing call to action, so it settles rather than competes.
   ------------------------------------------------------------------------- */
.home-page .guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
}
.home-page .guide-lead-link {
  display: grid;
  gap: 1rem;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.home-page .guide-lead-media {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 16 / 10;
}
.home-page .guide-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 600ms cubic-bezier(.2, .8, .2, 1);
}
.home-page .guide-lead-link:hover .guide-lead-media img,
.home-page .guide-lead-link:focus-visible .guide-lead-media img { scale: 1.04; }
.home-page .guide-lead-body { display: grid; gap: 0.5rem; }
.home-page .guide-tag {
  justify-self: start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--sun-300);
  color: var(--navy-900);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.home-page .guide-lead-h {
  color: #fff;
  font-size: var(--t-lg);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.home-page .guide-lead-link:hover .guide-lead-h,
.home-page .guide-lead-link:focus-visible .guide-lead-h {
  text-decoration: underline;
  text-decoration-color: var(--sun-300);
  text-underline-offset: 0.2em;
}
.home-page .guide-lead-p { color: var(--on-dark-2); line-height: 1.6; }
.home-page .guide-lead-m {
  color: var(--powder-400);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.home-page .guide-lead-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.home-page .guide-list { margin: 0; padding: 0; list-style: none; }
.home-page .guide-item + .guide-item { border-top: 1px solid rgb(255 255 255 / 14%); }
.home-page .guide-item > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 56px;
  padding: 1rem 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 200ms ease, padding-inline 200ms ease;
}
.home-page .guide-item > a:hover,
.home-page .guide-item > a:focus-visible {
  background: rgb(255 255 255 / 7%);
  padding-inline: 0.85rem 0.5rem;
}
.home-page .guide-item > a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  border-radius: 6px;
}
.home-page .guide-n {
  color: var(--sun-300);
  font-size: var(--t-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.home-page .guide-item-body { display: grid; gap: 0.2rem; }
.home-page .guide-item-h {
  color: #fff;
  font-weight: 750;
  line-height: 1.35;
}
.home-page .guide-item > a:hover .guide-item-h,
.home-page .guide-item > a:focus-visible .guide-item-h {
  text-decoration: underline;
  text-decoration-color: var(--sun-300);
  text-underline-offset: 0.2em;
}
.home-page .guide-item-m {
  color: var(--powder-400);
  font-size: var(--t-xs);
  font-weight: 650;
}
.home-page .guide-item-go {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--sun-300);
  transition: translate 200ms ease;
}
.home-page .guide-item > a:hover .guide-item-go,
.home-page .guide-item > a:focus-visible .guide-item-go { translate: 0.25em 0; }

@media (width < 56rem) {
  .home-page .guide-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .guide-lead-media img,
  .home-page .guide-item > a,
  .home-page .guide-item-go { transition: none; }
  .home-page .guide-lead-link:hover .guide-lead-media img { scale: 1; }
}


/* ---------------------------------------------------------------------------
   Section 8 — the discounted price on a rail card

   The card sits on a photograph, so every one of these needs its own shadow
   to stay readable rather than relying on the image behind it being dark.
   The payable figure is the biggest thing in the block; the struck original
   is deliberately quieter but still passes contrast, because a price nobody
   can read is not a disclosure.
   ------------------------------------------------------------------------- */
.home-page .tours.is-rail > .tour .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
}
.home-page .tours.is-rail > .tour .price > span:first-child,
.home-page .tours.is-rail > .tour .price > small { flex-basis: 100%; }

.home-page .price-was {
  color: #e6eef5;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: line-through;
  /* The strike is the whole point of the element, so it must not be left to
     the browser default on a dark photograph where a 1px line disappears. */
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sun-300);
  text-shadow: 0 1px 8px rgb(16 27 45 / 70%);
}
/* Specific enough to beat `.home-page .tours.is-rail > .tour .price > span`,
   which was repainting this chip's navy text pale blue — 1.5:1 on yellow. */
.home-page .tours.is-rail > .tour .price > .price-off,
.home-page .price-off {
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: var(--sun-300);
  color: var(--navy-900);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
}

.home-page .rail-price-note {
  max-width: 68ch;
  margin: 1.6rem auto 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sun-300);
  border-radius: 6px;
  background: var(--powder-100);
  color: var(--text-2);
  font-size: var(--t-xs);
  line-height: 1.6;
  text-align: center;
}
.home-page .rail-price-note a { color: var(--navy-900); font-weight: 700; }




/* The letter reads as one block without this: three paragraphs with no space
   between them, which is exactly the "comfortable line spacing" the brief
   asks for and the hardest thing to read at this length. */
.home-page .founder-card p + p { margin-top: 1rem; }
.home-page .founder-card p:not(.eyebrow):not(.founder-sign) {
  max-width: 62ch;
  line-height: 1.72;
  color: #eef4f9;
}
.home-page .founder-card .founder-sign { margin-top: 1.8rem; }