/**
 * ==========================================================
 * Typography
 * OUT LOUD Framework
 * ==========================================================
 */

/* ==========================================================
   Base
   ========================================================== */

html{
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body{

    font-family:var(--font-body);

    font-size:var(--fs-body);

    font-weight:var(--font-weight-regular);

    line-height:var(--lh-body);

    color:var(--color-text);

    background:var(--color-background);

}

/* ==========================================================
   Headings
   ========================================================== */

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

    margin:0;

    color:var(--color-charcoal);

    font-family:var(--font-heading);

    font-weight:var(--font-weight-semibold);

    line-height:var(--lh-heading);

    letter-spacing:var(--tracking-heading);

    text-wrap:balance;

}

h1{

    font-size:var(--fs-h1);

}

h2{

    font-size:var(--fs-h2);

}

h3{

    font-size:var(--fs-h3);

}

h4{

    font-size:var(--fs-h4);

}

h5{

    font-size:1.2rem;

}

h6{

    font-size:1rem;

}

/* ==========================================================
   Editorial titles
   ========================================================== */

.editorial{

    font-family:var(--font-editorial);

    font-weight:500;

    letter-spacing:-.03em;

}

/* ==========================================================
   Paragraphs
   ========================================================== */

p{

    margin:0 0 1.4rem;

    color:var(--color-text-muted);

    font-size:1rem;

    line-height:1.8;

}

p:last-child{

    margin-bottom:0;

}

/* ==========================================================
   Lead
   ========================================================== */

.lead{

    font-size:1.18rem;

    line-height:1.85;

    color:var(--color-text-muted);

}

/* ==========================================================
   Links
   ========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:

        color var(--transition-base),

        opacity var(--transition-base);

}

a:hover{

    color:var(--color-signature-red);

}

/* ==========================================================
   Lists
   ========================================================== */

ul,
ol{

    margin:0;

    padding:0;

    list-style:none;

}

/* ==========================================================
   Small
   ========================================================== */

small{

    font-size:.85rem;

}

/* ==========================================================
   Strong
   ========================================================== */

strong{

    font-weight:var(--font-weight-bold);

    color:var(--color-charcoal);

}

/* ==========================================================
   Selection
   ========================================================== */

::selection{

    background:var(--color-signature-red);

    color:#fff;

}

/* ==========================================================
   Eyebrow
   ========================================================== */

.eyebrow{

    display:inline-block;

    color:var(--color-signature-red);

    font-size:.74rem;

    font-weight:700;

    letter-spacing:.30em;

    text-transform:uppercase;

}

/* ==========================================================
   Responsive
   ========================================================== */

@media(max-width:992px){

h1{

font-size:clamp(2.9rem,8vw,4.6rem);

}

h2{

font-size:clamp(2.2rem,6vw,3.4rem);

}

h3{

font-size:1.9rem;

}

}

@media(max-width:768px){

body{

font-size:15px;

}

.lead{

font-size:1rem;

}

}

@media(max-width:480px){

h1{

font-size:2.6rem;

}

h2{

font-size:2rem;

}

h3{

font-size:1.6rem;

}

}