/* HERO E: Mega sunset (giant logo + layered, animated sunset) */
.v-hero-e{--lw:min(calc(58 * var(--vw)),980px,calc((100svh - 330px) * 1.5));--bh:clamp(110px,19svh,210px);
  position:relative;min-height:clamp(640px,100svh,1120px);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:84px 16px calc(var(--bh) * .55 + 46px);color:var(--ink)}
.v-hero-e .he-defs{position:absolute}
.v-hero-e:has(.ol-ytag){--lw:min(calc(58 * var(--vw)),980px,calc((100svh - 440px) * 1.5))}
.v-hero-e .he-layer{position:absolute;inset:0;pointer-events:none}
.v-hero-e .he-sky{position:absolute;inset:0;z-index:-5;
  background:radial-gradient(60% 45% at 50% 46%,rgba(255,250,215,.95),rgba(255,236,160,0) 70%),
    linear-gradient(180deg,#fff8d6 0%,#fff0a0 20%,#ffe15c 42%,#ffd02e 62%,#fbbc1d 82%,#f0a213 100%)}
/* rotating sunburst */
.v-hero-e .he-rays-l{z-index:-4}
.v-hero-e .he-rays{position:absolute;left:50%;top:44%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0deg 5deg,rgba(255,255,255,0) 5deg 12deg);
  -webkit-mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.55) 22%,transparent 46%);mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.55) 22%,transparent 46%);
  animation:he-spin 140s linear infinite;will-change:transform}
/* retro striped sun behind the logo */
.v-hero-e .he-sun-l{z-index:-3}
.v-hero-e .he-sun{position:absolute;left:50%;top:44%;width:min(46vw,60svh,700px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fffbd2 0%,#ffe55c 45%,#ffcb26 80%,#ffb818 100%);
  box-shadow:0 0 120px 40px rgba(255,226,90,.6);opacity:.85;animation:he-sunpulse 7s ease-in-out infinite}
/* brush stripes sweep in, then drift */
.v-hero-e .he-stripes{z-index:-2}
.v-hero-e .he-stripe{position:absolute;width:min(46vw,640px);height:auto;opacity:.95;filter:drop-shadow(0 10px 18px rgba(120,30,0,.18))}
.v-hero-e .he-s1{left:-8%;top:52%;transform:rotate(-8deg);animation:he-sweep-l 1.4s .2s cubic-bezier(.2,.8,.2,1) both,he-drift 11s 1.6s ease-in-out infinite alternate}
.v-hero-e .he-s2{right:-10%;top:4%;width:min(40vw,560px);transform:rotate(172deg);animation:he-sweep-r 1.4s .4s cubic-bezier(.2,.8,.2,1) both,he-drift2 13s 1.8s ease-in-out infinite alternate}
.v-hero-e .he-s3{left:16%;top:8%;width:min(18vw,240px);opacity:.75;transform:rotate(20deg);animation:he-sweep-l 1.4s .6s cubic-bezier(.2,.8,.2,1) both,he-drift3 9s 2s ease-in-out infinite alternate}
/* birds */
.v-hero-e .he-birds{z-index:-1}
.v-hero-e .he-bird{position:absolute;left:0;top:var(--t,20%);width:48px;color:rgba(70,22,4,.8);animation:he-fly var(--f,34s) linear infinite;animation-delay:var(--dl,0s)}
.v-hero-e .he-bird svg{display:block;width:100%;animation:he-flap .7s ease-in-out infinite alternate;transform-origin:50% 60%}
.v-hero-e .b1{--t:16%;--f:30s;--dl:-4s}.v-hero-e .b2{--t:21%;--f:30s;--dl:-5.2s;width:34px}
.v-hero-e .b3{--t:12%;--f:42s;--dl:-21s;width:40px}.v-hero-e .b4{--t:26%;--f:38s;--dl:-30s;width:30px}.v-hero-e .b5{--t:18%;--f:42s;--dl:-22.4s;width:26px}
.v-hero-e .b2 svg{animation-delay:-.3s}.v-hero-e .b4 svg{animation-delay:-.5s}
/* light dust rising + sparkles twinkling */
.v-hero-e .he-dust{z-index:0}
.v-hero-e .he-dust i{position:absolute;left:var(--x);bottom:-10px;width:calc(7px * var(--s));height:calc(7px * var(--s));border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,240,.95),rgba(255,240,180,0) 70%);animation:he-rise var(--d) linear var(--delay) infinite}
.v-hero-e .he-sparks{position:absolute;inset:0;z-index:3;pointer-events:none}
.v-hero-e .he-sparks i{position:absolute;left:var(--x);top:calc(var(--y) * .7 + 4%);width:calc(18px * var(--s));aspect-ratio:1;background:var(--c);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:he-twinkle calc(var(--d) * .45) ease-in-out var(--delay) infinite}
/* torn-paper crowd band */
.v-hero-e .he-band-l{z-index:1}
.v-hero-e .he-band{position:absolute;left:-2%;right:-2%;bottom:0;height:var(--bh);background:#fff7e6;clip-path:url(#heTorn2)}
.v-hero-e .he-band-photo{position:absolute;left:0;right:0;top:7px;bottom:0;overflow:hidden;clip-path:url(#heTorn1)}
.v-hero-e .he-band-track{position:absolute;left:0;top:0;height:100%;width:calc(var(--bh) * 7.8 * 4);background:url(../../images/band-crowd.jpg) 0 0/auto 100% repeat-x;animation:he-band 90s linear infinite;will-change:transform}
.v-hero-e .he-band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,190,30,.4),rgba(120,70,10,.2) 45%,rgba(20,12,2,.55))}
/* palms (back pair smaller + warmer, front pair big) */
.v-hero-e .he-palms{z-index:2}
.v-hero-e .he-pw{position:absolute;bottom:calc(var(--bh) * .25);display:block}
.v-hero-e .he-palm{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:he-sway 7s ease-in-out infinite}
.v-hero-e .he-pw-l{left:-12%;width:min(44vw,600px);bottom:-3%}
.v-hero-e .he-pw-r{right:-12%;width:min(44vw,600px);bottom:-3%}
.v-hero-e .he-pw-r .he-palm,.v-hero-e .he-pw-r2 .he-palm{animation-name:he-swayr}
.v-hero-e .he-pw-l2{left:6%;width:min(24vw,330px);opacity:.88;filter:saturate(.8) brightness(.85)}
.v-hero-e .he-pw-r2{right:5%;width:min(24vw,330px);opacity:.88;filter:saturate(.8) brightness(.85)}
.v-hero-e .he-pw-l2 .he-palm{animation-duration:9s;animation-delay:-2s}.v-hero-e .he-pw-r2 .he-palm{animation-duration:8.5s;animation-delay:-4s}
.v-hero-e .he-pw-l .he-palm{filter:drop-shadow(0 18px 18px rgba(80,20,0,.3))}.v-hero-e .he-pw-r .he-palm{filter:drop-shadow(0 18px 18px rgba(80,20,0,.3))}
/* grain */
.v-hero-e .he-grain{position:absolute;inset:-60px;z-index:4;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:he-grain 1.2s steps(5) infinite}
/* content */
.v-hero-e .he-in{position:relative;z-index:5;width:100%;display:flex;flex-direction:column;align-items:center}
.v-hero-e .he-logo-p{width:100%}
.v-hero-e .he-float{animation:he-rise-in 1.1s cubic-bezier(.2,.9,.25,1.15) both,he-float 6.5s ease-in-out 1.1s infinite}
.v-hero-e .he-logo{width:var(--lw);max-width:none;height:auto;margin:0 0 calc(var(--lw) * -.035) calc(50% - var(--lw) / 2);cursor:pointer;
  filter:drop-shadow(0 22px 26px rgba(120,35,0,.32));transform-origin:50% 70%}
.v-hero-e .he-logo:hover{animation:he-wobble .9s cubic-bezier(.3,1.6,.5,1)}
.v-hero-e .he-h1{font-size:clamp(1.25rem,2.6vw,2.2rem);letter-spacing:.01em;margin-top:6px;animation:he-up .9s .35s both}
.v-hero-e .he-h1 span{color:#fff;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}
.v-hero-e .he-sub{font-family:var(--fb);text-transform:uppercase;font-size:clamp(.7rem,1.1vw,.86rem);letter-spacing:.06em;margin-top:8px;animation:he-up .9s .45s both}
.v-hero-e .he-sub b{font-weight:400;color:#7a1408}
.v-hero-e .he-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px;animation:he-up .9s .55s both}
.v-hero-e .he-cd{display:inline-grid;grid-template-columns:repeat(4,auto);gap:8px}
.v-hero-e .he-cd-u{background:var(--ink);color:#fff;border:2.5px solid #000;border-radius:11px;padding:7px 10px 6px;min-width:62px;box-shadow:3px 3px 0 rgba(0,0,0,.28)}
.v-hero-e .he-cd b{display:block;font-family:var(--fb);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1;color:var(--gold)}
.v-hero-e .he-cd span{display:block;font-size:.55rem;text-transform:uppercase;letter-spacing:.14em;margin-top:3px}
.v-hero-e .he-btn{padding:14px 22px;font-size:.92rem}
.v-hero-e .he-live{font-family:var(--fb);text-transform:uppercase;font-size:1.4rem}
.v-hero-e .he-note{font-family:var(--fb);text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;margin-top:10px;color:#fff;background:rgba(30,30,30,.72);padding:5px 12px;border-radius:99px;animation:he-up .9s .65s both}
/* marquee strip */
.v-hero-e .he-mq{position:absolute;left:0;right:0;bottom:0;z-index:6;height:44px;background:var(--ink);border-top:3px solid #000;overflow:hidden;display:flex;align-items:center}
.v-hero-e .he-mq::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--red) 0 33.3%,var(--gold) 0 66.6%,var(--green) 0)}
.v-hero-e .he-mq-track{display:flex;width:max-content;animation:he-mq 38s linear infinite;will-change:transform}
.v-hero-e .he-mq span{display:flex;align-items:center;gap:18px;padding-right:18px;font-family:var(--fb);text-transform:uppercase;font-size:1rem;letter-spacing:.06em;color:var(--gold);white-space:nowrap}
.v-hero-e .he-mq span i{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:16px 0 0 var(--gold),32px 0 0 var(--green);margin-right:32px}
/* pause offscreen / hidden tab */
.v-hero-e.fx-paused *,.v-hero-e.fx-paused{animation-play-state:paused!important}

@keyframes he-spin{to{transform:rotate(360deg)}}
@keyframes he-sunpulse{50%{opacity:1;transform:scale(1.03)}}
@keyframes he-sweep-l{from{opacity:0;translate:-60% 20%}to{opacity:.95;translate:0 0}}
@keyframes he-sweep-r{from{opacity:0;translate:60% -20%}to{opacity:.95;translate:0 0}}
@keyframes he-drift{to{transform:rotate(-4deg) translate(3%,-4%)}}
@keyframes he-drift3{to{transform:rotate(24deg) translate(-4%,3%)}}
@keyframes he-drift2{to{transform:rotate(176deg) translate(-3%,3%)}}
@keyframes he-fly{from{transform:translate3d(-80px,0,0)}50%{transform:translate3d(55vw,-24px,0)}to{transform:translate3d(110vw,6px,0)}}
@keyframes he-flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes he-rise{from{transform:translate3d(0,0,0);opacity:0}12%{opacity:.95}to{transform:translate3d(30px,-105svh,0);opacity:0}}
@keyframes he-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:.95;transform:scale(1) rotate(45deg)}}
@keyframes he-band{to{transform:translate3d(-25%,0,0)}}
@keyframes he-sway{50%{transform:rotate(2.6deg)}}
@keyframes he-swayr{from{transform:scaleX(-1)}50%{transform:scaleX(-1) rotate(2.6deg)}to{transform:scaleX(-1)}}
@keyframes he-grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,20px)}40%{transform:translate(20px,-30px)}60%{transform:translate(-14px,-10px)}80%{transform:translate(26px,14px)}100%{transform:translate(0,0)}}
@keyframes he-rise-in{from{opacity:0;transform:translateY(60px) scale(.86)}to{opacity:1;transform:none}}
@keyframes he-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-.6deg)}}
@keyframes he-wobble{0%{transform:none}25%{transform:rotate(-2.4deg) scale(1.03)}50%{transform:rotate(1.8deg) scale(1.02)}75%{transform:rotate(-.8deg)}100%{transform:none}}
@keyframes he-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes he-mq{to{transform:translate3d(-50%,0,0)}}

@media(max-width:760px){
  .v-hero-e:has(.ol-ytag){--lw:76vw}
  .v-hero-e{--lw:76vw;--bh:clamp(110px,19svh,180px);min-height:max(620px,100svh);padding:76px 14px calc(var(--bh) * .5 + 44px);justify-content:center}
  .v-hero-e .he-rays{top:34%}
  .v-hero-e .he-sun{top:30%;width:76vw;opacity:.7}
  .v-hero-e .he-h1 span{display:block}
  .v-hero-e .he-s1{width:70vw;left:-22%;top:56%}.v-hero-e .he-s2{width:62vw;right:-24%;top:7%}.v-hero-e .he-s3{display:none}
  .v-hero-e .he-pw-l,.v-hero-e .he-pw-r{width:62vw}.v-hero-e .he-pw-l{left:-24%}.v-hero-e .he-pw-r{right:-24%}
  .v-hero-e .he-pw-l2,.v-hero-e .he-pw-r2{display:none}
  .v-hero-e .he-h1{font-size:clamp(1.15rem,6vw,1.6rem);margin-top:10px}
  .v-hero-e .he-sub{font-size:.68rem;max-width:32ch;line-height:1.45}
  .v-hero-e .he-row{gap:10px}
  .v-hero-e .he-cd-u{min-width:0;width:68px}
  .v-hero-e .he-btn{width:min(100%,300px)}
  .v-hero-e .he-mq{height:38px}.v-hero-e .he-mq span{font-size:.85rem}
}

/* design-12: artist collage above a smaller logo */
.v-hero-e .he-honor{position:relative;z-index:2;font-family:var(--fb);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(.7rem,1.3vw,.95rem);line-height:1.35;background:var(--ink);color:#fff;padding:9px 18px;border-radius:12px;box-shadow:3px 3px 0 var(--gold);margin-bottom:10px;animation:he-up .9s both}
.v-hero-e .he-honor span{color:var(--gold)}
.v-hero-e .he-collage{position:relative;z-index:1;width:min(880px,94vw);margin:0 auto calc(-1 * clamp(14px,2.6vw,40px));animation:he-up 1s .15s both}
.v-hero-e .he-collage img{width:100%;height:auto;mix-blend-mode:multiply;filter:saturate(1.08) contrast(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%);mask-composite:intersect}
@media(max-width:520px){.v-hero-e .he-honor span{display:block}.v-hero-e .he-collage{width:104vw}}
.v-hero-e{justify-content:flex-start;min-height:0;padding-top:clamp(78px,9svh,96px)}
.v-hero-e .he-collage{width:min(780px,94vw)}
@media(max-width:520px){.v-hero-e{padding-top:74px}.v-hero-e .he-collage{width:104vw}}

/* design-13: no reggae-flag stripes, yellower sky, collage sits clear above the logo, new copy */
.v-hero-e .he-stripes,.v-hero-e .he-stripe{display:none}
.v-hero-e .he-collage{margin:0 auto clamp(6px,1.2vw,18px)}
.v-hero-e .he-collage img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 70%,transparent 100%)}
.v-hero-e .he-logo-p{position:relative;z-index:3}
.v-hero-e .he-sub{font-size:clamp(.95rem,1.9vw,1.45rem);line-height:1.25}
.v-hero-e .he-sub b{color:#7a1408}
.v-hero-e .he-where{display:inline-block;margin-top:6px;font-size:.62em;letter-spacing:.08em}
.v-hero-e .he-cdl{margin-top:14px;font-family:var(--fb);text-transform:uppercase;font-size:clamp(.75rem,1.3vw,1rem);letter-spacing:.08em;animation:he-up .9s .5s both}
.v-hero-e .he-cdl b{font-weight:400;background:var(--ink);color:var(--gold);padding:4px 12px;border-radius:8px;margin-left:4px;white-space:nowrap}
@media(max-width:760px){.v-hero-e .he-s1,.v-hero-e .he-s2{display:none}.v-hero-e .he-cdl b{display:inline-block;margin:6px 0 0}.v-hero-e .he-btn{width:min(100%,340px)}}
/* design-13: wordmark-only logo (flag pillars cropped off so it can never cover the artists) */
.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:min(calc(50 * var(--vw)),860px,calc((100svh - 300px) * 3))}
.v-hero-e .he-logo{margin-bottom:calc(var(--lw) * .01)}
@media(max-width:760px){.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:80vw}}
.v-hero-e .he-collage{width:min(690px,92vw)}
.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:min(calc(46 * var(--vw)),780px,calc((100svh - 300px) * 3))}
@media(max-width:760px){.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:90vw}}

/* design-13b: the artists are one clean cut-out fan (no photo box, no fade mask, no outline), full logo with its flag restored */
.v-hero-e .he-collage{width:min(1000px,96vw);margin:0 auto calc(-1 * clamp(8px,2.6vw,44px))}
.v-hero-e .he-collage img{mix-blend-mode:normal;filter:drop-shadow(0 12px 14px rgba(90,60,0,.28));-webkit-mask:none;mask:none}
.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:min(calc(50 * var(--vw)),820px,calc((100svh - 330px) * 1.5))}
.v-hero-e .he-logo{margin-bottom:calc(var(--lw) * -.035)}
.v-hero-e .he-logo-p{position:relative;z-index:3}
@media(max-width:760px){.v-hero-e .he-collage{width:106vw;margin-bottom:calc(-1 * 7vw)}.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:92vw}}

/* design-13c: the island water sits behind the yellow, showing through lower down, with slow light ripples */
.v-hero-e .he-water-l{position:absolute;inset:-30px;z-index:-6;overflow:hidden;pointer-events:none}
.v-hero-e .he-water{position:absolute;inset:0;background:url(../../images/water.jpg) 50% 78%/cover no-repeat;animation:he-breathe 24s ease-in-out infinite alternate;will-change:transform}
.v-hero-e .he-ripple{position:absolute;inset:0;overflow:hidden;opacity:.4;-webkit-mask:linear-gradient(180deg,transparent 25%,#000 70%);mask:linear-gradient(180deg,transparent 25%,#000 70%)}
.v-hero-e .he-ripple::before,.v-hero-e .he-ripple::after{content:"";position:absolute;left:-512px;top:-512px;right:-512px;bottom:-512px;background:url(../../images/caustic.png) 0 0/512px 512px repeat;will-change:transform;animation:he-flow 46s linear infinite}
.v-hero-e .he-ripple::after{background-size:384px 384px;opacity:.6;animation-duration:34s;animation-direction:reverse}
.v-hero-e .he-sky{background:radial-gradient(60% 45% at 50% 46%,rgba(255,250,215,.95),rgba(255,236,160,0) 70%),
  linear-gradient(180deg,#fff8d6 0%,rgba(255,240,150,.97) 24%,rgba(255,220,70,.86) 46%,rgba(255,206,50,.6) 68%,rgba(240,170,20,.42) 100%)}
@keyframes he-breathe{from{scale:1}to{scale:1.07}}
@keyframes he-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(512px,256px,0)}}
.fx-no-idle .v-hero-e .he-water,.fx-no-idle .v-hero-e .he-ripple::before,.fx-no-idle .v-hero-e .he-ripple::after{animation:none}
.v-hero-e.fx-paused .he-water,.v-hero-e.fx-paused .he-ripple::before,.v-hero-e.fx-paused .he-ripple::after{animation-play-state:paused}
/* phone: the fan is wider than the screen, so centre it by its own width (flex auto-margins left it hanging to the right) */
@media(max-width:760px){.v-hero-e .he-collage{align-self:flex-start;position:relative;left:50%;translate:-50% 0;margin-left:0;margin-right:0;margin-bottom:calc(-1 * 7vw)}}
.v-hero-e .he-sky{background:radial-gradient(60% 45% at 50% 46%,rgba(255,250,215,.95),rgba(255,236,160,0) 70%),
  linear-gradient(180deg,#fff8d6 0%,rgba(255,240,150,.96) 22%,rgba(255,220,70,.8) 44%,rgba(255,206,50,.5) 66%,rgba(240,170,20,.3) 100%)}
.v-hero-e .he-ripple{opacity:.55}
/* ocean: opaque yellow sky again, with the island water rising up out of the bottom third (sunset over the sea) */
.v-hero-e .he-sky{background:radial-gradient(60% 45% at 50% 46%,rgba(255,250,215,.95),rgba(255,236,160,0) 70%),
  linear-gradient(180deg,#fff8d6 0%,#fff0a0 20%,#ffe15c 42%,#ffd02e 62%,#fbbc1d 82%,#f0a213 100%)}
.v-hero-e .he-water-l{z-index:-4;inset:0;-webkit-mask:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.65) 54%,#000 74%);mask:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.65) 54%,#000 74%)}
.v-hero-e .he-water{background-position:50% 88%;filter:saturate(1.25) brightness(1.08)}
.v-hero-e .he-ripple{-webkit-mask:none;mask:none;opacity:.5}
/* yellow cover over the ocean: gold-tinted water plus a warm yellow wash on top, so it reads golden, not green */
.v-hero-e .he-water{filter:sepia(.75) saturate(1.7) hue-rotate(-14deg) brightness(1.12) contrast(1.02)}
.v-hero-e .he-water-l::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,226,80,.35),rgba(255,206,40,.55) 55%,rgba(250,186,20,.62))}
/* cleaner logo area: bigger logo, flag pillars fade in from the artists instead of a flat cut-off top, sun softened into a glow */
.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:min(calc(60 * var(--vw)),960px,calc((100svh - 300px) * 1.7))}
.v-hero-e .he-logo{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 22%,#000 40%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 22%,#000 40%)}
.v-hero-e .he-collage{margin-bottom:calc(-1 * clamp(26px,6vw,96px))}
.v-hero-e .he-sun{opacity:.5;filter:blur(18px);box-shadow:0 0 160px 70px rgba(255,226,90,.45)}
@media(max-width:760px){.v-hero-e,.v-hero-e:has(.ol-ytag){--lw:96vw}.v-hero-e .he-collage{margin-bottom:calc(-1 * 10vw)}}

/* tidy artist layout: phone gets its own 3-person crop */
.v-hero-e .he-collage picture{display:block}.v-hero-e .he-collage img{display:block;width:100%;height:auto}
@media(max-width:760px){.v-hero-e .he-collage{width:100vw;left:0;translate:none;align-self:center;margin-bottom:calc(-1 * 12vw)}}

/* above-the-fold fit: countdown + pre-register button must show in the first screen (desktop + phone); art scales with viewport height */
.v-hero-e,.v-hero-e:has(.ol-ytag){--cw:max(420px,min(1000px,96vw,calc((100svh - 350px) * 1.95)));--lw:calc(var(--cw) * .74);padding-bottom:calc(var(--bh) * .3 + 40px)}
.v-hero-e .he-collage{width:var(--cw)}
.v-hero-e .he-row{margin-top:10px}.v-hero-e .he-cdl{margin-top:10px}
@media(max-width:760px){
  .v-hero-e,.v-hero-e:has(.ol-ytag){--cw:min(100vw,calc((100svh - 500px) * 1.44));--lw:min(86vw,calc(var(--cw) * .9))}
  .v-hero-e .he-collage{width:var(--cw);margin-bottom:calc(-1 * var(--cw) * .1)}
}

/* hero option C: logo overlaps the artists' torsos so the artists stay big and everything still fits above the fold */
.v-hero-e,.v-hero-e:has(.ol-ytag){--cw:max(420px,min(1000px,96vw,calc((100svh - 300px) * 1.95)));--lw:calc(var(--cw) * .66)}
.v-hero-e .he-collage{margin-bottom:calc(-1 * var(--cw) * .1)}
@media(max-width:760px){.v-hero-e,.v-hero-e:has(.ol-ytag){--cw:min(100vw,calc((100svh - 470px) * 1.44));--lw:min(86vw,calc(var(--cw) * .9))}.v-hero-e .he-collage{margin-bottom:calc(-1 * var(--cw) * .1)}}
@media(max-width:760px) and (max-height:720px){.v-hero-e .he-honor{display:none}.v-hero-e{padding-top:70px}.v-hero-e .he-h1{margin-top:4px}.v-hero-e .he-sub{margin-top:4px}}

/* ==================== LINEUP LAYER (hm-, ported from design-7 hero P) ====================
   Replaces the old .he-collage artist row (markup removed in hero-E.js). The 14 cut-outs from images/artists2/ sit on a
   stage whose height --ch is capped by the viewport (so logo + copy + countdown + button stay on the first screen) and
   whose width scales with --ch (max = full screen width). Per figure: --dx/--dy/--ds/--dz desktop, --mx/--my/--ms/--mz
   phone (from LINEUP in hero-E.js). The honour banner sits over the empty sky at the top of the stage, the big logo
   overlaps the bottom of the row. */
.v-hero-e,.v-hero-e:has(.ol-ytag){--ch:clamp(250px,calc(100svh - 490px),660px);--lw:clamp(440px,min(44vw,calc((100svh - 300px) * .95)),720px)}
.v-hero-e .he-honor{z-index:6}
.v-hero-e .hm-stage{position:relative;z-index:1;flex:none;width:min(calc(100% + 32px),calc(var(--ch) * 3.3));height:var(--ch);
  margin-top:calc(var(--ch) * -.2);pointer-events:none}
.v-hero-e .hm-halo{position:absolute;left:50%;top:46%;width:min(70%,calc(var(--ch) * 1.6));height:calc(var(--ch) * 1.05);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,250,225,.7),rgba(255,236,150,.32) 48%,rgba(255,220,90,0) 100%)}
.v-hero-e .hm-collage{position:absolute;inset:0}
@media(min-width:701px){.v-hero-e .hm-collage{-webkit-mask:linear-gradient(0deg,transparent 0,rgba(0,0,0,.6) 7%,#000 16%);mask:linear-gradient(0deg,transparent 0,rgba(0,0,0,.6) 7%,#000 16%)}}
.v-hero-e .hm-slot{position:absolute;left:calc(var(--dx) * 1%);bottom:calc(var(--dy,0) * 1%);height:calc(var(--ds) * 1%);z-index:var(--dz,1);clip-path:inset(-60% -60% var(--cb,-60%) -60%)}
.v-hero-e .hm-rise{height:100%;translate:-50% 0;animation:hm-pop 1.25s cubic-bezier(.22,1,.36,1) calc(.2s + var(--o) * .075s) both}
.v-hero-e .hm-bob{height:100%;animation:hm-bob var(--fd) ease-in-out var(--fdl) infinite;will-change:transform;
  filter:drop-shadow(0 0 1.5px rgba(255,250,225,.95)) drop-shadow(0 14px 16px rgba(120,60,0,.3));transition:filter .35s}
.v-hero-e .hm-art{--fade:22%;display:block;height:100%;width:auto;max-width:none;pointer-events:auto;user-select:none;-webkit-user-drag:none;transform-origin:50% 90%;
  -webkit-mask:linear-gradient(0deg,transparent 0 2%,#000 var(--fade));mask:linear-gradient(0deg,transparent 0 2%,#000 var(--fade));
  transition:translate .45s cubic-bezier(.2,1.4,.4,1),scale .45s cubic-bezier(.2,1.4,.4,1)}
.v-hero-e .hm-back .hm-bob{filter:drop-shadow(0 0 1.5px rgba(255,250,225,.9)) drop-shadow(0 12px 14px rgba(120,60,0,.24)) brightness(.98)}
.v-hero-e .hm-centre .hm-bob{filter:drop-shadow(0 0 2px #fff6c8) drop-shadow(0 0 22px rgba(255,214,60,.75)) drop-shadow(0 16px 20px rgba(120,60,0,.32)) brightness(1.04)}
.v-hero-e .hm-centre .hm-art{--fade:26%}
.v-hero-e .hm-blk .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 7%,#000 17%);-webkit-mask-composite:source-in;
  mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 7%,#000 17%);mask-composite:intersect}
.v-hero-e .hm-ground{position:absolute;left:4%;right:4%;bottom:-16%;height:44%;z-index:10;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,246,205,.9),rgba(255,230,130,.55) 45%,rgba(255,220,90,0) 100%)}
.v-hero-e .hm-group .hm-bob{filter:drop-shadow(0 0 1.5px rgba(255,250,225,.9)) drop-shadow(0 12px 14px rgba(120,60,0,.22))}
/* no logo bands to hide them in this hero, so the group photos fade out softer at the bottom + cropped sides */
.v-hero-e .hm-gsx .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 4%,#000 32%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(0deg,transparent 0 4%,#000 32%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent);mask-composite:intersect}
.v-hero-e .hm-gse .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 4%,#000 32%),linear-gradient(270deg,transparent 0,#000 9%);-webkit-mask-composite:source-in;
  mask:linear-gradient(0deg,transparent 0 4%,#000 32%),linear-gradient(270deg,transparent 0,#000 9%);mask-composite:intersect}
.v-hero-e .hm-sgl .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent);mask-composite:intersect}
.v-hero-e .hm-yjk .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent);mask-composite:intersect}
.v-hero-e .hm-shk .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(270deg,transparent 0,#000 7%);-webkit-mask-composite:source-in;
  mask:linear-gradient(0deg,transparent 0 2%,#000 22%),linear-gradient(270deg,transparent 0,#000 7%);mask-composite:intersect}
/* hover: lift + gold glow on the figure under the mouse, the others dim slightly */
.v-hero-e .hm-slot.is-hot{z-index:20}
:where(html:not(.fx-no-hover)) .v-hero-e .hm-slot.is-hot .hm-art{translate:0 -10px;scale:1.05}
:where(html:not(.fx-no-hover)) .v-hero-e .hm-slot.is-hot .hm-bob{filter:drop-shadow(0 0 2px #fff6c8) drop-shadow(0 0 3px #ffe27a) drop-shadow(0 0 16px rgba(255,214,60,.95)) drop-shadow(0 18px 20px rgba(120,60,0,.35))}
.v-hero-e.hm-has-hot .hm-slot:not(.is-hot) .hm-bob{filter:drop-shadow(0 0 1.5px rgba(255,250,225,.6)) drop-shadow(0 10px 12px rgba(120,60,0,.22)) saturate(.82) brightness(.9)}
/* the big logo overlaps the bottom of the row */
.v-hero-e .he-logo-p{margin-top:calc(var(--lw) * -.17)}
/* effects switches + reduced motion */
.fx-no-idle .v-hero-e .hm-bob{animation:none}
.fx-no-reveal .v-hero-e .hm-rise{animation:none}
@media(prefers-reduced-motion:reduce){.v-hero-e .hm-rise,.v-hero-e .hm-bob{animation:none}.v-hero-e .hm-art{transition:none}}
@keyframes hm-pop{0%{opacity:0;transform:translateY(30%) scale(.92)}48%{opacity:1}66%{transform:translateY(-2.5%) scale(1.01)}84%{transform:translateY(.8%)}100%{opacity:1;transform:none}}
@keyframes hm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* phone: the hero P phone cluster (mic figure big, four singles, both groups); the rest are desktop only */
@media(max-width:760px){
  .v-hero-e,.v-hero-e:has(.ol-ytag){--ch:clamp(260px,40svh,340px);--lw:min(86vw,420px)}
  .v-hero-e .hm-stage{width:calc(100% + 28px);margin-top:calc(var(--ch) * -.1)}
  .v-hero-e .hm-desk{display:none}
  .v-hero-e .hm-halo{width:110%}
  .v-hero-e .hm-slot{left:calc(var(--mx) * 1%);bottom:calc(var(--my,0) * 1%);height:calc(var(--ms) * 1%);z-index:var(--mz,1);clip-path:inset(-60% -60% var(--cbm,-60%) -60%)}
  .v-hero-e .hm-ground{height:30%}
  .v-hero-e .he-logo-p{margin-top:calc(var(--lw) * -.2)}
}
/* ==================== end LINEUP LAYER ==================== */

/* ==================== PHONE (<=700px): all 14 in hero P's poster pyramid ====================
   Mic figure biggest at the top (furthest back), then back / middle / front rows of singles stepping down and forward,
   the two group shots front-most across the bottom, tucked behind the logo. Placement comes from LINEUP p: { x, y, s, z, r }
   in hero-E.js, in phone units: --u = 1% of the width, capped by the screen height so banner + cluster + logo + copy +
   pre-register button all fit the first screen (short screens shrink the whole cluster instead of dropping anyone).
   Desktop and 701-760px never read any of this. */
@media(max-width:700px){
  .v-hero-e,.v-hero-e:has(.ol-ytag){--u:max(2.3px,min(calc((100vw - 28px) / 100 + .28px),calc((100svh - 412px) / 98)));--ch:calc(var(--u) * 98);--lw:min(82vw,400px)}
  .v-hero-e{padding-top:70px}
  /* banner: tucked tighter at the top, still clear of every figure */
  .v-hero-e .he-honor{font-size:.6rem;line-height:1.3;padding:6px 14px;margin-bottom:6px;box-shadow:2px 2px 0 var(--gold)}
  .v-hero-e .hm-stage{margin-top:0}
  .v-hero-e .hm-desk{display:block}
  .v-hero-e .hm-slot{left:calc(50% + (var(--px) - 50) * var(--u));bottom:calc(var(--py) * var(--u));height:calc(var(--ps) * var(--u));z-index:var(--pz,1);clip-path:none}
  .v-hero-e .hm-halo{top:40%;width:calc(var(--u) * 118);height:calc(var(--ch) * .95)}
  .v-hero-e .hm-ground{height:24%;bottom:-8%}
  .v-hero-e :is(.he-h1,.he-sub,.he-cdl,.he-row){position:relative;z-index:4}
  /* singles: several photos are cropped flat on a side, so on the tight stack every single gets soft side edges too */
  .v-hero-e .hm-slot:not(.hm-group) .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 2%,#000 var(--fade,22%)),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;
    mask:linear-gradient(0deg,transparent 0 2%,#000 var(--fade,22%)),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent);mask-composite:intersect}
  .v-hero-e .hm-sgl .hm-art{--fade:42%}
  .v-hero-e .hm-slot.hm-mic .hm-art{-webkit-mask:linear-gradient(0deg,transparent 0 2%,#000 26%),linear-gradient(90deg,transparent 0,#000 9%,#000 82%,transparent);
    mask:linear-gradient(0deg,transparent 0 2%,#000 26%),linear-gradient(90deg,transparent 0,#000 9%,#000 82%,transparent)}
  /* rows behind read as depth */
  .v-hero-e .hm-r-back .hm-bob{filter:drop-shadow(0 0 1.5px rgba(255,250,225,.85)) drop-shadow(0 8px 10px rgba(120,60,0,.2)) brightness(.93) saturate(.95)}
  .v-hero-e .hm-r-mid .hm-bob{filter:drop-shadow(0 0 1.5px rgba(255,250,225,.9)) drop-shadow(0 10px 12px rgba(120,60,0,.24)) brightness(.97)}
  /* no mouse on a phone: a tiny idle drift per row (front rows drift a little more) */
  .v-hero-e .hm-slot{animation:hm-drift var(--dr,11s) ease-in-out var(--fdl,0s) infinite}
  .v-hero-e .hm-r-top{--dd:2px;--dr:12s}
  .v-hero-e .hm-r-back{--dd:2.5px;--dr:13s}
  .v-hero-e .hm-r-mid{--dd:3.5px;--dr:11s}
  .v-hero-e .hm-r-front{--dd:4.5px;--dr:10s}
  .v-hero-e .hm-r-grp{--dd:5.5px;--dr:9s}
  .fx-no-idle .v-hero-e .hm-slot{animation:none}
  /* logo a touch smaller and over the groups' feet, copy + countdown + button tightened so the button is on the first screen */
  .v-hero-e .he-logo-p{margin-top:calc(var(--lw) * -.3)}
  .v-hero-e .he-h1{font-size:clamp(1.05rem,5.4vw,1.4rem);line-height:1.08;margin-top:2px}
  .v-hero-e .he-sub{font-size:.84rem;line-height:1.2;margin-top:6px;max-width:36ch}
  .v-hero-e .he-where{margin-top:3px;font-size:.64em;letter-spacing:.04em;text-wrap:balance}
  .v-hero-e .he-cdl{font-size:.68rem;margin-top:7px}
  .v-hero-e .he-cdl b{margin-top:4px;padding:3px 10px}
  .v-hero-e .he-row{margin-top:8px;gap:8px}
  .v-hero-e .he-cd-u{width:62px;padding:5px 6px 4px}
  .v-hero-e .he-cd b{font-size:1.2rem}
  .v-hero-e .he-btn{padding:12px 18px;font-size:.88rem}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.v-hero-e .hm-slot{animation:none}}
@keyframes hm-drift{0%,100%{translate:0 0}50%{translate:var(--dd,3px) calc(var(--dd,3px) * -.4)}}
/* phone safety net (hero-E.js stickyPrereg): slim pre-register bar, only while the hero button is still below the fold */
.hm-sticky{display:none}
@media(max-width:700px){
  .hm-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));
    background:var(--ink);border-top:3px solid #000;box-shadow:0 -6px 18px rgba(60,30,0,.25);translate:0 110%;visibility:hidden;transition:translate .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
  .hm-sticky::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--red) 0 33.3%,var(--gold) 0 66.6%,var(--green) 0)}
  .hm-sticky.is-on{translate:0 0;visibility:visible;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
  .hm-sticky .btn{display:block;width:100%;max-width:420px;margin:0 auto;padding:11px 16px;font-size:.88rem;text-align:center}
  body:has(#menu.open) .hm-sticky{display:none}
}
@media(prefers-reduced-motion:reduce){.hm-sticky,.hm-sticky.is-on{transition:none}}
/* ==================== end PHONE ==================== */

/* ==================== ARRANGE MODE (admin only: ?arrange=1 or Shift+A, see the ARRANGE KIT in hero-E.js) ====================
   Nothing here applies to visitors: the in-hero rules need .is-arranging on the section, the .ola-* panel/pill/ghost only
   exist while arranging. Parallax + hover dimming pause, every photo gets a dashed outline + its slot number, the
   selected photo glows, the drop target gets a gold ring (red when the group-photo rule blocks it). */
.v-hero-e.is-arranging [data-depth]{translate:none!important}
.v-hero-e.is-arranging .hm-art{cursor:grab;touch-action:none}
.v-hero-e.is-arranging .hm-rise{position:relative;outline:2px dashed rgba(74,44,6,.45);outline-offset:-2px;border-radius:12px}
.v-hero-e.is-arranging .hm-rise::after{content:attr(data-n);position:absolute;left:6px;top:6px;z-index:2;min-width:24px;height:24px;padding:0 6px;border-radius:99px;
  background:#1e1e1e;color:#f9bc0d;font:400 .72rem/24px var(--fb);text-align:center;box-shadow:0 0 0 2px #fff6c8;pointer-events:none}
.v-hero-e.is-arranging .hm-rise::before{content:"";position:absolute;inset:-4px;border-radius:15px;pointer-events:none;opacity:0;transition:opacity .2s}
.v-hero-e.is-arranging .hm-slot:focus{outline:none}
.v-hero-e.is-arranging .hm-slot:focus-visible .hm-rise::before{opacity:1;box-shadow:0 0 0 3px #1e1e1e,0 0 0 6px #fff}
.v-hero-e.is-arranging .hm-slot.ola-sel .hm-rise::before{opacity:1;box-shadow:0 0 0 3px #f9bc0d,0 0 0 6px rgba(30,30,30,.85),0 0 26px 8px rgba(255,214,60,.85);animation:ola-pulse 1.3s ease-in-out infinite}
.v-hero-e.is-arranging .hm-slot.ola-target .hm-rise::before{opacity:1;box-shadow:0 0 0 4px #f9bc0d,0 0 0 8px #1e1e1e,0 0 34px 12px rgba(255,214,60,.95)}
.v-hero-e.is-arranging .hm-slot.ola-nope .hm-rise::before{opacity:1;box-shadow:0 0 0 4px #c1121f,0 0 0 8px rgba(255,255,255,.85)}
.v-hero-e.is-arranging .hm-slot:is(.ola-sel,.ola-target) .hm-bob{filter:drop-shadow(0 0 2px #fff6c8) drop-shadow(0 0 4px #f9bc0d) drop-shadow(0 0 18px rgba(255,214,60,.95)) drop-shadow(0 16px 18px rgba(120,60,0,.3))}
.v-hero-e.is-arranging .hm-slot.ola-lift .hm-art{opacity:.35}
.ola-dragging,.ola-dragging *{cursor:grabbing!important}
@keyframes ola-pulse{50%{box-shadow:0 0 0 3px #f9bc0d,0 0 0 6px rgba(30,30,30,.85),0 0 40px 14px rgba(255,214,60,.6)}}

/* the drag ghost that follows the pointer */
.ola-ghost{position:fixed;left:0;top:0;z-index:500;width:auto;max-width:none;pointer-events:none;opacity:.92;
  filter:drop-shadow(0 0 2px #fff6c8) drop-shadow(0 0 5px #f9bc0d) drop-shadow(0 20px 26px rgba(0,0,0,.35))}

/* the panel: bottom-left on desktop, a bottom sheet on a phone */
.ola-panel{position:fixed;left:16px;bottom:16px;z-index:350;width:min(376px,calc(100vw - 32px));background:#1e1e1e;color:#fff;border:3px solid #000;border-radius:18px;
  box-shadow:6px 6px 0 #f9bc0d,0 18px 40px rgba(0,0,0,.35);font-family:var(--f);font-weight:600;padding:14px 12px 12px;transition:opacity .2s}
.ola-panel::before{content:"";position:absolute;left:14px;right:14px;top:-3px;height:5px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#c1121f 0 33.3%,#f9bc0d 0 66.6%,#1b7a4b 0)}
.ola-dragging .ola-panel{opacity:.22;pointer-events:none}
.ola-head{display:flex;align-items:center;gap:8px}
.ola-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f9bc0d;color:#1e1e1e}
.ola-title{flex:1;min-width:0;font-family:var(--fb);font-weight:400;text-transform:uppercase;font-size:.92rem;letter-spacing:.03em;line-height:1.1}
.ola-title small{display:block;margin-top:2px;font-family:var(--f);font-weight:600;text-transform:none;letter-spacing:0;font-size:.7rem;color:rgba(255,255,255,.6)}
.ola-ib{flex:none;min-width:44px;min-height:40px;padding:0 12px;border-radius:12px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
  font:400 .66rem var(--fb);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background .2s,border-color .2s}
.ola-ib:hover{border-color:#f9bc0d}
.ola-done{background:#f9bc0d;color:#1e1e1e;border-color:#f9bc0d}
.ola-panel.is-min .ola-body{display:none}
.ola-status{margin:10px 2px 8px;min-height:2.5em;font-size:.76rem;line-height:1.3;color:#ffe9a6}
.ola-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ola-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:6px 3px;border-radius:12px;
  border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font:400 .58rem/1.1 var(--fb);text-transform:uppercase;letter-spacing:.03em;text-align:center;
  cursor:pointer;transition:background .2s,border-color .2s,transform .15s,opacity .2s}
.ola-btn:hover{background:rgba(249,188,13,.16);border-color:#f9bc0d}
.ola-btn:active{transform:scale(.95)}
.ola-btn:disabled{opacity:.32;cursor:not-allowed;transform:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.ola-btn.is-wait{opacity:.55}
.ola-btn svg{color:#f9bc0d}
.ola-panel :is(button,a,input):focus-visible{outline:3px solid #fff;outline-offset:2px}
.ola-order-l{margin:12px 2px 6px;font-family:var(--fb);text-transform:uppercase;font-size:.62rem;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.ola-order-l small{font-family:var(--f);text-transform:none;letter-spacing:0;font-size:.68rem;color:rgba(255,255,255,.5)}
.ola-order{display:flex;gap:5px;overflow-x:auto;list-style:none;margin:0 0 10px;padding:3px 3px 8px;scrollbar-width:thin;overscroll-behavior:contain}
.ola-order li{flex:none}
.ola-order button{position:relative;display:block;width:40px;height:52px;padding:0;border-radius:10px;border:2px solid rgba(255,255,255,.18);background:#ffe48a;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .15s}
.ola-order .is-grp button{width:64px}
.ola-order img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.ola-order b{position:absolute;left:2px;bottom:2px;min-width:17px;height:17px;padding:0 3px;border-radius:99px;background:#1e1e1e;color:#f9bc0d;font:400 .6rem/17px var(--fb);text-align:center}
.ola-order button:hover{border-color:#f9bc0d}
.ola-order button.on{border-color:#f9bc0d;box-shadow:0 0 0 2px #f9bc0d;transform:translateY(-2px)}
.ola-save{width:100%;min-height:48px;border-radius:14px;border:3px solid #000;background:#f9bc0d;color:#1e1e1e;font:400 .95rem var(--fb);text-transform:uppercase;letter-spacing:.04em;
  box-shadow:3px 3px 0 #c1121f;cursor:pointer;transition:transform .15s,background .2s}
.ola-save:hover{transform:translateY(-1px)}
.ola-save.is-saved{background:#1b7a4b;color:#fff;box-shadow:3px 3px 0 #000}
/* the "Saved" card: share link + copy buttons + email, floating just above the panel */
.ola-saved{position:absolute;left:0;right:0;bottom:calc(100% + 12px);background:#fffaf0;color:#1e1e1e;border:3px solid #1e1e1e;border-radius:16px;padding:12px;box-shadow:5px 5px 0 #f9bc0d}
.ola-saved[hidden]{display:none}
.ola-saved-h{display:flex;align-items:center;justify-content:space-between}
.ola-saved-h b{font-family:var(--fb);font-weight:400;text-transform:uppercase;font-size:1rem;color:#1b7a4b}
.ola-x{width:36px;height:36px;border-radius:10px;border:2px solid #1e1e1e;background:#fff;font:700 1.2rem/1 var(--f);cursor:pointer}
.ola-saved-l{display:block;margin:6px 0 4px;font-size:.74rem}
.ola-link{width:100%;min-height:40px;padding:8px 10px;border-radius:10px;border:2px solid #1e1e1e;background:#fff;font:600 .72rem var(--f);color:#1e1e1e}
.ola-saved-act{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.ola-saved-act :is(button,a){display:grid;place-items:center;min-height:44px;padding:6px 8px;border-radius:12px;border:2px solid #1e1e1e;background:#fff;color:#1e1e1e;
  font:400 .62rem/1.15 var(--fb);text-transform:uppercase;letter-spacing:.03em;text-align:center;text-decoration:none;cursor:pointer}
.ola-saved-act :is(button,a):hover{background:#ffe48a}
.ola-saved-act .ola-mail{grid-column:span 2;background:#c1121f;border-color:#c1121f;color:#fff}
/* the floating "Arrange" pill (main page, ?arrange=1 only) */
.ola-pill{position:fixed;left:16px;bottom:16px;z-index:350;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 18px 0 12px;border-radius:99px;border:3px solid #000;
  background:#1e1e1e;color:#f9bc0d;font:400 .8rem var(--fb);text-transform:uppercase;letter-spacing:.05em;box-shadow:4px 4px 0 #f9bc0d;cursor:pointer}
.ola-pill:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:700px){
  .ola-panel{left:0;right:0;bottom:var(--picker-h,0px);width:auto;border-radius:20px 20px 0 0;border-width:3px 0 0;padding:12px 12px calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -10px 30px rgba(60,30,0,.35)}
  .ola-body{max-height:min(46svh,380px);overflow:auto;overscroll-behavior:contain}
  .ola-title{font-size:.84rem}
  .ola-title small,.ola-ic{display:none}
  .ola-ib{min-height:44px}
  .ola-status{margin:8px 2px 6px;min-height:0;font-size:.7rem;line-height:1.25}
  .ola-grid{grid-template-columns:repeat(5,1fr);gap:5px}
  .ola-btn{min-height:48px;padding:4px 2px;font-size:.5rem;gap:3px}
  .ola-order-l{display:none}
  .ola-order button{width:36px;height:46px}
  .ola-order .is-grp button{width:56px}
  .ola-save{min-height:44px}
  .ola-order{margin-bottom:8px}
  .ola-saved{left:10px;right:10px}
  .ola-pill{left:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.v-hero-e.is-arranging .hm-slot.ola-sel .hm-rise::before{animation:none}.ola-btn,.ola-save,.ola-order button{transition:none}}
/* ==================== end ARRANGE MODE ==================== */