/* /glossary/ : an A to Z reference. The kit .subnav carries the letter index
   (site.js highlights the current letter); filter tools sit above the list. */
.gl-az ul { gap: 2px; justify-content: space-between; }
.gl-az li { flex: 0 0 auto; }
.gl-az a, .gl-az span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 999px; font-family: var(--f-display); font-size: 17px; font-weight: 400; }
.gl-az span { color: rgba(30, 26, 32, .26); }
.gl-az a.is-off { color: rgba(30, 26, 32, .26); pointer-events: none; }

.gl { padding-top: clamp(40px, 5vw, 70px); }
.gl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-bottom: 30px; margin-bottom: 10px; border-bottom: 1px solid rgba(30, 26, 32, .12); }
.gl-search { position: relative; flex: 1 1 300px; max-width: 420px; }
.gl-search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--drift); pointer-events: none; }
.gl-search input { width: 100%; min-height: 50px; padding: 0 20px 0 48px; border-radius: 999px; border: 1px solid rgba(30, 26, 32, .18); background: #fff; font: 400 16px/1 var(--f-body); color: var(--ink); }
.gl-search input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(132, 84, 120, .16); }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-chip { min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(30, 26, 32, .16); background: transparent; font: 500 14px/1 var(--f-body); color: var(--ink-2); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.gl-chip:hover { background: var(--sand); }
.gl-chip[aria-pressed="true"] { background: var(--tide); border-color: var(--tide); color: var(--on-dark); }
.gl-count { margin: 0; font-size: 14px; color: var(--ink-2); min-height: 1em; }

.gl-group { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); padding: 34px 0 10px; border-bottom: 1px solid rgba(30, 26, 32, .1); scroll-margin-top: 150px; }
.gl-letter { position: sticky; top: 150px; align-self: start; font-size: clamp(64px, 8vw, 112px); font-weight: 300; font-style: italic; line-height: .9; color: var(--coral-deep); }
.gl-list { margin: 0; }
.gl-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px clamp(20px, 3vw, 44px); padding: 22px 20px 24px; margin: 0 -20px; border-radius: 20px; scroll-margin-top: 150px; transition: background-color .6s; }
.gl-row + .gl-row { box-shadow: 0 -1px 0 rgba(30, 26, 32, .08); }
.gl-row[hidden], .gl-group[hidden], .gl-empty[hidden] { display: none; }
.gl-row:target { background: var(--sand); box-shadow: inset 3px 0 0 var(--coral); }
.gl-row dt { font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 360; line-height: 1.15; letter-spacing: -.01em; }
.gl-cat { display: block; margin-bottom: 8px; font-family: var(--f-body); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--glass-deep); }
.gl-row dd { margin: 0; }
.gl-row dd p { margin: 0; color: var(--ink-2); }
.gl-row dd .gl-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 14px; }
.gl-rel { font-size: 14.5px; color: var(--ink-2); }
.gl-rel a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(30, 26, 32, .25); }
.gl-rel a:hover { border-color: var(--coral); }
.gl-empty { margin: 40px 0; font-size: 18px; color: var(--ink-2); }
.gl-note { max-width: 46em; margin: 40px 0 0; font-size: 14.5px; color: var(--ink-2); }

.cta-456 { max-width: 60em; margin: 34px auto 0; font-size: 12px; line-height: 1.6; letter-spacing: .015em; text-transform: uppercase; color: var(--on-dark-2); }
.cta-band .cta-456 { margin-bottom: 0; }

@media (max-width: 1100px) { .gl-az ul { justify-content: flex-start; } }
@media (max-width: 860px) {
  .gl-group { grid-template-columns: 1fr; gap: 0; padding-top: 26px; }
  .gl-letter { position: static; font-size: 56px; margin-bottom: 6px; }
  .gl-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gl-search { max-width: none; flex-basis: 100%; }
  .gl-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut); scrollbar-width: none; }
  .gl-chips::-webkit-scrollbar { display: none; }
  .gl-chip { flex: 0 0 auto; }
  .gl-row { padding: 20px 14px; margin: 0 -14px; }
}
@media (max-width: 640px) { .gl-hero-art { display: none; } }