:root { color-scheme: light; font-family: 'aktiv-grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #222529; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { min-height: 100svh; display: flex; flex-direction: column; position: relative; overflow: hidden; isolation: isolate; }
.art { position: absolute; z-index: -1; pointer-events: none; inset: 0; }
.shape { position: absolute; }
.pink { width: 61vw; height: 65vw; max-width: 900px; max-height: 950px; background: #fac1c2; border-radius: 48% 52% 65% 35% / 38% 37% 63% 62%; left: -28vw; top: -20vw; transform: rotate(-24deg); }
.yellow { width: 35vw; height: 35vw; background: #fff53e; border-radius: 50%; right: -13vw; bottom: -12vw; }
.mint { width: 24vw; height: 14vw; background: #a6ffee; border-radius: 48% 52% 38% 62%; right: 12vw; top: -8vw; transform: rotate(25deg); }
main { width: min(1120px, 100%); margin: auto; padding: 130px 7vw 110px; }
.hero { margin-left: 22%; max-width: 750px; }
h1 { font-size: clamp(64px, 10.5vw, 144px); font-weight: 300; letter-spacing: -.065em; line-height: 1; margin: 0 0 34px; }
time { display: inline-block; padding: 9px 18px; background: #fff53e; font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; transform: rotate(-2deg); }
.description { font-size: clamp(23px, 3vw, 36px); font-weight: 300; line-height: 1.4; max-width: 610px; margin: 42px 0 32px; letter-spacing: -.025em; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 3px solid #222529; outline-offset: 6px; }
.organizer { display: inline-block; background: #a6ffee; padding: 6px 11px; font-size: 15px; text-decoration: none; }
.organizer:hover { background: #fac1c2; }
footer { padding: 30px 7vw 36px; font-size: 15px; }
footer a { display: inline-flex; gap: 20px; align-items: center; }
footer a:hover { text-decoration-thickness: 2px; }
@media (min-width: 1500px) { .pink { left: -340px; top: -340px; } }
@media (max-width: 600px) { main { padding: 150px 8vw 80px; } .hero { margin-left: 0; } .pink { width: 95vw; height: 110vw; left: -53vw; top: -51vw; } .mint { width: 55vw; height: 33vw; right: -15vw; top: -19vw; } .yellow { width: 70vw; height: 70vw; right: -38vw; bottom: -28vw; } footer { padding: 25px 8vw 32px; } }
.location { margin: 23px 0 0; font-size: clamp(17px, 2vw, 22px); font-weight: 400; }
.shape { will-change: transform; }
.pink { animation: pink-drift 31s ease-in-out infinite alternate; }
.mint { animation: mint-drift 37s ease-in-out infinite alternate; animation-delay: -13s; }
.yellow { animation: yellow-drift 43s ease-in-out infinite alternate; animation-delay: -21s; }
@keyframes pink-drift { from { transform: translate(-1%, -1%) rotate(-24deg) scale(1); border-radius: 48% 52% 65% 35% / 38% 37% 63% 62%; } to { transform: translate(5%, 4%) rotate(-13deg) scale(1.04, .97); border-radius: 57% 43% 54% 46% / 48% 55% 45% 52%; } }
@keyframes mint-drift { from { transform: translate(-4%, 2%) rotate(25deg) scale(1); border-radius: 48% 52% 38% 62%; } to { transform: translate(5%, 12%) rotate(12deg) scale(1.07, 1.03); border-radius: 58% 42% 56% 44%; } }
@keyframes yellow-drift { from { transform: translate(2%, 3%) rotate(0deg) scale(1); border-radius: 50%; } to { transform: translate(-8%, -5%) rotate(-12deg) scale(1.04, .96); border-radius: 44% 56% 61% 39% / 54% 46% 54% 46%; } }
@media (prefers-reduced-motion: reduce) { .shape { animation: none; will-change: auto; } }