.neighborhoods-map-page {
  min-height: 100vh;
  background: #fbf9f5;
}

.neighborhoods-map-page [hidden] {
  display: none !important;
}

.neighborhoods-header {
  position: relative;
  z-index: 500;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 14px 34px rgba(28, 34, 44, 0.08);
}

.neighborhood-map-shell {
  height: calc(100dvh - 86px);
  min-height: 720px;
}

.map-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #e6f3f7;
}

.real-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.9), transparent 28%),
    #dceff5;
}

.real-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 420;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(251, 249, 245, 0.64), transparent 19%, transparent 82%, rgba(251, 249, 245, 0.2)),
    radial-gradient(ellipse at 0 20%, rgba(251, 249, 245, 0.92), transparent 28%),
    radial-gradient(ellipse at 100% 100%, rgba(251, 249, 245, 0.92), transparent 28%);
}

.leaflet-container {
  font-family: var(--sans);
  background: #dceff5;
}

.leaflet-control-attribution {
  padding: 4px 8px;
  color: rgba(20, 25, 35, 0.58);
  background: rgba(255, 255, 255, 0.76);
  border-radius: 8px 0 0 0;
  font-size: 10px;
}

.map-search-panel {
  position: absolute;
  top: 38px;
  left: 54px;
  z-index: 460;
  display: flex;
  align-items: start;
  gap: 10px;
}

.map-search {
  width: min(326px, calc(100vw - 132px));
  height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(28, 34, 44, 0.14);
  backdrop-filter: blur(18px);
}

.map-search svg,
.map-filter-button svg,
.map-zoom-card svg,
.detail-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #161a22;
  background: transparent;
  font: 600 15px/1 var(--sans);
}

.map-search input::placeholder {
  color: #7b8390;
}

.map-filter-button {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #151922;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(28, 34, 44, 0.14);
  cursor: pointer;
  backdrop-filter: blur(18px);
}

.map-filter-button:hover,
.map-filter-button[aria-expanded="true"] {
  color: var(--red);
  border-color: rgba(215, 25, 32, 0.22);
}

.map-filters {
  position: absolute;
  top: 64px;
  left: 0;
  width: min(390px, calc(100vw - 42px));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(28, 34, 44, 0.14);
  backdrop-filter: blur(18px);
}

.map-filters button {
  min-height: 34px;
  padding: 0 13px;
  color: #303743;
  background: rgba(251, 249, 245, 0.86);
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

.map-filters button.is-active,
.map-filters button:hover {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.map-zoom-card {
  position: absolute;
  left: 54px;
  bottom: 62px;
  z-index: 460;
  overflow: hidden;
  display: grid;
  width: 54px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(28, 34, 44, 0.16);
}

.map-zoom-card button {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #151922;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(20, 25, 35, 0.1);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.map-zoom-card button:last-child {
  border-bottom: 0;
}

.map-zoom-card button:hover {
  color: var(--red);
  background: rgba(215, 25, 32, 0.06);
}

.leaflet-marker-icon.neighborhood-marker-icon {
  overflow: visible;
}

.neighborhood-marker {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 22px;
  height: 28px;
  padding: 0;
  color: #1d2430;
  background: transparent;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: none;
}

.neighborhood-marker .marker-pin,
.neighborhood-marker .marker-label {
  pointer-events: auto;
  cursor: pointer;
}

.neighborhood-marker .marker-pin {
  position: relative;
  display: block;
  width: 22px;
  height: 28px;
  flex: 0 0 22px;
  background: linear-gradient(180deg, #e32731 0%, #b90f18 100%);
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 8px 16px rgba(96, 12, 18, 0.22);
  transform: rotate(-45deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.neighborhood-marker .marker-pin::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 50%;
}

.neighborhood-marker .marker-label {
  position: absolute;
  left: 30px;
  top: 3px;
  display: block;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(28, 34, 44, 0.15);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.neighborhood-marker.is-secondary .marker-label {
  opacity: 0;
  transform: translateX(-6px);
}

/* .is-hovered is set by neighborhoods.js instead of using :hover, because a
   latched :hover left labels stranded on the map after a pan or zoom. */
.neighborhood-marker.is-secondary.is-hovered .marker-label,
.neighborhood-marker.is-secondary.is-active .marker-label,
.neighborhood-marker.is-secondary.is-search-match .marker-label {
  opacity: 1;
  transform: translate(0, -4px);
}

.neighborhood-marker.is-hovered .marker-pin,
.neighborhood-marker.is-active .marker-pin {
  box-shadow: 0 10px 24px rgba(185, 15, 24, 0.28);
  transform: rotate(-45deg) scale(1.08);
}

.neighborhood-marker.is-hovered .marker-label,
.neighborhood-marker.is-active .marker-label {
  color: #fff;
  background: var(--red);
  transform: translateY(-4px);
}

.leaflet-marker-icon.is-hidden {
  display: none;
}

.neighborhood-detail-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 470;
  width: min(930px, calc(100vw - 96px));
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 0.88fr;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 10px;
  box-shadow: 0 26px 76px rgba(28, 34, 44, 0.26);
  transform: translate(-50%, -46%);
  backdrop-filter: blur(24px);
}

.neighborhood-detail-card[hidden] {
  display: none;
}

.detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #151922;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(28, 34, 44, 0.12);
  cursor: pointer;
}

.detail-close:hover {
  color: var(--red);
}

/* Stage holds the main photo; thumbnails sit below it in normal flow so they
   never cover the image. */
.detail-media {
  display: flex;
  flex-direction: column;
  /* Without this the non-shrinking thumbnail row sets a min-content width and
     pushes the whole card wider than the viewport on small screens. */
  min-width: 0;
  min-height: 520px;
  background: #e7edf1;
}

.detail-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.detail-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  color: #171b23;
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.detail-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.detail-nav:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.detail-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-nav-prev { left: 14px; }
.detail-nav-next { right: 14px; }

.detail-nav[hidden] { display: none; }

.neighborhood-detail-card.is-photo-empty .detail-media {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 38px;
  background:
    linear-gradient(135deg, rgba(212, 22, 32, 0.08), transparent 42%),
    linear-gradient(180deg, #f8f5ee, #eef4f6);
}

.neighborhood-detail-card.is-photo-empty .detail-stage,
.neighborhood-detail-card.is-photo-empty .detail-thumbs {
  display: none;
}

.neighborhood-detail-card.is-photo-empty .detail-media::before {
  content: "Verified photos are being curated for this area.";
  max-width: 360px;
  color: #171b23;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

/* Keeps the credit legible over bright photos. */
.detail-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(12, 16, 22, 0.5));
  pointer-events: none;
}

/* Small overlay on the photo itself — required by CC BY / CC BY-SA. */
.detail-credit {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.detail-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* One row beneath the photo; scrolls horizontally when it cannot fit. */
.detail-thumbs {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 14px;
  overflow-x: auto;
  background: #101720;
  scrollbar-width: thin;
}

/* 60px keeps the largest gallery (7 photos) on one row without scrolling. */
.detail-thumbs button {
  flex: 0 0 auto;
  width: 60px;
  height: 44px;
  overflow: hidden;
  padding: 0;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 7px;
  opacity: 0.62;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.detail-thumbs button:hover {
  opacity: 1;
}

.detail-thumbs button.is-active {
  border-color: var(--red);
  opacity: 1;
}

.detail-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 44px 38px 34px;
  /* So the title can size against this column rather than the window. */
  container-type: inline-size;
}

.detail-kicker {
  margin: 0 0 12px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Sized in cqi (percent of the title column) rather than vw. Keyed to the
   viewport, a wide window pushed the title to 53px while the column stayed
   358px, and "Fontainebleau" - the longest name on the map at 13 characters,
   and the only one with no space to wrap at - ran past the edge of the card.
   Against the column it cannot outgrow the space it is given. */
.detail-copy h2.detail-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 12.6cqi, 58px);
  line-height: 0.94;
  overflow-wrap: break-word;
}

.detail-copy > p:not(.detail-kicker):not(.detail-source) {
  margin: 18px 0 0;
  color: #3e4652;
  font-size: 16px;
  line-height: 1.58;
}

.detail-stats {
  display: grid;
  gap: 10px;
  margin: 24px 0;
}

.detail-stats div {
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 25, 35, 0.1);
}

.detail-stats dt {
  color: #7a8391;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-stats dd {
  margin: 0;
  color: #171b23;
  font-weight: 820;
  line-height: 1.35;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.detail-source {
  margin: 18px 0 0;
  color: #848c98;
  font-size: 11px;
  line-height: 1.4;
}

.map-empty-state {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 465;
  padding: 16px 18px;
  color: #151922;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(28, 34, 44, 0.16);
  font-weight: 800;
  transform: translate(-50%, -50%);
}

@media (max-width: 1180px) {
  .neighborhood-map-shell {
    height: calc(100dvh - 76px);
  }
}

@media (max-width: 900px) {
  .neighborhood-map-shell {
    height: calc(100dvh - 70px);
    min-height: 680px;
  }

  .map-search-panel {
    top: 14px;
    left: 12px;
    right: 12px;
  }

  .map-search {
    width: 100%;
  }

  .map-filters {
    right: 0;
    width: 100%;
  }

  .map-zoom-card {
    left: 12px;
    bottom: 18px;
  }

  .neighborhood-marker .marker-label {
    display: none;
  }

  .neighborhood-detail-card {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    max-height: min(78dvh, 720px);
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: auto;
    border-radius: 10px;
    transform: none;
  }

  /* The photo's height must NOT be driven by the card's width. This was
     `aspect-ratio: 1.05`, which is fine on a phone but on a tablet the card is
     ~750px wide - so the photo computed to ~710px and filled the entire card.
     The neighbourhood's name and description were below the fold the moment it
     opened, which read as the panel being broken.

     Measure against the viewport instead, so the photo takes a predictable
     slice of the screen and the text is always in view. vh first as a fallback
     for anything without dvh. */
  .detail-media {
    min-height: 0;
    aspect-ratio: auto;
    height: min(38vh, 380px);
    height: min(38dvh, 380px);
  }

  /* 34px was below the 44px minimum touch target; these sit over a photo and
     are the only way to page through it on a phone. */
  .detail-nav {
    width: 44px;
    height: 44px;
  }

  .detail-nav svg {
    width: 18px;
    height: 18px;
  }

  .detail-copy {
    padding: 28px 22px 24px;
  }

  .detail-copy h2.detail-title {
    font-size: clamp(32px, 12.6cqi, 42px);
  }

  .detail-actions {
    display: grid;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .map-search-panel {
    gap: 8px;
  }

  .map-search,
  .map-filter-button {
    height: 50px;
  }

  .map-filter-button {
    width: 50px;
  }

  .detail-thumbs {
    gap: 6px;
    padding: 8px 10px;
  }

  .detail-thumbs button {
    width: 64px;
    height: 46px;
  }

  .detail-credit {
    font-size: 10px;
  }

  .detail-stats div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}


/* --- Neighborhood comparison checklist ------------------------------------ */
/* The Resources library links here promising a checklist; this is it. */
.compare-checklist {
  padding: clamp(48px, 6vw, 88px) clamp(18px, 4vw, 48px);
  background: var(--soft, #f7f7f5);
  border-top: 1px solid var(--line, #e4e6ea);
}

.compare-checklist-inner { max-width: 1080px; margin: 0 auto; }

.compare-checklist h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  margin: 6px 0 14px;
  letter-spacing: -0.8px;
}

.compare-checklist-intro {
  max-width: 720px;
  color: var(--muted, #5b616b);
  margin: 0 0 clamp(24px, 3vw, 38px);
}

.compare-checklist-list {
  list-style: none;
  counter-reset: check;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}

.compare-checklist-list li {
  counter-increment: check;
  position: relative;
  padding-left: 46px;
  break-inside: avoid;
}

.compare-checklist-list li::before {
  content: counter(check);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-red, #d7192b);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.compare-checklist-list h3 {
  margin: 4px 0 6px;
  font-size: 17px;
  line-height: 1.3;
}

.compare-checklist-list p {
  margin: 0;
  color: var(--muted, #5b616b);
  font-size: 14.5px;
  line-height: 1.6;
}

.compare-checklist-foot {
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e4e6ea);
  color: var(--muted, #5b616b);
}

.compare-checklist-foot a { color: var(--brand-red, #d7192b); font-weight: 700; }

@media print {
  .compare-checklist { break-before: page; background: #fff; }
  .compare-checklist-list { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Neighborhood profiles
   The same sixteen profiles the map panel shows, rendered as static text so
   they exist for a crawler on the first pass and for anyone without JS. The
   map is unchanged; this sits below it.
--------------------------------------------------------------------------- */
.nb-profiles-section {
  background: var(--soft, #fbf9f5);
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid rgba(20, 25, 35, 0.1);
}

.nb-profiles-shell {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
}

.nb-profiles-shell h2 {
  margin: 0 0 10px;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
}

.nb-profiles-lede {
  max-width: 68ch;
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--muted, #4d525a);
  font-size: 16px;
  line-height: 1.6;
}

.nb-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.nb-profile {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 34, 44, 0.06);
}

.nb-profile-kicker {
  margin: 0 0 4px;
  color: var(--red, #d71920);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nb-profile h3 {
  margin: 0 0 10px;
  font-family: var(--serif, Georgia, serif);
  font-size: 25px;
  line-height: 1.12;
}

.nb-profile-desc {
  margin: 0 0 16px;
  color: #2b3038;
  font-size: 15px;
  line-height: 1.6;
}

.nb-profile-facts {
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 25, 35, 0.1);
  display: grid;
  gap: 10px;
}

.nb-profile-facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.nb-profile-facts dt {
  color: var(--muted, #4d525a);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 2px;
}

.nb-profile-facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #2b3038;
}

.nb-profile-link {
  color: var(--red, #d71920);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.nb-profile-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .nb-profiles-shell {
    width: calc(100% - 24px);
  }
  .nb-profiles-grid {
    grid-template-columns: 1fr;
  }
  .nb-profile-facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Scroll targets for the profile links. Zero-size and out of the flow: they
   exist so `#brickell` lands on the map, where the hash handler opens the
   matching panel. scroll-margin clears the sticky header. */
.nb-anchor {
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
  scroll-margin-top: 96px;
}