/* 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}
.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)}
.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,.85)) drop-shadow(0 10px 12px rgba(120,60,0,.2)) brightness(.9) saturate(.94)}
.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}
/* 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: all 14 photos in staggered tiers, with both bands along the bottom. */
@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-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)}
  .v-hero-e .hm-ground{height:30%}
  .v-hero-e .he-logo-p{margin-top:calc(var(--lw) * -.2)}
}
/* ==================== end LINEUP LAYER ==================== */