/* ============================================================
   typography.css — Custom fluid type utilities
   ============================================================
   Mirrors Bootstrap's display-* approach: fluid scaling via
   calc() below 1200px, fixed rem value at ≥ 1200px.

   Classes
   ───────
   .text-lead      Body / paragraph large  — 20px (1.25rem) at desktop
   .text-subtitle  Subtitle / intro copy   — 18px (1.125rem) at desktop
   .text-caption   Small labels / captions — 15px (0.9375rem) at desktop

   Usage
   ─────
   <p class="text-lead">...</p>
   <p class="text-subtitle">...</p>
   ============================================================ */


/* ── .text-lead (20px desktop, ~18px below 1200px)
   Formula: base + vw so that calc() hits exactly 1.25rem at 1200px.
   At 400px → ~18px; below → clamped to 1.0625rem.
────────────────────────────────────────────────── */
.text-lead {
    font-size: calc(1.0625rem + 0.25vw);
    line-height: 1.65;
}

@media (min-width: 1200px) {
    .text-lead {
        font-size: 1.25rem; /* 20px */
    }
}


/* ── .text-subtitle (18px desktop, ~16px below 1200px)
────────────────────────────────────────────────── */
.text-subtitle {
    font-size: calc(1rem + 0.1875vw);
    line-height: 1.6;
}

@media (min-width: 1200px) {
    .text-subtitle {
        font-size: 1.125rem; /* 18px */
    }
}


/* ── .text-caption (15px desktop, ~14px below 992px)
────────────────────────────────────────────────── */
.text-caption {
    font-size: calc(0.875rem + 0.0625vw);
    line-height: 1.5;
}

@media (min-width: 992px) {
    .text-caption {
        font-size: 0.9375rem; /* 15px */
    }
}