/* The New York door pages (2026-11-04, scripts/search/build-doors.js). On top of /site.css.
   The answer comes first and carries its count in the sentence; the borough split is drawn as LIGHT — length and
   brightness follow the count, and the number sits beside it — never a big-number hero (impeccable-design ban).
   One motion: the lines fill once on arrival; reduced motion shows them lit and still. */
body.door .page { max-width: 760px; }

.answer { padding: 30px 0 4px; }
.answer h1 { font-size: clamp(34px, 8.4vw, 54px); line-height: 1.04; margin-bottom: 16px; }
.answer .lede { margin: 0; max-width: 34em; text-wrap: pretty; }
.answer .lede b { color: var(--gold-text); font-weight: 600; }

.light, .tonight, .more { margin-top: 40px; }
.light h2, .why h2, .more h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.005em;
  margin-bottom: 14px; text-wrap: balance;
}

.boroughs { list-style: none; display: grid; gap: 12px; }
.boroughs li { display: grid; grid-template-columns: 7.6em 1fr 3.4em; align-items: center; gap: 14px; }
.boroughs .name { font-size: 15px; color: var(--text); }
.boroughs .n { font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.boroughs .bar { position: relative; height: 4px; border-radius: 2px; background: var(--line); }
.boroughs .bar::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px; transform-origin: left center;
  transform: scaleX(var(--share)); background: var(--purple-text);
  opacity: calc(0.5 + 0.5 * var(--share)); box-shadow: 0 0 10px 1px rgba(148, 42, 251, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .boroughs .bar::after { animation: door-fill 560ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  .boroughs li:nth-child(2) .bar::after { animation-delay: 50ms; }
  .boroughs li:nth-child(3) .bar::after { animation-delay: 100ms; }
  .boroughs li:nth-child(4) .bar::after { animation-delay: 150ms; }
  .boroughs li:nth-child(5) .bar::after { animation-delay: 200ms; }
  @keyframes door-fill { from { transform: scaleX(0.04); opacity: 0.25; } }
}
.light .fact { color: var(--muted); margin-top: 18px; max-width: 36em; }
.light .note { color: var(--dim); font-size: 13px; margin-top: 10px; }

.tonight { display: grid; gap: 24px; align-items: center; }
.shot { margin: 0 auto; width: min(300px, 78vw); }
.shot img {
  display: block; width: 100%; height: auto; border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.10); background: var(--surface);
}
.why p { color: var(--muted); max-width: 32em; }

.more { border-top: 1px solid var(--line); padding-top: 26px; }
.more ul { list-style: none; display: grid; gap: 12px; }
.more a { color: var(--text); font-size: 16px; }
.more a:hover { color: var(--purple-text); }

@media (min-width: 720px) {
  .tonight { grid-template-columns: 300px 1fr; gap: 44px; }
  .shot { margin: 0; width: 300px; }
}
@media (min-width: 900px) {
  .answer { padding-top: 48px; }
  .answer h1 { font-size: 60px; }
  .answer .lede { font-size: 21px; }
  .more ul { grid-template-columns: 1fr 1fr; gap: 12px 40px; }
}