/* The landing's two additions (2026-10-20). Everything else on the page is site.css, unchanged.
   1. The way to the athletes page, inside the pitch, so it rises with the words and keeps the page's one motion.
   2. The footer links to Privacy and Support, next to the copyright line. */
.pitch .go {
  margin: 1.25rem auto 0;
}
.pitch .go a {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid rgba(228, 228, 231, 0.32);
  color: var(--silver);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.pitch .go a:hover {
  border-color: var(--rim);
  color: #ffffff;
}
.pitch .go a:focus-visible {
  outline: 2px solid var(--rim);
  outline-offset: 3px;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  align-items: center;
  justify-content: center;
}
.foot a {
  display: inline-block;
  padding: 6px 2px;
  color: var(--steel);
  text-decoration: none;
}
.foot a:hover {
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: var(--rim);
  text-underline-offset: 4px;
}
.foot a:focus-visible {
  outline: 2px solid var(--rim);
  outline-offset: 2px;
}

/* Where the footer joins the flow (site.css: short or narrow screens) it can land on the drawn play, so its words get
   their own soft black, the way the pitch does. */
@media (max-height: 700px), (max-width: 480px) {
  .foot::before {
    content: "";
    position: absolute;
    top: -12px;
    bottom: 14px;
    left: 50%;
    z-index: -1;
    width: min(380px, 100%);
    transform: translateX(-50%);
    background: radial-gradient(
      ellipse 50% 50% at 50% 50%,
      #000 60%,
      rgba(0, 0, 0, 0.85) 75%,
      transparent 100%
    );
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch .go a {
    transition: none;
  }
}