/* Waypoint atlas: warm charcoal geography, antique gold destinations, quiet controls. */
.expo-map {
  --map-ink: #12110e;
  --map-land: #34312a;
  --map-gold: #d6b578;
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  width: 100%;
  max-width: 1400px;
  height: auto;
  margin: 0 auto 44px;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  background: var(--map-ink);
  border: 1px solid #504634;
  border-radius: 0;
  box-shadow: inset 0 0 0 4px #c5a36505;
}
.expo-map[hidden] { display: none; }
.expo-map-svg {
  position: relative;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: var(--map-aspect, 1040 / 544);
  min-height: 0;
  display: block;
  cursor: grab;
  /* The map sits in the middle of a very long page, so a finger that sets off
     up or down is scrolling past it: the browser keeps vertical panning and
     scrolls natively. A drag that starts sideways, and any two-finger pinch or
     pan, belongs to the map; js/homepage-map.js stops the page from claiming
     a gesture once a second finger is down. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.expo-map-svg.dragging { cursor: grabbing; }
.expo-map-svg:focus-visible { outline: 2px solid var(--map-gold); outline-offset: -4px; }
.expo-map-sea { fill: url(#expoMapSea); }
.expo-map-grat { fill: none; stroke: #b89b5e14; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.expo-map-land { fill: var(--map-land); stroke: #867650; stroke-width: .7px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.expo-map-isle-rim { fill: #867650; stroke: #867650; stroke-width: 3.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.expo-map-isle { fill: var(--map-land); stroke: var(--map-land); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.expo-map-borders { fill: none; stroke: #b39d6b38; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.expo-map-edge { fill: none; stroke: #9981503d; stroke-width: .75px; vector-effect: non-scaling-stroke; }
.expo-map-water { fill: #a99d83; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 14px; letter-spacing: .08em; text-anchor: middle; pointer-events: none; }
.expo-map-water.small { font-size: 12px; }
.expo-map-name { fill: #f1e7d3; font-family: 'Source Sans 3', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #29261f; stroke-width: 3px; stroke-linejoin: round; }
/* No SVG filters on the moving layer: a pinch should only move geometry. */
.expo-pin { cursor: pointer; }
.expo-pin-halo { fill: var(--map-gold); opacity: .10; }
.expo-pin-ring { fill: #191711; stroke: var(--map-gold); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.expo-pin-core { fill: #e7cc94; }
.expo-pin-disc { fill: #191711; stroke: var(--map-gold); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.expo-pin-n { fill: #e7cc94; font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.expo-pin:hover .expo-pin-disc, .expo-pin.on .expo-pin-disc { fill: #342b1d; }
.expo-pin:hover .expo-pin-ring, .expo-pin.on .expo-pin-ring { stroke: #fff7e5; }
.expo-pin:hover .expo-pin-halo, .expo-pin.on .expo-pin-halo { opacity: .3; }
.expo-pin:focus { outline: none; }
.expo-pin:focus-visible .expo-pin-disc, .expo-pin:focus-visible .expo-pin-ring { stroke: #fff; stroke-width: 3px; }
.expo-pin-ghost { fill: #aa9772; opacity: .4; pointer-events: none; }
/* The chosen expedition's route. Widths and dashes are set by the viewer in
   map units, so they stay the same on screen at every zoom. */
.expo-map-route { pointer-events: none; }
.expo-map-route-casing path { fill: none; stroke: #12110e; stroke-opacity: .72; stroke-linecap: round; stroke-linejoin: round; }
.expo-map-leg { fill: none; stroke: #ecd29c; stroke-linejoin: round; }
.expo-map-leg.day { stroke: #cdb07a; }
.expo-map-stop circle { fill: #ecd29c; stroke: #12110e; stroke-width: 1.5px; transform-box: fill-box; transform-origin: center; }
.expo-map-stop.k1 circle { fill: #12110e; stroke: #ecd29c; stroke-width: 1.2px; }
.expo-map-stop.k2 circle { fill: #cdb07a; }
/* With a route drawn the other pins step back, and the chosen pin gives up its
   glow to the line. */
.expo-pin { transition: opacity .2s ease; }
.expo-map.has-route .expo-pin:not(.on) { opacity: .38; }
.expo-map.has-route .expo-pin.on .expo-pin-halo { opacity: 0; }
.expo-map-label {
  position: absolute; top: 18px; left: 20px; margin: 0;
  max-width: calc(100% - 40px); padding: 0;
  border: 0;
  background: none; color: #cfb786;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .75rem; font-weight: 600; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; text-shadow: 0 1px 5px #000;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.expo-map.is-exploring .expo-map-label { opacity: 0; visibility: hidden; transform: translateY(-5px); }
.expo-map-toolbar {
  position: relative; grid-row: 2; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; background: #12110e; border-top: 1px solid #b89b5e12;
}
.expo-map-hint { margin: 0; font-size: .875rem; line-height: 1.35; color: #bfb5a2; pointer-events: none; }
.expo-map-hint.flash { color: #f3dbab; }
.expo-map-hint em { font-style: normal; color: #f3dbab; }
/* Takes the hint's place once the map is explored: narrows the cards below to
   the expeditions in view. */
.expo-map-place {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0;
  padding: 0 16px; background: var(--map-gold); border: 1px solid var(--map-gold); border-radius: 0;
  color: #12110e; font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation; transition: background .15s ease;
}
.expo-map-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expo-map-place i { font-style: normal; }
/* The toolbar may never be wider than the plate: with the button's words at
   their full length it pushed the reset button off a 320px phone. */
.expo-map-toolbar { min-width: 0; }
@media (max-width: 380px) {
  .expo-map-place { gap: 6px; padding: 0 12px; }
  .expo-map-place-these { display: none; }
}
@media (max-width: 340px) {
  .expo-map-place svg { display: none; }
}
.expo-map-place svg { flex: 0 0 auto; width: 16px; height: 16px; }
@media (hover: hover) { .expo-map-place:hover { background: #ecd29c; } }
.expo-map-place:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.expo-map-place[hidden], .expo-map-hint[hidden] { display: none; }
.expo-map-zoom { display: flex; flex: 0 0 auto; gap: 5px; }
.expo-map-zoom button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  background: #191711; border: 1px solid #6e5e3d; border-radius: 0;
  color: #f9e7c4; cursor: pointer; touch-action: manipulation;
  transition: background .15s ease, color .15s ease;
}
@media (hover: hover) { .expo-map-zoom button:hover { background: var(--map-gold); color: #12110e; border-color: var(--map-gold); } }
.expo-map-zoom button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.expo-map-zoom button[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) { .expo-map-zoom button[disabled]:hover { background: #191711; color: #f9e7c4; border-color: #6e5e3d; } }
.expo-map-zoom svg { width: 19px; height: 19px; }
.expo-map-tip, .expo-map-list {
  position: absolute; z-index: 3; width: 290px; max-width: calc(100% - 24px);
  display: flex; flex-direction: column;
  background: #191611; border: 1px solid #9d865e; border-radius: 0;
  box-shadow: 0 12px 40px #0008; text-decoration: none;
  opacity: 0; transform: translateY(5px);
  transition: opacity .15s ease, transform .15s ease;
}
.expo-map-tip { pointer-events: none; }
.expo-map-tip.open, .expo-map-list.open { opacity: 1; transform: none; pointer-events: auto; }
.expo-map-tip[hidden], .expo-map-list[hidden] { display: none; }
.expo-map-tip img { display: block; width: 100%; height: 116px; object-fit: cover; background: #29261f; border-radius: 0; }
.expo-map-tip-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.expo-map-tip-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-weight: 500; line-height: 1.25; color: #fff; }
.expo-map-tip-sub { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #d6b578; font-size: .875rem; line-height: 1.4; }
.expo-map-tip-meta { color: #c9c1b1; font-size: .875rem; line-height: 1.4; }
.expo-map-tip-meta .separator { padding: 0 4px; }
.expo-map-tip-go { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #d6b578; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.expo-map-tip-go svg { width: 16px; height: 16px; }
.expo-map-tip:focus-visible, .expo-map-list-item:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.expo-map-list { width: 320px; max-height: min(340px, calc(100% - 88px)); overflow-y: auto; overscroll-behavior: contain; }
.expo-map-list-head { margin: 0; padding: 14px 16px; border-bottom: 1px solid #504634; color: #d6b578; font-size: .875rem; font-weight: 600; }
.expo-map-list-item { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 64px; text-decoration: none; border-bottom: 1px solid #504634; }
.expo-map-list-item:last-child { border-bottom: 0; }
.expo-map-list-item:hover { background: #2c261c; }
.expo-map-list-item img { flex: 0 0 auto; width: 64px; height: 54px; object-fit: cover; border-radius: 3px; background: #29261f; }
.expo-map-list-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.expo-map-list-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; line-height: 1.3; color: #fff; }
.expo-map-list-sub { font-size: .875rem; line-height: 1.35; color: #d6b578; }
.expo-map-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
  .expo-map { margin-bottom: 36px; }
}
@media (max-width: 700px) {
  .expo-map { margin-bottom: 26px; }
  .expo-map-label { top: 12px; left: 12px; max-width: calc(100% - 24px); }
  .expo-map-toolbar { padding: 8px 10px; gap: 8px; }
  .expo-map-hint { font-size: .8125rem; max-width: 140px; }
  .expo-map-zoom { gap: 4px; }
  .expo-map-tip { width: calc(100% - 24px); max-height: calc(100% - 88px); overflow-y: auto; }
  .expo-map-tip img { height: 100px; }
  .expo-map-tip-body { padding: 12px 14px; }
}
/* A narrow plate brings the pins up to its top edge, and the eyebrow, laid
   over the plate, sat on them: in the default view at every width up to 600px
   and in most continent views up to 768px. Up to 900px it takes its own strip
   above the plate, where it can stay while the map is explored.
   js/homepage-map.js places the preview card from the plate's own top. */
@media (max-width: 900px) {
  .expo-map { grid-template-rows: auto auto auto; }
  .expo-map-label, .expo-map.is-exploring .expo-map-label {
    position: static; grid-row: 1;
    max-width: none; padding: 12px 16px 6px;
    opacity: 1; visibility: visible; transform: none;
  }
  .expo-map-svg { grid-row: 2; }
  .expo-map-toolbar { grid-row: 3; }
  /* the strip is part of the frame, so the panels leave room for it too */
  .expo-map-list { max-height: min(340px, calc(100% - 120px)); }
}
@media (max-width: 700px) {
  .expo-map-label, .expo-map.is-exploring .expo-map-label { padding: 10px 12px 4px; }
  .expo-map-tip { max-height: calc(100% - 120px); }
}
/* A phone's plate is 150 to 230px tall, and the preview, a photo above four
   lines, was cut off inside it: mid-name at 320px, mid-subtitle at 390px,
   "View expedition" never in sight. On a phone it is a row like the cluster
   list's, a thumbnail beside the words; the smallest keep name, days and
   price. Up to 760px the plate is under 430px tall, and the card laid over it
   hid the route it opened with, so there it is docked under the plate too. */
@media (max-width: 760px) {
  .expo-map-tip { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
  .expo-map-tip img { flex: 0 0 auto; width: 76px; height: 64px; border-radius: 3px; }
  .expo-map-tip-body { min-width: 0; gap: 3px; padding: 0; }
  .expo-map-tip-name { font-size: 1.05rem; }
  .expo-map-tip-sub, .expo-map-tip-meta { font-size: .8125rem; }
  .expo-map-tip-meta { text-wrap: balance; }
  .expo-map-tip-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .expo-map-tip-go { margin-top: 3px; font-size: .6875rem; }
  /* A row of its own between the plate and the toolbar, so the whole plate is
     left to the route. */
  .expo-map { grid-template-rows: auto auto auto auto; }
  .expo-map-tip {
    position: static; grid-row: 3; width: auto; max-width: none; max-height: none; overflow: visible;
    border: 0; border-top: 1px solid #504634; box-shadow: none;
  }
  .expo-map-toolbar { grid-row: 4; }
}
@media (max-width: 380px) {
  .expo-map-tip-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .expo-map-label, .expo-map-tip, .expo-map-list, .expo-map-zoom button, .expo-pin { transition: none; }
}
html.wpj-map-visible .wpj-msg-cta { opacity: 0; visibility: hidden; pointer-events: none; }
/* The count row's Show all, which js/homepage.js adds while the grid is
   narrowed to the part of the world the map is showing. Styled here, with the
   rest of what the map adds to the page. */
.expo-place-clear {
  margin: 0 auto 0 14px; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid #d6b57888;
  color: #d6b578; font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; min-height: 32px;
}
@media (hover: hover) { .expo-place-clear:hover { color: #f3dbab; border-bottom-color: #f3dbab; } }
.expo-place-clear:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.expo-place-clear[hidden] { display: none; }
/* The phone's row of cards under the plate: every expedition in view, west to
   east, one swipe apart. It takes the docked preview's row, and the preview is
   never opened while it is there (js/homepage-map.js). */
.expo-map-strip { display: none; }
@media (max-width: 700px) {
  .expo-map-strip {
    position: relative; grid-row: 3; display: flex; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 12px;
    padding: 10px 12px; background: #16140f; border-top: 1px solid #504634; scrollbar-width: none;
  }
  .expo-map-strip[hidden] { display: none; }
  .expo-map-strip::-webkit-scrollbar { display: none; }
  /* Room after the last card for it to come round to the start like the rest. */
  .expo-map-strip::after { content: ''; flex: 0 0 calc(100% - min(78%, 300px) - 10px); }
  .expo-map-strip-card {
    flex: 0 0 min(78%, 300px); display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 68px;
    padding: 8px; background: #1c1a14; border: 1px solid #3a3326; color: inherit; text-decoration: none;
    scroll-snap-align: start; transition: border-color .15s ease, background .15s ease;
  }
  .expo-map-strip-card.on { background: #231f16; border-color: var(--map-gold); }
  .expo-map-strip-card:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .expo-map-strip-card img { flex: 0 0 auto; width: 64px; height: 52px; object-fit: cover; border-radius: 2px; background: #2a261d; }
  .expo-map-strip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .expo-map-strip-name {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    color: #f5ede0; font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; line-height: 1.2;
  }
  .expo-map-strip-meta { color: #c9c1b1; font-size: .75rem; line-height: 1.35; }
  .expo-map-strip-meta .separator { padding: 0 3px; }
  .expo-map-strip-none { margin: 0; padding: 14px 4px; color: #bfb5a2; font-size: .8125rem; }
  @media (prefers-reduced-motion: reduce) { .expo-map-strip-card { transition: none; } }
}