/* Jessica in black. Loaded after index.css; scope portrait overrides to #hero[data-portrait="p3"]. */
#hero[data-portrait="p3"] {
    --hero-accent: #6c84b9;
    /* RGB channels keep the shared typography's opacity independent of its colour. */
    --hero-quote-rgb: 255, 255, 255;
    --hero-featured-quote-rgb: 255, 255, 255;
    --hero-background: url('/images/main/p3-bkgnd.jpg?v=20260929-webp1');
    --hero-background-color: #000;
    --hero-signature-color: rgba(255, 255, 255, .6);
    --hero-claim-color: rgba(255, 255, 255, .3);

    --portrait-height: 100lvh;
    --quote-split: 35%; /* Left column's share of the frame; right uses the remainder. */
    --p3-portrait-bottom: 50px;
    --p3-ground-fraction: .99; /* Background anchor measured from its top; increase to raise the ground. */
    --p3-background-size: max(var(--hero-layout-width, 100vw), var(--hero-layout-height, calc(100lvh + var(--hero-bleed))));
}

#hero[data-portrait="p3"] .background {
    /* Square source: preserve cover scaling while anchoring its ground to the portrait. */
    background-size: var(--p3-background-size) var(--p3-background-size);
    background-repeat: no-repeat;
    background-position: center calc(
        var(--portrait-bottom-y, calc(100lvh + var(--hero-bleed) - var(--p3-portrait-bottom)))
        - var(--p3-background-size) * var(--p3-ground-fraction)
    );
}

#hero[data-portrait="p3"] .quote-zone:not(.background-quotes),
#hero[data-portrait="p3"] .quote-zone:not(.background-quotes) .quote-run.featured {
    color: #505050;
}

#hero[data-portrait="p3"] .quote-zone.background-quotes {
    --background-quote-opacity: .12;
}

#hero[data-portrait="p3"] > .image {
    top: auto;
    bottom: var(--p3-portrait-bottom);
    left: calc((100% - var(--portrait-width)) / 2 + 140px);
}