/* Global font scale — bump root so rem-based type grows together */
html {
  font-size: 22px !important;
}

/* px-based chrome that doesn't follow rem */
.top-nav {
  font-size: 17px !important;
}
.top-nav a {
  padding: 7px 16px !important;
}
.sidebar-title {
  font-size: 17px !important;
}
.sidebar-item {
  font-size: 21px !important;
  padding: 11px 14px !important;
}
.sidebar-dot {
  width: 12px !important;
  height: 12px !important;
}
.back-link,
.site-footer__copy,
.site-footer__link {
  font-size: 16px !important;
}
.site-footer__note,
.site-footer__icp {
  font-size: 14px !important;
}
.hero-scroll-prompt {
  font-size: 18px !important;
}

/* hero & lens headline boost */
.hero-title {
  font-size: 3.4rem !important;
}
.hero-desc {
  font-size: 1.35rem !important;
}
.lens-title {
  font-size: 3.2rem !important;
}
.lens-subtitle {
  font-size: 1.35rem !important;
}
.card-title {
  font-size: 1.6rem !important;
}
.card-desc {
  font-size: 1.3rem !important;
}

@media (width <= 900px) {
  html {
    font-size: 18px !important;
  }
  .sidebar-item {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }
  .hero-title,
  .lens-title {
    font-size: 2.2rem !important;
  }
}

@media (width <= 640px) {
  html {
    font-size: 17px !important;
  }
  .top-nav {
    font-size: 12px !important;
  }
  .top-nav a {
    padding: 4px 8px !important;
  }
}