/* Reuse the portfolio's Montserrat, framed headings, separators and footer.
   These rules only add the photo layout and its scoped responsive behavior. */
.life-invitation {
  width: min(680px, calc(100% - 3rem));
  margin: 0 auto;
  text-align: center;
}
.life-invitation h2 {
  margin: 0 0 1em;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
}
.life-invitation p { margin: 0 0 2em; line-height: 1.7; }
.life-invitation .about-explore, .life-return { display: inline-block; line-height: 1.6; }
.life-invitation .about-explore:hover, .life-return:hover { color: #666464; }
/* Accommodate the extra link in the existing home-page mobile menu. */
.nav-burger-menu.open { max-height: 22em; }

.life-page { background: #d7d7d7; color: #000; }
.life-page [hidden] { display: none !important; }
.life-page button { font-family: inherit; cursor: pointer; }
.life-page a:focus-visible, .life-page button:focus-visible,
.life-invitation a:focus-visible { outline: 3px solid #008cba; outline-offset: 5px; }

/* Same split background, logo and navigation treatment as the home hero. */
.life-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  min-height: 140px;
  padding: 2em 12%;
  background: linear-gradient(100deg, #d7d7d7 50%, #000 50%);
}
.life-brand { display: block; flex-shrink: 0; }
.life-brand img { display: block; width: 5em; height: auto; }
.life-page .life-nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .75em;
  width: auto;
  margin: 0;
}
.life-page .life-nav > a { margin: 0; line-height: 1.6; }
.life-page .life-nav > .nav-contact { margin: 0 !important; }
.life-page .life-nav > .life-nav-current { background: #fff; color: #000; }

/* .about and .section-heading come from style.css, shared with the home page. */
.life-intro { padding: 1em 1.5em 0; text-align: center; }
.life-intro .section-heading { max-width: 100%; cursor: default; line-height: 1.5; }
.life-intro .life-lead { width: min(680px, 100%); margin: 0 0 3em; line-height: 1.7; }
.life-intro .life-return { margin-bottom: 0; }
.life-intro > img { max-width: 100%; }

/* Match the dark project section, rounded images and restrained shadows. */
.life-collection { width: 100%; padding: 2.5em 1.5em; background: #1f1f1f; color: #fff; }
.life-grid {
  width: min(1248px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5em 1.5em;
  scroll-margin-top: 2em;
}
.life-photo { min-width: 0; margin: 0; }
.life-photo-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  background: #d7d7d7;
  box-shadow: 6px 6px 2px 1px rgba(44,44,44,.3);
}
.life-photo-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.life-photo-link::after {
  content: "↗";
  position: absolute;
  right: 1em;
  bottom: 1em;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #000;
  background: #fff;
  opacity: 0;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  .life-photo-link:hover img { transform: scale(1.025); }
  .life-photo-link:hover::after { opacity: 1; }
}
.life-photo-link:focus-visible::after { opacity: 1; }
.life-photo figcaption { margin-top: 1em; color: #fff; font-size: .85rem; line-height: 1.8; text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.life-photo-error { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; margin: 0; padding: 1.5em; color: #444; font-size: .85rem; line-height: 1.8; }
.life-more-wrap { text-align: center; }
.life-more {
  margin-top: 3em;
  padding: .5em 1.5em;
  min-height: 44px;
  border: none;
  border-left: .15em solid currentColor;
  border-right: .15em solid currentColor;
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  font-size: .9rem;
  font-weight: 700;
}
.life-more:hover { color: #c4c4c4; }
.life-empty { padding: 3em 0; text-align: center; line-height: 1.8; }
.life-page .footer { padding-top: .5em; }
.life-skip { position: fixed; top: 1em; left: 1em; z-index: 100; transform: translateY(-200%); padding: 1em; background: #fff; color: #000; }
.life-skip:focus { transform: translateY(0); }

/* Keep the native dialog behavior, using the portfolio's white rounded modal. */
.life-viewer {
  width: min(1120px, calc(100% - 2em));
  max-height: calc(100vh - 2em);
  max-height: calc(100dvh - 2em);
  padding: 0;
  border: none;
  border-radius: 20px;
  background: #fff;
  color: #000;
  overflow: auto;
}
.life-viewer::backdrop { background: rgba(0,0,0,.7); }
.life-viewer-panel { padding: 2em; }
.life-viewer-toolbar, .life-viewer-navigation { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.life-viewer-toolbar { margin-bottom: 1.5em; }
.life-viewer-toolbar p { margin: 0; font-size: .85rem; text-transform: uppercase; }
.life-viewer-button {
  min-width: 44px;
  min-height: 44px;
  padding: .5em 1.5em;
  background: transparent;
  color: #000;
  border: none;
  border-left: .15em solid #000;
  border-right: .15em solid #000;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.6;
}
.life-viewer-button:hover { color: #666464; }
.life-viewer-figure { margin: 0; }
.life-viewer-stage { position: relative; display: grid; place-items: center; min-height: 180px; }
.life-viewer-stage img { display: block; max-width: 100%; max-height: 65vh; max-height: 65dvh; width: auto; height: auto; border-radius: 10px; object-fit: contain; }
.life-viewer-stage .life-photo-error { position: static; }
.life-viewer-figure figcaption { padding: 1em 0 .25em; font-size: .85rem; line-height: 1.8; text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.life-viewer-navigation { margin-top: 1.5em; }
html.life-viewer-open, html.life-viewer-open body { overflow: hidden; }

@media (max-width: 1000px) {
  .life-header { flex-direction: column; gap: 1.5em; padding: 2em 1.5em; background: #000; }
  .life-brand { background: #d7d7d7; padding: .75em; }
  .life-brand img { width: 3em; }
  .life-page .life-nav { justify-content: center; }
}
@media (max-width: 900px) {
  .life-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .life-invitation h2 { font-size: 1rem; }
  .life-intro .section-heading { padding: 1em 1.5em; font-size: 1.1rem; }
  .life-page .life-nav > a { padding: .65em .85em; font-size: .8rem; }
  .life-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8em; }
  .life-collection { padding: 1.5em; }
  .life-viewer-panel { padding: 1em; }
  .life-viewer-navigation { gap: .5em; }
  .life-viewer-button { padding-inline: .75em; font-size: .7rem; }
  .life-page .footer-icons { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .life-page, html:has(.life-page) { scroll-behavior: auto; }
  .life-photo-link img, .life-photo-link::after { transition: none; }
}