/* ============================================================
   SPLIT HEAD (How I work pages)
   Title and standfirst on the left, a live piece on the right. Case studies
   keep the editorial head with a wide screenshot under it: those pages show
   the work, these show the thinking, and the head says which one this is.
   Side by side from 960px (a landscape tablet already has the room), the
   live piece narrowing a little on the way down. Below that it stacks: text,
   then the live piece at a readable width.
   ============================================================ */
.cs-summary.is-split .cs-live{margin-top:clamp(32px,5vw,48px);max-width:520px;}

@media (min-width:960px){
  .cs-summary.is-split{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,42vw,460px);
    column-gap:clamp(40px,5vw,80px);align-items:center;
  }
  .cs-summary.is-split .cs-head-text{grid-column:1;}
  .cs-summary.is-split .cs-title{max-width:none;}
  .cs-summary.is-split .cs-lede{max-width:34em;}
  .cs-summary.is-split .cs-live{grid-column:2;margin:0;max-width:none;}
}