.p6-final {
  --p6-paper: #f7f2ea;
  --p6-ink: #393536;
  --p6-iris: #81758e;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(
    min(100vw, 390px) * 2.7475
    + clamp(0px, calc(100vw - 390px), 40px) * 1.97
    + clamp(0px, calc(100vw - 430px), 50px) * 1.84
  );
  min-height: 960px;
  overflow: hidden;
  color: var(--p6-ink);
  background: var(--p6-paper);
  container-type: inline-size;
}

.p6-final__material {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("./assets/invitation-paper-continuation-v44.webp");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.p6-final__welcome {
  position: absolute;
  inset: 0;
}

.p6-final__intro {
  position: absolute;
  z-index: 3;
  top: 19cqw;
  left: 50%;
  width: 55%;
  margin: 0;
  transform: translateX(-50%);
}

.p6-final__intro img {
  display: block;
  width: 100%;
  height: auto;
}

.p6-final__botanical {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.p6-final__iris,
.p6-final__petal {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
}

.p6-final__iris {
  top: 69cqw;
  width: 10.8%;
  opacity: 0.9;
  filter: saturate(0.86) brightness(1.03);
  transform-origin: 50% 100%;
}

.p6-final__iris--left {
  left: 20.2%;
  transform: rotate(-7deg) scaleX(-1);
}

.p6-final__iris--right {
  top: 71cqw;
  right: 19.6%;
  width: 10.1%;
  transform: rotate(6deg);
}

.p6-final__petal {
  width: 3.9%;
  opacity: 0.76;
  filter: saturate(0.72) brightness(1.05);
}

.p6-final__petal--1 {
  top: 45cqw;
  left: 29.8%;
  transform: rotate(-24deg) scale(0.9);
}

.p6-final__petal--2 {
  top: 44cqw;
  right: 29.1%;
  transform: rotate(18deg) scaleX(-1);
}

.p6-final__petal--3 {
  top: 57cqw;
  left: 22.7%;
  transform: rotate(34deg) scale(0.76);
}

.p6-final__petal--4 {
  top: 59cqw;
  right: 21.8%;
  transform: rotate(-36deg) scale(0.82);
}

.p6-final__petal--5 {
  top: 68cqw;
  left: 27.2%;
  transform: rotate(16deg) scaleX(-0.66) scaleY(0.66);
}

.p6-final__petal--6 {
  top: 67cqw;
  right: 26.1%;
  transform: rotate(-12deg) scale(0.68);
}

.p6-final__heading {
  position: absolute;
  z-index: 2;
  top: 35cqw;
  left: 50%;
  width: 91%;
  height: 10.2%;
  transform: translateX(-50%);
  color: var(--p6-ink);
  text-align: center;
}

.p6-final__heading-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  transition: none;
  will-change: opacity;
}

.p6-final__heading-frame img {
  display: block;
  width: 42%;
  max-width: 42%;
  height: auto;
  object-fit: contain;
  object-position: 50% 0;
}

.p6-final__couple {
  position: absolute;
  z-index: 1;
  top: 51cqw;
  left: 50%;
  width: 40%;
  aspect-ratio: 0.87;
  transform: translateX(-50%);
}

.p6-final__couple::after {
  position: absolute;
  z-index: -1;
  right: 13%;
  bottom: 4%;
  left: 13%;
  height: 9%;
  border-radius: 50%;
  background: rgb(111 99 92 / 10%);
  filter: blur(16px);
  content: "";
}

.p6-final__couple-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 0;
  user-select: none;
  pointer-events: none;
  transition: none;
  will-change: opacity;
}

.p6-final__heading-frame[data-p6-heading-frame="a"],
.p6-final__couple-frame[data-p6-couple-frame="a"] {
  opacity: 1;
}

.p6-final__heading-frame[data-p6-heading-frame="b"],
.p6-final__couple-frame[data-p6-couple-frame="b"] {
  opacity: 0;
}

.p6-final[data-frame="b"] .p6-final__heading-frame[data-p6-heading-frame="a"],
.p6-final[data-frame="b"] .p6-final__couple-frame[data-p6-couple-frame="a"] {
  opacity: 0;
}

.p6-final[data-frame="b"] .p6-final__heading-frame[data-p6-heading-frame="b"],
.p6-final[data-frame="b"] .p6-final__couple-frame[data-p6-couple-frame="b"] {
  opacity: 1;
}

.p6-final__heart {
  position: absolute;
  z-index: 2;
  top: 184cqw;
  left: 50%;
  width: min(90.8%, 354px);
  transform: translateX(-50%);
}

.p6-final__heart-stage {
  display: grid;
  width: 100%;
  aspect-ratio: 354 / 303;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
}

.p6-final__photo-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: manipulation;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: 0;
  outline: 0;
  background: #e8e4e8;
  box-shadow: 0 3px 9px rgb(42 35 46 / 8%);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms ease;
}

.p6-final__photo-tile:active {
  transform: scale(0.965);
}

.p6-final__photo-tile:focus-visible {
  outline: 2px solid var(--p6-iris);
  outline-offset: 2px;
}

.p6-final__photo-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.05);
  transition: opacity 760ms cubic-bezier(.23, 1, .32, 1), transform 920ms cubic-bezier(.77, 0, .175, 1);
  will-change: opacity, transform;
}

.p6-final__photo-layer.is-active {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .p6-final__photo-tile:hover {
    z-index: 4;
    transform: translateY(-2px);
    box-shadow: 0 9px 18px rgb(42 35 46 / 14%);
  }
}

.p6-final__details {
  position: absolute;
  z-index: 2;
  top: 101.54cqw;
  left: 50%;
  width: calc(100% - 20px);
  color: #393536;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  font-size: clamp(16px, 4.36cqw, 17px);
  font-weight: 400;
  line-height: clamp(26px, 6.93cqw, 27px);
  text-align: center;
  transform: translateX(-50%);
}

.p6-final__details p {
  margin: 0;
}

.p6-final__details .p6-final__venue {
  font-size: clamp(13px, 3.846cqw, 15px);
  white-space: nowrap;
}

.p6-final__closing {
  position: absolute;
  z-index: 2;
  top: 129.74cqw;
  left: 50%;
  width: 70%;
  color: #81758e;
  text-align: center;
  transform: translateX(-50%);
}

.p6-final__closing p {
  margin: 0;
  font-family: "PingFangShiGuangTi", "Songti SC", "STSong", serif;
  font-size: clamp(20px, 5.64cqw, 22px);
  font-weight: 400;
  line-height: clamp(31px, 8.46cqw, 33px);
  letter-spacing: 0.1em;
}

.p6-final__closing span {
  display: block;
}

.p6-final__gallery-cta {
  position: absolute;
  z-index: 3;
  top: 152.5cqw;
  left: 50%;
  display: flex;
  width: 11%;
  padding: 0;
  cursor: zoom-in;
  color: #81758e;
  border: 0;
  outline: 0;
  background: transparent;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.p6-final__gallery-label {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 0.8cqw;
  padding: 0;
  font-family: "PingFangShiGuangTi", "Songti SC", "STSong", serif;
  font-size: clamp(12px, 3.33cqw, 13px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.p6-final__gallery-figure {
  display: block;
  width: 100%;
  margin: 0;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 0;
  animation: p6GalleryPoke 1.8s steps(1, end) infinite;
  will-change: transform;
}

.p6-final__gallery-cta img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  transition: filter 220ms ease;
}

.p6-final__gallery-cta:focus-visible {
  outline: 0;
}

.p6-final__gallery-cta:focus-visible .p6-final__gallery-label {
  outline: 0;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .p6-final__gallery-cta:hover img {
    filter: drop-shadow(0 8px 12px rgb(69 57 76 / 10%));
  }
}

@keyframes p6GalleryPoke {
  0%, 35%, 100% { transform: translateY(0) scale(1); }
  36%, 52% { transform: translateY(2px) scale(.99, .975); }
  53%, 68% { transform: translateY(-1px) scale(1.01); }
  69%, 99% { transform: translateY(0) scale(1); }
}

.p6-lightbox[hidden] {
  display: none;
}

.p6-lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  color: white;
  background: rgb(20 18 21 / 94%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity 210ms ease;
}

.p6-lightbox.is-closing {
  opacity: 0;
}

.p6-lightbox__stage {
  position: absolute;
  inset: max(72px, env(safe-area-inset-top)) 0 max(76px, env(safe-area-inset-bottom));
  display: grid;
  overflow: hidden;
  place-items: center;
  touch-action: none;
  user-select: none;
}

.p6-lightbox__image {
  display: block;
  max-width: min(92vw, 1120px);
  max-height: 78vh;
  object-fit: contain;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), opacity 190ms ease, filter 190ms ease;
  will-change: transform, opacity, filter;
  -webkit-user-drag: none;
}

.p6-lightbox__image.is-switching {
  opacity: 0.44;
  filter: blur(2px);
}

.p6-lightbox__close,
.p6-lightbox__arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  color: white;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 7%);
  place-items: center;
}

.p6-lightbox__close svg,
.p6-lightbox__arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p6-lightbox__close {
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
}

.p6-lightbox__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.p6-lightbox__arrow--prev {
  left: max(14px, env(safe-area-inset-left));
}

.p6-lightbox__arrow--next {
  right: max(14px, env(safe-area-inset-right));
}

.p6-lightbox__count {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  gap: 9px;
  margin: 0;
  color: rgb(255 255 255 / 78%);
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  transform: translateX(-50%);
}

body.has-p6-lightbox {
  overflow: hidden;
}

.p6-final__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .p6-final__heading-frame[data-p6-heading-frame="a"],
  .p6-final__couple-frame[data-p6-couple-frame="a"] {
    opacity: 0;
  }

  .p6-final__heading-frame[data-p6-heading-frame="b"],
  .p6-final__couple-frame[data-p6-couple-frame="b"] {
    opacity: 1;
  }

  .p6-final__photo-layer,
  .p6-final__photo-tile,
  .p6-final__gallery-figure,
  .p6-final__gallery-cta img,
  .p6-lightbox,
  .p6-lightbox__image {
    transition: none;
  }
}

@media (max-width: 360px) {
  .p6-final {
    min-height: 960px;
  }

  .p6-final__couple {
    width: 41.6%;
  }

  .p6-lightbox__arrow {
    top: auto;
    bottom: max(17px, env(safe-area-inset-bottom));
    background: transparent;
    transform: none;
  }
}