.glossary-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-canvas);
  text-align: center;
}

.glossary-hero::before,
.glossary-hero::after {
  position: absolute;
  width: clamp(180px, 25vw, 360px);
  aspect-ratio: 1;
  border-radius: var(--radius-brick);
  box-shadow: inset 0 0 0 1px var(--color-white-highlight);
  content: "";
  pointer-events: none;
  transform: rotate(-12deg);
}

.glossary-hero::before {
  top: -45%;
  left: -8%;
  background: var(--color-brick-sky);
  box-shadow: inset 0 0 0 1px var(--color-white-highlight), 0 0 40px var(--color-glow-sky);
}

.glossary-hero::after {
  right: -7%;
  bottom: -55%;
  background: var(--color-brick-honey);
  box-shadow: inset 0 0 0 1px var(--color-white-highlight), 0 0 40px var(--color-glow-honey);
  transform: rotate(9deg);
}

.glossary-hero .reading-wrap {
  position: relative;
  z-index: 2;
}

.glossary-intro {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--color-muted);
  font-size: clamp(17px, 2vw, 20px);
}

.glossary-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.glossary-body {
  padding-top: clamp(32px, 5vw, 60px);
  padding-bottom: var(--section-space);
}

.glossary-section {
  border-bottom: 1px solid var(--color-line);
}

.glossary-section:last-of-type {
  border-bottom: 0;
}

.glossary-section-head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 820px;
  margin-bottom: 36px;
}

.glossary-section-head p {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: 17px;
}

.glossary-index {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: var(--radius-medium);
  background: var(--color-accent);
  color: var(--color-canvas);
  box-shadow: var(--shadow-button);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-3deg);
}

.glossary-section:nth-of-type(3) .glossary-index {
  background: var(--color-success);
}

.glossary-section:nth-of-type(4) .glossary-index {
  background: var(--color-warning);
  color: var(--color-ink);
}

.glossary-section:nth-of-type(5) .glossary-index {
  background: var(--color-error);
}

.glossary-section:nth-of-type(6) .glossary-index {
  background: var(--color-accent-dark);
}

.glossary-section .term-grid {
  align-items: stretch;
}

.glossary-section .term-card {
  scroll-margin-top: calc(var(--header-height) + 84px);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.glossary-section .term-card:hover {
  background: var(--color-panel-strong);
  box-shadow: var(--shadow-panel);
  transform: translateY(-2px);
}

.glossary-section .term-card:target {
  background: var(--color-accent-soft);
  box-shadow: var(--shadow-panel);
}

.glossary-section .term-card dt {
  color: var(--color-ink);
}

.glossary-section .term-card dd {
  line-height: 1.78;
}

.glossary-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 36px;
  margin-top: clamp(56px, 8vw, 96px);
}

.glossary-note h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}

.glossary-note p {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--color-muted);
}

.glossary-note .button-row {
  justify-content: flex-end;
}

@media (max-width: 800px) {
  .glossary-note {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .glossary-note .button-row {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .glossary-hero::before {
    top: -12%;
    left: -32%;
  }

  .glossary-hero::after {
    right: -30%;
    bottom: -18%;
  }

  .glossary-section-head {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
  }

  .glossary-index {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-small);
    font-size: 21px;
    transform: none;
  }

  .glossary-section-head p {
    font-size: 16px;
  }

  .glossary-note .button-row,
  .glossary-note .button {
    width: 100%;
  }
}