/* Mobile-friendly constraints added during the static-site migration.
   Keeps images and fixed-width tables from overflowing narrow screens.
   No effect on desktop, where this content already fits the viewport. */
img {
  max-width: 100%;
  height: auto;
}
table {
  max-width: 100%;
}

/* Content-type marker icons in the archive tables (article/movie/photo/
   graph/letter) are fixed 30x30 GIFs with no size attributes. Pin them so
   the responsive img rule above can't scale them down when a table column
   gets squeezed (e.g. by a long unbreakable URL in the adjacent text). */
img[src$="article.gif"],
img[src$="movie.gif"],
img[src$="picture.gif"],
img[src$="graphs.gif"],
img[src$="letter.gif"] {
  width: 30px;
  height: 30px;
  max-width: none;
}

/* Top navigation bar (INTRODUCTION / SCIENCE / POLITICS / LINKS).
   The four one-word cells can't wrap, so at their normal size they push
   the table wider than a phone screen. On small viewports only, break the
   single row into a 2x2 grid so the labels stay full-size instead of
   shrinking to fit. Desktop rendering is untouched. */
@media (max-width: 600px) {
  table.mobilenav,
  table.mobilenav tbody {
    display: block;
    width: 100%;
  }
  table.mobilenav tr {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  table.mobilenav td {
    flex: 1 1 45%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 4px;
  }
}