/* =============================================================================
   CLINIC — torontoairduct.shop
   -----------------------------------------------------------------------------
   Air quality is a measurement problem, so this site reads like an instrument
   rather than a brochure. IBM Plex Sans for text, IBM Plex Mono for every label
   and number — which is the signature device: anything that is data is set in
   mono and tabular, and anything that is prose is not.

   Deliberately the flattest of the five. No shadows at all, hairline borders, a
   lot of white, and a modular grid that shows its gridlines. That is the
   opposite of HEARTH next door and shares nothing with SLATE or FLOW.
   ========================================================================== */

:root {
  --font:         'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius:    2px;
  --radius-lg: 2px;
  --shadow-1: none; --shadow-2: none; --shadow-3: none;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; }
h1 { text-wrap: balance; }

/* Anything that is a label or a figure is mono and tabular. Prose is not. */
.sec-eyebrow, .hero__eyebrow, .herostats__n, .herostats__l,
.chips [class*="chip--"], .answerbox__label, .fact, .num,
.popular__label, .handoff__label, .posthead__kicker {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* --- Hero: split into two measured halves, no shear, no gloss ----------- */
.hero__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-9); padding-block: var(--s-9); }
.hero h1 { max-width: 20ch; }
.hero::after {
  background: linear-gradient(90deg, rgba(10,32,26,.94) 0%, rgba(10,32,26,.88) 50%, rgba(10,32,26,.42) 82%, rgba(10,32,26,.24) 100%);
}
.hero__eyebrow { text-transform: uppercase; letter-spacing: 0.16em; color: var(--primary-lite); }
.hero__eyebrow::before { width: 10px; height: 10px; border: 2px solid var(--accent); background: none; }
.hero__points li::before { width: 8px; height: 8px; top: .48em; border: 2px solid var(--accent); background: none; }

/* The stat card as a readout: hairline grid, mono figures, flat ground. */
.herostats { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28); padding: 0; }
.herostats__row { padding: var(--s-4) var(--s-5); border-bottom: 1px solid rgba(255,255,255,.18); }
.herostats__row:first-child { padding-top: var(--s-4); }
.herostats__row:last-child { padding-bottom: var(--s-4); }
.herostats__n { font-size: var(--fs-3); font-weight: 600; }

/* --- Sections: the grid is visible ------------------------------------- */
.section { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.section--alt { background: var(--gray-50); }
.sec-eyebrow::before { width: 10px; height: 10px; border: 2px solid var(--primary); background: none; }
.sec-head { margin-bottom: var(--s-6); }

/* --- Cards: bordered cells, no fill, no lift -------------------------- */
.card {
  border: 1px solid var(--line); border-radius: 2px; box-shadow: none;
  background: var(--white); transition: border-color .12s ease, background .12s ease;
}
.card--link:hover { border-color: var(--primary); background: var(--primary-soft); }
.grid { gap: 1px; background: var(--line); }
.grid > .card { border: 0; outline: 1px solid var(--line); outline-offset: 0; }
.grid--2, .grid--3, .grid--4 { background: var(--line); }

/* --- Buttons: rectangular, restrained -------------------------------- */
.btn { border-radius: 2px; font-weight: 600; letter-spacing: 0.01em; }
.chips [class*="chip--"] { border-radius: 2px; }

/* --- Prose ----------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-8); }
.prose h2::before {
  content: ""; display: block; width: 100%; height: 1px;
  background: var(--line); margin-bottom: var(--s-5);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .grid { gap: var(--s-5); background: none; }
  .grid > .card { outline: 0; border: 1px solid var(--line); }
}