/* THE VENUE MAP (venue-map.js). Pins and popups as the town page's map
   (full-town.css .la-pin), and the venue itself as a larger pin. */
.vmapx{position:relative;aspect-ratio:4/3;background:var(--bg-2) center/cover no-repeat;overflow:hidden}
.vmapx #vMap{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.vmapx.ready #vMap{opacity:1}
.vmapx{border:1px solid var(--line-strong)}
.vmapx:fullscreen{aspect-ratio:auto;border:0;background:var(--bg)}
.vmapx:-webkit-full-screen{aspect-ratio:auto;border:0;background:var(--bg)}
.vmapx.maplibregl-pseudo-fullscreen{aspect-ratio:auto;border:0;position:fixed!important;inset:0;width:100%!important;height:100%!important;z-index:200}
/* The key under the map, as the hotel page's. */
.vmapkey{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 0;font:400 12.5px 'Inter',sans-serif;color:var(--muted)}
.vmapkey i{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-strong);background:var(--gold)}
.vmapkey i.p{background:var(--ink);margin-left:12px}
html.vmapx-lock,html.vmapx-lock body{overflow:hidden}
.la-pin{width:28px;height:28px;border-radius:50%;padding:0;border:2px solid #fff;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.la-pin svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.la-pin.is-stay{background:#fff;color:var(--ink);border-color:var(--ink)}
.la-pin.is-here{width:40px;height:40px;background:var(--gold);border-width:2px;box-shadow:0 0 0 5px rgba(156,111,18,.22),0 2px 8px rgba(0,0,0,.35);z-index:4}
.la-pin.is-here svg{width:20px;height:20px;stroke:#fff}
.la-pin:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.maplibregl-popup-content{font:400 13px/1.4 'Inter',sans-serif;border-radius:2px;padding:12px 14px}
.maplibregl-popup-content b{display:block;font:800 14px/1.2 'Archivo',sans-serif;text-transform:uppercase;color:var(--ink)}
.vmapx .maplibregl-popup{z-index:10}
.maplibregl-popup-content .la-popmeta{display:block;color:var(--muted);margin-top:3px}
.maplibregl-popup-content .la-popgo{display:table;margin-top:9px;padding:8px 14px;border-radius:999px;background:#0E0E10;color:#fff;font:600 12.5px/1 'Inter',sans-serif;text-decoration:none}
.maplibregl-popup-content .la-poplink{color:var(--ink);text-decoration:none;display:block}
.maplibregl-popup-content .la-poplink:hover b{text-decoration:underline}
/* The rail is sticky, which makes it a stacking context: lift it while the
   map is open, so the full-screen map covers the nav. */
html.vmapx-lock .vlocator{z-index:250}
/* THE FAMILY BAR (venue-map.js), the town page's own (full-town.css .mn-fam),
   top left. Only in full screen: the column's map is too small for it. */
  .mn-fam{position:absolute;right:10px;bottom:10px;left:10px;z-index:3;display:flex;
    justify-content:flex-end;pointer-events:none}
  .mn-fam ul{list-style:none;margin:-34px 0 0;padding:34px 2px 2px;display:flex;gap:7px;
    pointer-events:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .mn-fam ul::-webkit-scrollbar{display:none}
  .mn-fam li{position:relative;flex:none;pointer-events:auto}
  .mn-fam button{width:29px;height:29px;border-radius:50%;padding:0;display:grid;place-items:center;
    cursor:pointer;background:#fff;border:0;color:var(--ink);
    box-shadow:0 1px 4px rgba(0,0,0,.18);transition:color .15s,background .15s}
  .mn-fam svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .mn-fam button:hover{background:#f2f2f2}
  .mn-fam button[aria-pressed="true"]{background:var(--ink);color:#fff}
  .mn-fam button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .mn-fam .nm{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
    z-index:2;white-space:nowrap;pointer-events:none;font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.82);
    border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:4px 10px;opacity:0;
    transition:opacity .15s,transform .15s}
  .mn-fam li:hover .nm,.mn-fam li:focus-within .nm,.mn-fam li.say .nm{opacity:1;transform:translate(-50%,0)}
  /* the last mark's pill turns inward, or it runs off the map's right edge */
  .mn-fam li:last-child .nm{left:auto;right:0;transform:translate(0,4px)}
  .mn-fam li:last-child:hover .nm,.mn-fam li:last-child.say .nm,
  .mn-fam li:last-child:focus-within .nm{transform:none}
  /* A PHONE: the row is CENTRED along the bottom edge (the credit is top left
     at every width, out of its way). A row too wide for the map
     fills it and scrolls sideways from its first mark (the ul is centred, not
     its contents, so nothing is clipped on the left). */
  @media(max-width:760px){
    .mn-fam{left:0;right:0;bottom:10px;justify-content:center}
    .mn-fam ul{padding-left:10px;padding-right:10px;-webkit-overflow-scrolling:touch}
    .mn-fam li:first-child .nm{left:0;transform:translate(0,4px)}
    .mn-fam li:first-child:hover .nm,.mn-fam li:first-child.say .nm,
    .mn-fam li:first-child:focus-within .nm{transform:none}
  }
  @media(prefers-reduced-motion:reduce){.mn-fam .nm{transition:none}}
.vmapx .mn-fam{top:10px;bottom:auto;left:10px;right:60px;justify-content:flex-start}
.vmapx .mn-fam ul{margin:0 0 -34px;padding:2px 2px 34px}
.vmapx .mn-fam .nm{bottom:auto;top:calc(100% + 8px)}
.vmapx .mn-fam li:first-child .nm{left:0;transform:translate(0,-4px)}
.vmapx .mn-fam li:first-child:hover .nm,.vmapx .mn-fam li:first-child.say .nm,.vmapx .mn-fam li:first-child:focus-within .nm{transform:none}
.vmapx .mn-fam{display:none}
.vmapx:fullscreen .mn-fam,.vmapx:-webkit-full-screen .mn-fam,.vmapx.maplibregl-pseudo-fullscreen .mn-fam{display:flex}
.la-pin[hidden]{display:none}
@media(max-width:760px){.vmapx .mn-fam{left:10px;right:60px;justify-content:flex-start}}