/* Map of Jesus's travels (/map). Site tokens from questions.css; two map-only tokens for water. */
:root{
  --water:      oklch(89% 0.025 225);
  --water-ink:  oklch(52% 0.05 230);
  --land:       var(--paper-2);
}
.embed .nav,.embed .map-hero{display:none}
.embed .map-sec{padding-top:16px}

.map-hero{padding:clamp(40px,6vw,88px) 0 clamp(28px,4vw,48px)}
.map-hero h1{max-width:14ch}
.map-sec{padding:clamp(20px,3vw,36px) 0 clamp(40px,6vw,72px)}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.chip{display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; min-height:48px; padding:6px 16px;
  border-radius:999px; border:1.5px solid var(--rule-2); background:var(--paper); color:var(--ink); cursor:pointer;
  font:500 14px/1.2 var(--f-body); text-align:left; transition:background .18s, color .18s, border-color .18s}
.chip .anc{font:600 10px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ox)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip[aria-pressed="true"] .anc{color:var(--gold)}
.chip:focus-visible,.place:focus-visible{outline:3px solid var(--gold-deep); outline-offset:2px}

.map-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:0; background:var(--paper);
  border:1px solid var(--rule); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-paper)}
.map-frame{position:relative; background:var(--paper-3); display:flex; justify-content:center; border-right:1px solid var(--rule)}
#map-svg{display:block; width:auto; max-width:100%; height:min(86vh,1000px); touch-action:manipulation}
.map-key{position:absolute; left:12px; bottom:10px; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; max-width:calc(100% - 24px);
  padding:6px 10px; border-radius:10px; background:color-mix(in oklch, var(--paper) 88%, transparent);
  font:500 10.5px/1.3 var(--f-mono); letter-spacing:.04em; color:var(--ink-2)}
.k-line{display:inline-block; width:22px; border-top:2px dashed var(--ox)}
.k-n{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--ox); color:var(--paper); font-weight:600}

/* map drawing */
.w{fill:var(--water)}
.lake{stroke:var(--water-ink); stroke-width:.8; vector-effect:non-scaling-stroke}
.land{fill:var(--land); stroke:var(--water-ink); stroke-width:1; vector-effect:non-scaling-stroke}
.hatch{stroke:var(--paper-3); stroke-width:1}
.hatch-fill{pointer-events:none; opacity:.0}
.river{fill:none; stroke:var(--water-ink); stroke-width:1.6; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.bound{fill:none; stroke:var(--rule-2); stroke-width:1.2; stroke-dasharray:2 5; stroke-linecap:round; vector-effect:non-scaling-stroke}
.region{font:600 calc(13px * var(--k, 1)) var(--f-mono); letter-spacing:.32em; fill:var(--muted); text-anchor:middle; opacity:.85}
.water{font:italic calc(17px * var(--k, 1)) var(--f-display); fill:var(--water-ink); text-anchor:middle}
.route{fill:none; stroke:var(--ox); stroke-width:1.6; stroke-dasharray:5 5; stroke-linecap:round; opacity:.22;
  vector-effect:non-scaling-stroke; transition:opacity .3s}
.route.on{opacity:.9; stroke-width:2.5}
#map-svg:not(.only) .route.on{opacity:.22; stroke-width:1.6}
.place .nm.minor{display:none}
#map-svg.zoomed .place .nm.minor{display:inline}
.place{cursor:pointer; transition:opacity .3s}
.place .hit{fill:transparent}
.place .dot{fill:var(--paper); stroke:var(--ox); stroke-width:2.5}
.place.has .dot{fill:var(--ox)}
.place .nm{font:500 13px var(--f-body); fill:var(--ink); paint-order:stroke; stroke:var(--paper); stroke-width:3.5px; stroke-linejoin:round}
.place .nums rect{fill:var(--ox)}
.place .nums text{font:600 10px var(--f-mono); fill:var(--paper); text-anchor:middle}
.place:hover .dot,.place.sel .dot{stroke:var(--gold-deep); stroke-width:3.5}
.place .nm.wlab{font:italic 15px var(--f-display); fill:var(--water-ink); stroke:var(--water)}
.place.sel .nm{font-weight:600}
.place.dim{opacity:.28}

/* panel */
.panel{padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:12px; outline:none; background:var(--paper)}
.panel h2{font-size:clamp(28px,3vw,38px)}
.panel p{margin:0; color:var(--ink-2); line-height:1.6}
.ref{font:500 12px/1.6 var(--f-mono); color:var(--muted); letter-spacing:.02em}
.tl{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px}
.tl .set{font:600 10.5px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.tl a{display:flex; gap:12px; align-items:flex-start; min-height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink); text-decoration:none; line-height:1.4; transition:border-color .18s, background .18s}
.tl a:hover{border-color:var(--ox); background:var(--paper-2)}
.tl .n{flex:none; display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border-radius:13px;
  background:var(--ox); color:var(--paper); font:600 12px var(--f-mono)}
.empty{font-style:italic}

/* text listing */
.map-list .wrap{display:grid; gap:28px; max-width:860px}
.map-list h3{display:grid; gap:6px; font-size:clamp(24px,2.6vw,32px); margin-bottom:10px}
.pls{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pls > li{border-top:1px solid var(--rule); padding-top:12px}
.pls .pl{font-weight:600}
.sources{border-top:1px solid var(--rule); padding-top:16px}
.sources summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font:600 11.5px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ox)}
.sources ul{padding-left:18px; display:grid; gap:10px; color:var(--ink-2); line-height:1.6; font-size:15px}

@media (max-width: 860px){
  .map-card{grid-template-columns:1fr}
  .map-frame{border-right:0; border-bottom:1px solid var(--rule)}
  #map-svg{width:100%; height:auto}
  .map-frame{flex-direction:column}
  .map-key{position:static; max-width:none; border-radius:0; background:var(--paper)}
  .chips{flex-wrap:nowrap; overflow-x:auto; margin:0 -20px 14px; padding:0 20px 4px; scroll-snap-type:x proximity; scrollbar-width:none}
  .chip{flex:none; scroll-snap-align:start}
}
@media (prefers-reduced-motion: reduce){
  .route,.place,.chip,.tl a{transition:none}
}