/* "Wobbly Resume" nav button: a playful pill that matches the game. */
.site-header nav a.nav-wobbly{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.28rem .8rem .3rem .55rem;margin:-.1rem 0;
  background:#FFF4E0;border:2px solid #1F2E38;border-radius:999px;
  box-shadow:0 3px 0 #1F2E38;
  font-family:ui-rounded,"SF Pro Rounded","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  font-weight:800;font-size:.95rem;line-height:1.2;letter-spacing:.01em;
  color:#1F2E38;text-decoration:none;
  transform:rotate(-2deg);transform-origin:50% 60%;
  transition:transform .18s ease, box-shadow .18s ease;
}
.site-header nav a.nav-wobbly .ww1{color:#C2452E;display:inline-block;transform:rotate(-3deg)}
.site-header nav a.nav-wobbly .ww2{color:#0B7A75;display:inline-block;transform:rotate(2deg) translateY(1px)}
.site-header nav a.nav-wobbly .wwdot{
  width:1.25em;height:1.25em;flex:none;margin:-.1em 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='21' r='16' fill='%23F2C29B' stroke='%231F2E38' stroke-width='3'/%3E%3Ccircle cx='15' cy='19' r='2.4' fill='%231F2E38'/%3E%3Ccircle cx='25' cy='19' r='2.4' fill='%231F2E38'/%3E%3Ccircle cx='11.5' cy='25' r='2.6' fill='%23FF9C8A'/%3E%3Ccircle cx='28.5' cy='25' r='2.6' fill='%23FF9C8A'/%3E%3Cpath d='M15 26.5q5 4.5 10 0' fill='none' stroke='%231F2E38' stroke-width='2.4' stroke-linecap='round'/%3E%3Cellipse cx='15' cy='11' rx='3.5' ry='1.6' fill='%23fff' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* keep the site's underline style off this one */
.site-header nav a.nav-wobbly:hover,.site-header nav a.nav-wobbly[aria-current="page"]{
  color:#1F2E38;box-shadow:0 5px 0 #1F2E38;transform:rotate(-2deg) translateY(-2px);
}
.site-header nav a.nav-wobbly:hover{animation:nav-wobble .55s ease-in-out}
.site-header nav a.nav-wobbly:active{box-shadow:0 1px 0 #1F2E38;transform:rotate(-2deg) translateY(2px)}
.site-header nav a.nav-wobbly:focus-visible{outline:3px solid #FFC83A;outline-offset:3px}
/* one friendly wiggle shortly after the page loads, to catch the eye */
.site-header nav a.nav-wobbly{animation:nav-wobble .7s ease-in-out 1.4s 1 both}
@keyframes nav-wobble{
  0%,100%{transform:rotate(-2deg)}
  20%{transform:rotate(4deg) scale(1.04)}
  40%{transform:rotate(-6deg) scale(1.04)}
  60%{transform:rotate(3deg)}
  80%{transform:rotate(-4deg)}
}
/* on the dark theme, a sunny shadow keeps the pill popping */
@media (prefers-color-scheme: dark){
  .site-header nav a.nav-wobbly{box-shadow:0 3px 0 #FFC83A}
  .site-header nav a.nav-wobbly:hover,.site-header nav a.nav-wobbly[aria-current="page"]{box-shadow:0 5px 0 #FFC83A}
  .site-header nav a.nav-wobbly:active{box-shadow:0 1px 0 #FFC83A}
}
@media (prefers-reduced-motion: reduce){
  .site-header nav a.nav-wobbly,.site-header nav a.nav-wobbly:hover{animation:none;transition:none}
}
@media print{
  .site-header nav a.nav-wobbly{box-shadow:none;transform:none;background:none;border:0}
}