/* Decorative page imagery stays separate from event photos, forms and maps. */
:root { --tuttd-header-height: 80px; }
.page-hero-wrap, .world-hero-wrap { position: relative; z-index: 1; isolation: isolate; }
.page-artwork { position: absolute; z-index: -1; top: calc(-1 * var(--tuttd-header-height)); right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.page-artwork picture { display: block; width: 100%; height: 100%; }
.page-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.page-artwork::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fbf3e6ed 0%, #fbf3e6d9 46%, #fbf3e680 100%), linear-gradient(0deg, var(--paper, #f3efe5) 0%, #f3efe500 48%); }
.world-hero-wrap > .page-artwork img { object-position: center 55%; }
.world-hero-wrap > .page-artwork::after { background: linear-gradient(90deg, #fbf3e6 0%, #fbf3e6f5 34%, #fbf3e6c7 56%, #fbf3e61a 100%), linear-gradient(0deg, var(--paper) 0%, #f3efe500 28%); }
.app-body { position: relative; isolation: isolate; --tuttd-header-height: 84px; }
.app-body > .page-artwork { top: 0; bottom: auto; height: calc(500px + var(--tuttd-header-height)); }
.app-body > .page-artwork::after { background: linear-gradient(90deg, #f3efe5f5 0%, #f3efe5e8 45%, #f3efe5b3 100%), linear-gradient(0deg, var(--paper) 0%, #f3efe500 68%); }
@media (max-width: 1000px) {
    .world-hero-wrap > .page-artwork::after { background: linear-gradient(90deg, #fbf3e6f5 0%, #fbf3e6de 52%, #fbf3e699 100%), linear-gradient(0deg, var(--paper) 0%, #f3efe500 35%); }
}
@media (max-width: 900px) {
    :root, .app-body { --tuttd-header-height: 72px; }
}
@media (max-width: 620px) {
    .page-artwork img { object-position: 64% center; }
    .page-artwork::after { background: linear-gradient(180deg, #fbf3e6eb 0%, #fbf3e6e0 60%, var(--paper) 100%); }
    .world-hero-wrap > .page-artwork img { object-position: 72% center; }
    .world-hero-wrap > .page-artwork::after { background: linear-gradient(180deg, #fbf3e6ed 0%, #fbf3e6e3 58%, #f3efe5a6 100%); }
    .app-body > .page-artwork { height: calc(560px + var(--tuttd-header-height)); }
    .app-body > .page-artwork::after { background: linear-gradient(180deg, #f3efe5de 0%, #f3efe5e8 58%, var(--paper) 100%); }
}
@media (max-width: 360px) {
    :root, .app-body { --tuttd-header-height: 62px; }
}