/* Shared by the portfolio, timeline, bookshelf, and book reader. */
a.alan-signature, .masthead a.alan-signature, #reader .alan-signature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.alan-name {
  font: 500 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.alan-mark {
  display: block;
  width: 42px;
  height: 38px;
  flex: none;
  overflow: visible;
}
.alan-mark .tree-leaf {opacity: 0}
@media (prefers-reduced-motion: no-preference) {
  .alan-mark .leaf-one {animation: oak-leaf-one 16s ease-in infinite; transform-origin: 57px 30px}
  .alan-mark .leaf-two {animation: oak-leaf-two 21s ease-in 7s infinite}
}
@keyframes oak-leaf-one {
  0%, 65% {opacity: 0; transform: translate(59px,28px)}
  68% {opacity: .8}
  80% {transform: translate(66px,47px) rotate(95deg)}
  94% {opacity: .7; transform: translate(54px,69px) rotate(220deg)}
  100% {opacity: 0; transform: translate(51px,71px) rotate(240deg)}
}
@keyframes oak-leaf-two {
  0%, 65% {opacity: 0; transform: translate(20px,30px)}
  68% {opacity: .6}
  84% {transform: translate(11px,50px) rotate(-90deg)}
  98%, 100% {opacity: 0; transform: translate(24px,71px) rotate(-190deg)}
}
@media (max-width: 680px) {
  .alan-mark {width: 36px; height: 33px}
}