/* Villion maps chapters \002014 every selector is prefixed .vm- */
.vm-section{position:relative;height:100vh;height:100svh;min-height:560px;width:100%;overflow:hidden;background:#07080a;color:#f3f0ea;isolation:isolate;
  --vm-head:56px;--vm-fd:var(--font-display,Jost,"Helvetica Neue",Arial,sans-serif);--vm-fb:var(--font-body,Jost,"Helvetica Neue",Arial,sans-serif);--vm-fl:var(--font-label,Jost,"Helvetica Neue",Arial,sans-serif);--vm-fc:var(--font-display,Jost,"Helvetica Neue",Arial,sans-serif);--vm-gold:#cdb27c;--vm-gold-soft:rgba(205,178,124,.35);--vm-ink:#f3f0ea;--vm-mute:rgba(243,240,234,.58);
  font-family:var(--vm-fb);-webkit-font-smoothing:antialiased}
.vm-section *{box-sizing:border-box}
.vm-stage{position:absolute;inset:0;z-index:0}
.vm-section .vm-map{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease}
.vm-live .vm-map{opacity:1}
.vm-switching .vm-map{opacity:0;transition:opacity .4s ease}
.vm-map .maplibregl-canvas{outline:none}
.vm-still{position:absolute;inset:0;transition:opacity 1.1s ease}
.vm-still-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vm-still.vm-empty .vm-still-img{display:none}
.vm-live .vm-still{opacity:0;pointer-events:none}
.vm-still-pins{position:absolute;inset:0}
.vm-is-static .vm-still{opacity:1}
.vm-veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.96) 0%,rgba(7,8,10,.86) calc(var(--vm-head) + 120px),rgba(7,8,10,.35) calc(var(--vm-head) + 260px),rgba(7,8,10,0) 58%),
    linear-gradient(0deg,rgba(7,8,10,.92) 0%,rgba(7,8,10,.55) 22%,rgba(7,8,10,0) 44%),
    radial-gradient(120% 90% at 50% 55%,rgba(7,8,10,0) 55%,rgba(7,8,10,.55) 100%)}

/* head */
.vm-head{position:absolute;left:0;right:0;top:calc(var(--vm-head) + 30px);z-index:3;text-align:center;padding:0 20px;pointer-events:none}
.vm-eyebrow{margin:0 0 12px;font-family:var(--vm-fl);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--vm-gold);font-weight:500}
.vm-title{margin:0 auto;max-width:17ch;font-family:var(--vm-fd);font-weight:300;font-size:25px;line-height:1.16;letter-spacing:-.015em;color:var(--vm-ink);text-wrap:balance}
.vm-lede{margin:10px auto 0;max-width:44ch;font-family:var(--vm-fb);font-size:15px;line-height:1.45;color:var(--vm-mute);letter-spacing:.005em}
.vm-chipwrap{position:relative;margin:18px auto 0;max-width:min(100%,1180px);pointer-events:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.vm-chips{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 22px;-webkit-overflow-scrolling:touch}
.vm-chips::-webkit-scrollbar{display:none}
.vm-chips>:first-child{margin-left:auto}.vm-chips>:last-child{margin-right:auto}
.vm-chip{flex:0 0 auto;appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(18,19,22,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:rgba(243,240,234,.78);font-family:var(--vm-fl);font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.2em;text-transform:uppercase;height:32px;padding:0 14px 0 calc(14px + .2em);border-radius:999px;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease;white-space:nowrap}
.vm-chip:hover{border-color:rgba(255,255,255,.3);color:#fff}
.vm-chip--on,.vm-chip--on:hover{background:#f3f0ea;color:#0a0a0b;border-color:#f3f0ea}
.vm-chip:focus-visible,.vm-pin:focus-visible{outline:2px solid var(--vm-gold);outline-offset:3px}

/* pins */
.vm-pin{position:absolute;width:44px;height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%);display:block}
.vm-pin i{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.vm-pin-core{width:9px;height:9px;background:radial-gradient(circle,#fff 0 35%,#f1e3c3 60%,#cdb27c 100%);box-shadow:0 0 6px 1px rgba(255,240,210,.85),0 0 18px 4px rgba(205,178,124,.45);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vm-pin-halo{width:56px;height:56px;background:radial-gradient(circle,rgba(236,214,166,.45) 0,rgba(205,178,124,.14) 40%,rgba(205,178,124,0) 70%);opacity:.55;transition:opacity .5s ease}
.vm-pin-ring{width:12px;height:12px;border:1px solid rgba(232,214,174,.75);opacity:0}
.vm-pin--on .vm-pin-core{transform:translate(-50%,-50%) scale(1.35)}
.vm-pin--on .vm-pin-halo{opacity:1}
.vm-pin--on .vm-pin-ring{animation:vm-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes vm-pulse{0%{width:12px;height:12px;opacity:.9}100%{width:64px;height:64px;opacity:0}}
.vm-pin-label{position:absolute;left:50%;bottom:calc(100% - 6px);transform:translate(-50%,6px);white-space:nowrap;font-family:var(--vm-fl);font-weight:500;font-size:10px;line-height:1;letter-spacing:.22em;text-transform:uppercase;
  color:#f3f0ea;padding:7px 10px 6px;border-radius:999px;background:rgba(10,10,12,.62);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.vm-pin--on .vm-pin-label{opacity:1;transform:translate(-50%,0)}

/* card \002014 the app's explore card */
.vm-cards{position:absolute;z-index:4;left:50%;bottom:30px;width:min(calc(100% - 32px),380px);aspect-ratio:16/10.4;transform:translateX(-50%)}
.vm-card{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#111;color:#fff;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07) inset;opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.vm-card.vm-on{opacity:1;transform:none;pointer-events:auto}
.vm-card.vm-off{opacity:0;transform:translateY(-14px) scale(.985);transition-duration:.45s}
.vm-card-media{position:absolute;inset:0}
.vm-card-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.vm-card.vm-on .vm-card-media img{transform:scale(1)}
.vm-card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 42%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.88) 100%)}
.vm-card-pill{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--vm-fb);font-weight:500;font-size:12px;line-height:1;letter-spacing:.01em;color:#fff;padding:8px 13px;border-radius:999px;
  background:rgba(120,120,124,.42);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.14)}
.vm-card-text{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.vm-card-title{margin:0;font-family:var(--vm-fc);font-weight:400;font-size:21px;line-height:1.15;letter-spacing:-.01em;color:#fff}
.vm-card-sub{font-family:var(--vm-fb);margin:6px 0 0;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.66)}
.vm-card-note{font-family:var(--vm-fb);margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.84)}

.vm-credit{position:absolute;z-index:4;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:9px;letter-spacing:.04em;color:rgba(243,240,234,.28)}
.vm-credit a{color:inherit;text-decoration:none}
.vm-credit a:hover{color:rgba(243,240,234,.6)}

/* phone heights */
@media (max-height:720px) and (max-width:959px){.vm-cards{width:min(calc(100% - 32px),330px)}.vm-card-note{font-family:var(--vm-fb);display:none}.vm-lede{display:none}}

/* tablet portrait */
@media (min-width:600px) and (max-width:959px){.vm-title{font-size:32px;max-width:none}.vm-cards{width:420px}.vm-lede{font-size:15px}}

/* desktop: card on the right */
@media (min-width:960px) and (min-aspect-ratio:1/1){
  .vm-section{--vm-head:64px}
  .vm-head{top:calc(var(--vm-head) + 44px)}
  .vm-title{font-size:clamp(26px,2.55vw,40px);max-width:none}
  .vm-lede{font-size:16px;margin-top:14px;max-width:52ch}
  .vm-chipwrap{margin-top:24px;max-width:1000px;-webkit-mask-image:none;mask-image:none}
  .vm-chips{flex-wrap:wrap;justify-content:center;overflow:visible;padding:2px 0;row-gap:8px}
  .vm-chips>:first-child{margin-left:0}.vm-chips>:last-child{margin-right:0}
  .vm-cards{left:auto;right:clamp(32px,5vw,88px);bottom:auto;top:calc(var(--vm-hb,320px) + 28px);transform:none;width:400px;height:500px;aspect-ratio:auto}
  .vm-card{border-radius:26px}
  .vm-card-title{font-size:25px}
  .vm-card-text{left:24px;right:24px;bottom:22px}
  .vm-card-sub,.vm-card-note{font-family:var(--vm-fb);font-size:13.5px}
  .vm-card-pill{top:18px;right:18px}
  .vm-veil{background:
    linear-gradient(180deg,rgba(7,8,10,.95) 0%,rgba(7,8,10,.8) calc(var(--vm-head) + 150px),rgba(7,8,10,.25) calc(var(--vm-head) + 300px),rgba(7,8,10,0) 55%),
    linear-gradient(270deg,rgba(7,8,10,.6) 0%,rgba(7,8,10,0) 38%),
    linear-gradient(0deg,rgba(7,8,10,.7) 0%,rgba(7,8,10,0) 26%),
    radial-gradient(110% 90% at 45% 60%,rgba(7,8,10,0) 55%,rgba(7,8,10,.6) 100%)}
  .vm-credit{text-align:left;left:20px}
}
@media (prefers-reduced-motion:reduce){
  .vm-card,.vm-card-media img,.vm-map,.vm-still,.vm-pin-label,.vm-pin-core{transition:none!important}
  .vm-pin--on .vm-pin-ring{animation:none;opacity:.6;width:22px;height:22px}
}
.vm-soft{color:rgba(243,241,236,.46)}

/* ---------- phones (Atlas-style): brighter map, wrapped chips, a compact bottom sheet that leaves the map visible ---------- */
@media (max-width:699px){
  .vm-chipwrap{-webkit-mask-image:none;mask-image:none;margin-top:14px}
  .vm-chips{flex-wrap:wrap;justify-content:center;overflow:visible;padding:2px 10px;row-gap:7px;gap:6px}
  .vm-chips>:first-child{margin-left:0}.vm-chips>:last-child{margin-right:0}
  .vm-stays .vm-chip:nth-child(n+7){display:none}
  .vm-chip{padding:8px 12px;font-size:10.5px;min-height:34px}
  .vm-cards{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:auto;height:124px;aspect-ratio:auto;transform:none}
  .vm-card{border-radius:18px;background:rgba(14,15,17,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 40px -16px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.1)}
  .vm-card-media{right:auto;width:40%}
  .vm-card-media:after{background:linear-gradient(90deg,rgba(0,0,0,0) 60%,rgba(14,15,17,.9) 100%)}
  .vm-card-text{left:calc(40% + 14px);right:12px;top:50%;bottom:auto;transform:translateY(-50%)}
  .vm-card-title{font-size:19px;line-height:1.1}
  .vm-card-sub{font-size:12px;margin-top:5px}
  .vm-card-note{display:block!important;font-size:12px;margin-top:5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vm-card-pill{top:10px;right:10px;transform:scale(.88);transform-origin:top right}
  .vm-pin-core{width:13px;height:13px}
  .vm-pin-label{font-size:11.5px;letter-spacing:.16em}
}

/* phones: the pre-rendered frame pans and zooms toward the active pin (transform only) */
.vm-is-static .vm-still{transform-origin:0 0;transition:opacity 1.1s ease,transform .65s cubic-bezier(.65,0,.35,1)}
@keyframes vmCut{from{opacity:.35}to{opacity:1}}
.vm-is-static .vm-still.vm-cut{animation:vmCut .35s ease-out}

/* v14 scroll only: on phones the frame's pan/zoom follows the scroll directly (no transform transition while scrubbing) */
.vm-is-static .vm-still{will-change:transform}
.vm-is-static .vm-still.vm-scrub{transition:opacity 1.1s ease}
.vm-dim{position:absolute;inset:0;background:#07080a;opacity:0;pointer-events:none;will-change:opacity}

/* phone cards: the title clears the Book/Stay pill, and the note wraps to two lines instead of cutting off */
@media (max-width:699px){
  .vm-card-title{padding-right:54px}
  .vm-card-note{white-space:normal;text-overflow:clip;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}
  .vm-credit{bottom:calc(1px + env(safe-area-inset-bottom,0px))}
}