.formats-page h1 { max-width: 18ch; }

.formats-page .article-content section + section {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.formats-table {
  width: 100%;
  margin: 1.5rem 0 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1rem;
  line-height: 1.45;
}

.formats-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.formats-table .format-column { width: 43%; }
.formats-table .support-column { width: 19%; }

.formats-table th,
.formats-table td {
  padding: 0.9rem 0.65rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  text-align: center;
}

.formats-table th:first-child {
  padding-left: 0;
  text-align: left;
}

.formats-table thead th {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.formats-table tbody th { font-weight: 600; }
.formats-table tbody td { font-weight: 600; }

.format-extension {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 400;
}

.formats-table .support-na,
.formats-table .support-no {
  color: var(--muted);
  font-weight: 400;
}

.formats-page .formats-key {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.formats-page .format-note {
  margin-top: 1.25rem;
  font-size: 0.95rem;
}

.formats-page [id] { scroll-margin-top: 1.5rem; }

@media (max-width: 42rem) {
  .formats-table { font-size: 0.88rem; }

  .formats-table .format-column { width: 40%; }
  .formats-table .support-column { width: 20%; }

  .formats-table th,
  .formats-table td { padding: 0.8rem 0.25rem; }

  .formats-table thead th,
  .format-extension { font-size: 0.75rem; }
}