:root{
  --navy:#14234a; --navy-2:#0c1734; --red:#d42f2a; --red-2:#a91f1c; --gold:#f0bf4c; --cream:#f8f2e4; --paper:#fbf7ee; --ink:#161a24;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#a9c2dc;color:var(--ink);font-family:Figtree,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .9s ease}
.ready #stage{opacity:1}
.no-gl #stage{display:none}
#veil{position:fixed;inset:0;z-index:3;background:radial-gradient(ellipse at 50% 40%,#f3efe6,#cdd9e4);opacity:0;pointer-events:none;transition:opacity .4s ease}
#veil.on{opacity:1}

#header{position:fixed;left:0;right:0;top:0;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,2.4vw) 14px;pointer-events:none}
#header>*{pointer-events:auto}
.home{width:40px;height:44px;border-radius:50%;display:grid;place-items:center;transition:opacity .4s,transform .4s}
.home span{display:none}
.home::before{content:"";width:30px;height:38px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 38'%3E%3Cellipse cx='15' cy='13' rx='11' ry='12.5' fill='%23d42f2a'/%3E%3Cellipse cx='10.5' cy='8.5' rx='3' ry='4.2' fill='%23ffffff' opacity='.5'/%3E%3Cpath d='M15 25.5l-2.4 3.2h4.8z' fill='%23d42f2a'/%3E%3Cpath d='M15 28.7c-1.6 2.4 1.6 3.6 0 7.2' stroke='%23ffffff' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(10,20,40,.35))}
.at-name .home{opacity:0;transform:translateY(-8px);pointer-events:none}
.nav{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s}
.reading .nav{transform:translateX(calc(-1 * min(50vw,740px)))}
.nav{display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:19px;background:rgba(255,255,255,.94);color:var(--navy);font-weight:800;font-size:14px;letter-spacing:.01em;box-shadow:0 1px 0 rgba(0,0,0,.12),0 6px 18px rgba(10,25,55,.18);white-space:nowrap;backdrop-filter:blur(6px)}
.chip:hover{background:#fff}
.chip svg{width:18px;height:18px;flex:none}
.chip.x,.chip.snd{width:38px;padding:0;justify-content:center}
.chip.snd[aria-pressed=true]{background:var(--gold)}

/* flip: round arrows at the sides */
.flip{position:fixed;z-index:4;top:50%;height:52px;margin-top:-26px;display:flex;align-items:center;gap:10px;color:var(--navy);transition:opacity .35s}
.flip svg{width:52px;height:52px;padding:15px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 0 rgba(0,0,0,.12),0 8px 22px rgba(10,25,55,.22);flex:none;transition:transform .2s}
.flip:hover svg{transform:scale(1.07)}
.flip span{opacity:0;transform:translateX(var(--sx,-6px));transition:opacity .25s,transform .25s;white-space:nowrap;max-width:26vw;overflow:hidden;text-overflow:ellipsis;font-weight:900;font-size:14px;background:var(--navy);color:#fff;padding:7px 11px;border-radius:6px;box-shadow:0 6px 16px rgba(8,16,40,.3)}
.flip:hover span,.flip:focus-visible span{opacity:1;transform:none}
.flip.next{--sx:6px}
.flip.prev{left:max(14px,1.6vw)}
.flip.next{right:max(14px,1.6vw)}
.reading .flip,.overlay .flip{opacity:0;pointer-events:none}

/* the broadcast caption: a lower third with who's in front of the cameras */
#caption{position:fixed;z-index:4;left:max(18px,3vw);right:max(18px,3vw);bottom:calc(max(20px,3.4vh) + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:space-between;gap:18px;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s}
#caption.on{opacity:1;transform:none}
#caption>*{pointer-events:auto}
.cp-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;background:linear-gradient(180deg,#1a2d5d,var(--navy) 55%,var(--navy-2));border-radius:6px;padding:10px 20px 13px 18px;box-shadow:0 10px 30px rgba(8,16,40,.35),inset 0 1px 0 rgba(255,255,255,.12);border-left:6px solid var(--red);position:relative;overflow:hidden}
.cp-text::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),#ffe29a 40%,var(--gold))}
.cp-client:empty{display:none}
.cp-client{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:3px 0 4px}
.cp-title{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.02;color:#fff;letter-spacing:.005em;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.cp-open{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 20px 0 24px;border-radius:25px;background:var(--red);color:#fff;font-weight:900;font-size:16px;box-shadow:0 4px 0 var(--red-2),0 12px 26px rgba(120,20,15,.35);white-space:nowrap;flex:none;transition:transform .2s}
.cp-open svg{width:18px;height:18px}
.cp-open:hover{transform:translateY(-2px)}
.reading #caption,.overlay #caption,.at-name #caption{opacity:0;pointer-events:none}

#tip{position:fixed;left:0;top:0;z-index:5;pointer-events:none;background:var(--navy);color:#fff;font-weight:800;font-size:13px;padding:6px 10px;border-radius:6px;opacity:0;transition:opacity .15s;white-space:nowrap;box-shadow:0 6px 16px rgba(8,16,40,.3)}
#tip.on{opacity:1}

/* the work: the parade's printed page, bunting along its top edge */
#sheet{position:fixed;z-index:6;top:0;right:0;bottom:0;width:min(50vw,740px);display:flex;flex-direction:column;background:var(--paper);box-shadow:-30px 0 60px rgba(8,16,40,.28);transform:translateX(104%);transition:transform .6s cubic-bezier(.2,.8,.2,1);visibility:hidden;outline:none}
#sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 0,var(--red) 0 13px,transparent 13.5px) 0 0/34px 26px repeat-x,radial-gradient(circle at 50% 0,#fff 0 16px,transparent 16.5px) 17px 0/34px 26px repeat-x;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.reading #sheet{transform:none;visibility:visible}
.sh-bar{display:flex;justify-content:flex-end;gap:8px;padding:30px 20px 6px;flex:none}
.sh-bar .chip{box-shadow:0 1px 0 rgba(0,0,0,.1),0 3px 10px rgba(10,25,55,.12);background:#fff}
.sh-bar .chip span{max-width:15vw;overflow:hidden;text-overflow:ellipsis}
.sh-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px clamp(20px,3vw,40px) 48px}
.wk-head{padding:4px 0 18px;border-bottom:3px solid var(--navy);margin-bottom:22px}
.wk-client{font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.wk-title{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;font-size:clamp(32px,3.6vw,50px);line-height:1.02;color:var(--navy);margin:6px 0 10px}
.wk-desc{font-size:17px;line-height:1.5;color:#2b3142;max-width:60ch}
.wk-sec{margin:0 0 30px}
.wk-h{font-size:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.wk-h::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
.wk-p{font-size:15px;line-height:1.55;color:#394054;margin:-4px 0 14px;max-width:62ch}
.wk-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.wk-films.one{grid-template-columns:1fr}
.wk-film.tall{max-width:320px}
.wk-frame{position:relative;display:block;width:100%;border-radius:6px;overflow:hidden;background:#0d1220;box-shadow:0 10px 24px rgba(10,20,40,.18)}
.wk-frame img{width:100%;height:100%;object-fit:cover}
.wk-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wk-frame .glyph{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(212,47,42,.95);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.wk-frame .glyph::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff}
button.wk-frame:hover .glyph{transform:scale(1.06)}
.wk-cap{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#4a5165;padding:8px 2px 0}
.wk-cap b{color:var(--ink);font-weight:800}
.wk-imgs{display:grid;gap:12px}
.wk-imgs.full{grid-template-columns:1fr}
.wk-imgs.row-2,.wk-imgs:not(.full){grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-imgs.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wk-img img{width:100%;height:auto;border-radius:4px;box-shadow:0 6px 16px rgba(10,20,40,.14);background:#e8e1d0}
.wk-audio{list-style:none;display:flex;flex-direction:column;gap:8px}
.wk-track{display:grid;grid-template-columns:40px 28px 1fr;grid-template-rows:auto 4px;align-items:center;column-gap:8px;row-gap:6px;background:#fff;border-radius:8px;padding:10px 14px;box-shadow:0 2px 8px rgba(10,20,40,.08)}
.wk-ap{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--navy);position:relative}
.wk-ap::after{content:"";position:absolute;left:15px;top:12px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.wk-track.on .wk-ap{background:var(--red)}
.wk-track.on .wk-ap::after{left:13px;top:13px;width:14px;height:14px;border:0;background:linear-gradient(90deg,#fff 0 4px,transparent 4px 9px,#fff 9px)}
.wk-n{font-size:12px;font-weight:900;color:var(--red);letter-spacing:.06em}
.wk-at{font-weight:800;font-size:15px}
.wk-bar{grid-column:2/4;height:4px;border-radius:2px;background:#e7e1d3;overflow:hidden}
.wk-bar i{display:block;height:100%;width:0;background:var(--red)}
.wk-credits{border-top:1px dashed #cfc5ae;padding-top:14px;font-size:13px;line-height:1.6;color:#4d5468}

/* overlays: the lineup and the about page */
.ov{position:fixed;inset:0;z-index:9;background:rgba(10,20,44,.55);backdrop-filter:blur(10px);display:grid;place-items:center;padding:max(16px,3vw)}
.lineup,.aboutcard{position:relative;background:var(--paper);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);width:min(1180px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain}
.lineup::before,.aboutcard::before{content:"";position:sticky;display:block;top:0;height:22px;z-index:2;background:radial-gradient(circle at 50% 0,var(--red) 0 11px,transparent 11.5px) 0 0/30px 22px repeat-x,radial-gradient(circle at 50% 0,#fff 0 14px,transparent 14.5px) 15px 0/30px 22px repeat-x}
.lu-top{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 22px 4px}
.lu-name{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;font-size:28px;color:var(--navy)}
.lu-name img{height:clamp(84px,11vw,132px);width:auto;filter:drop-shadow(0 6px 10px rgba(10,20,40,.25))}
.lu-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;padding:8px 22px 26px}
.lu-item{display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%;background:#fff;border-radius:10px;padding:8px 8px 12px;box-shadow:0 2px 10px rgba(10,20,40,.08);transition:transform .2s,box-shadow .2s}
.lu-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,20,40,.16)}
.lu-pic{display:block;aspect-ratio:1;border-radius:7px;background:linear-gradient(180deg,#86aedb,#cfe0ef 70%,#e9e2d2);overflow:hidden}
.lu-pic img{width:100%;height:100%;object-fit:contain}
.lu-client{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:10px 4px 2px}
.lu-title{font-weight:900;font-size:15px;line-height:1.15;color:var(--navy);margin:0 4px}
.aboutcard{width:min(720px,100%)}
.ab-body{padding:6px clamp(20px,4vw,48px) 34px}
.ab-name{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;font-size:clamp(34px,5vw,54px);color:var(--navy);line-height:1}
.ab-role{font-weight:900;color:var(--red);letter-spacing:.06em;margin:8px 0 16px}
.ab-bio{font-size:17px;line-height:1.55;color:#2b3142}
.ab-contact{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0;font-weight:800}
.ab-contact a{color:var(--navy)}
.ab-xp{list-style:none;border-top:2px solid var(--navy);padding-top:12px;display:grid;gap:8px}
.ab-xp li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.ab-xp b{font-weight:800}
.ab-xp span{color:#596075;text-align:right}

/* no WebGL: the lineup is the page */
.no-gl #lineup{display:grid!important;position:static;z-index:1;background:#a9c2dc;backdrop-filter:none;min-height:100%}
.no-gl{overflow:auto}

@media (max-width:760px){
  .reading .nav{transform:none;opacity:0;pointer-events:none}
  .flip{top:42%;height:44px;margin-top:-22px}
  .flip svg{width:44px;height:44px;padding:12px}
  .flip span{display:none}
  .flip.prev{left:10px}
  .flip.next{right:10px}
  #caption{flex-direction:column;align-items:stretch;gap:10px}
  .cp-title{font-size:clamp(24px,7vw,34px)}
  .cp-open{align-self:flex-start;height:44px}
  #sheet{top:auto;left:0;width:100%;height:60%;border-radius:16px 16px 0 0;transform:translateY(104%);box-shadow:0 -20px 50px rgba(8,16,40,.3)}
  #sheet::before{border-radius:16px 16px 0 0}
  .reading #sheet{transform:none}
  .sh-bar{padding:28px 14px 4px}
  .sh-bar .chip span{display:none}
  .sh-bar .chip{width:38px;padding:0;justify-content:center}
  .wk-films{grid-template-columns:1fr}
  .lu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 12px 20px}
}
/* loading: the red MIKE's M fills up from a limp sheet (frames of its own cloth inflation: blender/loader_inflate.py),
   lying back at first and standing as it fills, on its two lines; full, it lifts off and the avenue is there */
#inflate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(180deg,#5f8fc8 0%,#8fb7df 46%,#c9d6e2 78%,#dcd8cf 100%);transition:opacity .75s ease .35s}
#inflate[hidden]{display:none!important}
.if-lift{position:relative;width:min(46vmin,300px);aspect-ratio:1;margin-top:-6vh;transition:transform 1.25s cubic-bezier(.45,0,.9,.55)}
.if-balloon{position:absolute;inset:0;transform-origin:50% 92%;transform:perspective(700px) rotateX(var(--lie,0deg));transition:transform .5s ease-out}
.if-balloon>img,.if-strip{position:absolute;inset:0;width:100%;height:100%}
.if-strip{overflow:hidden;opacity:0}
.if-strip img{display:block;width:1600%;max-width:none;height:100%;transform:translateX(calc(var(--f,0) * -6.25%))}
.has-strip .if-strip{opacity:1}
.has-strip .if-limp{opacity:0}
.if-lines{position:absolute;left:30%;top:86%;width:40%;height:36vh;overflow:visible}
.if-lines path{fill:none;stroke:#f3f0e8;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.85}
.if-shadow{position:absolute;left:50%;top:calc(50% + min(18vmin,118px));width:min(30vmin,190px);height:min(3.8vmin,24px);margin-left:calc(min(30vmin,190px) / -2);
  border-radius:50%;background:radial-gradient(closest-side,rgba(20,30,50,.28),transparent);transition:opacity .6s}
/* while it waits for the first bytes, the limp sheet stirs in the breeze */
.if-balloon>img,.if-strip{animation:if-breathe 2.4s ease-in-out infinite alternate;transform-origin:50% 90%}
@keyframes if-breathe{from{transform:scale(1,1)}to{transform:scale(1.02,.975) skewX(-1.5deg)}}
#inflate.lifting{opacity:0;pointer-events:none}
#inflate.lifting .if-lift{transform:translateY(-118vh) rotate(-5deg)}
#inflate.lifting .if-shadow{opacity:0}
@media (prefers-reduced-motion:reduce){#inflate{transition:opacity .3s}.if-lift,.if-balloon{transition:none}.if-balloon>img,.if-strip{animation:none}#inflate.lifting .if-lift{transform:none}}

/* the broadcast: the booth cam (a picture-in-picture; its window shows a second camera on the avenue, so the balloon
   behind the hosts is the one at the stop) and the hosts' closed captions, white on black, rolling up */
:root{--pip-w:clamp(230px,23vw,350px);--pip-b:calc(max(20px,3.4vh) + env(safe-area-inset-bottom,0px) + var(--cap-h,96px) + 14px)}
#booth{position:fixed;z-index:4;left:max(18px,3vw);bottom:var(--pip-b);width:var(--pip-w);aspect-ratio:16/9;margin:0;border-radius:6px;overflow:hidden;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s,bottom .45s;box-shadow:0 10px 30px rgba(8,16,40,.35),0 0 0 2px rgba(255,255,255,.88)}
#booth::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,var(--gold),#ffe29a 40%,var(--gold))}
.on-air #booth{opacity:1;transform:none}
.reading #booth,.overlay #booth,.reading #cc,.overlay #cc{opacity:0!important}
.at-name{--pip-b:calc(max(20px,3.4vh) + env(safe-area-inset-bottom,0px))}
.bc-live{position:absolute;inset:0}
.bc-shot{position:absolute;inset:0;visibility:hidden}
.bc-shot.on{visibility:visible}
.bc-art{position:absolute}
.bc-art>img:first-child{position:relative;display:block;width:100%;height:auto}
.bc-booth .bc-art{width:78%;left:11%;bottom:-17%}
.bc-street .bc-art{width:58%;left:1%;bottom:-19%}
.bc-p{position:absolute;display:block;opacity:0}
.bc-p.on{opacity:1}
.bc-strap{position:absolute;z-index:2;left:8px;bottom:8px;max-width:calc(100% - 16px);background:linear-gradient(180deg,#1a2d5d,var(--navy-2));border-left:4px solid var(--red);border-radius:3px;padding:4px 9px 4px 7px;box-shadow:0 4px 10px rgba(0,0,0,.3);opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s}
.bc-strap.on{opacity:1;transform:none}
.bc-strap b{display:block;color:#fff;font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
#cc{position:fixed;z-index:4;left:calc(max(18px,3vw) + var(--pip-w) + 14px);bottom:var(--pip-b);max-width:calc(100vw - var(--pip-w) - 2 * max(18px,3vw) - 14px);pointer-events:none;opacity:0;transition:opacity .25s,bottom .45s}
#cc.on{opacity:1}
.cc-rows{display:flex;flex-direction:column;align-items:flex-start}
.cc-rows.roll{animation:ccroll .16s ease-out}
@keyframes ccroll{from{transform:translateY(1.3em)}to{transform:none}}
.cc-row{display:block;background:#000;color:#fff;font:600 17px/1.34 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.01em;padding:1px 9px;white-space:pre}
.chip.cc{width:38px;padding:0;justify-content:center;font-size:12px;letter-spacing:.06em}
.chip.cc[aria-pressed=true]{background:var(--navy);color:#fff}
@media (max-width:760px){
  :root{--pip-w:min(56vw,250px)}
  #booth,.at-name #booth{left:12px;top:calc(66px + env(safe-area-inset-top,0px));bottom:auto}
  #cc,.at-name #cc{left:12px;top:calc(66px + env(safe-area-inset-top,0px) + var(--pip-w) * 9 / 16 + 8px);bottom:auto;max-width:calc(100vw - 24px)}
  .cc-row{font-size:13px}
  .bc-strap b{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.cc-rows.roll{animation:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important}}