body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
}

header, main {
    margin: 0 auto;
}

header {
    text-align: center;
}

header h1 {
    font-size: 2.5em;
}

header aside {
    background-color: #ededed;
    display: block;
    padding: 0 1em;
}

header aside dt {
    font-size: 0.9em;
    font-weight: 500;
    margin-top: 1em;
}

header aside dt:first-child {
    margin-top: 0;
}

header aside dd {
    font-size: 1.1em;
    font-weight: 300;
    margin: 0;
}

main h2 {
    font-weight: 500;
    margin-bottom: 0;
}

article {
    margin-bottom: 1em;
}

article h3 {
    font-weight: 500;
    margin: 1.5em 0 0 0;
}

article:first-child h3 {
    margin: 1em 0 0 0;
}

article h4 {
    font-size: 1em;
    font-weight: 300;
    margin: 0 0 1em 0;
}

article h5 {
    font-size: 1em;
    font-weight: 500;
    margin: 1em 0 0 0;
}

article p {
    margin: 0.5em 0;
}

main aside h5 {
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 0;
}

main aside {
    font-size: 0.9em;
}

main aside ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin-top: 0;
    padding: 0;
}

main aside li {
    flex: 0 0 50%;
    margin-top: 0.5em;
}

main aside .reference__title {
    font-size: 1.1em;
    font-weight: 400;
}

main aside .reference__position {
    font-size: 1em;
    font-weight: 300;
    margin-bottom: 0.5em;
}

main aside .reference__contact {
    font-size: 0.9em;
}

/* Page breaks */

main section {
    break-after: auto;
    break-before: auto;
    break-inside: avoid;
}

/* Desktop and Print */

@media print, (min-width: 800px) {
    header {
        max-width: calc(1000px + 2em);
    }

    header aside {
        display: flex;
        flex-wrap: wrap;
    }

    header aside dl {
        flex: 1 1 33.3%;
    }

    header aside dl:first-child {
        text-align: left;
    }

    header aside dl:last-child {
        text-align: right;
    }

    main {
        max-width: 1000px;
        padding: 0 1em;
    }

    main section {
        display: flex;
        flex-wrap: wrap;
    }

    main section h2 {
        flex: 1 0 100%;
    }

    main .roles {
        flex: 1 0;
        padding-right: 20px;
    }

    main aside {
        flex: 0 0 210px;
    }

    main aside .reference {
        margin-top: 2em;
    }
}

@media print {
    body {
        font-size: 13px;
    }

    main aside {
        flex: 0 0 190px;
    }
}