:root {
    --blue-100: #f8f8f9;
    --blue-200: #E9EBED;
    --blue-400: #BCC2CB;
    --blue-450: #A7AEBC;
    --blue-650: #596886;
    --blue-850: #27324A;
    --blue-900: #171C27;
    --purple-900: #11001F;
    --purple-850: #2E2038;
    --purple-400: #A99EB3;
    --purple-150: #ECEAED;
    --yellow-200: #DFBD4B;
    --gray-500: #404040;
  }

body {
    padding: 20px 0 0;
    font-family: 'Inter', sans-serif;
    line-height: 150%;
    color: var(--blue-900);
    background-color: var(--blue-100);

}

@media (min-width: 700px) {
    body {
        padding-top: 40px;
    }
}

a {
    color: var(--blue-900);
    text-decoration: none;
    border-bottom: 1px solid var(--purple-850);
}

.link-unstyled {
    border-bottom: none;
}

h1, h2 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-weight: 900;
}

h2 {
    margin: 0 0 20px;
    font-weight: 600;
    font-size: 1.25rem;
}

h3 {
    margin: 0 0 15px;
    font-weight: 600;
    font-size: 1rem;
}

h4 {
    margin: 10px 0 5px;
    font-weight: 600;
    font-size: 1rem;
}

p {
    margin: 0 0 20px;
}

ul {
    margin: 10px 0 20px;
    padding: 0 0 0 20px;
    list-style-position: outside;
}

.list-unstyled {
    list-style: none;
    padding-left: 0;
}

li {
    margin-bottom: 5px;
}

img {
    height: auto;
    width: 100%;
}

.thumbnail {
    border-radius: 4px;
    border: 1px solid var(--blue-200);
    box-shadow: 0 0 0 4px var(--blue-100);
}

.thumbnail--rounded {
    border-radius: 10px;
}

.img-circle {
    max-width: 200px;
    max-height: 200px;
    border-radius: 100%;
    border: 1px solid var(--blue-200);
    box-shadow: 0 0 0 4px var(--blue-100);
}

header,
.wrapper {
    max-width: 1040px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-gap: 20px;
}

.grid--gapless {
    grid-gap: 0;
}

@media (min-width: 700px) {

    .grid {
        grid-template-columns: repeat(12, [col-start] 1fr);
    }

    .grid--span-8 > * {
        grid-column: col-start / span 8;
    }

    .grid--halves {
        align-items: center;
        grid-template-columns: repeat(2, [col-start] 6fr);
    }

    .grid--hero > * {
        grid-column: col-start 2 / span 10;
    }

}

@media (min-width: 980px) {

    .grid--hero > * {
        grid-column: col-start 3 / span 8;
    }
    
}

/* Main nav */

.main-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    text-align: right;
    user-select: none;
}

/* Mobile slide out */

.main-nav__btn {
    display: none;
}

.main-nav__icon {
    cursor: pointer;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5 2.5H1.5C0.947715 2.5 0.5 2.94772 0.5 3.5V4.5C0.5 5.05228 0.947715 5.5 1.5 5.5H22.5C23.0523 5.5 23.5 5.05228 23.5 4.5V3.5C23.5 2.94772 23.0523 2.5 22.5 2.5Z' fill='%232E2038'/%3E%3Cpath d='M22.5 10.5H1.5C0.947715 10.5 0.5 10.9477 0.5 11.5V12.5C0.5 13.0523 0.947715 13.5 1.5 13.5H22.5C23.0523 13.5 23.5 13.0523 23.5 12.5V11.5C23.5 10.9477 23.0523 10.5 22.5 10.5Z' fill='%232E2038'/%3E%3Cpath d='M22.5 18.5H1.5C0.947715 18.5 0.5 18.9477 0.5 19.5V20.5C0.5 21.0523 0.947715 21.5 1.5 21.5H22.5C23.0523 21.5 23.5 21.0523 23.5 20.5V19.5C23.5 18.9477 23.0523 18.5 22.5 18.5Z' fill='%232E2038'/%3E%3C/svg%3E%0A");
}

.main-nav__list {
    display: none;
    list-style: none;
}

.main-nav__btn:checked ~ .main-nav__list {
    position: fixed;
    z-index: 10;
    display: block;
    width: 230px;
    right: 0;
    top: -40px;
    background: rgba(255,255,255,.9);
    bottom: -30px;
    padding: 130px 40px 0;
    text-align: right;
    box-shadow: -4px 0 8px rgba(0,0,0,.1);
}

.main-nav__btn:checked ~ .main-nav__icon {
    position: fixed;
    z-index: 100;
    right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M14.3001 12.1788C14.2768 12.1556 14.2584 12.128 14.2458 12.0976C14.2332 12.0672 14.2267 12.0347 14.2267 12.0018C14.2267 11.9689 14.2332 11.9364 14.2458 11.906C14.2584 11.8756 14.2768 11.848 14.3001 11.8248L23.5631 2.5628C23.8444 2.28114 24.0022 1.89928 24.002 1.50124C24.0017 1.10319 23.8433 0.721561 23.5616 0.440299C23.28 0.159037 22.8981 0.00118392 22.5001 0.00146522C22.102 0.00174652 21.7204 0.160139 21.4391 0.441799L12.1771 9.6998C12.1539 9.72308 12.1263 9.74155 12.0959 9.75416C12.0656 9.76676 12.033 9.77325 12.0001 9.77325C11.9672 9.77325 11.9347 9.76676 11.9043 9.75416C11.8739 9.74155 11.8463 9.72308 11.8231 9.6998L2.56113 0.441799C2.42186 0.302467 2.25651 0.191929 2.07453 0.116498C1.89254 0.0410666 1.69748 0.00221873 1.50048 0.0021723C1.10262 0.00207854 0.721022 0.160037 0.439627 0.441299C0.158232 0.722561 9.38099e-05 1.10409 4.17235e-08 1.50195C-9.37265e-05 1.8998 0.157865 2.2814 0.439127 2.5628L9.70013 11.8248C9.72341 11.848 9.74188 11.8756 9.75448 11.906C9.76709 11.9364 9.77357 11.9689 9.77357 12.0018C9.77357 12.0347 9.76709 12.0672 9.75448 12.0976C9.74188 12.128 9.72341 12.1556 9.70013 12.1788L0.439127 21.4418C0.29986 21.5811 0.189401 21.7465 0.114055 21.9286C0.0387096 22.1106 -4.63876e-05 22.3057 4.17235e-08 22.5027C9.38099e-05 22.9005 0.158232 23.282 0.439627 23.5633C0.57896 23.7026 0.744358 23.813 0.92638 23.8884C1.1084 23.9637 1.30348 24.0025 1.50048 24.0024C1.89834 24.0023 2.27987 23.8442 2.56113 23.5628L11.8231 14.2998C11.8463 14.2765 11.8739 14.258 11.9043 14.2454C11.9347 14.2328 11.9672 14.2264 12.0001 14.2264C12.033 14.2264 12.0656 14.2328 12.0959 14.2454C12.1263 14.258 12.1539 14.2765 12.1771 14.2998L21.4391 23.5628C21.7204 23.8442 22.1019 24.0023 22.4998 24.0024C22.8976 24.0025 23.2792 23.8446 23.5606 23.5633C23.842 23.282 24.0002 22.9005 24.0003 22.5027C24.0003 22.1048 23.8424 21.7232 23.5611 21.4418L14.3001 12.1788Z' fill='%232E2038'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.main-nav__list li {
    margin-bottom: 10px;
}

.main-nav li:last-child {
    margin-right: 0;
}

.main-nav a {
    padding: 2px 3px;
    text-decoration: none;
    color: var(--blue-850);
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: .15s border ease-out;
}

.main-nav a:hover {
    border-color: var(--purple-150);
}

.main-nav .is-active,
.main-nav .is-active:hover {
    border-color: var(--purple-850);
}

@media (min-width: 800px) {
    .main-nav__icon {
        display: none;
    }
    
    .main-nav__list {
        display: flex;
        padding-top: 14px;
    }

    .main-nav li {
        margin-right: 30px;
        margin-bottom: 0;
    }
}

.logo {
    display: flex;
    align-items: center;
    max-width: 320px;
}

.logo__link {
    border: none;
    transition: .2s transform ease-out;
}

.logo__link:active {
    transform: scale(.9);
}

.logo__mark {
    flex: 0 0 73px;
    margin-right: 15px;
    transition: 2.5s transform ease-in-out;
}

.logo__mark:hover {
    transform: rotate(1080deg);
    transition-delay: 4s;
}

.logo__tagline {
    margin: 0;
    font-size: 1.563rem;
    text-transform: uppercase;
    color: var(--purple-900);
}

@media (min-width: 880px) {
    .logo {
        max-width: 440px;
    }
}

@media (min-width: 1060px) {
    .logo {
        max-width: none;
    }
}

.work-gallery {
    display: grid;
    grid-gap: 15px;
    padding: 0;
    list-style: none;
}

@media (min-width: 500px) {
    .work-gallery {
        grid-gap: 20px;
    }
}

.work-gallery li {
    display: flex;
    margin-bottom: 0;
}

.work-gallery li > * {
    flex: auto;
}

@media (min-width: 700px) {
    .work-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .work-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    .work-gallery--compact {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Sections */
section,
header,
footer {
    padding-left: 15px;
    padding-right: 15px;
}

header {
    grid-column: col-start / span 12;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

@media (min-width: 500px) {
    section,
    header,
    footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}


@media (min-width: 700px) {
    section,
    header,
    footer {
        padding-left: 40px;
        padding-right: 40px;
    }
    header {
        margin-bottom: 80px;
    }
}

section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.hero {
    text-align: center;
    font-size: 1.563rem;
    line-height: 170%;
}

.hero + .gallery,
.work + .gallery {
    padding-top: 30px;
}

.contact {
    background: var(--blue-900);
    color: var(--blue-450);
    font-weight: 300;
}

.contact a {
    color: var(--blue-450);
    border-color: var(--blue-450);
}

footer {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--yellow-200);
    color: var(--purple-900);
}

@media (min-width: 600px) {
    .footer-content {
        display: flex;
        justify-content: space-between;
    }
}

footer > * {
    flex: auto;
}

footer p {
    margin: 0;
}

/* Cards */

.card__header   { grid-area: card_title; }
.card__desc     { grid-area: card_desc; }
.card__body     { grid-area: card_body; }
.card__media    { grid-area: card_media; }
.card__footer   { grid-area: card_footer; }

.card {
    display: grid;
    grid-column-gap: 20px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "card_title"
        "card_body"      
        "card_footer";
    padding: 20px;
    border: 1px solid var(--blue-200);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(23, 28, 39, 0.02),
                0px 7px 14px rgba(23, 28, 39, 0.04);
    color: var(--gray-500);
    background-color: #fff;
    transition: 175ms box-shadow ease-out,
                175ms border ease-out;
}

.card--media {
    grid-template-areas:
        "card_title"
        "card_desc"
        "card_media"
        "card_body"      
        "card_footer";
}

@media (min-width: 800px) {
    .card--media {
        grid-template-columns: 2fr minmax(300px, 1fr);
        grid-template-areas:
            "card_title card_media"
            "card_desc card_media"
            "card_body card_body"
            "card_footer card_footer";
    }
}

.card--link-block {
    text-decoration: none;
}

.card--link-block:hover {
    border-color: transparent;
    box-shadow: 0px 1px 2px rgba(23, 28, 39, 0.04),
                0px 15px 30px rgba(23, 28, 39, 0.15);
}

.card--link-block:active {
    border-color: transparent;
    box-shadow: 0px 1px 2px rgba(23, 28, 39, 0.04),
                0px 5px 10px rgba(23, 28, 39, 0.15);
}

.card__header {
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--blue-900);
}

.card__footer {
    margin-top: auto;
}

/* Media block */
.media__img {
    max-width: 300px;
    margin-bottom: 20px;
}
@media (min-width: 700px) {
    .media {
        display: flex;
        align-items: center;
    }
    
    .media__img {
        flex: 0 0 200px;
        margin-right: 20px;
        margin-bottom: 0;
    }    
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    background-color: var(--purple-900);
    color: var(--yellow-200);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.64rem;
    border-radius: 2px;
    line-height: 110%;
}

/* Helpers */
.flex-row {
    display: flex;
    align-items: center;
}

.mr-md {
    margin-right: 20px;
}