/* type */

body {
    color: rgb(60,60,60);
    line-height: 1;
    font-family: "IBM Plex Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}
h1 {
    font-family: "Ultra", serif;
    font-weight: 400;
    font-style: normal;
}
p, ul {
    line-height: 1.4;
}
p.intro {
    font-size: 1.4em;
}
.nowrap {
    white-space: nowrap;
}
/* layout */

body {
    background-color: rgb(220,220,210);
    max-width: 90vw;
    margin: 1em auto 0 auto;
    display: grid;
    gap: 2em;
}
header {
    grid-column-start: 1;
    grid-column-end: 2;
}
section {
    grid-column-start: 2;
    grid-column-end: -1;
}
p.intro {
    margin-top: 2em;
}
@media screen and (width < 800px) {
    header img {
        display: none;
    }
    body {
        background-image: url("ogp_columbian_pale_grey.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-blend-mode: overlay;
    }
}
@media screen and (width >= 800px) {
    body {
        display: grid;
        gap: 2em;
        grid-template-columns: repeat(5, 1fr);
    }
}