/* ───────────── The goat (About page) ───────────── */
/* Position is driven by goat.js through --goat-x. */
.goat {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
  width: 100px;
  line-height: 0;
  visibility: hidden;
  translate: var(--goat-x, 0px) 0;                /* sideways: set by goat.js */
  transform: translateY(var(--goat-y, 0px));      /* up/down: phone rise */
}
.goat.show { visibility: visible; }
.goat img { display: block; width: 100%; height: auto; }
.goat.flip img { transform: scaleX(-1); }             /* face left */
.goat.walking img { animation: goat-trot .24s steps(1) infinite; }
@keyframes goat-trot { 0% { translate: 0 0; } 50% { translate: 0 -3px; } }
.goat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Phones: rise up in the bottom-left corner, then walk right */
.goat.touch {
  width: 80px;
  --goat-y: 110%;
  transition: transform .3s ease-in, visibility 0s .3s;
}
.goat.touch.show {
  --goat-y: 0px;
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .goat, .goat.touch, .goat.touch.show { transition: none; }
  .goat.walking img { animation: none; }
}

/* ───────────── The hidden page ───────────── */
.top-list ol { list-style: none; counter-reset: rank; margin: 0; padding: 0; }
.top-list li {
  counter-increment: rank;
  position: relative;
  padding: .75rem 0 .75rem 3.3rem;
  border-top: 1px solid var(--rule);
}
.top-list li:first-child { border-top: 0; padding-top: 0; }
.top-list li::before {
  content: counter(rank);
  position: absolute;
  left: 0;
  top: .6rem;
  width: 2.4rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
  text-align: right;
  color: var(--accent);
}
.top-list li:first-child::before { top: -.15rem; }
.top-list li p { margin: 0; }
.top-list .updated {
  margin: 1.4rem 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
}