:root{color-scheme:dark;font-family:"Helvetica Neue",Arial,sans-serif;background:#10110f;color:#f2f0e9}
*{box-sizing:border-box}
body{margin:0}
main{--header-height:140px;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;overflow:hidden;background:#10110f}
.stadium{position:absolute;inset:var(--header-height) 0 0;z-index:-3;width:min(80vw,calc((100svh - var(--header-height))*1.77683));max-width:none;height:auto;object-fit:contain;object-position:left top;mask-image:linear-gradient(90deg,#000 0%,#000 82%,transparent 100%),linear-gradient(180deg,#000 0%,#000 92%,transparent 100%);mask-composite:intersect}
main::after{content:"";position:absolute;inset:var(--header-height) 0 0;z-index:-2;background:linear-gradient(90deg,#0c0e0cb8 0%,#0c0e0c60 30%,transparent 65%),linear-gradient(270deg,#10110f 0%,#10110f90 9%,transparent 25%),linear-gradient(0deg,#10110f40,transparent 24%)}
header{height:var(--header-height);flex:none;background:#11120f;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 6%;border-bottom:1px solid #ffffff20}
.brand{position:relative;display:block;flex:none;width:112px;aspect-ratio:770/520;overflow:hidden}.brand img{position:absolute;max-width:none;width:199.4805%;height:auto;left:-40.2597%;top:-23.0769%;filter:url(#logo-transparency)}
section{width:100%;padding:clamp(70px,12vh,150px) 8%;margin:auto 0}
h1{font-size:clamp(48px,6.7vw,96px);font-weight:400;line-height:1.06;letter-spacing:-.055em;margin:0 0 36px}
em{font-family:Georgia,serif;font-weight:400;color:#d7bd7d}
.date{font-size:clamp(23px,2.3vw,32px);line-height:1.35;margin:0 0 16px}
time{color:#e7ce93;font-weight:600}
.message{max-width:330px;font-size:16px;line-height:1.7;color:#d7d7cf;margin:0}
@media(max-width:600px){main{--header-height:111px}header{padding:23px 7%}.brand{width:96px}.stadium{width:100%;height:calc(100% - var(--header-height));object-fit:cover;object-position:63% center;mask-image:none}main::after{background:linear-gradient(90deg,#0c0e0ce6,#0c0e0ca6 60%,#0c0e0c40),linear-gradient(0deg,#10110fe6,transparent 35%)}section{padding:80px 7% 100px}h1{font-size:clamp(43px,11vw,66px)}.message{max-width:265px;font-size:15px}}

.card-preview{display:none}
@media(min-width:768px){.card-preview{display:block;position:absolute;right:4.5%;bottom:95px;width:clamp(250px,27vw,510px);height:auto;transform:rotate(-8deg);border-radius:18px;box-shadow:0 22px 48px #0009;z-index:1}section{position:relative;z-index:2;pointer-events:none}h1{max-width:62%}}
@media(min-width:768px) and (max-width:1024px){.card-preview{right:5%;bottom:100px;width:32vw}h1{font-size:clamp(48px,6.7vw,69px)}section{padding-bottom:240px}}

.membership-footer{margin:0 6%;padding:24px 0;border-top:1px solid #ffffff25;text-align:right;font-size:9px;line-height:1.7;letter-spacing:.15em;color:#aaa99e}
@media(max-width:600px){.membership-footer{margin:0 7%;padding:20px 0;font-size:8px}}

/* Portrait composition: card follows the invitation within the same screen. */
@media(max-width:767px),(orientation:portrait){
 main{--header-height:clamp(72px,12svh,111px)}
 header{padding:12px 7%}
 .brand{width:clamp(70px,11svh,96px)}
 .stadium{width:100%;height:calc(100% - var(--header-height));object-fit:cover;object-position:63% center;mask-image:none}
 main::after{background:linear-gradient(90deg,#0c0e0ce6,#0c0e0ca6 60%,#0c0e0c40),linear-gradient(0deg,#10110fe6,transparent 35%)}
 section{position:relative;width:100%;padding:clamp(14px,3svh,32px) 7% clamp(10px,2svh,22px);margin:auto 0 0}
 h1{max-width:none;font-size:clamp(32px,min(8.7vw,7svh),60px);margin-bottom:clamp(14px,2.5svh,26px)}
 .date{font-size:clamp(19px,4.8vw,28px);margin-bottom:10px}
 .message{max-width:330px;font-size:clamp(13px,3.5vw,16px);line-height:1.5}
 .card-preview{display:block;position:relative;right:auto;bottom:auto;flex:none;width:min(76vw,460px,42svh);height:auto;margin:clamp(12px,2.5svh,28px) auto auto;transform:rotate(-5deg);border-radius:12px;box-shadow:0 16px 34px #0009;z-index:1}
 .membership-footer{flex:none;margin:clamp(18px,3svh,32px) 7% 0;padding:14px 0;font-size:8px}
}

.logo-filter{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}