Clip couple inside wedding frame

src/public/upload.css

@@ -64,6 +64,7 @@ body {
 }
 
 .poster__bg,
+.poster__portrait,
 .poster__couple {
   position: relative;
   display: block;
@@ -79,8 +80,8 @@ body {
   object-fit: cover;
   object-position: center top;
   transform: translateX(50%);
-  opacity: 0.66;
-  filter: saturate(0.78) contrast(0.82) brightness(1.1) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05));
+  opacity: 0.72;
+  filter: saturate(0.8) contrast(0.86) brightness(1.08) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05));
   -webkit-mask-image:
     linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 4%, #000 13%, #000 87%, rgba(0, 0, 0, 0.48) 96%, transparent 100%),
     linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
@@ -91,12 +92,22 @@ body {
   mask-composite: intersect;
 }
 
+.poster__portrait {
+  position: absolute;
+  z-index: 2;
+  left: 21.8%;
+  right: 21.8%;
+  top: 15.5%;
+  bottom: 26.7%;
+  overflow: hidden;
+  border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px;
+}
+
 .poster__couple {
   position: absolute;
   left: 50%;
-  bottom: 22.5%;
-  z-index: 2;
-  width: 62%;
+  top: -7.5%;
+  width: 122%;
   height: auto;
   max-width: none;
   transform: translateX(-50%);
@@ -108,7 +119,7 @@ body {
   z-index: 3;
   left: 8.5%;
   right: 8.5%;
-  bottom: 13%;
+  bottom: 10.5%;
   padding: clamp(16px, 3.5vw, 25px) 12px clamp(13px, 2.6vw, 20px);
   background: rgba(255, 255, 255, 0.78);
   border-top: 1px solid rgba(55, 55, 55, 0.12);
@@ -421,7 +432,7 @@ h1 {
 
   .poster__bg {
     width: 132%;
-    opacity: 0.66;
+    opacity: 0.72;
     -webkit-mask-image:
       linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 2%, #000 8%, #000 92%, rgba(0, 0, 0, 0.5) 98%, transparent 100%),
       linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
@@ -430,15 +441,22 @@ h1 {
       linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
   }
 
+  .poster__portrait {
+    left: 21.5%;
+    right: 21.5%;
+    top: 15.8%;
+    bottom: 27%;
+  }
+
   .poster__couple {
-    bottom: 22.8%;
-    width: 62%;
+    top: -7%;
+    width: 124%;
   }
 
   .poster__plate {
     left: 8%;
     right: 8%;
-    bottom: 13.5%;
+    bottom: 10.5%;
   }
 
   .upload-panel {

src/public/upload.html

@@ -11,7 +11,9 @@
     <section class="wedding-card" aria-labelledby="archive-title">
       <div class="poster">
         <img class="poster__bg" src="/assets/wedding-gate-bg.png" alt="">
-        <img class="poster__couple" src="/assets/wedding-couple.png" alt="">
+        <div class="poster__portrait" aria-hidden="true">
+          <img class="poster__couple" src="/assets/wedding-couple.png" alt="">
+        </div>
 
         <div class="poster__plate">
           <h1 id="archive-title">{{title}}</h1>

src/server.js

@@ -169,7 +169,9 @@ function uploadResultPage(request, { heading, message, isError = false }) {
     <section class="wedding-card" aria-labelledby="archive-title">
       <div class="poster">
         <img class="poster__bg" src="/assets/wedding-gate-bg.png" alt="">
-        <img class="poster__couple" src="/assets/wedding-couple.png" alt="">
+        <div class="poster__portrait" aria-hidden="true">
+          <img class="poster__couple" src="/assets/wedding-couple.png" alt="">
+        </div>
         <div class="poster__plate">
           <h1 id="archive-title">${title}</h1>
           <p class="poster__date">2026.05.24 SUN</p>