/* ── Typography: mobile-first ────────────────────────────────────────────── */
/* 20px default so touch/phone gets readable text without any detection magic */
html { font-size: 20px; }

/* Real desktop: mouse + hover + wide viewport → restore Bootstrap default */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html { font-size: 16px; }
}

body { line-height: 1.65; }

/* ── Mobile layout ───────────────────────────────────────────────────────── */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    h1.display-4  { font-size: 2rem !important; }
    .lead         { font-size: 1rem !important; }
    main          { padding-left: 1rem !important; padding-right: 1rem !important; }
    *             { max-width: 100%; }
}