/* =========================================================
   TYPOGRAPHY
========================================================= */


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

body{

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

    font-size:var(--font-size-md);

    font-weight:400;

    line-height:1.45;

    letter-spacing:.01em;

    color:var(--color-text);

}



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

a{

    color:inherit;

    text-decoration:none;

    transition:
        opacity var(--transition-fast),
        color var(--transition-fast);

}

a:hover{

    opacity:.8;

}



/* =========================================================
   HEADER
========================================================= */

.brand{

    font-size:1rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.brand span{

    white-space:nowrap;

    user-select:none;

}



/* =========================================================
   INSTAGRAM
========================================================= */

.instagram{

    color:var(--color-text);

}

.instagram svg{

    stroke:currentColor;

}



/* =========================================================
   VIDEO
========================================================= */

.video-button{

    font:inherit;

}

.play-icon svg{

    filter:

        drop-shadow(0 6px 20px rgba(0,0,0,.35));

}



/* =========================================================
   MODAL
========================================================= */

.close-modal{

    color:white;

}

.close-modal svg{

    stroke:currentColor;

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    margin:-1px;

    overflow:hidden;

    clip:rect(0 0 0 0);

    white-space:nowrap;

    border:0;

}



/* =========================================================
   TEXT RENDERING
========================================================= */

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

    font:inherit;

    font-weight:inherit;

}

p{

    max-width:70ch;

}

strong{

    font-weight:600;

}

em{

    font-style:italic;

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

    body{

        font-size:.95rem;

    }

    .brand{

        font-size:.9rem;

        letter-spacing:.06em;

    }

}



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

@media (max-width:420px){

    .brand{

        font-size:.82rem;

    }

}