/* The Witch's Ball — rebuilt 2026-11 */
:root{
  --dark:#232325; --cream:#f7f1e8; --pink:#e8c1cb; --maroon:#541d1c; --sand:#e7d4b8;
  --ink:#232325; --rose:#f2d9df;
  --display:"Almendra SC", serif; --body:"Nunito Sans", system-ui, sans-serif; --alt:"Forum", serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--sand)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.8rem,7.5vw,6.4rem)}
@media(min-width:900px){.hero h1{white-space:nowrap}}
h2{font-size:clamp(2.2rem,5vw,4.2rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.caps{font-family:var(--display);text-transform:none}
p{margin:0 0 1.1em}
.wrap{width:min(1180px,92vw);margin:0 auto}
.center{text-align:center}

/* themes */
.t-dark{background:var(--dark);color:var(--cream)}
.t-cream{background:var(--cream);color:var(--ink)}
.t-maroon{background:var(--maroon);color:var(--cream)}
.t-pinktext h2,.t-dark .pink{color:var(--pink)}
.t-dark h2.alt{color:var(--pink)}

section{padding:clamp(3.5rem,8vw,7rem) 0;position:relative}

/* header */
header.site{position:absolute;inset:0 0 auto 0;z-index:20;padding:1.4rem 0}
header.site .row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
header.site .brand{font-family:var(--display);font-size:1.4rem;text-decoration:none;color:var(--cream)}
header.site nav{display:flex;gap:1.6rem;font-size:.85rem;letter-spacing:.04em}
header.site nav a{text-decoration:none;color:var(--cream);opacity:.9}
header.site nav a:hover,header.site nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:.4em}
header.site.on-light .brand,header.site.on-light nav a{color:var(--ink)}
header.site .burger{display:none;background:none;border:0;color:inherit;font-size:1.6rem}
@media(max-width:760px){header.site nav{display:none}header.site nav.open{display:flex;flex-direction:column;position:absolute;top:100%;right:4vw;background:var(--dark);padding:1rem 1.4rem;border-radius:8px}header.site .burger{display:block;color:var(--cream)}}

/* buttons */
.btn{display:inline-block;padding:.95rem 2.6rem;font-family:var(--body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid currentColor;border-radius:2px;transition:.2s}
.btn.solid{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.btn.solid:hover{background:var(--cream)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.t-cream .btn.ghost:hover{background:rgba(0,0,0,.05)}
.btn-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* hero */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:7rem 0 5rem;color:var(--cream)}
.hero .media{position:absolute;inset:0;z-index:0}
.hero .media video,.hero .media img{width:100%;height:100%;object-fit:cover}
.hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(84,29,28,.55),rgba(120,30,110,.55));mix-blend-mode:multiply}
.hero .media::before{content:"";position:absolute;inset:0;background:rgba(20,10,25,.35);z-index:1}
.hero .inner{position:relative;z-index:2;max-width:820px}
.hero .rule{width:120px;height:1px;background:var(--cream);opacity:.6;margin:1.2rem auto}
.hero small{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.hero p{font-size:1.05rem;max-width:560px;margin:1.4rem auto 2rem}

/* angled top */
.peak{padding-top:clamp(5rem,10vw,9rem)}
.peak::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(40px,6vw,90px);background:inherit;clip-path:polygon(0 100%,50% 0,100% 100%);transform:translateY(-99%)}
.t-cream + .peak.t-dark::before{background:var(--dark)}

/* come one */
.ticket{width:min(760px,90%);margin:2rem auto}
.subhead{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.8rem);text-align:center;margin:1.5rem auto .5rem}
.lead{max-width:900px;margin:0 auto 1.2rem;text-align:center}
.tix{display:flex;gap:.6rem;justify-content:center}
.tix .btn{padding:1.2rem 2.6rem;border-color:#b9b2a8;font-size:.78rem}

/* acts */
.posters{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:3.5rem;align-items:center;width:min(1300px,92vw);margin:2.5rem auto 3rem}
.posters img{border-radius:4px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.posters a:hover img{transform:translateY(-4px);transition:.25s}
.acts{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:2rem;width:min(1300px,92vw);margin:0 auto}
.acts ul{list-style:none;margin:0;padding:0;text-align:center}
.acts li{font-family:var(--display);font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.15;color:var(--cream)}
.acts li:nth-child(even){color:var(--pink)}
.acts .eye{display:flex;flex-direction:column;gap:1rem;align-items:center}
.acts .eye img{width:min(220px,60%);filter:drop-shadow(0 0 18px rgba(232,193,203,.35))}
@media(max-width:860px){.posters{grid-template-columns:1fr;max-width:520px}.acts{grid-template-columns:1fr}.acts .eye{display:none}}

/* gallery grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.grid img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:brightness(.72);transition:.3s}
.grid img:hover{filter:brightness(1)}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}

/* tales */
.tales{min-height:60vh;display:grid;place-items:center;text-align:center;color:var(--cream)}
.tales .bg{position:absolute;inset:0;background:center/cover no-repeat}
.tales .bg::after{content:"";position:absolute;inset:0;background:rgba(35,35,37,.55)}
.tales .inner{position:relative}

/* social club */
.club{text-align:center}
.club .kicker{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;opacity:.8;margin-bottom:1rem}
.club h2{margin-bottom:.1em}
.club .where{font-family:var(--display);font-size:1.4rem;margin-bottom:2rem;opacity:.9}
.club p{max-width:720px;margin:0 auto 1.1em}

/* footer */
footer{background:var(--maroon);color:var(--cream);text-align:center;padding:4rem 0 2.5rem}
footer .follow{font-family:var(--display);font-size:1.9rem;display:inline-flex;align-items:center;gap:.8rem;text-decoration:none}
footer .ig{width:22px;height:22px;fill:currentColor}
footer .top{display:block;margin-top:2rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;text-decoration:none}
footer .fine{margin-top:2.5rem;font-size:.75rem;opacity:.55}

/* page hero (interior) */
.page-hero{padding-top:9rem}

/* VIP */
.vip .intro{max-width:760px;margin:0 auto}
.perks{list-style:none;padding:0;margin:2rem auto;max-width:720px;text-align:center}
.perks li{font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.7rem);padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.t-cream .perks li{border-color:rgba(0,0,0,.1)}
.vip-pics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:3rem auto}
.vip-pics img{aspect-ratio:3/4;object-fit:cover}
@media(max-width:700px){.vip-pics{grid-template-columns:repeat(2,1fr)}}

/* Get Styled */
.styled{background:var(--maroon);color:var(--cream)}
.styled .bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.35;filter:saturate(.8)}
.styled .layout{position:relative;display:grid;grid-template-columns:1.1fr 1.6fr 1fr;gap:2.5rem;align-items:center}
.styled .nina{border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.styled .copy{text-align:center}
.styled .copy h1{font-size:clamp(2.6rem,5.6vw,5rem)}
.styled .copy p{max-width:560px;margin:0 auto 1em;font-size:.98rem}
.styled .panel{background:var(--dark);color:var(--cream);padding:2.2rem 1.8rem;border-radius:48% 48% 48% 48%/36% 36% 36% 36%;text-align:center}
.styled .panel h3{color:var(--pink)}
.styled .panel p{font-size:.92rem}
@media(max-width:900px){.styled .layout{grid-template-columns:1fr}.styled .panel{border-radius:18px}}

/* contact */
.contact{min-height:100svh;display:grid;align-items:center;color:var(--cream)}
.contact .bg{position:absolute;inset:0;background:center/cover no-repeat}
.contact .bg::after{content:"";position:absolute;inset:0;background:rgba(20,16,40,.6)}
.contact .inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.contact h1{font-size:clamp(2.4rem,5vw,4.6rem)}
form.coven label{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin:1rem 0 .35rem;opacity:.85}
form.coven input,form.coven textarea{width:100%;padding:.8rem;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.06);color:var(--cream);font:inherit;border-radius:3px}
form.coven textarea{min-height:120px}
form.coven .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form.coven .btn{margin-top:1.4rem}
@media(max-width:800px){.contact .inner{grid-template-columns:1fr}}

/* tickets */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin:2rem 0 3rem}
.tiers h2{font-size:clamp(2rem,4vw,3.4rem);color:var(--pink)}
.tiers ul{list-style:none;padding:0;margin:0;font-family:var(--display);font-size:1.05rem;letter-spacing:.03em}
.tiers li{padding:.3rem 0;opacity:.9}
.notice{border:1px solid rgba(255,255,255,.25);padding:1.6rem;border-radius:6px;background:rgba(255,255,255,.04);text-align:center}
.faq details{border-bottom:1px solid rgba(255,255,255,.15);padding:.9rem 0}
.faq summary{cursor:pointer;font-family:var(--display);font-size:1.3rem;list-style:none}
.faq summary::after{content:"+";float:right;opacity:.6}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.8rem 0 0;opacity:.9}
@media(max-width:800px){.tiers{grid-template-columns:1fr}}

/* photos page */
.photos-bar{position:sticky;top:0;z-index:15;background:var(--dark);color:var(--cream);padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.photos-bar .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.photos-bar .btn{padding:.6rem 1.2rem;font-size:.72rem}
.photos-bar .hint{margin-left:auto;font-size:.8rem;opacity:.7}
.masonry{columns:4 260px;column-gap:6px;padding:6px 0}
.masonry figure{margin:0 0 6px;break-inside:avoid;position:relative;cursor:zoom-in}
.masonry img{width:100%;border-radius:2px}
.masonry figure.sel::after{content:"✓";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--pink);color:var(--ink);display:grid;place-items:center;font-weight:700}
body.selecting .masonry figure{cursor:pointer}
body.selecting .masonry img{opacity:.85}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;place-items:center;z-index:50}
.lightbox.open{display:grid}
.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain}
.lightbox .x,.lightbox .prev,.lightbox .next,.lightbox .save{position:absolute;color:#fff;background:none;border:0;font-size:2rem;cursor:pointer;opacity:.8}
.lightbox .x{top:1rem;right:1.2rem}.lightbox .prev{left:1rem;top:50%}.lightbox .next{right:1rem;top:50%}
.lightbox .save{bottom:1rem;left:50%;transform:translateX(-50%);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid #fff;padding:.6rem 1.4rem;text-decoration:none}