/* Portrait colors are independent of seasonal text and banner accents. */
.portrait-palette {
    --portrait-intensity: var(--portrait-light-intensity, .65);
    /* Blue-gray defaults (#DCE8EF / #253543), retaining the admin hue controls. */
    --portrait-auto: hsl(calc(var(--portrait-hue, 210) - 8), clamp(0%, calc(var(--portrait-saturation, 36%) + 1%), 100%), 90%);
    --portrait-primary: var(--portrait-custom-primary, var(--portrait-auto));
    --portrait-secondary: var(--portrait-custom-secondary, var(--portrait-auto));
    --portrait-shadow: var(--portrait-custom-shadow, hsl(var(--portrait-hue, 210), var(--portrait-saturation, 36%), 28%, .16));
}

html[data-color-mode="dark"] .portrait-palette,
.portrait-palette[data-portrait-mode="dark"] {
    --portrait-intensity: var(--portrait-dark-intensity, .45);
    --portrait-auto: hsl(calc(var(--portrait-hue, 210) - 2), clamp(0%, calc(var(--portrait-saturation, 36%) - 7%), 100%), 20.4%);
}

.portrait-palette[data-portrait-mode="light"] {
    --portrait-intensity: var(--portrait-light-intensity, .65);
    --portrait-auto: hsl(calc(var(--portrait-hue, 210) - 8), clamp(0%, calc(var(--portrait-saturation, 36%) + 1%), 100%), 90%);
}

.portrait-palette .hero::before {
    background: radial-gradient(circle, var(--portrait-secondary), transparent 70%);
    opacity: calc(var(--portrait-intensity) * .18);
}

.portrait-palette .hero-shape {
    opacity: var(--portrait-intensity);
}

.portrait-palette .hero-shape--primary {
    background: linear-gradient(145deg, var(--portrait-custom-stops, var(--portrait-primary), var(--portrait-secondary)));
    box-shadow: 0 28px 80px var(--portrait-shadow);
}

.portrait-palette .hero-shape--secondary {
    background: linear-gradient(140deg, var(--portrait-custom-reverse, var(--portrait-secondary), var(--portrait-primary)));
    box-shadow: 0 24px 66px var(--portrait-shadow);
}

.portrait-palette .hero-shape--dot-one {
    background: var(--portrait-secondary);
}

.portrait-palette .hero-shape--dot-two {
    background: var(--portrait-primary);
}

.portrait-palette .about__portrait::before {
    background: linear-gradient(145deg, var(--portrait-custom-stops, var(--portrait-primary), var(--portrait-secondary)));
    opacity: calc(var(--portrait-intensity) * .45);
}