/* Shared page navigation; other page elements keep their existing styles. */
.page-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  max-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #444;
}

.page-nav a,
.page-nav [aria-current="page"] {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: #3B2A20;
  text-decoration: none;
  white-space: nowrap;
}

.page-nav a { font-weight: 600; }
.page-nav [aria-current="page"] { font-weight: 600; }
.page-nav a:hover { text-decoration: underline; }
.page-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.record-page-header .page-nav { color: #59514a; }
.record-page-header .page-nav .home-return-button {
  font-weight: 700;
  letter-spacing: .12em;
}

/* Preserve the records page HOME's existing offset and surrounding space. */
.records-page .page-nav {
  position: relative;
  top: 72px;
  left: max(0px, calc((100% - 1100px) / 2));
  width: min(1100px, 100%);
  margin-bottom: 20px;
  color: #3B2A20;
  font-size: 14px;
}
.records-page .page-nav .back-link {
  position: static;
  margin: 0;
  font-weight: 550;
}

.preference-page-header .page-nav { margin-bottom: 24px; }
.preference-page-header .page-nav .back-link {
  margin: 0;
  font-weight: 700;
  letter-spacing: .12em;
}

@media (max-width: 700px) {
  .page-nav { gap: 8px 14px; }
}