/*
 * Repair layer over the anchor's look (LOOK-WATCH-SPEC 2.2, "the original is not the model of its own
 * faults"). Loaded after site.css. The palette, the fonts and the order of the menu stay as they were.
 */

/* contrast: grey #CCCCCC on blue #3366CC is 3.3:1, below 4.5:1 for body text; the same grey made
   lighter reaches 4.6:1 */
body, a, a:active, .snd { color: #eeeeee; }
a:visited { color: #ffffff; }
body.home { color: #eeeeee; }

/* focus is visible on the blue page */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* phones and narrow windows: the anchor was a fixed 837 px table and did not fit a phone */
@media (max-width: 860px) {
  body { margin: 0; }
  table.head, table.head tbody, table.head tr, table.head td { display: block; width: auto; }
  header.top { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 6px 64px; }
  .head p { margin: 0; }
  .logo img { width: 162px; height: 60px; }
  /* the menu folds under a button so the header stays under a quarter of the screen */
  .menu-btn { display: block; position: absolute; right: 10px; top: 10px; width: 48px; height: 44px; padding: 0; border: 1px solid #eeeeee; border-radius: 4px; background: transparent; color: #ffffff; font: bold 11px Arial, Helvetica, sans-serif; cursor: pointer; }
  .menu-btn span { display: block; width: 22px; height: 2px; margin: 4px auto; background: #ffffff; }
  table.frame, table.frame > tbody, table.frame > tbody > tr, td.side, td.main { display: block; width: auto; }
  td.side { padding: 0; }
  #menu { display: none; padding: 4px 0 8px; background: #2b58b3; border-top: 1px solid #5f86d6; border-bottom: 1px solid #5f86d6; }
  #menu.open { display: block; }
  td.side p { margin: 0; font-size: 16px; }
  td.side p:first-child { display: none; }
  td.side p a { display: block; padding: 11px 20px; }
  td.main { padding: 8px 14px 12px; }
  .main img, .main .cover-big { max-width: 100%; height: auto; }
  #menu { width: auto; }
  table.cds { display: block; width: auto; }
  table.cds > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); justify-content: center; gap: 0 14px; }
  table.cds tr { display: contents; }
  .cds td { display: block; width: auto; }
  .cds img { width: 100%; height: auto; }
  .cds .sp { display: none; }
  table.info, table.info tbody { display: block; width: auto; }
  .info tr { display: flex; }
  .info .k { width: 92px; flex: none; white-space: normal; }
  table.lk, table.lk tbody, table.lk tr, table.lk th, table.lk td { display: block; width: auto; }
  .lk .sk { width: auto; max-width: 260px; }
  .lk thead { display: none; }
  .lk td::before { content: attr(data-head); display: block; margin: 0 -8px; padding: 4px 0; background: #ffffff; color: #003366; font-size: 18px; font-weight: bold; }
  table.thumbs { display: block; width: auto; }
  table.thumbs > tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
  table.thumbs tr { display: contents; }
  .thumbs td { display: block; width: auto; }
  .thumbs img { width: 100%; height: auto; margin: 0 0 6px; }
  .slides-wrap { width: auto; padding: 0; }
  .slides { width: 100%; height: auto; aspect-ratio: 800 / 544; }
  .slide img { width: 100%; height: auto; }
  .slides-prev, .slides-next { opacity: 1; width: 44px; height: 44px; margin-top: -22px; }
  .slides-dots { text-align: center; }
  .slides-dots button { width: 20px; height: 20px; margin: 0 6px; }
  .slides-dots { padding: 6px 0; }
  .foot { width: auto; padding: 0 14px; }
  .foot p { margin: 4px 0; }
  .snd { max-width: 100%; box-sizing: content-box; height: 28px; }
  .snd-btn { width: 28px; height: 28px; }
  .snd-btn::before { left: 9px; top: 7px; }
  .snd-btn.is-playing::before { left: 8px; top: 8px; }
  .home-top .enter a { display: inline-block; padding: 10px 18px; }
  .crumbs { font-size: 13px; }
  .crumbs a { display: inline-block; padding: 8px 2px; }
  .next a, .top-link a, .lyrics-link { display: inline-block; padding: 10px 4px; }
  form.contact .send { width: 100%; padding: 12px; }
}
/* logo-missing, menu-phone-missing: the anchor's home was a splash page (player, "enter", slideshow)
   with no name and no menu; the hand-written name and one line of the menu are added above the slideshow */
.home-menu { margin: 0 auto 14px; max-width: 800px; font: bold 13px Arial, Helvetica, sans-serif; text-align: center; }
.home-menu a { display: inline-block; padding: 4px 7px; }
@media (max-width: 860px) {
  .home-logo img { width: 180px; height: 67px; }
  .home-menu { font-size: 15px; padding: 0 6px; }
  .home-menu a { padding: 8px 6px; }
  /* small-text: notes, credits and captions of the anchor were 10-13 px; at least 14 px on a phone */
  .small, .tiny, .crumbs, .review .who, .lyrics .by, .top-link, .foot, .lb-data { font-size: 15px; }
  .snd { font-size: 13px; }
}