.pager {
  display: grid; grid-template-columns: minmax(5.5rem, 1fr) auto minmax(5.5rem, 1fr); align-items: center;
  gap: .8rem; width: min(30rem, 92vw); margin: 0 auto;
}
.pager__button {
  min-height: 2.45rem; padding: .48rem .82rem; border: 1px solid var(--line, rgba(205,164,85,.28)); border-radius: 999px;
  background: rgba(18,20,21,.84); color: rgba(239,220,176,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 1rem;
  transition: border-color .16s ease, background .16s ease, opacity .16s ease;
}
.pager__button:first-child { justify-self: end; }
.pager__button:last-child { justify-self: start; }
.pager__button span { margin: 0 .22rem; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .62rem; font-weight: 750; letter-spacing: .09em; }
.pager__button:hover:not(:disabled), .pager__button:focus-visible:not(:disabled) { border-color: rgba(220,174,78,.68); background: rgba(52,43,26,.88); outline: none; }
.pager__button:disabled { opacity: .24; cursor: default; }
.pager__button--turn:not(:disabled) { border-color: rgba(220,174,78,.46); background: rgba(47,39,24,.76); color: rgba(255,225,158,.96); }
.pager__index { min-width: 4.25rem; color: rgba(237,222,188,.66); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; text-align: center; letter-spacing: .10em; }
@media (prefers-reduced-motion: reduce) { .pager__button { transition: none; } }