/* Mobile-only layout prototype. Desktop keeps existing markup and styling. */
.gg-mobile-nav, .gg-mobile-backdrop {display:none}
@media screen and (max-width:680px){
 html,body{min-width:0!important;overflow-x:hidden!important;}
 body{margin:0!important;background:#fff!important;}
 /* Header occupies its own opaque white area, above the picture. */
 .gg-header{display:none!important;}
 .gg-mobile-nav{display:block!important;position:relative;z-index:3;background:#fff;
   box-sizing:border-box;padding:16px 19px 20px 19px;width:100%;
   font-family:Arial,sans-serif;font-size:8pt;line-height:14px;font-weight:normal;}
 .gg-mobile-brand{margin-bottom:13px;}
 .gg-mobile-nav-row{display:flex;flex-wrap:nowrap;align-items:center;gap:9px;margin-top:6px;}
 .gg-mobile-nav a, .gg-mobile-nav a:link, .gg-mobile-nav a:visited,
 .gg-mobile-nav a:hover, .gg-mobile-nav a:focus{
   font-family:Arial,sans-serif!important;font-size:8pt!important;line-height:14px;
   font-weight:normal!important;color:#000!important;text-decoration:none!important;
   background-color:#eee!important;display:inline-block;padding:0 2px;white-space:nowrap;
 }
 /* Fixed image is kept visible behind NEWS, DATES and ALBUM as page scrolls.
    It never covers the header (which has its own white background). */
 .gg-mobile-backdrop{display:block!important;position:fixed;z-index:0;inset:0;
   pointer-events:none;background:#fff url('img/bg3.jpg') center center / cover no-repeat;}
 body > div[align=center]{position:relative;z-index:1;margin:0!important;padding:22px 10px 16px;box-sizing:border-box;max-width:100%!important;}
 .gg-panel{display:block!important;width:100%!important;max-width:100%!important;
   height:auto!important;min-height:0!important;position:relative;
   background-image:none!important;background-color:transparent!important;}
 .gg-panel>tbody,.gg-panel>tbody>tr:first-child{display:block!important;}
 .gg-panel>tbody>tr:not(:first-child){display:none!important;}
 .gg-panel>tbody>tr:first-child>td{display:block!important;float:none!important;width:100%!important;
   max-width:100%!important;height:auto!important;padding:0!important;box-sizing:border-box;}
 .gg-panel>tbody>tr:first-child>td:first-child,
 .gg-panel>tbody>tr:first-child>td:last-child{display:none!important;}
 .gg-panel>tbody>tr:first-child>td:nth-child(2),
 .gg-panel>tbody>tr:first-child>td:nth-child(3),
 .gg-panel>tbody>tr:first-child>td:nth-child(4){display:block!important;flex:none!important;min-width:0!important;}
 .gg-news,.gg-dates,.gg-album{width:100%!important;max-width:100%!important;
   border-collapse:separate!important;border-spacing:0!important;}
 .gg-panel .text-arial11normal:not(.text-arial11bckg){font-family:Arial,sans-serif;
    font-size:13px!important;line-height:18px!important;word-spacing:normal!important;}
 .gg-news tr,.gg-dates tr,.gg-album tr{height:auto!important;}
 .gg-news td,.gg-dates td,.gg-album td{height:auto!important;max-width:100%!important;
   padding:0 5px 10px 5px!important;vertical-align:top!important;overflow-wrap:anywhere;}
 .gg-news tr:first-child td,.gg-dates tr:first-child td,.gg-album tr:first-child td{padding-bottom:10px!important;}
 .gg-news tr:nth-child(2),.gg-dates tr:nth-child(2),.gg-album tr:nth-child(2){display:none!important;}
 /* Keep the desktop's grey label size and typeface EXACTLY 8 pt. */
 .gg-news strong.text-arial11bckg,.gg-dates strong.text-arial11bckg,
 .gg-album strong.text-arial11bckg {font:normal 8pt/14px Arial,sans-serif!important;
    background-color:#eee!important;color:#000!important;}
 /* Approx. one line between section blocks; avoid artificial long holes. */
 .gg-news,.gg-dates{margin-bottom:4px!important;}
 .gg-album{margin-bottom:0!important;}
 .gg-news a,.gg-dates a,.gg-album a{color:#000!important;text-decoration:none!important;}
 .gg-album a.gg-album-title-link{font-weight:normal!important;}
 .gg-album iframe{width:207px!important;height:207px!important;display:block;border:0!important;max-width:100%;}
}
@media screen and (max-width:680px){
 .gg-panel > tbody > tr:first-child > td:nth-child(3),
 .gg-panel > tbody > tr:first-child > td:nth-child(4){width:calc(100vw - 20px)!important;min-width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;flex:0 0 auto!important;}
 .gg-panel .gg-dates, .gg-panel .gg-album{display:table!important;width:100%!important;min-width:100%!important;max-width:100%!important;table-layout:auto!important;}
}

@media screen and (max-width:680px){
 /* The image is carried by a fixed single layer, visible behind all three sections.
    Header is opaque and outside this layer. */
 .gg-panel[bgcolor], .gg-panel, .gg-news, .gg-dates, .gg-album{
   background-color:transparent!important;
 }
 /* No extra gap between end of NEWS and beginning of DATES, etc. */
 .gg-panel>tbody>tr:first-child>td:nth-child(2),
 .gg-panel>tbody>tr:first-child>td:nth-child(3){margin-bottom:0!important;}
 .gg-panel .gg-news tr:last-child td{padding-bottom:4px!important;}
 .gg-panel .gg-dates tr:last-child td{padding-bottom:4px!important;}
}

/* Preview: restore original 3px padding above/below the letters. */
@media screen and (max-width:680px) {
  .gg-mobile-nav a, .gg-mobile-nav a:link, .gg-mobile-nav a:visited {
    padding:3px 3px!important; line-height:14px!important;
    box-decoration-break:clone; -webkit-box-decoration-break:clone;
  }
  .gg-mobile-nav-row {margin-top:5px; align-items:center;gap:7px;}
}

/* Preview: restore original 3px padding above/below the letters. */
@media screen and (max-width:680px) {
  .gg-mobile-nav a, .gg-mobile-nav a:link, .gg-mobile-nav a:visited {
    padding:3px 3px!important; line-height:14px!important;
    box-decoration-break:clone; -webkit-box-decoration-break:clone;
  }
  .gg-mobile-nav-row {margin-top:5px; align-items:center;gap:7px;}
}

/* V97: one compact line on mobile; at narrow phone widths only the nav line
   scrolls horizontally, never the entire page. VIMEO stays in desktop nav. */
@media screen and (max-width:680px) {
  .gg-mobile-nav{padding:16px 15px 18px!important;}
  .gg-mobile-brand{margin-bottom:16px!important;line-height:18px!important;}
  .gg-mobile-nav-row{display:flex!important;flex-wrap:nowrap!important;align-items:center;
    gap:4px!important;margin-top:0!important;
    max-width:100%;width:100%;overflow-x:auto!important;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
    white-space:nowrap;padding:2px 0 4px;box-sizing:border-box;}
  .gg-mobile-nav a,.gg-mobile-nav a:link,.gg-mobile-nav a:visited {
    display:inline-block!important;white-space:nowrap!important;
    font:normal 8pt/14px Arial,sans-serif!important;
    padding:3px 2px!important;background:#eeeeee!important;
    box-sizing:border-box;vertical-align:middle!important;
    text-decoration:none!important;color:#000!important;
  }
  .gg-mobile-nav-row a{flex:0 0 auto!important;}
  .gg-news,.gg-dates {margin-bottom:0!important;}
  .gg-panel>tbody>tr:first-child>td:nth-child(2),
  .gg-panel>tbody>tr:first-child>td:nth-child(3){margin-bottom:0!important;}
  .gg-panel .gg-news tr:last-child td,
  .gg-panel .gg-dates tr:last-child td {padding-bottom:10px!important;}
}
/* V97 final alignment: identical separation of mobile NEWS/DATES and
   DATES/UZU OTO. The legacy blank div after DATES added an extra 18px. */
@media screen and (max-width:680px) {
  .gg-mobile-nav-row {gap:2px!important;}
  .gg-mobile-nav-row a {padding-left:1px!important;padding-right:1px!important;}
  .gg-panel>tbody>tr:first-child>td:nth-child(3)>div {display:none!important;}
}

/* V97 follow-up: mobile header labels must have equal grey insets ABOVE
   and BELOW their text, not the 16pt fixed-height inherited from text.css.
   Preserve the original Arial 8pt, #EEE grey, and one-row link layout. */
@media screen and (max-width:680px) {
  .gg-mobile-brand a,
  .gg-mobile-nav-row a {
    height:auto !important;
    min-height:0 !important;
    box-sizing:content-box !important;
    line-height:14px !important;
    padding-top:3px !important;
    padding-bottom:3px !important;
    vertical-align:baseline !important;
  }
  /* DATES ended too close to the UZU OTO album heading; give that
     transition a comparable visual pause to the NEWS/DATES transition. */
  .gg-panel > tbody > tr:first-child > td:nth-child(4) {
    margin-top:10px !important;
  }
}

/* V98: approved shorter mobile PRESS KIT label allows readable spacing. */
@media screen and (max-width:680px) {
 .gg-mobile-nav-row {gap:10px!important;}
 .gg-mobile-nav-row a {padding-left:2px!important;padding-right:2px!important;}
}

/* V100 approved: NEWS -> ALBUM -> DATES ONLY on mobile.
   The historical 3-column desktop layout and markup stay unchanged. */
@media screen and (max-width:680px) {
  .gg-panel > tbody > tr:first-child {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .gg-panel > tbody > tr:first-child > td:nth-child(2) { order:1 !important; }
  .gg-panel > tbody > tr:first-child > td:nth-child(4) { order:2 !important; }
  .gg-panel > tbody > tr:first-child > td:nth-child(3) {
    order:3 !important;
    margin-top:20px !important;
  }
}

/* V100c: approved final mobile section rhythm. Only the first NEWS page
   leads with ALBUM; archive pages keep NEWS first. Both NEWS and DATES have
   the same 16px preceding section gap. Desktop keeps its three columns. */
@media screen and (max-width:680px) {
  .gg-panel > tbody > tr:first-child > td:nth-child(2) {
    order:1!important;
    margin-top:0!important;
  }
  .gg-panel > tbody > tr:first-child > td:nth-child(4) {
    order:2!important;
    margin-top:10px!important;
  }
  .gg-panel > tbody > tr:first-child > td:nth-child(3) {
    order:3!important;
    margin-top:16px!important;
  }
  body.gg-mobile-album-first .gg-panel > tbody > tr:first-child > td:nth-child(4) {
    order:1!important;
    margin-top:0!important;
  }
  body.gg-mobile-album-first .gg-panel > tbody > tr:first-child > td:nth-child(2) {
    order:2!important;
    margin-top:16px!important;
  }
}

/* After V100c: compact the NEWS pager itself rather than shrinking the
   agreed 16px section gap before DATES. No changes to desktop or NEWS copy. */
@media screen and (max-width:680px) {
  .gg-panel .gg-news tr:last-child td {padding-bottom:0!important;}
  .gg-news-pager a {padding-top:2px!important;padding-bottom:2px!important;}
}