/* The village map (villagemap.embed). Everything is scoped under .vm so it drops into any page.
   Paper, ink and the accent follow the site: paper #f7f5ef, ink #1f1f1f, accent #27565f, rules #d8d3c6. */
.vm{--vm-paper:#f1eee0;--vm-ink:#2b2620;--vm-rule:#d8d3c6;--vm-accent:#27565f;--vm-eat:#a3341f;--vm-stay:#6b4c9a;--vm-visit:#b8892e;--vm-shop:#1d4a52;--vm-services:#27565f;--vm-walk:#4f7a45;--vm-info:#6d6b66;
  margin:12px 0 0;font-family:"Source Sans 3",system-ui,sans-serif;color:#1f1f1f;-webkit-tap-highlight-color:transparent}
.vm *{box-sizing:border-box}
.vm-bar{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vm-bar::-webkit-scrollbar{display:none}
.vm-chip{flex:0 0 auto;min-height:44px;padding:8px 16px;border:1px solid var(--vm-rule);border-radius:2px;background:#fdfcf9;color:#1f1f1f;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;touch-action:manipulation}
.vm-chip[aria-pressed="true"]{background:var(--vm-accent);border-color:var(--vm-accent);color:#fff}
.vm-chip:focus-visible,.vm-b:focus-visible,.vm-x:focus-visible,.vm-btn:focus-visible{outline:2px solid var(--vm-accent);outline-offset:2px}

/* the sheet of paper */
.vm-stage{position:relative;overflow:hidden;border:1px solid var(--vm-rule);border-radius:2px;background:var(--vm-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  height:min(100vw,600px);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.vm-h-full .vm-stage{height:clamp(440px,calc(100vh - 230px),860px);touch-action:none}
.vm-stage:active{cursor:grabbing}
.vm-stage:focus-visible{box-shadow:0 0 0 2px var(--vm-accent)}
.vm-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(90,70,40,.10),inset 0 0 6px rgba(90,70,40,.08);border-radius:2px}
.vm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;--s:.7}
.vm-svg text{user-select:none;-webkit-user-select:none;pointer-events:none}

/* the drawing: fills and lines scale with the map, the widths partly follow the zoom (calc(a*var(--s) + b)) so a
   road is never a hair when zoomed out nor a motorway when zoomed in */
.vm-sea{fill:#a8c2c9}
.vm-fleet{fill:#9fb9c2}
.vm-shore{fill:none;stroke:#6f8f99;stroke-width:calc(.9px * var(--s) + 1px);stroke-linecap:round;opacity:.75}
.vm-shingle{fill:none;stroke:#e5d8ba;stroke-width:calc(6px * var(--s) + 34px);stroke-linecap:round;stroke-linejoin:round}
.vm-stipple{fill:none;stroke:#b9a67c;stroke-width:calc(.6px * var(--s) + 1.3px);stroke-dasharray:.1 5;stroke-linecap:round;opacity:.7}
.vm-wave{fill:none;stroke:#5f8592;stroke-width:1.6;stroke-linecap:round;opacity:.5}
.vm-wf{opacity:.4}.vm-w2{opacity:.3}
.vm-fd{stroke:#8ea375;stroke-width:calc(.5px * var(--s) + 1px);stroke-linejoin:round;opacity:.8}
.vm-g1{fill:#bccaa3}.vm-g2{fill:#adc094}
.vm-ct{fill:none;stroke:#b39a6d;stroke-width:calc(.5px * var(--s) + .8px);opacity:.7}
.vm-ct0{opacity:.9;stroke-width:calc(.6px * var(--s) + 1.1px)}.vm-ct2{opacity:.35}
.vm-hach{fill:none;stroke:#a68d64;stroke-width:calc(.5px * var(--s) + .8px);stroke-linecap:round;opacity:.75}
.vm-crest{fill:none;stroke:#9a8259;stroke-width:calc(.9px * var(--s) + 1.6px);stroke-linecap:round;opacity:.8}
.vm-fort{fill:none;stroke:#8a7350;stroke-width:calc(.8px * var(--s) + 1.4px);stroke-dasharray:6 3;opacity:.85}
.vm-yard{fill:#c3d2a6;stroke:#8fa477;stroke-width:1;stroke-linejoin:round}
.vm-stone{fill:none;stroke:#6e6653;stroke-width:.7;stroke-linecap:round}
.vm-tree{fill:#8aa572;stroke:#5c7a4a;stroke-width:.9;stroke-linejoin:round;stroke-linecap:round;opacity:.95}
.vm-bs{fill:#b09a6f;stroke:none}
.vm-bl{fill:#dbcba4;stroke:#9f855a;stroke-width:calc(.25px * var(--s) + .45px);stroke-linejoin:round}
.vm-c{fill:none;stroke:#82694a;stroke-linecap:round;stroke-linejoin:round}
.vm-f{fill:none;stroke:#fffaec;stroke-linecap:round;stroke-linejoin:round}
.vm-c1{stroke-width:calc(5.2px * var(--s) + 9.4px)}.vm-f1{stroke-width:calc(4px * var(--s) + 7px)}
.vm-c2{stroke-width:calc(4px * var(--s) + 6.2px)}.vm-f2{stroke-width:calc(3px * var(--s) + 4.4px);stroke:#f9f3e3}
.vm-c3{stroke-width:calc(3.2px * var(--s) + 4.6px)}.vm-f3{stroke-width:calc(2.4px * var(--s) + 3.2px);stroke:#f6efdc}
.vm-t{fill:none;stroke:#8c7454;stroke-linecap:round;stroke-width:calc(.9px * var(--s) + 1.4px);stroke-dasharray:5 4;opacity:.9}
.vm-t4{stroke-dasharray:8 5;stroke-width:calc(1.2px * var(--s) + 2px)}

/* lettering on the paper: street names sit on the road, water and hills in italic */
.vm-st{font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:max(5.4px,calc(10.5px * var(--s)));letter-spacing:.05em;fill:#6a5942;paint-order:stroke;stroke:#fbf6e8;stroke-width:calc(2.4px * var(--s) + 1px);stroke-linejoin:round;transition:opacity .25s}
.vm-far .vm-streets{opacity:0}
text.vm-water,text.vm-bay,text.vm-beach,text.vm-hill,text.vm-small,text.vm-sign{font-family:"Source Serif 4",Georgia,serif}
text.vm-water{font-style:italic;font-size:max(14px,calc(12px * var(--s)));letter-spacing:.2em;fill:#3f6672;opacity:.85}
text.vm-bay{font-style:italic;font-size:max(26px,calc(16px * var(--s)));letter-spacing:.35em;fill:#4f7682;opacity:.7}
text.vm-beach{font-style:italic;font-size:max(13px,calc(11px * var(--s)));letter-spacing:.22em;fill:#8a7449;paint-order:stroke;stroke:#e5d8ba;stroke-width:3;stroke-linejoin:round;opacity:.9}
text.vm-hill{font-style:italic;font-size:max(12px,calc(11px * var(--s)));letter-spacing:.12em;fill:#7a6242;paint-order:stroke;stroke:#f3eee1;stroke-width:3;stroke-linejoin:round;opacity:.9}
text.vm-small{font-size:max(8px,calc(8.5px * var(--s)));fill:#6b5a3e;paint-order:stroke;stroke:#f3eee1;stroke-width:3;stroke-linejoin:round;opacity:.9}
text.vm-sign{font-weight:600;font-size:max(10px,calc(9px * var(--s)));fill:#6a5942;paint-order:stroke;stroke:#f3eee1;stroke-width:3;stroke-linejoin:round}
.vm-near text.vm-water,.vm-near text.vm-bay,.vm-near text.vm-beach{opacity:.35}
.vm-near .vm-trees{opacity:.55}

/* pins: drawn in screen pixels inside a group map.js scales with the zoom */
.vm-pin{cursor:pointer;outline:none}
.vm-pin .vm-sh{fill:rgba(40,30,15,.28)}
.vm-pin .vm-mk{fill:var(--vm-info);stroke:#2b2620;stroke-width:1.3;stroke-linejoin:round;paint-order:stroke}
.vm-k-eat .vm-mk{fill:var(--vm-eat)}.vm-k-stay .vm-mk{fill:var(--vm-stay)}.vm-k-visit .vm-mk{fill:var(--vm-visit)}.vm-k-shop .vm-mk{fill:var(--vm-shop)}.vm-k-services .vm-mk{fill:var(--vm-services)}.vm-k-walk .vm-mk{fill:var(--vm-walk)}
.vm-pin .vm-ic{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;color:#fff}
.vm-pin .vm-hit{fill:transparent}
.vm-pin .vm-lb{font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:12px;fill:#1f1f1f;paint-order:stroke;stroke:#f3eee1;stroke-width:3.2px;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.vm-pin.vm-lbl .vm-lb,.vm-pin.vm-on .vm-lb,.vm-pin:hover .vm-lb,.vm-pin:focus-visible .vm-lb{opacity:1}
.vm-pin.vm-on .vm-mk,.vm-pin:focus-visible .vm-mk{stroke:#1f1f1f;stroke-width:2.2}
.vm-pin.vm-on .vm-lb{fill:var(--vm-accent)}
.vm-pin.vm-dim{opacity:.16;pointer-events:none}
.vm-pin,.vm-pin .vm-pb{transition:opacity .25s}
.vm-far .vm-k-info,.vm-far.vm-all .vm-minor{display:none}
.vm-me .vm-ring{fill:#3d7cc9;opacity:.18}
.vm-me .vm-dot{fill:#3d7cc9;stroke:#fff;stroke-width:2.5}
@media (prefers-reduced-motion:no-preference){.vm-me .vm-ring{animation:vm-pulse 2s ease-out infinite}}
@keyframes vm-pulse{0%{transform:scale(.4);opacity:.45}100%{transform:scale(1.6);opacity:0}}

/* furniture on top of the sheet */
.vm-cart{position:absolute;left:12px;bottom:12px;padding:5px 12px 6px;background:rgba(253,252,249,.92);border:1px solid var(--vm-ink);outline:1px solid var(--vm-ink);outline-offset:2px;border-radius:1px;pointer-events:none}
.vm-cart b{display:block;font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:1.25rem;line-height:1.1;letter-spacing:.01em;color:var(--vm-ink)}
.vm-cart span{display:block;font-size:.8rem;color:#5d5b55;margin-top:2px}
.vm-rose{position:absolute;right:12px;bottom:12px;width:52px;height:52px;pointer-events:none}
.vm-rose .vm-rc{fill:rgba(253,252,249,.85);stroke:var(--vm-ink);stroke-width:.8}
.vm-rose .vm-rn{fill:#fdfcf9;stroke:var(--vm-ink);stroke-width:.9;stroke-linejoin:round}
.vm-rose .vm-rn2{fill:var(--vm-ink)}
.vm-rose .vm-re{fill:#fdfcf9;stroke:var(--vm-ink);stroke-width:.8;stroke-linejoin:round}
.vm-rose .vm-rd{fill:none;stroke:var(--vm-ink);stroke-width:.6;opacity:.7}
.vm-rose .vm-rt{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:8px;fill:var(--vm-ink)}
.vm-scale{position:absolute;right:76px;bottom:16px;font-size:.8rem;font-weight:600;color:#5d5344;pointer-events:none;line-height:1;text-align:right}
.vm-scale i{display:block;height:6px;border:1.5px solid #6b5f4a;border-top:0;margin-bottom:3px;background:rgba(253,252,249,.5)}
.vm-ctl{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px}
.vm-b{width:44px;height:44px;border:1px solid var(--vm-ink);border-radius:2px;background:rgba(253,252,249,.95);color:var(--vm-ink);font:600 24px/1 "Source Sans 3",system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;touch-action:manipulation}
.vm-b:hover{background:#fff}
.vm-b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vm-b.vm-busy{color:#8a8479}
.vm-edges{position:absolute;inset:0;pointer-events:none}
.vm-edge{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;min-height:32px;background:rgba(253,252,249,.95);border:1px solid var(--vm-ink);border-radius:16px;font-size:.8rem;font-weight:600;color:var(--vm-ink);cursor:pointer;white-space:nowrap;font-family:inherit}
.vm-edge svg{width:14px;height:14px;flex:none}
.vm-edge small{font-weight:400;color:#5d5b55}
.vm-toast{position:absolute;left:50%;bottom:52px;transform:translate(-50%,8px);background:var(--vm-ink);color:#fdfcf9;padding:8px 14px;border-radius:2px;font-size:.9rem;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100% - 24px);text-align:center}
.vm-toast.vm-show{opacity:1;transform:translate(-50%,0)}
.vm-hint{font-size:.875rem;color:#5d5b55;margin:8px 0 0}

/* the place panel: a sheet from the bottom on phones, docked on the right beside the buttons on wider screens */
.vm-panel{position:absolute;left:0;right:0;bottom:0;max-height:64%;overflow:auto;background:#fdfcf9;border-top:1px solid var(--vm-ink);padding:14px 16px 16px;transform:translateY(100%);transition:transform .25s ease-out;z-index:2;cursor:auto}
.vm-panel:not([hidden]){transform:none}
.vm-panel[hidden]{display:block;visibility:hidden}
.vm-x{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:none;font:400 30px/1 "Source Sans 3",system-ui,sans-serif;color:#5d5b55;cursor:pointer;border-radius:2px}
.vm-x:hover{color:#1f1f1f;background:#efece3}
.vm-pc{padding-right:40px}
.vm-pc .vm-cat{font-size:.85rem;color:#5d5b55;margin:0 0 2px;display:flex;align-items:center;gap:6px}
.vm-pc .vm-cat i{width:9px;height:9px;border-radius:50%;background:var(--vm-info);flex:none}
.vm-pc h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:1.2rem;line-height:1.2;margin:0 0 6px;color:#1f1f1f}
.vm-pc p{margin:0 0 6px;font-size:.95rem;line-height:1.45}
.vm-pc .vm-status{font-size:.9rem;font-weight:600;margin:0 0 8px}
.vm-pc .vm-status.vm-yes{color:#2c6a48}.vm-pc .vm-status.vm-no{color:#7c5a3a}
.vm-pc .vm-ph{float:right;width:108px;height:81px;object-fit:cover;border-radius:2px;margin:0 0 8px 12px;background:#efece3}
.vm-pc .vm-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;clear:both}
.vm-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border:1px solid var(--vm-accent);border-radius:2px;background:var(--vm-accent);color:#fff;font:600 .95rem/1.2 "Source Sans 3",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.vm-btn.vm-ghost{background:transparent;color:var(--vm-accent)}
.vm-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:760px){
  .vm-panel{left:auto;right:64px;top:12px;bottom:auto;width:320px;max-height:calc(100% - 24px);border:1px solid var(--vm-ink);border-radius:2px;transform:translateX(12px);opacity:0;transition:transform .2s ease-out,opacity .2s}
  .vm-panel:not([hidden]){transform:none;opacity:1}
  .vm-pc .vm-ph{float:none;display:block;width:100%;height:auto;aspect-ratio:16/9;margin:2px 0 10px}
}
@media (max-width:759px){.vm-open .vm-rose,.vm-open .vm-scale,.vm-open .vm-cart{opacity:0}.vm-cart b{font-size:1.05rem}.vm-cart span{font-size:.72rem}.vm-cart{padding:4px 10px 5px}.vm-edge{font-size:.75rem;padding:4px 8px 4px 6px;min-height:28px}}
@media (prefers-reduced-motion:reduce){.vm *,.vm *::before,.vm *::after{transition:none!important;animation:none!important}}

/* the list under the map on /map */
.vm-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem;color:#5d5b55;margin:10px 0 0}
.vm-list{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.vm-list li{break-inside:avoid;padding:5px 0;border-bottom:1px solid #e6e2d7}
.vm-list .cat{color:#5d5b55}
.vm-list .sm{font-size:.875rem;color:#5d5b55}
@media (max-width:640px){.vm-list{columns:1}}

/* the label is part of the pin: tapping the name opens it too */
.vm-pin text{pointer-events:auto;cursor:pointer}