.glossary-mast {
  padding-top: var(--edge);
}

.glossary-mast__canvas {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
  padding: 64px;
  border-radius: var(--r-canvas);
  background:
    radial-gradient(ellipse at top right, var(--c-amber-mid), var(--c-clear) 65%),
    var(--c-canvas);
  color: var(--c-on-canvas);
}

.glossary-mast__copy,
.glossary-mast__key {
  min-width: 0;
}

.glossary-mast .badge {
  border-color: var(--c-canvas-line);
  background: var(--c-canvas-fill);
  color: var(--c-on-canvas-muted);
}

.glossary-mast h1 {
  margin: 0 0 24px;
  font-size: var(--fs-h1);
}

.glossary-mast__accent {
  color: var(--c-accent);
}

.glossary-mast__lead {
  margin-bottom: 12px;
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
}

.glossary-mast__desc {
  max-width: 440px;
  margin-bottom: 0;
  color: var(--c-on-canvas-muted);
}

.glossary-mast__key {
  padding: 28px;
  border: 1px solid var(--c-canvas-line-strong);
  border-radius: var(--r-card);
  background: var(--c-canvas-fill);
  color: var(--c-on-canvas);
}

.glossary-mast__label {
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.glossary-mast__key dl {
  margin: 20px 0 0;
}

.glossary-mast__key dl > div + div {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-canvas-line);
}

.glossary-mast__key dt {
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.glossary-mast__key dd {
  margin: 0;
  color: var(--c-on-canvas-muted);
  font-size: var(--fs-sm);
}

.glossary-content {
  padding-top: 40px;
}

.glossary-content > .callout {
  margin-bottom: 0;
}

.glossary-heading {
  max-width: 720px;
  margin-bottom: 40px;
}

.glossary-heading h2 {
  margin: 12px 0 20px;
}

.glossary-heading p {
  margin-bottom: 0;
  color: var(--c-muted);
}

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

.glossary-content .term-card__word a {
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.glossary-content .term-card__word a:hover {
  color: var(--c-accent-dark);
  text-decoration: underline;
}

.glossary-content .term-card p a {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.glossary-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.glossary-next h2 {
  margin: 0 0 20px;
  font-size: var(--fs-h3);
}

.glossary-next p {
  margin-bottom: 0;
  color: var(--c-muted);
}

@media (max-width: 960px) {
  .glossary-mast__canvas {
    gap: 32px;
    padding: 40px;
  }
}

@media (max-width: 768px) {
  .glossary-mast__canvas,
  .glossary-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .glossary-mast h1 {
    font-size: var(--fs-h1);
  }

  .glossary-mast__desc {
    max-width: 100%;
  }

  .glossary-next {
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .glossary-mast__canvas {
    padding: 28px 22px;
    border-radius: var(--r-mobile-canvas);
  }

  .glossary-mast__key {
    padding: 22px;
  }

  .glossary-content {
    padding-top: 28px;
  }

  .glossary-heading {
    margin-bottom: 28px;
  }
}