/* Art-directed photo prints. Positions stay fixed instead of shuffling on load. */
.moments {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 85px 6.6% 39px;
  color: var(--pine, #253e37);
  background: #eae1d0 url("assets/washi-paper.png") center / 1150px auto repeat;
  border-top: 1px solid rgba(101, 84, 55, .13);
  border-bottom: 1px solid rgba(101, 84, 55, .13);
}

.moments::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(104deg, rgba(250, 246, 234, .48), rgba(250, 246, 234, .06) 57%, rgba(222, 210, 184, .1));
}

.moments-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

.moments-heading .eyebrow {
  flex-basis: 100%;
  margin-bottom: 23px;
  font-size: 9px;
  letter-spacing: 1.9px;
  color: #775944;
}

.moments-heading h2 {
  margin: 0;
  font-size: clamp(43px, 3.8vw, 63px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -1.9px;
}

.moments-intro {
  margin: 0 3.2% 6px 25px;
  font-size: 12px;
  line-height: 1.9;
  color: #526155;
}

.moments-board {
  position: relative;
  max-width: 1400px;
  height: clamp(1440px, 104vw, 1680px);
  margin: 44px auto 0;
}

.moment-print {
  position: absolute;
  margin: 0;
  filter: drop-shadow(0 5px 4px rgba(69, 52, 28, .1));
  transform-origin: center;
}

.moment-print-sheet {
  padding: 14px 13px 0;
  background: #f6f0e2 url("assets/washi-paper.png") 22% 35% / 850px auto;
  clip-path: polygon(
    .2% .4%, 10% .2%, 19% .5%, 29% .1%, 38% .4%, 49% 0, 60% .3%, 72% .1%, 84% .4%, 94% .1%, 99.8% .5%,
    99.6% 13%, 99.9% 25%, 99.6% 37%, 100% 48%, 99.7% 59%, 100% 71%, 99.6% 82%, 99.9% 92%, 99.5% 99.7%,
    91% 99.5%, 82% 100%, 72% 99.6%, 60% 99.9%, 48% 99.6%, 37% 100%, 25% 99.6%, 14% 99.8%, 5% 99.5%, .3% 99.8%,
    .5% 88%, .1% 78%, .4% 66%, 0 55%, .3% 44%, .1% 31%, .4% 20%, 0 9%
  );
}

.moment-print-sheet > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.76) contrast(.94);
  clip-path: polygon(.2% .1%, 99.7% .3%, 100% 99.6%, .1% 100%);
}

.moment-print figcaption {
  min-height: 44px;
  padding: 13px 3px 15px;
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.15px;
  color: #4f5949;
}

.moment-number {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--sans, Arial, sans-serif);
  font-size: 8px;
  letter-spacing: .7px;
  color: #977354;
  vertical-align: 2px;
}

.moment-print-tea {
  top: 35px;
  left: 3.8%;
  width: 28.8%;
  transform: rotate(-4deg);
}

.moment-print-tea .moment-print-sheet > img {
  aspect-ratio: 4 / 4.25;
  object-position: center 43%;
}

.moment-print-winter {
  top: 105px;
  right: 2.5%;
  width: 34.3%;
  transform: rotate(2.6deg);
}

.moment-print-winter .moment-print-sheet > img {
  aspect-ratio: 1.3 / 1;
  object-position: center;
}

.moments-margin-note {
  position: absolute;
  top: 434px;
  left: 43%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #806346;
  transform: rotate(-5deg);
}

.moments-margin-note img {
  width: 44px;
  height: auto;
  opacity: .72;
}

.moments-margin-note span {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 15px;
}

.moment-print-away {
  top: 537px;
  left: 11%;
  width: 26.3%;
  transform: rotate(2.8deg);
}

.moment-print-away .moment-print-sheet > img {
  aspect-ratio: 1 / 1;
  object-position: center;
}

.moment-print-desk {
  top: 555px;
  right: 5.2%;
  width: 28.1%;
  transform: rotate(-3.5deg);
}

.moment-print-desk .moment-print-sheet > img {
  aspect-ratio: 1 / 1;
  object-position: center;
}

.moments-disclosure {
  max-width: 1400px;
  margin: 0 auto;
  text-align: right;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: .3px;
  color: #657064;
}

@media (min-width: 1600px) {
  .moments-board { height: 1680px; margin-top: 50px; }
  .moment-print-packaging { top: 1180px; }
  .moment-print-winter { top: 120px; }
  .moments-margin-note { top: 500px; }
  .moment-print-away { top: 610px; }
  .moment-print-desk { top: 645px; }
}

.moment-print-packaging {
  top: clamp(1010px, 74vw, 1180px);
  left: 35%;
  width: 44%;
  transform: rotate(1.5deg);
  scroll-margin-top: 130px;
}

.moment-print-packaging .moment-print-sheet > img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}