/* Buttons (.pill, .btn): red at rest. On hover or keyboard focus the outline draws itself, then the button fills
   from left to right (same idea as the logo). On dark sections the hover colour is light instead of ink.
   draw-buttons.js adds the .drawn class and the outline SVG to every button. */
.drawn{position:relative;isolation:isolate;--hov:#0d0d0d;--hov-ink:#fff;
  background:#e12626 !important;border-color:#e12626 !important;color:#fff !important;transition:color 0s linear .2s}
.contact .drawn,.work .drawn,.summary .drawn{--hov:#ededea;--hov-ink:#0b0b0b}
.drawn::before{content:"";position:absolute;inset:-1.5px;border-radius:999px;background:var(--hov);z-index:-1;opacity:0;
  clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .2s cubic-bezier(.6,0,.2,1),opacity 0s linear .2s}
.drawn .btn-line{position:absolute;inset:-1.5px;width:calc(100% + 3px);height:calc(100% + 3px);overflow:visible;pointer-events:none}
.drawn .btn-line rect{fill:none;stroke:var(--hov);stroke-width:1.5;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset .2s cubic-bezier(.55,0,.25,1),opacity 0s linear .2s}
.drawn:not(:disabled):hover,.drawn:focus-visible{color:var(--hov-ink) !important;transition:color 0s linear .28s}
.drawn:not(:disabled):hover::before,.drawn:focus-visible::before{opacity:1;clip-path:inset(0 0 0 0 round 999px);
  transition:clip-path .22s cubic-bezier(.6,0,.2,1) .18s,opacity 0s linear .18s}
.drawn:not(:disabled):hover .btn-line rect,.drawn:focus-visible .btn-line rect{stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset .25s cubic-bezier(.55,0,.25,1),opacity 0s}
@media (prefers-reduced-motion:reduce){.drawn,.drawn::before,.drawn .btn-line rect{transition:none !important}}