:root{color-scheme:light;--cream:#ffe7ce;--pink:#ff0086;--purple:#8d20ba;--ink:#171015;--yellow:#ffca00}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.party{min-height:100svh;display:grid;place-items:center;padding:28px 24px 36px;background:var(--cream) url('assets/background.jpg') center/100% 100% no-repeat;isolation:isolate}
.content{width:min(100%,560px);text-align:center;position:relative}
.eyebrow{font-size:13px;letter-spacing:.38em;font-weight:900;line-height:1.8;margin:0 0 24px;color:var(--pink)}
.eyebrow span{color:var(--ink);letter-spacing:.24em}
h1{margin:0 0 26px;position:relative}
h1:before{content:'';position:absolute;width:67%;aspect-ratio:1;left:16.5%;top:50%;transform:translateY(-50%);background:var(--yellow);border-radius:50%;z-index:-1}
.logo{width:100%;height:auto;display:block}
.date{display:inline-flex;flex-direction:column;background:var(--pink);padding:10px 22px 12px;color:var(--cream);transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink)}
.date>span{font-size:11px;letter-spacing:.5em;font-weight:700;margin-bottom:5px}
.date time{font-size:clamp(24px,7vw,38px);font-weight:950;letter-spacing:-.055em;white-space:nowrap}
.details{display:flex;justify-content:center;align-items:center;gap:12px;font-size:12px;font-weight:900;margin:19px 0 23px}
.details span+span{border-left:2px solid var(--ink);padding-left:12px}
.lineup h2{font-size:clamp(25px,7vw,36px);line-height:1.06;letter-spacing:-.045em;margin:0;font-weight:900}
.lineup em{font-style:normal;color:var(--purple)}
.lineup p{font-size:13px;font-weight:700;margin:9px 0 23px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;width:min(100%,400px);margin:auto;padding:16px 20px;border:2px solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:4px 5px 0 var(--ink);color:var(--ink);text-decoration:none;font-weight:900;font-size:14px;transition:transform .15s,box-shadow .15s}
.cta>span:last-child{font-size:26px;line-height:1}
.cta:hover{transform:translate(-1px,-2px);box-shadow:5px 7px 0 var(--ink)}
.cta:active{transform:translate(3px,3px);box-shadow:1px 2px 0 var(--ink)}
.cta:focus-visible{outline:4px solid var(--purple);outline-offset:7px}
.footnote{font-size:11px;margin:16px 0 0;font-weight:700}
@media(min-width:700px){.party{padding:48px 100px;background-size:100% 100%}.content{width:560px}.eyebrow{font-size:15px;margin-bottom:28px}.logo{width:560px}.date time{font-size:36px}.details{font-size:15px}.lineup h2{font-size:36px}.cta{font-size:16px}.lineup p{font-size:15px}}
@media(max-height:700px) and (max-width:699px){.party{padding:22px 26px 24px}.eyebrow{margin-bottom:16px;font-size:10px}h1{margin-bottom:20px}.logo{max-width:330px;margin:auto}.date{padding:7px 18px 9px}.date time{font-size:26px}.details{margin:16px 0}.lineup h2{font-size:27px}.lineup p{margin-bottom:18px}.cta{min-height:56px}.footnote{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.cta{transition:none}}