/* Boxed presentation with a modern, comfortably wide reading area. */
:root {
    --content: 90rem;
}

body.milankov-site {
    background:
        linear-gradient(rgba(13, 10, 8, 0.48), rgba(13, 10, 8, 0.60)),
        url('../images/opera-background.png') center center / cover fixed no-repeat;
}

.header-shell,
.site-content,
.footer-shell {
    width: min(calc(100% - 4rem), var(--content));
}

.site-header {
    background: rgba(14, 11, 9, 0.86);
    border-bottom-color: rgba(197, 157, 79, 0.56);
}

.site-content {
    box-sizing: border-box;
    min-height: 60vh;
    margin-top: clamp(1.75rem, 4vw, 4.5rem);
    margin-bottom: clamp(2.5rem, 6vw, 6rem);
    padding: clamp(1.75rem, 4.2vw, 4.75rem);
    background: rgba(18, 14, 11, 0.9);
    border: 1px solid rgba(214, 179, 108, 0.38);
    box-shadow: 0 1.8rem 4.5rem rgba(0, 0, 0, 0.48);
}

.site-content p,
.site-content li {
    max-width: none;
}

.site-footer {
    background: rgba(10, 8, 7, 0.9);
}

.is-home .site-content {
    min-height: calc(100vh - 11rem);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.home-hero {
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(100vh - 11rem);
    padding: clamp(2rem, 6vw, 6rem) 2rem;
}

.home-hero img {
    display: block;
    width: min(29rem, 84vw);
    max-height: 36vh;
    object-fit: contain;
    filter: drop-shadow(0 0.7rem 1.25rem rgba(0, 0, 0, 0.58));
}

@media (max-width: 700px) {
    .header-shell,
    .site-content,
    .footer-shell {
        width: calc(100% - 2rem);
    }

    body.milankov-site {
        background-attachment: scroll;
    }

    .site-content {
        margin-top: 1rem;
        margin-bottom: 2rem;
        padding: 1.5rem;
    }

    .is-home .site-content {
        min-height: calc(100vh - 9rem);
    }

    .home-hero {
        min-height: calc(100vh - 9rem);
        padding-bottom: 2.5rem;
    }
}