/* Tailwind Overwrites
 *
 * Overrides for Tailwind utility classes that need responsive adjustments.
 * Unlayered CSS wins over Tailwind's @layer utilities without needing !important.
 *
 * Usage: set one desktop class (e.g. text-8xl) — these rules scale it down
 * automatically at smaller viewports. No responsive prefixes (lg:, xl:) needed.
 */

/* ---- Responsive font-size + line-height scaling --------------------------
 *
 *                  mobile     tablet     desktop-s   desktop
 *                  < 768px    768–1279   1280–1399   1400px+
 *  text-9xl        3.75rem    4.5rem     6rem        8rem
 *  text-8xl        3rem       3.75rem    4.5rem      6rem
 *  text-7xl        2.5rem     3rem       3.75rem     4.5rem
 *  text-6xl        2.5rem     2.25rem    3rem        3.75rem
 *
 *  text-5xl        2.25rem    —          —           3rem
 *  text-4xl        1.875rem   —          —           2.25rem
 *  text-3xl        1.5rem     —          —           1.875rem
 *  text-2xl        1.25rem    —          —           1.5rem
 *  text-xl         1.125rem   —          —           1.25rem  (= text-lg default)
 *
 *  line-height scales with rendered size: tighter at large, looser at small.
 * -------------------------------------------------------------------------- */

/* default: 1400px+ */
.text-9xl { line-height: 0.85; }
.text-8xl { line-height: 0.85; }
.text-7xl { line-height: 0.9; }
.text-6xl { line-height: 0.95; }

/* 1280–1399px */
@media (max-width: 1399px) {
    .text-9xl { font-size: 6rem;    line-height: 0.85; }
    .text-8xl { font-size: 4.5rem;  line-height: 0.9; }
    .text-7xl { font-size: 3.75rem; line-height: 0.95; }
    .text-6xl { font-size: 3rem;    line-height: 0.95; }
}

/* 768–1279px */
@media (max-width: 1279px) {
    .text-9xl { font-size: 4.5rem;  line-height: 0.9; }
    .text-8xl { font-size: 3.75rem; line-height: 0.95; }
    .text-7xl { font-size: 3rem;    line-height: 0.95; }
    .text-6xl { font-size: 2.25rem; line-height: 1; }
}

/* < 768px */
@media (max-width: 767px) {
    .text-9xl { font-size: 3.75rem; line-height: 0.95; }
    .text-8xl { font-size: 3rem;    line-height: 0.95; }
    .text-7xl { font-size: 2.5rem;  line-height: 1; }
    .text-6xl { font-size: 2.5rem;  line-height: 1; }
    .text-5xl { font-size: 2.25rem; }
    .text-4xl { font-size: 1.875rem; }
    .text-3xl { font-size: 1.5rem; }
    .text-2xl { font-size: 1.25rem; }
    .text-xl  { font-size: 1.125rem; }
}