/* =============================================================================
   Image & media size tokens — edit dimensions here only
   ============================================================================= */

:root {
    /* Main content — default for unclassed <img> inside <main> (see site.css) */
    --content-img-width: 60%;
    --content-img-max-width: 700px;

    /* Main content — <video> inside <main> (see site.css) */
    --content-video-width: 70%;
    --content-video-max-width: 1000px;

    /* Profile pictures — home page and /dominic, /julia */
    --profile-img-width: 320px;
    --profile-img-max-width: 60%;
    --profile-img-padding: 10px;

    /* Footer — bar height, padding, and icon size derived from bar height */
    --footer-height: 2rem;
    --footer-padding-block: 0.25rem;
    --footer-padding-inline: 1rem;
    --footer-gap: 1rem;
    --footer-icon-height: calc(var(--footer-height) - (2 * var(--footer-padding-block)));

    /*
     * Diagonal split, configurable pivot on the top edge, scroll-driven via site.js
     * Colors: ColorPalette.cs → injected as --color-background-* in _Layout
     *
     * --diagonal-pivot-x: x-position of the pivot on the top edge (0–100, viewport %)
     *   100 → top-right corner (line always starts there)
     *    80 → 20% inset from the right (similar to highlightjs.org)
     *    50 → centre of the top edge
     *     0 → top-left corner (collapses to single color)
     * --diagonal-split-angle: angle from vertical, clamped 0–90
     *   0  → line vertical at pivot  → Color A fills everything left of pivot
     *   45 → 45° line from pivot
     *   90 → line horizontal at top  → Color B fills the entire viewport
     * --diagonal-scroll-aggression: how fast Color B takes over when scrolling (0.05 slow … 1 fast)
     */
    --diagonal-pivot-x: 85;
    --diagonal-split-angle: 25;
    --diagonal-base-right: 42;
    --diagonal-scroll-aggression: 0.5;
    --diagonal-line-width: 2px;
    --site-padding-inline: 1rem;
}

/* Profile pictures */
.profile-picture-image-sizes {
    width: var(--profile-img-width);
    max-width: var(--profile-img-max-width);
    height: auto;
    padding: var(--profile-img-padding);
}

/* Footer home / back — height fills available footer space */
.homebutton-image-size {
    height: var(--footer-icon-height);
    width: auto;
    max-height: 100%;
    display: block;
    padding: 0;
}