/* Circular lettering around the studio's original portrait, inspired by the supplied motion reference. */
.event-spotlight{grid-column:1/-1;justify-self:center;position:relative;isolation:isolate;width:min(100%,580px);background:var(--orange);color:var(--paper,#fff8e8);border:2px solid var(--navy);box-shadow:8px 8px 0 var(--navy);overflow:hidden}
.spotlight-label{position:relative;z-index:1;margin:0;padding:20px 22px 0;font:700 9px/1.6 Arial,sans-serif;letter-spacing:1.7px;text-transform:uppercase;color:var(--navy);overflow-wrap:anywhere}
.spotlight-art{position:relative;aspect-ratio:1;width:100%;isolation:isolate}
.spotlight-type{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.spotlight-ring{transform-box:view-box;transform-origin:300px 300px}
.spotlight-ring text{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase}
.spotlight-ring--outer text{font-size:45px}
.spotlight-ring--middle text{font-size:33px}
.spotlight-ring--inner text{font-size:24px}
.spotlight-portrait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg);width:24%;aspect-ratio:1;border:3px solid var(--yellow);border-radius:50%;overflow:hidden;box-shadow:3px 4px 0 var(--navy);background:var(--yellow)}
.spotlight-portrait img{position:absolute;display:block;width:200%;height:auto;max-width:none;left:-50%;top:-52%}
.spotlight-date{margin:0;padding:0 68px 20px 22px;font:700 9px/1.6 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy)}
.spotlight-toggle{position:absolute;right:17px;bottom:15px;display:grid;place-items:center;width:40px;height:40px;background:var(--yellow);color:var(--navy);border:2px solid var(--navy);box-shadow:3px 3px 0 var(--navy);font:bold 18px/1 Arial,sans-serif;cursor:pointer;z-index:2}
.spotlight-toggle:focus-visible{outline:3px solid var(--paper,#fff8e8);outline-offset:4px}
.spotlight-toggle:disabled{opacity:.6;cursor:default}
.event-spotlight.is-enhanced .spotlight-ring{animation:event-spotlight-turn 32s linear infinite}
.event-spotlight.is-enhanced .spotlight-ring--middle{animation-duration:26s;animation-direction:reverse}
.event-spotlight.is-enhanced .spotlight-ring--inner{animation-duration:22s}
.event-spotlight.is-paused .spotlight-ring,.event-spotlight:hover .spotlight-ring,.event-spotlight:focus-within .spotlight-ring{animation-play-state:paused}
.event-spotlight[hidden]{display:none!important}
@keyframes event-spotlight-turn{to{transform:rotate(360deg)}}
@container event-canvas (max-width:760px){.event-spotlight{box-shadow:5px 5px 0 var(--navy)}.spotlight-label{padding:16px 15px 0;font-size:7px;letter-spacing:1px}.spotlight-date{padding:0 62px 18px 15px;font-size:7px;letter-spacing:.7px}.spotlight-toggle{right:13px;bottom:13px;width:36px;height:36px;font-size:16px}.spotlight-portrait{border-width:2px;box-shadow:2px 3px 0 var(--navy)}}
@media(prefers-reduced-motion:reduce){.event-spotlight.is-enhanced .spotlight-ring{animation:none}}

/* The crew passes and rotating portrait share two equal desktop columns. */
.crew-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:38px;padding:0 38px 44px;overflow:hidden;background:radial-gradient(circle at 3px 3px,#b8a4ff20 1px,transparent 1.7px) 0 0/13px 13px}
.crew-stage>.crew-badges{min-width:0;width:100%;background:none}
.crew-stage>.event-spotlight{grid-column:auto;width:100%;max-width:580px;margin-top:46px}
.crew-stage:has(>.event-spotlight[hidden]){grid-template-columns:minmax(0,1fr)}
.crew-stage:has(>.event-spotlight[hidden])>.crew-badges{max-width:none;grid-template-columns:repeat(2,minmax(0,330px))}
@container event-canvas (min-width:1101px){
  .crew-stage>.crew-badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:92px 14px 32px;max-width:620px;justify-self:center}
  .crew-stage .crew-pass{transform:rotate(1.5deg)}
  .crew-stage .crew-pass--mentor{transform:rotate(-1.5deg);margin-top:34px}
  .crew-stage .crew-pass:hover{transform:rotate(0)}
  .crew-stage .crew-pass-top{padding:27px 13px 13px;gap:8px}
  .crew-stage .crew-pass-top>span:first-child{font-size:25px}
  .crew-stage .crew-pass-top>span:last-child{font-size:7px;letter-spacing:.6px}
  .crew-stage .crew-pass-host{font-size:8px;letter-spacing:.7px;margin:5px 13px 10px}
  .crew-stage .crew-pass-event{font-size:27px;margin:0 13px 21px}
  .crew-stage .crew-pass-role{padding:16px 9px;gap:7px}
  .crew-stage .crew-pass-role h3{font-size:36px;letter-spacing:0}
  .crew-stage .crew-pass-role>span{font-size:16px}
  .crew-stage .crew-pass-art{height:92px}
  .crew-stage .crew-pass-art>span{left:12px;font-size:67px}
  .crew-stage .crew-pass-art>i{height:70px;border-width:14px}
  .crew-stage .crew-pass-art>b{right:13px;font-size:54px;top:20px}
  .crew-stage .crew-pass-fields{padding:20px 13px;gap:15px}
  .crew-stage .crew-pass-fields span{font-size:7px;letter-spacing:.5px}
  .crew-stage .crew-pass-schedule{padding:14px 13px;font-size:8px;letter-spacing:.4px}
  .crew-stage .crew-pass-schedule>span{font-size:8px}
  .crew-stage .crew-pass-bottom{padding:12px 10px;font-size:6px;letter-spacing:.5px;gap:7px}
  .crew-stage .crew-pass-bottom>span:last-child{font-size:22px}
}
@container event-canvas (max-width:1100px){
  .crew-stage{grid-template-columns:minmax(0,1fr);gap:0;padding:0 38px 48px}
  .crew-stage>.crew-badges{padding:112px 28px 40px;gap:46px}
  .crew-stage>.event-spotlight{margin-top:10px}
}
@container event-canvas (max-width:760px){
  .crew-stage{padding:0 24px 40px}
  .crew-stage>.crew-badges{padding:95px 8px 40px;gap:24px}
}
@container event-canvas (max-width:380px){.crew-stage{padding-inline:19px}.crew-stage>.crew-badges{padding-inline:6px;gap:20px}}
@media(prefers-reduced-motion:reduce){.crew-stage .crew-pass,.crew-stage .crew-pass--mentor{transform:none}}