:root{--plum:#25051e;--cream:#ffe9d5;--pink:#fa1597;--ease-out:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}html{background:var(--plum)}body{margin:0;color:var(--cream);font-family:Arial,Helvetica,sans-serif;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}button,a.button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:6px}h1:focus,h2:focus{outline:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.world{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#69063d88,transparent 65%),#25051e}.world:after{content:'';position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none}.ribbon{position:absolute;width:530px;height:1100px;border:40px solid #fd128e;border-radius:48%;box-shadow:0 0 0 22px #ffa6db,0 0 0 42px #b853ce,0 0 0 65px #ff893e,0 0 0 77px #ffdfb4;opacity:.85}.ribbon-left{left:-550px;top:-580px;transform:rotate(-32deg)}.ribbon-right{right:-550px;top:400px;transform:rotate(34deg)}.stars{position:absolute;inset:0}.ambient-star{position:absolute;animation:twinkle 4s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px #ff60bd)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:40px;min-height:60px;padding:16px 36px;border:2px solid var(--cream);border-radius:99px;color:var(--plum);background:var(--cream);font-size:20px;font-weight:800;line-height:1.2;box-shadow:5px 5px 0 var(--pink);transition:transform 160ms var(--ease-out),background 160ms ease,box-shadow 160ms ease}.button span{font-size:26px;font-weight:400}.button:active{transform:scale(.97)}
.hero-scene{position:relative;isolation:isolate;min-height:600px;height:100svh;max-height:1200px;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-content{position:relative;z-index:4;width:min(600px,49vw);text-align:center;padding:25px 0 40px}.hero-art{position:relative;padding-top:120px;max-width:580px;margin:0 auto 36px}.hero-ball{position:absolute;top:-30px;width:250px;left:calc(50% - 125px);z-index:-1}.hero-art h1{margin:0;line-height:0}.hero-title{width:100%;height:auto;display:block}.hero-dancer{position:absolute;bottom:6%;height:76%;max-height:800px;z-index:2;pointer-events:none}.hero-dancer img{display:block;height:100%;width:auto}.hero-man{left:4%}.hero-woman{right:4%}.hero-record{position:absolute;width:clamp(120px,17vw,230px);z-index:0}.record-left{top:4%;left:-4%}.record-right{right:-5%;bottom:3%}.float{animation:float 6s ease-in-out infinite alternate}.float-offset{animation-delay:-3s}
.page-action{position:relative;z-index:20;display:flex;justify-content:center;align-items:center;padding:18px 20px 22px}.page-action .button{min-width:290px}.poster{position:relative;isolation:isolate;width:min(100%,780px);aspect-ratio:2/3;margin:0 auto;overflow:hidden;background:#330321 url('assets/pristine/background.webp') center/100% 100% no-repeat}.poster-layer{position:absolute;display:block;object-fit:fill;pointer-events:none}.poster-art-button{padding:0;border:0;background:none;pointer-events:auto;cursor:pointer}.poster-art-button img{width:100%;height:100%;object-fit:fill;display:block}.poster-art-button:focus-visible{outline:3px solid #fff;outline-offset:-4px;border-radius:50%}.poster .sparkle{filter:drop-shadow(0 0 4px currentColor)}
.entrance{animation:fly-in 1050ms var(--ease-out) both;animation-delay:var(--delay,0ms)}.page-exit{animation:fade-out 160ms ease both}.wardrobe-poster{max-width:1280px;margin:0 auto;background:#330321 url('assets/pristine/background.webp') center/100% 100% no-repeat;overflow:hidden;isolation:isolate}.outfit-art{position:relative;height:clamp(160px,24vw,300px);display:flex;align-items:center;justify-content:center;isolation:isolate}.outfit-art h2{width:89%;margin:0;position:relative;z-index:3;line-height:0}.outfit-art h2 img{width:100%;height:auto}.outfit-ball{position:absolute;top:-30%;left:36%;width:28%;height:auto;z-index:0}.outfit-record{position:absolute;top:-8%;width:21%;z-index:1}.outfit-record-left{left:4%}.outfit-record-right{right:3%}.outfit-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px 8px;padding:0 14px 24px;position:relative;z-index:4}.look{margin:0;position:relative;min-width:0;border:3px solid var(--pink);border-radius:35px 35px 15px 15px;overflow:hidden;background:var(--cream)}.look img{display:block;width:100%;height:auto;aspect-ratio:128/326;object-fit:cover}.look{--from-x:-100vw;--turn:-12deg}.look:nth-child(even){--from-x:100vw;--turn:12deg}
@keyframes fly-in{from{opacity:0;transform:translate3d(var(--from-x,100vw),var(--from-y,0),0) rotate(var(--turn,10deg)) scale(.95)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}}@keyframes float{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-10px) rotate(1deg)}}@keyframes twinkle{from{opacity:.3;transform:scale(.9)}to{opacity:.85;transform:scale(1.1)}}@keyframes fade-out{to{opacity:0}}
@media(hover:hover) and (pointer:fine){.button:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--pink);background:#fff6ec}}
@media(min-width:1600px){.hero-man{left:calc(50% - 690px)}.hero-woman{right:calc(50% - 690px)}}
@media(max-width:1000px){.hero-content{width:55vw}.hero-dancer{height:65%;bottom:7%}.hero-man{left:-3%}.hero-woman{right:-3%}.hero-art{padding-top:95px}.hero-ball{width:220px;left:calc(50% - 110px)}.outfit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px;padding:0 16px 22px}}
@media(max-width:640px){.hero-scene{min-height:620px;max-height:960px;align-items:flex-start}.hero-content{width:94%;padding:0;top:8svh}.hero-art{width:90%;padding-top:120px;margin:0 auto 40px}.hero-ball{top:0;width:200px;left:calc(50% - 100px)}.hero-dancer{height:43%;bottom:0}.hero-man{left:-9%}.hero-woman{right:-10%}.hero-record{width:120px}.record-left{left:-45px;top:8%}.record-right{right:-55px;bottom:0}.hero-content .button{min-width:200px}.button{font-size:18px;min-height:58px;padding:14px 28px;gap:24px}.page-action{padding:16px 15px 20px}.page-action .button{width:100%;max-width:390px;min-width:0}.ribbon-left{left:-615px;top:-450px}.ribbon-right{right:-640px;top:300px}.outfit-art{height:155px}.outfit-art h2{width:96%}.outfit-ball{width:36%;left:32%;top:-15%}.outfit-record{top:0;width:25%}.outfit-grid{gap:10px 6px;padding:0 7px 16px}.look{border-width:2px;border-radius:25px 25px 9px 9px}}
@media(max-width:360px){.hero-art{padding-top:105px}.hero-ball{width:180px;left:calc(50% - 90px)}.hero-content{top:6svh}.hero-dancer{height:40%}}
@media(prefers-reduced-motion:reduce){.entrance{animation:gentle-in 180ms ease both!important;animation-delay:0ms!important}.float,.ambient-star{animation:none!important}.button{transition:background 160ms ease}.button:hover,.button:active{transform:none}.page-exit{animation:fade-out 120ms ease both}@keyframes gentle-in{from{opacity:0}to{opacity:1}}}
body[data-page="invitation"] .world .ribbon,body[data-page="invitation"] .world .stars,body[data-page="outfits"] .world .ribbon,body[data-page="outfits"] .world .stars{display:none}
/* The artwork belongs to the scene, rather than to a rectangular poster. */
body[data-page="invitation"] .world,body[data-page="outfits"] .world{background:#330321 url('assets/pristine/background.webp') center/100% 100% no-repeat}
body[data-page="invitation"] .world .stars,body[data-page="outfits"] .world .stars{display:block}
.poster{width:100%;max-width:none;margin:0;background:none;overflow:visible}
.cutout{display:block;width:100%;height:100%;object-fit:fill}
.invitation-details{position:absolute;left:22.65625%;top:49.34896%;width:58.59375%;height:48.17708%;z-index:2}
.drift{animation:scene-drift 7s ease-in-out infinite alternate}
.wardrobe-poster{width:100%;max-width:none;background:none;overflow:visible;padding-bottom:24px}
.outfit-art{height:clamp(180px,26vw,340px)}
.outfit-art h2{width:min(86%,1120px)}
.outfit-ball{width:clamp(180px,29vw,360px);left:calc(50% - clamp(90px,14.5vw,180px));top:-45px}
.outfit-record{width:clamp(120px,18vw,230px);top:12px}
.outfit-record-left{left:5%}.outfit-record-right{right:5%}
.outfit-grid{gap:30px 16px;padding:12px clamp(12px,3vw,52px) 35px}
.look{border:0;background:none;overflow:visible;border-radius:0}
.look-card{overflow:hidden;border:3px solid var(--pink);border-radius:35px 35px 15px 15px;background:var(--cream);box-shadow:0 12px 30px #20001645}
@keyframes scene-drift{from{transform:translateY(0) rotate(-.65deg)}to{transform:translateY(-9px) rotate(.65deg)}}
@media(min-width:850px){
 .poster{aspect-ratio:auto;height:1030px;min-height:calc(100svh - 100px)}
 .invitation-details{width:min(480px,52vw);height:auto;aspect-ratio:600/740;left:50%;top:420px;transform:translateX(-50%)}
 .poster>[data-art="ball.webp"]{left:calc(50% - 150px)!important;top:-75px!important;width:300px!important;height:373px!important}
 .poster>[data-art="title.webp"]{left:50%!important;top:105px!important;width:min(560px,47vw)!important;height:auto!important;aspect-ratio:657/433;margin-left:calc(min(560px,47vw)/-2)}
 .poster>[data-art="man.webp"]{left:2%!important;top:95px!important;width:min(28vw,350px)!important;height:660px!important}
 .poster>[data-art="woman.webp"]{left:auto!important;right:2%;top:180px!important;width:min(26vw,305px)!important;height:685px!important}
 .poster>[data-art="man.webp"] .cutout,.poster>[data-art="woman.webp"] .cutout{object-fit:contain}
 .poster>[data-art="martini.webp"]{left:auto!important;right:3%;top:-20px!important;width:min(24vw,285px)!important;height:285px!important}
 .poster>[data-art="boots.webp"]{left:auto!important;right:8%;top:750px!important;width:230px!important;height:280px!important}
 .poster>[data-art="cocktail.webp"]{left:17%!important;top:760px!important;width:150px!important;height:225px!important}
 .poster>[data-art="record.webp"][data-x="-14"]{left:-45px!important;top:-20px!important;width:210px!important;height:210px!important}
 .poster>[data-art="record.webp"][data-x="924"]{left:auto!important;right:-70px;top:500px!important;width:220px!important;height:220px!important}
 .poster>[data-art="record.webp"][data-x="-30"]{left:-40px!important;top:790px!important;width:250px!important;height:250px!important}
 .poster>.sparkle{width:clamp(30px,5vw,75px)!important;height:auto!important;aspect-ratio:1}
 .poster>[data-art="mirror-confetti.svg"]{width:45px!important;height:45px!important}
 .poster>[data-art="mirror-confetti.svg"][data-y="289"]{left:12%!important}
}
@media(max-width:849px){.poster{margin-top:8px;margin-bottom:30px}.outfit-art{height:220px}.outfit-grid{gap:22px 12px}.outfit-art h2{width:93%}}
@media(max-width:640px){.outfit-art{height:155px}.outfit-art h2{width:95%}.outfit-record{width:25%;top:5px}.outfit-record-left{left:1%}.outfit-record-right{right:1%}.outfit-ball{width:37%;left:31.5%;top:-15px}.outfit-grid{gap:20px 8px;padding:12px 10px 25px}.look-card{border-width:2px;border-radius:25px 25px 9px 9px}}
@media(prefers-reduced-motion:reduce){.drift{animation:none!important}}
main{overflow:clip}

/* Draw attention without moving the link's hit target or shifting the artwork. */
.page-action .outfit-cta{position:relative;isolation:isolate;min-width:330px;min-height:68px;font-size:23px;letter-spacing:.3px;background:linear-gradient(115deg,#ff8bce,#ffc387);border:3px solid #fff1d8;box-shadow:0 6px 0 #a90065,0 0 28px #ff3eac99}
.outfit-cta::before{content:'';position:absolute;inset:-7px;border:2px solid #fff1d8;border-radius:inherit;pointer-events:none;animation:outfit-beacon 3.2s var(--ease-out) infinite;z-index:-1}
.outfit-cta span{display:inline-block;animation:outfit-arrow 3.2s var(--ease-out) infinite}
@keyframes outfit-beacon{0%{transform:scale(1);opacity:.75}58%,100%{transform:scale(1.12,1.3);opacity:0}}
@keyframes outfit-arrow{0%,12%,35%,100%{transform:translate(0,0)}22%{transform:translate(4px,-4px)}}
.outfit-cta:focus-visible::before{animation:none;opacity:0}
@media(hover:hover) and (pointer:fine){.outfit-cta:hover{background:linear-gradient(115deg,#ffa3d8,#ffd7ab);box-shadow:0 8px 0 #a90065,0 0 34px #ff3eacaa}.outfit-cta:hover::before{animation:none;opacity:0}}
@media(max-width:640px){.page-action .outfit-cta{min-width:0;font-size:21px;min-height:66px}}
@media(prefers-reduced-motion:reduce){.outfit-cta::before,.outfit-cta span{animation:none!important}.outfit-cta::before{opacity:.4}}