/* Card stack */
.stack{position:relative}
/* Each slide sticks to the top; the next one slides over it. The sticky wrapper is painted in
   the card colour so no section colour shows around a card while it tilts away. */
.stack__slide{position:sticky;top:0;height:100svh}
.stack__sticky{height:100%;perspective:1400px;overflow:hidden}
.stack__sticky:has(.card--white){background:var(--white)}
.stack__sticky:has(.card--yellow){background:var(--yellow)}
.stack__sticky:has(.card--blue){background:var(--blue)}
.card{height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,5rem);padding:clamp(5rem,9vh,7rem) var(--gutter) clamp(2rem,5vh,3rem);transform-origin:50% 0;will-change:transform;color:var(--blue)}
.card--blue{background:var(--blue);color:var(--white)}
.card--yellow{color:var(--on-yellow)}
.card--yellow .card__text{color:var(--on-yellow)}
.card--blue .slot{--slot-ink:var(--white)}
.card--yellow{background:var(--yellow)}
.card--white{background:var(--white)}
.card__title{font-size:var(--fs-card-title);line-height:.95;letter-spacing:0;text-wrap:balance;margin-bottom:clamp(1rem,3vh,2rem)}
.card__text{font-size:clamp(1.1rem,1.6vw,1.6rem);max-width:28ch;line-height:1.2;color:var(--muted)}
.card__art{height:auto;aspect-ratio:5/4;max-height:min(70svh,44rem);width:100%;border-radius:var(--radius-lg);overflow:hidden;position:relative;transform-origin:50% 50%}
@media (max-width:900px){
  .card{grid-template-columns:1fr;align-content:center;gap:1rem;padding-top:5.5rem;padding-bottom:6rem}
  .card__art{height:auto;max-height:34svh}
  }
.js-no-motion .stack__slide,.js-no-motion .stack__sticky{height:auto;position:relative}
.js-no-motion .card{min-height:100svh}