/* The footer owns a true 150px top pad at every viewport width. */
main + footer.csf{
  --csf-top-padding:150px;
  box-sizing:border-box;
  isolation:isolate;
  margin-top:0;
  padding-top:var(--csf-top-padding);
  border:0;
  background:#faf6ef;
  box-shadow:0 -2px 0 #faf6ef;
}

/* A section-level veil covers the cropped plate edge, then dissolves slowly
   into the footer artwork. It sits above the image and below every live word. */
main + footer.csf::before{
  content:"";
  position:absolute;
  z-index:1;
  top:-2px;
  right:-2px;
  left:-2px;
  height:calc(clamp(180px,12vw,230px) + 2px);
  pointer-events:none;
  background:linear-gradient(to bottom,
    #faf6ef 0%,
    #faf6ef 8%,
    rgba(250,246,239,.99) 20%,
    rgba(250,246,239,.92) 38%,
    rgba(250,246,239,.72) 58%,
    rgba(250,246,239,.42) 76%,
    rgba(250,246,239,.16) 90%,
    rgba(250,246,239,0) 100%);
}

/* The artwork carries blank sky above the live title. Pull that internal blank
   area into the footer's clipped top edge so the title begins on the 150px line. */
@media (min-width:1101px){
  main + footer.csf .csf__stage{margin-top:calc(-352 * var(--u))}
  main + footer.csf .csf__head{left:170px!important}
  main + footer.csf .csf__script{left:calc(170px + 40 * var(--u))!important}
  main + footer.csf .csf__swash{left:calc(170px + 274 * var(--u))!important}
  main + footer.csf .csf__run--lead1,
  main + footer.csf .csf__run--lead2{left:170px!important}
}
@media (min-width:761px) and (max-width:1100px){
  main + footer.csf .csf__stage{margin-top:-190px}
  main + footer.csf .csf__photo-copy{margin-inline:32px}
}
@media (max-width:760px){
  main + footer.csf .csf__stage{margin-top:-170px}
  main + footer.csf .csf__photo-copy{margin-inline:0}
}