/* ===========================================================================
   Latchkey — property management identity.
   Editorial and ledger-like: ink navy, brass, ruled lines and a literary
   serif for headings. Reads closer to a managing agent's statement than to
   a software dashboard, which is the point.
   =========================================================================== */

:root {
  --brand:       #1f3a5f;
  --brand-deep:  #14283f;
  --brand-tint:  #e8eef5;
  --brand-line:  #b0c4d9;
  --brand-on:    #ffffff;
  --accent:      #9a7431;
  --accent-tint: #f7f0e1;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.008em; }
.stat-value { font-weight: 500; letter-spacing: -0.02em; }
.eyebrow, .rail-label { letter-spacing: .14em; }

/* Brass hairline above section headings — the statement-paper detail. */
.card-head h3::before {
  content: ""; display: block; width: 26px; height: 2px;
  background: var(--accent); margin-bottom: 7px; border-radius: 1px;
}
.drawer-sec > h4 { color: var(--accent); }

/* Ledger ruling for the marketing page. */
.ledger-bg {
  background-image: linear-gradient(var(--rule, rgba(31,58,95,.07)) 1px, transparent 1px);
  background-size: 100% 34px;
}

/* Occupancy pill. */
.occupancy {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--font-mono); font-size: var(--t-12); font-weight: 600;
  color: var(--brand-deep);
}
.occupancy small { color: var(--text-3); font-weight: 400; }