/* Site footer: "a hand of cards", on the page background (matches the header). Loaded after main.css. */
footer.site-footer{display:block;margin-top:110px;padding:0 24px 28px;border:0;color:var(--muted);font-size:15px;background:var(--bg)}
footer.site-footer .footer-main{
  max-width:1320px;margin:0 auto;padding:0;background:none;border:0;border-radius:0;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
footer.site-footer .footer-logo{flex:none;display:block;width:260px;border-radius:16px}
footer.site-footer .footer-logo:focus-visible{outline:2px solid var(--c3);outline-offset:4px}
footer.site-footer .footer-logo img{display:block;width:100%;height:auto}

/* the hand */
footer.site-footer .footer-hand{display:flex;list-style:none;margin:0;padding:24px 0 56px}
footer.site-footer .fc{margin-left:-2px;--c:var(--c1)}
footer.site-footer .fc:first-child{margin-left:0}
footer.site-footer .fc:hover{z-index:5}
footer.site-footer .fc-2{--c:var(--c2);--r:-2deg;--y:0px}
footer.site-footer .fc-1{--r:-6deg;--y:6px}
footer.site-footer .fc-3{--c:var(--c3);--r:2deg;--y:0px}
footer.site-footer .fc-4{--c:var(--c4);--r:6deg;--y:6px}
footer.site-footer .fc-5{--c:var(--c5);--r:8deg;--y:8px}
footer.site-footer .fcard{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  width:204px;height:150px;padding:14px 16px;border-radius:16px;
  background:var(--c);color:#0D0B14;text-decoration:none;border:0;
  rotate:var(--r,0deg);translate:0 var(--y,0);
  box-shadow:-3px 4px 10px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.4);
  transition:translate .3s cubic-bezier(.3,1.6,.5,1),rotate .3s ease,box-shadow .3s ease;
}
footer.site-footer .fcard:hover,
footer.site-footer .fcard:focus-visible{translate:0 -14px;rotate:0deg;color:#0D0B14;box-shadow:0 20px 28px -10px var(--c),inset 0 2px 0 rgba(255,255,255,.5)}
footer.site-footer .fcard:focus-visible{outline:3px solid #fff;outline-offset:3px}
footer.site-footer .fc-top{display:flex;justify-content:space-between;align-items:center}
footer.site-footer .fc-k{font-family:'Syne',sans-serif;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
footer.site-footer .fc-v{font-weight:800;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
footer.site-footer .fc-v.fc-mail{font-size:11px;overflow-wrap:normal;white-space:nowrap;letter-spacing:-.01em}

/* rainbow strip + credits */
footer.site-footer .footer-strip{max-width:1320px;height:5px;margin:0 auto;border-radius:5px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5));opacity:.9}
footer.site-footer .footer-credits{max-width:1320px;margin:18px auto 0;padding:0;text-align:center;font-size:14px;color:var(--muted);border:0}
footer.site-footer .footer-credits a{color:var(--text);font-weight:700;text-decoration:none;border:0}
footer.site-footer .footer-credits a:hover,
footer.site-footer .footer-credits a:focus-visible{color:var(--c3)}
footer.site-footer .footer-credits a:focus-visible{outline:2px solid var(--c3);outline-offset:3px;border-radius:2px}

@media (max-width:1100px){
  footer.site-footer{margin-top:80px;padding:0 16px 24px}
  footer.site-footer .footer-main{flex-direction:column}
  footer.site-footer .footer-logo{width:240px}
  footer.site-footer .footer-hand{flex-wrap:wrap;justify-content:center;gap:14px;padding:12px 0 40px}
  footer.site-footer .fc,footer.site-footer .fc:first-child{margin-left:0}
}
@media (max-width:520px){
  footer.site-footer .fcard{width:min(300px,86vw);height:110px}
}
@media (prefers-reduced-motion:reduce){footer.site-footer .fcard{transition:none}}

/* "Developed by" link: cycles through the five brand colours on hover / focus */
footer.site-footer .footer-credits a:hover,
footer.site-footer .footer-credits a:focus-visible{animation:credit-cycle 2.5s linear infinite}
@keyframes credit-cycle{
  0%,100%{color:var(--c1)}
  20%{color:var(--c2)}
  40%{color:var(--c3)}
  60%{color:var(--c4)}
  80%{color:var(--c5)}
}
@media (prefers-reduced-motion:reduce){
  footer.site-footer .footer-credits a:hover,footer.site-footer .footer-credits a:focus-visible{animation:none;color:var(--c3)}
}