/*-------------------------
  for Works group
---------------------------*/
#wikimid {
  /*display: grid;*/
  display: flex;
  flex-direction: column;
}

#wikimid > * {
  order: 10;
}

#pagetitle {
  display: none;
}

#main-panel {
  max-width: var(--max-body-width);
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  align-items: end; 
  gap: 1em;
  column-gap: 2em;
  row-gap: 1em; 
  order: 1;
}

#main-image {
  cursor: pointer;
  flex-grow: 1;
  margin-bottom: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: visible;
}
/* lightbox modal for work page (only one work in a page) */
#main-image.lightbox {
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--modal-bg-color);
  text-align: center;
}

#main-image.lightbox img {
  animation: 1s fadein;
  max-width: 100vw;
  max-height: 100vh;
}
  
#basic-info {
  line-height: 1.5;
  /*float: right;*/
}
#basic-info h2 { 
  font-size: 200%;
  font-family: var(--image-title-font);
  font-weight: var(--thin-font-weight);
  color: var(--main-color);
  margin: 0 0 0.35em 0;
}
#basic-info p {
  margin: 0;
  color: var(--aside-color);
  font-size: smaller;
  line-height: 2;
}

#interpretation {
  order: 2;
  margin: 4em 0;
}

#supplement {
  margin-top: 4em;
  clear: right;
  font-size: smaller;
  order: 3;
}
#supplement dl {
  display: grid;
  grid-template: auto / 4em 1fr;
}

#supplement dt {
  color: var(--note-color);
}
#supplement dd {
  margin-left: 0 !important;
}
#supplement dd a.categorylink {
  margin-right: 0.5em;
}

.system-note {
  color: var(--aside-color) !important;
  font-size: 60%;
  text-align: right;
  /*position: absolute;
  right: 1rem;*/
  opacity: 0.6;
  max-width: unset !important;
  margin-top: 10em;
}

.category-link {
  display: none;
}

a, a:visited {
  color: var(--aside-color);
}

@media screen and (max-width:1439px) {
  #main-image img {
    /*
    width: 100%;
    max-width: calc( 100vw - 2rem );
    max-height: calc( 100vh - 2rem );
    */
    /* span full width of the screen */
    max-width: 100vw;
    max-height: 100vh;
  }
  #interpretation {
    margin: 0;
  }

}

  
@media screen and (min-width:1440px) {
  #wikimid {
    overflow: visible;
  }
  /* works page */
  /*
  #main-panel {
    width: calc( 100vw - ( 100vw - var(--max-body-width) ) / 2 - 2em );
    display: flex;
    align-items: end;
    margin-bottom: 2em;
  }
  #main-panel .vspace {
    display: none;
  }

  #main-image {
    flex: 1;
    margin: 0;
    height: inherit;
  }*/
  
  #main-image img {
    max-width: unset !important;
    max-height: calc( 100vh - 4rem );
    margin: auto;
    /*height: calc( 100vh - 4rem );*/
  }
  
  #main-image.lightbox img {
    max-width: calc( 100vw - 2em );
    max-height: calc( 100vh - 2em );
    max-height: calc( 100dvh - 2em );
  }
  
  #basic-info {
    flex-shrink: 0;
    max-width: 12em;
    margin: 0;
  }
  #supplement {
  }
}


@media screen and (min-width:1440px) and (orientation: portrait) {
  #main-panel {
    flex-direction: column;
  }
  #main-image {
    margin: 0 0 1em;
  }
  #main-image img {
    height: auto;
  }
  #basic-info {
    max-width: unset;
  }

}




/*
@media screen and (orientation: landscape) {
  #gallery-image {
    height: 80vh;
  }
}

@media screen and (min-width:801px) and (orientation: portrait) {
  #gallery-image {
    width: 80vw;
  }
}
*/

/* These affect the printed appearance of the web view (not the separate
** print view) of pages.  The sidebar and action links aren't printed. */
@media print {

}