@layer components {
  .site-footer {
    margin-top: auto;
    border-top: none;
    box-shadow:
      inset 0 1px 0 var(--color-ink-a08),
      inset 0 2px 0 var(--color-highlight-50);
  }

  .site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--layout-container-max);
    margin-inline: auto;
    padding: 1.5rem 3rem;
  }

  .site-footer-brand {
    display: flex;
    align-items: center;
  }

  .site-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 0;
    text-decoration: none;
  }

  .site-footer-logo-wordmark {
    font-family: var(--font-logo);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .site-footer-logo-wordmark-primary {
    color: var(--color-fg-muted);
    font-weight: var(--font-weight-regular);
  }

  .site-footer-logo-wordmark-accent {
    color: var(--color-action-primary);
    font-weight: var(--font-weight-bold);
  }

  .site-footer-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
  }

  .site-footer-link {
    font-family: var(--font-mono), monospace;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-fg-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--transition-fast);
  }

  .site-footer-link:hover,
  .site-footer-link:focus-visible {
    color: var(--color-fg-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  @media (max-width: 767px) {
    .site-footer-inner {
      flex-direction: column;
      gap: 0.5rem;
      padding: 20px 16px 24px;
      align-items: center;
      text-align: center;
    }

    .site-footer-link {
      font-size: 10px;
    }

    .site-footer-links {
      justify-content: center;
      gap: 16px;
    }
  }

  /* Reachable-footer mode: after the user opts into infinite scroll via
     "Show More", pin the footer to the viewport bottom so navigation links
     remain reachable no matter how many pages load. Visual design is
     intentionally unchanged from the default footer — only position, opacity
     (solid page background to avoid content bleeding through), stacking and
     (on mobile) a slide-in/out transform are touched.

     Two-class pattern:
       .site-footer--paginating       => sticky positioned, hidden offscreen
       .site-footer--paginating
           .site-footer--sticky       => visible at viewport bottom

     Mobile viewports slide between the two states; desktop snaps instantly. */
  .site-footer--paginating {
    position: sticky;
    bottom: 0;
    /* Same layering as `.landing-filter-bar`: above poster-card internals,
       below `var(--z-modal)`. */
    z-index: 10;
    background: var(--color-bg-secondary);
    transform: translateY(100%);
  }

  .site-footer--paginating.site-footer--sticky {
    transform: translateY(0);
  }

  @media (max-width: 767px) {
    .site-footer--paginating {
      animation: footer-slide-down var(--duration-snappy) var(--ease-smooth)
        both;
    }

    .site-footer--paginating.site-footer--sticky {
      animation: footer-slide-up var(--duration-snappy) var(--ease-smooth) both;
    }
  }

  @keyframes footer-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes footer-slide-down {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-footer--paginating,
    .site-footer--paginating.site-footer--sticky {
      animation: none;
    }
  }
}