@media screen {
  :root {
    --muted-dark: #8e8b84;
  }
}

@media screen and (min-width: 981px) {
  .hero {
    min-height: min(860px, calc(100svh - 5.25rem));
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 0.5fr);
    gap: clamp(2rem, 4vw, 5rem);
  }

  .hero__content {
    padding-block: clamp(3rem, 5vh, 4.25rem);
  }

  .hero .eyebrow {
    margin-bottom: clamp(1.75rem, 3vh, 2.5rem);
  }

  .hero h1 {
    max-width: 21ch;
    font-size: clamp(3.4rem, 3.8vw, 5.75rem);
    line-height: 0.96;
  }

  .hero__lede {
    max-width: 48rem;
    margin-bottom: 1.8rem;
    font-size: clamp(1.05rem, 0.4vw + 0.92rem, 1.38rem);
  }

  .hero__metadata {
    margin-top: clamp(2rem, 4vh, 3.25rem);
  }

  .system-map {
    min-height: 36rem;
  }

  .system-map__plane {
    inset: clamp(4rem, 7vh, 6rem) clamp(1.5rem, 2vw, 2.5rem) 8rem;
  }
}

@media screen and (min-width: 2000px) {
  .hero {
    min-height: min(900px, calc(100svh - 6rem));
  }
}

@media (max-width: 1240px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card h3 {
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 700px) {
  .hero__content {
    padding: 3.25rem 0 3rem;
  }

  .hero h1 {
    font-size: clamp(2.85rem, 11.8vw, 4.4rem);
    line-height: 0.98;
  }
}

@media screen and (max-width: 380px) {
  .hero h1 {
    font-size: clamp(2.7rem, 12.4vw, 3.2rem);
  }
}