/* The signature footer: Kodi Alex in a big copperplate script on blue.
   Shared by the homepage (flush under the blue contact section) and the
   contact card (a slab with rounded corners). */
@font-face{font-family:'Alex Script';src:url('fonts/pinyon-name.woff2') format('woff2');font-display:swap}
.sig-foot{--sf-blue:#2b4fd8;--sf-ink:#0c0e14;--sf-paper:#f3eee4;position:relative;overflow:hidden;background:var(--sf-blue);color:var(--sf-paper);view-timeline:--sig-foot;
  padding:clamp(34px,6vw,70px) clamp(20px,5vw,72px) 0;font-family:Arial,Helvetica,sans-serif}
.sig-foot--slab{border-radius:30px 30px 0 0;background-image:url('paper-grain.svg')}
.sig-foot a{color:inherit;text-decoration:none}
.sig-head{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:30px}
.sig-kicker{margin:0;font-size:13px;letter-spacing:.01em}
.sig-mail{display:inline-block;margin-top:6px;font-size:clamp(23px,4.3vw,48px);letter-spacing:-.035em;overflow-wrap:anywhere;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.sig-mail:hover,.sig-mail:focus-visible{background-size:100% 2px}
.sig-cols{display:grid;grid-template-columns:repeat(2,max-content);gap:4px clamp(26px,4vw,64px);margin:0;font-size:14px}
.sig-cols p{margin:0 0 6px;font:9px 'Alex Mono',Mono,ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.sig-cols a{display:block;padding:3px 0;width:max-content;background:linear-gradient(currentColor,currentColor) 0 92%/0 1.5px no-repeat;transition:background-size .35s}
.sig-cols a:hover,.sig-cols a:focus-visible{background-size:100% 1.5px}
/* back to top: a stamp that keeps turning */
.sig-up{position:absolute;z-index:3;right:clamp(16px,5vw,72px);top:clamp(26px,5vw,62px);width:clamp(74px,8vw,104px);aspect-ratio:1;display:grid;place-items:center}
.sig-up svg{position:absolute;inset:0;width:100%;height:100%;animation:sig-spin 14s linear infinite;overflow:visible}
.sig-up text{font:700 9.6px 'Alex Mono',Mono,ui-monospace,monospace;letter-spacing:.2em;fill:var(--sf-paper)}
.sig-up b{font-size:22px;font-weight:400;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.sig-up:hover b,.sig-up:focus-visible b{transform:translateY(-5px)}
.sig-up:hover svg{animation-duration:4s}
@keyframes sig-spin{to{transform:rotate(360deg)}}
/* the name, sized to fit the width with a little air either side */
.sig-sign{position:relative;margin-top:clamp(40px,7vw,90px)}
.sig-name{display:block;margin:0;text-align:center;white-space:nowrap;font:400 clamp(70px,22vw,400px)/.84 'Alex Script','Snell Roundhand','Segoe Script',cursive;color:#fff;pointer-events:none;-webkit-user-select:none;user-select:none}
.sig-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(4px,1vw,12px);padding:16px 0 calc(84px + env(safe-area-inset-bottom));border-top:1px solid #f3eee44d;
  font:10px/1.35 'Alex Mono',Mono,ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
/* the language switch, at the end of the bottom row */
.sig-lang{display:inline-flex;gap:2px;padding:3px;border:1px solid #f3eee455;border-radius:999px}
.sig-lang button{background:none;border:0;border-radius:999px;padding:4px 9px 3px;color:inherit;font:inherit;letter-spacing:.14em;cursor:pointer;opacity:.75}
.sig-lang button[aria-pressed=true]{background:var(--sf-paper);color:var(--sf-blue);opacity:1}
@media (min-width:820px){
  .sig-head{grid-template-columns:1fr auto;align-items:end;padding-right:clamp(90px,10vw,140px)}
}
@media (max-width:560px){
  .sig-head{padding-right:84px}
  .sig-bar{font-size:8px}
  .sig-bar>span:nth-child(2){display:none}
}
/* scroll motion, driven by the footer's own scroll position (no script):
   the name's letters fly in from scattered spots and settle into the
   signature, the text above rises in, the stamp turns as you scroll.
   Browsers without scroll timelines simply show the finished footer. */
.sig-name span{display:inline-block}
@supports (view-timeline:--a){
  .sig-name span{animation:sig-gather linear both;animation-timeline:--sig-foot;animation-range:entry 15% entry 95%}
  @keyframes sig-gather{
    from{transform:translate(calc(var(--o) * .42em),calc(var(--y) * 1em)) rotate(calc(var(--o) * 7deg)) scale(.82);opacity:0}
    45%{opacity:1}
    to{transform:none;opacity:1}}
  .sig-head{animation:sig-rise linear both;animation-timeline:--sig-foot;animation-range:entry 0% entry 55%}
  @keyframes sig-rise{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
  .sig-bar{animation:sig-rise linear both;animation-timeline:--sig-foot;animation-range:entry 60% entry 100%}
  .sig-up svg{animation:sig-turn linear both;animation-timeline:--sig-foot;animation-range:entry 0% entry 100%}
  @keyframes sig-turn{from{transform:rotate(-200deg)}to{transform:rotate(0deg)}}
}
html.lite .sig-name span,html.lite .sig-head,html.lite .sig-bar{animation:none}
html.lite .sig-up svg{animation:none}
@media (prefers-reduced-motion:reduce){.sig-name span,.sig-head,.sig-bar,.sig-up svg{animation:none!important}}