/* area pages: same tokens as the profile pages (profile.css loads first) */
.loc h1{font-size:clamp(38px,5.6vw,68px);line-height:1.05;letter-spacing:-1px}
.loc h1 em{font-style:italic}
.loc .lead{color:var(--muted);font-size:16px;line-height:1.6;margin:-6px 0 18px}
.loc-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.loc .sub{margin:14px 0 20px}

/* closest areas: plain links split by space, the miles in gold */
.near{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:2;color:#d9cfc4}
.near b{display:block;font-size:11px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.near a{display:inline-block;margin-right:16px;transition:color .2s}
.near a:hover{color:var(--gold)}
.near i{font-style:normal;color:var(--gold);font-size:12px;margin-left:2px}

/* the live map */
.lmap{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 40%,rgba(255,170,90,.07),transparent 70%),var(--glass);aspect-ratio:4/3}
.lmap.wide{aspect-ratio:2/1;max-height:560px;width:100%;margin:24px 0 20px}
.lmap canvas{display:block;width:100%;height:100%}

/* a lady card here also shows her distance */
.mini em.dist{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.mini em.dist i{font-style:normal;font-weight:500;color:#ffe0b0;white-space:nowrap}
.mini em.dist u{text-decoration:none;white-space:nowrap}

.details.getting{margin-top:6px}

/* questions */
.qa{display:grid}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;gap:16px;padding:16px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:10px;height:10px;margin-top:5px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .25s}
.qa details[open] summary i{transform:rotate(-135deg)}
.qa p{padding:0 0 16px;color:var(--muted);font-size:15px;line-height:1.65}

/* hub */
.hub-top .sub{max-width:none}
.find{display:block}
.find span{display:block;margin-bottom:8px;font-size:11px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.find input{width:100%;padding:15px 20px;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:inherit;outline:0;transition:border-color .25s,box-shadow .25s}
.find input:focus{border-color:rgba(242,181,107,.6);box-shadow:0 0 24px rgba(255,150,70,.18)}
.find input::placeholder{color:var(--muted)}
.jump{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:14px;color:var(--muted)}
.jump a:hover{color:var(--gold)}
.region{scroll-margin-top:70px}
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.place{display:block;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--glass);transition:border-color .25s,transform .25s,box-shadow .25s}
.place[hidden]{display:none}
.place:hover{border-color:rgba(242,181,107,.55);transform:translateY(-2px);box-shadow:0 0 26px rgba(255,140,60,.16)}
.place small{font-size:10px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.place.has small{color:var(--gold)}
.place strong{display:block;margin:4px 0 6px;font-family:"Playfair Display",serif;font-size:22px;font-weight:500}
.place p{color:var(--muted);font-size:13.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:860px){
  .loc-top{grid-template-columns:1fr;gap:24px}
  .lmap.wide{aspect-ratio:4/3}
}