/* Western Arabia, one measured movement south. Real projected city positions
   and Natural Earth relief remain unchanged; the connection is indicative. */
#journey.map-chapter { height: 290svh; position: relative; background: var(--campaign-charcoal, #171717); color: #fff; }
#journey .map-stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; isolation: isolate; background: var(--campaign-charcoal, #171717); color: #fff; }
.map-camera {
  position: absolute; left: var(--map-center-x, 64%); top: var(--map-center-y, 54%);
  width: var(--map-width, min(104vw, 134svh)); aspect-ratio: 900 / 870;
  transform: translate(-50%, -50%) translate3d(var(--map-camera-x, 0px), var(--map-camera-y, 0px), 0) scale(var(--map-camera-scale, 1.015));
  transform-origin: 53.6657% 69.5641%; opacity: var(--map-opacity, .62); will-change: transform, opacity;
}
.map-terrain, .map-route { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; }
.map-terrain { mask-image: radial-gradient(ellipse at 53% 50%, #000 38%, rgba(0,0,0,.9) 65%, transparent 82%); }
.map-route path { stroke-linecap: round; vector-effect: none; }
.map-route-base { stroke: #fff; stroke-opacity: .25; stroke-width: var(--map-stroke-unit, 1); stroke-dasharray: calc(1.034 * var(--map-stroke-unit, 1)) calc(6.204 * var(--map-stroke-unit, 1)); }
/* Dashes and endpoints use the same native SVG units. At completion the path
   is solid, so the fully connected state cannot inherit a viewport-sized gap. */
.map-route-progress { stroke: var(--hdf-yellow, #FED545); stroke-width: calc(1.8 * var(--map-stroke-unit, 1)); stroke-dasharray: var(--map-route-dasharray, 344.648380419 344.648380419); stroke-dashoffset: calc(var(--map-route-offset, 1) * var(--map-route-length, 344.648380419)); opacity: var(--map-route-opacity, 0); }
.map-route circle { fill: var(--campaign-charcoal, #171717); stroke: var(--hdf-yellow, #FED545); stroke-opacity: .75; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* The rings must not mask the route: it connects visibly to each yellow core.
   Specificity keeps the campaign palette's general circle fill from restoring
   the old charcoal disk that made the line appear to stop short. */
.map-route :is(.map-origin, .map-destination) > circle:first-child { fill: none; }
.map-route .map-marker-core { fill: var(--hdf-yellow, #FED545); stroke: none; }
.map-origin { opacity: var(--map-origin-opacity, 1); }
.map-destination { opacity: var(--map-destination-opacity, .2); }
.map-destination > circle:first-child { stroke-opacity: var(--map-destination-ring, 0); }
.map-location {
  position: absolute; display: flex; align-items: center; gap: 12px; padding-left: 25px;
  transform: translateY(-50%) scale(calc(1 / var(--map-camera-scale, 1)));
  transform-origin: 0 50%; white-space: nowrap; color: #fff;
  text-shadow: 0 2px 10px var(--campaign-charcoal, #171717);
}
.map-location strong { display: block;   margin: 0 0 7px; }
.map-location-date {   color: var(--hdf-yellow, #FED545); }
.map-location-madinah { left: 51.3163%; top: 31.6428%; opacity: var(--map-origin-opacity, 1); }
.map-location-makkah { left: 53.6657%; top: 69.5641%; opacity: var(--map-destination-label-opacity, 0); }
.map-architecture { display: block; flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; }
.map-edge-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map-introduction, .map-arrival-line { position: absolute; z-index: 2; left: var(--pad); top: max(124px, 29%); width: min(31vw, 410px); pointer-events: none; }
.map-introduction { opacity: var(--map-intro-opacity, 1); }
#journey .map-introduction h2, .map-arrival-line {   color: #fff;  margin: 0; }
.map-introduction > p:last-child {  color: rgba(255,255,255,.76); margin-top: 24px; }
.map-arrival-line { opacity: var(--map-arrival-opacity, 0); }
.map-departure-shade { position: absolute; inset: 0; z-index: 4; background: var(--campaign-charcoal, #171717); opacity: var(--map-departure-opacity, 0); pointer-events: none; }

@media (orientation: portrait), (max-width: 700px) and (min-height: 560px) {
  #journey.map-chapter { height: 270svh; }
  .map-camera { left: var(--map-center-x, 36%); top: var(--map-center-y, 60%); width: var(--map-width, 98svh); }
  .map-introduction, .map-arrival-line { top: 113px; width: min(80vw, 370px); }
  .map-introduction > p:last-child { margin-top: 16px;   }
  .map-introduction > p:last-child br { display: none; }
  .map-location { gap: 9px; padding-left: 19px; }
  .map-location strong {  margin-bottom: 6px; }
  .map-architecture { flex-basis: 32px; width: 32px; height: 32px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .map-introduction, .map-arrival-line { top: 112px; width: 30vw; }
  .map-introduction > p:last-child { margin-top: 15px;  }
  .map-location { gap: 9px; padding-left: 20px; }
  .map-location strong {  margin-bottom: 5px; }
  .map-architecture { flex-basis: 32px; width: 32px; height: 32px; }
}
/* Without scripting, the complete route remains visible in the same geography. */
html:not(.js) #journey.map-chapter { height: auto!important; }
html:not(.js) #journey .map-stage { position: relative; height: 840px; min-height: 0; }
html:not(.js) .map-camera { opacity: 1; left: 62%; top: 53%; width: min(95vw, 980px); transform: translate(-50%, -50%); }
html:not(.js) .map-route-progress { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
html:not(.js) .map-origin, html:not(.js) .map-destination, html:not(.js) .map-location, html:not(.js) .map-introduction { opacity: 1; }
html:not(.js) .map-location { transform: translateY(-50%); }
html:not(.js) .map-destination > circle:first-child { stroke-opacity: .75; }
html:not(.js) .map-arrival-line, html:not(.js) .map-departure-shade { display: none; }
@media (orientation: portrait), (max-width: 700px) {
  html:not(.js) #journey .map-stage { height: 800px; }
  html:not(.js) .map-camera { left: 35%; top: 62%; width: 650px; }
  html:not(.js) .map-introduction { top: 100px; width: 80%; }
}
@media (prefers-reduced-motion: reduce), print {
  #journey.map-chapter { height: auto!important; }
  #journey .map-stage { position: relative!important; height: 840px; min-height: 0; }
  .map-camera { opacity: 1!important; left: 62%; top: 53%; width: min(95vw, 980px); transform: translate(-50%, -50%)!important; }
  .map-route-progress { stroke-dasharray: none!important; stroke-dashoffset: 0!important; opacity: 1!important; }
  .map-origin, .map-destination, .map-location, .map-introduction { opacity: 1!important; }
  .map-location { transform: translateY(-50%); }
  .map-destination > circle:first-child { stroke-opacity: .75!important; }
  .map-arrival-line, .map-departure-shade { display: none!important; }
}
@media (prefers-reduced-motion: reduce) and (orientation: portrait), (prefers-reduced-motion: reduce) and (max-width: 700px) {
  #journey .map-stage { height: 800px; }
  .map-camera { left: 35%; top: 62%; width: 650px; }
  .map-introduction { top: 100px; width: 80%; }
}

/* Compact portrait copy stays above the northern destination throughout the pan. */
@media (max-height:670px) and (orientation:portrait) {
  .map-introduction,.map-arrival-line { top: 96px; width: calc(100% - 2 * var(--pad)); }
  .map-introduction > p:last-child { margin-top: 10px; }
}
@media (max-height:600px) and (orientation:portrait) {
  .map-introduction,.map-arrival-line { top: 88px; }
  .map-introduction > p:last-child { margin-top: 6px; }
}