/* ============================================================
   Vinyl ID — About
   Same system as the rest of the site: light, monochrome, Inter,
   restrained. Rust appears only as the single small accent
   (map pin, rank numbers). Layers on styles.css + design2.css
   + simple.css.
   ============================================================ */

body.about { background: #fff; color: var(--ink); }

/* Nav: permanently solid (no dark hero on this page) */
.about .nav {
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  color: #000;
  border-bottom: 1px solid var(--grey-15);
}
.about .nav .nav-cta { border-color: #000; }
.about .nav .nav-cta:hover { background: #000; }
.about .nav .nav-cta:hover span { color: #fff; }
.about .nav-links a.active { border-bottom-color: var(--rust); }

/* ── Intro ──────────────────────────────────────────────── */
.about-hero { padding: calc(var(--nav-h) + 104px) var(--gutter) 0; }
.about-hero .inner { max-width: var(--maxw); margin: 0 auto; }
.about-hero h1 {
  font-weight: 500; font-size: clamp(40px, 6vw, 90px);
  line-height: 0.96; letter-spacing: -0.04em; margin: 18px 0 20px;
  max-width: 18ch; text-wrap: balance;
}
.about-hero .lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--grey-60); max-width: 50ch; line-height: 1.5; }

/* ── Hero photo ─────────────────────────────────────────── */
.about-photo { padding: 56px var(--gutter) 0; }
.about-photo .inner { max-width: var(--maxw); margin: 0 auto; }
.about-photo image-slot {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  background: #f4f4f4; box-shadow: inset 0 0 0 1px var(--grey-15);
}

/* ── Story (reuses .editorial / .editorial-grid) ─────────── */
.about .editorial .sign { margin-top: 28px; font-size: 16px; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.about .editorial .sign span { color: var(--grey-60); font-weight: 400; }

/* ── Built in Brooklyn + map ────────────────────────────── */
.brooklyn { padding: 28px var(--gutter) 128px; }
.brooklyn-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center;
}
.bk-copy h2 { font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.035em; line-height: 1.0; margin: 16px 0 18px; max-width: 14ch; text-wrap: balance; }
.bk-copy p { font-size: 18px; line-height: 1.6; color: var(--grey-60); max-width: 44ch; }
.bk-coords { margin-top: 24px; font-size: 13px; letter-spacing: .06em; color: var(--grey-60); font-variant-numeric: tabular-nums; }

.bk-map {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--grey-15); background: #f1f1f1; aspect-ratio: 4 / 3;
  /* Contain Leaflet's internal z-indexes (400-700) so they can't paint over the fixed nav */
  z-index: 0; isolation: isolate;
}
.bk-map #bk-live-map { width: 100%; height: 100%; background: #f1f1f1; }
/* Keep the live tiles on-brand B&W */
.bk-map .leaflet-tile { filter: grayscale(1) contrast(1.04); }
/* Custom rust pin + pulse (mirrors the old static-map pin) */
.luger-pin { position: relative; width: 34px; height: 40px; }
.luger-pin svg { position: relative; display: block; }
.luger-pin .pin-pulse {
  position: absolute; left: 17px; top: 19px;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(196,74,42,.25);
  animation: bkpulse 2.6s ease-out infinite;
}
@keyframes bkpulse { 0% { transform: scale(.5); opacity: .75; } 70% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .luger-pin .pin-pulse { animation: none; } }
.bk-tag {
  z-index: 1100; /* above Leaflet panes and controls */
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--grey-15); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.bk-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); }

/* ── Listening catalogue / stats ────────────────────────── */
.stats { padding: 116px var(--gutter); border-top: 1px solid var(--grey-15); background: #fafafa; }
/* Genre meters grow into place when the section scrolls into view (width set by JS) */
.genres .meter i { transition: width 1.2s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .genres .meter i { transition: none; } }
.stats-inner { max-width: var(--maxw); margin: 0 auto; }
.stats-head h2 { font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.035em; line-height: 1.0; margin-top: 16px; max-width: 18ch; text-wrap: balance; }
.stats-head p { margin-top: 16px; font-size: 16px; color: var(--grey-60); max-width: 54ch; line-height: 1.55; }

.stat-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 48px 0 14px; }
.figure { border: 1px solid var(--grey-15); border-radius: 10px; padding: 30px 26px; background: #fff; }
.figure .n { font-size: clamp(34px, 3.2vw, 46px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.figure .l { margin-top: 10px; font-size: 13px; color: var(--grey-60); letter-spacing: .02em; }

.stat-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.stat-col { border: 1px solid var(--grey-15); border-radius: 10px; padding: 30px 30px 34px; background: #fff; }
.stat-col h3 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-60); margin-bottom: 18px; }

.rank { list-style: none; display: flex; flex-direction: column; }
.rank li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--grey-15); }
.rank li:last-child { border-bottom: none; }
.rank .rk { color: var(--rust); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.rank .nm { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.rank .ct { font-size: 13px; color: var(--grey-60); font-variant-numeric: tabular-nums; }

.genres { list-style: none; display: flex; flex-direction: column; gap: 19px; }
.genres li { display: grid; grid-template-columns: 116px 1fr auto; align-items: center; gap: 16px; }
.genres .nm { font-size: 15px; font-weight: 500; }
.genres .meter { height: 6px; border-radius: 999px; background: var(--grey-15); overflow: hidden; }
.genres .meter i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.genres .pct { font-size: 13px; color: var(--grey-60); font-variant-numeric: tabular-nums; }

.stats-note { margin-top: 24px; font-size: 13px; color: var(--grey-60); }
.stats-note b { color: var(--ink); font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .about-hero { padding: calc(var(--nav-h) + 72px) var(--gutter) 0; }
  .brooklyn-grid { grid-template-columns: 1fr; gap: 36px; }
  .bk-map { order: -1; }
  .stat-figures { grid-template-columns: 1fr 1fr; }
  .stat-lists { grid-template-columns: 1fr; }
  .stats { padding: 84px var(--gutter); }
  .brooklyn { padding-bottom: 84px; }
  .footer-slim { padding: 32px var(--gutter); }
}
@media (max-width: 760px) {
  .about-hero h1 { font-size: clamp(32px, 9vw, 48px); }
  .about-hero .lede { max-width: 100%; }
}
@media (max-width: 560px) {
  .stat-figures { grid-template-columns: 1fr 1fr; }
  .genres li { grid-template-columns: 92px 1fr auto; gap: 12px; }
  .about-hero { padding-top: calc(var(--nav-h) + 56px); }
  .about-photo { padding: 36px var(--gutter) 0; }
  .stats { padding: 64px 16px; }
}