/* Nearby: the city box, the map, one ruled row per place with its distance */
.near-hero { padding-bottom: 30px; }
.near-find { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 30px; }
.near-box { position: relative; flex: 0 1 400px; min-width: 0; }
.near-box input { width: 100%; height: 48px; font: 400 21px/1.2 var(--serif); color: var(--ink); background: transparent; border: 0;
  border-bottom: 2px solid var(--ink); border-radius: 0; padding: 0; outline: 0; -webkit-appearance: none; appearance: none; }
.near-box input::placeholder { color: var(--muted); font-style: italic; opacity: 1; }
.near-box input::-webkit-search-cancel-button { display: none; }
.near-box input:focus { border-bottom-color: var(--ember); }
.near-sug { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: var(--bg); border: 1px solid var(--ink); border-top: 0; }
.near-sug[hidden] { display: none; }
.near-sug li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 12px 9px; font-size: 19px; line-height: 1.2;
  border-bottom: 1px solid var(--rule); cursor: pointer; }
.near-sug li:last-child { border-bottom: 0; }
.near-sug li i { font-size: 15px; color: var(--muted); text-align: right; }
.near-sug li.on, .near-sug li:hover { background: var(--tint); }
#near-me { height: 48px; padding: 1px 22px 0; font: 500 12px/1 var(--serif); letter-spacing: .11em; text-transform: uppercase; color: var(--ink);
  background: none; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
#near-me:hover { background: var(--ink); color: var(--bg); }
#near-me:disabled { color: var(--muted); border-color: var(--rule); background: none; cursor: default; }
.near-note { margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }

.near-out { margin-top: 0 !important; }
.near-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.near-units { display: flex; gap: 12px; margin-left: auto; }
.near-units[hidden] { display: none; }
.near-units button { border: 0; border-bottom: 1px solid transparent; background: none; padding: 0 0 1px; cursor: pointer; color: var(--muted);
  font: 500 12px/1.3 var(--serif); letter-spacing: .11em; text-transform: uppercase; }
.near-units button:hover { color: var(--ink); }
.near-units button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.near-lists { display: flex; flex-wrap: wrap; gap: 6px; }
.near-lists[hidden] { display: none; }
.near-lists button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); border-radius: 99px; background: none; color: var(--muted); cursor: pointer;
  padding: 5px 12px 4px 10px; font: 500 12px/1.3 var(--serif); letter-spacing: .11em; text-transform: uppercase; }
.near-lists button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-top: -1px; }
.near-lists button i { font-style: normal; opacity: .7; }
.near-lists button:hover { border-color: var(--ink); color: var(--ink); }
.near-lists button[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.near-lists button[aria-pressed="true"]::before { background: #fff; }
.near-out .listhead { align-items: center; padding-top: 7px; }
.near-out[hidden] { display: none; }
.near-map { height: clamp(260px, 40vw, 440px); margin-top: 14px; border-bottom: 1px solid var(--rule); font-family: var(--serif); }
.near-map[hidden] { display: none; }
.near-pin { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--c, #141310); color: #fff; border: 1.5px solid #fbfaf6;
  font: 600 13px/1 var(--serif); font-variant-numeric: lining-nums; cursor: pointer; }
.near-pin[hidden] { display: none; }
.near-here { width: 16px; height: 16px; border-radius: 50%; background: #fbfaf6; border: 4.5px solid #141310; }
@media (prefers-color-scheme: dark) {       /* the map is dark as well */
  .near-here { background: #121210; border-color: #ebe7de; }
}

.near-rows li { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; column-gap: 30px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule);
  scroll-margin-top: 12px; }
.near-rows li.on { border-bottom-color: var(--ink); box-shadow: 0 -1px 0 var(--ink); }
.near-pic { display: block; aspect-ratio: 1; }
.near-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-color-scheme: light) { .near-pic .art { mix-blend-mode: multiply; } }
@media (prefers-color-scheme: dark) { .near-pic img { background: var(--plate); border-radius: 2px; } }
.near-rows li[hidden] { display: none; }
.near-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; font-size: 12px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.near-rank b { background: var(--c); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px 3px; border-radius: 2px; }
.near-rank b i { font-style: normal; font-weight: 500; opacity: .78; }
.near-rank u { text-decoration: none; color: var(--ember); font-weight: 600; }
.near-rows h3 { margin-top: 5px; font-size: clamp(23px, 2.4vw, 31px); line-height: 1.08; font-weight: 500; letter-spacing: -.014em; overflow-wrap: anywhere; }
.near-rows h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.near-place { margin-top: 5px; font-style: italic; color: var(--muted); }
.near-dist { display: grid; justify-items: end; gap: 9px; white-space: nowrap; }
.near-dist b { font-size: 34px; line-height: 1; font-weight: 500; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.near-dist span { margin-left: 6px; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.near-dist a { font-size: 12px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.near-dist a:hover { border-bottom-color: var(--ink); }
.near-dist a::after { content: " ↗"; color: var(--muted); }

.near-cities .listhead { display: block; }
.near-cities .countries { margin-top: 12px; }
.near-credit { max-width: calc(var(--max) + 2 * var(--pad)); margin: 28px auto 0; padding: 0 var(--pad); font-size: 14px; color: var(--muted); }
.near-credit a { border-bottom: 1px solid var(--rule); }

@media (max-width: 860px) {
  .near-box { flex-basis: 100%; }
  .near-out .listhead { position: relative; }
  .near-units { position: absolute; right: 0; top: 8px; }
  .near-lists button { font-size: 10.5px; letter-spacing: .08em; padding: 4px 10px 3px 8px; gap: 6px; }
  .near-lists button::before { width: 8px; height: 8px; }
  #near-me { width: 100%; }
  .near-rows li { grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; padding: 14px 0; align-items: start; }
  .near-pic { grid-row: 1 / span 2; }
  .near-rows h3 { font-size: 21px; }
  .near-place { font-size: 15px; }
  .near-dist { grid-column: 2; display: flex; align-items: baseline; justify-content: space-between; margin-top: 9px; }
  .near-dist b { font-size: 22px; }
  .near-dist span { margin-left: 5px; }
}