/* Transparent artwork floats on the site's existing paper texture. */
.interactive-map {
  --dot-clearance: clamp(26px, 2.4vw, 34px);
  width: 100%;
  max-width: 1536px;
  aspect-ratio: auto;
  overflow: visible;
  clip-path: none;
  box-shadow: none;
  background: transparent;
}

.map-base {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

/* The arrow tip is the anchor; the blue dot sits beyond it in screen pixels.
   This clearance also preserves the arrowhead at the largest pulse size. */
.map-dot {
  left: calc(var(--x) + var(--dx) * var(--dot-clearance));
  top: calc(var(--y) + var(--dy) * var(--dot-clearance));
  width: 44px;
  height: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.map-dot::after {
  width: clamp(14px, 1.4vw, 20px);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px rgb(243 234 215 / .65);
}

.map-dot::after,
.map-dot:hover::after,
.map-dot:focus-visible::after,
.map-dot.is-active::after {
  background: var(--cobalt);
}

.map-dot:focus-visible {
  outline: 2px dashed var(--cobalt);
  outline-offset: 1px;
}

.place-entrance-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(55dvh, 540px);
  margin: 1.25rem auto 0;
  object-fit: contain;
}

.place-entrance-photo[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .interactive-map.is-visible .map-dot,
  .map-dot:hover::after,
  .map-dot:focus-visible::after,
  .map-dot.is-active::after { animation: none; }
}


/* Normal page map always fits the available width, including on phones. */
.map-viewport { width: 85%; margin-inline: auto; overflow: visible; padding: 0; }
.interactive-map { min-width: 0; }
.place-dialog .place-entry__title { font-size: 1.8rem; line-height: 1.12; }
.map-tools { display: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: .8rem 1.5rem; margin-top: 1rem; }
.map-rotate-hint { display: none; align-items: center; gap: .45rem; margin: 0; font: 1.15rem/1.2 var(--notes); }
.map-rotate-hint svg { flex: 0 0 auto; color: var(--cobalt); }
.map-enlarge { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; border: 1px solid var(--ink); border-radius: 3px 6px 4px 5px; padding: .35rem .8rem; color: var(--cobalt); background: var(--paper); font: 1.15rem/1.2 var(--notes); cursor: pointer; }
.map-enlarge:focus-visible, .map-viewer button:focus-visible { outline: 2px dashed var(--cobalt); outline-offset: 3px; }
.map-viewer { width: calc(100vw - 1rem); max-width: 1400px; height: calc(100dvh - 1rem); max-height: none; padding: clamp(.65rem, 2vw, 1.2rem); border-radius: 10px; clip-path: none; overflow: hidden; }
.map-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .65rem; }
.map-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.map-viewer__toolbar h2 { margin: 0; font-size: clamp(1.1rem, 3vw, 1.7rem); }
.map-viewer__buttons { display: flex; gap: .35rem; }
.map-viewer__buttons button { min-width: 44px; min-height: 44px; padding: .25rem; color: var(--cobalt); background: var(--paper); border: 1px solid var(--ink); border-radius: 4px; font: 1.5rem/1 var(--notes); cursor: pointer; }
.map-viewer__buttons button:disabled { opacity: .4; cursor: default; }
.map-viewer__viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; user-select: none; cursor: grab; }
.map-viewer__viewport.is-dragging { cursor: grabbing; }
.map-viewer__stage.interactive-map { position: absolute; left: 0; top: 0; width: 1484px; max-width: none; height: 1060px; margin: 0; transform-origin: 0 0; --dot-clearance: calc(28px / var(--map-scale, 1)); }
.map-viewer .map-viewer__stage .map-dot { animation: none; opacity: 1; transform: scale(calc(1 / var(--map-scale, 1))); }
.map-viewer .map-dot::after { width: 18px; border-width: 3px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px rgb(243 234 215 / .65); }
.map-viewer__help { margin: 0; font: 1rem/1.3 var(--notes); text-align: center; }
.map-viewer__status { display: inline-block; min-width: 3rem; }
body.map-viewer-open { overflow: hidden; }
@media (max-width: 700px) {
  .interactive-map:not(.map-viewer__stage) { --dot-clearance: clamp(14px, calc(3.333vw + 3.333px), 26px); }
  .interactive-map:not(.map-viewer__stage) .map-dot::after { width: 13px; border-width: 1px; box-shadow: 0 0 0 1px var(--paper); }
  .map-tools { gap: .7rem; }
  .map-rotate-hint { display: inline-flex; }
}
@media (max-width: 700px) and (orientation: landscape) {
  .map-rotate-hint { display: none; }
}

/* V43: mobile-only enlargement, with the normal map kept at full phone width. */
@media (max-width: 700px), (max-width: 1100px) and (pointer: coarse) {
  .map-viewport { width: 100%; }
  .map-tools { display: flex; }
}
/* Pixel-sized tears do not grow with the tall, stacked phone section. */
@media (max-width: 760px) {
  .section--accommodation .paint-wash--cobalt-paper {
    inset: 0 -4% 1rem;
    clip-path: polygon(0 12px,4% 9px,8% 13px,12% 10px,16% 12px,21% 8px,26% 11px,31% 7px,37% 10px,44% 8px,50% 12px,57% 7px,63% 10px,70% 8px,76% 11px,83% 7px,89% 10px,95% 8px,100% 12px,99% 18%,100% 33%,99% 47%,100% 66%,99% 80%,100% calc(100% - 8px),93% calc(100% - 6px),87% calc(100% - 10px),79% calc(100% - 7px),72% 100%,65% calc(100% - 9px),57% calc(100% - 5px),48% calc(100% - 8px),41% 100%,33% calc(100% - 7px),25% calc(100% - 5px),17% calc(100% - 9px),10% 100%,4% calc(100% - 6px),0 calc(100% - 8px),1% 79%,0 63%,1% 45%,0 26%);
  }
}

.place-dialog__media[hidden] { display: none; }
/* Landscape phone cards: text left, complete photograph/film on the right. */
@media (orientation: landscape) and (min-width: 560px) and (max-width: 950px) and (max-height: 650px) and (pointer: coarse) {
  .place-dialog.has-media[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    width: min(950px, calc(100vw - 1.5rem));
    height: calc(100dvh - 1.5rem);
    max-height: none;
    padding: 2.3rem clamp(1rem, 3vw, 1.5rem) 1.2rem;
    overflow: hidden;
  }
  .place-dialog.has-media .place-dialog__text { min-width: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
  .place-dialog.has-media .place-dialog__text .eyebrow { margin: 0 0 .65rem; font-size: 1.1rem; }
  .place-dialog.has-media .place-entry__title { margin: 0 0 .8rem; font-size: 1.8rem; }
  .place-dialog.has-media .place-entry__copy { margin: 0; font-size: 1.18rem; }
  .place-dialog.has-media .place-dialog__media:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; }
  .place-dialog.has-media .place-photo,
  .place-dialog.has-media .place-entrance-photo { width: 100%; height: auto; max-height: calc(100dvh - 6rem); margin: 0; object-fit: contain; }
  .place-dialog.has-media .place-photo-polaroid:not([hidden]) { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(230px, 90%); height: 100%; max-height: calc(100dvh - 6.5rem); margin: 0; transform: rotate(-2deg); }
  .place-dialog.has-media .place-photo-polaroid img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: contain; object-position: center; }
  .place-dialog.has-media .place-photo-polaroid figcaption { font-size: .95rem; }
  .place-dialog.has-media .anything-video { width: 100%; margin: 0; }
}

/* Both lines of the hero's handwritten notes stay inside its clipped area. */
.hero--sketchbook .hero__margin-note { height: auto; max-height: none; overflow: visible; line-height: 1.2; }
.hero--sketchbook .hero__margin-note br { display: initial; }
@media (min-width: 701px) {
  .hero--sketchbook .hero__margin-note--left { bottom: 1.5rem; left: 3%; }
  .hero--sketchbook .hero__margin-note--right { bottom: 1.5rem; right: 8%; text-align: right; }
}
/* Portrait and desktop share the same readable, centred popup typography. */
.place-dialog__text { text-align: center; }
.place-dialog .eyebrow { font-size: 1.1rem; }
.place-dialog .place-entry__copy { font-size: 1.18rem; }
@media (hover: hover) and (pointer: fine) {
  .place-dialog { width: min(560px, calc(100vw - 2rem)); }
  .place-dialog .place-entrance-photo { max-height: min(38dvh, 360px); }
}

/* Approved notes above and below the map, outside the clipped hero. */
.map-section{padding-bottom:0;}
.placement-note-row{display:flex;justify-content:flex-end;width:85%;margin:0 auto;position:relative;z-index:4;}
.placement-note-row--above{padding:0 1% 1.5rem;}
.placement-note-row--below{padding:1.25rem 1% 2.25rem;}
.placement-note{position:relative;isolation:isolate;margin:0;padding:.7rem 1rem;font-family:var(--notes);font-size:clamp(17px,1.85vw,28px);line-height:1.35;color:var(--olive);transform:rotate(-5deg);text-align:left;}
.placement-note::before{content:"";position:absolute;inset:-.4rem -.8rem;z-index:-1;filter:blur(7px);border-radius:48% 52% 44% 56% / 55% 42% 58% 45%;opacity:.48;}
.placement-note--blue::before{background:radial-gradient(ellipse,#6098bb 0%,rgb(96 152 187 / .65) 40%,transparent 75%);}
.placement-note--rose::before{background:radial-gradient(ellipse,#b97878 0%,rgb(185 120 120 / .55) 42%,transparent 76%);}
@media(max-width:700px){.placement-note-row{width:100%;}.placement-note-row--above{padding:0 3% 1rem;}.placement-note-row--below{padding:1rem 3% 2rem;}.placement-note{font-size:clamp(17px,4vw,20px);}}


.place-entry[hidden]{display:none;}