/* One neighborhood: photo and intro, numbered key details, location, then the pockets */

.nb-intro { margin-bottom: clamp(2.5rem, 6vw, 4rem); padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem); background: #2a2926; color: var(--paper); }
/* Dark with white text, like the homepage; with a photo (bg-<id>.jpg), the photo shows darkened behind it */
.nb-intro[style] { background: linear-gradient(rgb(20 19 17 / 0.82), rgb(20 19 17 / 0.82)), var(--photo) center / cover #2a2926; }
.nb-intro .nb-crumbs { color: #e8e3da; }
/* Brighter and a little heavier than elsewhere, so it reads easily over the photo */
.nb-intro .nb-intro__text { color: #f4efe7; font-weight: 400; }
.nb-intro .label { color: #d9a184; }
.nb-intro .label { margin-top: 0.9rem; }
.nb-crumbs { display: flex; gap: 0.6rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); font-size: 0.85rem; color: var(--muted); }
.nb-crumbs { flex-wrap: wrap; }
.nb-crumbs a { color: inherit; white-space: nowrap; }
/* The map on the left; the name, borough and first part of the overview beside it, lined up with its top.
   The rest of the overview starts its own row underneath. */
.nb-intro__top { display: grid; gap: 1.75rem 3rem; }
.nb-intro__map { aspect-ratio: 1; }
@media (min-width: 48rem) {
  .nb-intro__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .nb-intro__map { aspect-ratio: auto; min-height: 24rem; } /* as tall as the text beside it */
}
.nb-intro__text.nb-intro__more { display: grid; gap: 0.85rem 3rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid rgb(251 249 245 / 0.25); }
@media (min-width: 48rem) { .nb-intro__text.nb-intro__more { grid-template-columns: 1fr 1fr; } }
.nb-intro__text.nb-intro__more p + p { margin-top: 0; }
.nb-intro h1 { margin-top: -0.12em; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.nb-intro__text { margin-top: 1.25rem; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); font-weight: 300; line-height: 1.65; color: var(--muted); }
.nb-intro__text p + p { margin-top: 0.85rem; }
.nb-intro__text strong { font-weight: 600; color: var(--ink); }
.nb-intro .nb-intro__text strong { color: #fff; }

.nb-section { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.nb-section > .small-label { padding-bottom: 0.9rem; border-bottom: 1px solid var(--ink); }

.keys { counter-reset: none; }
.key { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .key { grid-template-columns: 4rem minmax(0, 1fr); } }
.key__n { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 300; line-height: 1; color: var(--accent); }
.key__title { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.key p, .key ul { margin-top: 0.5rem; max-width: 46rem; color: var(--muted); }
.key p + p { margin-top: 0.6rem; }
.key .bullets li { color: var(--ink); }

.nb-location__grid { display: grid; gap: 2rem 3rem; align-items: start; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
@media (min-width: 48rem) { .nb-location__grid:not(.nb-location__grid--single) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.nb-map { overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.nb-map--failed { display: none; }
.nb-facts { display: grid; gap: 1.25rem; }
.nb-facts dt { margin-bottom: 0.3rem; }
.trains { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.35rem; }
.train { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #fff; font-size: 0.95rem; font-weight: 700; line-height: 1; }
.train--dark { color: #1c1b19; }
.train-badge { display: inline-grid; place-items: center; height: 1.75rem; padding: 0 0.7rem; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; }
.train-text { margin-inline: 0.2rem 0.5rem; font-size: 0.92rem; color: var(--muted); }
.nb-commute { min-width: 0; }
.nb-commute .small-label { margin-bottom: 0.75rem; }
@media (min-width: 48rem) { .nb-location__grid:not(.nb-location__grid--single) .commute__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nb-location__grid:not(.nb-location__grid--single) .btn { grid-column: 1 / -1; justify-self: start; } }

.nb-pockets { margin-top: 1.25rem; max-width: 46rem; font-size: 1.05rem; }
.bullets li { position: relative; padding-left: 1.1rem; }
.bullets li + li { margin-top: 0.45rem; }
.bullets li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 0.45rem; height: 1px; background: var(--accent); }

/* Key Details as short fact cards: three across on desktop, two on tablets, one on phones */
.facts { display: grid; gap: 0 2rem; }
@media (min-width: 36rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact { padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.fact dt, .fact > .small-label { margin-bottom: 0.5rem; }
.fact dd { font-size: 1.05rem; line-height: 1.45; }
.fact__pros { font-size: 1.05rem; }
.hubs { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }
.hubs li { display: grid; gap: 0.1rem; }
.hubs strong { font-size: 1.6rem; font-weight: 300; line-height: 1.1; }
.hubs span { font-size: 0.9rem; color: var(--muted); }
.hubs__note { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); }