/* ============================================================
   LAVENDER COUNSELING CENTER
   TYPOGRAPHY
============================================================ */


/* ============================================================
   BODY
============================================================ */

body{

    font-family:
        "DM Sans",
        sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.7;

    color:var(--lavender-text);

    background:var(--lavender-white);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/* ============================================================
   HEADINGS
============================================================ */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:
        "Newsreader",
        serif;

    color:var(--lavender-ink);

    font-weight:500;

    line-height:1.08;

    letter-spacing:-0.03em;

}


h1{

    font-size:clamp(
        3.2rem,
        6vw,
        5.8rem
    );

}


h2{

    font-size:clamp(
        2.5rem,
        5vw,
        4.2rem
    );

}


h3{

    font-size:clamp(
        1.8rem,
        3vw,
        2.5rem
    );

}


h4{

    font-size:1.5rem;

}


h5{

    font-size:1.2rem;

}


h6{

    font-size:1rem;

}


/* ============================================================
   PARAGRAPHS
============================================================ */

p{

    color:var(--lavender-muted);

    font-size:1.05rem;

    line-height:1.9;

}


/* ============================================================
   LINKS
============================================================ */

a{

    transition:
        color
        .35s ease;

}


a:hover{

    color:
        var(--lavender-primary);

}


/* ============================================================
   STRONG
============================================================ */

strong{

    font-weight:600;

    color:var(--lavender-ink);

}


/* ============================================================
   SMALL
============================================================ */

small{

    font-size:.92rem;

}


/* ============================================================
   LISTS
============================================================ */

ul,
ol{

    color:var(--lavender-muted);

}


li{

    line-height:1.8;

}


/* ============================================================
   SELECTION
============================================================ */

::selection{

    background:

        rgba(
            118,
            87,
            141,
            .18
        );

    color:

        var(
            --lavender-ink
        );

}


/* ============================================================
   DISPLAY
============================================================ */

.display-title{

    font-family:

        "Newsreader",
        serif;

    font-size:

        clamp(
            4rem,
            7vw,
            7rem
        );

    line-height:

        .95;

    letter-spacing:

        -.045em;

    font-weight:

        500;

}


/* ============================================================
   SECTION TITLE
============================================================ */

.section-title{

    max-width:

        760px;

}


/* ============================================================
   SECTION DESCRIPTION
============================================================ */

.section-description{

    max-width:

        640px;

    margin-top:

        24px;

}


/* ============================================================
   EYEBROW
============================================================ */

.section-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:var(--lavender-primary);

}


.section-eyebrow::before{

    content:"";

    width:34px;

    height:1px;

    background:

        var(
            --lavender-primary
        );

}


/* ============================================================
   QUOTES
============================================================ */

blockquote{

    font-family:

        "Newsreader",
        serif;

    font-size:

        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    line-height:

        1.3;

    color:

        var(
            --lavender-ink
        );

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:768px){

    body{

        font-size:15px;

    }

    p{

        font-size:1rem;

    }

}