/* 品牌在左侧，地球只占上层画面；底部留给版权和回顶。 */
.page-footer {
  --footer-blue: #042957;
  --footer-cream: #f4e8cd;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 0;
  border: 0;
  background: var(--footer-blue);
  color: var(--footer-cream);
}
.page-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background: url("/assets/footer-stars.svg") center / 1440px 700px repeat;
}
.page-footer a:focus-visible { outline: 2px solid var(--footer-cream); outline-offset: 5px; }
.page-footer ::selection { background: var(--footer-cream); color: var(--footer-blue); }
.footer-main {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
}
.footer-identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding-block: 48px;
}
.footer-logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer-logo img { width: 200px; height: auto; }
.footer-top:hover { text-decoration: underline; }
.footer-colophon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding-block: 18px;
  /* 为右下方已有的浮动回顶按钮留出位置。 */
  padding-right: 64px;
  border-top: 1px solid #f4e8cd40;
}
.footer-colophon p { min-width: 0; }
.footer-top { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; }
.footer-top .arrow { width: 18px; height: 18px; transform: rotate(-90deg); }
.footer-top:hover .arrow { transform: rotate(-90deg) translateX(4px); }
.footer-earth {
  position: absolute;
  top: 24px;
  bottom: 0;
  right: -48px;
  width: clamp(360px, 46vw, 640px);
  /* 只裁切地球的滚动位移，不影响品牌链接的键盘焦点轮廓。 */
  overflow: clip;
  pointer-events: none;
  user-select: none;
}
.footer-earth img { width: 100%; max-width: none; opacity: .82; }

@media (max-width: 760px) {
  .footer-main { min-height: 264px; align-items: flex-start; }
  .footer-identity { padding-block: 36px; }
  .footer-logo img { width: 168px; }
  /* 小屏地球从右下方露出，品牌保持在上方可读区域。 */
  .footer-earth { width: 320px; top: 112px; right: -96px; }
  .footer-colophon { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-footer .arrow { transition: none; }
}