/* A flexible version of the original archive, with its existing artwork. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 12px auto;
  padding: 0 12px;
  max-width: 64rem;
  font-size: 16px;
  line-height: 1.45;
}
img { max-width: 100%; height: auto !important; }
hr { clear: both; }
#main_article { min-width: 0; }
#main_article > h1 { line-height: 1.15; }
.issue-heading { font-family: monospace; white-space: normal; }
.issue-heading img { vertical-align: middle; }
pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  font-size: 0.875rem;
  line-height: 1.35;
}
#main_article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
input[type=text], input[type=search], textarea { max-width: 100%; box-sizing: border-box; }
input[type=text], input[type=search], input[type=submit], button, select { font-size: 16px; }
a:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid #0000ee;
  outline-offset: 3px;
}
.magazine-grid { max-width: 100%; }
.magazine-grid td { padding: 0 8px 16px; }
@media (max-width: 640px) {
  body { margin: 8px auto; padding: 0 10px; overflow-wrap: break-word; }
  /* Index panels use old percentage widths that become too narrow on phones. */
  body > center > table, center > table[width] { width: 100%; }
  .magazine-grid, .magazine-grid tbody, .magazine-grid tr, .magazine-grid td {
    display: block;
    width: auto;
  }
  .magazine-grid td { padding: 0 0 20px; }
  input[type=submit], button, select { min-height: 36px; }
  h1, h2 { overflow-wrap: break-word; }
}
@media (max-width: 800px) {
  .cover-thumbnails, .comic-thumbnails,
  .cover-thumbnails tbody, .comic-thumbnails tbody,
  .cover-thumbnails tr, .comic-thumbnails tr { display: block; width: auto; }
  .cover-thumbnails td { display: inline-block; width: 45%; vertical-align: top; }
  .comic-thumbnails td { display: block; white-space: normal; }
  .comic-toolbar { display: block; max-width: 100%; overflow-x: auto; }
  .comic-toolbar pre { white-space: normal; }
}

/* Keep legacy indents and fixed rules inside small screens. */
hr { max-width: 100%; box-sizing: border-box; }
@media (max-width: 800px) {
  #main_article { overflow-wrap: anywhere; }
  #main_article table { margin-left: 0 !important; margin-right: 0 !important; }
  #main_article div[style*="margin-left"] { margin-left: 0 !important; }
  #main_article img[hspace] { margin-left: 0; margin-right: 0; }
  .compute-header, .compute-content,
  .compute-header tbody, .compute-content tbody,
  .compute-header tr, .compute-content tr,
  .compute-header td, .compute-content td {
    display: block; width: auto; box-sizing: border-box;
  }
  .compute-header td, .compute-content td { padding: 10px 0; }
}

.archive-search-link { font-size: .9em; margin: 6px 0 12px; }
.archive-scan-link { font-size: .9em; margin: 6px 0 12px; }