/* =================================================================== CLOSING section css =================================================================== */
.closing {
    /* .band-stair pulls the section up 120px so its cream corners climb into
       the team band above; the top padding buys that 120px back. */
    padding-block: calc(var(--sectionGap) + var(--stair2)) var(--sectionGap);
    background: var(--cream);
    overflow: clip;

    /* measured x1324->1920, y12210->13038, two-step 105px notch. The width
       and offset overshoot by two steps so the panel's own right-hand
       notches fall outside the viewport, as they do on the artboard. */
    /* Width-driven. `height: 100%` + `aspect-ratio` reads the HEIGHT first, so
       the 640px height this used to take one breakpoint down resolved to a
       629px width — wider than its own 428px grid column, which painted the
       panel straight over the middle column's copy and citation. Sizing from
       the column width instead means it can never outgrow its cell. */
    & .closing__media {
        --notch: var(--notch-md);
        width: 100%;
        height: auto;
        /* aspect-ratio: 512 / 521; */
        /* background: var(--black); */
    }
    & .closing__col--media{
        position: relative;
        height: 100%;
    }
    & .closing__avatar {
        width: 96px;
        height: 96px;
        color: var(--tint-dark);
    }

    & .container {
        position: relative;
        z-index: 1;
    }

    /* measured 80px on the new artboard (the old one set it at 100), three
       lines, with the opening mark hanging in a 60px column at x125 */
    & .closing__quote {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
    }

    & .closing__mark {
        font-family: var(--font-display);
        font-size: var(--f80);
        font-weight: var(--fw-display);
        line-height: 1;
        color: var(--primary);
    }

    & .closing__q {
        font-family: var(--font-display);
        font-size: var(--f80);
        font-weight: var(--fw-display);
        letter-spacing: var(--track-display);
        line-height: var(--lhTight);
        color: var(--heading);

        & .closing__mark--close {
            font-size: var(--f60);
            color: var(--primary);
        }
    }

    /* measured, 100->1820 measure:
         left column  177 ->  578   (401)
         gutter                     (140)
         right column 718 -> 1121   (403) */
    & .closing__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp100);
        max-width: 100%;
        margin-top: var(--sp100);
        align-items: center;
        & .closing__col_inner{
            grid-column-end: span 2;
            & .closing__content{
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--sp100);
                max-width: 100%;
                display: grid;
            }
        }
    }

    & .closing__col p + p { margin-top: var(--sp30); }

    & .closing__cite {
        display: flex;
        flex-direction: column;
        gap: var(--sp10);
        margin-top: var(--sp60);
    }

    & .closing__author {
        font-size: var(--f40);
        color: var(--primary);
        font-weight: var(--fw-label);
    }

    & .closing__org { font-size: var(--f20); }
}

/* =================================================================== responsive =================================================================== */
/* Three columns of body copy need roughly 380px each to stay readable. Below
   1200 they are under 300, so the row folds to two — portrait beside the first
   run of copy — before collapsing entirely at tablet. */
@media (max-width: 1199.98px) {
    .closing {
        & .closing__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--sp60) var(--sp80);
        }
        & .closing__col--media{
            width: 500px;
        }
        & .closing__media{
            width: 100%;
            position: unset;
            
            /* .ascii-scramble__svg {
                height: 100%;
            } */

        }
    }
}

@media (max-width: 991.98px) {
    .closing {
        /* the whole column, not just the panel — hiding the panel alone left an
           empty grid cell and its gap above the copy */
        & .closing__col--media { max-width: 400px; }

        & .closing__quote {
            grid-template-columns: 1fr;
            margin-left: 0;
        }

        & .closing__mark { display: none; }

        & .closing__grid {
            grid-template-columns: 1fr;            
            margin-left: 0;

            & .closing__col_inner{
                grid-column-end: span 1;
                & .closing__content{
                    grid-template-columns: 1fr;
                    gap: var(--sp30);
                    max-width: 100%;
                    display: grid;
                    & .closing__cite{
                        margin-top: 0;
                    }
                }
            }
        }

        & .closing__cite { margin-left: 0; }
    }
}

@media (max-width: 575.98px) {
    .closing {
        /* the artboard's break falls mid-sentence at this measure */
        & .closing__title br { display: none; }
    }
}