html {
    --column-width: 44rem;
}

body {
}

body > * {
    max-width: var(--column-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

body > header#masthead {
    max-width: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

#masthead {
    justify-content: space-between;
    font-family: ui-rounded, system-ui, sans-serif;
    font-size: 2em;
    display: flex;
    align-items: baseline;
}

#masthead > h1 {
    font-size: 1em;
    margin: 0;
    padding: 0;
}

#masthead > nav > ul {
    display: flex;
    align-items: baseline;
    gap: 1em;
    margin: 0;
    padding: 0;
}

#masthead > nav > ul > li {
    list-style-type: none
}

@media (max-width: 375px) {
    #masthead > nav {
        display: none;
    }
}

@media (max-width: 600px) {
    #masthead > nav > ul > li:not(:first-child) {
        display: none;
    }
}

@media (max-width: 900px) {
    #masthead > h1 > span {
        display: none;
    }
}