header {
    display: grid;
}

header h1 {
    grid-column: 1;
}

header ul {
    break-before: column;
    grid-column: 2;
    text-align: right;
    list-style: none;
}


@media (pointer: coarse) {
    header ul>li {
        margin-bottom: 0.5em;
    }
}

@media screen and (min-width: 425px),
print {
    .role>.date::before {
        content: '| ';
    }

    .role>h3,
    .role>.date {
        display: inline;
    }
}

@media not screen and (min-width: 425px) {
    .role>.date {
        margin-top: -1em;
    }
}


.role>.date {
    font-size: 1em;
    font-weight: lighter;
}

div.role {
    break-inside: avoid-page;
}

#profiles h2::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: '\f2bd';
    filter: grayscale();
}

/* emulate paper margins */
@media screen and (min-width: calc(8in + 10px)) {
    body {
        background-color: #6699cc;
    }

    article {
        background-color: white;
        max-width: calc(8in - 4em - 10px);
        margin: auto;
        padding: 2em;
        box-shadow: 10px 5px 5px black;
    }

    hr {
        display: none;
    }
}

nav {
    text-align: right;
    margin: 0px;
    margin-top: 1em;
    width: 100%;
}

@media print {

    a,
    a:visited {
        color: black;
    }

    #profiles, nav {
        display: none;
    }
}