/* 2027: Tajemství českého království. Artwork is isolated from reusable layout. */
:root {
    --primary: #7A1824;
    --primary-hover: #56101A;
    --on-primary: #FFF9ED;
    --gold: #B58A35;
    --surface: #FFF9ED;
    --page: #F3E6CC;
    --ink: #30271F;
    --link: #244D70;
    --border: #D8C6A3;
    --table-row: #F4EBD9;
}
.campaign-header { position: relative; isolation: isolate; overflow: hidden; }
.campaign-landscape { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.campaign-landscape img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; }
/* object-fit: cover is the responsive picture equivalent of background-size: cover. */
.campaign-landscape--page { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; z-index: -1; }
.campaign-landscape--page img { object-position: center; }
.site-footer { background: var(--surface); }
.campaign-header--entrance::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, var(--page), transparent 30%); }
.campaign-inner { width: min(1120px, calc(100% - 32px)); margin: auto; position: relative; }
.campaign-message { text-align: center; position: relative; z-index: 1; }
.campaign-title-panel { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 30% 10% 20%; background: url('../images/themes/2027/parchment.webp') center / contain no-repeat; }
.campaign-title { font-size: clamp(1.2rem, 10.5cqi, 4.3rem); color: var(--primary); font-family: Georgia, 'Times New Roman', serif; font-weight: 700; line-height: 1.04; text-decoration: none; margin: 0; }
.campaign-title span { display: block; }
/* The square parchment and its action are centered independently of the figures. */
.campaign-header--entrance {
    --panel-size: min(520px, calc(100vw - 32px), calc(100dvh - 140px));
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 0;
}
.campaign-header--entrance .campaign-inner { width: 100%; display: grid; place-items: center; }
.campaign-header--entrance .campaign-message { width: var(--panel-size); container-type: inline-size; display: flex; flex-direction: column; align-items: center; }
.entrance-button { margin-top: 10px; padding: 18px 31px; font-size: 1.3rem; gap: 16px; max-width: calc(100vw - 24px); flex-shrink: 0; box-shadow: 0 5px 18px #30271f20; }
.campaign-characters {
    position: fixed;
    right: 0;
    bottom: 0;
    width: clamp(15rem, 40vw, 38rem);
    height: auto;
    pointer-events: none;
    /* Opaque artwork ends at row 967 of 976: move the soft lower edge below the viewport. */
    transform: translate(5%, 1.25%);
}
.entrance-page > #content { margin: 0; width: 100%; }
/* The navigation paints over the shield, while the parchment keeps its square proportions. */
.campaign-header--compact {
    --panel-size: min(420px, calc(100vw - 32px));
    height: calc(var(--panel-size) * .77 + 16px);
    overflow: visible;
}
.campaign-header--compact .campaign-inner { display: flex; justify-content: center; margin: 0 auto; padding-top: 16px; }
.campaign-header--compact .campaign-message { width: var(--panel-size); container-type: inline-size; }
.campaign-header--compact + #container { z-index: 2; }
@media (min-width: 768px) {
    .campaign-header--entrance .campaign-message {
        /* Raise by 20% of the group height, but keep at least 24px above the crown. */
        transform: translateY(max(-20%, min(0px, calc(24px - (100dvh - 100%) / 2))));
    }
}
/* Tall tablet/desktop windows have space below the centered message for larger figures. */
/* @media (min-width: 768px) and (max-aspect-ratio: 1/1) {
    .campaign-characters { width: min(630px, 57vw, calc((100dvh - var(--panel-size) - 100px) * .62)); }
} */
@media (max-width: 767px) {
    .campaign-header--entrance {
        --panel-size: min(468px, calc(100vw - 24px), max(220px, calc((100dvh - 116px) * .46)));
        --action-reserve: 77.2px;
        padding: 0;
        display: block;
    }
    .campaign-header--entrance .campaign-inner {
        min-height: 100vh;
        min-height: 100dvh;
        display: grid;
        grid-template-rows: minmax(auto, 1fr) auto;
        justify-items: center;
        gap: 0;
    }
    .campaign-header--entrance .campaign-message { align-self: center; margin: 16px 0; }
    .campaign-characters {
        position: relative;
        width: min(420px, 100vw, calc(clamp(180px, calc(100dvh - var(--panel-size) - var(--action-reserve) - 32px), 512px) * .81967));
        margin-top: 0;
        transform: translateY(1.25%);
        flex-shrink: 0;
    }
    .entrance-button { width: min(360px, calc(100vw - 24px)); padding-inline: 16px; }
    .campaign-header--compact .campaign-inner { width: calc(100% - 20px); }
    .campaign-header--entrance .campaign-landscape img { object-position: center top; }
}

/* Narrow actions wrap onto two lines; reserve that real height before sizing the figures. */
@media (max-width: 383px) {
    .campaign-header--entrance { --action-reserve: 106.3px; }
}