:root{
  --cream:#FBF7EF;
  --sand:#EFE3CC;
  --ink:#3A362E;
  --muted:#8A806E;
  --line: rgba(58,54,46,0.14);
  --mark:#7C87C4;
  --accent:#55619E;
  --accent-ink:#FBF7EF;
  --card-bg:#FFFFFF;
  --card-shadow: 0 18px 40px -18px rgba(58,54,46,0.35);
  --cat-beach:#3E7691;
  --cat-food:#55619E;
  --cat-essentials:#9C7245;
  --cat-explore:#3F8F6C;
  --cat-transport:#6E7180;
}
@media (prefers-color-scheme: dark){
  :root{
    --cream:#211F2E;
    --sand:#2B2942;
    --ink:#F1EDE1;
    --muted:#B4A99A;
    --line: rgba(241,237,225,0.14);
    --mark:#A6AEDD;
    --accent:#9AA3D9;
    --accent-ink:#1B1930;
    --card-bg:#2A2840;
    --card-shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
    --cat-beach:#6FB0CE;
    --cat-food:#9AA3D9;
    --cat-essentials:#D1A574;
    --cat-explore:#7FCBA4;
    --cat-transport:#A6A9BE;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--cream); color:var(--ink); font-family:'Karla', ui-sans-serif, system-ui, sans-serif; }
.page{ max-width:780px; margin:0 auto; padding:18px 16px 32px; }
h1,h2{ font-family:'Newsreader', Georgia, 'Times New Roman', serif; font-weight:500; margin:0; }
.top{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.eyebrow{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.top h1{ font-size:clamp(24px,5vw,30px); }
.top p{ margin:2px 0 0; color:var(--muted); font-size:14px; max-width:60ch; }

.map-wrap{
  width:100%; aspect-ratio:4/3; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--card-shadow); background:var(--sand);
}
@media (min-width:600px){ .map-wrap{ aspect-ratio:16/9; } }
.gmap{ width:100%; height:100%; border:0; display:block; }

.map-caption{
  display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:8px;
}
.map-caption a{ color:var(--accent); font-weight:600; text-decoration:none; }
.map-caption a:hover{ text-decoration:underline; }
.map-attrib{ margin:2px 0 0; font-size:10.5px; color:var(--muted); }
.map-attrib a{ color:var(--muted); }

.map-pin{
  width:34px; height:34px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--cat,var(--accent)); border:2px solid var(--card-bg); box-shadow:var(--card-shadow);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.map-pin svg{ width:16px; height:16px; transform:rotate(45deg); stroke:#fff; }
/* A Host pick with a real photo gets a round, white-ringed photo pin on the map
   itself — the same circular photo-marker treatment as the house pin — rather
   than a flat icon droplet. Picks without a photo yet (e.g. the ATM) keep the
   icon droplet above. */
.map-pin--photo{
  width:44px; height:44px; border-radius:50%; transform:none; border:3px solid var(--card-bg);
  box-shadow:0 0 0 2px var(--cat,var(--accent)), var(--card-shadow); overflow:hidden; z-index:4;
}
.map-pin--photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.map-pin--house{
  width:52px; height:52px; border-radius:50%; transform:none; border:3px solid var(--mark);
  box-shadow:0 0 0 2px var(--mark), var(--card-shadow); overflow:hidden; z-index:6;
}
.map-pin--house img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.map-pin--house svg{ transform:none; stroke:#fff; }
.map-pin--active{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), var(--card-shadow); z-index:5; }
.map-pin--photo.map-pin--active{ box-shadow:0 0 0 3px color-mix(in srgb, var(--cat,var(--accent)) 55%, transparent), var(--card-shadow); }
.map-pin--house.map-pin--active{ box-shadow:0 0 0 3px color-mix(in srgb, var(--mark) 55%, transparent), var(--card-shadow); }
.maplibregl-ctrl-attrib{ display:none; }

/* Directory points/clusters that turn out to have a real photo (the curated
   subset — same sourcing Jordan's own site uses) get the same round photo-pin
   treatment as a Host pick, just a touch smaller since there can be several
   close together. */
.map-pin--dir{ width:38px; height:38px; z-index:3; }

/* A cluster with a photographed member — a round thumbnail with a white ring
   and a small count badge, replacing the plain dark circle underneath it. */
.photo-cluster{
  width:52px; height:52px; border-radius:50%; border:3px solid var(--card-bg);
  box-shadow:0 0 0 2px #3A362E, var(--card-shadow); overflow:hidden; position:relative;
  padding:0; cursor:pointer; background:none; z-index:4;
}
.photo-cluster img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-cluster-count{
  position:absolute; bottom:-2px; right:-2px; background:#3A362E; color:#FBF7EF;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; border:2px solid var(--card-bg);
}

/* On-map pill label shown above a pin when it's clicked — "Dover Beach · 4 min
   walk" — a compact, borderless popup rather than the full popup chrome used
   for directory places. */
.pin-label-popup .maplibregl-popup-tip{ display:none; }
.pin-label-popup .maplibregl-popup-content{
  background:var(--ink); color:var(--cream); padding:6px 12px; border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,0.4); white-space:nowrap;
}
.pin-label{ display:flex; align-items:baseline; gap:6px; font-size:12.5px; }
.pin-label strong{ font-weight:700; }
.pin-label span{ font-size:11px; opacity:0.8; }

.photo--house{ position:relative; overflow:hidden; }
.photo--house img{ width:100%; height:100%; object-fit:cover; }
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,0.35); color:#fff; border:none; cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.gal-prev{ left:10px; } .gal-next{ right:10px; }
.gal-count{
  position:absolute; bottom:10px; right:12px; font-size:11px; font-weight:700; color:#fff;
  background:rgba(0,0,0,0.35); padding:2px 8px; border-radius:999px;
}

.picks-heading{ margin-top:26px; font-size:19px; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.picks-heading .hint{ font-size:11.5px; font-weight:600; color:var(--muted); font-family:'Karla', sans-serif; white-space:nowrap; }

.filters{ display:flex; gap:8px; overflow-x:auto; padding:10px 0 4px; margin-bottom:4px; }
.chip{
  flex:none; border:1px solid var(--line); background:var(--card-bg); color:var(--ink);
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--dot,var(--muted)); }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.chip[aria-pressed="true"] .dot{ background:var(--accent-ink); }

.picks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; margin-top:10px; }
.pick-card{
  display:flex; align-items:center; gap:10px; text-align:left; background:var(--card-bg); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; cursor:pointer;
}
.pick-card[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.pick-icon{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--cat,var(--accent)); color:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--cat,var(--accent)) 35%, transparent);
}
.pick-icon svg{ width:16px; height:16px; }
.pick-icon img{ width:100%; height:100%; object-fit:cover; }
/* No thumbnail here — the photo already lives on the map pin. Just a category
   dot, so the card stays quick to scan. */
.pick-dot{ flex:none; width:11px; height:11px; border-radius:50%; background:var(--cat,var(--accent)); }
.pick-go{ flex:none; margin-left:auto; color:var(--muted); font-size:15px; }
.pick-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pick-name{ font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-time{ font-size:12px; color:var(--muted); font-weight:600; }

/* Nearby places — swipeable strip of the broader OpenStreetMap directory (not Host picks) */
.nearby-heading{ margin-top:26px; font-size:19px; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.nearby-heading .hint{ font-size:11.5px; font-weight:600; color:var(--muted); font-family:'Karla', sans-serif; white-space:nowrap; }
.nearby-strip{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; margin-top:10px; padding:2px 2px 8px;
}
.nearby-card{
  flex:none; scroll-snap-align:start; width:140px; display:flex; flex-direction:column; text-align:left;
  background:var(--card-bg); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer;
}
.nearby-thumb{
  width:100%; aspect-ratio:4/3; background:var(--cat,var(--accent)); color:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.nearby-thumb svg{ width:24px; height:24px; opacity:0.9; }
.nearby-thumb--photo img{ width:100%; height:100%; object-fit:cover; }
.nearby-body{ display:flex; flex-direction:column; gap:1px; min-width:0; padding:8px 10px 10px; }
.nearby-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nearby-dist{ font-size:11px; color:var(--muted); }

.panel{
  margin-top:14px; background:var(--card-bg); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--card-shadow); overflow:hidden;
}
.panel .photo{
  position:relative; aspect-ratio:16/8; width:100%;
  background:linear-gradient(135deg, var(--cat, var(--accent)) 0%, color-mix(in srgb, var(--cat, var(--accent)) 55%, var(--card-bg)) 100%);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.panel .photo svg{ width:15%; max-width:56px; opacity:0.85; }
.ph-tag{
  position:absolute; bottom:10px; left:12px; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(0,0,0,0.28); color:#fff; padding:3px 8px; border-radius:6px; font-weight:700;
}
.panel .body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; }
.panel .row1{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.panel h2{ font-size:20px; }
.cat-tag{ font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--cat,var(--accent)); }
.close-btn{
  flex:none; background:var(--sand); border:none; width:28px; height:28px; border-radius:50%; cursor:pointer;
  color:var(--muted); font-size:15px;
}
.time-badge{
  align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, var(--card-bg)); padding:4px 10px; border-radius:999px;
}
.panel p.desc{ margin:0; font-size:14.5px; line-height:1.55; max-width:60ch; }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.cta{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:700; font-size:13.5px;
  padding:10px 16px; border-radius:10px;
}
.cta.ghost{ background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.cta svg{ width:15px; height:15px; }

footer.credit{ margin-top:20px; text-align:center; font-size:11.5px; color:var(--muted); }
footer.credit a{ color:var(--accent); }

.maplibregl-popup-content{
  background:var(--card-bg); color:var(--ink); border-radius:12px; padding:12px 14px;
  font-family:'Karla', sans-serif; box-shadow:var(--card-shadow);
}
.maplibregl-popup-tip{ border-top-color:var(--card-bg) !important; border-bottom-color:var(--card-bg) !important; }
.dir-popup-cat{ font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.dir-popup h3{ font-family:'Newsreader', serif; font-weight:600; font-size:16px; margin:2px 0 4px; }
.dir-popup p{ margin:0 0 8px; font-size:12.5px; color:var(--muted); }
.cta.sm{ padding:6px 12px; font-size:12.5px; }
.dir-popup--photo{ margin:-12px -14px 8px; }
.dir-popup-photo{ width:100%; height:110px; object-fit:cover; display:block; border-radius:12px 12px 0 0; }
.dir-popup--photo .dir-popup-cat{ margin:10px 14px 0; }
.dir-popup--photo h3, .dir-popup--photo p{ margin-left:14px; margin-right:14px; }
.dir-popup--photo .cta{ margin-left:14px; }