/* glossary.css: /glossary/ only.
 *
 * Two rules govern everything here. Every font-size comes from the --fs-*
 * scale in core.css, and every colour comes from a token, so the page cannot
 * drift off the design system or fail the contrast audit on the one dark band
 * at the foot.
 *
 * The list is a two-column grid of definitions separated by hairlines, which
 * is the site's existing vocabulary: no cards, no shadows, no radius over 4px.
 * It collapses to one column below 900px, matching the breakpoint the rest of
 * the site stacks at. */

/* Jump navigation, in the hero. Kept to one line of small type because the
   hero has a fixed height budget and this page is entered at an anchor at
   least as often as at the top. */
.gl-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:22px;
}
.gl-jump a{
  font-size:var(--fs-sm);
  letter-spacing:0.01em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.gl-jump a:hover{border-bottom-color:var(--ink)}

/* The definition list. */
.gl-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px;
  margin-top:36px;
  border-top:1px solid var(--rule);
}
.gl-item{
  padding:26px 0 24px;
  border-bottom:1px solid var(--rule);
  /* Anchor landings clear the sticky header rather than sitting under it. */
  scroll-margin-top:104px;
}
.gl-term{
  font-size:var(--fs-xl);
  line-height:1.2;
  margin:0 0 10px;
}
.gl-def{
  font-size:var(--fs-md);
  line-height:1.55;
  margin:0;
  color:var(--ink);
}
.gl-more{
  font-size:var(--fs-sm);
  line-height:1.55;
  margin:10px 0 0;
  color:var(--ink-mute);
}
.gl-links{
  margin:14px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.gl-links a{
  font-size:var(--fs-xs);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--hazard);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.gl-links a:hover{border-bottom-color:var(--hazard)}

/* Read-next strip. Sits on .sec-dark, so every colour here is a dark-safe
   token: --ink would disappear against the band. */
.gl-next{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:34px;
  border-top:1px solid oklch(0.34 0.02 268);
}
.gl-next a{
  display:block;
  padding:20px 24px 20px 0;
  font-size:var(--fs-md);
  line-height:1.4;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid oklch(0.34 0.02 268);
}
.gl-next a:hover{color:var(--accent-on-dark)}

@media (max-width:900px){
  .gl-list{grid-template-columns:minmax(0,1fr);gap:0}
  .gl-next{grid-template-columns:minmax(0,1fr)}
  .gl-item{padding:22px 0 20px}
}