/* The ASCII artwork is a backdrop inside the existing twelve-track hero. */
body .site-shell .home-hero {
  isolation: isolate;
  height: calc(100vh - var(--site-header-height));
  height: calc(100dvh - var(--site-header-height));
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}
body .site-shell .home-hero > .container {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
body .site-shell .home-hero .hero-copy {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  margin-block: 0;
  padding-block: clamp(16px, 4dvh, 48px);
  max-height: 100%;
  overflow-y: auto;
}
body .site-shell .hero-globe {
  --hero-globe-ink: color-mix(in srgb, var(--primary) 68%, var(--background));
  position: absolute;
  inset: 0;
  margin: 0;
  min-width: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-globe-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.hero-globe-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 40% 42% at 50% 48%,
    color-mix(in srgb, var(--background) 86%, transparent) 15%,
    color-mix(in srgb, var(--background) 48%, transparent) 48%,
    transparent 100%
  );
}
.hero-globe-art {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 16px);
  max-width: none;
  height: calc(100% - 16px);
  /* SVG meet scaling fits its square drawing within both hero dimensions. */
  overflow: visible;
  user-select: none;
  opacity: 0.92;
}
.hero-globe-type {
  fill: var(--hero-globe-ink);
  font: 15px var(--mono);
  dominant-baseline: central;
  white-space: pre;
}
.hero-globe-art [data-globe-platform] {
  fill: var(--brand, var(--primary));
  font: 8px var(--mono);
  dominant-baseline: central;
  white-space: pre;
}
@media (max-width: 600px) {
  body .site-shell .home-hero .hero-copy {
    margin-block: 0;
    padding-block: clamp(16px, 4dvh, 40px);
  }
  .hero-globe-stage::after {
    background: radial-gradient(
      ellipse 65% 30% at 50% 50%,
      color-mix(in srgb, var(--background) 65%, transparent) 30%,
      color-mix(in srgb, var(--background) 28%, transparent) 70%,
      transparent 100%
    );
  }
}

/* Compact spacing keeps the full message visible on short phones and laptops. */
@media (max-height: 650px) {
  body .site-shell .home-hero .hero-copy {
    padding-block: 16px;
  }
  body .site-shell .home-hero h1 {
    font-size: clamp(30px, min(8vw, 7dvh), 48px);
    margin-top: 16px;
  }
  body .site-shell .home-hero .hero-description {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 16px;
  }
  body .site-shell .home-hero :is(.actions, .hero-agent-link) {
    margin-top: 16px;
  }
  body .site-shell .home-hero .button {
    padding-block: 10px;
  }
}
@media (max-height: 450px) {
  body .site-shell .home-hero .hero-copy {
    padding-block: 8px;
  }
  body .site-shell .home-hero :is(h1, .hero-description, .actions, .hero-agent-link) {
    margin-top: 10px;
  }
  body .site-shell .home-hero .hero-description {
    font-size: 13px;
  }
}