/* V35 — a quiet, editorial life gallery. */
.visual-grid {
  width: min(980px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

body .visual-grid .work-item {
  grid-column: span 1;
  height: auto;
}

.visual-grid .work-item img {
  height: auto;
  object-fit: contain;
}

.life {
  display: block;
  max-width: none;
  margin: 0;
  padding: 112px max(32px, calc((100vw - 1240px) / 2));
  background: #fbfaf7;
  border-top: 1px solid var(--line);
}

.life-header { max-width: 1240px; margin: 0 auto 80px; }
.life-header > span { color: #8a4d39; font: 600 10px/1 "Manrope", sans-serif; letter-spacing: .15em; }
.life-header h2 { margin: 16px 0 12px; color: #25342f; font: 600 clamp(38px, 4.5vw, 56px)/1.1 "Noto Serif SC", serif; letter-spacing: -.06em; }
.life-header p { margin: 0; color: #65736b; font: 15px/1.75 "Noto Serif SC", serif; }
.life-groups { max-width: 1240px; margin: 0 auto; }
.life-group + .life-group { margin-top: 88px; }
.life-group header { margin-bottom: 22px; }
.life-group h3 { margin: 0 0 5px; color: #25342f; font: 600 27px/1.2 "Noto Serif SC", serif; letter-spacing: -.04em; }
.life-group header p { margin: 0; color: #8a4d39; font: 600 10px/1.6 "Manrope", sans-serif; letter-spacing: .08em; }
.life-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.life-shot { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 14px; background: #efeee8; opacity: 0; filter: blur(4px); transform: translateY(20px); transition: opacity .72s ease, filter .72s ease, transform .72s ease; }
.life-group.is-visible .life-shot { opacity: 1; filter: blur(0); transform: translateY(0); }
.life-group.is-visible .life-shot:nth-child(2) { transition-delay: 100ms; }
.life-group.is-visible .life-shot:nth-child(3) { transition-delay: 200ms; }
.life-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .38s ease, filter .38s ease; }
.life-shot:has(img) { cursor: zoom-in; }
.life-gallery:has(.life-shot:hover) .life-shot:not(:hover) { opacity: .88; }
.life-shot:hover img { transform: translateY(-3px) scale(1.015); filter: brightness(1.04); }
.life-placeholder { display: grid; place-items: center; border: 1px dashed #c6c1b6; background: #f4f2ed; color: #9a958a; }
.life-placeholder span { font: 600 10px/1 "Manrope", sans-serif; letter-spacing: .14em; }

@media (max-width: 850px) {
  .visual-grid { width: 100%; }
  body .visual-grid .work-item { grid-column: span 1; }
  .life { padding: 84px 20px; }
  .life-header { margin-bottom: 60px; }
  .life-group + .life-group { margin-top: 72px; }
}

@media (max-width: 600px) {
  .visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .visual-grid .work-item { grid-column: span 1; }
  .life-gallery { grid-template-columns: 1fr; gap: 14px; }
  .life-shot { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .life-shot, .life-group.is-visible .life-shot { opacity: 1; filter: none; transform: none; transition: none; }
}