/* Optimus Distributor — glossary.html (data-hero="index")
   Builds on css/tokens.css + css/chrome.css only. */

/* ---------- hero · the index ----------
   The hero was one left column against a 1200px container, so a 65ch lede left a
   257 x 270 hole on its right at every desktop width. The hub heroes solved the same
   shape with the drawn motif; a third copy of that motif would have turned a signature
   into wallpaper. What a forty-term reference actually wants there is the one affordance
   nothing else on the page offers: a way to find a term without reading all six domains.
   The sticky chip rail below already handles jumping BETWEEN domains, so this does not
   duplicate it.
   All forty terms stay in the HTML whatever the filter is doing -- it hides, it never
   fetches -- so a crawler with no JavaScript still reads the complete glossary. */
.ghero{padding:72px 0 56px;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.ghero h1{margin:16px 0 18px}
.ghero .lede{max-width:65ch;color:var(--mut);font-size:17px;line-height:1.7}
.gherowrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--g5);
  align-items:end}
.gfilter{align-self:end;padding-bottom:6px}
.gfilter label{display:block;font:500 12px var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut2);margin-bottom:12px}
.gfilter input{width:100%;background:rgba(12,24,48,.6);border:1px solid var(--line2);
  border-radius:999px;padding:13px 20px;color:var(--ink);font:400 15px var(--body)}
.gfilter input::placeholder{color:var(--mut2)}
.gfilter input:focus{outline:2px solid var(--cyan);outline-offset:2px;
  border-color:var(--cyan)}
.gcount{margin:14px 0 0;font:500 12px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan2)}
.gnote{margin:8px 0 0;color:var(--mut2);font-size:13px;line-height:1.5}
.term[hidden],.gband[hidden]{display:none}
@media (max-width:900px){
  .gherowrap{grid-template-columns:minmax(0,1fr)}
  .gfilter{margin-top:28px;max-width:420px}
}

/* ---------- group bands (alternating bg / bg2, full width) ---------- */
section.gband{padding:var(--sec-sm) 0;scroll-margin-top:140px;border-top:1px solid var(--line2)}
/* the first domain carries the weight; the rest are a steady list */
section.gband:first-of-type{padding-top:var(--sec)}
.gband.alt{background:linear-gradient(180deg,var(--panel) 0,var(--bg2) 140px)}
.bhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--g3);flex-wrap:wrap;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--line2)}
.bhead .kicker{margin-bottom:12px}
.bhead h2{font:600 clamp(23px,2.6vw,30px)/1.2 var(--disp);letter-spacing:-.01em}

/* ---------- term cards ---------- */
.termgrid{display:grid;grid-template-columns:1fr;gap:var(--g3);align-items:stretch}
@media (min-width:701px){.termgrid{grid-template-columns:1fr 1fr}}
.term{background:linear-gradient(180deg,rgba(18,33,61,.55),rgba(12,24,48,.35));border:1px solid var(--line);border-radius:var(--rad);padding:24px 26px;transition:border-color .25s}
.term:hover{border-color:rgba(76,196,255,.4)}
/* The headword used to be 13px against a 14.5px definition -- SMALLER AND LIGHTER than
   its own body copy. In a glossary the headword is the entire navigational structure of
   the page; at 13px all 40 cards read as identical grey rectangles with nothing to scan.
   Now it is larger than the definition, in --cyan2 for the extra step against body copy
   already sitting in --mut, and underscored so the eye can run down the column. (A-D6) */
.term h3{font:500 16px/1.3 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--cyan2);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.term p{font-size:14.5px;line-height:1.68;color:var(--prose)}

/* ---------- closing CTA ---------- */
.gcta{padding:88px 0;text-align:center}
.gcta h2{font:600 clamp(24px,2.8vw,34px)/1.2 var(--disp);letter-spacing:-.01em;margin:16px 0 12px}
.gcta p{color:var(--mut);max-width:52ch;margin:0 auto 28px}