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

:root {
    --contrast-bg: #1a3745;
    --contrast-fg: #9db8e1;
    --contrast-text: #e8e8e8;
    --alternate-bg: #FFFFFF;
    --alternate-fg: #1f2e3b;
    --alternate-text: #1f2123;
}

body {
    background-color: var(--alternate-bg);
    color: var(--alternate-text);
    font-size: 120%;
    line-height: 1.6;
    font-family: 'Catamaran', sans-serif;
    margin: 0;
}

p {
    max-width: 70ch;
}

ul {
    padding-inline-start: 5ch;
    padding-left: 5ch;
    max-width: 65ch;
    padding-top: 1rem;
}

ul, p {
    text-wrap: balance
}

ul:not(:last-child), p:not(:last-child) {
    margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Alegreya', serif;
    margin: 0;
}

.standout a {
    display: inline-block;
    background-color: var(--alternate-bg);
    color: var(--alternate-fg);
    padding: 0 1rem;
}

a[alt] {
    display: flex;
}

img {
    max-width: calc(100vw - 8rem);
    width: 30ch;
    border: solid 1px var(--alternate-fg);
}

figure {
    float: left;
    display: flex;
    flex-direction: column;
    width: min-content;
    gap: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    background-color: var(--alternate-bg);
    color: var(--alternate-fg);
    padding: 1rem;
    border: solid 1px var(--alternate-fg);
}

figcaption {
    font-size: .75rem;
    font-style: italic;
}

header {
    background-image: linear-gradient(to right, transparent 0%, transparent calc(100% - 1px), var(--contrast-fg) 100%), linear-gradient(to bottom, var(--contrast-bg) 0%, var(--contrast-bg) calc(100% - 1px), var(--contrast-fg) 100%);
    background-size: 1rem 1rem;
    /* height: 16rem; */
    padding-left: 3rem;
    padding-top: 3rem;
    padding-bottom: calc(3rem + 1px);
}

.header_kicker {
    background-color: var(--contrast-bg);
    display: flex;
    align-items: center;
    padding-left: 1rem;
    height: 3rem;
    width: calc(7rem - 1px);
}

.header_headline {
    display: inline-flex;
    align-items: center;
    padding: 1rem;
    padding-bottom: calc(2rem - 1px);
    font-size: 3rem;
    background-color: var(--contrast-bg);
    width: min-content;
    line-height: 1;
}

.header_headline.header_headline-resume {
    width: calc(13rem - 1px);
}

article, section {
    padding: 3rem;
}

article h2, section h2 {
    font-size: 2rem;
}

header, .standout {
    background-color: var(--contrast-bg);
    color: var(--contrast-text);
}

article:last-child {
    background-image: none;
}

.timeline {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem 3rem;
}

.timeline_date {
    font-weight: 700;
}

.timeline_title, .timeline_details {
    font-family: 'Catamaran', sans-serif;
}

.timeline_title {
    font-weight: bold;
    font-size: inherit;
}

.timeline_details {
    font-style: italic;
}

@media screen and (min-width: 36rem) {
    article h2, section h2 {
        font-size: 3rem;
    }
    
    .header_headline {
        font-size: 5rem;
    }

    .header_headline.header_headline-resume {
        width: calc(20rem - 1px);
	height: calc(7rem - 1px);
    }

    .header_headline-casestudies {
        height: calc(7rem - 1px);
        width: calc(29rem - 1px);
    }

    .timeline {
        grid-template-columns: auto 1fr;
    }
}

@media screen and (min-width: 55rem) {
    .header_headline-scenic {
        height: calc(7rem - 1px);
        width: calc(48rem - 1px);
    }
}

@media screen and (min-width: 100rem) {
    section, article {
        padding-left: 20rem;
    }
}

@media print {
    :root {
        --contrast-bg: white;
        --contrast-fg: black;
        --alternate-bg: white;
        --alternate-fg: black;
    }

    section a {
        padding: none;
    }

    section a:not([href^="tel:"]):not([href^="mailto:"])::after {
        content: " https://cssinate.com/" attr(href);
    }

    .resume header {
        background: 0;
        padding: 1rem 2rem;
    }

    .resume .header_headline {
        display: none;
    }

    .resume .header_kicker {
        padding: 0;
        font-family: 'Alegreya', serif;
        font-size: 2rem;
        width: auto;
    }

    .resume section, .resume article {
        padding: 1rem 2rem;
    }

    .resume h2 {
        font-size: 1.5rem;
        text-decoration: underline;
    }

    .resume .timeline_date {
        page-break-after: avoid;
    }
}