/* Where's Andey?: a bordered world map and her face on every city */
.where{--w-ocean1:#f2f7fb;--w-ocean2:#e4eef6;position:relative}
.where-map{position:relative;aspect-ratio:1000/443;border-radius:var(--r,28px);overflow:hidden;touch-action:pan-y;overscroll-behavior:contain auto;cursor:grab;user-select:none;-webkit-user-select:none;
  background:radial-gradient(120% 90% at 50% 38%,var(--w-ocean1),var(--w-ocean2));box-shadow:0 0 0 1px var(--line)}
.where-map.dragging{cursor:grabbing}
.where-map canvas,.where-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.where-arcs path{fill:none;stroke:var(--rose);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--len) var(--len);transition:opacity .6s}
.where-arcs path.draw{animation:w-draw .7s cubic-bezier(.3,.7,.2,1) both}
@keyframes w-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

/* face pins: one per city, sized by zoom (--pin is set by script); the tip of the pin is the city */
.where-pins{position:absolute;inset:0;pointer-events:none;--pin:24px}
.wpin{position:absolute;left:0;top:0;width:var(--pin);height:calc(var(--pin) * 1.3);margin:calc(var(--pin) * -1.3) 0 0 calc(var(--pin) / -2);
  pointer-events:auto;cursor:pointer;transform:translate(var(--x),var(--y));will-change:transform;padding:0}
.wpin[hidden]{display:none}
.wpin img{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgba(125,29,43,.3));transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.wpin.pop img{animation:w-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes w-pop{from{transform:scale(.2) translateY(14px);opacity:0}}
.wpin:hover,.wpin:focus-visible,.wpin.hl,.wpin.now{z-index:200 !important}
.wpin:hover img,.wpin:focus-visible img,.wpin.hl img{transform:scale(1.55)}
.wpin.now img{transform:scale(1.6);animation:w-bob 1.6s ease-in-out infinite}
@keyframes w-bob{50%{transform:scale(1.6) translateY(-3px)}}
.wpin:focus-visible{outline:none}
.wpin:focus-visible img{outline:2px solid var(--rose-deep);outline-offset:2px;border-radius:50%}

/* counters and controls over the map */
.where-stats{position:absolute;z-index:250;left:16px;top:16px;display:flex;gap:8px;pointer-events:none}
.where-stats div{background:rgba(255,255,255,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;padding:9px 13px;box-shadow:0 8px 24px -16px rgba(34,26,27,.45)}
.where-stats b{display:block;font:400 28px/1 var(--serif);color:var(--rose-deep);font-variant-numeric:tabular-nums}
.where-stats span{font-size:11.5px;color:var(--muted);font-weight:500}
.where-ctl{position:absolute;z-index:250;right:14px;bottom:14px;display:flex;align-items:flex-end;gap:8px}
.where-ctl .zoom{display:flex;flex-direction:column;gap:6px}
.where-ctl button{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--line),0 6px 16px -10px rgba(34,26,27,.5);
  display:grid;place-items:center;color:var(--ink);font:500 18px/1 var(--sans);transition:transform .2s}
.where-ctl button:hover{transform:translateY(-1px)}
.where-ctl .reset{width:auto;padding:0 14px;border-radius:99px;font-size:12.5px;font-weight:600}
.where-ctl .reset[hidden]{display:none}
.where-ctl .play{background:var(--rose-deep);color:#fff;box-shadow:0 6px 14px -4px rgba(125,29,43,.5)}
.where-ctl .play:hover{background:#63151f}
.where-ctl .play svg{width:14px;height:14px;fill:currentColor}

/* tooltip card */
.where-tip{position:absolute;left:0;top:0;z-index:300;width:min(280px,calc(100% - 24px));padding:14px 16px 13px;border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 0 0 1px rgba(34,26,27,.06),0 24px 50px -22px rgba(34,26,27,.55);opacity:0;pointer-events:none;
  transform:translate(var(--tx),var(--ty)) translateY(6px) scale(.97);transform-origin:var(--ox,50%) var(--oy,100%);transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.where-tip.on{opacity:1;pointer-events:auto;transform:translate(var(--tx),var(--ty))}
.tip-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tip-flag{font-size:20px;line-height:1;align-self:center}
.tip-head b{font:400 22px/1.1 var(--serif);letter-spacing:-.01em}
.tip-zh{font-size:13px;color:var(--muted);font-weight:500}
.tip-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.tip-stats{display:flex;gap:14px;margin:11px 0 9px;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tip-stats span{font-size:12px;color:var(--muted)}
.tip-stats b{font:400 20px/1 var(--serif);color:var(--rose-deep);margin-right:4px;font-variant-numeric:tabular-nums}
.tip-visits{list-style:none;display:grid;gap:5px;font-size:13px}
.tip-visits li{display:flex;justify-content:space-between;gap:10px}
.tip-visits li span{color:var(--muted);font-size:12px;white-space:nowrap}
.tip-visits li.cur{color:var(--rose-deep);font-weight:600}
.tip-more{font-size:12px;color:var(--muted);margin-top:6px}
.tip-link{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--sky-ink,#1f7fc2)}
.tip-link:hover{text-decoration:underline;text-underline-offset:3px}

/* her Master's at Peking University: a chip on the map while the journey is in those years */
.where-era-chip{position:absolute;z-index:260;left:50%;top:16px;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:99px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px var(--line),0 10px 26px -16px rgba(34,26,27,.5);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translate(-50%,-8px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.where-era-chip.on{opacity:1;transform:translate(-50%,0)}
.where-era-chip img{width:22px;height:22px;border-radius:50%;flex:none}
.where-era-chip b{font:400 17px/1 var(--serif);color:var(--ink)}
.where-era-chip i{font-style:normal;font-size:12px;color:var(--muted)}

@media (max-width:820px){
  .where-map{aspect-ratio:1/.92}
  .where-stats{left:10px;top:10px;gap:6px}
  .where-stats div{padding:7px 10px;border-radius:12px}
  .where-stats b{font-size:21px}
  .where-stats span{font-size:10.5px}
  .where-era-chip{left:auto;right:10px;top:10px;padding:6px 10px 6px 7px;gap:6px;transform:translateY(-8px)}
  .where-era-chip.on{transform:none}
  .where-era-chip b{font-size:13px}
  .where-era-chip img{width:18px;height:18px}
  .where-era-chip i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wpin img,.where-tip{transition:none}
  .wpin.pop img,.wpin.now img,.where-arcs path.draw{animation:none}
}