/* Daytime Realness — public page (brand register: daytime-glam / sunny camp). */
:root{
  --sun-1: oklch(0.93 0.07 90);
  --sun-2: oklch(0.84 0.15 60);
  --sun-3: oklch(0.73 0.20 32);
  --sun-4: oklch(0.66 0.25 358);
  --magenta: oklch(0.62 0.27 350);
  --gold: oklch(0.86 0.16 90);
  --gold-deep: oklch(0.74 0.17 80);
  --electric: oklch(0.70 0.17 235);
  --ink: oklch(0.27 0.09 350);
  --ink-soft: oklch(0.40 0.07 350);
  --card: oklch(0.99 0.02 85 / 0.74);
  --card-line: oklch(1 0 0 / 0.55);
  --venmo:#008CFF; --cashapp:#00D64F; --paypal:#003087; --zelle:#6D1ED4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 80% at 12% 0%, var(--sun-1) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 8%, var(--gold) 0%, transparent 45%),
    linear-gradient(155deg, var(--sun-1) 0%, var(--sun-2) 32%, var(--sun-3) 64%, var(--sun-4) 100%);
  background-size:200% 200%, 180% 180%, 160% 160%;
  background-position:0% 0%;animation:sunshimmer 22s ease-in-out infinite alternate}
@keyframes sunshimmer{0%{background-position:0% 0%,100% 0%,0% 0%}100%{background-position:30% 20%,70% 30%,100% 100%}}

.sparkles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sparkles i{position:absolute;color:var(--gold);font-size:var(--s,14px);opacity:0;
  filter:drop-shadow(0 0 3px oklch(0.9 0.16 90 / .8));animation:twinkle var(--d,5s) ease-in-out infinite var(--delay,0s)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6) rotate(0deg)}50%{opacity:.9;transform:scale(1) rotate(25deg)}}

.stage{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:1.6rem 1.1rem 3rem;min-height:100vh}
/* Roomier column on desktop so the poster/banner reads larger. */
@media (min-width:768px){
  .stage{max-width:640px}
  /* A wide (full-shape) poster reads as a hero: break it out wider than the text column,
     centered. Uses margins (not transform) so the .poster breathe-scale animation isn't
     clobbered. Square posters stay within the column. */
  .poster.fit{width:min(880px,94vw);max-width:none;margin-left:calc((100% - min(880px,94vw)) / 2)}
}

.brandhead{font-family:"Shrikhand",serif;font-weight:400;color:var(--magenta);text-align:center;line-height:.95;font-size:clamp(1.7rem,7vw,2.4rem);text-shadow:0 2px 0 oklch(1 0 0 /.35);margin-bottom:1rem}
.brandhead .sun{color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--ink);background:var(--card);border:1px solid var(--card-line);padding:.34rem .7rem;border-radius:999px}
.eyebrow .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 3px oklch(0.62 0.27 350 /.25)}
.title{font-family:"Shrikhand",serif;font-weight:400;line-height:.92;font-size:clamp(2.9rem,12vw,4.2rem);color:var(--ink);margin:.6rem 0 .1rem;text-shadow:0 2px 0 oklch(1 0 0 / .35)}
.title .sun{color:var(--magenta)}

/* tip mode */
.tiphead{text-align:center;margin-bottom:1.6rem}
.taglead{font-weight:800;color:var(--ink);margin-top:.7rem;font-size:1.12rem;letter-spacing:.01em}
.lineup{display:flex;flex-direction:column;gap:1.15rem}
.queen{background:var(--card);border:1px solid var(--card-line);border-radius:1.5rem;padding:.85rem;box-shadow:0 18px 40px -24px oklch(0.4 0.1 350 / .55)}
.queen.host{position:relative;border:2px solid transparent;padding:1.55rem .9rem .95rem;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,var(--gold) 0%,var(--magenta) 78%) border-box;
  box-shadow:0 22px 48px -22px oklch(0.6 0.18 70 /.7), 0 0 0 5px oklch(0.86 0.16 90 /.16)}
.qrow{display:grid;grid-template-columns:96px 1fr;gap:.95rem;align-items:start}
.qcol-left{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.host-badge{display:inline-flex;align-items:center;gap:.34rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;color:var(--ink);
  background:linear-gradient(120deg,var(--gold),var(--gold-deep));padding:.3rem .64rem;border-radius:999px;box-shadow:0 6px 14px -8px oklch(0.6 0.16 80 /.9)}
.queen.host .host-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;z-index:3;border:1.5px solid oklch(1 0 0 /.8)}
.avatar{position:relative;width:96px;height:96px;border-radius:1.15rem;overflow:hidden;display:grid;place-items:center;will-change:transform;animation:breathe 7s ease-in-out infinite}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.avatar .fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:"Shrikhand",serif;color:oklch(1 0 0 / .92);font-size:1.9rem;text-shadow:0 2px 6px oklch(0.2 0.1 350 / .5)}
.avatar .spk{position:absolute;top:6px;right:8px;color:oklch(1 0 0 /.9);font-size:.8rem}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;width:96px;margin-top:.1rem}
.social{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);background:oklch(1 0 0 /.42);border:1px solid var(--card-line);text-decoration:none;transition:transform .12s cubic-bezier(.16,1,.3,1),color .15s,background .15s}
.social svg{width:16px;height:16px}
.social:hover{color:var(--magenta);background:oklch(1 0 0 /.7);transform:translateY(-1px)}
.qmeta{min-width:0}
.qname{font-family:"Hanken Grotesk";font-weight:900;font-size:1.32rem;letter-spacing:-.01em;line-height:1.05}
.tips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.tip{display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;font:inherit;font-weight:800;font-size:.92rem;color:#fff;padding:.62rem .9rem;border-radius:999px;min-height:46px;text-decoration:none;transition:transform .12s cubic-bezier(.16,1,.3,1),filter .15s;box-shadow:0 8px 18px -10px oklch(0.3 0.1 280 / .6)}
.tip:active{transform:scale(.95)}
.tip:hover{filter:brightness(1.06)}
.tip .mono{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:oklch(1 0 0 / .22);font-weight:900;font-size:.82rem}
.tip.venmo{background:var(--venmo)} .tip.cashapp{background:var(--cashapp);color:#06351b} .tip.cashapp .mono{background:oklch(0.18 0.07 160 /.2)}
.tip.paypal{background:var(--paypal)} .tip.zelle{background:var(--zelle)}
.tip.custom{background:linear-gradient(120deg,var(--gold),var(--gold-deep));color:var(--ink)} .tip.custom .mono{background:oklch(0.3 0.09 350 /.18)}
.tip.pref{box-shadow:0 0 0 2.5px var(--gold), 0 8px 20px -8px oklch(0.3 0.1 280 /.6)}
.tip .star{font-size:.82rem;margin-left:.05rem}
.tip .copyico{margin-left:.15rem;opacity:.92;flex:none}
.tip.copied{outline:2px solid var(--ink);outline-offset:2px}

/* promo mode */
.poster{aspect-ratio:1;border-radius:1.5rem;overflow:hidden;position:relative;margin-top:1.2rem;border:3px solid oklch(1 0 0 /.9);box-shadow:0 28px 56px -26px oklch(0.28 0.12 350 /.85), 0 0 0 1px oklch(0.3 0.1 350 /.3);animation:breathe 9s ease-in-out infinite}
.poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.poster-art-fallback{position:absolute;inset:0;background:radial-gradient(80% 60% at 80% 12%, var(--gold) 0%, transparent 50%),radial-gradient(90% 70% at 10% 100%, var(--electric) 0%, transparent 55%),linear-gradient(150deg, var(--magenta) 0%, var(--sun-3) 60%, var(--sun-4) 100%)}
.poster-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, oklch(0.18 0.08 350 /.5) 0%, transparent 26%, transparent 60%, oklch(0.18 0.08 350 /.62) 100%)}
.poster-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem;color:#fff}
.poster-overlay .ptop,.poster-overlay .pbot{display:flex;justify-content:space-between;gap:.6rem}
.poster-overlay .ptop{align-items:flex-start}.poster-overlay .pbot{align-items:flex-end}
.poster [data-piece="title"]{font-family:"Shrikhand",serif;font-size:1.2rem;line-height:1;text-shadow:0 2px 10px oklch(0.18 0.1 350 /.8)}
.poster [data-piece="time"]{font-weight:900;font-size:.92rem;background:oklch(0.2 0.08 350 /.55);padding:.28rem .6rem;border-radius:999px;backdrop-filter:blur(3px)}
.poster [data-piece="date"]{font-weight:900;font-size:1.1rem;text-shadow:0 2px 10px oklch(0.18 0.1 350 /.8)}
.poster .pbadge{background:#fff;color:var(--magenta);padding:.4rem .8rem;border-radius:999px;font-size:.84rem;transform:rotate(-3deg);font-family:"Shrikhand",serif}
/* hide + collapse to zero width so a hidden (esp. long) piece can't squeeze its row neighbor;
   the row's space-between keeps the visible piece on its anchor */
.poster [data-piece].off{visibility:hidden;max-width:0;overflow:hidden;padding:0}
.poster.fit{aspect-ratio:auto;min-height:160px;max-height:85vh;display:flex;align-items:center;justify-content:center}
/* size to the image's real aspect, capped by the frame — wide banners fill the width,
   tall/portrait uploads stay centered and un-squashed rather than forced full-width */
.poster.fit .poster-img{position:static;width:auto;max-width:100%;height:auto;max-height:85vh;display:block}
.promo-wrap{margin:1.3rem .2rem;max-width:65ch}
.promo-copy{font-size:1.04rem;line-height:1.55;color:var(--ink)}
.promo-copy strong,.promo-copy b{color:var(--magenta)} .promo-copy a{color:var(--electric);font-weight:800}
/* fallback for truly empty blocks; a <div><br></div> blank line already keeps height from its <br> */
.promo-copy p:empty,.promo-copy div:empty{min-height:1em}
.promo-copy.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.promo-copy.open{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}
.promo-more{margin-top:.6rem;background:none;border:none;cursor:pointer;font:inherit;font-weight:800;color:var(--ink);border-bottom:2px solid var(--magenta);padding:0 0 1px;border-radius:0}
.promo-more:hover{color:var(--magenta)}
.lineup-empty{text-align:center;background:var(--card);border:1px solid var(--card-line);border-radius:1.2rem;padding:2.4rem 1.4rem}
.lineup-empty .le-spk{font-size:1.7rem;color:var(--gold-deep)}
.lineup-empty .le-title{font-weight:900;font-size:1.2rem;margin-top:.4rem}
.lineup-empty .le-sub{color:var(--ink-soft);font-weight:600;margin-top:.35rem}
.tickets{display:flex;flex-direction:column;gap:.6rem;margin:.4rem 0 1.5rem}
.ticket{display:flex;align-items:center;justify-content:space-between;gap:1rem;text-decoration:none;font-weight:800;color:var(--ink);background:var(--card);border:1px solid var(--card-line);padding:.95rem 1.1rem;border-radius:1.1rem;font-size:1.05rem;min-height:54px;transition:transform .12s}
.ticket:active{transform:scale(.98)}
.ticket.primary{background:linear-gradient(120deg,var(--gold),var(--gold-deep));border-color:transparent;box-shadow:0 12px 26px -16px oklch(0.5 0.12 80 /.8)}
.ticket .tarrow{font-size:1.25rem;opacity:.6;flex:none}
.reachable{text-align:center;margin-top:.4rem}
.reachable a{font-weight:800;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--magenta);padding-bottom:1px}
/* flex (not block) so the .dot stays a round flex item; width:fit-content + auto margins still center the pill */
.eyebrow.center{display:flex;width:fit-content;margin:0 auto}

/* holding / off-season */
.holding{min-height:74vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.2rem}
.holding .big{font-family:"Shrikhand",serif;font-size:clamp(2.4rem,10vw,3.6rem);line-height:.95;color:var(--ink);text-shadow:0 2px 0 oklch(1 0 0 /.35)}
.holding .big .pop{color:var(--magenta)}
.holding p{font-weight:600;color:var(--ink-soft);font-size:1.08rem;margin-top:.9rem;max-width:30ch}
.holding .next{margin-top:1.5rem;font-weight:800;background:var(--ink);color:var(--sun-1);padding:.7rem 1.1rem;border-radius:999px;font-size:1.02rem}
.holding .link{margin-top:1.3rem}
.holding .link a{font-weight:800;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--electric);padding-bottom:1px}
.holding .emoji{font-size:2.6rem;margin-bottom:.3rem}

footer{margin-top:2.4rem;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.foot-name{font-family:"Shrikhand",serif;color:var(--magenta);font-size:1.05rem}
.ig-pill{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.9rem;color:var(--ink);text-decoration:none;background:oklch(1 0 0 /.5);border:1px solid var(--card-line);padding:.4rem .8rem;border-radius:999px;transition:background .15s,color .15s,transform .12s}
.ig-pill:hover{background:oklch(1 0 0 /.85);color:var(--magenta);transform:translateY(-1px)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}
.venue-pill{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.9rem;color:var(--ink);text-decoration:none;background:oklch(1 0 0 /.5);border:1px solid var(--card-line);padding:.4rem .8rem;border-radius:999px;transition:background .15s,color .15s,transform .12s}
.venue-pill:hover{background:oklch(1 0 0 /.85);color:var(--magenta);transform:translateY(-1px)}
.venue-pill .venue-city{font-weight:600;color:var(--ink-soft)}

.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(20px);z-index:200;background:var(--ink);color:var(--sun-1);font-weight:800;padding:.7rem 1.1rem;border-radius:999px;opacity:0;transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1);pointer-events:none;font-size:.92rem}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* preview banner (admin viewing a draft) */
.previewbar{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--sun-1);text-align:center;font-weight:800;font-size:.85rem;padding:.5rem .8rem}
.previewbar a{color:var(--gold);text-decoration:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  body{background-position:15% 15%,85% 15%,50% 100%}
}