/* GayStash — pager. Shared by the listing pages (index, collections). */

/* pagination — real links. ?page=47 is crawlable and linkable; infinite
   scroll is neither, and cold search traffic is most of the audience. */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:26px 14px 12px}
.pg{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 13px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--text-2);
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.pg:hover{background:var(--surface-3);color:var(--text)}
.pg-on,.pg-on:hover{background:var(--accent);color:var(--accent-ink)}
.pg-off{opacity:.35;pointer-events:none}
.pg-gap{color:var(--text-3);font-weight:700;padding:0 3px}
.pg-of{margin-left:auto;font-size:13px;font-weight:600;color:var(--text-3)}
.pg-of b{color:var(--text-2);font-variant-numeric:tabular-nums}
/* at phone width the numbers stop earning their place: prev, where you are, next */
@media (max-width:559px){
  .pg:not(.pg-prev):not(.pg-next),.pg-gap{display:none}
  .pg-of{margin:0;order:0;flex:1;text-align:center}
  .pg-prev{order:-1}.pg-next{order:1}
}