body {
    --gold: #E4B63A;

    margin: 0;
    background-color: white;
    font-family: 'Open Sans', sans-serif;
}

a {
    color: inherit;
}
a.current {
    color: var(--gold);
}

header a {
    text-decoration: none;
}
nav a:hover {
    color: var(--gold);
    background: white;
}

header.banner a {
    display: flex;
    align-items: center;
}
header.banner img {
    height: var(--banner-logo-height);
    margin: 0.6rem;
}
header.banner h1 {
    margin: 0;
    max-width: 6em;             /* Force linebreak. */
    font-size: var(--banner-name-height);
    font-weight: normal;
    font-family: 'Cormorant', serif;
}

header.banner img, .social img {
    filter: brightness(0);
}
header.banner:hover img, .social a:hover img {
    filter: none;
}
header.banner:hover {
    color: var(--gold);
}

header.menu > nav a {
    font-size: 1.2rem;
    font-weight: 600;
}

nav ol, nav ul {
    list-style-type: none;
}

main {
    color: #353535;
}

main h1 {
    font-size: 1.4em;
}
main h2 {
    font-size: 1.2em;
}

footer.social a {
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
}
footer.social a.contact:hover {
    color: var(--gold);
    background: white;
}

a.lang {
    border: 0.15rem solid black;
    border-radius: 50%;
}
a.lang:hover {
    color: white;
    background: var(--gold);
    border: 0.15rem solid var(--gold);
}

footer.social a.lang {
    display: block;
    padding: 0.5rem;
    font-size: 1rem;
}

footer.social {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer.legal {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    margin: auto;
    font-size: 75%;
}

@media (min-width: 40em) {
    body {
        --banner-logo-height: 8.5rem;
        --banner-name-height: 2rem;
        --menu-top-margin: calc((var(--banner-logo-height)
                                 - 2 * var(--banner-name-height))
                                / 2);

        min-height: 100vh;
        display: grid;
        grid-template-columns: 2fr 1fr 4fr 2fr auto;
        grid-template-rows: auto 1fr auto;
    }

    header.slidingmenu {
        display: none;
    }

    header.banner {
        grid-column: 1;
    }

    header.menu {
        grid-column: 3;
    }

    header.menu nav {
        margin-top: var(--menu-top-margin);
    }

    nav > ol {
        display: grid;
        align-items: center;
        align-content: stretch;
        text-align: center;
        margin: 0;
    }
    nav ol, nav ul {
        padding-left: 0;
    }

    /* I'd like to make sure the grid only ever has 1/2/4 columns.
     * No idea how to do that with one single neat rule, so…
     * 🤖 Go Go Gadget Mediaquery 🤖 */

    @media (min-width: 50em) {
        nav > ol {
            grid-template-columns: repeat(2, minmax(8em, 1fr));
        }
    }

    @media (min-width: 80em) {
        nav > ol {
            grid-template-columns: repeat(4, minmax(8em, 1fr));
        }
    }

    nav > ol > li > a {
        display: block;
        padding: 0.5em 0.1em;
    }

    nav li.dropdown {
        position: relative;
    }
    nav li.dropdown ul {
        position: absolute;
        width: 100%;
        background: #ddd8;
        z-index: 1;

        overflow: hidden;
        max-height: 0;
        transition: max-height 0.5s;
    }
    nav li.dropdown:hover > a {
        background: white;
        color: var(--gold);
    }
    nav li.dropdown:hover ul {
        /* ⚠ Magic constant: must be big enough to show the whole dropdown,
           but not too big otherwise the transition will be "delayed". */
        max-height: 20rem;
    }
    nav li.dropdown > ul > li {
        list-style-type: none;
    }
    nav li.dropdown > ul > li:hover {
        background: white;
    }
    nav li.dropdown > ul > li a {
        display: block;       /* Make link span whole containing block. */
    }

    main {
        grid-row: 2;
        grid-column: 1 / -2;
        font-size: 1.2rem;
        margin-left: 4em;
    }

    footer.social {
        grid-row: 1 / -2;
        grid-column: 5;
        margin: var(--menu-top-margin) 1em 0;
    }

    footer.social a {
        display: block;
        margin: 1rem;
    }

    footer.social a > img {
        width: 2.2rem;
    }

    footer.social > a.contact {
        /* Ideally should be just:
         * writing-mode: sideways-lr;
         * but of course We Can't Have Nice Things. */
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: 1rem 0.5rem;
        margin: 0;              /* Compensate padding. */
    }
}

@media (max-width: 40em) {
    body {
        --banner-logo-height: 6rem;
        --banner-name-height: 1.8rem;

        display: grid;
        grid-template-columns: 3rem 1fr;
        grid-template-rows: 3rem auto 1fr auto;
        min-height: 100vh;
    }

    header.menu, footer.social {
        display: none;
    }

    header.slidingmenu {
        grid-column: 1;
        grid-row: 1;
    }
    body > header.banner {
        grid-column: 2;
        grid-row: 1 / 3;
        justify-self: start;
    }
    main {
        grid-row: 3;
        grid-column: 1 / -1;
        margin: 0.8em;
    }
    footer.legal {
        grid-column: 1 / -1;
        grid-row: -1;
    }

    header.slidingmenu {
        position: relative;
        /* Bump this whenever the z-index arms race in <main> escalates. */
        --slidingmenu-z-index: 2;
    }
    header.slidingmenu > input {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        z-index: calc(var(--slidingmenu-z-index) + 1);
        opacity: 0;
        cursor: pointer;
    }
    header.slidingmenu img.button {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0.3rem;
        width: 2.4rem;
        height: 2.4rem;
    }
    header.slidingmenu img.button {
        filter: brightness(0);
    }
    header.slidingmenu > input:hover ~ img.button.open,
    header.slidingmenu > input:hover ~ .content > img.button.close {
        filter: none;
    }

    header.slidingmenu > .content {
        position: fixed;
        overflow: auto;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        margin: 0;

        background: #eeee;
        color: initial;

        transform-origin: left;
        transform: translate(-100vw);
        transition: transform 0.5s;
        z-index: var(--slidingmenu-z-index);

        display: grid;
        grid-template-columns: 3rem 1fr 3.6rem;
        grid-template-rows: 3.6rem repeat(4, auto);
    }
    header.slidingmenu > .content > img.button.close {
        grid-column: 1;
        grid-row: 1;
        position: fixed;
    }
    header.slidingmenu > .content header.banner {
        grid-column: 2;
        grid-row: 1 / 3;
        justify-self: start;
    }
    header.slidingmenu > .content > a.lang {
        grid-column: -2;
        grid-row: 1;

        display: flex;
        align-self: center;
        justify-self: center;
        align-items: center;
        justify-content: center;

        padding: 0.4rem;
        font-size: 1rem;
    }
    header.slidingmenu > .content > nav.menu,
    header.slidingmenu > .content > nav.social {
        grid-column: 2;
    }

    header.slidingmenu > .content nav ol,
    header.slidingmenu > .content nav ul {
        margin-top: 0.2em;
        padding-left: 0;
    }
    header.slidingmenu > .content > nav.menu li > a {
        display: block;
        padding: 0.5em;
    }
    header.slidingmenu > .content > nav.menu li.dropdown > a {
        display: flex;
    }
    header.slidingmenu > .content > nav.menu li.dropdown li > a {
        padding: 0.2em;
        padding-left: 2em;
    }

    header.slidingmenu > .content > nav.social > ul {
        display: flex;
        padding-left: 0;
    }
    header.slidingmenu > .content > nav.social > ul > li:not(:first-child) {
        margin-left: 1em;
    }
    header.slidingmenu > .content > nav.social > ul > li > a {
        display: flex;
        align-items: center;
        padding: 0.5em;
    }
    header.slidingmenu > .content > nav.social > ul > li > a > img {
        width: 2em;
        height: 2em;
    }

    header.slidingmenu > input:checked {
        position: fixed;
        width: 3rem;
        height: 3rem;
    }
    header.slidingmenu > input:checked ~ .content {
        transform: none;
    }
    header.slidingmenu > input:checked ~ img.button.open {
        opacity: 0;
    }
}