/* A Map of the Faire — the painted map, made walkable. Loaded only on /map. */

.mapwrap{padding:118px 0 60px}
.maplead{text-align:center;color:var(--ink2);margin:0 auto 10px}

/* The sound switch, built by map-sound.js. Quiet by default — it is an offer,
   not the point of the page — and lit like the wax seal once it is on. */
.mapsound{display:flex;justify-content:center;align-items:center;gap:12px;
  flex-wrap:wrap;margin:0 auto 22px}
.mapsound__btn{
  display:inline-flex;align-items:center;gap:2px;cursor:pointer;
  font-family:var(--display);font-size:.94rem;letter-spacing:.04em;
  color:var(--ink2);background:transparent;
  border:1px solid var(--line2);border-radius:2px;padding:6px 14px;
  transition:background .18s,color .18s,border-color .18s;
}
.mapsound__btn:hover,.mapsound__btn:focus-visible{
  background:var(--gold-d);border-color:var(--gold-d);color:#1a120b}
.mapsound__btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.mapsound.is-on .mapsound__btn{
  background:var(--wine);border-color:var(--wine-l);color:#f8edd1}
.mapsound.is-on .mapsound__btn:hover{background:var(--wine-l);color:#fff}
.mapsound__hint{color:var(--ink2);font-size:.86rem;opacity:.78}
@media (max-width:560px){.mapsound__hint{display:none}}
.mapmissing{max-width:620px;margin:0 auto}
.mapmissing h3{color:var(--wine)}

/* The frame is the positioning context for every hotspot, so it must hug the
   picture exactly — hence the inline-block and the block-level image. */
.mapframe{
  position:relative;display:inline-block;width:100%;line-height:0;
  border:1px solid var(--line2);border-radius:6px;overflow:hidden;
  box-shadow:0 26px 52px -34px rgba(60,40,15,.7);
}
.mapart{display:block;width:100%;height:auto}

/* Hotspots. Invisible until you go near them — the painting should be the
   thing you look at, not a grid of boxes over it. */
.mapspot{
  position:absolute;transform:translate(-50%,-50%);
  border-radius:10px;text-decoration:none;
  transition:background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.mapspot:hover,.mapspot:focus-visible{
  background:rgba(255,244,205,.22);
  box-shadow:0 0 0 2px rgba(226,199,127,.9),0 10px 30px -12px rgba(0,0,0,.6);
  outline:none;
}
.mapspot__tip{
  position:absolute;left:50%;bottom:100%;transform:translate(-50%,-8px);
  display:flex;flex-direction:column;gap:1px;white-space:nowrap;
  padding:7px 13px;border-radius:4px;line-height:1.3;
  background:#241a10;border:1px solid var(--gold-d);
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.8);pointer-events:none;
}
.mapspot:hover .mapspot__tip,.mapspot:focus-visible .mapspot__tip{opacity:1;visibility:visible}
.mapspot__tip b{font-family:var(--display);font-size:.86rem;color:#f5e9c8;letter-spacing:.03em}
.mapspot__tip small{font-family:var(--serif);font-size:.76rem;color:#c9ab7f}

/* The same doors as a list. On a phone this is the map — the hotspots are
   there, but a thumb is not a mouse. */
.mapdoors{list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.mapdoors a{display:flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:11px 14px;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.mapdoors a:hover,.mapdoors a:focus-visible{border-color:var(--gold-d);transform:translateY(-2px)}
.mapdoors__n{flex-shrink:0;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--parchment2);border:1px solid var(--line2);
  font-family:var(--display);font-size:.8rem;color:var(--wine)}
.mapdoors span span,.mapdoors a>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.mapdoors b{font-family:var(--display);font-size:.94rem;color:var(--ink)}
.mapdoors small{font-size:.8rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .mapspot,.mapspot__tip,.mapdoors a{transition:none}
  .mapdoors a:hover{transform:none}
}
@media(max-width:620px){
  .mapwrap{padding:104px 0 44px}
  /* Tooltips are a mouse idea. On a touch screen the list below is the map. */
  .mapspot__tip{display:none}
}

/* ── the map, alive ───────────────────────────────────────────────────────
   The first attempt was a wide, soft, screen-blended haze. That is the one
   thing that cannot show on this picture: screen blend lifts dark pixels and
   the map is bright parchment and pale canvas, so it lifted nothing. Proved
   it by putting the layer on and off at four times zoom — barely a difference.

   So: tight and hot rather than wide and soft, plain alpha instead of screen,
   and many more embers. Motion against a still painting is what the eye
   actually catches; a glow that only brightens will always lose to a picture
   this busy.

   The whole layer is pointer-events:none and sits under the hotspots, so it
   can never swallow a press. */
.mapfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}

.mapglow{
  position:absolute;transform:translate(-50%,-50%);height:0;border-radius:50%;
  /* No blend mode. Painted straight on, so it shows on a light picture. */
  background:radial-gradient(circle,
    rgba(255,236,170,.95) 0%,
    rgba(255,178,66,.72) 26%,
    rgba(255,124,26,.34) 52%,
    rgba(255,110,20,0) 76%);
  filter:blur(1px);
}
.mapglow--fire{animation:mapFire 1.9s ease-in-out infinite}
.mapglow--fire:nth-of-type(2){animation-duration:2.6s;animation-delay:-.9s}
@keyframes mapFire{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}
  30%    {opacity:1;  transform:translate(-50%,-50%) scale(1.28)}
  55%    {opacity:.72;transform:translate(-50%,-50%) scale(1.02)}
  78%    {opacity:.95;transform:translate(-50%,-50%) scale(1.18)}
}

/* Embers. Bigger and brighter than before, and there are three times as many,
   because a handful of 3px dots on a busy painting is not motion — it is
   dust. They climb about a fifth of the map and go out. */
.mapember{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fffbe8 0%,#ffca5e 42%,#ff8a1e 72%,rgba(255,120,26,0) 100%);
  box-shadow:0 0 6px 2px rgba(255,168,60,.55);
  opacity:0;animation-name:mapEmber;animation-iteration-count:infinite;
  animation-timing-function:cubic-bezier(.4,.05,.6,.95);
}
@keyframes mapEmber{
  0%  {opacity:0;   transform:translate(-50%,10%)  scale(.4)}
  12% {opacity:1;   transform:translate(-50%,0)    scale(1)}
  55% {opacity:.85; transform:translate(calc(-50% + 9px),-90%) scale(.85)}
  100%{opacity:0;   transform:translate(calc(-50% - 7px),-190%) scale(.3)}
}

/* Lit but still for anyone who has asked for less motion — a dark firepit
   would look broken rather than calm. */
@media (prefers-reduced-motion:reduce){
  .mapglow{animation:none;opacity:.85}
  .mapember{display:none}
}

/* ── hovering a place: the sticker ───────────────────────────────────────
   A flat painting cannot light one tent on its own. So each hotspot carries
   its own slice of the map, lined up exactly with the picture beneath it and
   invisible until you go near. On hover the rest of the map dims and that
   slice peels up instead — white edge, drop shadow, a degree of tilt — like a
   sticker lifted off the page.

   Because it is a real piece of the picture rather than a box drawn over it,
   what lifts is the tent itself. */
.mapframe{isolation:isolate}
.mapart{transition:filter .35s var(--ease)}
.mapframe:has(.mapspot:hover) .mapart,
.mapframe:has(.mapspot:focus-visible) .mapart{filter:brightness(.62) saturate(.72)}

.mapspot{
  background-repeat:no-repeat;
  /* the slice is there but invisible until wanted */
  background-color:transparent;
  opacity:1;
  border-radius:10px;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease),
             border-color .26s var(--ease), border-width .26s var(--ease);
  border:0 solid #fff;
  will-change:transform;
}
/* Nothing shows through the hotspot until it is hovered — otherwise every
   place would sit as a faintly doubled patch over the map. */
.mapspot:not(:hover):not(:focus-visible){background-image:none !important}

.mapspot:hover,.mapspot:focus-visible{
  border-width:5px;
  border-color:#fff;
  transform:translate(-50%,-50%) scale(1.08) rotate(-1.2deg);
  box-shadow:0 18px 34px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(120,90,40,.35);
  outline:none;
  z-index:3;
}
/* every other tent tilts the other way when it is the one lifted */
.mapspot:nth-of-type(even):hover,.mapspot:nth-of-type(even):focus-visible{transform:translate(-50%,-50%) scale(1.08) rotate(1.2deg)}

@media (prefers-reduced-motion:reduce){
  .mapart,.mapspot{transition:none}
  .mapspot:hover,.mapspot:focus-visible{transform:translate(-50%,-50%) scale(1.04)}
}

/* A sign carrying a live number rather than its written line — gold, so the
   difference between "Talk by the fire" and "12 said, over 4 notes" is
   visible at a glance. */
.mapspot__tip small.is-live{color:var(--gold-l);font-variant-numeric:tabular-nums}