#making-moments {
  --opening-top: 68%;
  --opening-side: 43.5%;
  --opening-bottom: 9%;
  --stage-ink: #fcfaf5;
  position: relative;
  height: auto;
  background: var(--paper);
  color: var(--stage-ink);
}
#making-moments.stage-story-ready { height: 460svh; }
#making-moments .stage-sticky {
  position: sticky;
  top: 0;
  display: block;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}
#making-moments .stage-opening {
  position: absolute;
  inset: 12% 3vw auto;
  padding: 0;
  color: var(--ink);
  text-align: center;
}
#making-moments .stage-opening .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
#making-moments .stage-opening .eyebrow { margin: 0 0 24px; }
#making-moments .stage-opening .display {
  font-size: clamp(42px, 6.7vw, 112px);
  line-height: .9;
}
#making-moments .stage-opening .small-korean { margin: 22px 0 0; }
#making-moments .stage-visual {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: #29211b;
  clip-path: inset(var(--opening-top) var(--opening-side) var(--opening-bottom));
}
#making-moments .stage-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #29211b;
  transform: none;
}
#making-moments .stage-one { z-index: 1; }
#making-moments .stage-two { z-index: 2; clip-path: inset(0 0 0 var(--fitting-edge, 100%)); }
#making-moments .stage-three { z-index: 3; clip-path: inset(0 0 0 var(--finish-edge, 100%)); }
#making-moments .stage-slide picture {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#making-moments .stage-slide source { display: none; }
#making-moments .stage-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: none;
}
#making-moments .stage-one img {
  object-position: 48% 51%;
  transform: translate3d(var(--fabric-x, 0%), var(--fabric-y, 0%), 0) scale(var(--fabric-scale, 1));
}
#making-moments .stage-two img {
  object-position: 56% 50%;
  transform: translateX(var(--fitting-x, 0%)) scale(var(--fitting-scale, 1));
}
#making-moments .stage-three img {
  object-position: 50% 47%;
  transform: translateY(var(--finish-y, 0%)) scale(var(--finish-scale, 1));
}
/* Widen only the room at the sides. Every column remains sharp, the center
   keeps the suit's proportions, and the two joins sample the same pixels. */
#making-moments .stage-preserve-fit picture::before,
#making-moments .stage-preserve-fit picture::after {
  content: ''; position: absolute; z-index: 1; top: 0; bottom: 0;
  width: var(--stage-wing); background-image: var(--stage-backdrop);
  background-size: calc(var(--stage-wing) * 8) 100%; background-repeat: no-repeat;
}
#making-moments .stage-preserve-fit picture::before { left: 0; background-position: left center; }
#making-moments .stage-preserve-fit picture::after { right: 0; background-position: right center; }
#making-moments .stage-preserve-fit.stage-two picture { transform: translateX(var(--fitting-x, 0%)) scale(var(--fitting-scale, 1)); }
#making-moments .stage-preserve-fit.stage-three picture { transform: translateY(var(--finish-y, 0%)) scale(var(--finish-scale, 1)); }
#making-moments .stage-preserve-fit img {
  width: auto;
  height: 100%;
  object-fit: contain;
  flex: none;
  transform: none;
}
#making-moments .stage-shade {
  display: block;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 18%), transparent 19%, transparent 64%, rgb(10 8 6 / 18%) 76%, rgb(10 8 6 / 67%));
  opacity: var(--stage-chrome, 0);
}
#making-moments .stage-pips,
#making-moments .stage-sentence,
#making-moments .stage-description { z-index: 5; color: var(--stage-ink); opacity: var(--stage-chrome, 0); }
#making-moments .stage-description p { transition: none; }
#making-moments .stage-pips {
  inset: 50% auto auto max(2.5vw, 10px);
  transform: translateY(-50%);
  flex-direction: column;
  gap: 0;
}
#making-moments .stage-pips button {
  display: grid;
  width: 38px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
}
#making-moments .stage-pips button::before {
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow: 0 0 4px #0008;
}
#making-moments .stage-pips button:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
#making-moments .stage-sentence {
  position: absolute;
  inset: auto auto clamp(24px, 4.5svh, 58px) 50%;
  transform: translateX(calc(-50% + var(--sentence-drift, 0vw)));
  width: max-content;
  max-width: 96vw;
  margin: 0;
  height: auto;
  font: 400 clamp(30px, 4.45vw, 80px)/1 var(--serif);
  letter-spacing: -.05em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 12px #0007;
}
#making-moments .stage-sentence span { position: static; display: inline; opacity: .52; transition: none; }
#making-moments .stage-description {
  inset: auto 5vw max(14px, 2.3svh) 5vw;
  width: auto;
  height: 3.35em;
  padding: 0;
  font: 13px/1.65 var(--sans);
  text-align: center;
  text-shadow: 0 1px 8px #000c;
}
#making-moments .stage-description p { inset: auto 0 0; width: 100%; margin: 0; }
body:not(.menu-open):has(#making-moments[data-header-tone="paper"]) .site-header .header-brand { color: var(--ink); }
body:not(.menu-open):has(#making-moments[data-header-tone="photo"]) .site-header .header-brand { color: #fff; text-shadow: 0 1px 9px #0006; }
/* The landscape portraits place the sitter's face under the center of the
   header. Keep the two corner links while the full-screen photo is onstage. */
@media (min-width:651px) {
  body:not(.menu-open):has(#making-moments[data-header-tone="photo"]) .site-header .header-brand:not(:focus-visible) { visibility: hidden; }
}

@media(max-width:650px) {
  #making-moments.stage-story-ready {
    --stage-screen: 100dvh;
    height: calc(320svh + var(--stage-screen));
  }
  #making-moments.stage-story-ready .stage-sticky { height: var(--stage-screen); }
  #making-moments.stage-story-ready .stage-visual {
    clip-path: none;
    transform-origin: center;
    transform: translate3d(0,var(--mobile-opening-y, 18%),0) scale(var(--mobile-opening-scale, .36));
    will-change: transform;
  }
  #making-moments.stage-story-ready .stage-one { transform: translate3d(var(--fabric-slide, 0%),0,0); }
  #making-moments.stage-story-ready .stage-two { clip-path: none; transform: translate3d(var(--fitting-slide, 100%),0,0); }
  #making-moments.stage-story-ready .stage-three { clip-path: none; transform: translate3d(var(--finish-slide, 100%),0,0); }
  #making-moments .stage-opening { inset: 14% 5vw auto; }
  #making-moments .stage-opening .display { font-size: clamp(34px, 10.6vw, 60px); line-height: .97; }
  #making-moments .stage-opening .eyebrow { margin-bottom: 18px; }
  #making-moments .stage-opening .small-korean { margin-top: 17px; font-size: 12px; }
  #making-moments .stage-one img { object-position: 48% 50%; }
  #making-moments .stage-two img { object-position: 54% 50%; }
  #making-moments .stage-three img { object-position: 50% 50%; }
  #making-moments .stage-pips { display: none; }
  #making-moments .stage-sentence {
    bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
    transform: translateX(-50%);
    font-size: clamp(22px, 6.8vw, 39px);
    max-width: 98vw;
  }
  #making-moments .stage-description {
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px));
    font-size: 12px;
    line-height: 1.6;
  }
}
@media(max-height:520px) {
  #making-moments .stage-opening { top: 13%; }
  #making-moments .stage-opening .display { font-size: clamp(30px, 6.8svh, 44px); }
  #making-moments .stage-opening .eyebrow { margin-bottom: 8px; }
  #making-moments .stage-opening .small-korean { margin-top: 8px; }
  #making-moments .stage-sentence { bottom: 18px; font-size: clamp(20px, 5.3svh, 35px); }
  #making-moments .stage-description { bottom: 6px; font-size: 11px; height: 3.1em; line-height: 1.45; }
}
@media(prefers-reduced-motion:reduce) {
  #making-moments.stage-story-ready { height: 100svh; }
  #making-moments .stage-sticky { position: relative; }
  #making-moments .stage-visual { clip-path: none; }
  #making-moments .stage-slide img { transform: none; }
  #making-moments .stage-preserve-fit.stage-slide picture { transform: none; }
}
/* With the mobile controls removed, scrolling still reaches all three photos.
   Reduced-motion viewers get instant changes with no zoom or lateral movement. */
@media(max-width:650px) and (prefers-reduced-motion:reduce) {
  #making-moments.stage-story-ready { height: calc(200svh + var(--stage-screen)); }
  #making-moments .stage-sticky { position: sticky; }
  #making-moments.stage-story-ready .stage-visual { transform: none; will-change: auto; }
}
#making-moments:not(.stage-story-ready) .stage-sticky,
#making-moments:not(.stage-story-ready) .stage-visual {
  display: block;
  position: relative;
  height: auto;
  clip-path: none;
}
#making-moments:not(.stage-story-ready) .stage-slide {
  display: block;
  position: relative;
  height: 100svh;
  clip-path: none;
}
#making-moments:not(.stage-story-ready) .stage-visual > :not(figure) { display: none; }