:root {
    --pitch:    #0b090d;  /* void black, faintly violet */
    --bone:     #d9d3c7;  /* aged ivory — body text */
    --ash:      #8b8293;  /* muted mauve grey — secondary text */
    --amethyst: #8a5faf;  /* mourning-jewellery violet — accent */
    --oxblood:  #6d2231;  /* dried blood — hairlines only */
}

body {
    margin: 0;
    background: var(--pitch);
    color: var(--bone);
    font-family: Georgia, "Liberation Serif", "Times New Roman", serif;
    line-height: 1.6;
}

.nav-bar a {
    color: var(--bone);
    text-decoration: none;
    border-bottom: 1px solid var(--oxblood);
}

.nav-bar a :hover,
.nav-bar a :focus-visible {
    color: var(--bone);
    border-bottom-color: var(--amethyst);
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    /* one candle above the banner, falling off into the dark */
    background: radial-gradient(ellipse 80% 55% at 50% 0%, #241c2e 0%, var(--pitch) 70%);
}

.banner {
    flex: 0 0 auto;
    padding: 3.5rem 1rem 2.5rem;
    text-align: center;
    font-family: "Palatino Linotype", "Book Antiqua", "URW Palladio L", P052, Palatino, Georgia, serif;
    font-size: clamp(2rem, 9vw, 5rem);
    font-variant: small-caps;
    letter-spacing: 0.4em;
    text-indent: 0.4em; /* cancels the trailing letter-space so it centres true */
    text-shadow: 0 0 30px rgba(138, 95, 175, 0.35);
}

.nav-bar {
    flex: 0 0 auto;
    padding: 0.9rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    font-variant: small-caps;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    color: var(--ash);
    border-top: 1px solid var(--oxblood);
}

.content-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 3rem 1.5rem;
    gap: 3rem;
}
.content-desc {
    text-align: center;
    font-variant: small-caps;
    font-size: .75rem;
}
.content-box {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.content-box + .content-box {
    border-left: 1px solid var(--oxblood);
}

.content-box img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
}
.footer {
    flex: 0 0 auto;
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    font-variant: small-caps;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: var(--ash);
    border-top: 1px solid var(--oxblood);
}

@media (max-width: 40rem) {
    .content-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .content-box + .content-box {
        border-left: none;
        border-top: 1px solid var(--oxblood);
    }
}