/* ============================================================
   Unique East Art — ARTIST portfolio detail page
   Layout measured from the original at a 1440px viewport
   (hero 207→1103, info 1103→1552, gallery 1552→5092,
    paging 5092→5162, footer 5162→5477)

   The masonry grid, item and caption base styles are shared with the
   DESIGN page and live in style2.css ("ARTWORK GALLERY"). This file
   only holds the portrait page's own geometry and caption skin.
   ============================================================ */

/* ============ HERO PORTRAIT (1440 × 896 cover) ============ */
.artist-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 896;
  object-fit: cover;
  object-position: 50% 38%;
}

/* ============ INFO (name 397 + bio 864, 61px gutter) ============ */
.artist-info {
  display: grid;
  grid-template-columns: 397fr 864fr;
  column-gap: 61px;
  align-items: start;
  padding: 22px 59px 24px;
  background: #fff;
}
.artist-name {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 57.6px;
  margin: 0;
  color: #000;
}
.artist-bio p {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 28.8px;
  margin: 0 0 28.8px;
  color: #000;
}
.artist-bio p:last-child { margin-bottom: 0; }

/* ============ PAGING (previous / next, 70px band) ============ */
.artist-paging {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 70px;
  padding: 15px 67px 15px 68px;
  box-sizing: border-box;
  background: #fff;
}
.artist-paging a,
.artist-paging span {
  display: flex;
  align-items: center;
  width: 80px;
  height: 40px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 22.4px;
  text-decoration: none;
  color: #000;
}
.artist-paging a:hover { text-decoration: underline; }
/* 无上/下一篇时用 span 占位：置灰且不可点击；有链接时保持黑色可点击 */
.artist-paging span { color: rgba(16, 16, 16, .3); cursor: default; }
.artist-paging .is-next { justify-content: flex-end; }

/* ============ ARTIST LIST PAGE (/artist) ============ */
.artists-page { padding-top: 60px; }
.artists-page .artist-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px min(6vw, 80px);
  padding: 0 12px;
}
.artists-page .artist-item { flex: none; }
.artists-empty { font-family: var(--sans); font-size: 16px; padding: 0 12px 40px; }

@media (max-width: 1199px) {
  .artists-page .artist-list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
  .artists-page .artist-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .artists-page { padding-top: 32px; }
  .artists-page .artist-list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Footer styles are shared in style2.css */

/* ============ RESPONSIVE ============ */
@media (max-width: 1199px) {
  .artist-info { column-gap: 40px; padding: 22px 24px 24px; }
  .artist-name { font-size: 40px; line-height: 48px; }
  .artist-bio p { font-size: 16px; line-height: 25.6px; margin-bottom: 25px; }
}

@media (max-width: 991px) {
  .artist-info { grid-template-columns: 1fr; column-gap: 0; padding: 18px 24px 24px; }
  .artist-name { font-size: 32px; line-height: 38px; margin-bottom: 14px; }
  .artist-hero img { aspect-ratio: 1440 / 700; }
  .artist-paging { padding: 15px 24px; }
}

@media (max-width: 767.98px) {
  .artist-info { padding: 13px 11px 20px; }
  .artist-name { font-size: 20px; line-height: 24px; margin-bottom: 6px; }
  .artist-bio p { font-size: 14px; line-height: 22.4px; margin-bottom: 14px; }
  .artist-hero img { aspect-ratio: 390 / 378; }
  .artist-paging { padding: 15px 16px; }
}