/* <mk-footer>: the foot of every page. The site's links, the other apps, the
   © line, and under them the wordmark (mksvrcek.com) as wide as the page.
   As the wordmark comes into view its letters rise in one after the other,
   and as the reader scrolls on to the bottom they fill in, left to right, with
   the site's colour (footer.js sets --p, 0 → 1, and `is-in`). Without the script,
   or with reduced motion, the wordmark simply sits there, filled. */

.mk-footer, .mk-footer *{box-sizing:border-box}
.mk-footer{
  --_line:var(--mk-footer-line, rgba(0,0,0,.09));
  --_ink:var(--mk-footer-ink, var(--mk-accent, #2f5fe0));
  --_ghost:var(--mk-footer-ghost, rgba(0,0,0,.16));
  position:relative; z-index:var(--mk-footer-z, 1);
  overflow:hidden;
  background:var(--mk-footer-bg, #fff);
  color:var(--mk-footer-fg, #6e6e73);
  font-family:var(--mk-font, inherit);
  font-size:12px; line-height:1.6;
}
.mk-footer-inner{
  position:relative; z-index:1;
  max-width:var(--mk-maxw, 1120px); margin:0 auto;
  padding:34px var(--mk-pad, max(22px, env(safe-area-inset-left))) 0;
  border-top:1px solid var(--_line);
  display:grid; gap:14px;
}
.mk-footer-inner p{margin:0}

.mk-footer-site{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px}
.mk-footer .mk-footer-inner a{color:inherit; text-decoration:none}
.mk-footer .mk-footer-inner a:hover{text-decoration:underline; text-underline-offset:3px}
.mk-footer .mk-footer-inner .mk-footer-brand{color:var(--mk-footer-strong, #1d1d1f); font-weight:700; font-size:13px}
.mk-footer .mk-footer-inner .mk-footer-brand:hover{text-decoration:none}
.mk-footer-links, .mk-footer-family{display:flex; flex-wrap:wrap; gap:6px 20px}
.mk-footer-family span{color:var(--mk-footer-muted, #a1a1a8)}
.mk-footer-legal{color:var(--mk-footer-muted, #a1a1a8)}

/* The wordmark: one line as wide as the footer (footer.js fits it to the
   width; 15vw is near enough without it), sitting on the bottom edge, its
   feet cut off a little by it. */
.mk-footer-mark{
  position:relative; z-index:0;
  margin:clamp(18px, 3.5vw, 44px) 0 -.12em;
  padding:0 var(--mk-pad, max(22px, env(safe-area-inset-left)));
  text-align:center; white-space:nowrap;
  font-family:var(--mk-footer-mark-font, var(--mk-font, inherit));
  font-weight:900; font-size:15vw; line-height:1; letter-spacing:-.055em;
  -webkit-user-select:none; user-select:none; pointer-events:none;
}
.mk-footer-word{display:inline-block}
.mk-footer-word span{display:inline-block; color:var(--_ink)}

/* Animated: each letter (--i of --n) rises when the footer comes in, and fills
   once the scroll (--p) reaches it, a few letters blending at a time. */
.mk-footer.is-live .mk-footer-word span{
  --f:clamp(0, calc((var(--p, 0) * (var(--n) + 3) - var(--i)) / 3), 1);
  color:color-mix(in srgb, var(--_ink) calc(var(--f) * 100%), transparent);
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--_ink) calc(var(--f) * 100%), var(--_ghost));
  transform:translate3d(0, 108%, 0) rotate(6deg);
  transform-origin:0 100%;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i) * 42ms);
}
.mk-footer.is-live.is-in .mk-footer-word span{transform:none}

@media (prefers-reduced-motion:reduce){
  .mk-footer.is-live .mk-footer-word span{transform:none; transition:none}
}