/* ==========================================================================
   Enga — the meadow footer-meadow.js paints under the front page's footer

   The footer gets taller so there is room for the meadow, with its links
   in the middle of it, as much meadow above them as below, and becomes its
   own stacking context so the canvas can sit behind the links (z-index -1)
   without dropping behind the page. The meadow fills the whole footer,
   behind the links too, and fades in slowly from the page over its first
   200px, so it grows out of the page rather than starting on a line,
   starting just under the last pictures in the gallery above: the
   gallery's own long bottom margin is cut short while the meadow is
   there. On the grass the footer's
   usual light grey would hardly read, so the links take the page's main
   text colour instead, dark by day and light by night.

   Every rule depends on .has-meadow, which the script adds, so nothing
   changes where it doesn't run.
   ========================================================================== */

.site-footer.has-meadow {
  position: relative;
  isolation: isolate;
  padding-top: 288px;
  padding-bottom: 288px;
  color: var(--token-43464fc0-8f12-4214-bfdd-fa0c6aa29267, #141415);
}

/* the links stay on top of the meadow and its plane, and clickable */
.site-footer.has-meadow a,
.site-footer.has-meadow span {
  position: relative;
  z-index: 1;
}

.meadow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.28) 80px, #000 200px);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.28) 80px, #000 200px);
}

@media (max-width: 809.98px) {
  .site-footer.has-meadow {
    padding-top: 200px;
    padding-bottom: 200px;
  }
}

body:has(.site-footer.has-meadow) .gallery {
  padding-bottom: 24px;
}

/* The same on the case studies: the meadow starts just under the last
   chapter instead of after the pitch section's long bottom margin and the
   last chapter's own. */
body:has(.site-footer.has-meadow) .pitch {
  padding-bottom: 24px;
}

body:has(.site-footer.has-meadow) .pitch-block:last-child {
  padding-bottom: 0;
}