/* Added 2026-10 for the Cloudflare move. The page markup is the original
   FrontPage HTML; desktop rendering is unchanged. Everything below the
   font fallback only applies on small screens. */

/* Verdana fallback for devices without it (Android) */
body, td, th, a, font[face="Verdana"], .style2, .style3, .style4 { font-family: verdana, sans-serif; }

@media (max-width: 800px) {
  body { margin: 0; }
  img { max-width: 100%; height: auto; box-sizing: border-box; }
  a { overflow-wrap: anywhere; }

  /* Page frame: fixed 760px / sidebar table becomes a single column */
  table.tp-frame { display: block; width: auto !important; border: 2px solid #0066CC; }
  table.tp-frame > tbody,
  table.tp-frame > tbody > tr,
  table.tp-frame > tbody > tr > td { display: block; width: auto !important; border: 0; }
  table.tp-frame > tbody > tr:first-child { display: flex; flex-direction: column; background: #0066CC; }

  /* Wordmark on top, centered */
  td.tp-head { order: -1; text-align: center; padding: 8px 8px 0; }

  /* Sidebar turned sideways: sketch on the left, the four buttons stacked on the right */
  td.tp-nav { display: flex !important; align-items: center; justify-content: center; gap: 4%; padding: 6px 8px 10px; }
  td.tp-nav p { margin: 0; }
  td.tp-nav p:first-child { flex: 0 1 40%; max-width: 169px; }
  td.tp-nav p:nth-of-type(2) { flex: 0 1 52%; max-width: 170px; }
  td.tp-nav p:nth-of-type(2) a,
  td.tp-nav p:nth-of-type(2) img { display: block; }
  td.tp-nav p:nth-of-type(2) br,
  td.tp-nav p:last-child { display: none; }

  td.tp-main { padding: 4px 0 16px; }
  td.tp-main > div > center > table { width: 94% !important; }

  /* Readable body text (FrontPage size="2" is ~13px) */
  td.tp-main font[size="2"], td.tp-main .style3, td.tp-main .style4,
  td.tp-main li { font-size: 15px; line-height: 1.5; }
  td.tp-main .style1 .style3 { font-size: 13px; } /* home page dates line */

  /* Home: CD listings stack */
  table.tp-cds, table.tp-cds > tbody, table.tp-cds > tbody > tr,
  table.tp-cds > tbody > tr > td { display: block; width: auto !important; }
  table.tp-cds > tbody > tr > td { padding: 6px 0; }

  /* Photo grids: one photo per line, full width (phones load the full-size originals via srcset) */
  #table1, #table1 > tbody, #table1 > tbody > tr, #table1 > tbody > tr > td,
  #AutoNumber1, #AutoNumber1 > tbody, #AutoNumber1 > tbody > tr, #AutoNumber1 > tbody > tr > td {
    display: block; width: auto !important; }
  #table1 > tbody > tr > td, #AutoNumber1 > tbody > tr > td { padding: 6px 0; text-align: center; }
  #table1 img[srcset], #AutoNumber1 img[srcset] { width: 100%; max-width: 450px; height: auto; }

  /* Links list: less indent */
  menu { padding-left: 22px; }
  menu li { margin-bottom: 6px; }
}

@media (max-width: 560px) {
  /* Stack the floated photos instead of squeezing text beside them */
  img[align="left"], img[align="right"], img[style*="float"] {
    float: none !important; display: block; margin: 12px auto !important;
  }
}