/* Illustrated entrances, scoped to the main page. */
.home-choice-page .site-header { justify-content: center; border-bottom: 0; min-height: 0; padding: max(12px, env(safe-area-inset-top)) 0 6px; margin-bottom: 0; }
.home-choice-page .site-header::after { content: none; }
.home-choice-page .entrance-art { height: auto; background: transparent; }
.home-choice-page .art-plate { position: relative; inset: auto; display: block; }
.home-choice-page .painting { width: 100%; height: auto; object-fit: contain; filter: none; transform: none !important; }
.home-choice-page .entrance + .entrance::before { content: none; }

.home-choice-page .entrance-content { order: -1; }
.home-choice-page .entrance-content::before { content: none; }

/* Personal welcome between the centered logo and the two entrances. */
.home-choice-page .intro { padding: 10px 0 26px; text-align: center; }
.home-choice-page .intro .intro-place { margin-bottom: 8px; }
.home-choice-page .intro-copy { max-width: 900px; margin: 0 auto; }
.home-choice-page .intro h1 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.12; letter-spacing: -1.7px; }

/* Framed entrances: an outer edge and a paper mount around each illustration. */
.home-choice-page .entrance {
    padding: 8px;
    border: 1px solid #baa27c;
    box-shadow: 0 5px 16px rgba(63, 48, 30, .13);
}
.home-choice-page .entrance::after {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: 7;
    border: 1px solid rgba(220, 195, 154, .48);
    pointer-events: none;
}
.home-choice-page .entrance-art {
    padding: 10px;
    background: var(--paper);
    box-shadow: inset 0 0 0 1px rgba(88, 65, 35, .17);
}
.home-choice-page .entrance-description-short { display: none; }

/* Phone covers: large complete scenes with a narrow, coloured caption below. */
@media (max-width: 700px) {
    .home-choice-page .page-shell {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .home-choice-page .site-header { padding: max(10px, env(safe-area-inset-top)) 0 2px; }
    .home-choice-page .wordmark-image { width: clamp(144px, 40vw, 172px); }
    .home-choice-page .intro { padding: 4px 0 16px; }
    .home-choice-page .intro .intro-place { margin-bottom: 6px; font-size: 9px; letter-spacing: 1.7px; }
    .home-choice-page .intro h1 { font-size: clamp(26px, 7vw, 30px); line-height: 1.08; letter-spacing: -.7px; }
    .home-choice-page .entrances { gap: 12px; }
    .home-choice-page .entrance,
    .home-choice-page .entrance + .entrance {
        display: flex;
        flex-direction: column;
        padding: 6px;
        background: var(--card);
        color: var(--paper);
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(63, 48, 30, .12);
    }
    .home-choice-page .entrance::after { inset: 3px; }
    .home-choice-page .entrance-art {
        display: block;
        padding: 5px;
        background: var(--paper);
        box-shadow: inset 0 0 0 1px rgba(88, 65, 35, .17);
    }
    .home-choice-page .art-plate { padding: 0; width: 100%; }
    .home-choice-page .painting { height: auto; object-fit: contain; }
    .home-choice-page .entrance-content {
        order: 0;
        padding: 10px 10px 11px;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-rows: auto;
        align-items: center;
        gap: 8px;
    }
    .home-choice-page .entrance-content h2 {
        grid-column: 1;
        grid-row: 1;
        color: var(--paper);
        font-size: clamp(25px, 7vw, 30px);
        line-height: 1.08;
        letter-spacing: -.7px;
    }
    .home-choice-page .entrance-content p {
        grid-column: 2;
        grid-row: 1;
        max-width: 72px;
        margin: 0;
        color: var(--pale);
        font-size: 11px;
        line-height: 1.3;
    }
    .home-choice-page .entrance-content p strong { white-space: nowrap; font-weight: 600; }
    .home-choice-page .entrance-content p br { display: none; }
    .home-choice-page .entrance-description-full,
    .home-choice-page .entrance-description-short { display: none; }
    .home-choice-page .entrance-collection .entrance-description-short { display: inline; }
    .home-choice-page .entrance-arrow {
        grid-column: 3;
        grid-row: 1;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 0;
        color: var(--gold);
        opacity: .85;
    }
    .home-choice-page .entrance-arrow svg { width: 25px; height: 25px; }
    .home-choice-page .entrance:is(:hover, :focus-visible) h2 { color: var(--gold); }
    .home-choice-page .site-footer {
        margin-top: 6px;
        min-height: 0;
        border-top: 0;
        gap: 12px;
        padding: 4px 0 max(6px, env(safe-area-inset-bottom));
    }
    .home-choice-page .footer-links { gap: 12px; }
}

/* Desktop cover: the illustration row uses the remaining viewport height. */
@media (min-width: 701px) {
    .home-choice-page .page-shell {
        height: 100vh;
        height: 100dvh;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    .home-choice-page .site-header {
        padding: max(8px, env(safe-area-inset-top)) 0 4px;
    }
    .home-choice-page .wordmark-image { width: clamp(164px, 25vh, 240px); }
    .home-choice-page #main {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
    }
    .home-choice-page .intro { padding: clamp(6px, 1vh, 10px) 0 clamp(14px, 3vh, 26px); }
    .home-choice-page .intro h1 { font-size: clamp(34px, 6vh, 64px); }
    .home-choice-page .entrances {
        min-height: 0;
        max-height: 100%;
        align-self: start;
        grid-template-rows: auto minmax(0, 1fr);
        row-gap: 0;
    }
    .home-choice-page .entrance {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: 0;
        min-height: 0;
    }
    .home-choice-page .entrance-content {
        padding: clamp(14px, 2.5vh, 25px) clamp(16px, 2.6vw, 30px) clamp(14px, 2.8vh, 28px);
        gap: clamp(7px, 1.3vh, 12px) 20px;
        grid-template-rows: auto 1fr;
    }
    .home-choice-page .entrance-content h2 { font-size: clamp(30px, 5vh, 49px); }
    .home-choice-page .entrance-art { min-height: 0; height: 100%; }
    .home-choice-page .art-plate { min-height: 0; height: 100%; }
    .home-choice-page .painting { height: 100%; }
    .home-choice-page .site-footer { min-height: 0; padding: 10px 0; }
}
@media (min-width: 701px) and (max-height: 450px) {
    .home-choice-page .wordmark-image { width: 128px; }
    .home-choice-page .site-header { padding: 6px 0 2px; }
    .home-choice-page .intro { padding: 4px 0 10px; }
    .home-choice-page .intro h1 { font-size: 28px; }
    .home-choice-page .entrance { padding: 6px; }
    .home-choice-page .entrance-content { padding: 10px 14px; gap: 6px 14px; }
    .home-choice-page .entrance-content h2 { font-size: 28px; }
    .home-choice-page .entrance-content p { font-size: 12px; line-height: 1.4; }
    .home-choice-page .entrance-art { padding: 6px; }
    .home-choice-page .site-footer { padding: 4px 0; }
}

/* Keep all three words of the developer credit visibly separated. */
.home-choice-page .developer {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    white-space: nowrap;
}