/* Maps page, everything below the hero (2026-11-10, watercolour pass).
   One painted panel holds the official map, its copy and the four site types;
   the arrival band sits on an edge-to-edge sky wash with the live map on torn
   paper and the entrance-sign postcard. Art, medallions and paper edges are the
   ones already used on Rates, Resort Details, FAQs and the hero.
   Fonts are declared by the hero and button stylesheets linked on this page. */

body.page-maps main{background:linear-gradient(180deg,#fffdfa 0,#fffdfa calc(100% - 760px),#fff calc(100% - 440px))}

.mpx{
  --mpx-ink:#103f40;--mpx-accent:#a77351;--mpx-body:#293e4d;--mpx-soft:#46525a;--mpx-muted:#806c59;
  --mpx-hair:#d9d1c2;--mpx-rule:#b59b84;--mpx-edge:#fffaf0;--mpx-brown:#6E3E2E;--mpx-teal:#28858a;
  --mpx-serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --mpx-reading:"Coastal Reading",Georgia,serif;
  --mpx-caps:"HBS Univers","Helvetica Neue",Arial,sans-serif;
  --mpx-torn:url('../img/attractions-hero-20261030/paper-edge.svg') center/100% 100% no-repeat;
  position:relative;isolation:isolate;margin:0;color:var(--mpx-body);
}
.mpx *,.mpx *::before,.mpx *::after{box-sizing:border-box}
.mpx-wrap{width:min(1400px,calc(100% - clamp(48px,8.4vw,128px)));margin-inline:auto}

/* Type */
body.page-maps .mpx h2{margin:0;color:var(--mpx-ink);font:700 clamp(33.12px,2.995vw,56.88px)/1.08 var(--mpx-serif);letter-spacing:-.015em;text-transform:none;text-align:left}
body.page-maps .mpx h2>span,body.page-maps .mpx h2>em{display:block}
body.page-maps .mpx h2>em{margin-top:.06em;font:inherit;font-weight:400;font-style:normal;letter-spacing:normal;color:var(--mpx-accent)}
body.page-maps .mpx-lead{max-width:470px;margin:22px 0 0;color:var(--mpx-body);font:400 clamp(18px,1.48vw,24px)/1.35 var(--mpx-reading);text-wrap:pretty}
.mpx-link{display:inline-flex;align-items:center;gap:11px;padding:6px 0;color:var(--mpx-brown);font:400 13px/1 var(--mpx-caps);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid #c9b8a3;transition:color .2s ease,border-color .2s ease}
.mpx-link:hover{color:var(--mpx-ink);border-color:var(--mpx-ink)}
.mpx-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mpx :is(a,button):focus-visible{outline:3px solid #477b90;outline-offset:5px}

/* Torn paper sheet (same edge as the hero collage) */
.mpx-paper{display:block;filter:drop-shadow(0 14px 14px #53452c2e);text-decoration:none}
.mpx-paper__edge{display:block;padding:clamp(9px,1.05vw,16px);background:var(--mpx-edge);-webkit-mask:var(--mpx-torn);mask:var(--mpx-torn)}
.mpx-paper__edge>img,.mpx-paper__edge>iframe{display:block;width:100%;max-width:none;border:0}
.mpx-paper__edge>img{height:auto}

/* ---------- 1. The official map, on a painted panel ---------- */
.mpx-map{padding-top:clamp(36px,4.6vw,70px)}
.mpx-map__panel{position:relative;padding:clamp(56px,6vw,100px) clamp(22px,3.6vw,56px) clamp(120px,12.5vw,190px)}
/* The artwork is never stretched: one copy hangs from the top of the panel and one sits on the bottom, each at its natural proportions, cross-fading in the middle. */
.mpx-map__art i{position:absolute;left:0;right:0;aspect-ratio:1585/992;background:url('../img/rates-section-20261109/watercolor-paper.webp') center/100% 100% no-repeat}
.mpx-map__art-top{top:0;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,#0000 78%);mask-image:linear-gradient(180deg,#000 0,#000 60%,#0000 78%)}
.mpx-map__art-bottom{bottom:0;-webkit-mask-image:linear-gradient(180deg,#0000 0,#000 27%);mask-image:linear-gradient(180deg,#0000 0,#000 27%)}
.mpx-map__art{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 7%,#000 93%,#0000 100%),linear-gradient(180deg,#0000 0,rgba(0,0,0,.3) 2%,rgba(0,0,0,.8) 5%,#000 8%,#000 94%,rgba(0,0,0,.6) 97.5%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 7%,#000 93%,#0000 100%),linear-gradient(180deg,#0000 0,rgba(0,0,0,.3) 2%,rgba(0,0,0,.8) 5%,#000 8%,#000 94%,rgba(0,0,0,.6) 97.5%,#0000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.mpx-map__grid{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(0,1fr);gap:clamp(40px,5.4vw,88px);align-items:center}
.mpx-map__sheet{position:relative;transform:rotate(-1.6deg)}
a.mpx-paper--map{cursor:zoom-in;transition:transform .5s cubic-bezier(.22,.7,.2,1),filter .5s ease}
a.mpx-paper--map:hover{transform:translateY(-4px) rotate(.4deg);filter:drop-shadow(0 22px 20px #53452c38)}
.mpx-stamp{position:absolute;z-index:2;top:clamp(-46px,-3vw,-26px);right:clamp(-52px,-3.4vw,-22px);width:clamp(118px,10.6vw,168px);aspect-ratio:1;border:1px solid #bb9b75;border-radius:50%;outline:1px solid #bb9b7580;outline-offset:-7px;background:#fcf6eaf7;box-shadow:0 8px 17px #604b2d24,0 0 0 5px #fffaf3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#895b36;text-align:center;transform:rotate(8deg);pointer-events:none}
.mpx-stamp strong{font:400 clamp(27px,2.5vw,40px)/1 var(--mpx-serif);letter-spacing:-.01em;color:var(--mpx-ink)}
.mpx-stamp span{font:400 clamp(8.5px,.72vw,11.5px)/1.5 var(--mpx-caps);letter-spacing:.18em;text-transform:uppercase}
.mpx-stamp svg{width:46%;height:auto;fill:none;stroke:currentColor;stroke-width:.9}
.mpx-map__copy{position:relative}
.mpx-map__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:34px}

/* The four site types, inside the same panel */
.mpx-types__label{display:flex;align-items:center;justify-content:center;gap:22px;margin:clamp(56px,6vw,96px) 0 0;color:var(--mpx-muted);font:400 12px/1.4 var(--mpx-caps);letter-spacing:.24em;text-transform:uppercase;text-align:center}
.mpx-types__label::before,.mpx-types__label::after{content:"";flex:0 1 110px;height:1px;background:var(--mpx-rule)}
.mpx-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1180px;margin:clamp(26px,2.6vw,40px) auto 0;padding:0;list-style:none}
.mpx-type{position:relative;margin:0;padding:0 clamp(8px,1vw,14px);text-align:center;list-style:none}
.mpx-type+.mpx-type::before{content:"";position:absolute;left:0;top:44px;bottom:6px;width:1px;background:linear-gradient(180deg,#0000,var(--mpx-rule) 22%,var(--mpx-rule) 78%,#0000)}
.mpx-medal{position:relative;display:grid;place-items:center;width:clamp(86px,7.4vw,112px);aspect-ratio:1;margin:0 auto;background:url('../img/maps-sections-20261110/medallion.webp') center/100% 100% no-repeat;border-radius:50%;box-shadow:0 0 0 clamp(7px,.7vw,11px) #fffdf8cc}
.mpx-medal svg{width:64%;height:auto;fill:none;stroke:var(--mpx-ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mpx-medal i{position:absolute;right:-3px;bottom:1px;width:24px;height:24px;border:3px solid #fffdf8;border-radius:7px;background:var(--mpx-site);box-shadow:0 2px 5px #53452c40;transform:rotate(-8deg)}
body.page-maps .mpx-type h3{margin:20px 0 0;color:var(--mpx-ink);font:400 clamp(20px,1.6vw,25px)/1.2 var(--mpx-serif);letter-spacing:0;text-transform:none}
.mpx-type__sites{margin:9px 0 0;color:var(--mpx-body);font:400 clamp(17px,1.3vw,19px)/1.35 var(--mpx-reading);text-wrap:balance}
.mpx-type__size{margin:6px 0 0;color:var(--mpx-muted);font:400 11px/1.5 var(--mpx-caps);letter-spacing:.16em;text-transform:uppercase;text-wrap:balance}
.mpx-types__more{margin:clamp(30px,3vw,46px) 0 0;text-align:center}

/* ---------- 2. Getting here ---------- */
.mpx-arrive{padding:clamp(84px,8.6vw,140px) 0 clamp(64px,6.4vw,104px)}
.mpx-arrive__art{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#0000 0,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.65) 12%,rgba(0,0,0,.94) 17%,#000 22%,#000 80%,rgba(0,0,0,.94) 84%,rgba(0,0,0,.65) 89%,rgba(0,0,0,.3) 94%,rgba(0,0,0,.08) 98%,#0000 100%);mask-image:linear-gradient(180deg,#0000 0,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.65) 12%,rgba(0,0,0,.94) 17%,#000 22%,#000 80%,rgba(0,0,0,.94) 84%,rgba(0,0,0,.65) 89%,rgba(0,0,0,.3) 94%,rgba(0,0,0,.08) 98%,#0000 100%)}
.mpx-arrive__art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center bottom}
.mpx-arrive__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:clamp(48px,6vw,92px);align-items:center}
.mpx-arrive__copy .mpx-lead{max-width:520px}
.mpx-arrive__buttons{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
a.mpx-ghost{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 22px;border:1px solid rgba(110,62,46,.45);border-radius:2px;background:#fffdf880;color:var(--mpx-brown);font:400 14px/1 var(--mpx-caps);letter-spacing:.3em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .3s ease,border-color .3s ease}
a.mpx-ghost:hover{background:#f6ddd066;border-color:var(--mpx-brown)}
.mpx-arrive__stage{position:relative;transform:rotate(1.3deg)}
.mpx-paper--live iframe{aspect-ratio:1.3;height:auto;min-height:340px;background:#ece7dc}
/* The live Google Map, toned to read like a painted chart: warm paper land, soft teal water,
   a paper-grain wash over it and edges that fade into the sheet. The overlays ignore the pointer,
   so the map still pans, zooms and opens as normal. */
.mpx-paper--live .mpx-paper__edge{position:relative}
.mpx-paper--live iframe{filter:sepia(.34) saturate(1.12) hue-rotate(-9deg) brightness(1.04) contrast(.9)}
.mpx-paper--live .mpx-paper__edge::before,.mpx-paper--live .mpx-paper__edge::after{content:"";position:absolute;inset:clamp(9px,1.05vw,16px);pointer-events:none}
.mpx-paper--live .mpx-paper__edge::before{background:url('../img/gallery-collection-20261106/watercolor-paper.webp') center/cover;mix-blend-mode:multiply;opacity:.55}
/* soft fade on the top and sides only, so Google's attribution along the bottom stays readable */
.mpx-paper--live .mpx-paper__edge::after{background:linear-gradient(180deg,#fffaf0 0,#fffaf000 15%),linear-gradient(90deg,#fffaf0 0,#fffaf000 9%,#fffaf000 91%,#fffaf0 100%)}
.mpx-postcard{position:absolute;z-index:2;left:clamp(-78px,-5.4vw,-30px);bottom:clamp(-64px,-4.4vw,-34px);width:31%;margin:0;transform:rotate(-8deg);filter:drop-shadow(0 12px 12px #53452c3d);pointer-events:none}
.mpx-postcard .mpx-paper__edge{padding:clamp(6px,.7vw,10px)}
.mpx-postcard img{aspect-ratio:.86;object-fit:cover;object-position:52% 46%}
.mpx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1220px;margin:clamp(84px,8.4vw,130px) auto 0;padding:0;list-style:none}
.mpx-facts li{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin:0;padding:6px clamp(10px,1.4vw,24px);list-style:none}
.mpx-facts li+li::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--mpx-rule)}
.mpx-facts svg{flex:none;width:40px;height:40px;fill:none;stroke:#157f8b;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mpx-facts small{display:block;color:var(--mpx-muted);font:400 11px/1.4 var(--mpx-caps);letter-spacing:.22em;text-transform:uppercase}
.mpx-facts b{display:block;white-space:nowrap;margin-top:5px;color:var(--mpx-ink);font:400 clamp(17px,1.3vw,20px)/1.3 var(--mpx-serif)}
.mpx-facts a{color:inherit;text-decoration:none;border-bottom:1px solid #c9b8a3;transition:color .2s ease,border-color .2s ease}
.mpx-facts a:hover{color:var(--mpx-accent);border-color:var(--mpx-accent)}

/* ---------- Enlarged map viewer ---------- */
.mpv{--mpv-zoom:1;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fbf7f0;color:#103f40;overflow:hidden}
.mpv[open]{display:flex;flex-direction:column}
.mpv::backdrop{background:#0c2b2ccc}
.mpv *{box-sizing:border-box}
.mpv__top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(14px,2.4vw,32px);border-bottom:1px solid #d9d1c2;background:#fffdfa}
.mpv__top h2{margin:0;color:#103f40;font:700 clamp(17px,1.5vw,22px)/1.2 "Libre Baskerville",Georgia,serif;letter-spacing:-.01em}
.mpv__controls{display:flex;align-items:center;gap:8px}
.mpv__controls button{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid rgba(110,62,46,.4);border-radius:2px;background:#fff;color:#6E3E2E;font:400 12px/1 "HBS Univers","Helvetica Neue",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .2s ease}
.mpv__controls button:hover:not(:disabled){background:#f6ddd0}
.mpv__controls button:disabled{opacity:.4;cursor:default}
.mpv__controls button[data-mpv-minus],.mpv__controls button[data-mpv-plus]{padding:0;font-size:20px;letter-spacing:0}
.mpv__controls button:focus-visible,.mpv__viewport:focus-visible{outline:3px solid #477b90;outline-offset:2px}
.mpv__value{min-width:52px;text-align:center;font:400 12px/1 "HBS Univers",Arial,sans-serif;letter-spacing:.12em}
.mpv__viewport{flex:1;min-height:0;overflow:auto;padding:clamp(10px,1.6vw,22px);overscroll-behavior:contain}
.mpv__viewport.is-dragging{cursor:grabbing;user-select:none}
.mpv__img{display:block;width:calc(min(100%,(100dvh - 130px) * 1.4545) * var(--mpv-zoom));max-width:none;height:auto;margin:0 auto;border-radius:6px;box-shadow:0 8px 20px #6a594630}

/* White canvas beneath the closing CTA and the footer (as on Rates). */
body.page-maps #site-footer.fcs{--paper:#fff;background:#fff}
body.page-maps #site-footer.fcs::before{background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.97) 15%,rgba(255,255,255,.84) 32%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.33) 68%,rgba(255,255,255,.11) 85%,rgba(255,255,255,0) 100%)}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .mpx-map__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px}
  .mpx-arrive__grid{gap:56px}
  .mpx-map__actions{flex-direction:column;align-items:flex-start}
}
@media(max-width:900px){
  body.page-maps .mpx h2{font-size:clamp(24.48px,6.768vw,46.08px)}
  body.page-maps .mpx-lead{max-width:none;font-size:21px}
  .mpx-map__panel{padding-inline:0}
  .mpx-map__art i{left:auto;right:0;width:auto;height:min(560px,62%);background-size:auto 100%;background-position:right center}
  .mpx-map__art{left:-24px;right:-24px;opacity:.8;-webkit-mask-image:linear-gradient(180deg,#0000 0,rgba(0,0,0,.3) 3%,rgba(0,0,0,.8) 7%,#000 11%,#000 92%,rgba(0,0,0,.6) 96.5%,#0000 100%);mask-image:linear-gradient(180deg,#0000 0,rgba(0,0,0,.3) 3%,rgba(0,0,0,.8) 7%,#000 11%,#000 92%,rgba(0,0,0,.6) 96.5%,#0000 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .mpx-map__grid{grid-template-columns:1fr;gap:46px}
  .mpx-map__copy{order:-1}
  .mpx-map__actions{flex-direction:row;align-items:center}
  .mpx-map__sheet{width:calc(100% - 14px)}
  .mpx-stamp{right:-14px;top:-34px}
  .mpx-types{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .mpx-type:nth-child(3)::before{content:none}
  .mpx-arrive{padding-top:110px}
  .mpx-arrive__grid{grid-template-columns:1fr;gap:54px}
  .mpx-arrive__stage{width:calc(100% - 20px);margin-left:auto}
  .mpx-postcard{left:-20px;bottom:-46px;width:34%}
  .mpx-facts{grid-template-columns:1fr;max-width:420px;margin-top:100px}
  .mpx-facts li{justify-content:flex-start;padding:20px 4px}
  .mpx-facts li+li::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px}
}
@media(max-width:600px){
  .mpx-wrap{width:calc(100% - 48px)}
  body.page-maps .mpx-lead{font-size:18px}
  .mpx-map__actions{flex-direction:column;align-items:stretch;gap:18px}
  .mpx-map__actions .mpx-link{align-self:center}
  .mpx-map__actions a.sbtn,.mpx-arrive__buttons a{width:100%}
  .mpx-arrive__buttons{flex-direction:column}
  a.mpx-ghost{height:54px;font-size:13px}
  .mpx-stamp{width:98px;top:-40px;right:-12px;gap:2px;outline-offset:-5px;box-shadow:0 5px 12px #604b2d24,0 0 0 3px #fffaf3}
  .mpx-stamp strong{font-size:23px}
  .mpx-stamp span{font-size:7.5px;letter-spacing:.14em}
  .mpx-types__label{gap:14px;font-size:11px}
  .mpx-type{padding-inline:8px}
  .mpx-type__size{font-size:10.5px;letter-spacing:.16em}
  .mpx-paper--live iframe{aspect-ratio:1;min-height:300px}
  .mpx-postcard{width:38%;bottom:-40px;left:-14px}
  .mpv__top h2{display:none}
  .mpv__top{justify-content:center}
  .mpv__img{width:calc(100% * var(--mpv-zoom))}
}
@media(prefers-reduced-motion:reduce){
  a.mpx-paper--map,a.mpx-ghost,.mpx-link{transition:none}
  a.mpx-paper--map:hover{transform:none}
}