/* ── Font-size modifiers ── */
html.font-lg { font-size: 19px; }
html.font-xl { font-size: 22px; }
html.grayscale { filter: grayscale(1); }

/* ── A11Y BAR ── */
.a11y-bar {
  background: var(--pale);
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0.375rem 1.25rem;
  border-bottom: 1px solid rgba(var(--br-rgb), 0.07);
  min-height: 2.375rem;
}
.a11y-label {
  font-size: 0.75rem;
  color: var(--br);
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}
.a11y-btn {
  font-size: 0.75rem;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0.1875rem 0.5625rem;
  border-radius: 2px;
  border: 1px solid rgba(var(--br-rgb),0.22);
  background: none;
  color: var(--br);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  line-height: 1.4;
}
.a11y-btn:hover { background: rgba(var(--br-rgb),0.14); color: var(--br); border-color: var(--br); }
.a11y-btn.on { background: var(--br); color:#fff; border-color: var(--br); }
.a11y-sep { width: 0.0625rem; height: 0.875rem; background: rgba(var(--br-rgb),0.18); margin: 0 0.125rem; }

@media (min-width: 768px) {
  .a11y-bar { padding-right: 3rem; }
}
@media (min-width: 1024px) {
  .a11y-bar { display: flex; padding-right: 3.5rem; }
}
@media (min-width: 1280px) {
  .a11y-bar { padding-right: 4rem; }
}
@media (min-width: 1536px) {
  .a11y-bar { padding-right: 5rem; }
}