/* journey.css — the story map: sticky map stage + scrolling chapters, cartouche, day rail, route states, markers */
.journey { padding-block-end: 0; background-color: var(--atmos, var(--atmos-baghdad)); transition: background-color 1.4s var(--ease-io); }
.journey::before { background: radial-gradient(70% 50% at 30% 0%, rgba(184,146,79,.08), transparent 70%); }
.journey .section-head { margin-block-end: clamp(24px, 4vw, 56px); }

.jr { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: start; }
.jr__chapters { grid-column: 1; grid-row: 1; padding-inline: var(--gutter) clamp(24px, 3vw, 48px); padding-block: 8vh 30vh; position: relative; z-index: 2; }
.jr__stage-wrap { grid-column: 2; grid-row: 1; align-self: stretch; }
.jr__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--map-ground); border-inline-start: 1px solid var(--line); isolation: isolate; }

/* ---------------------------------------------------------------- chapters */
.jr__ch { min-height: 92svh; display: flex; align-items: center; padding-block: 8vh; }
.jr__ch--overview { min-height: 70svh; }
.jr__ch-card {
  display: grid; gap: 22px; width: 100%; max-width: 38rem; padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(18,16,16,.72), rgba(18,16,16,.55)); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: .42; transform: translateY(18px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), border-color 900ms;
}
.jr__ch.is-current .jr__ch-card { opacity: 1; transform: none; border-color: var(--line-2); }
.jr__ch-head { display: grid; gap: 10px; }
.jr__ch-day { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
html:lang(ar) .jr__ch-day { font-family: var(--f-text); letter-spacing: 0; text-transform: none; font-size: 1rem; font-weight: 500; }
.jr__ch-title { font-family: var(--f-display); font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; color: var(--ivory); font-weight: 500; text-wrap: balance; }
html:lang(ar) .jr__ch-title { font-weight: 700; line-height: 1.5; }
.jr__ch-route { font-family: var(--f-display); font-style: italic; font-size: 1.12rem; color: var(--gold-hi); }
html:lang(ar) .jr__ch-route { font-style: normal; }
.jr__ch-body { color: var(--ivory-2); line-height: 1.75; text-wrap: pretty; }
.jr__label { font: 500 .7rem/1.4 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-block-end: 10px; }
html:lang(ar) .jr__label { font-size: .9rem; letter-spacing: 0; text-transform: none; }
.jr__stops ul { display: grid; gap: 6px; }
.jr__stops li { position: relative; padding-inline-start: 20px; color: var(--ivory-2); font-size: .95rem; }
.jr__stops li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .72em; width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); }
.jr__nopins { margin-block-start: 10px; font-size: .82rem; color: var(--mute); font-style: italic; }
html:lang(ar) .jr__nopins { font-style: normal; }
.jr__outcome { padding: 16px 18px; border-inline-start: 2px solid var(--gold); background: rgba(184,146,79,.05); }
.jr__outcome-text { font-family: var(--f-display); font-size: 1.12rem; line-height: 1.55; color: var(--ivory); }
html:lang(ar) .jr__outcome-text { font-family: var(--f-read); line-height: 1.9; }
.jr__people { display: grid; gap: 10px; }
.jr__person { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); text-align: start; width: 100%; transition: border-color var(--d-1), background-color var(--d-1); }
button.jr__person:hover { border-color: var(--gold); background: rgba(184,146,79,.06); }
.jr__person > .icon { margin-inline-start: auto; color: var(--gold); width: 18px; height: 18px; }
.jr__person-face { width: 52px; height: 52px; border-radius: 50% 50% 4px 4px / 42% 42% 4px 4px; overflow: hidden; flex: none; border: 1px solid var(--line-2); }
.jr__person-face img { width: 100%; height: 100%; object-fit: cover; }
.jr__person-txt { display: grid; gap: 2px; }
.jr__person-name { color: var(--ivory); font-weight: 500; }
.jr__person-hint { font-size: .82rem; color: var(--mute); }
.jr__person--host { border-style: dashed; }
.jr__photos { display: grid; gap: 10px; }
.jr__photo-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr__photo { display: block; overflow: hidden; background: var(--char-2); aspect-ratio: 4 / 3; }
.jr__photos--n1 .jr__photo-grid { grid-template-columns: 1fr; }
.jr__photos--n1 .jr__photo, .jr__photo:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.jr__photos--n3 .jr__photo:first-child, .jr__photos--n1 .jr__photo { aspect-ratio: 16 / 10; }
.jr__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.jr__photo:hover img { transform: scale(1.05); }
.jr__links .media-grid { grid-template-columns: 1fr; }
.jr__voices { display: grid; gap: 10px; }

/* ---------------------------------------------------------------- stage chrome */
.jr__map { position: absolute; inset: 0; z-index: 0; background: var(--map-ground); }
.jr__map .leaflet-tile-pane { filter: sepia(.55) saturate(.9) brightness(.5) contrast(1.35) hue-rotate(-8deg); transition: opacity 600ms; }
.leaflet-container { background: var(--map-ground); font: inherit; outline: none; }
.jr__grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.jr__vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 180px rgba(0,0,0,.72); background: linear-gradient(90deg, rgba(10,9,8,.55), transparent 22%, transparent 78%, rgba(10,9,8,.35)); }
.jr__stage[data-atmos="karbala"] .jr__vignette { box-shadow: inset 0 0 200px rgba(40,6,10,.72); }
.jr__stage[data-atmos="najaf"] .jr__vignette { box-shadow: inset 0 0 190px rgba(28,18,6,.75); }
.no-basemap .leaflet-tile-pane { opacity: 0; }
.no-basemap .jr__map {
  background-color: var(--map-ground);
  background-image: linear-gradient(rgba(214,182,122,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(214,182,122,.06) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* neatline ticks (desktop) */
.jr__ticks { position: absolute; z-index: 3; pointer-events: none; font: 400 10px/1 var(--f-mono); letter-spacing: .04em; color: rgba(214,182,122,.55); }
.jr__ticks span { position: absolute; white-space: nowrap; direction: ltr; }
.jr__ticks--top { inset-inline: 0; inset-block-start: 12px; height: 14px; }
.jr__ticks--top span { transform: translateX(-50%); }
.jr__ticks--side { inset-block: 0; left: 10px; width: 80px; }
.jr__ticks--side span { transform: translateY(-50%); }
@media (max-width: 1023px) { .jr__ticks { display: none; } }

/* cartouche */
.jr__cart { position: absolute; z-index: 5; inset-block-start: calc(var(--nav-h) + 16px); inset-inline-start: 24px; max-width: min(440px, calc(100% - 48px)); padding: 5px;
  background: rgba(10,9,8,.84); border: 1px solid var(--line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jr__cart-in { border: 1px solid var(--line); padding: 14px 20px 16px; display: grid; gap: 6px; }
.jr__cart-kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
html:lang(ar) .jr__cart-kicker { font-family: var(--f-text); letter-spacing: 0; text-transform: none; font-size: .88rem; }
.jr__cart-title { font-family: var(--f-display); font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.15; color: var(--ivory); }
html:lang(ar) .jr__cart-title { font-weight: 700; line-height: 1.5; }
.jr__cart-alt { font-size: .95rem; color: var(--mute); }
.jr__cart-alt[lang="ar"] { font-family: var(--f-display-ar); font-size: 1.05rem; }
.jr__cart-alt[lang="en"] { font-family: var(--f-display-en); font-style: italic; }

/* progress line */
.jr__progress { position: absolute; z-index: 5; inset-block: calc(var(--nav-h) + 16px) 96px; inset-inline-end: 14px; width: 2px; background: var(--line); }
.jr__progress span { display: block; width: 100%; height: 100%; background: linear-gradient(var(--gold-hi), var(--gold)); transform-origin: top; transform: scaleY(0); transition: transform 300ms linear; }

/* day rail */
.jr__rail { position: absolute; z-index: 6; inset-block-end: 22px; inset-inline: 24px; display: flex; justify-content: center; }
.jr__rail ol { display: flex; gap: 4px; padding: 4px; background: rgba(10,9,8,.84); border: 1px solid var(--line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.jr__rail ol::-webkit-scrollbar { display: none; }
.jr__rail-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 8px; text-decoration: none; color: var(--ivory-2); font: 400 .9rem/1 var(--f-mono); transition: background-color var(--d-1), color var(--d-1); }
.jr__rail-link:hover { color: var(--ivory); background: rgba(184,146,79,.12); }
.jr__rail-link.is-active { background: var(--gold); color: var(--night); }

/* legend, attribution, explore, notice */
.jr__legend { position: absolute; z-index: 5; inset-block-end: 84px; inset-inline-start: 24px; display: grid; gap: 4px; pointer-events: none; max-width: calc(100% - 48px); }
.jr__legend-route { display: flex; align-items: center; gap: 10px; font-size: .74rem; color: var(--ivory-2); }
.jr__legend-swatch { width: 26px; height: 2px; background: var(--route-active); box-shadow: 0 0 8px var(--route-glow); }
.jr__attrib { font-size: .66rem; color: var(--mute); }
.jr__explore { position: absolute; z-index: 6; inset-block-start: calc(var(--nav-h) + 16px); inset-inline-end: 30px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px; font-size: .78rem; color: var(--ivory); background: rgba(10,9,8,.84); border: 1px solid var(--line-2); transition: border-color var(--d-1), color var(--d-1); }
.jr__explore:hover { border-color: var(--gold); color: var(--gold-hi); }
.jr__explore .icon { width: 16px; height: 16px; }
.jr__notice { position: absolute; z-index: 6; inset-block-end: 128px; inset-inline-start: 24px; max-width: 360px; font-size: .78rem; color: var(--gold-hi); background: rgba(10,9,8,.84); border: 1px solid var(--line-2); padding: 8px 12px; }
.is-exploring .jr__cart, .is-exploring .jr__legend { opacity: .35; transition: opacity var(--d-2); }
.leaflet-control-zoom { border: 1px solid var(--line-2) !important; border-radius: 0 !important; margin: calc(var(--nav-h) + 70px) 30px 0 0 !important; }
.leaflet-control-zoom a { background: rgba(10,9,8,.9) !important; color: var(--ivory) !important; border-radius: 0 !important; border-color: var(--line) !important; width: 38px !important; height: 38px !important; line-height: 36px !important; }

/* ---------------------------------------------------------------- route legs (state, not travel mode) */
.jr-leg { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 600ms, stroke-width 600ms, opacity 600ms; }
.jr-leg.is-upcoming { stroke: var(--route-upcoming); stroke-width: 1.6; stroke-dasharray: 2 7; }
.jr-leg.is-past { stroke: var(--route-past); stroke-width: 2.2; }
.jr-leg.is-active { stroke: var(--route-active); stroke-width: 3.2; }
.jr-leg-glow { fill: none; stroke: var(--route-glow); stroke-width: 10; stroke-linecap: round; opacity: 0; transition: opacity 600ms; }
.jr-leg-glow.is-on { opacity: 1; filter: blur(3px); }

/* ---------------------------------------------------------------- markers */
.jr-stop-wrap { background: none; border: 0; }
.jr-stop { position: relative; }
.jr-stop__dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--marker-core); border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(10,9,8,.7); transition: transform 500ms var(--ease-out), border-color 500ms, box-shadow 500ms; }
.jr-stop--city .jr-stop__dot { width: 10px; height: 10px; left: -5px; top: -5px; background: var(--gold); border-color: var(--night); }
.jr-stop__lbl { position: absolute; left: 14px; top: -14px; display: grid; gap: 1px; white-space: nowrap; pointer-events: none; text-shadow: 0 0 4px #0F0D0B, 0 0 8px #0F0D0B, 0 0 14px #0F0D0B; }
.jr-stop--flip .jr-stop__lbl { left: auto; right: 14px; text-align: right; }
.jr-stop__p { font-family: var(--f-display); font-size: 1rem; color: var(--map-label); line-height: 1.15; }
.jr-stop__p[lang="ar"] { font-family: var(--f-display-ar); font-size: 1.02rem; font-weight: 700; line-height: 1.4; }
.jr-stop__s { font-size: .74rem; color: var(--map-label-2); line-height: 1.3; }
.jr-stop__s[lang="ar"] { font-family: var(--f-display-ar); font-size: .86rem; }
.jr-stop__s[lang="en"] { font-family: var(--f-display-en); font-style: italic; }
.jr-stop--city .jr-stop__p { font-family: var(--f-text-en); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; }
.jr-stop--city .jr-stop__p[lang="ar"] { font-family: var(--f-display-ar); letter-spacing: 0; text-transform: none; font-size: 1.05rem; }
.jr-stop.is-active .jr-stop__dot { border-color: var(--gold-hi); transform: scale(1.35); box-shadow: 0 0 0 3px rgba(10,9,8,.7), 0 0 0 8px rgba(220,192,138,.18); }
.jr-stop.is-active .jr-stop__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--gold-hi); animation: stop-pulse 2.4s var(--ease-out) infinite; }
.jr-stop.is-active .jr-stop__p { color: #fff; }
@keyframes stop-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.z-city .jr-stop--shrine:not(.is-forced), .z-city .jr-stop--airport:not(.is-active) { display: none; }
.z-site .jr-stop--city { display: none; }
.z-city .jr-stop--airport.is-active, .z-city .jr-stop.is-forced { display: block; }

/* fallback SVG diagram */
.jr__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jr-svg-leg { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jr-svg-leg.is-upcoming { stroke: var(--route-upcoming); stroke-width: 1.6; stroke-dasharray: 2 7; }
.jr-svg-leg.is-past { stroke: var(--route-past); stroke-width: 2.2; }
.jr-svg-leg.is-active { stroke: var(--route-active); stroke-width: 3.2; }
.jr-svg-stop circle { fill: var(--marker-core); stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.jr-svg-stop text { fill: var(--map-label); font: 500 14px var(--f-display); paint-order: stroke; stroke: #0F0D0B; stroke-width: 4px; }
.jr-svg-stop.is-active circle { stroke: var(--gold-hi); fill: var(--gold); }

/* ---------------------------------------------------------------- phones & tablets: sticky map band + chapters */
@media (max-width: 1023px) {
  .jr { display: flex; flex-direction: column; }
  .jr__stage-wrap { order: -1; position: sticky; top: var(--nav-h); z-index: 3; height: 46svh; min-height: 280px; }
  .jr__stage { position: relative; height: 100%; border-inline-start: 0; border-block: 1px solid var(--line-2); }
  .jr__chapters { padding: 0 var(--gutter) 24vh; }
  .jr__ch { min-height: 0; padding-block: 36px; }
  .jr__ch--overview { min-height: 0; }
  .jr__ch-card { opacity: 1; transform: none; max-width: 40rem; margin-inline: auto; background: rgba(18,16,16,.8); }
  .jr__cart { inset-block-start: 10px; inset-inline-start: 10px; max-width: calc(100% - 120px); padding: 3px; }
  .jr__cart-in { padding: 8px 12px; gap: 2px; }
  .jr__cart-title { font-size: 1.1rem; }
  .jr__cart-alt { display: none; }
  .jr__cart-kicker { font-size: .62rem; }
  .jr__rail { inset-block-end: 8px; inset-inline: 8px; justify-content: flex-start; }
  .jr__rail-link { min-width: 36px; height: 36px; font-size: .82rem; }
  .jr__legend { inset-block-end: 56px; inset-inline-start: 10px; }
  .jr__legend-route { font-size: .66rem; }
  .jr__attrib { font-size: .6rem; }
  .jr__explore { inset-block-start: 10px; inset-inline-end: 10px; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .jr__explore span:not(.icon) { display: none; }
  .jr__cart { max-width: calc(100% - 74px); }
  .jr__progress { display: none; }
  .jr__notice { inset-block-end: 96px; inset-inline-start: 10px; max-width: calc(100% - 20px); }
  .jr-stop__lbl { top: -12px; }
  .jr-stop__p { font-size: .88rem; }
  .jr-stop__s { display: none; }
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) { .jr__stage-wrap { height: 60svh; min-height: 220px; } }
/* Leaflet panes are zero-size boxes: never constrain their SVG/canvas renderers (base.css sets max-width:100% on svg) */
.leaflet-container .leaflet-pane svg, .leaflet-container .leaflet-pane canvas, .leaflet-container .leaflet-pane img { max-width: none !important; max-height: none !important; }