/* glossary — index hero with A–Z strip + letter-grouped hairline ledger */
.ghero{max-width:var(--wide); margin-inline:auto; padding:clamp(40px,7vh,88px) var(--gut) 0}
.ghero__in{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr); gap:clamp(28px,5vw,96px); align-items:start; padding-bottom:clamp(32px,5vh,56px)}
.ghero h1{font-size:clamp(2.4rem,5.2vw,4.6rem); font-weight:800; letter-spacing:-.04em; text-wrap:balance; margin-bottom:clamp(18px,2.6vh,28px); animation:fadeUp .9s var(--ease) both}
.ghero .lead{animation:fadeUp .9s var(--ease) .12s both}
.ghero .readout{animation:fadeUp .9s var(--ease) .2s both}
.ghero .readout .big{font-size:clamp(3.2rem,6vw,5.4rem); font-weight:700}
/* The strip's own height, per breakpoint. DECLARED BEFORE the media queries that override it:
   it lived below them for one round, and at equal specificity the later rule wins, so all four
   per-breakpoint values were dead and every letter link used the 48px value at every width. */
:root{--az-h:48px}
/* A–Z strip: 26 cells, dimmed where empty */
/* The strip is a sibling of the shells now (so `position:sticky` has scroll range at all),
   which also means it inherits none of their geometry -- it spanned the full viewport while
   the h1, the readout and every ledger row held the shell's own edges. It carries the shell
   measurements itself. */
.az,.azcue{max-width:calc(min(100%, var(--wide)) - 2 * var(--gut)); margin-inline:auto}
/* base: the scroll cue belongs to the <=480 one-row strip ONLY. Written with its only
   declaration inside that media query and no base rule, it rendered as an unstyled span --
   the words 'scroll ->' in the body face, above the fold, at every width from 481 up. */
.azcue{display:none}
.az{display:grid; grid-template-columns:repeat(26,1fr); gap:1px; background:var(--line-struct); border:1px solid var(--line-struct); border-radius:var(--radius-frame); overflow:hidden; position:sticky; top:var(--rail-h); z-index:5}
.az a,.az span{display:flex; align-items:center; justify-content:center; height:48px; background:var(--bg-2); font-size:13px; letter-spacing:.04em}
.az a{color:var(--txt); font-weight:500; transition:background .2s,color .2s}
.az a:hover{background:var(--bg-3); color:var(--sig)}
/* A1-10: DESIGN-SYSTEM.md says letters with no terms are 'dimmed, not removed'. Painted in
   --line-struct they measured 1.5:1 and were removed. Absence is now carried by the GROUND
   (--bg against the live cells' --bg-2), which leaves the letter itself legible. */
.az span{color:var(--dim); background:var(--bg)}

.gshell{max-width:var(--wide); margin-inline:auto; padding:clamp(40px,6vh,80px) var(--gut) clamp(56px,8vh,110px)}
/* A2-16: this stopped 265px short of the right edge that the readout above it and the
   ledger below it both hold, so it aligned with nothing on the page. */
.gfig{max-width:none}
.gfig img{aspect-ratio:21/8; object-fit:cover}
.gnote{max-width:var(--measure); margin:clamp(24px,3vh,36px) 0 clamp(40px,6vh,72px); font-size:15px}
.gnote a{color:var(--sig); border-bottom:1px solid rgba(133,224,255,.35)}
/* letter groups */
.gl{display:grid; grid-template-columns:minmax(120px,.22fr) minmax(0,1fr); gap:clamp(16px,3vw,48px); padding-top:clamp(28px,4vh,44px); border-top:1px solid var(--line-struct)}
.gl + .gl{margin-top:clamp(28px,4vh,44px)}
.gl h2{font-size:clamp(2.4rem,4vw,4rem); font-weight:800; letter-spacing:-.05em; line-height:.85; color:var(--txt-2); position:sticky; top:calc(var(--rail-h) + 64px); align-self:start}
.ledger{margin:0}
.ledger > div{display:grid; grid-template-columns:minmax(15ch,.26fr) minmax(0,1fr); gap:clamp(16px,2.4vw,40px); padding:20px 0; border-bottom:1px solid var(--line-struct); scroll-margin-top:calc(var(--rail-h) + 72px)}
.ledger > div:first-child{padding-top:0}
.ledger dt{font-size:15px; font-weight:500; letter-spacing:.01em; color:var(--txt); white-space:normal; overflow-wrap:break-word; line-height:1.45; padding-top:.05em}
.ledger dt a{color:inherit}
.ledger dt a:hover{color:var(--sig)}
.ledger dd{margin:0; font-size:15px; line-height:1.65; color:var(--txt-2); max-width:78ch; text-wrap:pretty}
.ledger dd a{color:var(--sig); border-bottom:1px solid rgba(133,224,255,.35)}
.ledger > div:target dt{color:var(--sig)}
.gshell .caveat{margin-top:clamp(32px,5vh,56px)}
.gshell .caveat a{color:var(--sig)}

@media (max-width:1180px){
  :root{--az-h:99px}
  .ghero__in{grid-template-columns:1fr}
  /* C1-11: the strip STAYS sticky on mobile. This page is 14,000px at 390 and the strip was
     the only way to jump; switching it off left one shot at the index and then a scroll. */
  .az{grid-template-columns:repeat(13,1fr)}
  .gl{grid-template-columns:1fr; gap:16px}
  .gl h2{position:static; font-size:clamp(2.6rem,8vw,4rem)}
}
@media (max-width:720px){
  .ledger > div{grid-template-columns:1fr; gap:6px}
  .ledger dt{white-space:normal}
  :root{--az-h:91px}
  .az a,.az span{height:44px; font-size:12px}
}
.ghero .readout .row{border-bottom:0; padding-bottom:0}
@media (max-width:480px){
  /* C1-07: thirteen columns across a 350px content width gave 26px cells -- the page's
     only navigation, at half a thumb. Seven columns puts every cell over 46px. */
  .az{grid-template-columns:repeat(7,1fr)}
}

@media (max-width:480px){
  /* C2: the A-Z was a 7-column grid, so 26 letters made four rows -- 181px of sticky furniture
     under the rail, most of the last row empty. One scrolling row is 46px, keeps every letter
     reachable, and gives the page back 135px of screen. */
  :root{--az-h:46px}
  /* 1,169px of strip inside 349px of screen: it scrolls, so it says so. The mask and the
     mono cue are the pair this sheet already uses on wide tables -- reused, not invented. */
  .az{grid-template-columns:repeat(26,minmax(44px,1fr)); overflow-x:auto; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .az a,.az span{height:46px}
  .azcue{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim); padding:10px 0 6px}
}
/* Every letter link used to scroll its own group up behind the sticky strip. The offset has
   to track the strip's OWN height: 48px at 1181+, 99px at 1180 (two rows of 13 at 48px+gap),
   91px at 720 (two rows at 44px) and 46px at 480 (one scrolling row). A single constant is
   right at one breakpoint and wrong at the other three. --az-h carries it.
   (The 91/99 pair was transposed here for a round, and the comment outlived the fix. A
    comment that contradicts its code is worse than none -- the next editor believes it.) */
/* html{scroll-padding-top} already clears the rail; adding it again here overshot the
   target by well over a hundred pixels. This only has to clear the STRIP. */
.gl{scroll-margin-top:var(--az-h)}
.ledger > div{scroll-margin-top:var(--az-h)}