/* Work detail: Overview precedes the visual.
 * Body and section headings match zigzag-pages.css (.zz-kotobun-text p /
 * .zz-kotobun-title), including its 768px mobile breakpoint.
 * The project title and Contact keep their display-heading hierarchy.
 */
.zz-work-detail {
  --zz-work-text-size: clamp(.88rem, .9722222222vw, .94rem);
  --zz-work-heading-size: clamp(1.05rem, 1.3333333333vw, 1.2rem);
  --zz-work-heading-spacing: .02em;
}
.zz-work-detail { width: min(88.2vw, 80rem); margin-inline: auto; padding-top: clamp(8rem, 15.28vw, 13.75rem); color: #262627; }
.zz-work-detail__title { margin: 0; font-family: var(--ja_sans); font-size: clamp(1.625rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.6; letter-spacing: .02em; overflow-wrap: anywhere; }
.zz-work-detail__nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: clamp(2rem, 3.89vw, 3.5rem); font-family: var(--en_sans); font-size: .875rem; }
.zz-work-detail__nav a { display: inline-flex; gap: .65rem; align-items: center; padding-block: .5rem; }
.zz-work-detail__section { margin-top: clamp(3.5rem, 6.25vw, 5.625rem); scroll-margin-top: calc(var(--hh, 6rem) + 2rem); }
.zz-work-detail__split { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 4.5%; }
.zz-work-detail__label { margin: 0; font-family: var(--en_sans); font-size: var(--zz-work-heading-size); font-weight: 700; line-height: 2.4; letter-spacing: var(--zz-work-heading-spacing); }
.zz-work-detail__copy { min-width: 0; font-size: var(--zz-work-text-size); line-height: 2.4; overflow-wrap: anywhere; }
.zz-work-detail__copy p { margin: 0 0 1.4em; -webkit-text-stroke: .02vw; }
.zz-work-detail__copy .zz-work-detail__lead { margin: 0 0 1.3em; font-size: var(--zz-work-heading-size); font-weight: 700; line-height: 2.4; letter-spacing: var(--zz-work-heading-spacing); -webkit-text-stroke: 0; }
.zz-work-detail__external { display: inline-flex; gap: 1.5em; align-items: center; padding-block: .5rem; border-bottom: 1px solid rgba(38,38,39,.35); font-weight: 700; font-size: .875rem; }
.zz-work-detail__hero { margin: clamp(1.5rem, 2.22vw, 2rem) 0 0; }
.zz-work-detail__hero img, .zz-work-detail__media img { display: block; width: 100%; height: auto; }
.zz-work-detail__media { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 1.667vw, 1.5rem); margin-top: clamp(1rem, 1.667vw, 1.5rem); }
.zz-work-detail__media[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zz-work-detail__media[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zz-work-detail__media figure { margin: 0; min-width: 0; }
.zz-work-detail__media figcaption { margin-top: .7em; color: #6f727b; font-size: .8125rem; line-height: 1.9; }
.zz-work-detail__body { width: 61.5%; margin: clamp(2rem, 4.167vw, 3.75rem) 0 0 auto; }
.zz-work-detail__body h2 { font-size: var(--zz-work-heading-size); font-weight: 700; line-height: 2.4; letter-spacing: var(--zz-work-heading-spacing); }
.zz-work-detail__credit { margin: 0; font-size: .875rem; line-height: 2; }
.zz-work-detail__credit > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 1rem; margin-bottom: .65rem; }
.zz-work-detail__credit dt { font-family: var(--en_sans); font-weight: 700; }
.zz-work-detail__credit dd { margin: 0; overflow-wrap: anywhere; }
.zz-work-detail__related .zz-work-card-title { margin-top: 1rem; }
.zz-work-detail__related .zz-work-cards { gap: 2.5rem 1.5rem; }
.zz-work-detail__related .zz-work-card-media img { aspect-ratio: 3 / 2; }
.zz-work-detail__back { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid rgba(38,38,39,.14); margin-top: clamp(4rem, 8.333vw, 7.5rem); padding-block: 2.5rem; font-size: .875rem; }
.zz-work-detail__back a { display: inline-flex; gap: 1rem; align-items: center; min-height: 2.75rem; }
.zz-work-detail__contact { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 2rem; padding: clamp(3rem, 5.556vw, 5rem) 0; border-top: 1px solid rgba(38,38,39,.14); }
.zz-work-detail__contact h2 { margin: 0; font-family: var(--en_sans); font-size: clamp(2rem, 3.333vw, 3rem); font-weight: 700; }
.zz-work-detail__contact p { margin: 0; font-size: var(--zz-work-text-size); line-height: 2.4; }
.zz-work-detail__contact > a { display: inline-flex; justify-content: space-between; gap: 3rem; border-radius: 999px; padding: 1rem 1.75rem; background: #262627; color: white; font-size: .875rem; }
.zz-work-detail a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.zz-works-index > .zz-kotobun-body { width: min(88.2vw, 80rem); }
.zz-works-index .zz-work-cards--list { margin-top: 0; }
@media (max-width: 768px) {
  .zz-work-detail { --zz-work-text-size: .83rem; --zz-work-heading-size: .94rem; --zz-work-heading-spacing: 0; width: 90vw; padding-top: 8rem; }
  .zz-work-detail__split { grid-template-columns: 1fr; gap: 1.5rem; }
  .zz-work-detail__body { width: 100%; }
  .zz-work-detail__section { margin-top: 3rem; }
  .zz-work-detail__media[data-columns="2"], .zz-work-detail__media[data-columns="3"] { grid-template-columns: 1fr; }
  .zz-work-detail__credit > div { grid-template-columns: 5.5em minmax(0, 1fr); }
  .zz-work-detail__contact { grid-template-columns: 1fr; gap: 1.5rem; }
  .zz-work-detail__contact > a { justify-self: start; }
  .zz-work-detail__back { margin-top: 3.5rem; }
  .zz-works-index > .zz-kotobun-body { width: 90vw; }
}