/* ==========================================================
   THE SALTY FLY
   TYPOGRAPHY
   Version 1.0
   ========================================================== */


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

body{

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

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

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

    font-weight:var(--fw-normal);

    color:var(--color-text);

    background:var(--color-background);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/* ==========================================================
   HEADLINES
   ========================================================== */

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

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

    font-weight:var(--fw-normal);

    color:var(--color-primary);

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

    margin:0;

}

h1{

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

    margin-bottom:var(--space-l);

}

h2{

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

    margin-bottom:var(--space-m);

}

h3{

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

    margin-bottom:var(--space-s);

}

h4{

    font-size:1.55rem;

    margin-bottom:var(--space-s);

}

h5{

    font-size:1.30rem;

    margin-bottom:12px;

}

h6{

    font-size:1.10rem;

    margin-bottom:12px;

}


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

p{

    max-width:var(--text-width);

    margin:0 0 var(--space-m);

}

p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   LEAD
   ========================================================== */

.lead{

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

    line-height:1.65;

    max-width:42rem;

    margin-bottom:var(--space-l);

}


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

a{

    color:inherit;

    text-decoration:none;

    transition:color var(--transition);

}

a:hover{

    color:var(--color-primary-light);

}


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

ul,
ol{

    margin:0 0 var(--space-m) 1.5rem;

}

li{

    margin-bottom:8px;

}


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

strong{

    font-weight:var(--fw-medium);

}

em{

    font-style:normal;

}


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

small{

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

}


/* ==========================================================
   CAPTION
   ========================================================== */

figcaption{

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

    margin-top:18px;

    color:var(--color-text);

}


/* ==========================================================
   BLOCKQUOTE
   ========================================================== */

blockquote{

    max-width:var(--text-width);

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

    font-size:1.45rem;

    line-height:1.55;

    color:var(--color-primary);

    margin:var(--space-xl) 0;

}


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

::selection{

    background:var(--color-primary);

    color:#ffffff;

}


/* ==========================================================
   HORIZONTAL RULE
   ========================================================== */

hr{

    display:none;

}