/* Mobile home spacing and orbit sizing. The existing navigation style stays. */
@media (max-width: 860px) {
  .home-page .topbar {
    top: calc(12px + env(safe-area-inset-top, 0px));
    padding: 0;
  }

  .home-page main.site-shell {
    width: min(var(--max-width), calc(100% - 40px));
  }

  .home-page main .hero {
    height: auto;
    min-height: 100svh;
    padding: calc(7rem + env(safe-area-inset-top, 0px)) 0 2rem;
    align-items: start;
  }

  .home-page .hero .hero__grid {
    height: auto;
    min-height: 0;
    /* The full-bleed orbit must not widen its grid after a WebKit resize. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 26rem;
    align-content: start;
    gap: 2.75rem;
  }

  .home-page .hero h1 {
    max-width: 10ch;
    font-size: clamp(3rem, 14.5vw, 4rem);
    line-height: 0.98;
  }

  .home-page .hero p.lead {
    max-width: 38rem;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .home-page .hero .hero-visual {
    display: block;
    width: 100vw;
    height: 26rem;
    margin-left: calc(50% - 50vw);
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .hero-visual .hero-orbit {
    left: 50%;
    width: 28rem;
    max-width: none;
    height: 26rem;
    min-height: 26rem;
    margin: 0;
    transform: translateX(-50%);
  }

  .home-page .hero-orbit .hero-orbit__photo {
    flex-shrink: 0;
    width: 180px;
  }

  .home-page .hero-orbit .hero-orbit__ring {
    width: 320px;
    height: 320px;
    margin-left: -160px;
    margin-top: -160px;
  }

  .home-page .hero-orbit .hero-orbit__ring::before { inset: -32px; }
  .home-page .hero-orbit .hero-orbit__ring::after { inset: 36px; }

  .home-page .hero-orbit[data-project-orbit] .hero-orbit__label {
    inset: 50% auto auto 50%;
    width: 112px;
    min-height: 44px;
    height: 44px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    box-shadow: 0 5px 14px rgba(23, 34, 40, 0.06);
    transform: translate3d(var(--orbit-x), var(--orbit-y), 0) translate(-50%, -50%);
  }

  /* Upright, reachable fallback positions when motion or JavaScript is off. */
  .hero-orbit__label--a { --orbit-x: 0px; --orbit-y: -168px; }
  .hero-orbit__label--b { --orbit-x: 145.5px; --orbit-y: -84px; }
  .hero-orbit__label--c { --orbit-x: 145.5px; --orbit-y: 84px; }
  .hero-orbit__label--d { --orbit-x: -145.5px; --orbit-y: 84px; }
  .hero-orbit__label--e { --orbit-x: -145.5px; --orbit-y: -84px; }
  .hero-orbit__label--f { --orbit-x: 0px; --orbit-y: 168px; }

  .home-page .hero-visual .hero-orbit:not([data-orbit-ready]) {
    display: grid;
    width: calc(100vw - 40px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
  }

  .home-page .hero-orbit:not([data-orbit-ready]) .hero-orbit__photo {
    grid-column: 1 / -1;
    margin: 0 auto 16px;
  }

  .home-page .hero-orbit:not([data-orbit-ready]) .hero-orbit__ring { display: none; }

  .home-page .hero-orbit:not([data-orbit-ready]) .hero-orbit__label {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }
}