@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');

.wrapper {
  max-width: 1800px;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

p {
  font-weight: 400;  
  font-size: 1rem; 
  line-height: 1.75rem;
  letter-spacing: -0.2px;

}

a {
  text-decoration: none;
  color: #1c2025;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 2px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Vollkorn', Georgia, serif;
  color: #1c2025;
}

h1 {
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -1px;
}

.work-link {
  color: #1c2025;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 2px;
}

@media all and (min-width: 1200px) {

  h1 {
    font-size: 2rem;
  }

  p { 
    font-size: 1.25rem; 
    line-height: 2.25rem;
  }

}

/* ============================================================
   NAVIGATION
=============================================================== */

.logo {
  display: block;
  text-indent: -9999px;
  width: 59px;
  height: 53px;
  background: url('../img/chase-carpenter-design-logo.svg');
  background-size: 59px 53px;
  background-repeat: no-repeat;
}

@media (min-width: 600px) {
  .logo {
    width: 93px;
    height: 84px;
    background-size: 93px 84px;
  }
}

.sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.site-header {
  position: relative;
  background-color: #fff;
}


.site-header__wrapper {
  padding-top: 0.6rem;
  padding-bottom: 0.8rem;
  padding-left: 1.25rem;
}

@media (min-width: 600px) {
  .site-header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 600px) {
  .nav__wrapper {
    display: flex;
  }
}

@media (max-width: 599px) {
  .nav__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    text-align: center;
    padding-bottom: 2rem;
  }
  .nav__wrapper.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

.nav__item a {
  display: block;
  padding: 1.2rem 1.2rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.nav__item a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 2px;
}

.nav__toggle {
  display: none;
}

@media (max-width: 599px) {
  .nav__toggle {
    display: block;
    position: absolute;
    text-indent: -9999px;
    width: 38px;
    height: 16px;
    background: url('../img/mobile-menu-button.svg');
    background-size: 38px 16px;
    background-repeat: no-repeat;
    right: 2rem;
    top: 38%;
    border: none;
    cursor: pointer;
  }

}

/* ============================================================
   END NAVIGATION
=============================================================== */

/* ============================================================
   WORK
=============================================================== */

.content-wrapper {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.piece {
  margin-bottom: 1rem;
}

.home-cover {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  margin-bottom: 1rem;
}

.home-cover > div {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.75rem;
}

.home-cover > div:hover {
  border: 20px solid #1c2025;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.work-cover {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  margin-bottom: 2rem;
}

.last-piece {
  margin-bottom: 1rem;
}

.work-cover > div {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.75rem;
}

.piece-description {
  margin: 1rem 0 3rem 0;
}

.client-name {
  margin-bottom: 0.25rem;
}

.home-piece-1 {
  background-image: url(../img/tremendous-cover@2x.jpg);  
}

.home-piece-1:hover {
  background-image: url(../img/tremendous-cover-hover@2x.gif);
}

.home-piece-2 {
  background-image: url(../img/homie-cover@2x.jpg);  
}

.home-piece-2:hover {
  background-image: url(../img/homie-cover-hover@2x.gif);  
}

.home-piece-3 {
  background-image: url(../img/litmus-cover@2x.jpg);  
}

.home-piece-3:hover {
  background-image: url(../img/litmus-cover-hover@2x.gif);  
}

.home-piece-4 {
  background-image: url(../img/ifit-cover@2x.jpg);  
}

.home-piece-4:hover {
  background-image: url(../img/ifit-cover-hover@2x.gif);  
}

.home-piece-5 {
  background-image: url(../img/evelar-cover@2x.jpg);  
}

.home-piece-5:hover {
  background-image: url(../img/evelar-cover-hover@2x.gif);  
}

.home-piece-6 {
  background-image: url(../img/branding-cover@2x.jpg);  
}

.home-piece-6:hover {
  background-image: url(../img/branding-cover-hover@2x.gif);  
}

.tremendous-piece-1 {
  background-image: url(../img/tremendous/tremendous-piece-1@2x.jpg);
}

.tremendous-piece-2 {
  background-image: url(../img/tremendous/tremendous-piece-2@2x.jpg);   
}

.tremendous-piece-3 {
  background-image: url(../img/tremendous/tremendous-piece-3@2x.gif);   
}

.tremendous-piece-4 {
  background-image: url(../img/tremendous/tremendous-piece-4@2x.jpg);   
}

.tremendous-piece-5 {
  background-image: url(../img/tremendous/tremendous-piece-5@2x.gif);   
}

.tremendous-piece-6 {
  background-image: url(../img/tremendous/tremendous-piece-6@2x.jpg);   
}

.tremendous-piece-7 {
  background-image: url(../img/tremendous/tremendous-piece-7@2x.gif);   
}

.tremendous-piece-8 {
  background-image: url(../img/tremendous/tremendous-piece-8@2x.jpg);   
}

.tremendous-piece-9 {
  background-image: url(../img/tremendous/tremendous-piece-9@2x.jpg);   
}

.tremendous-piece-10 {
  background-image: url(../img/tremendous/tremendous-piece-10@2x.gif);   
}

.tremendous-piece-11 {
  background-image: url(../img/tremendous/tremendous-piece-11@2x.jpg);   
}

.tremendous-piece-12 {
  background-image: url(../img/tremendous/tremendous-piece-12@2x.gif);   
}

.homie-piece-1 {
  background-image: url(../img/homie/homie-piece-1@2x.jpg);   
}

.homie-piece-2 {
  background-image: url(../img/homie/homie-piece-2@2x.jpg);   
}

.homie-piece-3 {
  background-image: url(../img/homie/homie-piece-3@2x.jpg);   
}

.homie-piece-4 {
  background-image: url(../img/homie/homie-piece-4@2x.jpg);   
}

.homie-piece-5 {
  background-image: url(../img/homie/homie-piece-5@2x.gif);   
}

.homie-piece-6 {
  background-image: url(../img/homie/homie-piece-6@2x.jpg);   
}

.homie-piece-7 {
  background-image: url(../img/homie/homie-piece-7@2x.jpg);   
}

.homie-piece-8 {
  background-image: url(../img/homie/homie-piece-8@2x.jpg);   
}

.homie-piece-9 {
  background-image: url(../img/homie/homie-piece-9@2x.jpg);   
}

.homie-piece-10 {
  background-image: url(../img/homie/homie-piece-10@2x.gif);   
}

.litmus-piece-1 {
  background-image: url(../img/litmus/litmus-piece-1@2x.jpg);   
}

.litmus-piece-2 {
  background-image: url(../img/litmus/litmus-piece-2@2x.jpg);   
}

.litmus-piece-3 {
  background-image: url(../img/litmus/litmus-piece-3@2x.jpg);   
}

.litmus-piece-4 {
  background-image: url(../img/litmus/litmus-piece-4@2x.jpg);   
}

.litmus-piece-5 {
  background-image: url(../img/litmus/litmus-piece-5@2x.gif);   
}

.litmus-piece-6 {
  background-image: url(../img/litmus/litmus-piece-6@2x.jpg);   
}

.litmus-piece-7 {
  background-image: url(../img/litmus/litmus-piece-7@2x.jpg);   
}

.litmus-piece-8 {
  background-image: url(../img/litmus/litmus-piece-8@2x.jpg);   
}

.litmus-piece-9 {
  background-image: url(../img/litmus/litmus-piece-9@2x.jpg);   
}

.ifit-piece-1 {
  background-image: url(../img/ifit/ifit-piece-1@2x.gif);   
}

.ifit-piece-2 {
  background-image: url(../img/ifit/ifit-piece-2@2x.jpg);   
}

.ifit-piece-3 {
  background-image: url(../img/ifit/ifit-piece-3@2x.jpg);   
}

.ifit-piece-4 {
  background-image: url(../img/ifit/ifit-piece-4@2x.jpg);   
}

.ifit-piece-5 {
  background-image: url(../img/ifit/ifit-piece-5@2x.jpg);   
}

.ifit-piece-6 {
  background-image: url(../img/ifit/ifit-piece-6@2x.gif);   
}

.ifit-piece-7 {
  background-image: url(../img/ifit/ifit-piece-7@2x.jpg);   
}

.ifit-piece-8 {
  background-image: url(../img/ifit/ifit-piece-8@2x.jpg);   
}

.ifit-piece-9 {
  background-image: url(../img/ifit/ifit-piece-9@2x.jpg);   
}

.ifit-piece-10 {
  background-image: url(../img/ifit/ifit-piece-10@2x.gif);   
}

.evelar-piece-1 {
  background-image: url(../img/evelar/evelar-piece-1@2x.jpg);   
}

.evelar-piece-2 {
  background-image: url(../img/evelar/evelar-piece-2@2x.jpg);   
}

.evelar-piece-3 {
  background-image: url(../img/evelar/evelar-piece-3@2x.jpg);   
}

.evelar-piece-4 {
  background-image: url(../img/evelar/evelar-piece-4@2x.jpg);   
}

.evelar-piece-5 {
  background-image: url(../img/evelar/evelar-piece-5@2x.jpg);   
}

.evelar-piece-6 {
  background-image: url(../img/evelar/evelar-piece-6@2x.jpg);   
}

.evelar-piece-7 {
  background-image: url(../img/evelar/evelar-piece-7@2x.jpg);   
}

.evelar-piece-8 {
  background-image: url(../img/evelar/evelar-piece-8@2x.jpg);   
}

.evelar-piece-9 {
  background-image: url(../img/evelar/evelar-piece-9@2x.jpg);   
}

.evelar-piece-10 {
  background-image: url(../img/evelar/evelar-piece-10@2x.jpg);   
}

.branding-piece-1 {
  background-image: url(../img/branding/branding-piece-1@2x.jpg);   
}

.branding-piece-2 {
  background-image: url(../img/branding/branding-piece-2@2x.jpg);   
}

.branding-piece-3 {
  background-image: url(../img/branding/branding-piece-3@2x.jpg);   
}

.branding-piece-4 {
  background-image: url(../img/branding/branding-piece-4@2x.jpg);   
}

.branding-piece-5 {
  background-image: url(../img/branding/branding-piece-5@2x.gif);   
}

.branding-piece-6 {
  background-image: url(../img/branding/branding-piece-6@2x.gif);   
}

.branding-piece-7 {
  background-image: url(../img/branding/branding-piece-7@2x.jpg);   
}

.branding-piece-8 {
  background-image: url(../img/branding/branding-piece-8@2x.jpg);   
}

.branding-piece-9 {
  background-image: url(../img/branding/branding-piece-9@2x.gif);   
}

.branding-piece-10 {
  background-image: url(../img/branding/branding-piece-10@2x.gif);   
}

.branding-piece-11 {
  background-image: url(../img/branding/branding-piece-11@2x.jpg);   
}

.branding-piece-12 {
  background-image: url(../img/branding/branding-piece-12@2x.gif);   
}

.about-img {
  width: 340px;
  height: 340px;
  margin: 0 auto;
  margin-bottom: 5rem;
  background-image: url(../img/about.gif);  
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


.work-copy {
  max-width: 1100px;
  margin: 1rem auto 2rem;
}

.work-copy h1 {
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
}

.work-copy p {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}

.content-link {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 2px;
}

@media all and (min-width: 600px) {

}

@media all and (min-width: 800px) {

  .work-copy h1 {
    font-size: 4rem;
    margin-bottom: 2.25rem;
  }

  .work-copy p {
    font-size: 2.25rem;
    line-height: 3.25rem;
    margin-bottom: 2.5rem;
  }  

}

@media all and (min-width: 1200px) {

  .content-wrapper {
    padding: 1rem 3rem;
  }

  .site-header__wrapper {
    padding-left: 3rem;
  }  

  .piece {
    margin-bottom: 4rem;
  }

  .last-piece {
    margin-bottom: 2rem;
  }

  .piece-description {
    margin: 1.5rem 0 4rem 0;
  }

  .client-name {
    margin-bottom: 0.75rem;
  }

  .work-cover {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    margin-bottom: 6rem;
  }

  .work-copy {
    max-width: 1100px;
    margin: 1rem auto 6rem;
  }

}


/* ============================================================
   END WORK
=============================================================== */

/* ============================================================
   BOTTOM NAV
=============================================================== */

.bottom-nav-content-wrapper {
  max-width: 1600px;
  margin: auto;
  padding: 0rem 0.8rem;
}

@media all and (min-width: 1200px) {

  .bottom-nav-content-wrapper {
    padding: 0rem 0.8rem 1rem 0.8rem;
  }
}

.project-button-row {
  margin: 16px 0 32px;
  text-align: center;
}

.project-button-row > a:hover {
  text-decoration: none;
}


.project-button {
  display: inline-block;
  padding: 12px 16px;
  margin: 0 2px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.project-button:hover {
  background-color: #f3f5f6;
}

.project-button > img {
  width: 44px;
  margin-bottom: 12px;
}

.project-button > p {
  font-family: 'NexaBook', Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 0.8em;
    text-decoration: none;
    color: #555;
}

@media all and (min-width: 800px) {

  .project-button-row {
    margin: 48px 0 72px;
    text-align: center;
  }

  .project-button {
    padding: 40px 56px;
    margin: 0 8px;
  }

  .project-button > img {
    width: 52px;
    margin-bottom: 12px;
  }

}

/* ============================================================
   END BOTTOM NAV
=============================================================== */

/* ============================================================
   FOOTER
=============================================================== */

.footer {
  text-align: center;
  margin: 1rem auto;
  margin-bottom: 4rem;
}

.email-contact {
  font-size: 1.25rem;
  font-weight: 600;
}

.email-contact:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 2px;
}

.social-links a svg {
  width: 32px;
  height: 32px;
  margin: 1.8rem 1rem;
}

/* ============================================================
   END FOOTER
=============================================================== */

/* ============================================================
   ABOUT
=============================================================== */

/* ============================================================
   END ABOUT
=============================================================== */