/* ============================================================
   Accessibility page - layout & spacing
   ============================================================ */

.a11y-main {
  padding-top: var(--page-top-offset);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.a11y-container {
  max-width: 780px;
}

.a11y-main > .container > header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.a11y-main > .container > header h1 {
  margin-top: 0.75rem;
}

.a11y-main > .container > header .lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.a11y-main section {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.a11y-main section:last-of-type {
  border-bottom: none;
}

.a11y-main section h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.a11y-list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
  color: var(--color-text);
}

.a11y-list li {
  line-height: 1.65;
}

.a11y-list code {
  font-size: 0.88em;
}

/* Keep padding-top tied to the global --page-top-offset on every
   screen size so the page eyebrow is never hidden behind the fixed
   navbar. Only bottom padding is allowed to shrink on small screens. */
@media (max-width: 600px) {
  .a11y-main {
    padding-bottom: clamp(3rem, 10vw, 4rem);
  }
}