/* Jichun desktop responsive fixes */

@media screen and (min-width: 769px) and (max-width: 1640px) {

  /* Shared navigation and footer */
  .head-main,
  .footer-main {
    width: calc(100% - 48px);
    max-width: 1640px;
  }

  .artist-item {
    margin-left: clamp(12px, 7vw, 230px);
  }

  .works-item {
    margin-right: clamp(12px, 7vw, 230px);
  }

  .menu-part {
    min-width: 0;
    width: 100%;
  }

  /* Artist pages */
  .artist-nav,
  .page-main,
  .pub-main {
    min-width: 0;
  }

  .artist-nav {
    width: 100%;
  }

  .album-list,
  .video-part,
  .works-list,
  .works-part {
    width: calc(100% - 48px);
    max-width: 1640px;
    box-sizing: border-box;
  }

  .public-main,
  .intro-content,
  .adv-desc {
    width: calc(100% - 48px);
    max-width: 882px;
    box-sizing: border-box;
  }

  .album-item {
    width: calc((100% - 48px) / 4);
    margin-right: 16px;
    box-sizing: border-box;
  }

  .album-item:nth-child(4n) {
    margin-right: 0;
  }

  .grid-item--width2 {
    width: 100%;
  }

  .fixed-main {
    width: min(960px, 90vw);
    max-height: 85vh;
  }

  /* Works detail */
  .detail-part {
    width: calc(100% - 64px);
    max-width: 1430px;
    gap: 32px;
  }

  .detail-picture {
    flex: 1.2;
    min-width: 0;
  }

  .detail-info {
    flex: 0.8;
    min-width: 0;
    padding-left: 0;
  }

  .dtpic-main {
    width: 100%;
  }

  .info-body {
    margin-top: clamp(24px, 8vw, 170px);
  }
}

/* Narrow desktop and tablet browser widths */
@media screen and (max-width: 1279px) {

  /* Navigation: keep all five items on one row */
  .head-main {
    width: calc(100% - 24px);
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
  }

  .head-row {
    display: none;
  }

  .head-main .nav-item,
  .head-main .nav-mu,
  .head-main .nav-home {
    float: none;
    width: auto;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
  }

  .head-main .nav-home {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .head-main .nav-home a {
    font-size: clamp(18px, 2.6vw, 30px);
  }

  .head-main .email-item {
    overflow-wrap: anywhere;
  }

  .head-main .works-item,
  .head-main .artist-item {
    white-space: nowrap;
  }

  /* Dropdown: prevent right-side categories being clipped */
  .menu-part {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .menu-main {
    width: calc(100% - 32px);
    max-width: 880px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    box-sizing: border-box;
  }

  .menu-col {
    float: none;
    width: auto;
    min-width: 0;
  }

  .menu-ul,
  .cate-ul {
    float: none;
    width: 100%;
  }

  .cate-ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cate-ul li {
    float: none;
    width: auto;
    text-align: right;
    min-width: 0;
  }

  .cate-ul a,
  .menu-ul a {
    overflow-wrap: anywhere;
  }
}

/* Very narrow desktop windows */
@media screen and (max-width: 767px) {
  .head-main .email-item {
    display: none;
  }

  .head-main .nav-home a {
    font-size: clamp(16px, 4vw, 24px);
  }

  .menu-main {
    grid-template-columns: 1fr 1fr;
  }
}