/* The bubble nav: one small floating pill at the bottom of every page.
   Built by assets/pill.js. */
@font-face{font-family:Marker;src:url('fonts/marker.woff2') format('woff2');font-display:swap}
.pill{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:9000;display:flex;gap:2px;padding:4px;border-radius:999px;
  translate:-50% 0;background:#fbfaf6f0;border:1px solid #1515151a;box-shadow:0 10px 30px -18px #0007;white-space:nowrap;
  transition:translate .55s cubic-bezier(.3,1.4,.5,1),opacity .3s}
/* tucked below the edge: before it arrives, and over the homepage's first
   screen, where the social links sit along the bottom */
.pill.is-away{translate:-50% 160%;opacity:0;pointer-events:none}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pill{background:#fbfaf694;-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
  html.lite .pill{background:#fbfaf6f0;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.pill a,.pill-work{position:relative;z-index:1;padding:6px 13px 3px;border-radius:999px;text-decoration:none;font:19px/1 Marker,'Comic Sans MS',cursive;color:#151515a6;transition:color .25s}
.pill a:hover,.pill-work:hover{color:#151515}
.pill-work{display:inline-flex;align-items:center;gap:4px;background:none;border:0;cursor:pointer}
.pill-work svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.pill-work[aria-expanded=false] svg{transform:rotate(180deg)}
.pill-work[data-current]{color:#fff}
.pill a[aria-current]{color:#fff}
.pill a:focus-visible,.pill-work:focus-visible{outline:2px dashed #ff1f8f;outline-offset:2px}
.pill-blob{position:absolute;z-index:0;left:0;top:4px;height:calc(100% - 8px);width:40px;border-radius:999px;background:#1f45ff;opacity:0;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),width .5s cubic-bezier(.3,1.4,.5,1),opacity .3s}
@media (max-width:420px){.pill a,.pill-work{padding:6px 10px 3px;font-size:17px}}
@media (prefers-reduced-motion:reduce){.pill,.pill-blob{transition:none}}

/* the project menu that opens from "work" */
.pill-menu{position:fixed;z-index:9001;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));width:min(380px,calc(100vw - 24px));max-height:min(64vh,560px);overflow:auto;
  padding:14px 10px 10px;border-radius:24px;background:#fbfaf6f5;border:1px solid #1515151a;box-shadow:0 30px 60px -24px #0008,0 4px 14px -8px #0004;
  translate:-50% 14px;scale:.96;opacity:0;transform-origin:50% 100%;transition:translate .38s cubic-bezier(.3,1.4,.5,1),scale .38s cubic-bezier(.3,1.4,.5,1),opacity .2s;
  color:#151515;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:contain}
.pill-menu.is-open{translate:-50% 0;scale:1;opacity:1}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pill-menu{background:#fbfaf6d9;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
  html.lite .pill-menu{background:#fbfaf6fa;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.pm-label{margin:0 10px 8px;font:19px/1 Marker,'Comic Sans MS',cursive;color:#1f45ff}
.pill-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pill-menu li a{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px;padding:7px 10px 7px 7px;border-radius:16px;color:inherit;text-decoration:none;transition:background .2s}
.pill-menu li a:hover,.pill-menu li a:focus-visible{background:#1f45ff12}
.pill-menu li a[aria-current]{background:#1f45ff1a}
.pill-menu li a[aria-current] b:after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:#1f45ff;vertical-align:2px}
.pill-menu img{width:56px;height:42px;border-radius:9px;object-fit:cover;background:#e8e5dc;display:block}
.pill-menu b{display:block;font-size:15px}
.pill-menu small{display:block;margin-top:2px;font-size:12px;color:#15151599}
.pm-all{display:block;margin:8px 4px 2px;padding:11px 12px 10px;border-radius:14px;background:#151515;color:#fbfaf6;text-align:center;text-decoration:none;font:11px 'Alex Mono',Mono,ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.pm-all:hover{background:#1f45ff}
@media (prefers-reduced-motion:reduce){.pill-menu{transition:none}}