/* =================================================================== INTRO section css =================================================================== */
.intro {
    padding-block: var(--sectionGap);
    background: var(--cream);

    /* Website.pdf measurement, 100->1820 measure:
         left column   100 -> 1022   (922)
         gutter                      (100)
         right column 1122 -> 1721   (599)
       99px of the measure is left unused on the right, so the grid is capped
       at 94.2% instead of filling the container.

       The h2 now sits INSIDE the left column: on the new artboard the right
       column starts at y1497, level with the h2's third line, so the two
       columns have to share a row rather than sit under a full-width title. */
    & .intro__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--g100);
        max-width: 100%;
        justify-content: space-between;
        align-items: flex-end;
    }

    & .intro__hosts {
        margin-bottom: var(--sp30);
        font-size: var(--f24);
        font-weight: var(--fw-display);
    }

    /* measured 30px on a 40px leading — this copy is NOT the global .lead
       (40/50), it is a size of its own that only the intro uses */
    & .intro__lead {
        font-size: var(--f24);        
        font-weight: var(--fw-display);
    }
    & .intro__col:not(.intro__col--aside) {
        max-width: 580px;
    }
    /* measured stagger: the aside's first line sits 190px below the top of
       the h2 block (h2 box top 1300, aside ink top 1497) */
    & .intro__col--aside {    
        max-width: 600px;
        
        & p + p { margin-top: var(--sp30); }
    }

    & .intro__cta { margin-top: var(--sp70); }

    & .intro__note {
        margin-top: var(--sp20);
        font-size: var(--f18);
    }
}

/* =================================================================== responsive =================================================================== */
@media (max-width: 991.98px) {
    .intro {
        & .intro__grid {
            grid-template-columns: 1fr;
            max-width: 100%;
        }

        & .intro__col--aside { padding-top: 0; max-width: 100%;}
        & .intro__col:not(.intro__col--aside) { max-width: 100%;}
    }
}