.glossary-page {
  padding-top: 64px;
}

.glossary-intro {
  position: relative;
  isolation: isolate;
  padding: 48px;
  border: 1px solid var(--c-border-veil);
  border-radius: var(--r-frame);
  background:
    linear-gradient(180deg, var(--c-clear), var(--c-bg)),
    linear-gradient(105deg, var(--g-peach), var(--g-pink), var(--g-lilac), var(--g-sky));
  color: var(--c-text);
}

.glossary-intro h1 {
  margin-top: 24px;
  margin-bottom: 16px;
}

.glossary-intro__lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: var(--weight-semibold);
}

.glossary-intro__desc {
  max-width: 740px;
  margin-bottom: 0;
  color: var(--c-muted);
  line-height: 1.9;
}

.glossary-directory {
  margin-top: 32px;
}

.glossary-category {
  margin-top: var(--section-space);
  min-width: 0;
}

.glossary-category__head {
  max-width: var(--reading);
  margin-bottom: 32px;
}

.glossary-category__head h2 {
  margin-top: 18px;
  margin-bottom: 18px;
}

.glossary-category__head p {
  margin-bottom: 0;
  color: var(--c-muted);
  line-height: 1.9;
}

.glossary-page .term-card {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.glossary-page .term-card h3 {
  margin-top: 0;
  font-size: clamp(21px, 2vw, 25px);
}

.glossary-page .term-card p {
  line-height: 1.9;
}

.glossary-term-context {
  display: block;
  margin-top: 8px;
  color: var(--c-muted);
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.glossary-rule {
  margin-bottom: 24px;
}

.glossary-rule h3 {
  margin-top: 0;
  font-size: 23px;
}

.glossary-rule pre {
  margin-top: 20px;
  margin-bottom: 20px;
}

.glossary-rule p {
  margin-bottom: 0;
  color: var(--c-muted);
  line-height: 1.9;
}

.glossary-next {
  margin-top: var(--section-space);
}

.glossary-next h2 {
  margin-top: 0;
}

.glossary-next > p {
  max-width: var(--reading);
  margin-bottom: 28px;
  color: var(--c-muted);
  line-height: 1.9;
}

@media (max-width: 768px) {
  .glossary-page {
    padding-top: 32px;
  }

  .glossary-intro {
    padding: 28px;
  }

  .glossary-intro__lead {
    font-size: 18px;
  }
}

@media (max-width: 380px) {
  .glossary-intro {
    padding: 22px;
  }
}