/* Color / festival posters. Scoped to this route; the dark edition is intact. */
#campus-now{--paper:#f7f7ec;--black:#202020;background:var(--black);border:0}
#campus-now::backdrop{background:#202020;backdrop-filter:none;-webkit-backdrop-filter:none}
#campus-now[open]{animation:color-arrive .16s ease-out both}
@keyframes color-arrive{from{opacity:0}to{opacity:1}}
#campus-now .now-shell{padding-inline:28px;overflow:clip}
#campus-now .now-header{margin-inline:-28px;padding:20px 28px 16px;background:var(--black);border:0;gap:18px;row-gap:12px}
#campus-now .now-brand h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.055em}
#campus-now .now-clock time{font-size:30px;letter-spacing:-.04em;color:var(--paper)}
#campus-now .now-clock>span{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#b4b4af}
#campus-now .now-close{border:1px solid #ffffff28;background:none;color:var(--paper)}
#campus-now .now-stage-nav{gap:18px}
#campus-now .now-stage-nav button{min-height:38px;padding:4px 0 7px;border:0;text-align:left;color:#b4b4af;font-size:11px;letter-spacing:.04em;position:relative}
#campus-now .now-stage-nav button:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 6px 1px 0;background:var(--scene)}
#campus-now .now-stage-nav button[aria-current]{color:var(--paper)}
#campus-now .now-stage-nav button[aria-current]:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--scene)}

/* Broad diagonal strips, with the type and portraits kept upright. */
#campus-now .now-stages{margin-inline:-28px;padding:14px 0 16px;border:0;overflow:hidden;isolation:isolate;background:var(--black);gap:0;align-items:stretch}
#campus-now .now-stage{--scene:#202020!important;--band:#ff4785;--tilt:-3deg;--sphere:clamp(200px,21.5vw,285px);padding:0 0 30px;border:0;isolation:isolate;color:var(--black)}
#campus-now .now-stage:nth-child(2){--band:#ff701c;--tilt:2.5deg}
#campus-now .now-stage:nth-child(3){--band:#baff00;--tilt:-2deg}
#campus-now .now-stage:before{content:'';position:absolute;inset:-24px -20px;background:radial-gradient(ellipse at 20% 20%,#ffffff24,transparent 55%),linear-gradient(140deg,#ffffff09,transparent 55%,#00000009),var(--band);background-size:160% 140%,100% 100%;background-position:0% 30%,0 0;transform:skewX(var(--tilt));z-index:-2;pointer-events:none}
#campus-now .now-stage+.now-stage:before{border-left:2px solid #f7f7ecb3;box-shadow:-5px 0 0 #2020201c,-14px 0 24px #20202016}
#campus-now .now-stage:after{content:'✳';position:absolute;left:-42px;top:115px;font-size:210px;line-height:1;color:var(--black);opacity:.055;transform:rotate(-15deg);z-index:-1;pointer-events:none}
#campus-now .now-stage:nth-child(2):after{content:'↗';left:auto;right:-28px;top:110px;transform:none;font-size:245px}
#campus-now .now-stage:nth-child(3):after{content:'';left:-55px;top:125px;width:230px;height:230px;border:2px solid var(--black);border-radius:50%;transform:rotate(-25deg) scaleY(.6);opacity:.09}
#campus-now .now-stage-heading{top:65px;right:18px;z-index:6}
#campus-now .now-return{border:0;background:var(--black);color:var(--paper);border-radius:0;font-size:10px;min-height:36px;padding:7px 9px}
#campus-now .now-carousel{margin:0}
#campus-now .now-carousel>.now-orbit-stage{left:22px;top:18px;transform:none;padding:0 26px 0 0;min-height:52px;max-width:calc(100% - 44px);color:var(--black);z-index:5}
#campus-now .now-orbit-stage strong{color:var(--black);font-family:HelveticaCondensed,HelveticaNow,Arial,sans-serif;font-weight:700;font-size:clamp(39px,4.1vw,56px);letter-spacing:-.025em;line-height:.88}
#campus-now .now-orbit-stage>span{margin-top:8px;color:var(--black);opacity:.76;font-size:11px;letter-spacing:.15em}
#campus-now .now-stage-arrow{color:var(--black);right:0;top:0;font-size:23px}
#campus-now .now-orbit-stage:hover strong{text-decoration-thickness:2px;text-underline-offset:5px}
#campus-now .now-track{padding:103px 0 4px}
#campus-now .now-track:before,#campus-now .now-track:after{flex-basis:21%}
#campus-now .now-slide{--scene:#202020!important;flex-basis:58%;color:var(--black)}
#campus-now .now-sphere{margin:6px 0 42px}
#campus-now .now-orb{background:#202020;border-radius:50%}
#campus-now .now-portrait{box-shadow:none}
#campus-now .now-portrait:after{background:linear-gradient(transparent 50%,#20202030 70%,#202020e6 100%)}
#campus-now .now-slide:not(.is-selected) .now-sphere{transform:scale(.46);opacity:.42}
#campus-now .now-slide:not(.is-selected) .now-portrait{filter:saturate(.65)}
#campus-now .now-slide[data-status=past] .now-portrait{filter:saturate(.25);opacity:.72}

/* Artist lettering borrows the diagonal banner language without moving the face. */
#campus-now .now-slide .now-slide-copy{bottom:10%;left:-4%;right:-4%;transform:rotate(-3deg);text-align:center}
#campus-now .now-slide-copy h4{color:var(--paper);font-size:clamp(27px,2.7vw,38px);letter-spacing:-.045em;line-height:1.12;text-shadow:none}
#campus-now .now-slide-copy [data-now-artist]{background:var(--paper);color:var(--black);padding:0 .19em .045em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#campus-now .now-slide-copy [data-now-artist]:hover{color:var(--black);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
#campus-now .now-slide[data-status=past] .now-slide-copy [data-now-artist]{background:#e2ded4;color:#52514d}
#campus-now .now-time-ticket{top:var(--ticket-top,3%);right:var(--ticket-right,-7%);transform:rotate(7deg);background:var(--paper);color:var(--black);border:0;padding:7px 10px;font-size:24px;font-weight:800;box-shadow:3px 3px 0 #202020}
#campus-now .now-slide[data-status=ready] .now-time-ticket{background:var(--black);color:var(--paper);box-shadow:3px 3px 0 var(--paper)}
#campus-now .now-slide .now-slide-label{bottom:-23px;min-height:30px;border:0;border-radius:0;padding:5px 9px;font-size:12px;font-weight:800;line-height:1.25;color:var(--black);background:transparent}
#campus-now .now-slide:is([data-status=playing],[data-status=live]) .now-slide-label{background:var(--black);color:var(--paper)}
#campus-now .now-slide[data-status=ready] .now-slide-label{background:var(--paper);color:var(--black)}
#campus-now .now-slide[data-status=past] .now-slide-label{color:#333;opacity:.75}
#campus-now .now-slide[data-progress=true] .now-orb-ring{background:conic-gradient(var(--black) var(--progress),#20202026 0);mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 0)}
#campus-now .now-slide.is-selected:is([data-status=playing],[data-status=live]) .orbit-one{border-color:var(--paper);opacity:.35}
#campus-now .now-slide[data-status=ready] .now-orb-ring{border:1px solid #2020205c}
#campus-now .now-slide.is-selected[data-status=ready] .orbit-one{border-color:var(--paper);opacity:.55}
#campus-now .now-moment-detail{color:#30302d;margin:0;min-height:0;font-size:12px;padding:0 5px}
#campus-now .now-arrow{top:calc(103px + var(--sphere)/2 - 20px);width:38px;height:44px;color:var(--black);background:transparent;font-size:33px}
#campus-now .now-prev{left:6px}
#campus-now .now-forward{right:6px}
#campus-now .now-arrow:hover{background:#ffffff25}
#campus-now .now-slide[data-status=ended] .now-orb{background:#2020200d;border:1px solid #20202025}
#campus-now .now-slide[data-status=ended] .now-orb-symbol{color:var(--black);font-size:48px;opacity:.5}
#campus-now .now-slide[data-status=ended] .now-slide-copy h4{font-family:HelveticaCondensed,HelveticaNow,Arial,sans-serif;font-size:35px;text-transform:uppercase;color:var(--black);text-shadow:none}
#campus-now .now-slide[data-status=ended] .now-slide-label{background:var(--black);color:var(--paper)}
#campus-now .now-stage :is(button,a):focus-visible{outline:2px solid var(--black);outline-offset:5px}
#campus-now .now-slide-copy [data-now-artist]:focus-visible{outline:2px solid var(--paper);outline-offset:5px}

.now-color-ribbon{overflow:hidden;margin:0 -28px;padding:11px 0;background:var(--paper);color:var(--black);transform:rotate(1deg);font-family:HelveticaCondensed,HelveticaNow,Arial,sans-serif;font-weight:700;font-size:18px;letter-spacing:.015em;line-height:1.2}
.now-color-ribbon>span{display:block;width:max-content;white-space:nowrap}
.now-color-ribbon-track{display:flex;width:max-content;animation:color-ribbon-scroll 32s linear infinite}
.now-color-ribbon-track>span{display:block;flex:none;min-width:100vw;white-space:nowrap}
.now-color-ribbon:not(.is-in-view) .now-color-ribbon-track{animation-play-state:paused}
@keyframes color-ribbon-scroll{to{transform:translateX(-50%)}}
#campus-now[data-motion-suspended] .now-color-ribbon-track{animation-play-state:paused}
.motion-paused .now-color-ribbon-track{animation:none!important}
@media(prefers-reduced-motion:reduce){.now-color-ribbon-track{animation:none!important}}
.now-color-ribbon b{display:inline-block;margin-inline:17px;font-size:18px}
#campus-now .now-footer{border:0;display:flex;flex-wrap:wrap;gap:0 20px;padding:16px 0 0}
#campus-now .now-footer>span{display:none}
#campus-now .now-footer>a{font-size:13px;min-height:44px}
#campus-now .now-footer .now-compare{color:#b4b4af;font-size:12px;font-weight:400;margin-right:auto}
#campus-now .now-source{color:#a7a7a0;padding:0 0 6px;font-size:11px}
#campus-now .now-test-clock{background:var(--black);border-color:#ffffff22;box-shadow:none;padding-inline:28px}
#campus-now .now-test-clock-heading{font-size:12px}
#campus-now #now-test-toggle{font-size:11px;border-radius:0;color:var(--paper)}

@media(min-width:761px) and (max-width:1000px){
 #campus-now .now-stage{--sphere:clamp(185px,23vw,230px)}
 #campus-now .now-carousel>.now-orbit-stage{left:18px}
 #campus-now .now-stage-heading{top:73px;right:15px}
 #campus-now .now-return{font-size:9px;min-height:27px;padding:5px 7px}
 #campus-now .now-time-ticket{font-size:21px;padding:6px 8px}
}
@media(max-width:760px){
 #campus-now .now-shell{padding-inline:20px}
 #campus-now .now-header{margin-inline:-20px;padding:max(12px,env(safe-area-inset-top)) 20px 7px;gap:14px;row-gap:10px}
 #campus-now .now-brand h2{font-size:28px;line-height:1.02;max-width:170px}
 #campus-now .now-clock time{font-size:27px}
 #campus-now .now-clock>span{font-size:9px}
 #campus-now .now-close{width:38px;height:44px;font-size:29px;border:0}
 #campus-now .now-stages{display:block;margin-inline:-20px;padding:12px 0 18px;background:linear-gradient(#ff4785 0 30%,#ff701c 30% 65%,#baff00 65%)}
 #campus-now .now-stage{--sphere:clamp(218px,64vw,310px);padding:0 20px 18px}
 #campus-now .now-stage:before{inset:-15px 0;transform:skewY(var(--tilt))}
 #campus-now .now-stage+.now-stage:before{border-left:0;border-top:2px solid #f7f7ecbf;box-shadow:0 -5px 0 #20202020,0 -12px 20px #20202018}
 #campus-now .now-stage+.now-stage{padding-top:0;border:0}
 #campus-now .now-stage:after{top:110px;left:-44px;font-size:200px}
 #campus-now .now-stage:nth-child(2):after{top:90px;right:-8px;left:auto;font-size:215px}
 #campus-now .now-stage:nth-child(3):after{left:-80px;top:110px;width:260px;height:220px}
 #campus-now .now-stage-heading{top:16px;right:20px}
 #campus-now .now-return{font-size:9px;min-height:32px;max-width:105px;padding:5px 7px;line-height:1.15;white-space:normal}
 #campus-now .now-carousel{margin-inline:-20px}
 #campus-now .now-carousel>.now-orbit-stage{left:20px;top:18px;max-width:calc(100% - 155px)}
 #campus-now .now-orbit-stage strong{font-size:42px;line-height:.86}
 #campus-now .now-orbit-stage>span{font-size:10px;margin-top:7px}
 #campus-now .now-stage-arrow{font-size:22px;top:-2px}
 #campus-now .now-track{padding-top:76px}
 #campus-now .now-track:before,#campus-now .now-track:after{flex-basis:22%}
 #campus-now .now-slide{flex-basis:56%}
 #campus-now .now-sphere{margin:4px 0 42px}
 #campus-now .now-slide-copy h4{font-size:33px}
 #campus-now .now-time-ticket{font-size:23px;padding:6px 9px}
 #campus-now .now-arrow{top:calc(76px + var(--sphere)/2 - 20px)}
 #campus-now .now-prev{left:9px}
 #campus-now .now-forward{right:9px}
 #campus-now .now-slide .now-slide-label{font-size:12px}
 .now-color-ribbon{margin-inline:-20px;font-size:17px;padding-block:10px}
 #campus-now .now-footer{padding-top:10px;gap:0 12px}
 #campus-now .now-footer>a{font-size:12px}
 #campus-now .now-source{font-size:10px;line-height:1.4;padding-bottom:8px}
 #campus-now .now-test-clock{padding:8px 20px max(8px,env(safe-area-inset-bottom))}
 #campus-now .now-test-clock-heading{gap:8px}
 #campus-now .now-test-clock-limits{font-size:10px}
}
@media(max-width:359px){
 #campus-now .now-header{gap:8px;row-gap:8px}
 #campus-now .now-brand h2{font-size:26px;max-width:155px}
 #campus-now .now-clock time{font-size:24px}
 #campus-now .now-orbit-stage strong{font-size:35px}
 #campus-now .now-slide-copy h4{font-size:29px}
 #campus-now .now-stage-nav{gap:12px}
 #campus-now .now-stage-nav button{font-size:10px}
}

/* Strong on-stage signal; a static progress arc plus a separate moving orbit. */
#campus-now .now-slide.is-selected:is([data-status=playing],[data-status=live]) .now-orb{box-shadow:0 0 0 1px #202020,0 8px 22px #20202024}
#campus-now .now-slide.is-selected[data-progress=true] .now-orb-ring{inset:-10px;mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 0)}
#campus-now .now-slide.is-selected[data-status=live]:not([data-progress=true]) .now-orb-ring{border:8px solid var(--black);opacity:1}
#campus-now .now-slide.is-selected:is([data-status=playing],[data-status=live]) .orbit-one{
  inset:-19px;border:3px solid transparent;border-top-color:var(--paper);border-bottom-color:var(--paper);border-radius:50%;opacity:.95;transform:none;
  background:none;mask:none;
  animation:color-on-stage 9s linear infinite;
}
#campus-now .now-slide:is([data-status=playing],[data-status=live]) .now-slide-label{padding:7px 12px;font-size:13px;letter-spacing:.01em;box-shadow:3px 3px 0 #f7f7ecb3}
#campus-now .now-slide.is-selected .is-equalizer{gap:3px}
#campus-now .now-slide.is-selected .is-equalizer i{width:4px;animation-duration:.72s}
#campus-now .now-stage.is-in-view:before{animation:none}
#campus-now .now-stage.is-in-view:after{animation:color-motif-drift 18s ease-in-out infinite alternate}
#campus-now .now-stage:nth-child(2):before,#campus-now .now-stage:nth-child(2):after{animation-delay:-8s}
#campus-now .now-stage:nth-child(3):before,#campus-now .now-stage:nth-child(3):after{animation-delay:-15s}
#campus-now .now-stage[data-color-stage=attitude]{--band:#ff701c}
#campus-now .now-stage[data-color-stage=feeling]{--band:#ff4785}
@media(max-width:760px){#campus-now .now-stages{background:linear-gradient(#ff701c 0 30%,#ff4785 30% 65%,#baff00 65%)}}
#campus-now .now-stage:not(.is-in-view) .now-slide :is(.now-orbit-line,.now-orb-ring,.is-equalizer i){animation-play-state:paused!important}
@keyframes color-on-stage{to{transform:rotate(360deg)}}
@keyframes color-motif-drift{from{translate:0 0}to{translate:8px -10px}}
#campus-now[data-motion-suspended] .now-stage:before,#campus-now[data-motion-suspended] .now-stage:after,#campus-now[data-motion-suspended] .now-slide :is(.now-orbit-line,.now-orb-ring,.is-equalizer i){animation-play-state:paused!important}
.motion-paused #campus-now .now-stage:before,.motion-paused #campus-now .now-stage:after{animation:none!important}
@media(prefers-reduced-motion:reduce){
 #campus-now[open],#campus-now .now-stage:before,#campus-now .now-stage:after,#campus-now .now-slide .now-orbit-line{animation:none!important}
}

#campus-now .now-slide-copy button[data-now-artist]{appearance:none;border:0;font:inherit;line-height:inherit;cursor:pointer}
