.filters{max-width:var(--maxw);margin:0 auto var(--gap-lg);display:flex;flex-wrap:wrap;
  gap:var(--gap-xs);align-items:center}
.ncard.lead{grid-template-columns:1.12fr 1fr;align-items:center;gap:var(--gap-lg);
  max-width:var(--maxw);margin:0 auto var(--gap-xl)}
.ncard.lead .media{aspect-ratio:16/10}
.ncard.lead .body{display:grid;gap:var(--gap-sm);min-width:0}
.ncard.lead h3{font-size:var(--t-display-sm);line-height:var(--lh-display)}
.ncard.lead p{font-size:var(--t-body-lg)}
.cat{display:inline-flex;align-items:center;align-self:start;padding:6px 13px;
  border-radius:var(--r-pill);justify-self:start;font-size:var(--t-label);font-weight:700;
  letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--ink-86);
  box-shadow:inset 0 0 0 1px var(--ink-hairline)}
/* Column gap is --gap-lg, not --gap-md. The cards' hover pane bleeds past
   the card box on both sides, and at --gap-md (28px at 1440) two panes
   overlapped by 12px — the raised card ran into its neighbour. The gap now
   has to clear twice the bleed with room to spare. */
.grid3{max-width:var(--maxw);margin:0 auto;display:grid;
  /* BOTH gaps reserve two neighbours' hover padding plus a real gap between
     them, so a raised card can never reach the one beside or below it. The row
     gap was left at --gap-lg when the padding went in and the vertical
     separation came out NEGATIVE — 43px of gap against 2x23px of padding, so
     the panes overlapped by 3px at 1440 and 5px at 900. Rows get --gap-lg
     rather than the columns' --gap-sm: stacked cards want more air between
     them than side-by-side ones, and there is no width pressure on that axis.
     --gap-md gave 28px of clear space at 1440 and Mufhim called for at least
     32; --gap-lg is the next rung and gives 43. */
  gap:calc(var(--ncard-pad) * 2 + var(--gap-lg)) calc(var(--ncard-pad) * 2 + var(--gap-sm));
  grid-template-columns:repeat(3,1fr)}
.grid3 .ncard{min-width:0;align-content:start}
.ncard[hidden]{display:none}
.pager{max-width:var(--maxw);margin:var(--gap-xl) auto 0;display:flex;
  align-items:center;justify-content:center;gap:var(--gap-xs);flex-wrap:wrap}
.pnum{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:0;border-radius:var(--r-pill);cursor:pointer;background:transparent;
  font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--ink-90);
  box-shadow:inset 0 0 0 1.5px var(--ink-hairline);
  transition:color var(--d-fast) var(--e-enter),box-shadow var(--d-fast) var(--e-enter)}
.pnum:hover{color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--ink-rim)}
.pnum[aria-current="page"]{color:var(--ink-on-light);background:var(--cream);
  box-shadow:inset 0 0 0 1.5px var(--cream)}
.pnum[disabled]{opacity:.38;pointer-events:none}
.pgap{font-family:var(--f-mono);font-size:13px;color:var(--ink-56);padding:0 var(--gap-xs)}
.empty{max-width:var(--maxw-text);margin:0 auto;text-align:center;
  padding:var(--pad-subband) 0;display:grid;justify-items:center;gap:var(--gap-sm)}
.empty p{margin:0;color:var(--ink-84)}
.empty .pill{margin-top:var(--gap-sm)}
.empty[hidden]{display:none}
@media (max-width:1100px){
  .grid3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .ncard.lead{grid-template-columns:1fr}
  .ncard.lead .media{aspect-ratio:16/9}
}
@media (max-width:560px){
  .grid3{grid-template-columns:1fr}
  .filters .count{margin-left:0;width:100%}
}