/* 作品個人頁：沿用畫家介紹的長文卡片，統一作品圖與資料排列。 */
.work-detail-page .page-hero {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.work-detail-page .article-layout,
.work-detail-card {
  min-width: 0;
}

.work-detail-page .article-layout {
  padding-bottom: 0;
}

.work-page-meta {
  margin-top: 0.65rem;
  color: rgb(84, 86, 79);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.work-page-artist {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.35rem 0 0;
  color: var(--title-ink);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 900;
}

.work-page-artist a {
  color: inherit;
  text-decoration: none;
}

.work-page-artist a:hover,
.work-page-artist a:focus-visible {
  color: #ec652d;
}

.work-page-artist span {
  color: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.work-detail-visual {
  width: min(60%, 42rem);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.work-detail-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: rgba(247, 242, 223, 0.5);
  box-shadow: var(--shadow-soft);
}

.work-detail-visual figcaption {
  margin-top: 0.75rem;
  color: rgb(84, 86, 79);
  font-size: 0.85rem;
  line-height: 1.75;
  text-align: center;
}

.work-detail-supporting-visual {
  width: min(72%, 32rem);
  margin-top: 2rem;
}

.work-detail-card .essay-section,
.work-detail-card .essay-notes,
.work-detail-actions {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.work-detail-card .essay-notes a {
  overflow-wrap: anywhere;
}

.work-detail-actions {
  justify-content: center;
  margin-block: clamp(24px, 3.5vw, 44px) clamp(76px, 9vw, 112px);
  text-indent: 0;
}

.work-detail-actions .button,
.work-detail-actions .button.secondary {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--mountain-dark);
  border-radius: 5px;
  color: var(--mountain-dark);
  background: transparent;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.work-detail-actions .button:hover,
.work-detail-actions .button:focus-visible,
.work-detail-actions .button.secondary:hover,
.work-detail-actions .button.secondary:focus-visible {
  color: #fff;
  background: var(--mountain-dark);
}

@media (max-width: 760px) {
  .work-detail-visual {
    width: min(88%, 28rem);
  }

  .work-detail-supporting-visual {
    width: min(82%, 24rem);
  }
}

@media (max-width: 520px) {
  .work-detail-visual {
    width: 100%;
    margin-bottom: 1.75rem;
  }

  .work-detail-actions {
    display: grid;
    gap: 0.75rem;
  }

  .work-detail-actions .button {
    width: 100%;
  }
}