/* Neighborhoods and news (templates/site/neighborhoods.html, neighborhood_detail.html, news.html,
   news_detail.html). nb- = neighborhoods, nw- = news. Tokens only; raw colours appear only on
   always-dark surfaces (photo tiles, the photo viewer) and for the MTA's official line colours. */

/* ======================================================================================
   Neighborhoods index
   ====================================================================================== */

.nb-head .s-crumbs, .nw-head .s-crumbs { margin-bottom: 22px; }
.nb-head-stats { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nb-head-stat { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.nb-head-stat strong { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.nb-head-stat .s-ic { width: 1.05em; height: 1.05em; color: var(--primary); }

/* Filter bar: sticky under the header on wide screens */
.nb-bar { position: sticky; top: var(--header-h); z-index: 30; background: color-mix(in oklab, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.nb-bar-row { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.nb-boroughs { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.nb-boroughs::-webkit-scrollbar { display: none; }
.nb-boroughs .s-chip { flex: none; }
.nb-chip-n { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.s-chip.is-on .nb-chip-n { color: color-mix(in oklab, var(--bg) 72%, transparent); }
.nb-find { flex: none; width: 300px; margin-left: auto; }
.nb-find .s-input { min-height: 40px; padding-block: 8px; border-radius: var(--pill); }
.nb-find .s-input::-webkit-search-cancel-button { cursor: pointer; }

.nb-groups { padding-top: 48px; }
.nb-group + .nb-group { margin-top: 64px; }
.nb-group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.nb-group-intro { margin-top: 8px; max-width: 70ch; color: var(--ink-2); line-height: 1.6; }
.nb-group-count { font-size: 0.85rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

/* A neighborhood tile: the name links to its page (the link covers the tile); "See apartments" sits above it */
.nb-tile { display: flex; align-items: flex-end; }
.nb-tile .s-place-body { position: static; width: 100%; padding: 18px; }
.nb-tile a { color: #fff; text-decoration: none; }
.nb-tile-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.nb-tile-link:focus-visible { outline: none; }
.nb-tile:has(.nb-tile-link:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.nb-tile-meta { flex-direction: column; gap: 2px; }
.nb-tile-go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 14px; padding: 0 16px; border-radius: var(--pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.82rem; font-weight: 700; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.nb-tile-go:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .6); }
.nb-tile-go .s-ic { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nb-tile-go:hover .s-ic { transform: translateX(3px); }

.nb-none { margin-top: 8px; }
.nb-none-actions, .nw-empty-actions { justify-content: center; margin-top: 20px; }
.nb-none-actions .s-btn, .nw-empty-actions .s-btn { margin-top: 0; }

.nb-cta-box { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 52px 32px; border-radius: var(--r-xl); background: var(--bg-soft); border: 1px solid var(--line); }
.nb-cta-box::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; z-index: -1; background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 14%, transparent), transparent); }
.nb-cta-box .s-lead { max-width: 58ch; margin: 12px auto 0; }
.nb-cta-box-actions { justify-content: center; margin-top: 24px; }

@media (max-width: 720px) {
  .nb-bar { position: static; }
  .nb-bar-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .nb-find { width: auto; margin-left: 0; }
  .nb-boroughs { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .nb-groups { padding-top: 32px; }
  .nb-group + .nb-group { margin-top: 48px; }
}
@media (max-width: 600px) {
  .nb-head-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .nb-head-stat { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; min-height: 0; padding: 12px; border-radius: var(--r); font-size: 0.76rem; line-height: 1.35; }
  .nb-head-stat .s-ic { display: none; }
  .nb-head-stat strong { display: block; margin-bottom: 2px; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.03em; }
  .nb-tile { aspect-ratio: 4 / 3; }
  .nb-cta-box { padding: 40px 20px; }
}

/* ======================================================================================
   Neighborhood page
   ====================================================================================== */

.nb-page [id] { scroll-margin-top: 60px; }

/* Hero: photo (the guide's hero image, else the neighborhood's photo) or the plain page head */
.nb-hero { padding: 28px 0 0; }
.nb-hero.s-pagehead--photo { padding: 28px 0 0; min-height: min(660px, 80svh); display: flex; }
.nb-hero-inner { display: flex; flex-direction: column; }
.nb-hero.s-pagehead--photo .nb-hero-inner { min-height: 100%; }
.nb-hero-body { padding-top: 48px; }
.nb-hero.s-pagehead--photo .nb-hero-body { margin-top: auto; padding-top: 96px; }
.nb-title { max-width: 16ch; overflow-wrap: anywhere; }
.s-pagehead--photo .nb-title { text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.nb-tagline { max-width: 60ch; }
.s-pagehead--photo .s-crumbs, .s-pagehead--photo .s-crumbs a { color: rgba(255, 255, 255, .78); }
.s-pagehead--photo .s-crumbs a:hover, .s-pagehead--photo .s-crumbs [aria-current] { color: #fff; }
.s-pagehead--photo .s-crumbs li + li::before { color: rgba(255, 255, 255, .45); }

.nb-figs { display: flex; flex-wrap: wrap; gap: 18px 48px; margin: 40px 0 0; padding: 22px 0 28px; border-top: 1px solid var(--line); }
.nb-fig { min-width: 0; }
.nb-fig dt { font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nb-fig dd { margin: 6px 0 0; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nb-fig dd small { font-size: 0.5em; font-weight: 700; letter-spacing: 0; color: var(--ink-3); margin-left: 2px; }
.nb-fig dd.nb-fig-up { color: var(--ok); }
.nb-fig dd.nb-fig-down { color: var(--bad); }
.s-pagehead--photo .nb-figs { border-top-color: rgba(255, 255, 255, .18); }
.s-pagehead--photo .nb-fig dt, .s-pagehead--photo .nb-fig dd small { color: rgba(255, 255, 255, .72); }
.s-pagehead--photo .nb-fig dd { color: #fff; }
.s-pagehead--photo .nb-fig dd.nb-fig-up { color: #5fe0b2; }
.s-pagehead--photo .nb-fig dd.nb-fig-down { color: #ff9e95; }

@media (max-width: 640px) {
  .nb-hero.s-pagehead--photo { min-height: 0; }
  .nb-hero.s-pagehead--photo .nb-hero-body { padding-top: 120px; }
  .nb-hero-body { padding-top: 32px; }
  .nb-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 32px; }
  .nb-fig dt { letter-spacing: .04em; }
  .nb-hero .s-pagehead-actions .s-btn--lg:not(.s-btn--square) { flex: 1 1 auto; }
}

/* On-page navigation */
.nb-subnav { position: sticky; top: var(--header-h); z-index: 30; background: color-mix(in oklab, var(--bg) 94%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.nb-subnav-row { display: flex; align-items: center; gap: 16px; }
.nb-subnav .nb-subnav-list { position: relative; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nb-subnav-list::-webkit-scrollbar { display: none; }
.nb-subnav-list a { position: relative; display: inline-flex; align-items: center; height: 52px; padding: 0 14px; white-space: nowrap; color: var(--ink-2); font-size: 0.9rem; font-weight: 700; text-decoration: none !important; transition: color .15s; }
.nb-subnav-list a:hover { color: var(--ink); }
.nb-subnav-list a[aria-current="true"] { color: var(--ink); }
.nb-subnav-list a[aria-current="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--primary); }
.nb-subnav-list a:focus-visible { outline-offset: -4px; }
.nb-subnav-cta { flex: none; }
@media (max-width: 640px) {
  .nb-subnav-row { padding-inline: 0; }
  .nb-subnav .nb-subnav-list { padding-inline: calc(var(--gutter) - 14px); }
  .nb-subnav-cta { display: none; }
}

/* Apartments: Sponsored first (the ad auction's 'search' placement), then the newest */
.nb-page .s-section-head > div { max-width: 860px; }
.nb-sponsored { padding-bottom: 0; }
.nb-ad-eyebrow { color: var(--ad); }
.nb-more { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 600px) { .nb-more .s-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 10px; } }

/* About + lifestyle scores */
.nb-about { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.nb-about-main { max-width: 760px; }
.nb-about-text.is-clamped { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.nb-more-btn { min-height: 40px; margin-top: 8px; border: 0; background: transparent; padding: 0; font-size: 0.95rem; }
.nb-more-btn[aria-expanded="true"] .s-ic { transform: rotate(180deg); }
.nb-more-btn:hover .s-ic { transform: none; }
.nb-more-btn[aria-expanded="true"]:hover .s-ic { transform: rotate(180deg); }
.nb-callout-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.nb-callout-title .s-ic { width: 16px; height: 16px; }
.nb-note { margin-top: 28px; padding: 20px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary); color: var(--ink-2); line-height: 1.7; }
.nb-scores { position: sticky; top: calc(var(--header-h) + 76px); padding: 24px; }
.nb-rings { list-style: none; padding: 0; margin: 20px 0 0; display: flex; justify-content: space-around; gap: 12px; }
.nb-ring-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.nb-ring { position: relative; width: 84px; height: 84px; }
.nb-ring svg { width: 100%; height: 100%; }
.nb-ring-track { fill: none; stroke: var(--bg-sunk); stroke-width: 6; }
.nb-ring-bar { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; }
.nb-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nb-ring-l { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.nb-scores-help { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.5; }
@media (max-width: 960px) {
  .nb-about { grid-template-columns: 1fr; gap: 32px; }
  .nb-scores { position: static; }
}

/* Photos: a mosaic of up to five, all of them in the viewer */
.nb-gallery { display: grid; gap: 10px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 230px); }
.nb-shot { position: relative; display: block; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--bg-sunk); cursor: zoom-in; color: #fff; }
.nb-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); color: transparent; font-size: 0; }
.nb-shot:hover img { transform: scale(1.04); }
.nb-shot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nb-shot:first-child { grid-row: span 2; }
.nb-shot-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(8, 12, 20, .58); font-size: 1.15rem; font-weight: 800; }
.nb-shot-more .s-ic { width: 20px; height: 20px; }
.nb-gallery--1 { grid-template-columns: 1fr; grid-template-rows: 460px; }
.nb-gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 400px; }
.nb-gallery--1 .nb-shot:first-child, .nb-gallery--2 .nb-shot:first-child { grid-row: auto; }
.nb-gallery--3 { grid-template-columns: 2fr 1fr; }
.nb-gallery--4 .nb-shot:nth-child(4) { grid-column: span 2; }
@media (max-width: 760px) {
  .nb-gallery, .nb-gallery--1, .nb-gallery--2, .nb-gallery--3 { grid-template-columns: none; grid-template-rows: 240px; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .nb-gallery--1 { grid-auto-columns: 100%; }
  .nb-gallery::-webkit-scrollbar { display: none; }
  .nb-shot, .nb-shot:first-child, .nb-gallery--4 .nb-shot:nth-child(4) { grid-row: auto; grid-column: auto; scroll-snap-align: start; }
}

/* Photo viewer (always dark) */
.nb-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 8, 14, .97); color: #fff; overscroll-behavior: contain; }
.nb-viewer::backdrop { background: rgba(5, 8, 14, .9); }
.nb-viewer[open] { display: flex; flex-direction: column; }
.nb-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; }
.nb-viewer-count { font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; padding-left: 8px; }
.nb-viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 84px 40px; touch-action: pan-y; }
.nb-viewer-stage img { max-width: 100%; max-height: calc(100svh - 140px); object-fit: contain; border-radius: 10px; user-select: none; -webkit-user-drag: none; }
.nb-viewer-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .15s, border-color .15s; }
.nb-viewer-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.nb-viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nb-viewer-nav { position: absolute; top: 50%; width: 52px; height: 52px; transform: translateY(-50%); }
.nb-viewer-nav--prev { left: 18px; }
.nb-viewer-nav--next { right: 18px; }
body.nb-viewer-open { overflow: hidden; }
@media (max-width: 640px) {
  .nb-viewer-stage { padding: 0 0 92px; }
  .nb-viewer-nav { top: auto; bottom: 24px; transform: none; }
  .nb-viewer-nav--prev { left: calc(50% - 64px); }
  .nb-viewer-nav--next { right: calc(50% - 64px); }
}

/* Map and places */
.nb-local { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.nb-map { margin: 0; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.nb-map-canvas { position: relative; z-index: 0; width: 100%; height: 520px; background: var(--bg-sunk); }
.nb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.nb-key { display: inline-flex; align-items: center; gap: 8px; }
.nb-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--ink)); }
.nb-key--center { --k: var(--primary); }
.nb-key--subway { --k: var(--ink-2); }
.nb-key--school::before { border-radius: 3px; }
.nb-key--school { --k: #d97706; }
.nb-key--park { --k: #15803d; }
.nb-legend-src { margin-left: auto; font-size: 0.75rem; color: var(--ink-4); }

.nb-places { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.nb-tabs-bar { padding: 10px; border-bottom: 1px solid var(--line); }
.nb-tabs { display: flex; width: 100%; }
.nb-tabs .s-tab { flex: 1; justify-content: center; padding: 0 10px; }
.nb-tab-n { font-size: 0.75rem; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nb-list + .nb-list { border-top: 1px solid var(--line); }
.nb-places.is-tabbed .nb-list { max-height: 504px; overflow-y: auto; border-top: 0; overscroll-behavior: contain; }
.nb-list-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.nb-list-head h3 { font-size: 1rem; font-weight: 800; }
.nb-list-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.nb-list-ic .s-ic { width: 17px; height: 17px; }
.nb-list-n { margin-left: auto; font-size: 0.8rem; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nb-places.is-tabbed .nb-list-head { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nb-places .nb-poi-list { list-style: none; margin: 0; padding: 4px 0; }
.nb-poi { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 18px; color: var(--ink); transition: background-color .15s; }
.nb-poi-list li + li .nb-poi { border-top: 1px solid var(--line); }
.nb-poi[role="button"] { cursor: pointer; }
.nb-poi[role="button"]:hover, .nb-poi.is-on { background: var(--bg-soft); }
.nb-poi[role="button"]:focus-visible { outline-offset: -3px; }
.nb-poi .nb-lines { width: 72px; max-width: none; }
.nb-poi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nb-poi-name { font-size: 0.93rem; font-weight: 700; line-height: 1.35; }
.nb-poi-meta { margin-top: 2px; font-size: 0.78rem; color: var(--ink-3); line-height: 1.4; }
.nb-poi-dist { flex: none; white-space: nowrap; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nb-poi-dot { width: 12px; height: 12px; flex: none; margin-inline: 5px; border-radius: 50%; }
.nb-poi-dot--school { border-radius: 3px; background: #d97706; }
.nb-poi-dot--park { background: #15803d; }
.nb-list-none { padding: 6px 18px 20px; font-size: 0.9rem; color: var(--ink-3); }
.nb-places.is-tabbed .nb-list-none { padding-top: 20px; }

/* MTA route bullets: the MTA's official line colours */
.nb-lines { display: inline-flex; flex-wrap: wrap; gap: 3px; flex: none; max-width: 98px; }
.nb-line { --c: #0b1a33; --t: #fff; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--c); color: var(--t); font-size: 0.72rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.nb-line--mta { font-size: 0.6rem; letter-spacing: .04em; }
.nb-line[data-line^="1"], .nb-line[data-line^="2"], .nb-line[data-line^="3"] { --c: #d82233; }
.nb-line[data-line^="4"], .nb-line[data-line^="5"], .nb-line[data-line^="6"] { --c: #009952; }
.nb-line[data-line^="7"] { --c: #9a38a1; }
.nb-line[data-line="A"], .nb-line[data-line="C"], .nb-line[data-line="E"] { --c: #0062cf; }
.nb-line[data-line="B"], .nb-line[data-line="D"], .nb-line[data-line="F"], .nb-line[data-line="M"] { --c: #eb6800; }
.nb-line[data-line="G"] { --c: #799534; }
.nb-line[data-line="J"], .nb-line[data-line="Z"] { --c: #8e5c33; }
.nb-line[data-line="L"], .nb-line[data-line="S"], .nb-line[data-line="FS"], .nb-line[data-line="GS"], .nb-line[data-line="H"] { --c: #7c858c; }
.nb-line[data-line="N"], .nb-line[data-line="Q"], .nb-line[data-line="R"], .nb-line[data-line="W"] { --c: #f6bc26; --t: #000; }
.nb-line[data-line="T"] { --c: #008eb7; }
.nb-line[data-line="SIR"], .nb-line[data-line="SI"] { --c: #1a4995; font-size: 0.6rem; }
[data-theme="dark"] .nb-line { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14); }

/* Leaflet, in the site's colours (both themes) */
/* Google Maps (static/site/nbmap.js): the pins are buttons an OverlayView places at their spot; a
   chosen one opens Google's own (white) info window, so its words keep dark colours in both themes. */
.nb-map-note:empty { display: none; }
.nb-map-note { margin: 0; padding: 14px 16px; font-size: 0.9rem; color: var(--ink-3); }
.nb-pin { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; }
.nb-pin:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 999px; }
.nb-pin--subway.is-on .nb-lines { transform: scale(1.15); }
.gm-style .nb-pop strong { color: #0e1726; }
.gm-style .nb-pop span { color: #5b6576; }
.nb-pop strong { display: block; font-weight: 800; color: var(--ink); }
.nb-pop span { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.8rem; }
.nb-pin { display: flex; align-items: center; justify-content: center; }
.nb-pin > span { display: block; transition: transform .2s var(--ease); }
.nb-pin.is-on > span { transform: scale(1.3); }
.nb-pin--center > span { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 26%, transparent), 0 2px 6px rgba(0, 0, 0, .3); }
.nb-pin--school > span { width: 13px; height: 13px; border-radius: 3px; background: #d97706; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.nb-pin--park > span { width: 14px; height: 14px; border-radius: 50%; background: #15803d; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.nb-pin--subway .nb-lines { flex-wrap: nowrap; max-width: none; gap: 2px; }
.nb-pin--subway .nb-line { min-width: 20px; height: 20px; padding: 0 4px; font-size: 0.66rem; border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

@media (max-width: 960px) {
  .nb-local { grid-template-columns: 1fr; }
  .nb-map-canvas { height: 380px; }
  .nb-places.is-tabbed .nb-list { max-height: none; }
}
@media (max-width: 640px) {
  .nb-map-canvas { height: 320px; }
  .nb-legend-src { margin-left: 0; width: 100%; }
  .nb-tabs .s-tab { padding: 0 6px; gap: 6px; font-size: 0.84rem; }
  .nb-tabs .s-tab .s-ic { display: none; }
}

/* Editors' picks: schools and transit */
.nb-picks { display: grid; gap: 22px; }
.nb-picks--2 { grid-template-columns: 1fr 1fr; }
.nb-pick { padding: 0; overflow: hidden; }
.nb-pick-title { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 800; }
.nb-pick-title .s-ic { color: var(--primary); }
.nb-pick ul { list-style: none; margin: 0; padding: 0; }
.nb-pick li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; }
.nb-pick li + li { border-top: 1px solid var(--line); }
.nb-pick-main { min-width: 0; }
.nb-pick-station { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nb-pick-name { font-weight: 700; line-height: 1.35; }
.nb-pick-meta { margin-top: 2px; font-size: 0.82rem; color: var(--ink-3); }
.nb-pick-walk { flex: none; margin: 0; white-space: nowrap; font-weight: 700; }
@media (max-width: 860px) { .nb-picks--2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .nb-pick li, .nb-pick-title { padding-inline: 18px; } }

/* Lifestyle */
.nb-highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.nb-highlight { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.nb-highlight-n { font-size: 0.8rem; font-weight: 800; letter-spacing: .08em; color: var(--primary); font-variant-numeric: tabular-nums; }
.nb-highlight h3 { margin-top: 12px; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.nb-highlight p { margin-top: 8px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
.nb-life { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
.nb-highlights + .nb-life { margin-top: 40px; }
.nb-life-text { flex: 1 1 460px; max-width: 72ch; }
.nb-fact { flex: 0 1 360px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--ink); line-height: 1.65; }
@media (max-width: 900px) { .nb-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nb-highlights { grid-template-columns: 1fr; } .nb-highlight { padding: 22px; } .nb-fact { flex-basis: 100%; } }

/* Call to action */
.nb-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 900px) { .nb-cta-actions { justify-content: flex-start; } }
@media (max-width: 480px) { .nb-cta-actions .s-btn { width: 100%; } }

/* ======================================================================================
   News
   ====================================================================================== */

/* Separators between meta pieces are drawn here, so empty pieces never leave a stray "·" */
.nw-dots > span + span::before { content: "·"; margin-right: 8px; color: var(--ink-4); font-weight: 700; }
.s-post-meta.nw-dots { gap: 0 8px; }

.nw-noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-4); background: linear-gradient(135deg, var(--bg-sunk), color-mix(in oklab, var(--primary) 10%, var(--bg-sunk))); }
.nw-noimg .s-ic { width: 34px; height: 34px; }
.nw-card-by { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }

.nw-list { padding-top: 56px; }
.nw-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.nw-lead-media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-sunk); }
.nw-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); color: transparent; font-size: 0; }
.nw-lead:hover .nw-lead-media img { transform: scale(1.03); }
.nw-lead-media--blank { display: grid; place-items: center; color: color-mix(in oklab, var(--primary) 50%, var(--ink-4)); background: linear-gradient(135deg, var(--primary-soft), var(--bg-sunk)); }
.nw-lead-media--blank .s-ic { width: 56px; height: 56px; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); }
.nw-lead-title { margin-top: 14px; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.55rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; }
.nw-lead-title a { color: var(--ink); }
.nw-lead-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nw-lead-excerpt { margin-top: 14px; font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); }
.nw-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; min-width: 0; }
.nw-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; object-fit: cover; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 1rem; }
.nw-avatar--lg { width: 46px; height: 46px; font-size: 1.1rem; }
.nw-author { font-size: 0.95rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.nw-when { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; font-size: 0.84rem; color: var(--ink-3); }
.nw-lead-go { margin-top: 24px; }
.nw-more { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.nw-more-title { margin-bottom: 24px; }
@media (max-width: 860px) {
  .nw-lead { grid-template-columns: 1fr; gap: 24px; }
  .nw-list { padding-top: 40px; }
  .nw-more { margin-top: 56px; }
}

/* Article */
.nw-article-head { padding: 40px 0 0; }
.nw-article-head .s-crumbs { margin-bottom: 28px; }
.nw-article-head .s-crumbs li:last-child { min-width: 0; }
.nw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-tag { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--pill); background: var(--primary-soft); color: var(--primary); font-size: 0.8rem; font-weight: 800; letter-spacing: .01em; }
.nw-tag .s-ic { width: 14px; height: 14px; }
.nw-tag--place { background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--line); }
a.nw-tag--place { color: var(--ink); text-decoration: none !important; transition: border-color .15s; }
a.nw-tag--place:hover { border-color: var(--ink-3); }
a.nw-tag--place::after { content: ""; position: absolute; inset: -4px 0; }
.nw-title { margin-top: 18px; overflow-wrap: break-word; }
.nw-dek { margin-top: 16px; }
.nw-byline-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 18px 0; border-block: 1px solid var(--line); }
.nw-byline-row .nw-byline { margin-top: 0; }
.nw-cover { margin: 40px 0 0; }
.nw-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl); background: var(--bg-sunk); color: transparent; font-size: 0; }
.nw-body { margin-top: 44px; font-size: 1.1rem; line-height: 1.8; overflow-wrap: break-word; }
.nw-body > :first-child { margin-top: 0; }
.nw-body img, .nw-body video { width: 100%; height: auto; }
.nw-body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r); }
.nw-body figure { margin: 1.8em 0; }
.nw-body figcaption { margin-top: 8px; font-size: 0.86rem; color: var(--ink-3); text-align: center; }
.nw-body hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--line); }
.nw-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }
.nw-body th, .nw-body td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.nw-body th { color: var(--ink); font-weight: 700; }
.nw-body pre { max-width: 100%; overflow-x: auto; padding: 16px; border-radius: var(--r); background: var(--bg-soft); font-size: 0.9rem; }
.nw-body h2 { font-size: 1.6rem; }
.nw-body h3 { font-size: 1.25rem; }

.nw-place { display: flex; align-items: center; gap: 16px; margin-top: 48px; padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); text-decoration: none !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.nw-place:hover { border-color: var(--primary-line); box-shadow: var(--sh-2); }
.nw-place-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.nw-place-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nw-place-t { font-weight: 800; font-size: 1.05rem; }
.nw-place-d { font-size: 0.9rem; color: var(--ink-2); }
.nw-place-go { flex: none; color: var(--ink-3); transition: transform .2s var(--ease), color .2s; }
.nw-place:hover .nw-place-go { color: var(--primary); transform: translateX(3px); }

.nw-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.nw-back { min-height: 40px; }
.nw-back .s-ic { width: 1em; height: 1em; }
.nw-back:hover .s-ic { transform: translateX(-3px); }
.nw-related { margin-top: 72px; }
@media (max-width: 640px) {
  .nw-article-head { padding-top: 28px; }
  .nw-article-head .s-crumbs li:last-child { display: none; }
  .nw-byline-row { flex-wrap: nowrap; }
  .nw-share { width: 40px; min-height: 40px; padding: 0; flex: none; }
  .nw-share-words { display: none; }
  .nw-cover { margin-top: 28px; }
  .nw-cover img { border-radius: var(--r); }
  .nw-body { margin-top: 32px; font-size: 1.04rem; }
  .nw-related { margin-top: 48px; }
}

@media print {
  .s-header, .s-footer, .nb-subnav, .nb-bar, .nw-byline-row .s-btn, .nw-article-foot { display: none !important; }
}