/* Spacious comparisons, using the supplied titles and original photo sequence. */
#works > .section-top { margin-bottom: 42px; }
#works .work-project { position: relative; isolation: isolate; column-gap: clamp(16px, 2.5vw, 36px); row-gap: 22px; padding: 30px 0 44px; margin-bottom: 48px; border-bottom: 1px solid #d9ded5; }
#works .work-project:nth-child(even)::before { content: ""; position: absolute; inset: 0 -24px; background: #f5f7f2; border-radius: 8px; z-index: -1; pointer-events: none; }
#works .work-project-title { grid-row: 1; padding-left: 16px; border-left: 3px solid #a4b498; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1.6; letter-spacing: .08em; }
#works .work-project:has(.work-project-title) { row-gap: 28px; }
#works .work-project:has(.work-project-title) .work-stage { grid-row: 2; }
#works .work-stage-label { width: fit-content; padding: 6px 14px; margin-bottom: 12px; border-radius: 4px; color: #5d625a; background: #eceee9; font-size: 12px; line-height: 1.5; letter-spacing: .06em; }
#works .work-stage:nth-child(2) .work-stage-label { background: #e3ecdc; color: #43553a; }
#works .work-photo-button { border-radius: 6px; background: #f0f1ed; }
#works .work-photo-button img, #works .work-project-full-photo .work-photo-button img { object-fit: contain; }
#works .work-photo-button + .work-photo-button { margin-top: 18px; }
#works-more { padding: 14px 28px; border: 1px solid #cbd4c4; border-radius: 6px; background: #f5f7f2; }
#works-more:hover { background: #e7edde; }
@media (prefers-reduced-motion: no-preference) {
  .work-project .work-stage, .work-project .work-project-title { transition: opacity .8s ease, translate .8s ease; }
  .work-project .work-stage:nth-child(2) { transition-delay: .1s; }
  .work-project.motion-pending .work-stage { opacity: 0; translate: 0 12px; }
  .work-project.motion-pending .work-project-title { opacity: 0; translate: 0 6px; }
  .work-project:focus-within .work-stage, .work-project:focus-within .work-project-title { opacity: 1; translate: none; }
}
@media (max-width: 800px) {
  #works .work-project-list { margin-inline: 16px; }
  #works > .section-top { margin-bottom: 28px; }
  #works .work-project { column-gap: 10px; padding: 22px 0 30px; margin-bottom: 32px; }
  #works .work-project:nth-child(even)::before { inset-inline: -8px; }
  #works .work-project:has(.work-project-title) { row-gap: 22px; }
  #works .work-project-title { font-size: 24px; padding-left: 12px; }
  #works .work-stage-label { font-size: 12px; padding: 5px 12px; margin-bottom: 10px; }
  #works .work-photo-button + .work-photo-button { margin-top: 14px; }
}