/* ═══════════════════════════════════════════════════════════════════════
   42nd STREET, LOT BY LOT
   Palette is deliberately loud: bone paper, hard black, one electric
   accent that only ever means "unused capacity".
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --paper:        #F7F4EC;
  --paper-warm:   #EFE9DC;
  --ink:          #100E0C;
  --ink-60:       rgba(16,14,12,.68);   /* was .60, 2.62:1 against this paper */
  --ink-40:       rgba(16,14,12,.40);
  --hair:         rgba(16,14,12,.16);

  /* the loud ones */
  --volt:         #D8F546;   /* electric lime, the accent that carries capacity */
  --volt-deep:    #A9C900;
  --flare:        #FF5A36;   /* coral, the high end of every ramp */
  --magenta:      #E5006D;   /* the very top */
  --cobalt:       #1B4CFF;   /* city ownership */
  --grape:        #7C3AED;   /* tax exempt */
  --stone:        #B9B1A1;   /* private, deliberately dull */

  /* type */
  --sans: "Helvetica Neue", Inter, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --hand: "Bradley Hand", "Snell Roundhand", "Segoe Print", cursive;

  --shell: 1440px;
  --gut: clamp(16px, 3vw, 44px);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--gut) }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1 }
p{ margin:0 }
a{ color:inherit }

/* ── shared type ──────────────────────────────────────────────────────── */
.tag,.numeral,.figure__label,.panel__eyebrow,.hint,.legend,.facts,.colophon dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
}
.ph{ background:rgba(229,0,109,.09); box-shadow:0 1px 0 var(--magenta) inset; }
.hand{ font-family:var(--hand); font-size:19px; line-height:1.3; color:var(--magenta); letter-spacing:0 }

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead{ padding-top:clamp(16px,3vh,30px) }
.rule-top{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding-bottom:12px; border-bottom:1.5px solid var(--ink);
}
.tag{ color:var(--ink-60); border:1px solid var(--hair); padding:5px 9px; line-height:1 }
.tag--live{ background:var(--volt); border-color:var(--ink); color:var(--ink) }

.display{
  font-size:clamp(58px, 15.5vw, 232px); line-height:.80; letter-spacing:-.055em;
  font-weight:700; margin:clamp(18px,4vh,44px) 0 clamp(20px,4vh,40px); text-transform:uppercase;
}
.display__nd{ font-size:.42em; vertical-align:super; letter-spacing:-.02em }
.display em{
  display:block; font-style:normal; color:var(--flare);
  font-size:.62em; line-height:.86; letter-spacing:-.05em; margin-top:.06em;
}
.display__to{ font-size:.5em; color:var(--ink); padding:0 .12em; vertical-align:.08em }
.display--sm{ font-size:clamp(28px,4vw,52px); margin:0 }

.masthead__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,4vw,64px); align-items:start;
  padding-bottom:clamp(24px,5vh,52px); border-bottom:1.5px solid var(--ink);
}
@media (max-width:820px){ .masthead__grid{ grid-template-columns:1fr } }
.standfirst{ font-size:clamp(19px,2.1vw,25px); line-height:1.35; letter-spacing:-.01em; max-width:34ch }
.colophon{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:6px 0 0; align-content:start }
.colophon dt{ color:var(--ink-40) }
.colophon dd{ margin:0; font-size:14px; border-bottom:1px solid var(--hair); padding-bottom:6px }

/* ── headline figures ─────────────────────────────────────────────────── */
.figures{ padding:clamp(22px,4vh,44px) 0 clamp(28px,5vh,56px); border-bottom:1.5px solid var(--ink) }
.figures__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2.4vw,34px) }
@media (max-width:900px){ .figures__grid{ grid-template-columns:repeat(2,1fr) } }
.figure{ display:block; font-family:var(--mono); letter-spacing:-.04em; line-height:.94 }
.figures .figure{ font-size:clamp(32px,4.9vw,66px); white-space:nowrap }
.figures .figure em{ font-style:normal; color:var(--flare) }
.figure__label{ display:block; color:var(--ink-60); margin-top:10px; max-width:22ch }
.figures__grid > div{ border-top:1.5px solid var(--ink); padding-top:12px }

/* ── section furniture ────────────────────────────────────────────────── */
section{ padding:clamp(38px,7vh,86px) 0 }
.section-head{ display:grid; grid-template-columns:auto 1fr; gap:6px clamp(16px,2.5vw,30px); margin-bottom:clamp(18px,3vh,34px) }
.numeral{ color:var(--ink-40); padding-top:9px }
.section-head h2{ font-size:clamp(28px,4.4vw,58px); letter-spacing:-.035em; text-transform:uppercase }
.section-head__sub{ grid-column:2; max-width:60ch; color:var(--ink-60); font-size:16px }

/* ── chapters ─────────────────────────────────────────────────────────── */
.chapters{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1.5px solid var(--ink); margin-bottom:clamp(14px,2.4vh,22px) }
@media (max-width:820px){ .chapters{ grid-template-columns:repeat(2,1fr) } }
.chapter{
  appearance:none; background:none; border:0; border-right:1.5px solid var(--ink);
  padding:14px 16px 16px; text-align:left; cursor:pointer; color:var(--ink-60);
  font:inherit; transition:background .18s ease, color .18s ease;
}
.chapter:last-child{ border-right:0 }
.chapter:hover{ background:var(--paper-warm); color:var(--ink) }
.chapter[aria-selected="true"]{ background:var(--volt); color:var(--ink) }
.chapter b{ display:block; font-size:clamp(15px,1.5vw,19px); font-weight:600; letter-spacing:-.02em; margin-top:3px }
.chapter i{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-style:normal; opacity:.75 }

/* ── stage ────────────────────────────────────────────────────────────── */
.stage{ display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,26vw,380px); gap:clamp(12px,1.6vw,20px) }
@media (max-width:1040px){ .stage{ grid-template-columns:1fr } }
.stage__map{ margin:0 }
#map{ height:clamp(420px,66vh,660px); border:1.5px solid var(--ink); background:var(--paper-warm) }
.stage__foot{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:10px }
.hint{ color:var(--ink-40) }
.legend{ display:flex; gap:16px; flex-wrap:wrap; color:var(--ink-60) }
.legend span{ display:inline-flex; gap:7px; align-items:center }
.legend i{ width:12px; height:12px; border-radius:50%; display:block; border:1px solid rgba(16,14,12,.25) }

.stage__side{ display:grid; gap:clamp(12px,1.6vw,20px); align-content:start }
.panel{ border:1.5px solid var(--ink); padding:clamp(16px,1.6vw,22px) }
.panel--headline{ background:var(--ink); color:var(--paper) }
.panel--headline .figure{ font-size:clamp(30px,3.6vw,46px); color:var(--volt) }
.panel--headline .figure__label{ color:rgba(247,244,236,.6) }
.panel--headline p{ margin-top:14px; font-size:15.5px; color:rgba(247,244,236,.86) }
.panel--headline .hand{ color:var(--volt); margin-top:14px }
.panel--headline .ph{ background:rgba(216,245,70,.14); box-shadow:0 1px 0 var(--volt) inset }

.panel__eyebrow{ display:block; color:var(--ink-40) }
.panel--lot h3{ font-size:clamp(19px,2vw,25px); letter-spacing:-.025em; margin:6px 0 0 }
.panel--lot[data-empty="true"] .facts{ display:none }

.capacity{ margin-top:16px }
.capacity__track{ height:10px; background:repeating-linear-gradient(90deg,var(--volt) 0 4px,transparent 4px 8px); border:1px solid var(--ink); position:relative }
.capacity__built{ position:absolute; inset:0 auto 0 0; background:var(--ink); transition:width .5s cubic-bezier(.3,.9,.25,1) }
.capacity__scale{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-60); margin-top:7px }

.facts{ display:grid; gap:0; margin:16px 0 0 }
.facts div{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-top:1px solid var(--hair) }
.facts dt{ color:var(--ink-40) }
.facts dd{ margin:0; text-align:right; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; text-transform:none; color:var(--ink) }

/* ── league table ─────────────────────────────────────────────────────── */
.table{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink) }
.table li{ border-bottom:1px solid var(--hair) }
.row{
  display:grid; grid-template-columns:44px minmax(0,1.5fr) minmax(0,1.6fr) 96px minmax(0,1fr);
  gap:clamp(10px,1.6vw,24px); align-items:center; width:100%;
  background:none; border:0; padding:13px 6px; cursor:pointer; font:inherit; text-align:left;
  transition:background .16s ease, padding-left .16s ease;
}
@media (max-width:900px){
  .row{ grid-template-columns:34px minmax(0,1fr) 84px; }
  .row__owner,.row__bar{ display:none }
}
.row:hover,.row.is-active{ background:var(--volt); padding-left:14px }
.row__rank{ font-family:var(--mono); font-size:11px; color:var(--ink-40) }
.row:hover .row__rank{ color:var(--ink) }
.row__addr{ font-size:clamp(15px,1.5vw,19px); font-weight:600; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row__owner{ font-family:var(--mono); font-size:11px; color:var(--ink-60); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; letter-spacing:.08em }
.row__num{ font-family:var(--mono); font-size:13px; text-align:right; letter-spacing:-.01em }
.row__bar{ height:9px; background:var(--paper-warm); border:1px solid var(--hair); position:relative }
.row__bar i{ position:absolute; inset:0 auto 0 0; background:var(--flare) }
.row:hover .row__bar{ border-color:var(--ink) }

/* ── ownership ────────────────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(12px,2vw,26px) }
.split > div{ border-top:1.5px solid var(--ink); padding-top:12px }
.split .figure{ font-size:clamp(28px,3.6vw,48px) }
.swatch{ width:14px; height:14px; display:inline-block; border:1px solid var(--ink); vertical-align:-2px; margin-right:8px }
.waffle{ display:grid; grid-template-columns:repeat(41,1fr); gap:4px; margin-top:clamp(20px,3vh,34px) }
@media (max-width:820px){ .waffle{ grid-template-columns:repeat(21,1fr) } }
.waffle span{ aspect-ratio:1; border:1px solid rgba(16,14,12,.22) }

.waffle__note{ margin-top:clamp(16px,2.4vh,26px); font-size:clamp(18px,2vw,25px); line-height:1.3;
  letter-spacing:-.015em; max-width:44ch }
.waffle__note b{ font-weight:600; box-shadow:0 -.5em 0 var(--volt) inset }


/* ── the record ───────────────────────────────────────────────────────── */
.record{ border-bottom:1.5px solid var(--ink) }
.quote{ margin:0 0 clamp(20px,3vh,34px) }
.quote blockquote{
  margin:0; font-size:clamp(21px,2.9vw,40px); line-height:1.16; letter-spacing:-.03em; font-weight:500;
  text-indent:-.42em;
}
.quote--lead blockquote{ max-width:24ch; font-size:clamp(26px,4.6vw,64px); line-height:1.05 }
.quote--lead blockquote::first-letter{ color:var(--flare) }
.quote figcaption{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-40); margin-top:14px; padding-top:10px; border-top:1px solid var(--hair);
}
.record__pair{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,60px);
  padding-bottom:clamp(24px,4vh,48px) }
@media (max-width:900px){ .record__pair{ grid-template-columns:1fr } }
.record__gloss h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-40); margin:0 0 8px }
.record__gloss h4+p{ margin-bottom:22px }
.record__gloss p{ font-size:16px; color:var(--ink-60); max-width:46ch }

/* timeline: one horizontal band, fifty years */
.timeline{
  list-style:none; margin:clamp(10px,2vh,20px) 0 0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(112px,1fr);
  overflow-x:auto; border-top:1.5px solid var(--ink); scrollbar-width:thin;
}
.timeline li{ padding:14px 14px 18px 0; border-right:1px solid var(--hair); position:relative }
.timeline li::before{
  content:""; position:absolute; top:-1.5px; left:0; width:9px; height:9px;
  background:var(--ink); transform:translateY(-50%);
}
.timeline li[data-key="true"]::before{ background:var(--flare); width:13px; height:13px }
.timeline b{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.04em; margin-bottom:7px }
.timeline li[data-key="true"] b{ color:var(--flare) }
.timeline span{ display:block; font-size:13.5px; line-height:1.3; color:var(--ink-60) }
.caption{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; color:var(--ink-40); margin-top:12px; max-width:80ch }
.caption--warn{ color:var(--magenta) }

.lessons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2.4vw,32px);
  margin-top:clamp(26px,4vh,52px) }
.lessons > div{ border-top:1.5px solid var(--ink); padding-top:13px }
.lessons h4{ font-size:clamp(17px,1.8vw,22px); letter-spacing:-.02em; margin-bottom:8px }
.lessons p{ font-size:15px; color:var(--ink-60) }

/* ── instruments matrix ───────────────────────────────────────────────── */
.instruments{ border-top:1.5px solid var(--ink) }
.matrix{ border-top:1.5px solid var(--ink) }
.instrument-row{
  display:grid; grid-template-columns:34px minmax(0,1.25fr) minmax(0,1.5fr) 128px minmax(0,.9fr);
  gap:clamp(10px,1.8vw,26px); align-items:start; padding:16px 0; border-bottom:1px solid var(--hair);
}
@media (max-width:900px){
  .instrument-row{ grid-template-columns:28px minmax(0,1fr); }
  .instrument-row__reach,.instrument-row__num,.instrument-row__bar{ grid-column:2 }
}
.instrument-row__n{ font-family:var(--mono); font-size:11px; color:var(--ink-40); padding-top:4px }
.instrument-row__name{ font-size:clamp(16px,1.7vw,21px); font-weight:600; letter-spacing:-.02em }
.instrument-row__reach{ font-size:14.5px; color:var(--ink-60) }
.instrument-row__note{ display:block; font-style:normal; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; color:var(--magenta); margin-top:8px; line-height:1.5 }
.instrument-row__num{ font-family:var(--mono); font-size:13px; text-align:right }
.instrument-row__num em{ display:block; font-style:normal; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-40); margin-top:4px }
.instrument-row__bar{ height:10px; border:1px solid var(--hair); background:var(--paper-warm); position:relative; margin-top:5px }
.instrument-row__bar i{ position:absolute; inset:0 auto 0 0; background:var(--cobalt) }
.instrument-row:hover{ background:var(--paper-warm) }

/* ── confidence ───────────────────────────────────────────────────────── */
.confidence{ border-top:1.5px solid var(--ink); background:var(--paper-warm) }
.grades{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,26px); margin-bottom:clamp(26px,4vh,50px) }
@media (max-width:820px){ .grades{ grid-template-columns:1fr } }
.grade{ display:flex; flex-direction:column; border-top:1.5px solid var(--ink); padding-top:12px }
.grade__bar{ height:12px; flex:0 0 auto; margin-bottom:14px; background:var(--volt) }
.grade--special .grade__bar{ background:var(--flare) }
.grade--landmark .grade__bar{ background:var(--magenta) }
.grade .figure{ font-size:clamp(24px,3vw,38px) }
.grade p{ font-size:14.5px; color:var(--ink-60); margin-top:10px }

.caveats{ display:grid; gap:0; border-top:1.5px solid var(--ink) }
.caveat{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:clamp(10px,2vw,26px);
  padding:18px 0; border-bottom:1px solid var(--hair) }
.caveat__n{ font-family:var(--mono); font-size:11px; color:var(--magenta); padding-top:3px }
.caveat h4{ font-size:clamp(17px,1.9vw,23px); letter-spacing:-.02em; margin-bottom:7px }
.caveat p{ font-size:15.5px; color:var(--ink-60); max-width:78ch }

/* flags in the league table */
.flag{ font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 6px; margin-left:10px; vertical-align:2px; border:1px solid currentColor }
.flag--landmark{ color:var(--magenta) }
.flag--special{ color:var(--ink-40) }

/* ── method ───────────────────────────────────────────────────────────── */
.method{ border-top:1.5px solid var(--ink) }
.method__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:clamp(16px,2.6vw,38px) }
.method__grid h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40); margin-bottom:9px }
.method__grid p{ font-size:15px; color:var(--ink-60) }

/* ── foot ─────────────────────────────────────────────────────────────── */
.foot{ background:var(--ink); color:var(--paper); padding:clamp(34px,6vh,72px) 0 }
.foot__grid{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap }
.foot a{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration-color:var(--volt); text-underline-offset:6px }

/* ── tooltip ──────────────────────────────────────────────────────────── */
.tooltip{
  position:fixed; z-index:60; pointer-events:none; opacity:0; transform:translateY(3px);
  transition:opacity .13s ease, transform .13s ease;
  background:var(--ink); color:var(--paper); padding:9px 11px; max-width:250px;
  border-left:3px solid var(--volt);
}
.tooltip[data-show="true"]{ opacity:1; transform:none }
.tooltip b{ display:block; font-size:14px; letter-spacing:-.01em; margin-bottom:3px }
.tooltip span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--volt) }

/* ── mapbox overrides ─────────────────────────────────────────────────── */
.mapboxgl-ctrl-group{ border-radius:0 !important; border:1.5px solid var(--ink) !important; box-shadow:none !important }
.mapboxgl-ctrl-group button+button{ border-top:1px solid var(--hair) !important }
.mapboxgl-ctrl-attrib{ font-family:var(--mono); font-size:9px }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}