.wedding-day-dress-page{background:var(--cream)}
.wedding-day-dress-page .site-header{background:var(--cream);color:#4A481A}
.wedding-day-dress-page .site-header .logo{background:#4A481A}
.wedding-day-dress-page .site-header .logo img{opacity:0!important}
.wd-main{width:min(1100px,calc(100% - 44px));margin:auto;padding:clamp(120px,11vw,160px) 0 95px}
.wd-main h1{text-align:center;font:400 clamp(34px,4.5vw,59px)/1.15 "La Siesta",cursive;color:#3A1B21;margin:0 0 22px}
.wd-hero{position:relative;overflow:hidden;border-radius:18px;min-height:350px;background:#3A1B21;display:grid;place-items:center}
.wd-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wd-overlay{position:relative;z-index:1;width:min(84%,820px);padding:25px 34px;background:rgba(107,39,49,.82);color:#f4ece1;text-align:center;opacity:0;transform:translateY(15px);animation:wd-overlay-appear .85s ease .5s forwards;transition:opacity .35s ease,visibility .35s ease;pointer-events:none}
.wd-overlay p{font:400 clamp(12px,1.25vw,15px)/1.35 "General Sans",sans-serif;margin:0 0 12px}
.wd-overlay .wd-last{margin-bottom:0}
@keyframes wd-overlay-appear{to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.wd-hero:hover .wd-overlay{animation:none;opacity:0;visibility:hidden}}
.wd-masonry{margin-top:18px;columns:4;column-gap:16px}
.wd-photo{margin:0 0 16px;break-inside:avoid;overflow:hidden;border-radius:14px;background:#ded8cb}
.wd-photo img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease;cursor:default}
@media(hover:hover){.wd-photo:hover img{transform:scale(1.075) rotate(-1deg);filter:saturate(1.09)}}
@media(max-width:760px){.wd-main{width:calc(100% - 28px);padding:115px 0 55px}.wd-hero{min-height:440px}.wd-overlay{width:90%;padding:18px 14px}.wd-overlay p{font-size:12px;line-height:1.3;margin-bottom:9px}.wd-masonry{columns:2;column-gap:10px;margin-top:10px}.wd-photo{margin-bottom:10px;border-radius:10px}}
@media(prefers-reduced-motion:reduce){.wd-overlay{animation:none;opacity:1;transform:none}.wd-photo img{transition:none}}

/* Fixed columns reproduce the original PDF mood board's exact image order. */
.wd-masonry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;columns:auto}
.wd-column{display:flex;flex-direction:column;gap:16px;min-width:0}
.wd-column .wd-photo{margin:0}
@media(max-width:760px){
 .wd-masonry{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;columns:auto}
 .wd-column{gap:10px}
}

/* Play the entrance once; restore overlay instantly when hover ends. */
@media(hover:hover){
 .wd-hero:hover .wd-overlay{animation:none;opacity:0;visibility:hidden;transition:none}
 .wd-hero:not(:hover) .wd-overlay{transition:none}
}

.wd-overlay.wd-overlay-entered{animation:none;opacity:1;transform:none;visibility:visible}
@media(hover:hover){.wd-hero:hover .wd-overlay.wd-overlay-entered{opacity:0;visibility:hidden}}

/* Keep the description panel static and visible when hovering the moodboard. */
@media(hover:hover){
 .wd-hero:hover .wd-overlay,
 .wd-hero:hover .wd-overlay.wd-overlay-entered{
  animation:none;opacity:1;visibility:visible;transform:none;transition:none;
 }
}

/* Subtle scroll-driven parallax within the rounded moodboard frame. */
.wd-hero>img{
 inset:-9% 0;
 height:118%;
 transform:translate3d(0,var(--wd-parallax,0px),0) scale(1.04);
 will-change:transform;
}
@media(prefers-reduced-motion:reduce){
 .wd-hero>img{transform:none;inset:0;height:100%;will-change:auto}
}

/* Editorial back link and gentle image-by-image scroll movement. */
.wd-back-link{display:block;width:max-content;max-width:100%;margin:0 auto 14px;text-decoration:none;color:#4A481A;font:400 13px/1.3 "General Sans",sans-serif;letter-spacing:.025em;text-align:center}
.wd-back-link:hover{text-decoration:underline;text-underline-offset:4px}
.wd-photo img{transform:translate3d(0,var(--wd-photo-shift,0px),0) scale(1.045);will-change:transform}
@media(hover:hover){.wd-photo:hover img{transform:translate3d(0,var(--wd-photo-shift,0px),0) scale(1.085) rotate(-.5deg)}}
@media(prefers-reduced-motion:reduce){.wd-photo img,.wd-photo:hover img{transform:none;will-change:auto}}

/* Match the complete hero collage proportions from the PDF, without cropping. */
.wd-hero{
 min-height:0;
 display:block;
 aspect-ratio:auto;
 overflow:hidden;
}
.wd-hero>img{
 position:relative;
 inset:auto;
 display:block;
 width:100%;
 height:auto;
 object-fit:contain;
 transform:none;
 will-change:auto;
}
.wd-overlay{
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
}
@keyframes wd-overlay-appear{
 from{opacity:0;transform:translate(-50%,calc(-50% + 15px))}
 to{opacity:1;transform:translate(-50%,-50%)}
}
.wd-overlay.wd-overlay-entered{transform:translate(-50%,-50%)}
@media(hover:hover){.wd-hero:hover .wd-overlay,.wd-hero:hover .wd-overlay.wd-overlay-entered{transform:translate(-50%,-50%)}}
.wd-main{padding-top:95px}
.wd-back-link{font:400 15px/1.3 "La Siesta",cursive;text-transform:uppercase;margin-bottom:25px}
@media(max-width:760px){.wd-main{padding-top:88px}.wd-hero{min-height:0}.wd-overlay{width:92%;padding:12px 10px}.wd-overlay p{font-size:clamp(8px,2.1vw,12px);line-height:1.2;margin-bottom:6px}.wd-back-link{margin-bottom:20px}}

/* Match Welcome Party's plain centered description layout. */
.wd-description{width:min(760px,90%);margin:0 auto 30px;text-align:center;color:#4A481A}
.wd-description p{font:400 clamp(14px,1.5vw,17px)/1.45 "General Sans",sans-serif;margin:0 auto 16px}
.wedding-day-dress-page .wd-main h1{margin-bottom:18px}
.wedding-day-dress-page .wd-masonry{margin-top:0}
@media(max-width:760px){.wd-description{width:94%;margin-bottom:22px}.wd-description p{font-size:14px}}

/* Dress-code page labels and directional navigation. */
.wd-page-label{display:block;width:max-content;max-width:100%;margin:0 auto 25px;color:#4A481A;text-align:center;font:400 15px/1.3 "La Siesta",cursive;text-transform:uppercase}
.wd-attire-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:25px auto 30px;color:#3A1B21;text-decoration:none;font:400 16px/1.3 "La Siesta",cursive;text-transform:uppercase;cursor:pointer}
.wd-attire-cta span{font:400 20px/1 sans-serif;transition:transform .25s ease}
.wd-attire-cta:hover span{transform:translateX(5px)}
.wd-attire-cta:hover{text-decoration:none}
.wd-attire-cta[data-attire-direction="left"]:hover span{transform:translateX(-5px)}
@media(max-width:760px){.wd-page-label{margin-bottom:20px}.wd-attire-cta{margin:22px auto 26px}}
/* Only the full-width content stage moves. The sticky navigation is outside
   the snapshot and remains a single live, stationary element. */
@view-transition{navigation:auto}
.attire-stage{
 width:100%;
 min-height:100vh;
 background:var(--cream);
 view-transition-name:attire-stage;
}
::view-transition-old(root),::view-transition-new(root){animation:none!important}
::view-transition-old(attire-stage){animation:attire-exit-left 1.65s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(attire-stage){animation:attire-enter-right 1.65s cubic-bezier(.76,0,.24,1) both}
html[data-attire-slide="left"]::view-transition-old(attire-stage){animation-name:attire-exit-right}
html[data-attire-slide="right"]::view-transition-old(attire-stage){animation-name:attire-exit-left}
html[data-attire-slide="left"]::view-transition-new(attire-stage){animation-name:attire-enter-left}
html[data-attire-slide="right"]::view-transition-new(attire-stage){animation-name:attire-enter-right}
@keyframes attire-exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes attire-exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes attire-enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes attire-enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
 ::view-transition-old(attire-stage),::view-transition-new(attire-stage){animation:none!important}
}