/* =======================================================================
   scmap.css - the illustrated map page (2026-10-29). Loaded by templates/map.html after leaflet.css and
   main.css. Every class starts with scm- so nothing collides with main.css. Fonts come from the site's own
   variables (--display, --ui, --mono). Brand colours only: ink, jade, bone, copper. No gold, no italics,
   no glow, no blur, no drop shadows: rings and rules carry the edges.
   ======================================================================= */
.scm{--scm-land:#F2EADB;--scm-ink:#0A1A24;--scm-ink2:#0F2738;--scm-jade:#1E5A52;--scm-bone:#F4EDE0;--scm-copper:#C26A3F;
  --scm-copper2:#9E5430;--scm-line:rgba(244,237,224,.16);--scm-ease:cubic-bezier(.2,.7,0,1);--scm-top:var(--nav-h,72px);
  position:relative;background:var(--scm-ink);color:var(--scm-bone);font-family:var(--ui)}
.scm *,.scm *::before,.scm *::after{box-sizing:border-box}

/* ---------- head ---------- */
.scm-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 48px;align-items:end;
  padding:calc(var(--scm-top) + clamp(26px,3.4vw,52px)) var(--gutter,24px) clamp(20px,2.2vw,30px)}
.scm-kick{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.78;margin:0 0 14px}
.scm-h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,78px);line-height:.96;letter-spacing:-.03em;margin:0;max-width:15ch}
.scm-sub{max-width:58ch;font-size:clamp(15px,1.1vw,17px);line-height:1.55;opacity:.84;margin:18px 0 0}
.scm-legend{list-style:none;margin:0;padding:0 0 4px;display:grid;gap:9px;font-size:12.5px;line-height:1.3;color:rgba(244,237,224,.82)}
.scm-legend li{display:flex;align-items:center;gap:10px}
.scm-lg{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.scm-lg svg{width:11px;height:11px;fill:currentColor}
.scm-lg--villa{background:var(--scm-ink);color:var(--scm-bone);box-shadow:0 0 0 2px var(--scm-copper),0 0 0 3.5px var(--scm-bone)}
.scm-lg--place{background:var(--scm-copper);color:var(--scm-bone);box-shadow:0 0 0 1.5px var(--scm-bone)}
.scm-lg--ring{border-radius:0;height:0;border-top:2px dotted var(--scm-copper)}
.scm-lg--sc{border-radius:2px;height:10px;background:rgba(194,106,63,.45);box-shadow:inset 0 0 0 1px var(--scm-copper)}

/* ---------- split: map left, list right ---------- */
.scm-split{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(360px,1fr);align-items:start;border-top:1px solid var(--scm-line)}
.scm-mapcol{position:sticky;top:var(--scm-top);height:calc(100vh - var(--scm-top));height:calc(100svh - var(--scm-top));min-height:540px;
  overflow:hidden;background:var(--scm-land);isolation:isolate}
.scm-map{position:absolute;inset:0;background:var(--scm-land);outline:none;scroll-margin-top:calc(var(--scm-top) + 8px);scroll-margin-bottom:76px}
.scm-map:focus-visible{box-shadow:inset 0 0 0 3px var(--scm-copper)}
.scm-listcol{min-width:0;background:var(--scm-ink);border-left:1px solid var(--scm-line)}
.scm .leaflet-container{background:var(--scm-land);font-family:var(--ui);font-size:14px}
.scm .leaflet-container a{color:inherit}
.scm .leaflet-container img.leaflet-tile{mix-blend-mode:normal;width:257px!important;height:257px!important}
.scm .leaflet-overlay-pane svg{max-width:none}
.scm-tiles--mid .leaflet-tile,.scm-tiles--core .leaflet-tile{transition:opacity .3s}
.scm-nojs{position:absolute;inset:auto 16px 16px 16px;margin:0;padding:12px 14px;background:var(--scm-ink);color:var(--scm-bone);font-size:14px;line-height:1.45;border-radius:4px}

/* ---------- labels drawn as HTML ---------- */
.scm-al,.scm-ringl{width:0!important;height:0!important;overflow:visible;pointer-events:none}
.scm-al.is-off,.scm-ringl.is-off{display:none}
.scm-al-t{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--ui);
  font-size:10.5px;font-weight:600;line-height:1.1;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,26,36,.74);
  text-shadow:1px 0 0 var(--scm-land),-1px 0 0 var(--scm-land),0 1px 0 var(--scm-land),0 -1px 0 var(--scm-land),
    1px 1px 0 var(--scm-land),-1px -1px 0 var(--scm-land),1px -1px 0 var(--scm-land),-1px 1px 0 var(--scm-land)}
.scm-al--big .scm-al-t{font-size:12px;letter-spacing:.2em;color:rgba(10,26,36,.82)}
.scm-al--small .scm-al-t{font-size:9.5px;letter-spacing:.12em}
.scm-al--park .scm-al-t{color:#134039;font-size:10px;letter-spacing:.22em}
.scm-al--peak .scm-al-t{text-transform:none;letter-spacing:.02em;font-size:11px;font-weight:600;color:rgba(10,26,36,.8);padding-left:11px}
.scm-al--peak .scm-al-t::before{content:"";position:absolute;left:0;top:50%;margin-top:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid rgba(10,26,36,.7)}
.scm-al--island .scm-al-t{text-transform:none;letter-spacing:.03em;font-size:10.5px;font-weight:600}
.scm-al--sea .scm-al-t,.scm-al--bay .scm-al-t,.scm-al--lagoon .scm-al-t{color:rgba(244,237,224,.7);text-shadow:none;font-weight:500}
.scm-al--sea .scm-al-t{font-size:11px;letter-spacing:.46em}
.scm-al--bay .scm-al-t{font-size:10.5px;letter-spacing:.32em}
.scm-al--lagoon .scm-al-t{font-size:9.5px;letter-spacing:.16em;color:rgba(244,237,224,.82)}
.scm-al--sc .scm-al-t{color:#85462A;font-size:12px;font-weight:700;letter-spacing:.2em}
.scm-ringl span{position:absolute;left:0;top:0;transform:translate(-50%,-100%) translateY(-5px);white-space:nowrap;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;color:rgba(244,237,224,.88)}

/* ---------- pins ---------- */
.scm-pin{width:0!important;height:0!important;margin:0!important;overflow:visible;outline:none;cursor:pointer}
.scm-pin.is-off{display:none}
.scm-pin-in{position:absolute;left:0;top:0;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;
  display:grid;place-items:center;background:var(--scm-copper);color:var(--scm-bone);
  box-shadow:0 0 0 2px var(--scm-bone),0 0 0 3px rgba(10,26,36,.42);
  transition:width .2s var(--scm-ease),height .2s var(--scm-ease),box-shadow .2s}
.scm-pin-g{display:grid;place-items:center;line-height:0}
.scm-pin-g svg{width:16px;height:16px;fill:currentColor}
.scm-pin-ph{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.scm-pin.has-ph .scm-pin-in{width:40px;height:40px;background:var(--scm-ink2)}
.scm-pin.has-ph .scm-pin-g{position:absolute;right:-6px;bottom:-6px;width:19px;height:19px;border-radius:50%;background:var(--scm-copper);box-shadow:0 0 0 2px var(--scm-bone)}
.scm-pin.has-ph .scm-pin-g svg{width:11px;height:11px}
.scm-pin-l{position:absolute;left:0;top:21px;transform:translateX(-50%);white-space:nowrap;text-align:center;opacity:0;pointer-events:none;
  font-family:var(--ui);font-size:12px;font-weight:600;line-height:1.15;color:var(--scm-ink);transition:opacity .15s;
  text-shadow:1px 0 0 var(--scm-land),-1px 0 0 var(--scm-land),0 1px 0 var(--scm-land),0 -1px 0 var(--scm-land),
    1px 1px 0 var(--scm-land),-1px -1px 0 var(--scm-land),1px -1px 0 var(--scm-land),-1px 1px 0 var(--scm-land)}
.scm-pin.has-ph .scm-pin-l{top:26px}
.scm-pin-l b{display:block;font-weight:600}
.scm-pin-s{display:block;margin-top:2px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,26,36,.7)}
.scm-pin.has-lab .scm-pin-l,.scm-pin:hover .scm-pin-l,.scm-pin.is-hot .scm-pin-l,.scm-pin:focus-visible .scm-pin-l{opacity:1}
.scm-pin:hover,.scm-pin.is-hot,.scm-pin:focus-visible{z-index:25000!important}
.scm-pin:hover .scm-pin-in,.scm-pin.is-hot .scm-pin-in,.scm-pin:focus-visible .scm-pin-in{width:36px;height:36px;box-shadow:0 0 0 2.5px var(--scm-bone),0 0 0 4.5px var(--scm-ink)}
.scm-pin.has-ph:hover .scm-pin-in,.scm-pin.has-ph.is-hot .scm-pin-in,.scm-pin.has-ph:focus-visible .scm-pin-in{width:48px;height:48px}
.scm-pin.is-dot .scm-pin-in{width:12px;height:12px;background:var(--scm-copper);box-shadow:0 0 0 2px var(--scm-bone),0 0 0 3px rgba(10,26,36,.4)}
.scm-pin.is-dot .scm-pin-g,.scm-pin.is-dot .scm-pin-ph{opacity:0}
.scm-pin.is-dot .scm-pin-l{top:12px}
.scm-pin.is-dot:hover .scm-pin-in,.scm-pin.is-dot.is-hot .scm-pin-in,.scm-pin.is-dot:focus-visible .scm-pin-in{width:30px;height:30px}
.scm-pin.is-dot:hover .scm-pin-g,.scm-pin.is-dot.is-hot .scm-pin-g,.scm-pin.is-dot:focus-visible .scm-pin-g,
.scm-pin.is-dot:hover .scm-pin-ph,.scm-pin.is-dot.is-hot .scm-pin-ph,.scm-pin.is-dot:focus-visible .scm-pin-ph{opacity:1}
.scm-pin.is-dot:hover .scm-pin-l,.scm-pin.is-dot.is-hot .scm-pin-l,.scm-pin.is-dot:focus-visible .scm-pin-l{top:21px}
/* the villa: ink disc, copper ring, label always on */
.scm-pin--villa .scm-pin-in{width:46px;height:46px;background:var(--scm-ink);color:var(--scm-bone);
  box-shadow:0 0 0 3px var(--scm-copper),0 0 0 5.5px var(--scm-bone),0 0 0 6.5px rgba(10,26,36,.45)}
.scm-pin--villa.has-ph .scm-pin-in{width:48px;height:48px}
.scm-pin--villa .scm-pin-g svg{width:22px;height:22px}
.scm-pin--villa.has-ph .scm-pin-g{width:22px;height:22px;right:-7px;bottom:-7px;background:var(--scm-ink);box-shadow:0 0 0 2px var(--scm-copper)}
.scm-pin--villa.has-ph .scm-pin-g svg{width:13px;height:13px}
.scm-pin--villa .scm-pin-l{top:33px;opacity:1}
.scm-pin--villa.lab-u .scm-pin-l{top:auto;bottom:33px}
.scm-pin--villa.lab-r .scm-pin-l{top:0;left:36px;transform:translateY(-50%);text-align:left}
.scm-pin--villa.lab-l .scm-pin-l{top:0;left:auto;right:36px;transform:translateY(-50%);text-align:right}
.scm-pin.is-under{display:none}
.scm-pin--villa .scm-pin-l b{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.01em}
.scm-pin--villa .scm-pin-s{color:#85462A}
.scm-pin--villa:hover .scm-pin-in,.scm-pin--villa.is-hot .scm-pin-in{width:52px;height:52px;box-shadow:0 0 0 3px var(--scm-copper),0 0 0 5.5px var(--scm-bone),0 0 0 7px var(--scm-ink)}

/* ---------- popup (desktop) ---------- */
.scm-pop .leaflet-popup-content-wrapper{background:var(--scm-bone);color:var(--scm-ink);border-radius:4px;padding:0;overflow:hidden;box-shadow:none;border:1px solid rgba(10,26,36,.3)}
.scm-pop .leaflet-popup-content{margin:0;width:auto!important;line-height:1.4;font-family:var(--ui)}
.scm-pop .leaflet-popup-tip{background:var(--scm-bone);box-shadow:none;border:1px solid rgba(10,26,36,.3)}
.scm .scm-pop a.leaflet-popup-close-button{top:7px;right:7px;width:28px;height:28px;border-radius:50%;background:var(--scm-ink);color:var(--scm-bone);font:400 18px/28px var(--ui);text-align:center;padding:0;z-index:2}
.scm .scm-pop a.leaflet-popup-close-button:hover,.scm .scm-pop a.leaflet-popup-close-button:focus-visible{background:var(--scm-copper2);color:var(--scm-bone)}
.scm-pc{width:min(300px,78vw)}
.scm-pc-a{display:block;color:inherit;text-decoration:none}
.scm-pc-m{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--scm-jade)}
.scm-pc-m img{width:100%;height:100%;object-fit:cover;display:block}
.scm-pc-m.is-glyph{display:none}
.scm-pc-b{display:block;padding:14px 40px 15px 16px}
.scm-pc-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#85462A}
.scm-pc-h{display:block;margin-top:5px;font-family:var(--display);font-weight:500;font-size:21px;line-height:1.1;letter-spacing:-.01em}
.scm-pc-p{display:block;margin-top:7px;font-size:13.5px;line-height:1.45;color:rgba(10,26,36,.82)}
.scm-pc-go{display:inline-block;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--scm-copper);padding-bottom:2px}
a.scm-pc-a:hover .scm-pc-go{color:#85462A}

/* ---------- controls on the map ---------- */
.scm-ctl{position:absolute;right:12px;top:12px;z-index:800;display:grid;gap:6px}
.scm-btn{width:40px;height:40px;min-width:0;padding:0;display:grid;place-items:center;border-radius:4px;cursor:pointer;
  background:var(--scm-ink);color:var(--scm-bone);border:1px solid rgba(244,237,224,.24);transition:background .2s}
.scm-btn:hover{background:var(--scm-copper2)}
.scm-btn[aria-pressed=true]{background:var(--scm-copper2)}
.scm-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.scm-btn--sep{margin-top:6px}
.scm-attr{position:absolute;left:8px;bottom:6px;z-index:800;margin:0;max-width:calc(100% - 70px);font-size:10.5px;line-height:1.3;
  color:var(--scm-ink);background:rgba(244,237,224,.9);padding:2px 7px;border-radius:2px}
.scm-attr a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.scm .leaflet-bottom.leaflet-left{bottom:28px;left:8px}
.scm .leaflet-control-scale{margin:0!important}
.scm .leaflet-control-scale-line{background:rgba(244,237,224,.9);color:var(--scm-ink);border:1.5px solid rgba(10,26,36,.75);border-top:none;
  font:600 10px/1.4 var(--ui);letter-spacing:.04em;padding:1px 6px 2px}
.scm-hint{position:absolute;left:0;right:0;bottom:132px;z-index:810;display:flex;justify-content:center;pointer-events:none}
.scm-hint[hidden]{display:none}
.scm-explore{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:0;cursor:pointer;
  background:var(--scm-copper2);color:var(--scm-bone);font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.scm-explore svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---------- list column ---------- */
.scm:not(.is-live) .scm-bar,.scm:not(.is-live) .scm-ctl,.scm:not(.is-live) .scm-attr,.scm:not(.is-live) .scm-strip{display:none}
.scm-bar{position:sticky;top:var(--scm-top);z-index:20;background:var(--scm-ink);padding:16px var(--gutter,24px) 14px;border-bottom:1px solid var(--scm-line);display:grid;gap:12px}
.scm-searchw{position:relative}
.scm-search{width:100%;min-height:46px;font:inherit;font-size:15px;color:var(--scm-bone);background:rgba(244,237,224,.06);border:1px solid var(--scm-line);border-radius:4px;padding:11px 92px 11px 40px}
.scm-search::placeholder{color:rgba(244,237,224,.55)}
.scm-search:focus{outline:none;border-color:var(--scm-copper)}
.scm-searchw>svg{position:absolute;left:13px;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;stroke:rgba(244,237,224,.65);stroke-width:1.7;pointer-events:none}
.scm-status{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(244,237,224,.75);pointer-events:none}
.scm-sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;display:grid;padding:6px;background:var(--scm-ink2);border:1px solid rgba(244,237,224,.22);border-radius:4px}
.scm-sugg[hidden]{display:none}
.scm-sugg-i{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:8px 10px;text-align:left;
  background:none;border:0;border-radius:3px;color:var(--scm-bone);font:inherit;cursor:pointer}
.scm-sugg-i:hover,.scm-sugg-i:focus-visible{background:rgba(244,237,224,.08)}
.scm-sugg-g{width:26px;height:26px;border-radius:50%;background:var(--scm-copper);display:grid;place-items:center}
.scm-sugg-g svg{width:13px;height:13px;fill:var(--scm-bone)}
.scm-sugg-i strong{font-family:var(--display);font-weight:500;font-size:16px;line-height:1.15}
.scm-sugg-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.scm-sugg-none{padding:8px 10px;font-size:13.5px;opacity:.75}
.scm-chips{display:flex;flex-wrap:wrap;gap:6px}
.scm-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 13px;border-radius:999px;border:1px solid var(--scm-line);
  background:transparent;color:rgba(244,237,224,.88);font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s}
.scm-chip svg{width:12px;height:12px;fill:currentColor}
.scm-chip:hover{border-color:rgba(244,237,224,.6)}
.scm-chip[aria-pressed=true]{background:var(--scm-bone);border-color:var(--scm-bone);color:var(--scm-ink)}

.scm-cards{padding:8px var(--gutter,24px) 40px}
.scm-villa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:center;margin:20px 0 6px;padding-bottom:26px;border-bottom:1px solid var(--scm-line)}
.scm-villa.no-ph{grid-template-columns:1fr}
.scm-villa-m{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--scm-ink2)}
.scm-villa-m img{width:100%;height:100%;object-fit:cover;display:block}
.scm-villa-k{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,237,224,.85)}
.scm-villa-k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--scm-ink);box-shadow:0 0 0 2px var(--scm-copper)}
.scm-villa-h{display:block;margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(28px,2.4vw,38px);line-height:1;letter-spacing:-.02em}
.scm-villa-p{margin:12px 0 0;font-size:15px;line-height:1.55;opacity:.85}
.scm-villa-f{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:16px}
.scm-villa-go{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--scm-copper);padding-bottom:3px}
.scm-villa-go:hover{color:#E4A27F}
.scm-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px 20px;padding-top:26px}
.scm-group[hidden]{display:none}
.scm-gh{grid-column:1/-1;margin:0 0 -4px;font-family:var(--display);font-weight:400;font-size:clamp(24px,1.9vw,30px);line-height:1.05;letter-spacing:-.015em}
.scm-card{position:relative;display:grid;align-content:start;gap:10px;min-width:0;padding:14px 0 0;border-top:1px solid var(--scm-line)}
.scm-card[hidden]{display:none}
.scm-card-a{display:grid;gap:10px;color:inherit;text-decoration:none}
.scm-card-m{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--scm-ink2)}
.scm-card-m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--scm-ease)}
.scm-card-m.is-glyph{display:none}
a.scm-card-a:hover .scm-card-m img,.scm-card.is-hot .scm-card-m img{transform:scale(1.03)}
.scm-card-b{display:grid;gap:6px}
.scm-card-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,224,.72)}
.scm-card-k svg{width:14px;height:14px;padding:2px;border-radius:50%;background:var(--scm-copper);fill:var(--scm-bone)}
.scm-card-h{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1;letter-spacing:-.01em;transition:color .2s}
.scm-card-p{font-size:14.5px;line-height:1.5;color:rgba(244,237,224,.8)}
.scm-card-go{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--scm-bone);justify-self:start;border-bottom:1px solid var(--scm-copper);padding-bottom:2px}
a.scm-card-a:hover .scm-card-h,.scm-card.is-hot .scm-card-h{color:#E4A27F}
.scm-card.is-hot{border-top-color:var(--scm-copper)}
.scm-loc{justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 12px;border-radius:999px;border:1px solid var(--scm-line);
  background:transparent;color:rgba(244,237,224,.9);font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.scm-loc:hover,.scm-loc:focus-visible{background:var(--scm-copper2);border-color:var(--scm-copper2);color:var(--scm-bone)}
.scm-loc svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.scm-empty{margin:24px var(--gutter,24px);font-size:15px;opacity:.8}
.scm-empty[hidden]{display:none}

/* ---------- beyond the map ---------- */
.scm-far{padding:clamp(48px,6vw,96px) var(--gutter,24px) clamp(40px,5vw,72px);background:var(--scm-ink2);border-top:1px solid var(--scm-line)}
.scm-far-h{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,60px);line-height:1;letter-spacing:-.025em}
.scm-far-sub{max-width:62ch;margin:14px 0 0;font-size:15.5px;line-height:1.55;opacity:.82}
.scm-far-list{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 26px}
.scm-far-i{min-width:0;border-top:1px solid var(--scm-line);padding-top:14px}
.scm-far-a{display:grid;gap:9px;color:inherit;text-decoration:none}
.scm-far-m{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--scm-ink)}
.scm-far-m img{width:100%;height:100%;object-fit:cover;display:block}
.scm-far-d{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,237,224,.75)}
.scm-far-n{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.05;letter-spacing:-.015em}
.scm-far-p{font-size:14.5px;line-height:1.5;opacity:.82}
.scm-far-go{justify-self:start;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--scm-copper);padding-bottom:2px}
a.scm-far-a:hover .scm-far-n{color:#E4A27F}
.scm-credits{margin:0;padding:22px var(--gutter,24px) 34px;font-size:12px;line-height:1.55;color:rgba(244,237,224,.66);border-top:1px solid var(--scm-line)}
.scm-credits a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.scm-credits strong{font-weight:600;color:rgba(244,237,224,.85)}

/* ---------- phone strip ---------- */
.scm-strip{display:none}

/* ---------- fullscreen ---------- */
.scm.is-full .scm-mapcol{position:fixed;inset:0;z-index:1200;top:0;height:100vh;height:100dvh;min-height:0}
html.scm-fs,html.scm-fs body{overflow:hidden}

/* ---------- smaller screens ---------- */
@media (max-width:999px){
  .scm-head{grid-template-columns:1fr}
  .scm-legend{grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 22px}
  .scm-split{grid-template-columns:1fr}
  .scm-mapcol{position:relative;top:auto;height:68vh;height:68svh;min-height:440px;max-height:780px}
  .scm-listcol{border-left:0}
  .scm-bar{top:var(--scm-top)}
  .scm-strip{position:absolute;left:0;right:0;bottom:0;z-index:805;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;padding:10px 12px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .scm-strip::-webkit-scrollbar{display:none}
  .scm-sc{flex:0 0 min(80vw,330px);scroll-snap-align:center;display:grid;grid-template-columns:88px minmax(0,1fr);min-height:92px;overflow:hidden;
    border-radius:4px;background:var(--scm-bone);color:var(--scm-ink);text-decoration:none;border:1px solid rgba(10,26,36,.28)}
  .scm-sc[hidden]{display:none}
  .scm-sc-m{display:block;width:88px;height:100%;min-height:92px;background:var(--scm-ink2);overflow:hidden}
  .scm-sc-m img{width:100%;height:100%;object-fit:cover;display:block}
  .scm-sc-m.is-glyph{display:grid;place-items:center;background:var(--scm-copper);color:var(--scm-bone)}
  .scm-sc-m.is-glyph svg{width:30px;height:30px;fill:currentColor}
  .scm-sc[data-id=villa] .scm-sc-m.is-glyph{background:var(--scm-ink)}
  .scm-sc-b{display:grid;align-content:center;gap:3px;padding:9px 12px;min-width:0}
  .scm-sc-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#85462A}
  .scm-sc-h{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .scm-sc-p{font-size:12.5px;line-height:1.35;color:rgba(10,26,36,.78);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .scm-sc-go{display:none}
  .scm-sc.is-hot{border-color:var(--scm-copper);box-shadow:inset 0 0 0 1px var(--scm-copper)}
  .scm .leaflet-bottom.leaflet-left{bottom:auto;top:12px;left:12px}
  .scm-attr{display:none}
  .scm.is-full .scm-attr{display:block;top:10px;bottom:auto;left:8px;max-width:calc(100% - 70px)}
  .scm.is-full .leaflet-bottom.leaflet-left{top:38px}
  .scm.is-full .scm-strip{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .scm-villa{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
}
@media (max-width:640px){
  .scm-head{padding-top:calc(var(--scm-top) + 22px)}
  .scm-legend{grid-template-columns:1fr 1fr;font-size:12px}
  .scm-mapcol{height:64vh;height:64svh;min-height:420px}
  .scm-villa{grid-template-columns:1fr}
  .scm-group{grid-template-columns:1fr}
  .scm-chip{padding:6px 11px;font-size:10.5px;min-height:34px}
  .scm-ctl{right:8px;top:8px;gap:5px}
  .scm-btn{width:38px;height:38px}
  .scm-hint{bottom:124px}
}
@media (prefers-reduced-motion:reduce){
  .scm-pin-in,.scm-card-m img,.scm-pin-l{transition:none}
}
