/* =============================================================================
   FLOW — torontoeavestrough.shop
   -----------------------------------------------------------------------------
   The site next door to SLATE in every sense: same owner, same city, adjacent
   trade. So it deliberately shares nothing with it. Where roofing is heavy,
   square and dark, this is light, horizontal and open, because the subject is
   water moving along a line and away from a building.

   Fraunces for display — a soft optical serif, the opposite of Archivo — and
   Karla for text. Generous rounding, banded sections, and a wide measure.

   Signature device: a pair of thin horizontal rules under every section
   eyebrow, reading as a channel. Cheap, and it is the only ornament here.
   ========================================================================== */

:root {
  --font:         'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --radius:    14px;
  --radius-lg: 22px;
}

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

/* --- Hero: lighter, wider, centred weight, no shear --------------------- */
.hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; padding-block: var(--s-9); gap: var(--s-9); }
.hero h1 { max-width: 22ch; }
.hero::after {
  background:
    linear-gradient(90deg, rgba(14,34,54,.90) 0%, rgba(14,34,54,.72) 40%, rgba(14,34,54,.26) 74%, rgba(14,34,54,.12) 100%);
}
.hero__eyebrow { letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-lite); }
.hero__eyebrow::before { width: 34px; height: 1px; box-shadow: 0 4px 0 0 currentColor; background: currentColor; }
.hero__lede { max-width: 54ch; }
.hero__points li::before { width: 18px; height: 1px; box-shadow: 0 4px 0 0 var(--accent); background: var(--accent); top: .62em; }

.herostats { border-radius: var(--radius-lg); padding: var(--s-6); }
.herostats__row { border-bottom-color: rgba(255,255,255,.18); }

/* --- Sections: banded, airy, with the channel rule --------------------- */
.section { padding-block: var(--s-9); }
.section--alt { background: var(--paper-2); }
.sec-eyebrow { letter-spacing: 0.1em; color: var(--primary-text); }
.sec-eyebrow::before {
  width: 34px; height: 1px; background: var(--primary);
  box-shadow: 0 4px 0 0 var(--primary);
}
.sec-head { margin-bottom: var(--s-7); }
.sec-note { max-width: 70ch; }

/* --- Cards: soft, low contrast, wide ----------------------------------- */
.card {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: none; transition: box-shadow .16s ease, border-color .16s ease;
}
.card--link:hover { border-color: var(--primary-line); box-shadow: var(--shadow-2); }
.card--tile { border-radius: var(--radius); }

.grid { gap: var(--s-6); }

/* --- Buttons: fully rounded ------------------------------------------- */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; }
.chips [class*="chip--"] { border-radius: 999px; }

/* --- Prose: wider measure, serif headings carrying it ----------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s-8); font-size: var(--fs-3); }
.prose h2::after {
  content: ""; display: block; width: 56px; height: 1px; margin-top: var(--s-3);
  background: var(--accent); box-shadow: 0 4px 0 0 var(--accent);
}

@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }