/* ============================================
   ABOUT PAGE
   ============================================ */

.about {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  row-gap: 50px;
}

/* --- ARTIST NAME --- */
.about-artist-name {
  grid-column: 1 / -1;
  font-family: 'SimSong', serif;
  font-size: 18px;
  line-height: 18px;
  color: #000;
}

/* --- CONTACT --- */
.about-contact {
  grid-column: 1 / -1;
  font-family: 'SimSong', serif;
  font-size: 18px;
  line-height: 18px;
  color: #000;
}

/* --- SECTION --- */
.about-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  row-gap: 8px;
}

.about-section-title {
  grid-column: 1 / -1;
  font-family: 'Ubzidenz', sans-serif;
  font-size: 21px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #000;
  margin-bottom: 16px;
}

/* --- TEXT BLOCK PAIR --- */
.about-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: start;
}

.about-block {
  font-family: 'SimSong', serif;
  font-size: 18px;
  line-height: 18px;
  color: #000;
}

.about-block p {
  margin-bottom: 6px;
}

.about-block p:last-child {
  margin-bottom: 0;
}

.about-block.en { grid-column: 1 / 4; }
.about-block.zh { grid-column: 4 / 7; }

/* credits is a single full-width block */
.about-block.credits {
  grid-column: 1 / -1;
}

/* --- BIO / EXHIBITION ENTRY: hanging indent --- */
.about-entry {
  padding-left: 8ch;
  text-indent: -8ch;
}

/* --- BREAKPOINT 1: 4 columns --- */
@media (max-width: 1200px) {
  .about            { grid-template-columns: repeat(4, 1fr); }
  .about-section    { grid-template-columns: repeat(4, 1fr); }
  .about-pair       { grid-template-columns: repeat(4, 1fr); }

  .about-block.en   { grid-column: 1 / 3; }
  .about-block.zh   { grid-column: 3 / 5; }
}

/* --- BREAKPOINT 2: 2 columns --- */
@media (max-width: 600px) {
  .about            { grid-template-columns: repeat(2, 1fr); }
  .about-section    { grid-template-columns: repeat(2, 1fr); }
  .about-pair {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 8px;
  }

  .about-block.en,
  .about-block.zh {
    grid-column: 1 / 3;
  }

  /* Chinese block: hide the year, keep the hanging indent */
  .about-block.zh.about-entry .entry-year {
    visibility: hidden;
  }
}