/* ==========================================================================
   WHY "CORNERSTONE"   body.page-why-cornerstone
   ==========================================================================
   One centred ~1064px editorial column in the hero (the site's only page off
   the 1800 container): the statement, then .wc-prose with a lead paragraph
   (.wc-lead) and a bordered pull-quote (.wc-quote).
   ========================================================================== */

body.page-why-cornerstone {
    /* the hero's children centre; the cap includes their gutter padding */
    .hero--light {
        > .hero-eyebrow,
        > .hero__frame,
        > .wc-prose { max-width: calc(1064px + 2 * var(--page-gutter)); }
        .hero__frame > * { max-width: none; }   /* the column is the measure */
        > .wc-prose { margin-top: clamp(1.25rem, 2.2vw, 2.1875rem); }
    }

    .wc-prose {
        p {
            color: #333B44;
            font-family: var(--type-body);
            font-size: clamp(1.05rem, 1.25vw, 1.25rem);
            line-height: 1.6;
            margin: 0 0 1.25rem;
        }
        .wc-lead {
            font-family: var(--type-display);
            font-weight: 500;
            font-size: clamp(1.5rem, 2.4vw, 2rem);
            line-height: 1.35;
            color: var(--heading);
            margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
        }
        .wc-quote {
            margin: clamp(1.5rem, 3vw, 2.25rem) 0;
            padding-left: clamp(1.25rem, 2vw, 1.75rem);
            padding-block: clamp(0.25rem, 0.42vw, 0.625rem);   /* the bar runs 10px past the text */
            border-left: 3px solid var(--prime);
            p {
                color: var(--heading);
                font-family: var(--type-display);
                font-weight: 600;
                font-size: clamp(1.25rem, 1.8vw, 1.5rem);
                line-height: 1.4;
                margin: 0;
                max-width: 54rem;   /* the board's 865px measure */
            }
        }
    }
}