/** Layout **/

html {
    font-size: 115%;
    line-height: 1.6;
    font-family: "ff-din-paneuropean", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #191919;
}

.wrapper {
    width: 560px;
    margin: 3rem auto;
}

@media (max-width: 680px) {
    .wrapper {
        max-width: 90%;
        margin: 1rem auto;
    }
}

section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

section:last-child {
    border-bottom: none;
}

/** Typography **/

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.02em;
}

p {
    font-weight: 400;
    font-style: normal;
}

p.first-child {
    margin-top: 0;
}

strong {
    font-weight: 700;
}

.essay::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 2;
    font-family: monospace;
    font-weight: lighter;
    margin-left: -10px
}

/* This utility class can be used to make any text smaller and lighter. */
.small {
    margin: 2em 0;
    font-size: 0.9rem;
    font-weight: 200;
}

.strikethrough {
    text-decoration: line-through;
}

/** Links **/

a {
    color: #191919;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/** Hero **/

.hero {
    margin: 0;
    background: url(assets/hero-img.jpg) no-repeat bottom center / cover;
    background-size: cover;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.lockup {
    width: 240px;
    margin: .5rem;
}


@media (min-width: 800px) {
    .hero {
        align-items: flex-start;
    }
}

@media (min-width: 1000px) {
    .lockup {
       margin: 2rem;
    }
}

@media (min-width: 1440px) {
    .lockup {
       width: 280px;
    }
    .hero {
        height: 500px;
    }
}



/** Jobs **/

.job {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .75rem;
    margin-bottom: 3rem;
}

.job:last-child {
    margin-bottom: 0;
}

.job-description {
    width: 100%;
}

.job-media {
    width: 100%;
}

.case-study {
    width: 100%;
}

.job-description > h3 {
    margin: 0;
}

/** Case Study Pages **/

/* This targets the body of the case study pages to make the iframe fill the screen. */
.case-study-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    overflow: hidden; /* This prevents scrollbars on the main page container. */
    padding: 1em;
}

/* This is the header for the case study pages, containing the "back" link. */
.case-study-header {
    flex-shrink: 0; /* This prevents the header from shrinking when the iframe is large. */
}

/* This is a wrapper for the iframe that helps with centering. */
.iframe-wrapper {
    flex-grow: 1; /* This allows the iframe wrapper to grow and fill the available space. */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2em;
    box-sizing: border-box;
}

/* This container holds the iframe and gives it a shadow. */
.iframe-container {
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* This ensures the iframe itself takes up the full space of its container. */
.iframe-container iframe {
    display: block;
    width: 100%;
    height: 100%;
}