@font-face{font-family:"Flower Garden";src:url("/wp-content/uploads/bonanza-assets/FlowerGarden.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Futura Cond XBold";src:url("/wp-content/uploads/bonanza-assets/FuturaCondensedExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}

:root{
  --paper:#FFF8C9; --ink:#17150F;  --green:#43782F; --orange:#F9761A;
  --blue:#4157D6;  --red:#CF1A1F;  --yellow:#F5C518; --muted:#5C5748;

  --p:0;      /* 0→1 through the document              */
  --f:0;      /* 0→1 through the closing act           */
  --mx:0; --my:0;

  --gut:clamp(18px,4vw,64px);
  --navh:clamp(54px,6.2vw,70px);
  /* three roles, one face each.
     --disp  Flower Garden — section titles and artist names
     --sub   Futura Condensed Extra Bold — subtitles, kickers and UI labels
     --body  Helvetica — every paragraph and list on the page           */
  --disp:"Flower Garden","Futura Cond XBold",sans-serif;
  --sub:"Futura Cond XBold",Archivo,"Arial Narrow",sans-serif;
  --hand:"Flower Garden","Futura Cond XBold",cursive;
  --body:Helvetica,"Helvetica Neue",Arial,system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}
.pad{padding-inline:var(--gut);max-width:1580px;margin-inline:auto}

/* ══════════════════════════  NAV  ══════════════════════════ */
nav{position:sticky;top:0;z-index:80;display:flex;align-items:center;
  gap:clamp(12px,2vw,28px);padding:14px var(--gut);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink)}
nav .mk{height:clamp(18px,2.2vw,28px);width:auto}
/* one menu, the same on every page: logo · Lineup · Tickets.
   Accommodations, FAQ and House Rules live in the footer. */
.bz-nav .home{margin-right:auto;display:block;line-height:0}
.bz-nav .links{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.bz-nav a.lk{font-family:var(--sub);font-size:clamp(14px,1.45vw,19px);letter-spacing:.055em;white-space:nowrap;
  text-transform:uppercase;color:var(--green);transition:color .2s}
.bz-nav a.lk:hover{color:var(--orange)}
.bz-nav a.lk[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--orange)}
.bz-nav a.buy{font-family:var(--sub);font-size:clamp(13px,1.45vw,19px);letter-spacing:.06em;white-space:nowrap;
  text-transform:uppercase;background:var(--red);color:var(--yellow);
  padding:.42em 1.05em;border:2px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);transition:transform .14s,box-shadow .14s}
.bz-nav a.buy:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:6px 6px 0 var(--ink)}
@media(max-width:860px){
  .bz-nav{padding-block:10px}
  .bz-nav a.lk{font-size:clamp(14px,3.8vw,17px);letter-spacing:.05em}
}
}

/* ════════════════════  THE OPENING SCENE  ════════════════════
   One scene, one state, no conversion. It fills the first screen,
   holds still while it is there, and scrolls away like any other
   section. Nothing here reads the scroll position. */
#stage{position:relative;z-index:10}
/* `clip`, not `hidden`: hidden makes the box a horizontal scroll container, and a
   sideways swipe inside it shows up as a brief horizontal scroll on touch devices. */
.pin{position:relative;height:calc(100svh - var(--navh));min-height:560px;overflow:clip;
  touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}

.world{position:absolute;inset:0;z-index:1}
.world .sky{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#FCF6DA 0%,#FFF8C9 70%)}

/* the nudge, sitting in the bottom of the opening scene */
#hint{position:absolute;z-index:9;left:50%;bottom:clamp(14px,3.2vh,34px);
  translate:-50% 0;display:flex;align-items:center;gap:.6em;pointer-events:none;
  padding:.5em 1.1em .42em;border:2px solid var(--ink);border-radius:999px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--sub);text-transform:uppercase;letter-spacing:.11em;
  font-size:clamp(11px,1.25vw,16px);color:var(--ink);white-space:nowrap}
#hint i{display:block;width:.62em;height:.62em;border-right:3px solid var(--red);
  border-bottom:3px solid var(--red);rotate:45deg}
@media(max-width:400px){#hint{letter-spacing:.07em;padding:.45em .8em .38em}}



/* ─────────  what sits inside each world  ───────── */
.world .top{position:absolute;z-index:5;left:0;right:0;top:0;
  padding:clamp(16px,3.2vh,42px) var(--gut) 0;
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,18px)}
.world .logo{width:min(100%,820px);height:auto}

/* the date sticker sits in the flow, centred under the wordmark at every
   width — floated top-right it collided with the 20/27 on narrow screens.
   Pinned, not swinging: the opening frame holds still. */
.world .stk{position:relative;z-index:7;align-self:center;
  width:clamp(84px,10.5vw,158px);transform-origin:50% 50%;rotate:-3deg}
.world .stk img{width:100%;height:auto}

.world .ground{position:absolute;inset:0;z-index:2}
/* The river is sized against the scene's HEIGHT, not its width. The fruits
   are placed in % of height, so tying the river to height keeps the near and
   far banks where the fruits expect them at every window shape. Sized by width,
   the band drifted up or down whenever the window wasn't 16:10 or a phone. */
.world .river{position:absolute;left:-8%;width:116%;max-width:none;
  height:44%;bottom:13%;object-fit:fill;opacity:.85}

/* DEEP TUNNEL — the orange front and centre at full size, the other four
   falling away left and right in matched pairs: coconut and avocado on the
   near bank, apple and banana small and far back across the water.
   Nothing here animates. The opening frame is a still illustration; the
   only motion is the parallax that answers the pointer and the burn that
   answers the scroll. --b is a share of the whole frame, and every fruit
   is planted high enough that its cast shadow falls inside it. */
.world .fr{position:absolute;left:var(--l);bottom:var(--b);width:var(--w);
  transform:translate3d(calc(var(--mx) * var(--par,8px)),
                        calc(var(--my) * var(--par,8px)),0) rotate(var(--rot,0deg));
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.world .fr>img{width:100%;height:auto}
.world .fr .sh{position:absolute;left:0;bottom:-6%;width:100%;height:auto;
  z-index:-1;opacity:.34}

.f-coco    {--l:10%; --b:8%;  --w:13%; --par:20px; --rot:-7deg; z-index:6}
.f-aguacate{--l:67%; --b:9%;  --w:13%; --par:17px; --rot:-4deg; z-index:5}
.f-orange  {--l:30%; --b:6%;  --w:34%; --par:26px; --rot:0deg;  z-index:7}
.f-manzana {--l:2%;  --b:58%; --w:7%;  --par:6px;  --rot:5deg;  z-index:4}
.f-banano  {--l:83%; --b:59%; --w:12%; --par:7px;  --rot:6deg;  z-index:3}

@media(max-width:900px){
  .world .logo{width:min(100%,560px)}
}
/* Portrait screens get the phone composition. Chosen by the window's SHAPE,
   not its width: an 820px-wide square window is a small desktop, not a phone. */
@media (max-aspect-ratio:4/5){
  .world .river{left:-56%;width:200%;bottom:26%;height:19%}
  .f-coco    {--l:1%;  --b:9%;  --w:18%}
  .f-aguacate{--l:77%; --b:9%;  --w:21%}
  .f-orange  {--l:20%; --b:5%;  --w:56%}
  .f-manzana {--l:6%;  --b:49%; --w:14%}
  .f-banano  {--l:57%; --b:51%; --w:20%}
}
/* Near-square windows (a small laptop window, a tablet held sideways): same
   placement, the fruits a size up so the scene doesn't feel empty. */
@media (min-aspect-ratio:4/5) and (max-aspect-ratio:5/4){
  .f-coco    {--l:8%;  --w:16%}
  .f-aguacate{--l:67%; --w:16%}
  .f-orange  {--l:27%; --w:42%}
  .f-manzana {--w:9%}
  .f-banano  {--l:81%; --w:15%}
}
@media(max-width:720px){
  .world .stk{width:clamp(76px,20vw,112px)}
  .world .top{padding-top:clamp(14px,2.8vh,28px)}
}

/* ══════════════════════  SECTION FURNITURE  ══════════════════════ */
section{position:relative;z-index:10}
.hd{padding:clamp(48px,7.5vw,118px) 0 clamp(16px,2.4vw,34px)}
.hd h2{margin:0;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(40px,8.6vw,138px);line-height:.92;color:var(--ink);
  padding-top:.08em}
/* no clip reveal: Flower Garden's caps rise above the line box and overhang
   at the sides, so any clip trimmed the tops and the last letter */
.hd .note{display:block;margin-top:.24em;font-family:var(--sub);text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(15px,1.9vw,27px);color:var(--red);
  opacity:0;transform:translateY(14px) rotate(-1.5deg);transition:.7s .35s}
.hd.in .note{opacity:1;transform:rotate(-1.5deg)}
.rule{height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.16,.9,.2,1)}
.rule.in{transform:scaleX(1)}

/* a belt of fruit that runs between sections */
.belt{position:relative;z-index:10;overflow:clip;border-block:2px solid var(--ink);
  background:var(--yellow);padding:.3em 0;
  touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}
.belt .run{display:flex;width:max-content;animation:roll 28s linear infinite}
.belt.rev .run{animation-direction:reverse;animation-duration:34s}
.belt.off .run{animation-play-state:paused}
.belt img{height:clamp(26px,3.4vw,52px);width:auto;margin-right:clamp(18px,3vw,48px);
  animation:tumble 4.4s ease-in-out infinite}
.belt img:nth-child(even){animation-duration:5.8s;animation-direction:reverse}
@keyframes tumble{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes roll{to{transform:translateX(-50%)}}

.ticker{position:relative;z-index:20;border-block:2px solid var(--ink);
  background:var(--green);overflow:clip;padding:.42em 0;
  touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}
.ticker .run{display:flex;width:max-content;animation:roll 30s linear infinite}
.ticker.off .run{animation-play-state:paused}
.ticker span{font-family:var(--sub);text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(13px,1.5vw,20px);color:var(--paper);white-space:nowrap;padding-right:1.2em;
  display:flex;align-items:center;gap:.9em}
.ticker img{height:1.55em;width:auto;animation:tumble 5s ease-in-out infinite}

/* ════════════════════  THE CLOSING ACT  ════════════════════
   The sun that burned them all day finally goes down, night
   comes up, and the five of them dance by the river.
   Everything moves on one tempo: 124 BPM. Every duration below
   is a whole number of beats, so nothing ever drifts out of time. */
:root{--beat:.4839s; --bar:1.9355s; --phrase:7.742s}

#finale{position:relative;z-index:10;height:320vh;border-top:2px solid var(--ink)}
.pin2{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));
  overflow:clip;touch-action:pan-y pinch-zoom;overscroll-behavior-x:none;
  background:#0B0A1E}

/* ── sky: late sun → full night ── */
#finale .sky2{position:absolute;inset:0;z-index:0}
#finale .sky2.dusk{background:
  radial-gradient(52% 34% at 50% 78%,rgba(255,226,130,.85) 0%,rgba(249,118,26,.25) 52%,transparent 80%),
  linear-gradient(180deg,#B8351C 0%,#E8702A 32%,#F9B23F 64%,#FFE49B 100%);
  opacity:calc(1.05 - var(--f) * 1.9)}
#finale .sky2.night{background:
  radial-gradient(64% 44% at 50% 100%,rgba(65,87,214,.5) 0%,transparent 72%),
  linear-gradient(180deg,#07061A 0%,#160F38 42%,#35164A 74%,#6B2440 100%);
  opacity:calc(var(--f) * 2 - .5)}

/* the sun sinks out of the frame — the burn is over */
/* it sits on the water line with its face showing, then sinks into it */
#finale .sun2{position:absolute;z-index:1;left:50%;translate:-50% 0;
  width:min(54%,660px);max-width:none;bottom:calc(41% - var(--f) * 62%);
  opacity:calc(1.15 - var(--f) * 2.2)}

/* stars, then a moon-ish glow */
#finale .stars{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:calc(var(--f) * 2.1 - .7);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#FFF8C9,transparent),
    radial-gradient(1.4px 1.4px at 28% 9%, #FFF8C9,transparent),
    radial-gradient(1.8px 1.8px at 44% 24%,#FFE49B,transparent),
    radial-gradient(1.3px 1.3px at 61% 12%,#FFF8C9,transparent),
    radial-gradient(1.7px 1.7px at 76% 21%,#FFF8C9,transparent),
    radial-gradient(1.4px 1.4px at 88% 8%, #FFE49B,transparent),
    radial-gradient(1.5px 1.5px at 19% 33%,#FFF8C9,transparent),
    radial-gradient(1.2px 1.2px at 53% 35%,#FFF8C9,transparent),
    radial-gradient(1.6px 1.6px at 69% 30%,#FFE49B,transparent),
    radial-gradient(1.3px 1.3px at 35% 15%,#FFF8C9,transparent);
  animation:twinkle var(--phrase) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:inherit;filter:brightness(1)}
  50%{filter:brightness(1.6)}}

/* two lights sweeping the floor, on the beat */
#finale .beamy{position:absolute;z-index:2;top:-14%;left:50%;width:46%;height:112%;
  transform-origin:50% 0;pointer-events:none;mix-blend-mode:screen;
  opacity:calc(var(--f) * 1.8 - .55);
  background:linear-gradient(180deg,rgba(255,196,64,.5) 0%,rgba(249,118,26,.2) 46%,transparent 78%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
#finale .beamy.a{animation:sweepa calc(var(--bar) * 4) ease-in-out infinite}
#finale .beamy.b{background:linear-gradient(180deg,rgba(96,120,255,.5) 0%,rgba(207,26,31,.2) 50%,transparent 80%);
  animation:sweepb calc(var(--bar) * 4) ease-in-out infinite}
@keyframes sweepa{0%,100%{transform:translateX(-50%) rotate(-24deg)}50%{transform:translateX(-50%) rotate(19deg)}}
@keyframes sweepb{0%,100%{transform:translateX(-50%) rotate(27deg)} 50%{transform:translateX(-50%) rotate(-17deg)}}

/* ── the floor ── */
#finale .floor{position:absolute;inset:0;z-index:3}
#finale .river2{position:absolute;left:-8%;right:-8%;width:116%;max-width:none;height:auto;
  bottom:13%;transform-origin:50% 100%;transform:scaleY(.6);
  filter:saturate(calc(1 - var(--f) * .3)) brightness(calc(1 - var(--f) * .64)) hue-rotate(calc(var(--f) * -16deg))}
/* the water picks up the lights */
#finale .shine{position:absolute;left:-10%;right:-10%;bottom:14%;height:17%;z-index:4;
  pointer-events:none;mix-blend-mode:screen;
  opacity:calc(var(--f) * 1.5 - .45);
  background:
    repeating-linear-gradient(178deg,
      rgba(255,214,90,.07) 0 2px, transparent 2px 22px),
    radial-gradient(52% 100% at 50% 50%,rgba(255,226,130,.12) 0%,transparent 74%);
  -webkit-mask-image:radial-gradient(58% 86% at 50% 50%,#000 0%,transparent 78%);
          mask-image:radial-gradient(58% 86% at 50% 50%,#000 0%,transparent 78%);
  animation:ripple calc(var(--bar) * 2) ease-in-out infinite}
@keyframes ripple{0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(-3px) scaleY(1.08)}}

/* a pool of light each of them stands in, pulsing on the beat */
#finale .dn::before{content:"";position:absolute;left:-16%;bottom:-6%;width:132%;
  padding-bottom:26%;border-radius:50%;z-index:-2;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,214,90,.5) 0%,transparent 70%);
  opacity:calc(var(--f) * 1.7 - .55);
  animation:pool var(--beat) ease-in-out infinite}
@keyframes pool{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* ── the dance ──────────────────────────────────────────────
   One step each, all locked to the same beat. The wrapper does
   the travel, the image does the squash, the shadow answers in
   counter-phase so the weight reads. */
#finale .dn{position:absolute;left:var(--l);bottom:var(--b);width:var(--w);z-index:5;
  animation:var(--step) var(--len,var(--bar)) cubic-bezier(.32,0,.28,1) var(--off,0s) infinite}
#finale .dn>img{width:100%;height:auto}
#finale .dn .mn{animation:squash var(--beat) ease-in-out var(--off,0s) infinite;
  transform-origin:50% 100%}
#finale .dn .sh{position:absolute;left:0;bottom:-5%;width:100%;z-index:-1;opacity:.34;
  transform-origin:50% 100%;
  animation:shadowbeat var(--beat) ease-in-out var(--off,0s) infinite}
#finale .pin2 *,#finale .dn::before{animation-play-state:paused}
#finale.go .pin2 *,#finale.go .dn::before{animation-play-state:running}

@keyframes squash{0%,100%{transform:scaleY(.94) scaleX(1.05)}
  46%{transform:scaleY(1.05) scaleX(.97)}}
@keyframes shadowbeat{0%,100%{transform:scaleX(1.1);opacity:.4}
  46%{transform:scaleX(.82);opacity:.24}}

/* coconut — a two-footed hop */
@keyframes hop{
  0%,100%{transform:translateY(0)   rotate(-4deg)}
  24%    {transform:translateY(-16%) rotate(3deg)}
  50%    {transform:translateY(0)   rotate(4deg)}
  74%    {transform:translateY(-13%) rotate(-3deg)}}
/* banana — hips */
@keyframes sway{
  0%,100%{transform:rotate(-13deg) translateY(0)}
  50%    {transform:rotate(13deg)  translateY(-5%)}}
/* avocado — a shuffle, side to side */
@keyframes shuffle{
  0%,100%{transform:translateX(-7%) rotate(-5deg)}
  25%    {transform:translateX(0)    rotate(0deg) translateY(-7%)}
  50%    {transform:translateX(7%)   rotate(5deg)}
  75%    {transform:translateX(0)    rotate(0deg) translateY(-7%)}}
/* apple — a spin on the fourth beat */
@keyframes spinstep{
  0%     {transform:translateY(0) rotate(0deg)}
  22%    {transform:translateY(-14%) rotate(-8deg)}
  48%    {transform:translateY(0) rotate(0deg)}
  70%    {transform:translateY(-10%) rotate(6deg)}
  86%    {transform:translateY(0) rotate(180deg)}
  100%   {transform:translateY(0) rotate(360deg)}}
/* the orange — the one who burned, and is having the best night */
@keyframes bigbounce{
  0%,100%{transform:translateY(0)    rotate(-3deg)}
  20%    {transform:translateY(-13%) rotate(4deg)}
  42%    {transform:translateY(0)    rotate(2deg)}
  62%    {transform:translateY(-17%) rotate(-5deg)}
  84%    {transform:translateY(0)    rotate(-1deg)}}

#finale .d-coco    {--l:5%;  --b:42%; --w:10%; --step:hop;      --len:var(--bar);              --off:0s}
#finale .d-banano  {--l:78%; --b:46%; --w:17%; --step:sway;     --len:calc(var(--beat) * 2);   --off:.24s}
#finale .d-manzana {--l:69%; --b:20%; --w:12%; --step:spinstep; --len:calc(var(--bar) * 2);    --off:.48s}
#finale .d-aguacate{--l:16%; --b:9%;  --w:13%; --step:shuffle;  --len:var(--bar);              --off:.12s}
#finale .d-orange  {--l:39%; --b:-2%; --w:21%; --step:bigbounce;--len:var(--bar);              --off:0s}

/* ── the last word ── */
#finale .closer{position:absolute;z-index:8;left:0;right:0;top:clamp(40px,8.5vh,92px);
  padding-inline:var(--gut);text-align:center;color:var(--paper);
  opacity:calc(var(--f) * 3.4 - 1.02);
  transform:translateY(calc((1 - var(--f)) * -22px))}
#finale .kicker{margin:0 0 .7em;font-family:var(--sub);color:#FFD66B;
  text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(12px,1.5vw,20px);transform:rotate(-1.5deg)}
#finale .closer h2{margin:0;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(26px,5.5vw,84px);line-height:.92;letter-spacing:.005em;
  text-shadow:0 0 34px rgba(255,214,90,.45)}
#finale .closer h2 b{color:#FF8A2B;font-weight:inherit;text-shadow:0 0 40px rgba(249,118,26,.6);
  animation:glowbeat var(--beat) ease-in-out infinite}
@keyframes glowbeat{0%,100%{opacity:.86}50%{opacity:1}}
#finale .sub{margin:.7em 0 0;font-family:var(--sub);text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(11px,1.3vw,17px);
  color:color-mix(in srgb,var(--paper) 74%,transparent)}
#finale .cta{display:inline-block;margin-top:clamp(12px,2vh,22px);position:relative;z-index:2;
  font-family:var(--sub);text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(14px,1.6vw,22px);background:#E4232A;color:#FFE97A;
  padding:.5em 1.4em;border:2px solid #FFF8C9;border-radius:999px;
  box-shadow:0 0 0 rgba(255,214,90,.6);
  animation:ctapulse calc(var(--bar) * 2) ease-out infinite;
  transition:transform .15s}
#finale .cta:hover{transform:scale(1.05) rotate(-1.5deg)}
@keyframes ctapulse{0%{box-shadow:0 0 0 0 rgba(255,214,90,.55)}
  60%,100%{box-shadow:0 0 0 22px rgba(255,214,90,0)}}

@media(max-width:900px){
  #finale{height:300vh}
  #finale .river2{left:-56%;right:-56%;width:200%;bottom:26%;transform:scaleY(.52)}
  #finale .sun2{width:88%;bottom:calc(47% - var(--f) * 66%)}
  #finale .d-coco    {--l:-2%; --b:52%; --w:22%}
  #finale .d-banano  {--l:60%; --b:57%; --w:36%}
  #finale .d-manzana {--l:66%; --b:31%; --w:23%}
  #finale .d-aguacate{--l:-4%; --b:5%;  --w:26%}
  #finale .d-orange  {--l:26%; --b:-3%; --w:46%}
}

/* ══════════════════════  LINEUP — the kept idea  ══════════════════════ */
/* Every artist is set the same way: one face, one colour, no highlight that
   travels, no hover state, no per-name motion. The only thing that happens
   is the block fading up once when it comes into view. */
#lineup{overflow:clip}
#lineup .names{font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(28px,4.3vw,68px);line-height:1.1;letter-spacing:.004em;
  padding-bottom:clamp(20px,3vw,48px);text-wrap:pretty;
  color:var(--green)}
#lineup .names .n{display:inline-block;color:inherit}
#lineup .names .sep{color:var(--ink);opacity:.5}
#lineup .names .live{font-size:.4em;color:#D97826;vertical-align:.34em;
  letter-spacing:.06em;margin-left:.24em}
#lineup .names .inl{display:inline-block;width:.86em;height:.86em;vertical-align:-.1em;
  margin:0 .2em;object-fit:contain}

.tba{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;
  padding-bottom:clamp(40px,6vw,88px)}
.tba img{width:clamp(148px,20vw,312px);height:auto;rotate:-2deg}
@keyframes wobble{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.04)}}
.tba p{margin:0;font-family:var(--sub);text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(14px,1.8vw,24px);color:var(--muted)}

/* ══════════════════════  TICKETS  ══════════════════════ */
#tickets{overflow:clip}
.tk{display:grid;gap:clamp(14px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  padding:clamp(20px,3vw,44px) 0 clamp(26px,4vw,52px)}
.tk .card{position:relative;border:2px solid var(--ink);padding:clamp(16px,2.2vw,28px);
  background:var(--paper);box-shadow:6px 6px 0 var(--ink);
  opacity:0;transform:translateY(26px)}
.tk.in .card{opacity:1;transform:none;
  transition:opacity .5s,transform .6s cubic-bezier(.2,1.2,.3,1);
  transition-delay:calc(var(--i)*95ms)}
.tk .card:hover .fr2{animation:spinfruit 1.1s cubic-bezier(.3,1.2,.3,1) 1}
@keyframes spinfruit{from{rotate:11deg}to{rotate:371deg}}
.tk .card h3{margin:0 0 .3em;font-family:var(--disp);text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(18px,2.1vw,28px);line-height:.98;
  padding-right:2.4em;color:var(--red)}
.tk .card p{margin:0;font-size:clamp(13px,1.35vw,16px);line-height:1.55;color:var(--muted)}
.tk .card .st{display:inline-block;margin-top:.9em;font-family:var(--sub);
  text-transform:uppercase;letter-spacing:.08em;font-size:clamp(11px,1.2vw,14px);
  color:var(--ink);background:var(--yellow);padding:.28em .7em;border-radius:999px}
.tk .card .st.gone{background:var(--red);color:var(--paper)}
.tk .card .fr2{position:absolute;right:-14px;top:-22px;width:clamp(40px,4.6vw,66px);
  rotate:12deg;animation:wobble 5.4s ease-in-out infinite}

.barbtn{position:relative;display:block;width:min(100%,760px);
  margin:0 auto clamp(18px,3vw,34px);transition:transform .18s}
.barbtn:hover{transform:scale(1.03) rotate(-.5deg)}
.barbtn:active{transform:scale(.99)}
.barbtn>img{width:100%;height:auto}
.barbtn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%);
  animation:shimmer 3.4s ease-in-out 1.2s infinite;mix-blend-mode:overlay}
@keyframes shimmer{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
.barbtn span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sub);text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(13px,2vw,28px);color:var(--ink);padding-bottom:.08em}
.tktext{display:block;width:min(100%,660px);height:auto;margin:0 auto clamp(26px,4vw,52px)}
.sellers{display:flex;flex-wrap:wrap;gap:.6em 1.6em;justify-content:center;
  padding-bottom:clamp(40px,6vw,86px);font-family:var(--sub);text-transform:uppercase;
  letter-spacing:.07em;font-size:clamp(12px,1.4vw,18px)}
.sellers a{color:var(--red)}
.sellers a:hover{color:var(--orange)}
.sellers img{height:1.1em;width:auto;opacity:.5}

/* ══════════════════  BEFORE YOU COME  ══════════════════ */
#stay{overflow:clip}
.cards{display:grid;gap:clamp(14px,2.2vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  padding:clamp(20px,3vw,44px) 0 clamp(44px,6vw,92px)}
.cards article{position:relative;border:2px solid var(--ink);background:var(--paper);
  padding:clamp(18px,2.4vw,34px);display:flex;flex-direction:column;gap:.8em;
  box-shadow:6px 6px 0 var(--ink);opacity:0;transform:translateY(30px)}
.cards.in article{opacity:1;transform:none;
  transition:opacity .5s,transform .6s cubic-bezier(.2,1.2,.3,1),box-shadow .2s;
  transition-delay:calc(var(--i)*110ms)}
.cards article:hover{transform:translate(-4px,-4px) rotate(-.4deg);box-shadow:11px 11px 0 var(--ink)}
.cards article:hover .corner{animation:spinfruit 1.1s cubic-bezier(.3,1.2,.3,1) 1}
.cards h3{margin:0;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(22px,3vw,42px);line-height:.94;color:var(--green)}
.cards ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:.44em}
.cards li{font-size:clamp(13px,1.35vw,16px);line-height:1.5;color:var(--muted)}
.cards li b{color:var(--ink);font-weight:700}
.cards .more{margin-top:auto;align-self:flex-start;font-family:var(--sub);
  text-transform:uppercase;letter-spacing:.07em;font-size:clamp(12px,1.4vw,17px);
  color:var(--ink);border-bottom:3px solid var(--orange);padding-bottom:.08em;
  transition:color .16s,border-color .16s,transform .16s}
.cards .more:hover{color:var(--orange);border-color:var(--ink);transform:translateX(5px)}
.cards .corner{position:absolute;top:-24px;right:-14px;width:clamp(42px,5vw,74px);
  rotate:11deg;animation:wobble 6s ease-in-out infinite}

/* ══════════════════════  FOOTER  ══════════════════════ */
footer{position:relative;z-index:10;background:var(--green);color:var(--paper);
  border-top:2px solid var(--ink);overflow:clip}
footer .in{display:grid;gap:clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  padding-block:clamp(40px,6vw,86px)}
footer .mk{width:min(100%,340px);height:auto;filter:brightness(0) invert(1) opacity(.97)}
footer h4{margin:0 0 .6em;font-family:var(--disp);text-transform:uppercase;
  letter-spacing:.09em;font-size:clamp(13px,1.4vw,17px);color:var(--yellow)}
footer p,footer li{margin:0;font-size:clamp(13px,1.35vw,16px);line-height:1.6;
  color:color-mix(in srgb,var(--paper) 88%,transparent)}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.34em}
footer a{transition:color .15s,transform .15s;display:inline-block}
footer a:hover{color:var(--yellow);transform:translateX(4px)}
footer .rio{width:clamp(120px,14vw,190px);height:auto;background:var(--paper);
  padding:10px 12px;border:2px solid var(--ink);border-radius:6px}
footer .base{border-top:1px solid rgba(255,248,201,.28);padding-block:clamp(16px,2vw,26px);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1.6em;justify-content:space-between;
  font-size:clamp(11px,1.2vw,14px);color:color-mix(in srgb,var(--paper) 70%,transparent)}
footer .base img{height:1.1em;width:auto;filter:brightness(0) invert(1);opacity:.6}

/* ══════════════════════  REDUCED MOTION  ══════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  body{background:var(--paper)}
  .pin{position:relative;height:calc(100svh - var(--navh));min-height:540px}
  #hint{opacity:.94}
  #finale{height:auto}
  .pin2{position:relative;height:calc(100svh - var(--navh));min-height:540px}
  #finale .beamy,#finale .shine,#finale .sun2{display:none}
  .hd h2{clip-path:none}
  .hd .note,.tk .card,.cards article{opacity:1;transform:none}
  #lineup .names .n{opacity:1;transform:none;--k:0;--kh:0}
  #lineup .names .inl{opacity:1}
  #lineup .names .sep{opacity:.5}
  .rule{transform:scaleX(1)}
}

/* ══════════════════════  PHOTOGRAPHY  ══════════════════════
   One reusable full-bleed band between sections. Every slot points at the
   same stand-in file — replace that one JPG in /wp-content/uploads/bonanza-assets/ (or give each
   figure its own src) and the whole page updates.                        */
.shot{position:relative;z-index:10;margin:0;overflow:clip;
  border-block:2px solid var(--ink);background:var(--ink)}
.shot img{width:100%;height:clamp(230px,38vw,520px);object-fit:cover;object-position:50% 50%}
.shot--tall img{height:clamp(300px,48vw,660px)}
.shot figcaption{position:absolute;right:var(--gut);bottom:clamp(12px,1.8vw,22px);
  font-family:var(--sub);text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(11px,1.25vw,15px);color:var(--paper);
  background:color-mix(in srgb,var(--ink) 62%,transparent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  padding:.42em .85em .34em;border-radius:999px}
@media(max-width:640px){
  .shot img,.shot--tall img{height:clamp(200px,58vw,340px)}
}

/* two of the three ticket cards are links now — they must not look it */
.tk a.card{text-decoration:none;color:inherit;display:block}
.tk a.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.tk a.card{transition:transform .3s cubic-bezier(.2,.86,.3,1),box-shadow .3s}
.tk .card.is-gone{opacity:.72}

/* the buy button — a plain pill, same as on the inner pages */
.buyrow{display:flex;justify-content:center;margin:0 0 clamp(22px,3vw,40px)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sub);text-transform:uppercase;
  letter-spacing:.07em;font-size:clamp(16px,1.6vw,21px);padding:.7em 1.6em .6em;
  border:2px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);
  background:var(--red);color:var(--yellow);transition:transform .14s,box-shadow .14s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

/* ── WordPress / GeneratePress compatibility ── */
#page,.site.grid-container,.site-content,.content-area,.site-main,.inside-article,.entry-content,article.page{
  max-width:none!important;width:100%!important;padding:0!important;margin:0!important;float:none!important;background:none!important}
.entry-header,.entry-meta,.post-image,.comments-area{display:none!important}
.entry-content>*{margin-top:0;margin-bottom:0}
.site-main>article{border:0;box-shadow:none}