@font-face{font-family:"Anton";src:url(fonts/anton-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-latin.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --sun:#FFC83D;
  --sun-light:#FFE08A;
  --sunset:#FF6F91;
  --plum:#3A1747;
  --dusk:#25103F;
  --night:#140B2B;
  --pool:#5FE3E8;
  --white:#FFFFFF;
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --text:"Bricolage",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(1rem,4vw,3rem);
  --max:72rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;font-family:var(--text);font-size:1.125rem;line-height:1.55;color:var(--plum);background:var(--night)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--pool);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--plum);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
[hidden]{display:none !important}

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.1rem;padding-bottom:1.1rem}
.brand{font-family:var(--display);font-size:1.35rem;letter-spacing:.01em;text-decoration:none;line-height:1}
.nav{display:flex;gap:clamp(.8rem,2.5vw,1.8rem);align-items:center;font-weight:600;font-size:1rem}
.nav a{text-decoration:none;border-bottom:2px solid transparent;padding:.2rem 0}
.nav a:hover{border-color:currentColor}
.nav .buy{background:var(--plum);color:var(--sun);padding:.5rem 1rem;border-radius:999px;border:0}
.nav .buy:hover{background:var(--dusk)}
@media (max-width:640px){.nav a:not(.buy){display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--sun);min-height:min(100svh,56rem);display:flex;align-items:flex-end;padding:7rem 0 clamp(3rem,7vw,5rem)}
.sun{position:absolute;width:min(110vw,64rem);aspect-ratio:1;right:-28%;top:-38%;color:var(--sun-light);animation:spin 160s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sun{animation:none}html{scroll-behavior:auto}}
.hero .wrap{position:relative;width:100%}
.title{font-family:var(--display);font-weight:400;font-size:clamp(4.6rem,17.5vw,14.5rem);line-height:.84;margin:0;letter-spacing:-.005em;text-transform:uppercase}
.title span{display:block}
.title small{display:block;font-family:var(--text);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.4rem);text-transform:none;letter-spacing:0;line-height:1.1;margin-top:.9rem}
.lede{max-width:34rem;font-size:clamp(1.1rem,1.6vw,1.3rem);margin:1.6rem 0 0}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2rem}
.status p{margin:0;font-weight:600;max-width:30rem}
.btn{display:inline-block;font-family:var(--display);font-size:1.5rem;letter-spacing:.02em;text-decoration:none;background:var(--plum);color:var(--sun);padding:.75rem 1.6rem;border-radius:999px;line-height:1}
.btn:hover{background:var(--dusk)}

/* about: the sunset */
.about{background:linear-gradient(180deg,var(--sun) 0%,#FF9D6B 28%,var(--sunset) 52%,#8E2F6B 78%,var(--dusk) 100%);padding:clamp(3rem,8vw,6rem) 0 clamp(4rem,10vw,8rem)}
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.about h2,.history h2,.photos h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6.5vw,4.8rem);line-height:.95;margin:0 0 1.2rem;text-transform:uppercase}
.about p{max-width:36rem;margin:0 0 1rem}
.facts{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.9rem}
.facts li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;border-top:2px solid var(--plum);padding-top:.7rem}
.facts b{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.1}
.collage{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:auto auto;gap:.6rem}
.collage figure{margin:0;overflow:hidden;border-radius:4px}
.collage img{width:100%;height:100%;object-fit:cover}
.collage .c1{grid-column:1 / 7;aspect-ratio:3/2;border-radius:4px 4px 4px 4px}
.collage .c2{grid-column:1 / 4;aspect-ratio:1}
.collage .c3{grid-column:4 / 7;aspect-ratio:1}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}

/* history: dusk into night */
.history{color:var(--white);background:linear-gradient(180deg,var(--dusk) 0%,var(--night) 30rem);padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,5rem);position:relative}
.history::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 8%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 33% 3%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 12%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 81% 5%,#fffa 50%,transparent 51%),radial-gradient(1px 1px at 92% 16%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 24% 20%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 70% 22%,#fff7 50%,transparent 51%);pointer-events:none}
.history .wrap{position:relative}
.history .intro{max-width:38rem;color:#E6DDF2;margin:0 0 3rem}
.years{list-style:none;margin:0;padding:0}
.year{display:grid;grid-template-columns:clamp(7rem,22vw,12rem) minmax(0,1fr);gap:clamp(1rem,4vw,3rem);padding:1.8rem 0;border-top:1px solid #ffffff2e}
.year:last-child{border-bottom:1px solid #ffffff2e}
.year-num{font-family:var(--display);font-size:clamp(3rem,8vw,5.5rem);line-height:.85;color:var(--sun);margin:0}
.year-meta{display:block;font-size:.95rem;color:#CFC3E0;margin-top:.6rem;font-family:var(--text)}
.lineup{list-style:none;margin:0;padding:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(1.35rem,2.9vw,2.15rem);line-height:1.15;letter-spacing:.01em}
.lineup li:not(:last-child)::after{content:"/";color:var(--sunset);margin:0 .4em 0 .45em}
.lineup li{display:inline-block;max-width:100%}
@media (min-width:420px){.lineup li{white-space:nowrap}}
.lineup li:first-child{font-size:1.35em}
.extra{margin:.8rem 0 0;font-size:.95rem;color:#CFC3E0}
.resident{margin:2.5rem 0 0;max-width:38rem;color:#E6DDF2}
.resident b{color:var(--sun);font-weight:700}
@media (max-width:600px){.year{grid-template-columns:1fr;gap:.6rem}}

/* photos */
.photos{background:var(--night);color:var(--white);padding:clamp(3rem,7vw,5rem) 0 clamp(4rem,8vw,6rem)}
.photos .intro{max-width:38rem;color:#E6DDF2;margin:0 0 2rem}
.grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14rem,45%),1fr));grid-auto-rows:10rem;grid-auto-flow:dense;gap:.5rem}
.grid li{overflow:hidden;border-radius:4px;background:var(--dusk)}
.grid li.big{grid-column:span 2;grid-row:span 2}
.grid button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.grid button:focus-visible{outline:3px solid var(--pool);outline-offset:-3px}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.grid button:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.grid img{transition:none}}
.credit{margin:1.6rem 0 0;font-size:.95rem;color:#CFC3E0}
.credit a{color:var(--pool)}
.reports{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:.6rem 0 0;padding:0;list-style:none;font-weight:600}
.reports a{color:var(--white);text-decoration-color:var(--sunset);text-underline-offset:.2em}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);max-height:92vh;color:var(--white)}
dialog.lb::backdrop{background:#0a0616e6}
dialog.lb img{max-height:82vh;width:auto;margin:0 auto;border-radius:4px}
dialog.lb figcaption{text-align:center;font-size:.95rem;padding:.7rem 0 0;color:#E6DDF2}
.lb-close{position:fixed;top:1rem;right:1rem;background:var(--sun);color:var(--plum);border:0;border-radius:999px;font:700 1rem var(--text);padding:.55rem 1rem;cursor:pointer}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:#ffffff22;color:var(--white);border:0;border-radius:999px;width:3rem;height:3rem;font:700 1.4rem var(--text);cursor:pointer}
.lb-nav:hover{background:#ffffff44}
.lb-prev{left:1rem}.lb-next{right:1rem}

/* footer */
.foot{background:#0C0720;color:#CFC3E0;padding:3rem 0 2.5rem;font-size:1rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot h3{font-family:var(--display);font-weight:400;color:var(--white);font-size:1.4rem;margin:0 0 .6rem;letter-spacing:.01em}
.foot p,.foot ul{margin:0}
.foot ul{list-style:none;padding:0;display:grid;gap:.35rem}
.foot a{color:var(--white);text-underline-offset:.2em}
.foot .fine{margin-top:2.5rem;font-size:.85rem;color:#9E92B3}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}