.life-page {
  overflow-x: hidden;
  --life-photo-frame-radius: 15px;
  --life-photo-media-radius: 6px;
}

.life-main {
  position: relative;
  height: calc(min(66.6667vw, 960px) - var(--portfolio-header-wide-height));
  min-height: 0;
  container-type: inline-size;
}

.life-page-heading {
  position: absolute;
  z-index: 1;
  top: 1.6667cqw;
  left: var(--about-subpage-heading-inset);
  transform: translateY(-20px);
}

.life-stage {
  position: absolute;
  inset: 0;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.life-entrance-pending .life-title-wrap,
  html.life-entrance-pending .life-photo-transition {
    opacity: 0;
  }
}

.life-scene {
  position: absolute;
  inset: 0;
}

@media (min-width: 1200px) {
  .life-scene {
    pointer-events: none;
  }

  .life-pager,
  .life-pager-button {
    pointer-events: auto;
  }
}

.life-scene[hidden] {
  display: none;
}

.life-pager {
  position: absolute;
  top: 20.1389cqw;
  left: 13.1944%;
  display: flex;
  flex-direction: column;
  gap: .8333cqw;
  margin: 0;
  padding: 0;
}

.life-pager-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.life-pager-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.life-title-wrap {
  position: absolute;
  z-index: 5;
  top: 22.9861cqw;
  left: 32.7778%;
  width: 34.5139%;
  height: min(50px, 3.4722cqw);
  display: grid;
  place-items: center;
}

.life-scene-title {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #000000e5;
  font-size: min(46px, 3.1944cqw);
  font-weight: 500;
  line-height: min(50px, 3.4722cqw);
  text-align: center;
  white-space: nowrap;
}

.life-photo {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: var(--life-photo-frame-radius);
  padding: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  transform: rotate(var(--photo-rotation));
  transform-origin: center;
}

.life-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--life-photo-media-radius);
  object-fit: cover;
}

.life-photo video {
  border-radius: var(--life-photo-media-radius);
}

.life-photo-transition {
  position: absolute;
  z-index: 2;
  transform-origin: center;
}

.life-photo-motion {
  position: absolute;
  inset: 0;
}

.life-media-gallery {
  display: contents;
}

.life-photo-motion > .life-photo {
  inset: 0;
  width: auto;
  height: auto;
}

.life-photo-01 {
  top: 7.2222cqw;
  left: 41.2336%;
  width: 17.4167cqw;
  height: 13.8889cqw;
  --photo-rotation: -15deg;
}

.life-photo-02 {
  top: 16.7361cqw;
  left: 22.3611%;
  width: 9.7222cqw;
  height: 9.7222cqw;
  --photo-rotation: 30deg;
}

.life-photo-03 {
  top: 15.9722cqw;
  left: 65.9028%;
  width: 11.8056cqw;
  height: 11.8056cqw;
  --photo-rotation: 30deg;
}

.life-photo-04 {
  top: 33.08cqw;
  left: 54.5833%;
  width: 14.5833cqw;
  height: 14.5833cqw;
  --photo-rotation: 15deg;
}

.life-photo-05 {
  top: 28.3333cqw;
  left: 32.6143%;
  width: 17.7536cqw;
  height: 20.8333cqw;
  --photo-rotation: -15deg;
}

.life-doodle {
  position: absolute;
  pointer-events: none;
}

.life-doodle-hand {
  z-index: 0;
  left: 82%;
  bottom: calc(100% + 24px);
  width: 4.8863cqw;
  height: 4.4463cqw;
  transform: rotate(30deg);
}

.life-doodle-star {
  z-index: 3;
  top: calc(8.9461cqw - 10px);
  left: 13.9674cqw;
  width: 4.2954cqw;
  height: 4.2953cqw;
}

/* Scene 02 static preview: positions follow the FigWright desktop composition. */
.life-static-scene02 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.life-static-scene02 .life-title-wrap {
  left: 32.7778%;
  width: 34.1667%;
}

.life-static-scene02 .life-photo-transition {
  height: auto;
}

.life-static-scene02 .life-scene02-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.life-scene02-swimmer {
  top: 10.448898cqw;
  left: 26.171243%;
  width: 17.531321cqw;
  aspect-ratio: 252.451 / 88;
  z-index: 2;
}

.life-scene02-swimmer .life-scene02-art {
  transform: rotate(15deg);
}

.life-scene02-climbing01 {
  top: 6.212680cqw;
  left: 50.1091%;
  width: 13.75cqw;
  aspect-ratio: 198 / 226;
  --photo-rotation: 15deg;
}

.life-scene02-climbing02 {
  top: 28.219474cqw;
  left: 24.380491%;
  width: 18.680556cqw;
  aspect-ratio: 269 / 326;
  --photo-rotation: -15deg;
}

.life-scene02-video {
  top: 28.545603cqw;
  left: 54.382044%;
  width: 22.5cqw;
  aspect-ratio: 324 / 287.5243;
  z-index: 3;
  --photo-rotation: 15deg;
}

.life-scene02-goggles {
  top: 25.694440cqw;
  left: 72.552609%;
  width: 8.881382cqw;
  aspect-ratio: 127.8919 / 60;
  z-index: 3;
}

.life-static-scene02 .life-scene02-goggles .life-scene02-art {
  transform: rotate(142deg);
  transform-origin: center center;
}

.life-static-scene02 .life-photo img,
.life-static-scene02 .life-photo video {
  object-fit: contain;
}

.life-static-scene02 .life-photo video {
  display: block;
  width: 100%;
  height: 100%;
}

.life-static-scene03,
.life-static-scene04 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.life-static-scene03 .life-title-wrap {
  left: 39.0278%;
  width: 22.0139%;
}

.life-static-scene04 .life-title-wrap {
  left: 40.1389%;
  width: 19.7917%;
}

.life-static-scene03 .life-photo img,
.life-static-scene04 .life-photo img,
.life-static-scene04 .life-photo video {
  object-fit: cover;
}

.life-static-scene04 .life-photo video {
  display: block;
  width: 100%;
  height: 100%;
}

.life-scene03-photo01 {
  top: 5.0694cqw;
  left: 40.7164%;
  width: 23.9005cqw;
  height: 14.3056cqw;
  --photo-rotation: 15deg;
}

.life-scene03-photo02 {
  top: 11.7361cqw;
  left: 64.7222%;
  width: 15.0694cqw;
  height: 15.0694cqw;
  --photo-rotation: 0deg;
}

.life-scene03-photo03 {
  top: 30.3855cqw;
  left: 52.9861%;
  width: 24.0278cqw;
  height: 14.3056cqw;
  --photo-rotation: -15deg;
}

.life-scene03-photo05 {
  top: 29.0278cqw;
  left: 26.1111%;
  width: 25.8530cqw;
  height: 22.6389cqw;
  --photo-rotation: 0deg;
}

.life-scene03-photo06 {
  top: 16.4749cqw;
  left: 20.9804%;
  width: 15.6944cqw;
  height: 12.1987cqw;
  --photo-rotation: -15deg;
}

.life-scene04-photo01 {
  top: 5.6944cqw;
  left: 27.7163%;
  width: 13.6111cqw;
  height: 22.5694cqw;
  --photo-rotation: 15deg;
}

.life-scene04-photo02 {
  top: 6.3889cqw;
  left: 51.1806%;
  width: 15.8901cqw;
  height: 12.2222cqw;
  --photo-rotation: 30deg;
}

.life-scene04-photo03 {
  top: 19.6528cqw;
  left: 66.25%;
  width: 17.0573cqw;
  height: 24.6832cqw;
  --photo-rotation: 0deg;
}

.life-scene04-photo04 {
  top: 31.0417cqw;
  left: 45.9028%;
  width: 15.6927cqw;
  height: 22.6389cqw;
  --photo-rotation: 0deg;
}

.life-scene04-photo05 {
  top: 32.0597cqw;
  left: 19.7222%;
  width: 18.9583cqw;
  height: 17.8472cqw;
  --photo-rotation: -15deg;
}

@media (width < 1200px) {
  .life-main {
    height: auto;
    min-height: 0;
    padding-block: 12px 48px;
  }

  .life-page-heading {
    position: relative;
    inset: auto;
    width: 100%;
    margin-inline: 0;
    transform: none;
  }

  .life-stage {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    height: auto;
    margin: var(--about-subpage-content-gap) 0 0;
    padding: 0;
  }

  .life-pager {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 12px;
    align-self: flex-start;
  }

  .life-scene:not([hidden]) {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .life-title-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: block;
    transform: none;
    opacity: 1;
  }

  .life-static-scene02 .life-title-wrap,
  .life-static-scene03 .life-title-wrap,
  .life-static-scene04 .life-title-wrap {
    left: auto;
    width: 100%;
  }

  .life-scene-title {
    position: static;
    width: 100%;
    max-width: 100%;
    font-size: clamp(32px, 3.8333vw, 46px);
    line-height: 1.087;
    text-align: left;
    white-space: normal;
  }

  .life-media-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .life-photo-transition {
    position: relative;
    inset: auto;
    flex: 0 1 var(--life-gallery-basis);
    width: auto;
    min-width: 0;
    max-width: var(--life-gallery-max);
    height: auto;
    aspect-ratio: auto;
    transform: none;
    opacity: 1;
    --photo-rotation: 0deg;
  }

  .life-photo-motion {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .life-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .life-photo img,
  .life-photo video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .life-static-scene02 .life-photo video,
  .life-static-scene04 .life-photo video {
    height: auto;
  }

  .life-static-scene03 .life-photo img,
  .life-static-scene04 .life-photo img,
  .life-static-scene04 .life-photo video {
    object-fit: contain;
  }

  .life-photo-01 { --life-gallery-basis: 250.8px; --life-gallery-max: 250.8px; }
  .life-photo-02 { --life-gallery-basis: 140px; --life-gallery-max: 140px; }
  .life-photo-03 { --life-gallery-basis: 170px; --life-gallery-max: 170px; }
  .life-photo-04 { --life-gallery-basis: 210px; --life-gallery-max: 210px; }
  .life-photo-05 { --life-gallery-basis: 255.65px; --life-gallery-max: 255.65px; }

  .life-scene03-photo01 { --life-gallery-max: 344.167px; }
  .life-scene03-photo02 { --life-gallery-max: 217px; }
  .life-scene03-photo03 { --life-gallery-max: 346px; }
  .life-scene03-photo05 { --life-gallery-max: 372.283px; }
  .life-scene03-photo06 { --life-gallery-max: 226px; }

  .life-scene03-photo01 { --life-gallery-basis: 340.167px; }
  .life-scene03-photo02 { --life-gallery-basis: 213px; }
  .life-scene03-photo03 { --life-gallery-basis: 342px; }
  .life-scene03-photo05 { --life-gallery-basis: 368.283px; }
  .life-scene03-photo06 { --life-gallery-basis: 222px; }

  .life-scene04-photo01 { --life-gallery-basis: 196px; --life-gallery-max: 196px; }
  .life-scene04-photo02 { --life-gallery-basis: 228.817px; --life-gallery-max: 228.817px; }
  .life-scene04-photo03 { --life-gallery-basis: 245.626px; --life-gallery-max: 245.626px; }
  .life-scene04-photo04 { --life-gallery-basis: 225.975px; --life-gallery-max: 225.975px; }
  .life-scene04-photo05 { --life-gallery-basis: 273px; --life-gallery-max: 273px; }

  .life-scene02-swimmer { --life-gallery-basis: 252.451px; --life-gallery-max: 252.451px; }
  .life-scene02-climbing01 { --life-gallery-basis: 198px; --life-gallery-max: 198px; }
  .life-scene02-climbing02 { --life-gallery-basis: 269px; --life-gallery-max: 269px; }
  .life-scene02-video { --life-gallery-basis: 324px; --life-gallery-max: 324px; }
  .life-scene02-goggles { --life-gallery-basis: 127.892px; --life-gallery-max: 127.892px; }

  .life-media-gallery .life-photo-transition {
    --photo-rotation: 0deg;
  }

  .life-media-gallery01 .life-photo-01 { order: 1; }
  .life-media-gallery01 .life-photo-02 { order: 2; }
  .life-media-gallery01 .life-photo-03 { order: 3; }
  .life-media-gallery01 .life-photo-04 { order: 4; }
  .life-media-gallery01 .life-photo-05 { order: 5; }

  .life-media-gallery02 .life-scene02-swimmer { order: 1; }
  .life-media-gallery02 .life-scene02-climbing01 { order: 2; }
  .life-media-gallery02 .life-scene02-climbing02 { order: 3; }
  .life-media-gallery02 .life-scene02-video { order: 4; }
  .life-media-gallery02 .life-scene02-goggles { order: 5; }

  .life-media-gallery03 .life-scene03-photo01 { order: 1; }
  .life-media-gallery03 .life-scene03-photo02 { order: 2; }
  .life-media-gallery03 .life-scene03-photo03 { order: 3; }
  .life-media-gallery03 .life-scene03-photo05 { order: 4; }
  .life-media-gallery03 .life-scene03-photo06 { order: 5; }

  .life-media-gallery04 .life-scene04-photo01 { order: 1; }
  .life-media-gallery04 .life-scene04-photo02 { order: 2; }
  .life-media-gallery04 .life-scene04-photo03 { order: 3; }
  .life-media-gallery04 .life-scene04-photo04 { order: 4; }
  .life-media-gallery04 .life-scene04-photo05 { order: 5; }

  .life-doodle-hand,
  .life-doodle-star {
    display: none;
  }

  .life-scene02-swimmer,
  .life-scene02-goggles {
    display: none;
  }
}