/* The page is a cartoon short: title card, background pans, a character walking through.
   Source objects: painted title cards, vaudeville programmes, animation paper.
   Chango echoes the fat lettering of the title; Archivo stays out of the way. */
@font-face{font-family:Archivo;src:url(fonts/Archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Chango;src:url(fonts/Chango.woff2) format("woff2");font-display:swap}
:root{--ink:#1d1410;--cream:#fbf1dc;--brick:#a8301f;--gut:clamp(16px,3vw,48px)}
*{box-sizing:border-box;margin:0}
html{background:#0d0a08}
body{color:var(--ink);font:450 clamp(17px,1.3vw,21px)/1.34 Archivo,"Helvetica Neue",Arial,sans-serif;overflow-x:clip}
img{display:block;width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--brick);outline-offset:3px}
h2{font:400 clamp(36px,3.9vw,74px)/1.02 Chango,Archivo,sans-serif;color:var(--ink)}

.top{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:8px var(--gut);font-weight:650;font-size:16px;color:var(--cream);pointer-events:none}
.top a{pointer-events:auto}
.links a{text-decoration:none;background:var(--ink);padding:4px 10px;border-radius:7px 9px 6px 8px}
.links a:hover{text-decoration:underline}
.links{display:flex;gap:4px;margin-top:3px}
.marquee{display:block;width:clamp(190px,17vw,300px)}
.marquee img{display:block;width:100%;height:auto}
.marquee:hover{filter:brightness(1.12)}
.controls{display:none;position:fixed;right:clamp(10px,1.5vw,22px);bottom:clamp(10px,1.5vw,22px);z-index:40;gap:6px}
.reel .controls{display:flex}
.controls button{all:unset;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);font-size:13px;line-height:1;box-shadow:0 0 0 2px var(--cream)}
.controls button:hover{background:var(--brick)}
.controls button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ── stacked by default (phones, no JS, reduced motion) ── */
.p{position:relative;overflow:hidden;padding:76px var(--gut) 44px}
.bg{position:absolute;inset:0;background-size:cover;background-position:50% 100%}
.bg.dark{filter:brightness(.62)}
.set{position:relative;display:grid;gap:18px}
.copy p{margin-top:.6em;max-width:32em}
.copy.light h2,.copy.light p{color:var(--cream)}
.paper{background:var(--cream)}
#actor,#ball,#walker,#pose,#posts,#iris,#gate,#intro,#endcard,.screen{display:none}
.endstack{background:#0d0a08;display:grid;justify-items:center;gap:8px}
.endstack img{max-width:520px}
.reel .endstack{display:none}

.title{position:relative;text-align:center;display:grid;justify-items:center;gap:14px}
.title h1{width:min(88vw,62svh)}
.tag{font:400 clamp(21px,2.1vw,38px)/1.12 Chango,sans-serif;color:var(--ink);max-width:21em}
.cue{font-weight:700;display:flex;gap:14px;align-items:center}
#roll{all:unset;display:none;cursor:pointer;background:var(--ink);color:var(--cream);font:400 clamp(18px,1.5vw,26px)/1 Chango,sans-serif;padding:.62em 1em;border-radius:12px 16px 10px 14px}
#roll:hover{background:var(--brick)}
#roll:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.reel #roll{display:block}
.cue span::first-letter{text-transform:uppercase}
.reel .cue span::first-letter{text-transform:none}

.card{position:relative;background:var(--cream);padding:clamp(8px,.8vw,14px);border:3px solid var(--ink);border-radius:9px 14px 8px 12px}
figcaption{font-weight:650;font-size:16px;margin-top:6px;line-height:1.15}
.gates{list-style:none;padding:12px 18px}
.gates li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:2px solid var(--ink);font-weight:550}
.gates li:last-child{border:0}
.gates b{font-weight:700}
.strip p{font-weight:650;margin-top:8px;text-align:center}
#reel-strip{height:clamp(170px,30vh,320px);width:calc(clamp(170px,30vh,320px)*.6855);margin:auto;background:url(img/walk-toon.webp) 0 0/800% 100% no-repeat;transform:scaleX(-1)}
.uses{list-style:none;padding:0;display:grid;gap:14px}
.uses b{display:block;font:400 clamp(19px,1.55vw,28px)/1.08 Chango,sans-serif;margin:8px 0 3px}
.uses span{display:block;line-height:1.22}
.uses img{aspect-ratio:8/5;object-fit:cover}
.twelve{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.twelve li{background:var(--cream);border:3px solid var(--ink);border-radius:7px;overflow:hidden;transition:none}
.twelve li.on{outline:4px solid #f1c24b}
.twelve img{aspect-ratio:1/.96;object-fit:cover}
.twelve span{display:block;font-weight:700;font-size:clamp(13px,min(1vw,1.7vh),18px);padding:3px 6px;line-height:1.1}
#sp{background:var(--brick)}
.stamp{position:absolute;right:5%;bottom:22%;font:400 clamp(20px,2vw,34px)/1 Chango,sans-serif;color:var(--brick);border:4px solid var(--brick);padding:.25em .45em;border-radius:6px;transform:rotate(-11deg);background:rgba(251,241,220,.72)}
.limits{list-style:none;padding:8px 20px}
.limits li{padding:11px 0;border-bottom:2px solid var(--ink)}
.limits li:last-child{border:0}
.theatre{justify-items:center;text-align:center}
.theatre h2{color:var(--cream);text-shadow:3px 3px 0 var(--ink)}
.era{width:100%}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;background:var(--ink);padding:5px;border-radius:9px}
.tabs button{all:unset;cursor:pointer;color:var(--cream);padding:5px 11px;font-weight:650;font-size:16px;border-radius:5px}
.tabs button:hover{text-decoration:underline}
.tabs button[aria-selected=true]{background:var(--cream);color:var(--ink)}
.tabs button:focus-visible{outline:3px solid #fff}
.kit{list-style:none;padding:0}
.kit li{padding:12px 0 16px;border-top:3px solid var(--ink)}
.kit b{display:block;font:400 clamp(21px,1.9vw,33px)/1.08 Chango,sans-serif;margin-bottom:4px}
.kit span{display:block;max-width:36em}
.ticket{text-decoration:none;display:inline-flex;align-items:stretch;margin-top:1.1em!important;background:var(--brick);color:var(--cream);border-radius:6px;font-weight:650}
.ticket b{font:400 clamp(20px,1.7vw,30px)/1 Chango,sans-serif;padding:.62em .9em}
.ticket span{display:flex;align-items:center;padding:0 1em;border-left:3px dashed var(--cream)}

.tickets{list-style:none;padding:0;display:grid;gap:14px}
.tickets li{display:flex;flex-direction:column;gap:5px;text-align:center}
.tickets b{font:400 clamp(22px,2vw,36px)/1.05 Chango,sans-serif}
.tickets em{font:400 clamp(36px,min(4vw,8vh),68px)/1 Chango,sans-serif;color:var(--brick);padding-bottom:.15em;border-bottom:3px dashed var(--ink)}
.tickets span{font-weight:550}
.tickets a,.tickets i{margin-top:auto;font-style:normal;font-weight:700;background:var(--ink);color:var(--cream);padding:.5em;border-radius:6px}
.tickets a{text-decoration:none;background:var(--brick)}
.tickets a:hover{background:var(--ink)}
.tickets .best{box-shadow:0 0 0 5px #f1c24b}

/* ── the reel ── */
.reel #track{height:calc(100vh + 9*150vh + 240vh)}
.reel #stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0d0a08;--wh:58vh}
.reel #rail{display:flex;width:1000%;height:100%;will-change:transform}
.reel .p{flex:0 0 calc(100%/10);height:100%;padding:0}
.reel .bg{inset:0 -7%;will-change:transform;transform:translate3d(calc(var(--off,0)*-6vw),0,0)}
.reel .set{position:absolute;inset:clamp(56px,8vh,76px) 4vw 4vh max(27vw,calc(61.5vh*.66 + 5vw));display:block}
.reel [data-in]{position:absolute;transform:translate3d(0,calc((1 - var(--a,1))*104vh),0) rotate(calc((1 - var(--a,1))*var(--r,0deg) + var(--r,0deg)*.28));transform-origin:50% 100%}
.reel .uses[data-in],.reel .copy[data-in],.reel .tabs[data-in],.reel .kit[data-in],.reel .theatre h2[data-in]{transform:translate3d(0,calc((1 - var(--a,1))*104vh),0)}

.reel #sh .uses img{max-height:24vh}
.reel #sh .uses span{font-size:clamp(15px,1.15vw,19px)}
.reel #sh .set{display:flex;flex-direction:column;justify-content:center;gap:3.5vh}
.reel #sh [data-in]{position:relative}
.reel #sh .copy p{max-width:44em}
.reel #sh .uses{grid-template-columns:repeat(4,minmax(0,1fr))}
.reel #sp .set{left:max(27vw,calc(47.7vh + 2vw));display:flex;flex-direction:column;justify-content:center;gap:2.4vh}
.reel #sp [data-in]{position:relative}
.reel #sp .copy p{max-width:60em}
.reel #sp h2{font-size:clamp(30px,min(3.4vw,6vh),60px)}
.reel .twelve{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,calc(29vh*6));margin-inline:auto}
.reel .twelve[data-in]{transform:translate3d(0,calc((1 - var(--a,1))*104vh),0)}
.reel .two .set{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:auto auto;align-content:center;gap:3vh 3.5%}
.reel .two [data-in]{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
.reel .two figure img{max-height:34vh;object-fit:contain}
.reel .two h2{font-size:clamp(32px,min(3.9vw,7.6vh),74px)}
.reel .two .copy p{font-size:clamp(16px,min(1.35vw,2.5vh),24px)}
.reel #s5 .kit{grid-column:2;grid-row:1/3;align-self:center}
.reel #s5 .kit span,.reel .limits li{font-size:clamp(16px,min(1.3vw,2.4vh),23px)}
.reel #s5 .box{grid-column:1;grid-row:2;margin:0}
.reel #s5 .box img{max-height:36vh;width:auto;margin:auto}
.waste{margin:0}.waste img{display:block;width:100%;height:auto}.waste figcaption{margin-top:10px;text-align:center;color:var(--cream);font-weight:700;font-size:clamp(15px,2.2vh,20px)}
.reel #s6 .waste{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;width:min(100%,calc(62vh*.8))}
.reel #s6 .waste img{max-height:58vh;width:auto;margin:auto}
.reel #s6 .copy{grid-column:1;grid-row:1}
.reel #s6 .limits{grid-column:1;grid-row:2}
.reel #actor{display:block;position:absolute;left:0;top:0;z-index:12;height:calc(var(--wh)*1.36);width:calc(var(--wh)*1.36*.6053);background:url(img/jump.webp) 0 0/600% 100% no-repeat;visibility:hidden}
.reel #ball{display:block;position:absolute;left:0;top:0;z-index:14;width:clamp(26px,2.8vw,44px);aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);background:radial-gradient(circle at 34% 30%,#fff3d6 0 12%,transparent 13%),linear-gradient(160deg,#e0524a 0 42%,#fbf1dc 42% 58%,#c23a33 58%);transform-origin:50% 100%;visibility:hidden}
.reel #s1 .set{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:3%;row-gap:3vh}
.reel #s1 .copy{position:relative;grid-area:1/1}
.reel #s1 .ref{position:relative;grid-area:2/1;justify-self:start;height:100%;aspect-ratio:.6;max-width:100%}
.reel #s1 .ref img{height:calc(100% - 1.7em);width:100%;object-fit:cover}
.reel #s1 .sheet{position:relative;grid-area:1/2/3/3;align-self:center}
.reel #reel-strip{height:clamp(100px,23vh,300px);width:calc(clamp(100px,23vh,300px)*.6855)}
.reel #s4 .set{inset:clamp(56px,7vh,70px) 8vw 3vh max(27vw,calc(61.5vh*.66 + 5vw));text-align:center}
.reel #s4 h2{left:0;right:0;top:0;font-size:clamp(30px,3.1vw,56px)}
.reel #s4 .era{left:50%;top:13%;width:min(100%,calc(61vh*1.5));margin-left:calc(min(100%,calc(61vh*1.5))/-2)}
.reel #s4 .tabs{left:0;right:0;bottom:0;width:max-content;max-width:100%;margin:auto}

#spin{display:none}
.reel #s0 .bg{display:none}
.reel #spin{display:block;position:absolute;left:50%;top:50%;background:url(img/bg-title.webp) center/100% 100%;transform-origin:50% 51%;will-change:transform}
.reel .title{position:absolute;inset:50px 24vw 0 25vw;align-content:center}
.reel .screen{display:block;position:absolute;right:3vw;top:50%;width:min(20vw,calc(70vh*.5625));aspect-ratio:9/16;margin-top:calc(min(20vw,calc(70vh*.5625))*-.889 + 22px);overflow:hidden;background:var(--ink);border:clamp(5px,.6vw,9px) solid var(--ink);border-radius:18% 18% 16% 16%/10% 10% 9% 9%;box-shadow:0 0 0 3px var(--cream)}
.screen img,.screen video{width:100%;height:100%;object-fit:cover}
.reel .title h1{width:min(60vh,44vw);transform-origin:50% 100%}
.reel .tag{font-size:clamp(21px,2.05vw,38px)}

.reel #walker,.reel #pose{display:block;position:absolute;left:0;top:0;z-index:12;transform-origin:0 0}
.reel #walker{width:calc(var(--wh)*.6855);height:var(--wh);background:url(img/walk-toon.webp) 0 0/800% 100% no-repeat}
.reel #pose{width:auto;height:calc(var(--wh)*1.06)}
.reel #posts{display:block;position:absolute;inset:0;z-index:10;pointer-events:none}
#posts i{position:absolute;top:0;bottom:0;left:0;width:17vw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 52'%3E%3Crect y='11' width='34' height='30' rx='7' fill='%23f0e4cb'/%3E%3C/svg%3E") left .6vw top var(--y,0px)/1.7vw 2.6vw repeat-y,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 52'%3E%3Crect y='11' width='34' height='30' rx='7' fill='%23f0e4cb'/%3E%3C/svg%3E") right .6vw top var(--y,0px)/1.7vw 2.6vw repeat-y,linear-gradient(#4a3b32 0 3px,transparent 3px) 0 var(--y,0px)/100% 31vh repeat-y,linear-gradient(90deg,#231a14 0 2.9vw,#4a3b32 2.9vw 3.05vw,#14100c 3.05vw calc(100% - 3.05vw),#4a3b32 calc(100% - 3.05vw) calc(100% - 2.9vw),#231a14 calc(100% - 2.9vw))}
.reel #iris{display:grid;place-items:center;position:absolute;inset:0;z-index:30;pointer-events:none}
.reel #intro{display:grid;place-items:center;position:absolute;inset:0;z-index:33;background:url(img/bg-airbrush.webp) center/cover}
#face{width:min(118vh,118vw);max-width:none;will-change:transform}
.reel #endcard{display:block;position:absolute;inset:0;z-index:32;visibility:hidden;background:url(img/bg-end.webp) center/cover #0d0a08}
#endT,#endT2{position:absolute;z-index:2;left:50%;top:6vh;width:min(58vw,100vh);margin-left:calc(min(58vw,100vh)/-2);transform-origin:50% 100%}
#endP{position:absolute;left:50%;bottom:-2vh;width:min(108vh,81vw);margin-left:calc(min(108vh,81vw)/-2);transform-origin:50% 90%}
#endT{clip-path:inset(-20% 50% -20% -5%);transform-origin:26% 100%}
#endT2{clip-path:inset(-20% -5% -20% 50%);transform-origin:76% 100%}
.reel.opening .title>*,.reel.opening .screen,.reel.opening .top,.reel.opening .controls{visibility:hidden}
.reel #gate{display:block;position:absolute;inset:0;z-index:25;pointer-events:none;opacity:.13;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (max-width:820px),(max-aspect-ratio:1/1){
 .links a:not([href="#plans"]):not([href="account.html"]){display:none}
 .top{font-size:14px;gap:6px;padding-inline:10px}
 .links a{white-space:nowrap;padding:4px 8px}
 #s0{min-height:92svh;display:grid;place-items:center}
 #s0 .bg{background-position:50% 50%}
 .copy{background:rgba(251,241,220,.93);padding:12px 14px;border-radius:9px}
 .copy.light{background:rgba(13,10,8,.72)}
 .theatre h2{font-size:9vw}
}
.reel #plans .set{display:flex;flex-direction:column;justify-content:center;gap:3.5vh}
.reel #plans [data-in]{position:relative}
.reel #plans .tickets{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4vw}
.reel #plans .tickets span{font-size:clamp(15px,min(1.25vw,2.4vh),22px)}
.reel #plans .tickets[data-in]{transform:translate3d(0,calc((1 - var(--a,1))*104vh),0)}
.reel #s5 .kit li{padding:6px 0 8px}