/* Windows 95/98 desktop correction: neutral application chrome, not blue social cards. */

body.inner {
  --win-face: #c0c0c0;
  --win-light: #ffffff;
  --win-mid: #808080;
  --win-dark: #404040;
  --win-shadow: #000000;
  --win-title: #000080;
  --win-title-2: #1084d0;
  color: #000;
}

/* Neutral application/taskbar chrome. */
body.inner .site-header {
  background: rgba(192,192,192,.82) !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.42) !important;
  backdrop-filter: none !important;
}

body.inner .main-nav a,
body.inner .nav-toggle {
  color: #000 !important;
  background: rgba(192,192,192,.92) !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  text-shadow: 1px 1px 0 #fff !important;
}

body.inner .main-nav a:hover,
body.inner .main-nav a:focus-visible {
  color: #000 !important;
  background: #d4d0c8 !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  text-shadow: 1px 1px 0 #fff !important;
  outline: 1px dotted #000 !important;
}

body.inner .main-nav a[aria-current="page"] {
  color: #000 !important;
  background: #b8b8b8 !important;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark) !important;
  box-shadow: inset 1px 1px 0 #808080 !important;
}

body.inner .header-mark {
  color: #fff !important;
  background: #707070 !important;
}

/* One compact active title bar; blue is no longer the page-wide palette. */
body.inner .page-heading {
  margin-bottom: 16px !important;
}

body.inner .page-heading h1 {
  padding: 5px 10px 7px !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--win-title), var(--win-title-2)) !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 1px 1px 0 rgba(0,0,0,.48) !important;
  text-shadow: 1px 1px 0 #000 !important;
  backdrop-filter: none !important;
}

body.inner .page-heading .kicker,
body.inner .section-kicker,
body.inner .meta {
  color: #000 !important;
  background: rgba(192,192,192,.78) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  text-shadow: 1px 1px 0 #fff !important;
}

body.inner .page-heading p:last-child {
  padding: 7px 9px !important;
  color: #000 !important;
  background: rgba(192,192,192,.80) !important;
  border: 2px solid !important;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark) !important;
  text-shadow: none !important;
}

/* Remove the dark Facebook-like card treatment. */
body.inner .glass-panel,
body.inner .track-card,
body.inner .video-card,
body.inner .photo-card,
body.inner .song-copy,
body.inner .notes-grid article,
body.inner.page-contact .glass-panel {
  color: #000 !important;
  background: rgba(192,192,192,.78) !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.38) !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

body.inner .glass-panel p,
body.inner .glass-panel li,
body.inner .track-copy h2,
body.inner .track-copy p,
body.inner .video-copy h2,
body.inner .video-copy p,
body.inner .song-copy h1,
body.inner .song-copy p,
body.inner .notes-grid h2,
body.inner .notes-grid p,
body.inner .contact-grid h2,
body.inner .contact-grid p,
body.inner .contact-list li,
body.inner .photo-card figcaption {
  color: #000 !important;
  text-shadow: none !important;
}

body.inner .chrome-button,
body.inner .text-button,
body.inner .play-button {
  color: #000 !important;
  background: #c0c0c0 !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 1px 1px 0 #000 !important;
  text-shadow: 1px 1px 0 #fff !important;
}

body.inner .chrome-button:hover,
body.inner .text-button:hover,
body.inner .play-button:hover,
body.inner .chrome-button:focus-visible,
body.inner .text-button:focus-visible,
body.inner .play-button:focus-visible {
  color: #000 !important;
  background: #d4d0c8 !important;
  outline: 1px dotted #000 !important;
  outline-offset: -5px;
}

/* Music: Explorer-style directories with contiguous file rows. */
body.page-music .genre-directory {
  margin: 0 0 18px !important;
  padding: 3px !important;
  background: rgba(192,192,192,.82) !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.40) !important;
  backdrop-filter: none !important;
}

body.page-music .genre-titlebar {
  min-height: 28px !important;
  margin: 0 0 3px !important;
  padding: 3px 6px !important;
  background: linear-gradient(90deg, var(--win-title), var(--win-title-2)) !important;
}

body.page-music .genre-titlebar h2 {
  font-size: clamp(19px, 2.5vw, 28px) !important;
  letter-spacing: -.02em !important;
}

body.page-music .genre-titlebar span {
  padding: 1px 5px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}

body.page-music .genre-grid {
  display: block !important;
  padding: 4px !important;
  background: rgba(255,255,255,.22) !important;
  border: 2px solid !important;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark) !important;
}

body.page-music .genre-grid .track-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 0 !important;
  border-bottom: 1px solid #808080 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-music .genre-grid .track-card:last-child {
  border-bottom: 0 !important;
}

body.page-music .genre-grid .track-card:hover {
  background: rgba(0,0,128,.10) !important;
}

body.page-music .track-art {
  width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  border: 2px solid !important;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark) !important;
  background:
    repeating-linear-gradient(45deg, #b8b8b8 0 5px, #d0d0d0 5px 10px) !important;
}

body.page-music .track-art::after {
  color: #000080 !important;
  text-shadow: 1px 1px 0 #fff !important;
}

body.page-music .track-copy {
  padding: 3px 6px !important;
}

body.page-music .track-copy h2 {
  margin: 0 0 3px !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: clamp(20px, 2.5vw, 30px) !important;
}

body.page-music .track-copy .subtitle {
  margin: 3px 0 8px !important;
  color: #303030 !important;
}

/* Videos: one application window containing rows, not a feed of cards. */
body.page-videos .video-grid {
  display: block !important;
  padding: 4px !important;
  background: rgba(192,192,192,.82) !important;
  border: 2px solid !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.40) !important;
}

body.page-videos .video-card {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #808080 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.page-videos .video-card:last-child {
  border-bottom: 0 !important;
}

body.page-videos .video-card > button {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 8px !important;
  border: 0 !important;
  color: #000 !important;
  background: transparent !important;
  text-align: left !important;
}

body.page-videos .video-card > button:hover,
body.page-videos .video-card > button:focus-visible {
  color: #fff !important;
  background: #000080 !important;
  outline: 1px dotted #fff !important;
  outline-offset: -4px;
}

body.page-videos .video-card > button:hover h2,
body.page-videos .video-card > button:hover p,
body.page-videos .video-card > button:focus-visible h2,
body.page-videos .video-card > button:focus-visible p {
  color: #fff !important;
  text-shadow: none !important;
}

body.page-videos .video-poster {
  border: 2px solid !important;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark) !important;
}

body.page-videos .video-copy {
  padding: 4px !important;
  background: transparent !important;
}

body.page-videos .video-copy h2 {
  margin: 0 0 5px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Pictures: Explorer thumbnail windows. */
body.page-pictures .picture-section {
  margin: 0 0 20px !important;
  padding: 3px !important;
  background: rgba(192,192,192,.82) !important;
  border: 2px solid !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.40) !important;
}

body.page-pictures .picture-section > h2 {
  display: block !important;
  width: 100% !important;
  margin: 0 0 3px !important;
  padding: 4px 7px !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--win-title), var(--win-title-2)) !important;
  border: 0 !important;
  font-size: clamp(19px, 2.5vw, 28px) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

body.page-pictures .photo-grid,
body.page-pictures .motion-grid {
  padding: 8px !important;
  gap: 8px !important;
  background: rgba(255,255,255,.20) !important;
  border: 2px solid !important;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark) !important;
}

body.page-pictures .photo-card {
  margin: 0 0 8px !important;
  padding: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-pictures .photo-card:hover,
body.page-pictures .photo-card:focus-within {
  color: #fff !important;
  background: #000080 !important;
  border-color: #fff !important;
}

body.page-pictures .photo-card img {
  border: 1px solid #808080 !important;
}

body.page-pictures .photo-card figcaption {
  padding: 6px 3px 3px !important;
  color: #000 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center;
}

body.page-pictures .photo-card:hover figcaption,
body.page-pictures .photo-card:focus-within figcaption {
  color: #fff !important;
}

/* Contact: one application window with two inset panes. */
body.page-contact .contact-grid {
  gap: 0 !important;
  padding: 4px !important;
  background: rgba(192,192,192,.82) !important;
  border: 2px solid !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.40) !important;
}

body.page-contact .contact-grid article {
  position: static !important;
  padding: 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-contact .contact-grid article + article {
  border-left: 2px groove #fff !important;
}

body.page-contact .contact-grid article > h2 {
  position: static !important;
  inset: auto !important;
  margin: 0 0 12px !important;
  padding: 0 0 5px !important;
  color: #000 !important;
  background: transparent !important;
  border-bottom: 1px solid #808080 !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  text-shadow: none !important;
}

body.page-contact .contact-list li {
  color: #000 !important;
  border-bottom-color: #808080 !important;
}

/* Song pages: one player window plus traditional group boxes. */
body.page-song .song-shell {
  gap: 0 !important;
  padding: 4px !important;
  background: rgba(192,192,192,.82) !important;
  border: 2px solid !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.40) !important;
}

body.page-song .song-art-large,
body.page-song .song-copy {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-song .song-art-large {
  border-right: 2px groove #fff !important;
}

body.page-song .notes-grid {
  gap: 10px !important;
  padding: 10px !important;
  background: rgba(192,192,192,.82) !important;
  border: 2px solid !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.40) !important;
}

body.page-song .notes-grid article {
  padding: 18px !important;
  border: 2px groove #fff !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

body.inner .audio-dock {
  color: #000 !important;
  background: rgba(192,192,192,.90) !important;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light) !important;
  backdrop-filter: none !important;
}

@media (max-width: 850px) {
  body.page-videos .video-card > button {
    grid-template-columns: 120px 1fr !important;
  }
}

@media (max-width: 650px) {
  body.page-music .genre-grid .track-card {
    grid-template-columns: 58px 1fr !important;
  }

  body.page-music .track-art {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  body.page-videos .video-card > button {
    grid-template-columns: 1fr !important;
  }

  body.page-contact .contact-grid article + article {
    border-left: 0 !important;
    border-top: 2px groove #fff !important;
  }

  body.page-song .song-art-large {
    border-right: 0 !important;
    border-bottom: 2px groove #fff !important;
  }
}