@charset "UTF-8";

/* Grid is the no-script fallback; tilted mode shares vertices and one seam layer. */
.hero-family-spread {
    --family-gap: 6px;
    display: grid;
    grid-template-columns: calc(516.083 * var(--hero-unit)) repeat(2, minmax(0, 1fr));
    grid-template-rows: 46% minmax(0, 1fr);
    gap: var(--family-gap);
    box-sizing: border-box;
    /* Bleed beneath the paper's 686u lower tip and 693u upper notch. */
    padding-left: max(0px, calc(684 * var(--hero-unit) - 30cqw));
    background: var(--hero-paper);
}
.hero-family-card { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #53654b; }
.hero-family-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-family-spread.is-tilted { display: block; }
.hero-family-spread.is-tilted .hero-family-card { position: absolute; }
.hero-family-seams {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--hero-paper);
    stroke-width: var(--family-gap);
    stroke-linecap: butt;
    pointer-events: none;
}
/* Follow the portrait's full-height aspect ratio, not the width of the canvas. */
.hero-family-lily {
    grid-column: 1;
    grid-row: 1 / 3;
}
.hero-family-lily > img {
    object-fit: contain;
    object-position: center;
}
.hero-family-xiaoxiao {
    grid-column: 2 / 4;
    grid-row: 1;
}
.hero-family-xiaoxiao > img { object-position: 20% 65%; }
.hero-family-xiangxiang {
    grid-column: 2;
    grid-row: 2;
}
.hero-family-xiangxiang > img { object-position: center 42%; }
.hero-family-leilei {
    grid-column: 3;
    grid-row: 2;
}
.hero-family-leilei > img { object-position: 54% center; }
.hero-family-card::after {
    content: "";
    position: absolute;
    inset: 65% 0 0;
    background: linear-gradient(transparent, rgba(12,30,19,.6));
    pointer-events: none;
}
.hero-family-card figcaption {
    position: absolute;
    z-index: 1;
    left: 15%;
    bottom: calc(35 * var(--hero-unit));
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    max-width: 80%;
    color: #fff;
    font: 500 max(11px, calc(14 * var(--hero-unit)))/1.6 var(--serif);
    letter-spacing: .07em;
    text-shadow: 0 1px 4px #142017;
}
.hero-family-card figcaption > span { font: 500 max(8px, calc(9 * var(--hero-unit)))/1.6 Georgia, serif; letter-spacing: .13em; }
.hero-family-lily figcaption { left: 20%; bottom: 8%; font-size: max(13px, calc(19 * var(--hero-unit))); }
.hero-family-xiaoxiao figcaption { left: 18%; bottom: 12%; }
.hero-family .hero-v3-stamp { display: none; }

/* Center the seated portrait within the existing itinerary frame. */
.itinerary-gallery .itinerary-photo-lily-latest > img { object-position: center; }

@media (max-width: 767px) {
    .hero-family .hero-photo { height: 400px; }
    .hero-family .hero-top-shape { top: 350px; }
    .hero-family .hero-top-left { padding-top: 416px; }
    .hero-family-spread {
        --family-mobile-portrait-width: min(46cqw, 168px);
        padding-left: 0;
        grid-template-columns: var(--family-mobile-portrait-width) minmax(0, 1fr);
        grid-template-rows: calc(var(--family-mobile-portrait-width) * 1024 / 767) minmax(0, 1fr);
    }
    .hero-family-lily {
        grid-column: 1;
        grid-row: 1;
    }
    .hero-family-xiaoxiao {
        grid-column: 2;
        grid-row: 1;
    }
    .hero-family-xiaoxiao > img { object-position: 12% center; }
    .hero-family-xiangxiang {
        grid-column: 1;
        grid-row: 2;
    }
    .hero-family-xiangxiang > img { object-position: center 30%; }
    .hero-family-leilei {
        grid-column: 2;
        grid-row: 2;
    }
    .hero-family-leilei > img { object-position: center 20%; }
    .hero-family-card figcaption { left: 14px; bottom: 14px; display: block; max-width: calc(100% - 28px); font-size: 12px; letter-spacing: .04em; }
    .hero-family-card figcaption > span { display: block; font-size: 8px; }
    .hero-family-lily figcaption { font-size: 14px; }
    .hero-family-xiangxiang figcaption { bottom: 27px; }
    .hero-family-leilei figcaption { left: 24px; bottom: 64px; }
    .hero-family .hero-photo-credit { top: 390px; right: 16px; left: auto; bottom: auto; color: var(--hero-green); font-size: 8px; text-shadow: none; }
}