/* Minimal compatibility and responsive rules, original visuals retained. */
/* Only targeted technical layout rules. The original typeface, spacing and colour system remain. */
.gg-panel { background-repeat: no-repeat; background-position: left top; }
.gg-panel > tbody > tr:nth-child(2) > td {font-size:0 !important;line-height:0 !important;height:1px !important;padding:0 !important;}
.gg-news a, .gg-dates a, .gg-album a {overflow-wrap:break-word;}
@media (max-width: 680px) {
  body { margin: 8px 6px; }
  .gg-header { width:100% !important; height:auto; max-width:621px; }
  .gg-header > tbody > tr > td:nth-child(2),
  .gg-header > tbody > tr > td:nth-child(2) > table {width:100% !important;}
  .gg-header > tbody > tr > td:nth-child(1),
  .gg-header > tbody > tr > td:nth-child(3) {width:0 !important; padding:0; font-size:0;}
  .gg-header > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) {display:flex; flex-wrap:wrap; gap:0 10px;}
  .gg-header > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td {display:block; width:auto!important; padding-bottom:2px;}
  .gg-panel {display:block; width:100%!important;max-width:608px; height:auto; background-size:100% auto; }
  .gg-panel > tbody {display:block;}
  .gg-panel > tbody > tr:first-child { display:flex; flex-wrap:wrap; }
  .gg-panel > tbody > tr:first-child > td:first-child,
  .gg-panel > tbody > tr:first-child > td:last-child {display:none;}
  .gg-panel > tbody > tr:first-child > td:nth-child(2) {display:block;width:100%!important;}
  .gg-panel > tbody > tr:first-child > td:nth-child(2) > div > table {width:100%!important;}
  .gg-panel > tbody > tr:first-child > td:nth-child(3) {display:block;width:130px!important; flex:0 0 130px;}
  .gg-panel > tbody > tr:first-child > td:nth-child(4) {display:block;width:calc(100% - 130px)!important;flex:1;min-width:0;}
  .gg-panel > tbody > tr:first-child > td:nth-child(4) > table {width:100%!important;}
  .gg-panel > tbody > tr:not(:first-child) {display:none;}
}
@media (max-width: 380px) {
  .gg-panel > tbody > tr:first-child > td:nth-child(3),
  .gg-panel > tbody > tr:first-child > td:nth-child(4) {width:100%!important;flex:0 0 100%;}
}

/* The old colour declaration lacks a #; explicitly preserve its intended light grey. */
.text-arial11bckg, .text-arial11bckgRed { background-color:#EEEEEE; }
/* Compress ONLY vertical space on the two slowly-changing columns enough to
   keep bg3.jpg's single 600px image boundary intact. */
.gg-dates, .gg-album { border-spacing:10px 8px; }

/* In NEWS (including historical entries) a link is always bold. */
.gg-news a {font-weight:bold;}

/* Historical links were black and bold, including visited links. */
.gg-news a, .gg-news a:visited, .gg-news a:hover,
.gg-dates a, .gg-dates a:visited, .gg-dates a:hover {
  color:#000000;
  font-weight:bold;
}

/* Original text-link design: black bold lettering, no underlines.
   Includes normal, visited, hover and focus states, without changing fonts. */
.gg-header a, .gg-header a:visited, .gg-header a:hover, .gg-header a:focus,
.gg-news a, .gg-news a:visited, .gg-news a:hover, .gg-news a:focus,
.gg-dates a, .gg-dates a:visited, .gg-dates a:hover, .gg-dates a:focus,
.gg-album a, .gg-album a:visited, .gg-album a:hover, .gg-album a:focus {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
}

/* v9: NAVIGATION LABELS MUST HAVE THE SAME WEIGHT AS NEWS / DATES. */
.gg-header a, .gg-header a:link, .gg-header a:visited,
.gg-header a:hover, .gg-header a:focus, .gg-header a:active {
  font-family:Arial,sans-serif; font-size:8pt; font-weight:normal !important;
  color:#000; text-decoration:none; background-color:#eeeeee;
}
/* Standalone article pages retain the original single background image at the top.
   No repetition or scaling: long texts continue on the white page background. */
.gg-article {background-color:#fff !important; background-repeat:no-repeat !important;
  background-position:left top !important; background-size:auto !important;}
/* Conservative support for small screens: desktop dimensions unchanged. */
@media (max-width:680px) {
  .gg-article { width:100% !important; max-width:600px; table-layout:fixed;}
  .gg-article > tbody > tr:first-child > td:nth-child(2) {min-width:0; width:auto !important;}
  .gg-article > tbody > tr:first-child > td:nth-child(2) table {width:100% !important;}
  .gg-article img {max-width:100%; height:auto;}
}
/* HIS Voice magazine scan was 8px wider than the 600px article background. */
@media (min-width:681px) {
  .gg-article img[src$="his_voice.jpg"] {max-width:572px; height:auto;}
}


/* V94: Article text uses the whole available mobile width. The third
   outer article cell is an empty spacer; at narrow widths it was
   occupying half the available width. Desktop markup remains unchanged. */
@media screen and (max-width:680px) {
  .gg-article > tbody > tr:first-child > td:nth-child(3) {display:none !important;}
  .gg-article > tbody > tr:first-child > td:nth-child(2) {
    width:auto !important; max-width:none !important;
  }
  .gg-article > tbody > tr:first-child > td:nth-child(2) > div {
    width:100% !important; max-width:100% !important;
  }
  .gg-article > tbody > tr:first-child > td:nth-child(2) > div > table {
    width:100% !important; max-width:100% !important;
  }
  .gg-article td {overflow-wrap:break-word;}
}

@media screen and (max-width:680px) {
  .gg-article, .gg-article > tbody, .gg-article > tbody > tr:first-child {
    display:block!important; width:100%!important; max-width:100%!important; height:auto!important;
  }
  .gg-article > tbody > tr:first-child > td:not(:nth-child(2)) {display:none!important;}
  .gg-article > tbody > tr:first-child > td:nth-child(2) {
    display:block!important; box-sizing:border-box; width:100%!important; max-width:100%!important;
  }
  .gg-article > tbody > tr:not(:first-child) {display:none!important;}
}

/* V95: archive article navigation on 320–680px screens.
   The previous flex wrapping left BANDCAMP alone on a third row in
   archive interviews and reviews. Keep the original labels and their
   desktop styling, but align the six links as two rows of three. */
@media screen and (max-width:680px) {
  .gg-header > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) {
    display:grid !important;
    grid-template-columns:max-content max-content max-content;
    justify-content:start;
    column-gap:10px;
    row-gap:6px;
  }
  .gg-header > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(7) {
    display:none !important;
  }
}

/* V96: Long archive articles use the original, unscaled 800x600 bg3.jpg.
   When a page overflows its image, columns provide responsive page turns
   instead of allowing content to run onto a blank white background. The
   original HTML remains as a no-JavaScript fallback. */
.gg-article.gg-pager-source-hidden { display:none !important; }
.gg-paged-article[hidden] { display:none !important; }
.gg-paged-article {
  width:600px; max-width:100%; height:600px;
  box-sizing:border-box; margin:0 auto;
  padding:10px 14px 15px 14px;
  background:#fff url('img/bg3.jpg') no-repeat left top;
  font-family:Arial,sans-serif; font-size:8pt;
  line-height:14px; color:#000; word-spacing:1pt;
  text-align:left;
}
.gg-paged-article-heading {min-height:14px; margin-bottom:17px; line-height:14px;}
.gg-paged-article-flow {
  width:100%; height:500px; box-sizing:border-box;
  overflow-x:hidden; overflow-y:hidden;
  column-gap:0; column-fill:auto;
  font-family:Arial,sans-serif; font-size:8pt; line-height:14px;
}
.gg-paged-article-flow > p:first-child {margin-top:0;}
.gg-paged-article-flow p {max-width:100%;}
.gg-paged-article-flow img {max-width:100%; height:auto;}
.gg-paged-article-nav {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; margin:9px 0 0; font:normal 8pt/14px Arial,sans-serif;
}
.gg-paged-article-nav a,
.gg-paged-article-nav a:visited,
.gg-paged-article-nav a:hover {color:#000; text-decoration:none; font-weight:bold;}
.gg-paged-article-nav a[hidden] {visibility:hidden;display:inline;}
.gg-paged-article-count {color:#000;}
/* Yeezus copy: retain the article's original content and background while
   restoring the shared grey heading and side insets seen on other pages. */
.gg-article.gg-yeezus-review > tbody > tr:first-child > td:nth-child(2) > div {
  box-sizing:border-box; padding:4px 14px 8px 14px;
}
.gg-article.gg-yeezus-review > tbody > tr:first-child > td:nth-child(2) > div > p:first-child {
  margin:4px 0 14px;
}
.gg-article.gg-yeezus-review > tbody > tr:first-child > td:nth-child(2) > div > p:first-child strong {
  background-color:#eeeeee;
}
.gg-article.gg-yeezus-review > tbody > tr:first-child > td:nth-child(2) > div > p {overflow-wrap:break-word;}
@media(max-width:680px) {
  .gg-paged-article {padding-left:12px;padding-right:12px;}
}

/* V98: restore per-word historical NEWS bolding; only originally bold text
   is wrapped in <strong> in content/news.html and generated HTML. */
.gg-news a, .gg-news a:link, .gg-news a:visited,
.gg-news a:hover, .gg-news a:focus, .gg-news a:active {
  font-weight:normal !important;
}
.gg-news a strong, .gg-news a b {font-weight:bold!important;}
/* User-approved compact arrows, pager and count aligned right on every article. */
.gg-paged-article-nav{justify-content:flex-end!important;gap:9px!important;}
.gg-paged-article-nav a {display:inline-block;min-width:20px;text-align:center;}

/* V98: compact, right-aligned, automatically numbered NEWS pagination. */
.gg-news-pager{display:flex;justify-content:flex-end;align-items:center;gap:9px;white-space:nowrap;font:normal 8pt/14px Arial,sans-serif;}
.gg-news-pager a,.gg-news-pager a:visited,.gg-news-pager a:hover{color:#000;text-decoration:none;font-weight:bold;}
.gg-news-pager a,.gg-news-pager .gg-pager-disabled{display:inline-block;min-width:22px;text-align:center;}
.gg-news-pager .gg-pager-disabled{visibility:hidden;}
.gg-news-pager .gg-page-count{font-weight:normal;}
@media screen and (max-width:680px) {.gg-news-pager a{padding:5px 1px;}}

/* Post-V98 approved desktop index navigation: uniform 20px between labels.
   Historic 8pt Arial and #EEE backgrounds are unchanged. Mobile has its own header. */
@media screen and (min-width:681px) {
  .gg-header tr.gg-desktop-nav-row {display:flex;gap:20px;}
  .gg-header tr.gg-desktop-nav-row > td {
    display:block;width:auto!important;flex:0 0 auto;padding:0;white-space:nowrap;
  }
}