/* Reuse the About page's banner and editorial sections. */
.civilization-banner > picture { display: block; }
.civilization-banner .about-banner-image { height: clamp(520px, 58vw, 800px); object-fit: cover; object-position: center top; filter: none; }
.civilization-banner .about-banner-copy { bottom: 40px; text-align: center; }
.civilization-banner .about-banner-copy h1 { font-size: clamp(30px, 3.2vw, 46px); }
.civilization-banner .about-banner-copy h1 span::before { content: '・'; }
.civilization-banner .about-banner-copy p { color: #ead2a4; }
.civilization-page .about-story-figure img { filter: none; }
.civilization-page .civilization-invitation { margin-top: 64px; }
.civilization-invitation .civilization-virtues { color: var(--gold-bright); font-size: 16px; letter-spacing: .1em; line-height: 2; }
.civilization-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.civilization-actions .button { margin-top: 0; }
.civilization-mobile-break { display: none; }
@media (max-width: 700px) {
    .civilization-banner .about-banner-image { height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
    .civilization-banner .about-banner-copy { bottom: auto; }
    .civilization-banner .about-banner-copy h1 span { display: block; }
    .civilization-banner .about-banner-copy h1 span::before { content: none; }
    .civilization-banner .about-banner-copy p { font-size: 17px; }
    .civilization-page .civilization-invitation { margin-top: 40px; padding-inline: 18px; }
    .civilization-invitation h2 { font-size: 25px; letter-spacing: .02em; }
    .civilization-invitation .civilization-virtues { font-size: 15px; letter-spacing: 0; }
    .civilization-mobile-break { display: block; }
}
:root[data-text-size="large"] .civilization-banner .about-banner-copy p { font-size: 24px; }
:root[data-text-size="large"] .civilization-invitation > p { font-size: 21px; }