/* Homepage only. The WhatsApp to Xero film is the first section after the hero. It sits beside the heading and copy on
   wide screens, and straight after the heading on narrow ones, so one scroll past the hero reaches it. */
.feature-film {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "head film" "text film";
  column-gap: clamp(40px, 6vw, 96px); align-items: start;
}
.feature-film-head { grid-area: head; }
.feature-film .demo-film { grid-area: film; margin-top: 0; }
.feature-film .film-landscape { width: 100%; }
.feature-film-text { grid-area: text; margin-top: 24px; }
.feature-film-text p + p { margin-top: 14px; }

@media (max-width: 959px) {
  .feature-film { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "film" "text"; }
  .feature-film .demo-film { margin-top: 28px; }
  .feature-film-text { margin-top: 32px; }
}

/* Project details in Work we've already built. An open summary keeps its track drawn, with the ball at the end. Where
   the browser can animate a disclosure's height, the details slide open and closed and their lines settle in turn;
   elsewhere they open at once. */
.built-more[open] > summary .ball { opacity: 1; left: calc(100% - 4px); }
.built-more { interpolate-size: allow-keywords; }
.built-more::details-content { block-size: 0; overflow-y: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
.built-more[open]::details-content { block-size: auto; }
.built-more[open] .covers > li { animation: covers-in .5s var(--ease) both; }
.built-more[open] .covers > li:nth-child(2) { animation-delay: .07s; }
.built-more[open] .covers > li:nth-child(3) { animation-delay: .14s; }
.built-more[open] .covers > li:nth-child(4) { animation-delay: .21s; }
.built-more[open] .covers > li:nth-child(5) { animation-delay: .28s; }
@keyframes covers-in { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .built-more::details-content { transition: none; }
  .built-more[open] .covers > li { animation: none; }
  .built-more > summary .ball { transition: none; }
}