.life-page .life-main { max-width: 1120px; margin: 0 auto; padding: 42px 24px 72px; }
.life-intro { margin-bottom: 30px; text-align: center; }
.life-page .life-intro h1 { margin: 0; color: #304f43; font-family: "Allura Signature", "Brush Script MT", cursive; font-size: 48px; font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.life-gallery { position: relative; }
.life-gallery.is-justified .life-photo { position: absolute; margin: 0; }
.life-photo, .life-placeholder { position: relative; margin: 0 0 6px; border-radius: 0; overflow: hidden; background: #e2ece2; }
.life-photo--portrait { aspect-ratio: 3 / 4; }
.life-photo--landscape { aspect-ratio: 4 / 3; }
.life-photo--square { aspect-ratio: 1; }
.life-photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.life-photo figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 24px; margin: 0; color: #fff; text-align: left; background: linear-gradient(transparent 15%, #173b2dde); overflow-y: auto; opacity: 0; transition: opacity .25s ease; }
.life-page .life-photo h2 { color: #fff; margin: 6px 0; font-size: 22px; line-height: 1.25; }
.life-photo figcaption p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
.life-photo time { font-size: 11px; letter-spacing: .07em; }
.life-photo-meta { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.life-photo-meta time { font-size: inherit; letter-spacing: 0; }
.life-photo:hover figcaption, .life-photo:focus figcaption, .life-photo:focus-within figcaption { opacity: 1; }

.life-photo:focus-visible { outline: 3px solid #477e6f; outline-offset: 4px; }
.life-caption-toggle { display: none; }
.life-empty > p { color: #617c6d; font-size: 13px; margin-bottom: 20px; }
.life-placeholder { background: linear-gradient(140deg, #f4f7f0, #d9e8dd); border: 1px solid #ffffffba; }
.life-placeholder:nth-child(2n) { background: linear-gradient(35deg, #d4e7db, #edf2e9); }
.life-placeholders { opacity: .7; }

@media (max-width: 540px) {
  .life-page .life-main { padding: 28px 20px 48px; }
  .life-page .life-intro h1 { font-size: 36px; }

}
@media (hover: none), (pointer: coarse), (max-width: 540px) {
  .life-caption-toggle { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
  .life-caption-toggle::after { content: 'ⓘ'; position: absolute; top: 12px; right: 12px; color: white; font-size: 22px; text-shadow: 0 1px 5px #173b2d; }
  .life-caption-toggle[aria-expanded="true"]::after { content: '×'; }
  .life-caption-toggle:focus-visible { outline: 3px solid #477e6f; outline-offset: -4px; }
  .life-photo figcaption, .life-photo:hover figcaption, .life-photo:focus figcaption, .life-photo:focus-within figcaption { opacity: 0; visibility: hidden; }
  .life-photo.is-open figcaption { opacity: 1; visibility: visible; }
  .life-photo:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .life-photo img, .life-photo figcaption { transition: none; } }