/* /learn-glossary. Loaded after site.css, by learn-glossary.html only.
   A reference page read three ways: somebody lands on one term from an
   article and goes back; somebody browses A to Z; somebody searches. So the
   page is a search, an alphabet, and the terms set like a dictionary (letter,
   word, definitions), with a bar of letters that follows the reader.
   Everything holds its end state with scripts off, reduced motion and print. */

/* On the root, because scroll-padding-top (below) is read there. */
html:has(body.glossary-page) {
  --gl-max: 1200px;
  --gl-gut: clamp(16px, 4vw, 56px);
  --hc-nav-h: 64px;            /* fallback; scripts/learn-glossary.js sets the real header height */
  --hc-bar-h: 52px;
  --gl-ease: cubic-bezier(.16, 1, .3, 1);
  --gl-mark: rgba(45, 110, 177, .16);
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 20px);
}
body.glossary-page { background: var(--white); }

/* Text fills its column; the column, not the paragraph, sets the measure.
   The two resets are colors_and_type.css's: bare <p> capped at 42rem, and a
   grey underline on every <a>. */
:where(.glossary-page main) p { max-width: none; margin: 0; text-wrap: wrap; }
.glossary-page main a:not(.btn, .gl-az__list a) { border-bottom: 0; }
:where(.glossary-page main) :is(h1, h2, h3, h4) { margin: 0; text-wrap: wrap; }
.glossary-page main h1 em { color: var(--accent-blue); font-style: italic; }
/* A heading that has to wrap breaks where the styling changes. */
.glossary-page .h-lead, .glossary-page main h1 > em { display: inline-block; }
.glossary-page main h2 { font-size: clamp(1.9rem, 3.1vw, 2.85rem); line-height: 1.1; font-weight: 300; }

.gl-wrap { max-width: var(--gl-max); margin: 0 auto; padding: 0 var(--gl-gut); }
.gl-sprite { position: absolute; }
.gl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a part that receives focus after a jump is not itself a control */
.glossary-page main [tabindex="-1"]:focus { outline: none; }
.glossary-page main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.glossary-page main summary:focus-visible { outline-offset: 7px; border-radius: 6px; }
:where(.glossary-page main) button:not(.btn) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.glossary-page main :is(a, button, summary) { -webkit-tap-highlight-color: transparent; }

.gl-arr { display: inline-block; transition: transform 320ms var(--gl-ease); }
a:hover .gl-arr, a:focus-visible .gl-arr { transform: translateX(5px); }

/* ============ HERO ============ */
.gl-hero { padding: clamp(36px, 5.5vw, 80px) 0 clamp(40px, 5vw, 72px); }
.gl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 372px); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
.gl-hero__text { grid-column: 1; grid-row: 1; min-width: 0; }
.gl-hero__h1 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: 1.02; font-weight: 300; letter-spacing: -.015em; }
.gl-hero__answer { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--ink-soft); }

/* the search: the thing most readers came to use */
.gl-find { position: relative; margin-top: clamp(24px, 3vw, 36px); }
html:not(.gl-js) .gl-find { display: none; }   /* a search that cannot search is not shown */
.gl-find__label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.gl-find__field { position: relative; display: flex; align-items: center; }
.gl-find__glass { position: absolute; left: 18px; width: 22px; height: 22px; fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; transition: stroke 200ms; }
.gl-find__field:focus-within .gl-find__glass { stroke: var(--accent-blue); }
.gl-find input {
  width: 100%; height: 60px; padding: 0 104px 0 52px;
  font: 400 1.125rem/1.2 var(--font-body); color: var(--ink);
  background: var(--white); border: 1px solid var(--border-strong); border-radius: 8px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 200ms, box-shadow 260ms var(--gl-ease);
}
.gl-find input::placeholder { color: var(--ink-muted); opacity: 1; }
.gl-find input::-webkit-search-cancel-button { display: none; }
.gl-find input:hover { border-color: var(--ink-muted); }
.gl-find input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(45, 110, 177, .18); }
.gl-find__key {
  position: absolute; right: 16px; min-width: 26px; height: 26px; display: grid; place-items: center;
  font: 500 14px/1 var(--font-body); color: var(--ink-muted); border: 1px solid var(--border-strong); border-radius: 5px; pointer-events: none;
}
.gl-find__field:focus-within .gl-find__key, .gl-find.has-query .gl-find__key { display: none; }
@media (hover: none) { .gl-find__key { display: none; } }
.glossary-page .gl-find__clear {
  position: absolute; right: 6px; height: 48px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--ink-muted); border-radius: 6px; transition: color 200ms, background-color 200ms;
}
.gl-find__clear[hidden] { display: none !important; }
.gl-find__clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; transition: transform 320ms var(--gl-ease); }
.gl-find__clear:hover { color: var(--ink); background: rgba(11, 29, 58, .06); }
.gl-find__clear:hover svg { transform: rotate(90deg); }
.gl-find__try { margin-top: 10px; font-size: 15px; color: var(--ink-muted); }
.glossary-page .gl-find__try button {
  padding: 10px 2px; margin: -10px 0; color: var(--accent-blue-hover); font-weight: 500;
  text-decoration: underline dotted var(--accent-blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color 200ms;
}
.gl-find__try button:hover { color: var(--accent-blue); text-decoration-style: solid; }

.gl-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.gl-topics legend { float: left; padding: 0; margin-right: 6px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 44px; }
.glossary-page .gl-topic {
  height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink);
  background: var(--white); border: 1px solid var(--border-strong); border-radius: 6px;
  transition: border-color 200ms, color 200ms, background-color 200ms, transform 320ms var(--gl-ease);
}
.gl-topic span { font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; transition: color 200ms; }
.gl-topic:hover { border-color: var(--accent-blue); color: var(--accent-blue-hover); transform: translateY(-2px); }
.gl-topic:active { transform: none; }
.glossary-page .gl-topic[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.gl-topic[aria-pressed="true"] span { color: rgba(255, 255, 255, .78); }

/* what the search found, said beside it (the matches themselves are further down the page) */
/* it sits in the gap above the alphabet, so the alphabet does not jump when it appears */
.gl-find__result { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; min-height: 44px; margin-top: 8px; animation: gl-rise 420ms var(--gl-ease) backwards; }
html:not(.gl-filtered) .gl-find__result { width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; animation: none; }
.gl-status { font-size: 1rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.gl-find__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.gl-find__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--gl-ease); }
.gl-find__go:hover { color: var(--accent-blue); }
.gl-find__go:hover svg { transform: translateY(4px); }
.gl-find.is-none .gl-find__go { display: none; }

/* the card index: one card pulled up, its plain lines above its boxed ones */
.gl-index { grid-column: 2; grid-row: 1; width: 100%; height: auto; overflow: hidden; }
.gl-index path, .gl-index rect { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.gl-index text { font: italic 400 15px/1 var(--font-display); fill: var(--ink-muted); text-anchor: middle; }
.gl-index__card path { stroke: var(--border-strong); }
.gl-index__lift text { fill: var(--accent-blue); font-size: 17px; }
.gl-index .gl-index__paper { stroke: var(--accent-blue); }
.gl-index .gl-index__plain { fill: none; stroke: var(--ink); stroke-width: 5; stroke-dasharray: 1 1.2; }
.gl-index .gl-index__box { fill: var(--accent-wash); stroke: none; }
.gl-index .gl-index__tech { fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-dasharray: 1 1.2; }
.gl-index__drawer rect, .gl-index__drawer path:last-child { fill: none; }
.gl-index__lift { transform-box: view-box; }

/* the alphabet board */
.gl-az { margin-top: 68px; }
.gl-az__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; }
.gl-az__list li { margin: 0; }
.gl-az__list a, .gl-az__list .is-none {
  height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 6px; color: var(--ink);
}
.gl-az__list b { font: 400 1.75rem/1 var(--font-display); }
.gl-az__list a { border: 1px solid var(--border); background: var(--white); transition: border-color 200ms, color 200ms, transform 360ms var(--gl-ease), box-shadow 360ms var(--gl-ease); }
.gl-az__list a span { font-size: 13px; line-height: 1; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.gl-az__list a i { font-style: normal; }
.gl-az__list a:hover { border-color: var(--accent-blue); color: var(--accent-blue); transform: translateY(-3px); box-shadow: 0 10px 22px -14px rgba(11, 29, 58, .45); }
.gl-az__list a:active { transform: none; }
.gl-az__list .is-none b { color: rgba(11, 29, 58, .5); }
.gl-az__list a[aria-disabled="true"] { pointer-events: none; border-style: dashed; }
.gl-az__list a[aria-disabled="true"] :is(b, span) { color: rgba(11, 29, 58, .5); }

/* ============ THE BAR (follows the reader) ============ */
.hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--gl-ease), visibility 0s 360ms;
}
.hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--gl-ease); }
body.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hc-bar__track {
  max-width: var(--gl-max); margin: 0 auto; padding: 0 var(--gl-gut);
  height: 100%; display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 40px;
}
.hc-bar__track::-webkit-scrollbar { display: none; }
.hc-bar__track a {
  position: relative; flex: none; min-width: 42px; padding: 0 6px; display: flex; align-items: center; justify-content: center;
  font: 400 1.25rem/1 var(--font-display); color: var(--ink-muted); white-space: nowrap; transition: color 200ms;
}
.hc-bar__track a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transition: transform 360ms var(--gl-ease);
}
.hc-bar__track a:hover, .hc-bar__track a[aria-current] { color: var(--ink); }
.hc-bar__track a:hover::after { transform: scaleX(.4); }
.hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.hc-bar__track a[aria-disabled="true"] { pointer-events: none; color: rgba(11, 29, 58, .34); text-decoration: line-through; text-decoration-thickness: 1px; }
.glossary-page .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -5px; border-radius: 6px; }
.hc-bar__track .hc-bar__find {
  gap: 8px; margin-right: 14px; padding: 0 16px 0 0; justify-content: flex-start;
  font: 500 15px/1 var(--font-body); color: var(--ink); border-right: 1px solid var(--border);
}
html:not(.gl-js) .hc-bar__find { display: none; }
.hc-bar__find svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform 360ms var(--gl-ease); }
.hc-bar__find:hover { color: var(--accent-blue-hover); }
.hc-bar__find:hover svg { transform: scale(1.14) rotate(-8deg); }
.hc-bar__track .hc-bar__find::after { display: none; }
.hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%; pointer-events: none;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ HOW AN ENTRY READS: the one tinted band ============ */
/* (both bands whose parts slide in sideways clip that slide; neither holds a photo) */
.gl-how { padding: clamp(52px, 6.5vw, 92px) 0; background: var(--accent-wash); overflow-x: clip; }
.gl-how__grid { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); column-gap: clamp(36px, 7vw, 112px); align-items: start; }
.gl-two { width: 100%; height: auto; position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.gl-two path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.gl-two .gl-two__bubble { fill: var(--white); stroke: var(--accent-blue); }
.gl-two .gl-two__word { stroke-width: 6; stroke-dasharray: 1 1.2; }
.gl-two .gl-two__page { fill: var(--white); stroke-dasharray: 1 1.2; }
.gl-two .gl-two__line { stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 1 1.2; }
.gl-two__say { transform-box: fill-box; transform-origin: 22% 100%; }
.gl-how__text p { font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); }
.gl-how__text > p { margin-top: 20px; }
.gl-how__text strong { font-weight: 600; color: var(--ink); }
.gl-note { position: relative; margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(22px, 2.6vw, 32px); }
.gl-note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border-strong); transform-origin: left; }
.glossary-page .gl-note h3 { font: 400 1.5rem/1.2 var(--font-display); color: var(--ink); margin-bottom: 10px; }

/* ============ THE TERMS, set like a dictionary ============ */
.gl-terms { padding: clamp(52px, 6.5vw, 92px) 0 clamp(60px, 7vw, 104px); }
.gl-terms__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; row-gap: 6px; margin-bottom: clamp(20px, 3vw, 40px); }
.gl-count { font-size: 1rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; transform-origin: left center; }
.gl-count.is-new { animation: gl-pop 420ms var(--gl-ease); }
.glossary-page .gl-fold {
  margin-left: auto; min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--accent-blue-hover); transition: color 200ms;
}
.gl-fold[hidden] { display: none; }
.gl-fold:hover { color: var(--accent-blue); }
.gl-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 360ms var(--gl-ease); }
.gl-fold.is-open .gl-chev { transform: rotate(180deg); }

.gl-empty { padding: clamp(36px, 6vw, 72px) 0; text-align: center; border-top: 1px solid var(--border); }
.gl-empty[hidden] { display: none; }
.gl-empty svg { width: 64px; height: 64px; margin: 0 auto 14px; display: block; fill: none; stroke: var(--accent-blue); stroke-width: 1.5; stroke-linecap: round; }
.gl-empty svg > * { stroke-dasharray: 1 1.2; animation: gl-draw 700ms var(--gl-ease) backwards; }
.gl-empty svg > :nth-child(2) { animation-delay: 220ms; }
.gl-empty svg > :nth-child(3) { animation-delay: 420ms; }
.gl-empty__h { font: 400 1.75rem/1.2 var(--font-display); color: var(--ink); }
.gl-empty p + p { margin: 6px 0 22px; color: var(--ink-muted); }

/* a letter and its terms: the letter stays beside them while they are read */
.gl-group { position: relative; display: grid; grid-template-columns: clamp(64px, 8vw, 104px) minmax(0, 1fr); column-gap: clamp(16px, 2.4vw, 32px); padding-top: 14px; border-top: 1px solid var(--ink); }
.gl-group[hidden] { display: none; }
.gl-group + .gl-group { margin-top: clamp(40px, 5vw, 72px); }
.gl-group::before { content: ""; position: absolute; left: 0; top: -2px; width: clamp(64px, 8vw, 104px); height: 3px; background: var(--ink); transform-origin: left; }
.glossary-page .gl-group__letter {
  position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px); align-self: start;
  font: 300 clamp(4rem, 8vw, 6.25rem)/.9 var(--font-display); letter-spacing: -.02em; color: var(--ink);
}
.gl-group__terms { min-width: 0; }

.gl-term { position: relative; isolation: isolate; display: flow-root; padding: 20px 0 22px; }
.gl-term[hidden] { display: none; }
.gl-term + .gl-term { border-top: 1px solid var(--border); }
/* the word and how it is said sit to the left of its definitions */
.gl-term__head {
  float: left; width: 316px; list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; column-gap: 16px; row-gap: 3px; align-items: start;
  grid-template-areas: "badge name name" "badge say chev" "badge topic chev";
}
.gl-term__head::-webkit-details-marker { display: none; }
.gl-badge { grid-area: badge; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--white); transition: border-color 240ms, background-color 240ms, transform 420ms var(--gl-ease); }
.gl-badge svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke 240ms; }
.glossary-page .gl-term__name { grid-area: name; font: 400 1.5rem/1.2 var(--font-display); color: var(--ink); transition: color 200ms; overflow-wrap: anywhere; }
.gl-term__name dfn { font-style: normal; }
.gl-term__say { grid-area: say; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.gl-term__topic { grid-area: topic; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--ink-soft); }
.gl-term__head .gl-chev { grid-area: chev; color: var(--ink-muted); }
.gl-term[open] > .gl-term__head .gl-chev { transform: rotate(180deg); }
.gl-term__head:hover .gl-term__name { color: var(--accent-blue-hover); }
.gl-term__head:hover .gl-badge { border-color: var(--accent-blue); transform: scale(1.06); }
.gl-term__head:hover .gl-badge svg { stroke: var(--accent-blue); }
.gl-term__head:hover .gl-chev { color: var(--accent-blue); }
.gl-term__head:active .gl-badge { background: var(--accent-wash); }

.gl-term__body { margin-left: 348px; }
.gloss-term__simple { font-size: 1.125rem; line-height: 1.62; color: var(--ink); }
.gloss-term__simple strong { font-weight: 600; }
.gloss-term__technical { margin-top: 14px; padding: 12px 16px 14px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); border: 1px solid var(--border); border-radius: 8px; }
.gloss-term__technical > strong:first-child { display: block; margin-bottom: 3px; font-size: 14px; font-weight: 600; color: var(--ink); }
.gl-term__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 20px; margin-top: 4px; }
.gl-term__foot .gl-term__see { margin-top: 0; }
.gl-term__see { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 0; font-size: 15px; line-height: 44px; color: var(--ink-muted); }
.gl-term__see strong { font-weight: 600; color: var(--ink); }
.gl-term__see a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent-blue-hover);
  text-decoration: underline dotted var(--accent-blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color 200ms;
}
.gl-term__see a:hover { color: var(--accent-blue); text-decoration-style: solid; }
.gl-see__clinic img[width][height] { width: 22px; height: 22px; border-radius: 4px; flex: none; transition: transform 360ms var(--gl-ease); }
.gl-see__clinic:hover img { transform: scale(1.12) rotate(-4deg); }
.glossary-page .gl-copy { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-muted); transition: color 200ms; }
.gl-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gl-copy__tick { stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; }
.gl-copy:hover { color: var(--accent-blue-hover); }
.gl-copy:hover .gl-copy__link { animation: gl-nudge 520ms var(--gl-ease); transform-origin: center; transform-box: fill-box; }
.gl-copy.is-done { color: var(--accent-blue-hover); }
.gl-copy.is-done .gl-copy__link { opacity: 0; }
.gl-copy.is-done .gl-copy__tick { stroke-dashoffset: 0; animation: gl-draw 420ms var(--gl-ease) backwards; }

.gl-term mark { background: var(--gl-mark); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px var(--gl-mark); animation: gl-mark 360ms var(--gl-ease) both; }

/* the term a link pointed at: marked for as long as it is the one you came for */
.gl-term.is-landed::before { content: ""; position: absolute; left: -18px; top: 20px; bottom: 22px; width: 3px; border-radius: 2px; background: var(--accent-blue); transform-origin: top; animation: gl-grow 620ms var(--gl-ease) both; }
.gl-term.is-landed::after { content: ""; position: absolute; inset: 6px -14px 8px -18px; z-index: -1; border-radius: 8px; background: var(--gl-mark); opacity: 0; animation: gl-arrive 2600ms ease-out both; pointer-events: none; }
.gl-term.is-landed .gl-term__name { color: var(--accent-blue-hover); }
.gl-term.is-landed .gl-badge { border-color: var(--accent-blue); }
.gl-term.is-landed .gl-badge svg { stroke: var(--accent-blue); }
.gl-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 6px; padding-right: 6px;
  font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); animation: gl-rise 520ms 240ms var(--gl-ease) both;
}
.gl-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--gl-ease); }
.gl-back:hover { color: var(--accent-blue); }
.gl-back:hover svg { transform: translateX(-5px); }

/* definitions the reader has just opened unfold */
.gl-term.is-toggled > .gl-term__body { animation: gl-unfold 460ms var(--gl-ease) both; }

/* ============ ONWARD (the footer below is navy, so this stays white) ============ */
.gl-next { padding: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 112px); border-top: 1px solid var(--border); overflow-x: clip; }
.gl-next__grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.gl-next__list { list-style: none; margin: 0; padding: 0; }
.gl-next__list li { margin: 0; border-top: 1px solid var(--border-strong); }
.gl-next__list li:last-child { border-bottom: 1px solid var(--border-strong); }
.gl-next__list a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 20px; row-gap: 2px; align-items: center;
  grid-template-areas: "badge name go" "badge what go";
  padding: 22px 12px; margin: 0 -12px; color: var(--ink); border-radius: 8px; transition: background-color 260ms;
}
.gl-next__badge { grid-area: badge; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; transition: border-color 260ms, transform 420ms var(--gl-ease); }
.gl-next__badge svg { width: 26px; height: 26px; fill: none; stroke: var(--accent-blue); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gl-next__badge path { stroke-dasharray: 1 1.2; }
.gl-next__name { grid-area: name; font: 400 1.625rem/1.2 var(--font-display); transition: color 200ms; }
.gl-next__what { grid-area: what; font-size: 1rem; line-height: 1.5; color: var(--ink-muted); }
.gl-next__go { grid-area: go; font-size: 15px; font-weight: 500; color: var(--accent-blue-hover); white-space: nowrap; }
.gl-next__list a:hover { background: rgba(45, 110, 177, .06); color: var(--ink); }
.gl-next__list a:hover .gl-next__name { color: var(--accent-blue-hover); }
.gl-next__list a:hover .gl-next__badge { border-color: var(--accent-blue); transform: scale(1.06); }
.gl-next__list a:hover .gl-next__badge path { animation: gl-draw 900ms var(--gl-ease) backwards; }

/* ============ MOTION ============
   Each part arrives its own way, once. .gl-anim is set by the script only
   when motion is welcome and the observer exists; without it everything
   above is already the end state. */
@keyframes gl-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes gl-fade { from { opacity: 0; } }
@keyframes gl-tile { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes gl-card { from { opacity: 0; transform: translateY(40px); } }
@keyframes gl-lift { from { transform: translateY(150px); } }
@keyframes gl-draw { from { stroke-dashoffset: 1.1; } to { stroke-dashoffset: 0; } }
@keyframes gl-pop { 0% { transform: scale(.94); opacity: .4; } 60% { transform: scale(1.03); } 100% { transform: none; opacity: 1; } }
@keyframes gl-say { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes gl-grow { from { transform: scaleY(0); } }
@keyframes gl-arrive { 0% { opacity: 0; } 12%, 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gl-unfold { from { opacity: 0; transform: translateY(-8px); } }
@keyframes gl-mark { from { background-color: transparent; box-shadow: 0 0 0 2px transparent; } }
@keyframes gl-nudge { 50% { transform: rotate(-14deg) scale(1.08); } }

/* the hero assembles: the words, the search, then one card comes up out of the drawer and is written */
.gl-anim .gl-hero__h1 > * { animation: gl-rise 900ms var(--gl-ease) both; }
.gl-anim .gl-hero__h1 > em { animation-delay: 140ms; }
.gl-anim .gl-hero__answer { animation: gl-fade 900ms 320ms ease-out both; }
.gl-anim .gl-find { animation: gl-rise 800ms 420ms var(--gl-ease) both; }
.gl-anim .gl-find__glass path { stroke-dasharray: 1 1.2; animation: gl-draw 800ms 700ms var(--gl-ease) backwards; }
.gl-anim .gl-find__glass path + path { animation-delay: 1000ms; animation-duration: 400ms; }
.gl-anim .gl-index__drawer { animation: gl-fade 600ms 200ms ease-out both; }
.gl-anim .gl-index__card { animation: gl-card 800ms var(--gl-ease) both; }
.gl-anim .gl-index__card--3 { animation-delay: 380ms; }
.gl-anim .gl-index__card--2 { animation-delay: 500ms; }
.gl-anim .gl-index__lift { animation: gl-lift 1100ms 720ms var(--gl-ease) both; }
.gl-anim .gl-index__plain { animation: gl-draw 520ms var(--gl-ease) backwards; }
.gl-anim .gl-index__plain:nth-of-type(2) { animation-delay: 1500ms; }
.gl-anim .gl-index__plain:nth-of-type(3) { animation-delay: 1640ms; }
.gl-anim .gl-index__plain:nth-of-type(4) { animation-delay: 1780ms; }
.gl-anim .gl-index__box { animation: gl-fade 500ms 2050ms ease-out both; }
.gl-anim .gl-index__tech { animation: gl-draw 460ms var(--gl-ease) backwards; }
.gl-anim .gl-index__tech:nth-of-type(5) { animation-delay: 2250ms; }
.gl-anim .gl-index__tech:nth-of-type(6) { animation-delay: 2370ms; }
.gl-anim .gl-index__tech:nth-of-type(7) { animation-delay: 2490ms; }
.gl-anim .gl-az__list > li { animation: gl-tile 520ms var(--gl-ease) both; animation-delay: calc(560ms + var(--i, 0) * 22ms); }

/* how an entry reads: what is said pops up first, then the book opens under it */
.gl-anim .gl-two[data-r]:not(.is-in) :is(.gl-two__say, .gl-two__book) { opacity: 0; }
.gl-anim .gl-two.is-in .gl-two__say { animation: gl-say 620ms var(--gl-ease) both; }
.gl-anim .gl-two.is-in .gl-two__word { animation: gl-draw 520ms 480ms var(--gl-ease) backwards; }
.gl-anim .gl-two.is-in .gl-two__word + .gl-two__word { animation-delay: 640ms; }
.gl-anim .gl-two.is-in .gl-two__page { animation: gl-draw 900ms 900ms var(--gl-ease) backwards; }
.gl-anim .gl-two.is-in .gl-two__line { animation: gl-draw 520ms var(--gl-ease) backwards; animation-delay: calc(1500ms + var(--n, 0) * 110ms); }
.gl-two__line:nth-of-type(4) { --n: 1; } .gl-two__line:nth-of-type(5) { --n: 2; }
.gl-two__line:nth-of-type(6) { --n: 3; } .gl-two__line:nth-of-type(7) { --n: 4; } .gl-two__line:nth-of-type(8) { --n: 5; }
.gl-anim .gl-how__text > [data-r] { opacity: 0; transform: translateX(22px); transition: opacity 700ms var(--gl-ease), transform 900ms var(--gl-ease); }
.gl-anim .gl-how__text > [data-r].is-in { opacity: 1; transform: none; }
.gl-anim .gl-how__text > p[data-r] + p[data-r] { transition-delay: 110ms; }
.gl-anim .gl-note[data-r]::before { transform: scaleX(0); transition: transform 1100ms 200ms var(--gl-ease); }
.gl-anim .gl-note[data-r].is-in::before { transform: none; }

/* a letter: its rule draws, the letter settles, its terms follow */
.gl-anim .gl-group[data-r]::before { transform: scaleX(0); transition: transform 900ms var(--gl-ease); }
.gl-anim .gl-group[data-r].is-in::before { transform: none; }
.gl-anim .gl-group[data-r] .gl-group__letter { opacity: 0; transform: translateY(26px); transition: opacity 600ms ease-out, transform 1000ms var(--gl-ease); }
.gl-anim .gl-group[data-r].is-in .gl-group__letter { opacity: 1; transform: none; }
.gl-anim .gl-group[data-r] .gl-group__terms { opacity: 0; transition: opacity 700ms 160ms ease-out; }
.gl-anim .gl-group[data-r].is-in .gl-group__terms { opacity: 1; }

/* onward: the heading slides in from the left, the three rows from the right, each icon drawing itself */
.gl-anim .gl-next h2[data-r] { opacity: 0; transform: translateX(-24px); transition: opacity 700ms var(--gl-ease), transform 900ms var(--gl-ease); }
.gl-anim .gl-next li[data-r] { opacity: 0; transform: translateX(28px); transition: opacity 700ms var(--gl-ease), transform 900ms var(--gl-ease); }
.gl-anim .gl-next li[data-r]:nth-child(2) { transition-delay: 110ms; }
.gl-anim .gl-next li[data-r]:nth-child(3) { transition-delay: 220ms; }
.gl-anim .gl-next :is(h2, li)[data-r].is-in { opacity: 1; transform: none; }
.gl-anim .gl-next li[data-r]:not(.is-in) .gl-next__badge path { stroke-dashoffset: 1.1; }
.gl-anim .gl-next li[data-r].is-in .gl-next__badge path { animation: gl-draw 1100ms 300ms var(--gl-ease) backwards; }

/* ============ NARROWER ============ */
@media (max-width: 1080px) {
  .gl-term__head { width: 268px; }
  .gl-term__body { margin-left: 292px; }
}
@media (max-width: 900px) {
  .gl-hero__grid { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 28px; }
  /* the word above its definitions */
  .gl-term__head { float: none; width: auto; grid-template-columns: 48px minmax(0, 1fr) auto 20px; grid-template-areas: "badge name topic chev" "badge say topic chev"; }
  .gl-term__topic { align-self: center; }
  .gl-term__body { margin: 14px 0 0 64px; }
  /* the bar's track can run past the screen: fade the edge it runs under */
  .hc-bar__track { --gl-fade-l: 0px; padding-right: 44px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gl-fade-l), #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gl-fade-l), #000 calc(100% - 44px), transparent); }
  .hc-bar__track.is-scrolled { --gl-fade-l: 36px; }
  .gl-next__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}
@media (max-width: 760px) {
  /* the drawing becomes a small mark beside the heading; the search comes straight after the answer */
  .gl-hero__grid { display: block; }
  .gl-index { float: right; width: 84px; margin: 2px 0 6px 12px; }
  .gl-az__list { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .gl-az__list a, .gl-az__list .is-none { height: 54px; }
  .gl-az__list b { font-size: 1.5rem; }
  .gl-az__list a i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gl-find input { height: 56px; font-size: 1.0625rem; }
  .gl-find__key { display: none; }
  .gl-find input { padding-right: 96px; }
  .gl-topics legend { float: none; width: 100%; line-height: 1.4; margin: 0 0 2px; }
  .glossary-page .gl-topic { padding: 0 12px; }

  .gl-how__grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .gl-two { position: static; width: 168px; }

  .gl-terms__head { align-items: center; }
  .gl-terms__head h2 { width: 100%; }
  .gl-group { grid-template-columns: minmax(0, 1fr); padding-top: 10px; }
  .gl-group::before { width: 56px; }
  .glossary-page .gl-group__letter { position: static; font-size: 3.5rem; line-height: 1; }
  .gl-term { padding: 0; }
  .glossary-page main summary:focus-visible { outline-offset: 0; }
  .gl-term__head { grid-template-columns: 48px minmax(0, 1fr) 20px; grid-template-areas: "badge name chev" "badge say chev" "badge topic chev"; padding: 16px 0; min-height: 44px; }
  .glossary-page .gl-term__name { font-size: 1.4375rem; }
  .gl-term__head .gl-chev { align-self: center; margin-top: 0; }
  .gl-term__body { margin: 0; padding-bottom: 22px; }
  .gloss-term__simple { font-size: 1.0625rem; }
  .gloss-term__technical { padding: 12px 14px 14px; font-size: 15px; }
  .gl-term.is-landed::before { left: -10px; top: 16px; bottom: 22px; }
  .gl-term.is-landed::after { inset: 4px -8px 6px -10px; }

  .gl-next__list a { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "badge name" "badge what" ". go"; padding: 18px 12px; column-gap: 16px; }
  .gl-next__badge { width: 48px; height: 48px; align-self: start; }
  .gl-next__go { margin-top: 8px; }
  .glossary-page .gl-next__name { font-size: 1.4375rem; }
}

/* ============ STILL ============ */
@media (prefers-reduced-motion: reduce) {
  .gl-term.is-landed::after { animation: none; opacity: .55; }
}
@media print {
  .hc-bar, .gl-find, .gl-fold, .gl-copy, .gl-back, .gl-index, .gl-az, .gl-term__head .gl-chev { display: none !important; }
  .gl-how { background: none; }
  .gl-group__letter { position: static !important; }
  .gl-term { break-inside: avoid; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}