/* ============================================================
   filter track — what the kit does not already give the index pages.

   The bar, the chips, the reveal row, `.filtered`, `.noHits` and the
   row spark are all kit.css's. Everything here is the small amount of
   fitting an A–Z index needs on top of them: room for the bar over a
   list of 3,242 rows, the count cell that now carries a spark beside
   its number, what a re-ordered list does to its letter headings, and
   the A–Z strip while it is not the order on screen.

   Tokens are reference.css's own: void #04060F, starlight #EFF3FF,
   faint #8E99C2, gold #E8B873, aqua #5BE3D5, Cinzel display, Outfit
   body. No new colours are introduced here.
   ============================================================ */

/* The bar sits under the section heading it belongs to, close enough to
   read as part of it, and is the thing that scrolls with the list. */
.js .fbar[data-list]{margin:10px 0 4px}

/* A label and the chips it names are one run, so a bar that wraps never
   leaves "Only" stranded at the end of a line away from Women and
   Illustrated. A run wraps inside itself when it has to. */
.fRun{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.fRun .fLbl{margin-left:2px}

/* The count cell of an index row now holds the spark and the number, in
   that order, right-aligned against the edge of the list. */
.ixRow i{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;
  font-variant-numeric:tabular-nums}
.ixRow .rspark{opacity:.85}
.ixRow:hover .rspark{opacity:1}
.ixRow b mark{background:rgba(232,184,115,.22);color:var(--starlight);
  border-radius:3px;padding:0 1px}

/* Re-ordered: the alphabet is no longer the order on screen, so its
   headings step aside — still in the document, saying nothing untrue. */
.fList.reord > .sec{display:none}
.letters.off a{opacity:.32}
.letters.off a:hover{opacity:.7;border-color:rgba(232,184,115,.45)}

/* The empty state: the same voice as the rest of the page, and a way back
   that is a control, not a dead end. */
.noHits p{margin:0 0 8px}
.noHits p:last-of-type{margin-bottom:2px}

/* `styles.css` — the landing site's sheet, which every reference page loads
   first — already owns the class name `.reveal`, for a scroll-in animation
   that starts at `opacity:0` and is lit by `script.js`. Reference pages do
   not load `script.js`, so the kit's reveal *button*, a different thing with
   the same name, would never be seen. It says here that it is already here.
   (This collision is not mine alone: it hides every kit reveal row on these
   pages. The fix belongs in kit.css — reported, not reached into.) */
.noHits .reveal{opacity:1;transform:none}

@media(max-width:700px){
  /* the number stays; the picture of it does not earn the width here */
  .ixRow .rspark{display:none}
  .js .fbar[data-list]{padding:9px 10px;gap:6px}
  /* each run takes a line of its own, its label above its chips: the rules
     between them would only be hairlines hanging off the end of a row */
  .js .fbar[data-list] .fRun{flex-basis:100%;gap:6px}
  .js .fbar[data-list] .fRun .fSep{display:none}
  .js .fbar[data-list] .fRun .fLbl{flex-basis:100%;margin:2px 0 0 2px}
}

/* ---- the illustrated band's stepper ----
   It rides the section heading: title, rule, then the controls. Script-only,
   like every control in the kit — without JavaScript the bar is not drawn,
   the heading keeps its own rule, and the whole gallery simply shows. */
.bandHead{flex-wrap:wrap}
.bandHead .secRule{flex:1;min-width:40px;height:1px;
  background:linear-gradient(90deg,rgba(232,184,115,.4),transparent)}
/* the heading's own rule would sit after the controls; this one is drawn
   between the title and them instead */
.bandHead::after{display:none}
.bandBar{display:none}
.js .bandBar{display:inline-flex;align-items:center;gap:9px;flex:none}
.bandCount{font-size:11px;letter-spacing:.06em;text-transform:none;
  color:var(--faint);font-family:var(--font-body);font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bandStep{width:32px;height:32px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid rgba(232,184,115,.4);background:none;color:var(--gold);
  font:400 17px var(--font-body);line-height:1;
  display:flex;align-items:center;justify-content:center}
.bandStep:hover{background:rgba(232,184,115,.12);border-color:var(--gold)}
.bandStep:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.bandBar .facet{text-transform:none;letter-spacing:.02em;
  font-family:var(--font-body);font-weight:400}
/* scoped to `.js` (set inline in the head, so nothing flashes): with no
   script the whole gallery shows, which is the honest fallback */
.js .artTile.beyond{display:none}
/* paging scrolls the heading back to the top, so it has to clear the sticky
   filter bar above it (54px offset + the bar's own two rows). Below 900px
   that bar is static, so only the slim top bar is in the way. */
.bandHead{scroll-margin-top:170px}
.artBand{scroll-margin-top:180px}

@media(max-width:900px){
  .bandHead,.artBand{scroll-margin-top:86px}
}
@media(max-width:760px){
  .bandHead .secRule{display:none}
  .js .bandBar{flex-basis:100%;margin-top:10px}
  .bandBar .facet{margin-left:auto}
}