/* ============================================================
   Honkz NYC — the methodology page (/methodology).

   Long-form prose plus one small table of published model
   numbers. It inherits the header, footer and tokens from
   styles.css and the intro block from book.css; this file is
   the reading measure, the two-metric split, the table, and
   the sizes that keep 390px legible.

   The table is the only thing here that could overflow a phone,
   so nothing in it is allowed to refuse to wrap: no min-width,
   no nowrap headers. It also sits in an overflow-x wrapper as a
   belt-and-braces guard. The page body must never scroll
   sideways, and mobile_layout_tests.py asserts it (hkz-37).
   ============================================================ */

.md-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px clamp(16px, 5vw, 28px) 56px;
}

.md-updated {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.md-block { margin-top: 40px; }
.md-block h2 {
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  padding-bottom: 8px;
  border-bottom: var(--border-w) solid var(--hairline);
}
.md-block h3 {
  font-size: 1.02rem;
  margin-top: 28px;
}
.md-block p {
  margin-top: 12px;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.md-block p strong { color: var(--ink); }
.md-lede {
  font-weight: 700;
  color: var(--ink) !important;
}
.md-block a { color: var(--brand); }

/* The two metrics sit side by side on a wide screen and stack on a
   phone. They are visually separated on purpose: "measured on your
   block" and "modelled from the shape of the street" are the two
   things a reader must not conflate, and the whole page exists
   because conflating them is the easy mistake. */
.md-halves {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
.md-half {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: var(--border-w) solid var(--hairline);
}
.md-half h3 { margin-top: 6px; font-size: 1.05rem; }
.md-half p { margin-top: 10px; font-size: 0.92rem; }
.md-half-measured { border-left: 3px solid var(--quiet); }
.md-half-modelled { border-left: 3px solid var(--mid); }

.md-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.md-table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.md-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.md-table th,
.md-table td {
  padding: 9px 8px;
  text-align: left;
  border-bottom: var(--border-w) solid var(--hairline);
  color: var(--ink-soft);
}
.md-table th {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.md-table td strong { color: var(--ink); }
.md-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-row-win td { background: var(--bg-soft); }

.md-source {
  margin-top: 14px !important;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 0.86rem !important;
}

.md-list { list-style: none; margin-top: 6px; padding: 0; }
.md-list li {
  margin-top: 14px;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.md-list strong { color: var(--ink); }

.md-cta-row {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.md-cta {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 800;
  text-decoration: none;
}
.md-cta:hover { background: var(--brand-dk); }
.md-alt {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.md-alt:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .md-halves { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* THE MODEL CARD (generated: see scripts/export_model_card.py). A definition
   list, because that is what it is: a label and a fact, no prose between them. */
.md-card {
  margin: 0; display: grid; grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 10px 22px; align-items: baseline;
}
.md-card dt {
  font-size: 0.72rem; font-weight: var(--wt-bold); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft);
}
.md-card dd { margin: 0; color: var(--ink); }
.md-card dt + dd { border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
.md-card dt { border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
.md-card dt:last-of-type, .md-card dd:last-of-type { border-bottom: none; }
.md-feats { margin: 0; padding-left: 18px; }
.md-feats li { margin: 0 0 4px; }
.md-feats strong { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 640px) {
  .md-card { grid-template-columns: 1fr; gap: 3px; }
  .md-card dt { padding-bottom: 0; border-bottom: none; }
  .md-card dt + dd { padding-bottom: 12px; }
}