/* Restrained additions that support the guide's landing page and readability. */
.md-grid {
  max-width: 76rem;
}

.md-content__inner {
  max-width: 52rem;
}

/* Keep the site identity typographic: no logo, just the title and author. */
.md-header__button.md-logo,
.md-nav--primary > .md-nav__title .md-logo {
  display: none;
}

.md-header__topic:first-child .md-ellipsis::after {
  margin-left: 0.55rem;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  opacity: 0.72;
  content: "by Tony Le";
}

.md-nav--primary > .md-nav__title::after {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.72;
  content: "by Tony Le";
}

.guide-hero {
  padding: 2.5rem 0 1.25rem;
}

.guide-hero h1 {
  max-width: 18ch;
  margin-bottom: 0.5rem;
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.guide-hero__lede {
  max-width: 42rem;
  margin-bottom: 1.5rem;
  color: var(--md-default-fg-color--light);
  font-size: 1.12rem;
}

.guide-kicker {
  margin-bottom: 0.5rem;
  color: var(--md-primary-fg-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.image-small {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
}

[data-md-color-scheme="slate"] {
  --md-hue: 225;
}

@media screen and (max-width: 44.984rem) {
  .guide-hero {
    padding-top: 1.25rem;
  }
}