/* ---------- page 2 · the films, a programme ---------- */
#p2{padding:calc(var(--bar) + 20px) var(--mx) calc(var(--ftr) + 20px);align-items:center;justify-content:center}
.fm{--ez:var(--ez2,cubic-bezier(.25,.8,.25,1));width:100%;max-width:1240px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:center}
.fm-stage{position:relative;display:block;width:100%;height:min(64vh,580px);padding:0;border:1px solid rgba(159,176,196,.16);border-radius:8px;overflow:hidden;background:#091729;color:var(--ink);font:inherit;text-align:left;cursor:pointer;opacity:0;transform:translateY(18px);transition:opacity .8s ease .15s,transform 1s var(--ez) .15s,border-color .3s}
#p2.live .fm-stage,#p2.seen .fm-stage{opacity:1;transform:none}
.fm-stage:hover,.fm-stage:focus-visible{border-color:rgba(159,176,196,.32);outline:none}
.fm-art{position:absolute;inset:0;display:block;opacity:0;transition:opacity .5s ease;background:linear-gradient(rgba(159,176,196,.045) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(159,176,196,.045) 1px,transparent 1px) 0 0/22px 22px,radial-gradient(70% 70% at 62% 58%,rgba(var(--sc),.2),transparent 70%)}
.fm-art.on{opacity:1}
.fm-num{position:absolute;left:4%;top:-.08em;font-family:var(--disp);font-weight:800;font-size:min(42vh,380px);line-height:1;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px rgba(var(--sc),.42);transform:translateY(14px);opacity:0;transition:transform 1s var(--ez),opacity .8s ease;pointer-events:none;user-select:none}
.fm-art.on .fm-num{transform:none;opacity:1}
.fm-art img{position:absolute;left:60%;bottom:0;height:96%;width:auto;transform:translateX(-50%) scale(.985);transform-origin:50% 100%;filter:drop-shadow(0 18px 30px rgba(3,8,18,.7));transition:transform 1.2s var(--ez)}
.fm-art.on img{transform:translateX(-50%)}
.fm-stage:hover .fm-art.on img{transform:translateX(-50%) scale(1.03)}
.fm-mark{position:absolute;left:60%;top:42%;width:min(30vh,250px);height:min(30vh,250px);transform:translate(-50%,-50%)}
.fm-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:min(80px,10vh) clamp(20px,2.4vw,32px) clamp(18px,2.4vh,28px);background:linear-gradient(180deg,rgba(9,23,41,0),rgba(9,23,41,.88) 42%,rgba(9,23,41,.97))}
.fm-meta{white-space:nowrap;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--sc))}
.fm-meta span:last-child{color:var(--grey)}
.fm-t{display:block;font-family:var(--disp);font-weight:700;font-size:max(24px,min(clamp(26px,2.6vw,38px),5vh));letter-spacing:-.03em;line-height:1.05}
.fm-d{display:block;max-width:46ch;font-size:max(13px,min(15px,1.9vh));line-height:1.5;color:var(--grey);text-wrap:pretty}
.fm-ch{display:flex;gap:3px;margin-top:6px;height:3px}
.fm-ch i{display:block;height:100%;border-radius:2px;background:rgba(159,176,196,.2);position:relative;overflow:hidden}
.fm-ch i::after{content:"";position:absolute;inset:0;background:rgba(var(--sc),.85);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ez)}
.fm-art.on .fm-ch i::after{transform:none;transition-delay:calc(.25s + var(--c) * 70ms)}
.fm-chl{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-dim,#63768c)}
.fm-play{position:absolute;top:clamp(16px,2.2vh,24px);right:clamp(16px,2vw,24px);z-index:2;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 6px;border:1px solid rgba(159,176,196,.24);border-radius:999px;background:rgba(6,16,30,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .2s,border-color .2s}
.fm-play i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#091729}
.fm-play svg{width:12px;height:12px;margin-left:2px}
.fm-stage:hover .fm-play,.fm-stage:focus-visible .fm-play{background:rgba(91,79,207,.5);border-color:rgba(127,119,221,.7)}
.fm-side{display:flex;flex-direction:column;gap:min(26px,3.2vh)}
.fm-hd{display:flex;flex-direction:column;gap:min(14px,1.8vh)}
.fm-q{font-family:var(--disp);font-weight:800;letter-spacing:-.036em;line-height:1;font-size:max(30px,min(clamp(34px,3.6vw,56px),7vh));text-wrap:balance}
.fm-q em{font-style:normal;color:var(--purple-lt)}
.fm-sub{font-size:max(14px,min(15.5px,2vh));line-height:1.55;color:var(--grey);max-width:42ch;text-wrap:pretty}
.fm-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(159,176,196,.14)}
.fm-list{position:relative;border-top:0!important}
.fm-list::before{content:"";position:absolute;left:7px;top:22px;bottom:22px;width:1px;background:linear-gradient(rgba(224,168,46,.45) 0 50%,rgba(127,119,221,.45) 50% 75%,rgba(22,201,144,.45) 75%)}
.fm-node{position:relative;z-index:1;width:15px;height:15px;border-radius:50%;background:#0A1628;border:1px solid rgba(var(--sc),.55);transition:border-color .15s,box-shadow .2s}
.fm-node::after{content:"";position:absolute;inset:3px;border-radius:50%;background:rgb(var(--sc));transform:scale(0);transition:transform .2s var(--ez)}
.fm-r.on .fm-node{border-color:rgb(var(--sc));box-shadow:0 0 0 4px rgba(var(--sc),.12),0 0 16px rgba(var(--sc),.5)}
.fm-r.on .fm-node::after{transform:none}
.fm-th{position:relative;width:46px;height:46px;border-radius:8px;overflow:hidden;border:1px solid rgba(159,176,196,.16);background:radial-gradient(80% 80% at 50% 100%,rgba(var(--sc),.25),transparent 70%),#0b1a30;transition:border-color .15s}
.fm-th img{position:absolute;left:50%;bottom:-6%;height:115%;transform:translateX(-50%);filter:grayscale(1) brightness(.75);transition:filter .3s ease,transform .5s var(--ez)}
.fm-th svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);opacity:.6;transition:opacity .3s}
.fm-r.on .fm-th{border-color:rgba(var(--sc),.6)}
.fm-r.on .fm-th img{filter:none;transform:translateX(-50%) scale(1.06)}
.fm-r.on .fm-th svg{opacity:1}
.fm-r{--sc:224,168,46;position:relative;display:grid;grid-template-columns:15px 22px 46px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:min(12px,1.5vh) 4px min(12px,1.5vh) 0;border:0;border-bottom:1px solid transparent;background:none;color:var(--grey);font:inherit;text-align:left;cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .8s var(--ez),color .15s;transition-delay:calc(.35s + var(--k) * 90ms),calc(.35s + var(--k) * 90ms),0s}
#p2.live .fm-r,#p2.seen .fm-r{opacity:1;transform:none}
.fm-r::after{content:"";position:absolute;left:29px;right:0;bottom:-1px;height:1px;background:rgb(var(--sc));transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ez)}
.fm-r.on{color:var(--ink)}
.fm-r.on::after{transform:none}
.fm-r:focus-visible{outline:none;color:var(--ink)}
.fm-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--grey-dim,#63768c);transition:color .15s}
.fm-r.on .fm-n{color:rgb(var(--sc))}
.fm-tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.fm-tt b{font-family:var(--disp);font-weight:600;font-size:max(17px,min(clamp(18px,1.6vw,22px),3vh));letter-spacing:-.02em;line-height:1.15}
.fm-tt small{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim,#63768c)}
.fm-tt small i{width:6px;height:6px;border-radius:50%;background:rgb(var(--sc));flex:none}
.fm-rt{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.fm-rt svg{width:14px;height:14px;opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .2s var(--ez)}
.fm-r.on .fm-rt svg{opacity:1;transform:none}
.fm-r.ag{--sc:127,119,221}.fm-r.cn{--sc:22,201,144}
.fm-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding-top:4px;opacity:0;transition:opacity .6s ease .8s}
#p2.live .fm-ft,#p2.seen .fm-ft{opacity:1}
.fm-skip{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim,#63768c)}
.fm-skip a{color:var(--grey);text-decoration:none;border-bottom:1px solid rgba(159,176,196,.3);padding-bottom:2px;transition:color .15s,border-color .15s}
.fm-skip a:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:1100px){.fm{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}.fm-num{font-size:min(34vh,300px)}.fm-art img{left:64%}}
@media(max-width:760px){.fm{grid-template-columns:1fr}.fm-stage{display:none}}
@media(max-height:820px){.fm-sub{display:none}}
@media(max-height:700px){.fm-d,.fm-chl{display:none}.fm-tt small{display:none}.fm-r{padding:6px 4px 6px 0}.fm-th{width:36px;height:36px}.fm-r{grid-template-columns:15px 22px 36px minmax(0,1fr) auto}.fm-reel{width:68px;height:68px}.fm-core{inset:18px}}
@media(max-height:560px){.fm-hd .kick{display:none}.fm-q{font-size:max(26px,6.4vh)}}
@media(max-height:620px){.fm-ft{display:none}.fm-big{width:64px;height:64px;margin:-32px 0 0 -32px}.fm-stage{height:min(70vh,580px)}}
/* the programme: the stage's resting state, the one thing to click */
.fm-ft{padding-top:2px}
.fm-allart{background:#060f1d}
.fm-strip{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.fm-sl{position:relative;overflow:hidden;background:radial-gradient(90% 60% at 50% 70%,rgba(var(--sc),.26),transparent 70%),#0b1a30}
.fm-sl::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgb(var(--sc));opacity:.35;animation:fmTurnL 8s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)}
.fm-sl b{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:rgb(var(--sc))}
.fm-sl img{position:absolute;left:50%;bottom:8%;height:74%;width:auto;transform:translateX(-50%);filter:grayscale(1) brightness(.5);animation:fmTurn 8s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)}
.fm-sl svg{position:absolute;left:50%;top:38%;width:58%;transform:translate(-50%,-50%);opacity:.4;animation:fmTurnS 8s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes fmTurn{0%,30%,100%{filter:grayscale(1) brightness(.5)}8%,22%{filter:none}}
@keyframes fmTurnS{0%,30%,100%{opacity:.4}8%,22%{opacity:1}}
@keyframes fmTurnL{0%,30%,100%{opacity:.35}8%,22%{opacity:1}}
.fm-big{position:absolute;left:50%;top:40%;z-index:2;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--purple);color:var(--ink);box-shadow:0 0 0 1px rgba(127,119,221,.7),0 18px 40px -10px rgba(91,79,207,.9);transition:transform .2s var(--ez),background .15s}
.fm-big svg{width:22px;height:22px;margin-left:3px}
.fm-big::before,.fm-big::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(127,119,221,.8);animation:fmRipple 3s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
.fm-big::after{animation-delay:1.5s}
@keyframes fmRipple{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.fm-stage:hover .fm-big,.fm-stage:focus-visible .fm-big{transform:scale(1.07);background:#6a5fe0}
.fm-stage:hover .fm-sl img{filter:grayscale(.3) brightness(.8)}
.fm-seq2{position:relative;display:flex;gap:3px;height:3px;margin-top:6px}
.fm-seq2 i{border-radius:2px;background:rgba(var(--sc),.8)}
.fm-seq2 s{position:absolute;top:-3px;left:0;width:2px;height:9px;border-radius:1px;background:var(--ink);box-shadow:0 0 8px var(--ink);animation:fmPlayhead 8s linear infinite}
@keyframes fmPlayhead{from{left:0}to{left:calc(100% - 2px)}}
.fm-play{transition:opacity .2s,background .2s,border-color .2s}
.fm-stage[data-film="all"] .fm-play{opacity:0}
@media(prefers-reduced-motion:reduce){.fm-sl img,.fm-sl svg,.fm-sl::before,.fm-big::before,.fm-big::after,.fm-seq2 s{animation:none}.fm-sl img{filter:none}}
/* page kickers, site-wide: one size on every page */
.page .kick,#p1 .kick,.pg-kick{font-size:14px!important;letter-spacing:.22em!important;gap:13px}
.page .kick::before,.pg-kick::before{display:none!important}
@media(min-width:1001px){#p1 .hook{font-size:max(35px,min(6vw,11.4vh,128px))}}
@media(max-width:1000px){#p1 .hook{font-size:max(29px,min(5.5vw,6.6vh))}}