/* Dress code gallery inspired by the supplied three-image layout. */
.dress-code-page{background:var(--cream)}
.dress-code-page .site-header{background:var(--cream);color:#4A481A}
.dress-code-page .site-header .logo{background:#4A481A}
.dress-code-page .site-header .logo img{opacity:0!important}
.dress-code-main{padding:clamp(115px,10vw,150px) 22px clamp(70px,8vw,110px);min-height:80vh}
.dress-code-gallery{width:min(100%,682px);margin:0 auto}
.dress-code-tile-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.dress-code-tile{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:17px;isolation:isolate;text-decoration:none;color:var(--cream)}
.dress-code-tile-wide{aspect-ratio:3.28/1}
.dress-code-tile-portrait{aspect-ratio:331/488}
.dress-code-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.dress-code-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:#3a1b21;opacity:0;transition:opacity .35s ease}
.dress-code-label{font:400 58px/1.1 "La Siesta",cursive;color:var(--cream);text-transform:lowercase;text-align:center;white-space:nowrap;transition:transform .4s cubic-bezier(.2,.8,.2,1);transform-origin:center center}
.dress-code-tile:hover::before,.dress-code-tile:focus-visible::before{opacity:.58}
.dress-code-tile:hover .dress-code-label,.dress-code-tile:focus-visible .dress-code-label{transform:scale(1.13)}
.dress-code-tile:focus-visible{outline:3px solid #4A481A;outline-offset:4px}
@media(max-width:760px){.dress-code-main{padding:110px 18px 65px}.dress-code-tile-row{gap:12px;margin-top:12px}.dress-code-label{font-size:clamp(23px,calc(7.5vw - 2px),58px)}.dress-code-tile-wide .dress-code-label{font-size:clamp(31px,calc(8vw - 2px),58px)}}
@media(prefers-reduced-motion:reduce){.dress-code-tile::before,.dress-code-label{transition:none}.dress-code-tile:hover .dress-code-label,.dress-code-tile:focus-visible .dress-code-label{transform:none}}

/* Two equal portrait cards, preserving the existing burgundy hover overlay. */
.dress-code-gallery .dress-code-tile-row{margin-top:0}
.dress-code-gallery .dress-code-label{
 white-space:normal;
 font-size:clamp(32px,4vw,51px);
 line-height:1.12;
}
@media(max-width:760px){
 .dress-code-gallery .dress-code-label{font-size:clamp(24px,5.3vw,38px)}
}


/* Use the same footer photo structure, dimensions, and reveal as the homepage. */
.dress-code-page .dress-code-main{min-height:0}
.dress-code-page .dress-code-kids-stage{
 position:relative;
 top:auto;bottom:auto;left:auto;
 width:100%;
 height:clamp(205px,23vw,300px);
 padding:0;
 background:var(--cream);
 overflow:hidden;
 display:flex;
 align-items:flex-end;
 justify-content:flex-start;
}
.dress-code-page .dress-code-kids-wrap{
 position:relative;
 width:clamp(260px,32vw,440px);
 height:100%;
}
@media(max-width:760px){
 .dress-code-page .dress-code-kids-stage{height:215px}
 .dress-code-page .dress-code-kids-wrap{width:300px}
}

/* Pull the kids photo upward into the card area to remove the empty cream gap. */
.dress-code-page .dress-code-kids-stage{
 margin-top:clamp(-170px,-12vw,-110px);
 height:clamp(205px,23vw,300px);
 z-index:3;
 pointer-events:none;
}
.dress-code-page .dress-code-main{padding-bottom:0}
@media(max-width:760px){
 .dress-code-page .dress-code-kids-stage{
  margin-top:-95px;
  height:215px;
 }
}

/* Keep portrait cards fully visible behind the photo reveal. */
.dress-code-page .dress-code-kids-stage{
 background:transparent;
 margin-top:-65px;
}
.dress-code-page .dress-code-gallery{position:relative;z-index:1}
.dress-code-page .dress-code-kids-stage{z-index:2}
@media(max-width:760px){
 .dress-code-page .dress-code-kids-stage{margin-top:-35px}
}

/* Dress Code only: delay the childhood-photo rise by a quarter second. */
@media(prefers-reduced-motion:no-preference){
 .dress-code-page .dress-code-kids-wrap{
  transition-delay:.25s;
 }
}

.dress-code-page .dress-code-tile,.dress-code-page .dress-code-tile *{cursor:pointer}
.dress-code-page .dress-code-label{user-select:none;-webkit-user-select:none}