/* The Longshot look: black, white and one grey, big serif capitals, a wide black name, small sans labels,
   black and white drawings that turn to colour when you point at them. */
:root{
  --ls-black:#000; --ls-white:#fff; --ls-grey:#e8e8e8; --ls-dim:#4d4d4d; --ls-mute:#8c8c8c;
  --f-wide:"Archivo",system-ui,sans-serif;   /* the wide black name, labels and headings */
  --f-cap:"Adobe Caslon",Georgia,serif;      /* capitals for titles and the menu, body text */
  --f-hand:"Belmonte","Adobe Caslon",cursive;/* handwriting for little notes */
  --f-num:"NY Irvin","Adobe Caslon",Georgia,serif; /* big numbers */
  --ls-ink:#fff;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); --e-pop:cubic-bezier(.34,1.56,.64,1);
}
html.in-site body,html:not(.pr-on) body{background:#000}
body.proj{background:#fff!important}
.fx-nav{display:none!important}
/* the logo is back: it opens the menu, and turns into a close button while the menu is open */
.mark{z-index:135;transition:opacity .3s,transform .35s var(--e-pop)}
.mark:hover{transform:rotate(-3deg) scale(1.04)}
html .mark .nm{color:var(--ls-ink,#000)}
html .mark canvas{filter:drop-shadow(0 0 .4px var(--ls-ink,#000))}
html.ls-menu-on .mark{opacity:0;pointer-events:none}
.v-home,.v-story{display:none!important}
html.ls-dark .fx-grain{mix-blend-mode:screen;opacity:.22}
::selection{background:#000;color:#fff}
html.ls-dark ::selection{background:#fff;color:#000}

/* ---------------- the frame ---------------- */
.ls-frame{position:fixed;inset:0;z-index:130;pointer-events:none;opacity:0;transition:opacity .6s .3s}
html.in-site .ls-frame{opacity:1}
.ls-av{position:absolute;left:max(14px,env(safe-area-inset-left,0px));top:max(14px,env(safe-area-inset-top,0px));width:38px;height:38px;padding:0;border:0;background:#000;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px #fff;opacity:0;pointer-events:none;transition:opacity .3s}
.ls-av svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.3}
html.ls-menu-on .ls-av{opacity:1;pointer-events:auto;z-index:2}
.ls-tick{position:absolute;top:max(20px,env(safe-area-inset-top,0px));left:92px;right:0;overflow:hidden;height:16px;opacity:0;transition:opacity .4s;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ls-tick-in{display:flex;width:max-content;animation:tick 48s linear infinite}
.ls-tick-in>div{display:flex;align-items:center;gap:14px;padding-right:14px;white-space:nowrap;font-family:var(--f-wide);font-size:10px;font-weight:500;font-stretch:110%;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.ls-tick .tk-hd{font-weight:800}
.ls-tick b{font-weight:400;color:#8c8c8c}
.ls-tick b.tk-ln{display:block;flex:none;width:52px;height:1px;background:#fff}
@keyframes tick{to{transform:translateX(-50%)}}
.ls-foot{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:22px;opacity:0;transition:opacity .4s}
.ls-foot a,.ls-snd{pointer-events:auto}
.ls-foot a{font-family:var(--f-wide);font-size:12px;letter-spacing:.02em;color:#fff;position:relative}
.ls-foot a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--e-out)}
.ls-foot a:hover::after{transform:scaleX(1);transform-origin:left}
.ls-snd{width:20px;height:20px;padding:0;border:0;background:none;transition:transform .3s var(--e-pop)}
.ls-snd:hover{transform:scale(1.15)}
.ls-snd svg{width:20px;height:20px;display:block;overflow:visible}
.ls-snd circle{fill:#fff}
.ls-snd .sp{fill:#000}
.ls-snd .wv,.ls-snd .sl{fill:none;stroke:#000;stroke-width:1.3;stroke-linecap:round}
.ls-snd .sl{display:none}
.ls-frame.muted .ls-snd .wv{display:none}.ls-frame.muted .ls-snd .sl{display:block}
body.lsh .ls-tick,body.lsh .ls-foot{opacity:1}
html.ls-menu-on .ls-tick,html.ls-menu-on .ls-foot{opacity:0}

/* ---------------- the menu ---------------- */
.ls-menu{position:fixed;inset:0;z-index:125;background:#000;overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .4s var(--e-io)}
.ls-menu.on{opacity:1}
.ls-menu ul{list-style:none;margin:0;padding:max(16vh,90px) 6vw max(18vh,90px);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.4vh,38px)}
.ls-menu li{opacity:0;transform:translateY(22px);transition:opacity .5s var(--e-out),transform .7s var(--e-out)}
.ls-menu.on li{opacity:1;transform:none}
.ls-menu.on li:nth-child(2){transition-delay:.05s}.ls-menu.on li:nth-child(3){transition-delay:.1s}.ls-menu.on li:nth-child(4){transition-delay:.15s}.ls-menu.on li:nth-child(5){transition-delay:.2s}
.ls-menu a{position:relative;display:block;text-align:center;font-family:var(--f-cap);font-weight:400;text-transform:uppercase;font-size:clamp(30px,5.2vw,74px);line-height:.94;letter-spacing:-.005em;color:var(--ls-dim);transition:color .3s;text-wrap:balance}
.ls-menu a:hover,.ls-menu a:focus-visible{color:#fff;outline:none}
.ls-menu em{position:absolute;right:-.2em;bottom:-1.5em;font-family:var(--f-wide);font-style:normal;font-size:12px;letter-spacing:.02em;text-transform:none;color:#8c8c8c;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.ls-menu a:hover em,.ls-menu a:focus-visible em{opacity:1;transform:none}

/* ---------------- the title card between pages ---------------- */
.ls-card{position:fixed;inset:0;z-index:290;pointer-events:none;visibility:hidden}
.ls-card.on{visibility:visible;pointer-events:auto}
.ls-card .ly{position:absolute;inset:0;display:grid;place-items:center}
.ls-card .ls-tt{position:static;margin:0;max-width:min(88vw,900px);padding:0 4vw;text-align:center;font-family:var(--f-cap);text-transform:uppercase;font-size:clamp(34px,5.6vw,80px);line-height:.94;text-wrap:balance}
.ls-card .lyb{background:#000;color:#fff;clip-path:inset(50% 0 0 0);opacity:0;transition:opacity .25s}
.ls-card .lyw{background:#fff;color:#000;clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--e-io),background-color .7s var(--e-io),color .5s}
.ls-card.s1 .lyb{opacity:1}
.ls-card.s1 .lyw{clip-path:inset(0 0 50% 0)}
.ls-card.s2 .lyw{background-color:#000;color:#000}
.ls-card.s2 .lyb .ls-tt{opacity:0;transition:opacity .6s .15s}
.ls-card.s2 .lyw .ls-tt{opacity:0;transition:opacity .4s}
.ls-card.s3{opacity:0;transition:opacity .5s var(--e-io)}
.ls-load{position:absolute;left:50%;bottom:13vh;width:28px;height:36px;margin-left:-14px;opacity:0;transition:opacity .3s}
.ls-load img{width:100%;height:100%;object-fit:contain;transform:rotate(90deg);animation:crawl .9s steps(6) infinite alternate}
.ls-card.s2 .ls-load{opacity:1}
@keyframes crawl{0%{transform:translateX(-26px) rotate(90deg)}50%{transform:translateX(0) rotate(84deg)}100%{transform:translateX(26px) rotate(96deg)}}

/* ---------------- drawings: black and white, colour on hover ---------------- */
.ls-fig{position:relative;display:block;height:100%;line-height:0}
.ls-fig img{display:block;height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none}
.ls-fig .co{position:absolute;left:0;top:0;opacity:0;transition:opacity .55s var(--e-io)}
.lh-hit:hover .ls-fig .co,.ls-fig:hover .co{opacity:1}
.sway{transform-origin:50% 100%;animation:sway 5.5s var(--e-io) infinite alternate;animation-delay:var(--dl,0s)}
.bob{animation:bob 3.4s var(--e-io) infinite alternate;animation-delay:var(--dl,0s)}
.groove{transform-origin:50% 100%;animation:groove 1.1s var(--e-io) infinite alternate;animation-delay:var(--dl,0s)}
.drift{animation:drift 4.2s var(--e-io) infinite alternate;animation-delay:var(--dl,0s)}
.swim{animation:swim 6s var(--e-io) infinite alternate;animation-delay:var(--dl,0s)}
@keyframes sway{from{transform:rotate(-.8deg)}to{transform:rotate(.9deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-1.4%)}}
@keyframes groove{from{transform:rotate(-1.3deg) scaleY(1)}to{transform:rotate(1.3deg) scaleY(.985)}}
@keyframes drift{0%{transform:translate(0,0) rotate(-3deg)}100%{transform:translate(2%,-8%) rotate(4deg)}}
@keyframes swim{0%{transform:translate(0,0) rotate(-4deg)}100%{transform:translate(-12%,6%) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.sway,.bob,.groove,.drift,.swim,.ls-tick-in{animation:none}}

/* ---------------- home: the strip ---------------- */
.ls-home{position:fixed;inset:0;z-index:20;overflow-y:auto;overflow-x:hidden;background:#000;color:#fff;display:none;scrollbar-width:none;--u:min(1vh,1.5vw)}
.ls-home::-webkit-scrollbar{display:none}
.ls-home.on{display:block}
.lh-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.lh-track{position:absolute;left:0;top:0;bottom:0;display:flex;will-change:transform}
.lh-sc{position:relative;flex:none;height:100%}
.lh-open{width:100vw}
.lh-hint{position:absolute;left:50%;top:21vh;transform:translateX(-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--f-wide);font-size:10px;letter-spacing:.06em;color:#fff;text-transform:lowercase}
.lh-word{position:absolute;left:2.5vw;top:29vh;margin:0;font-family:var(--f-wide);font-weight:900;font-stretch:125%;font-size:100px;line-height:.8;letter-spacing:-.025em;color:#fff;white-space:nowrap;text-transform:uppercase;display:flex;gap:.28em;z-index:1}
.lh-word.two{flex-direction:column;gap:.04em;left:5vw;top:26vh}
.lh-word span{display:flex}
.lh-word i{display:block;font-style:normal}
.lh-role{position:absolute;left:2.6vw;top:calc(29vh + 9.8vw);margin:0;font-family:var(--f-cap);font-style:italic;font-size:clamp(16px,1.5vw,22px);color:#8c8c8c}
.lh-hero{position:absolute;right:3vw;bottom:0;height:min(82vh,72vw);z-index:2}
.lh-drone{position:absolute;right:30vw;top:10vh;width:min(9vh,10vw);z-index:3}
.lh-drone img{width:100%;height:auto;display:block;transform:rotate(-12deg);animation:hover 1.6s var(--e-io) infinite alternate;filter:grayscale(1) contrast(1.2) drop-shadow(0 8px 10px rgba(0,0,0,.5))}
@keyframes hover{0%{transform:translate(0,0) rotate(-12deg)}100%{transform:translate(4px,-9px) rotate(-6deg)}}
.lh-f{position:absolute;display:block;z-index:1}
.lh-f.fl{z-index:2}
.lh-hit{position:absolute;inset:0;display:block;color:#fff;pointer-events:none}
.lh-hit>*{pointer-events:auto}
.lh-lab{position:absolute;left:calc(6 * var(--u));top:max(14vh,90px);display:flex;flex-direction:column;gap:5px;max-width:260px;z-index:3;transition:transform .5s var(--e-out)}
.lh-lab b{font-family:var(--f-cap);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lh-lab span{font-family:var(--f-wide);font-size:15px;line-height:1.25;color:#8c8c8c;transition:color .35s}
.lh-lab em{font-family:var(--f-cap);font-style:italic;font-size:15px;line-height:1.3;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--e-out)}
.lh-hit:hover .lh-lab span,.lh-hit:focus-visible .lh-lab span{color:#fff}
.lh-hit:hover .lh-lab em,.lh-hit:focus-visible .lh-lab em{opacity:1;transform:none}
.lh-hit:focus-visible{outline:none}
.lh-end{width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.lh-endt{margin:0;font-family:var(--f-cap);text-transform:uppercase;font-size:clamp(30px,4.6vw,64px);line-height:.95;text-align:center}
.lh-endb{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;z-index:3}
.lh-endf{left:auto;right:6vw;bottom:0;height:calc(32 * var(--u))}
.ls-btn{font-family:var(--f-wide);font-size:12px;font-weight:600;padding:11px 18px 10px;border:2px solid currentColor;background:transparent;color:inherit;transition:background .25s,color .25s}
.ls-btn:hover{background:#fff;color:#000}
/* home plays in after the printer or the title card */
.ls-home.play .lh-word i{animation:rise 1s var(--e-out) both;animation-delay:calc(var(--i) * .045s)}
.ls-home.play .lh-hint,.ls-home.play .lh-role{animation:fade .8s .5s both}
.ls-home.play .lh-hero{animation:fadeup 1.2s .25s var(--e-out) both}
.ls-home.play .lh-drone{animation:flyin 1.6s .6s var(--e-out) both}
@keyframes rise{from{transform:translateY(60%);opacity:0;clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -10% 0)}}
@keyframes fade{from{opacity:0}}
@keyframes fadeup{from{opacity:0;transform:translateY(4%)}}
@keyframes flyin{from{opacity:0;transform:translate(30vw,-20vh) rotate(20deg)}}
.lh-run{height:0}

/* ---------------- project pages ---------------- */
.ls-pg{position:fixed;inset:0;z-index:20;overflow-y:auto;overflow-x:hidden;display:none;background:#000;color:#000;transition:background-color .8s var(--e-io);scrollbar-width:none}
.ls-pg::-webkit-scrollbar{display:none}
.ls-pg.on{display:block}
.ls-in{position:relative;height:100vh;height:100svh;min-height:520px;color:#fff}
.ls-in-k{position:absolute;left:max(7vw,24px);top:24vh;display:flex;flex-direction:column;gap:8px;max-width:220px;z-index:2}
.ls-in-k b{font-family:var(--f-cap);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ls-in-k span{font-family:var(--f-wide);font-size:15px;line-height:1.3;color:#8c8c8c}
.ls-in-f{position:absolute;left:50%;bottom:16vh;height:min(56vh,74vw);margin:0;transform:translateX(-50%)}
.ls-in-f .floor{position:absolute;left:50%;bottom:-1px;width:min(64vw,620px);height:1px;transform:translateX(-50%);background:rgba(255,255,255,.35)}
.ls-in-s{position:absolute;right:max(7vw,24px);top:44vh;max-width:200px;margin:0;font-family:var(--f-cap);font-size:15px;line-height:1.45;color:#fff}
.ls-in-k,.ls-in-s,.ls-in-f{opacity:0}
.ls-pg.play .ls-in-f{animation:fadein 1.1s var(--e-io) both}
.ls-pg.play .ls-in-k{animation:fadein .8s .55s var(--e-io) both}
.ls-pg.play .ls-in-s{animation:fadein .8s .85s var(--e-io) both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ls-pg .ls-in-f .ls-fig{cursor:default}
/* sections: the page colour fades as each one arrives */
.ls-sec{position:relative;padding:18vh max(6vw,20px) 14vh}
.ls-pg.is-dark .ls-sec[data-bg="#000"]{color:#fff}
.ls-sec[data-bg="#000"]{color:#fff}
.ls-hd{max-width:620px;margin:0 auto 12vh;text-align:center}
.ls-h{margin:0 0 28px;font-family:var(--f-wide);font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.ls-p{margin:0 auto;max-width:520px;font-family:var(--f-cap);font-size:17px;line-height:1.6}
.ls-sm{margin:26px 0 0;font-family:var(--f-wide);font-size:11px;color:#8c8c8c}
.ls-k{margin:0;font-family:var(--f-cap);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
/* reveals */
.ls-pg [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e-out),transform 1.1s var(--e-out);transition-delay:calc(var(--d,0) * .08s)}
.ls-pg [data-r].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ls-pg [data-r]{opacity:1;transform:none;transition:none}}

/* timeline down the middle */
.ls-tl{position:relative;max-width:1080px;margin:0 auto;padding-top:34px}
.ls-tl::before{content:"";position:absolute;left:50%;top:10px;bottom:0;width:1px;background:#000}
.ls-tl::after{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-6px;border:1.5px solid #000;border-radius:50%;background:#fff}
.tl-end{position:absolute;left:50%;bottom:-6px;width:11px;height:11px;margin-left:-6px;border:1.5px solid #000;border-radius:50%;background:#fff}
.tl-row{position:relative;display:grid;grid-template-columns:1fr 200px 1fr;align-items:start;margin:0 0 12vh}
.tl-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;text-align:center;background:#fff;padding:8px 6px;display:flex;flex-direction:column;gap:4px}
.tl-node b{font-family:var(--f-wide);font-weight:700;font-size:14px;line-height:1.2}
.tl-node span{font-family:var(--f-wide);font-size:10px;color:#8c8c8c;letter-spacing:.02em}
.tl-l{grid-column:1;grid-row:1;justify-self:end;max-width:420px;width:100%}
.tl-r{grid-column:3;grid-row:1;justify-self:start;max-width:420px;width:100%}
.tl-big{margin:0 0 16px;font-family:var(--f-wide);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.01em}
.tl-p{margin:0 0 12px;font-family:var(--f-cap);font-size:16px;line-height:1.55;color:#333}
.tl-wide{position:relative;z-index:1;margin:0 auto 14vh;max-width:980px;background:#fff;padding:26px 0}
.s-cover{margin:0;transform:rotate(2deg);box-shadow:0 22px 40px -18px rgba(0,0,0,.45)}
.s-cover img{display:block;width:100%;height:auto}
.s-cover figcaption{position:absolute;left:0;bottom:-26px;font-family:var(--f-wide);font-size:10px;color:#8c8c8c}
/* chart */
.ls-pg .s-chart{margin:0 0 40px}
.ls-pg .s-chart figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;font-family:var(--f-wide);font-size:12px;color:#8c8c8c}
.ls-pg .s-chart figcaption b{font-weight:700;color:#000;font-size:14px}
.ls-pg .s-chart svg{width:100%;height:auto;display:block;overflow:visible}
.ls-pg .s-chart .gl{stroke:#000;stroke-opacity:.1}
.ls-pg .s-chart .base{stroke:#000}
.ls-pg .s-chart .s-ax{font-family:var(--f-wide);font-size:15px;fill:#8c8c8c}
.ls-pg .s-chart .s-ln{fill:none;stroke:#000;stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ls-pg .s-chart .an circle{fill:#fff;stroke:#000;stroke-width:2.5;opacity:0;transition:opacity .3s}
.ls-pg .s-chart .an text{font-family:var(--f-wide);font-weight:600;font-size:16px;fill:#000;opacity:0;transition:opacity .4s}
.ls-pg .s-chart .an.on circle,.ls-pg .s-chart .an.on text{opacity:1}
.ls-pg .s-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:2px solid #000}
.ls-pg .s-stats div{padding:16px 10px 0 0;display:flex;flex-direction:column;gap:4px}
.ls-pg .s-stats b{font-family:var(--f-num);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1}
.ls-pg .s-stats span{font-family:var(--f-wide);font-size:11px;color:#8c8c8c}
.ls-pg .s-note{margin:22px 0 0;font-family:var(--f-cap);font-style:italic;font-size:16px}
.ls-hintpill{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:7px 12px 6px;border:1.5px solid #000;font-family:var(--f-wide);font-size:11px;font-weight:600}
.ls-hintpill i{width:10px;height:10px;border-radius:50%;border:1.5px solid #000}
/* the stories under the lens */
.ls-pg .s-script{position:relative;background:#fff;padding:26px 26px 22px;box-shadow:0 0 0 1px #000,8px 8px 0 #000}
.ls-pg .s-stamp{position:absolute;right:-18px;top:-24px;width:78px;transform:rotate(6deg);box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.ls-pg .s-stamp img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.1);transition:filter .4s}
.ls-pg .s-script:hover .s-stamp img{filter:none}
.ls-pg .s-script h3{margin:6px 0 14px;font-family:var(--f-cap);font-weight:400;text-transform:uppercase;font-size:30px;line-height:1}
.ls-pg .s-lines p{margin:0 0 8px;font-family:var(--f-cap);font-size:17px;line-height:1.45}
.ls-pg .lens-alt .alt{color:#000;font-style:italic}
/* comments */
.ls-pg .s-q{margin:0;background:#fff;padding:22px 24px;box-shadow:0 18px 40px -20px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.08)}
.ls-pg .s-q img{display:block;width:100%;height:auto;margin:-6px 0 14px;filter:grayscale(1);transition:filter .4s}
.ls-pg .s-q:hover img{filter:none}
.ls-pg .s-q p{margin:0 0 12px;font-family:var(--f-cap);font-size:18px;line-height:1.45}
.ls-pg .s-q cite{font-family:var(--f-wide);font-style:normal;font-size:11px;color:#8c8c8c}
.ls-pg .s-q.q-big p{font-family:var(--f-wide);font-weight:800;font-stretch:115%;font-size:26px;line-height:1.05;text-transform:uppercase}
/* audience */
.ls-pg .s-bars{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ls-pg .s-bars li{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:10px;font-family:var(--f-wide);font-size:12px}
.ls-pg .s-bars i{height:9px;background:#000;width:var(--w);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--e-out);transition-delay:calc(.4s + var(--d) * .06s)}
.ls-pg .tl-l.in .s-bars i{transform:none}
.ls-pg .s-bars b{font-weight:600;text-align:right}
.ls-pg .s-women{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 14px;padding-top:60px}
.ls-pg .s-women b{font-family:var(--f-num);font-weight:400;font-size:clamp(70px,8vw,120px);line-height:.9}
.ls-pg .s-women b.sm{font-size:clamp(34px,3.6vw,52px)}
.ls-pg .s-women span{font-family:var(--f-wide);font-size:12px;color:#8c8c8c}
/* the grey wall */
.ls-grey{text-align:center;min-height:90vh}
.ls-grey .ls-h{margin-top:0}
.ls-msgs{position:relative;max-width:820px;margin:9vh auto 0;display:flex;justify-content:center;gap:5vw;flex-wrap:wrap}
.ls-msg{width:300px;text-align:left;background:#fff;padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;box-shadow:0 22px 44px -22px rgba(0,0,0,.45);transform:rotate(-2deg)}
.ls-msg.r{transform:rotate(2.5deg) translateY(40px)}
.ls-msg.in{transform:rotate(-2deg)}.ls-msg.r.in{transform:rotate(2.5deg) translateY(40px)}
.ls-msg b{font-family:var(--f-wide);font-weight:700;font-size:24px;line-height:1.1}
.ls-msg em{font-family:var(--f-cap);font-size:16px;color:#333}
.ls-msg .ls-k{color:#8c8c8c}
/* footer */
.ls-ft{padding:12vh max(4vw,20px) 26px;color:#000}
.ls-ft-row{display:flex;justify-content:space-between;gap:24px;border-top:4px solid #000;padding-top:16px}
.ls-ft-row a{font-family:var(--f-cap);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#000;max-width:46%}
.ls-ft-row a:last-child{text-align:right}
.ls-ft-row a:hover{text-decoration:underline;text-underline-offset:4px}
.ls-ft-cr{display:flex;justify-content:space-between;gap:24px;margin-top:40px;font-family:var(--f-wide);font-size:10px;color:#000}
/* motion page */
.mo-reel{position:relative;max-width:900px;margin:0 auto 10vh}
.mo-reel video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mo-reel figcaption{display:flex;gap:14px;align-items:baseline;margin-top:14px;font-family:var(--f-wide);font-size:12px;color:#8c8c8c}
.mo-reel figcaption b{color:#000;font-size:14px}
.mo-soon{list-style:none;margin:0 auto;padding:0;max-width:900px;border-top:2px solid #000}
.mo-soon li{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.15)}
.mo-soon b{font-family:var(--f-cap);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.6vw,36px)}
.mo-soon span{font-family:var(--f-cap);font-style:italic;font-size:16px;color:#8c8c8c}
/* about page */
.in-pair{display:flex;justify-content:center;align-items:flex-end;gap:4vw;height:min(46vh,60vw)}
.in-pair .ls-fig{height:100%}
.in-pair .in-b{height:84%}
.in-links{list-style:none;margin:0 auto;padding:0;max-width:760px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.in-links a,.in-links div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:200px;padding:20px 22px;border:2px solid #fff;color:#fff;transition:background .25s,color .25s}
.in-links a:hover{background:#fff;color:#000}
.in-links b{font-family:var(--f-cap);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.in-links span{font-family:var(--f-wide);font-size:15px}
.in-links div span{color:#8c8c8c}

/* ---------------- scroll down bruh ---------------- */
.ls-bruh{position:fixed;left:50%;bottom:0;z-index:22;width:min(26vh,190px);height:min(29vh,212px);margin-left:calc(min(26vh,190px) / -2);pointer-events:none;transform:translateY(100%);transition:transform .9s var(--e-pop)}
.ls-bruh img{position:absolute;left:0;bottom:0;width:100%;height:auto}
.ls-bruh.peek{transform:translateY(74%)}
.ls-bruh.up{transform:translateY(30%)}
.ls-bruh.hide{transform:translateY(102%);transition-timing-function:var(--e-io);transition-duration:.5s}
.ls-bruh svg{position:absolute;left:68%;top:6%;width:110px;height:82px;overflow:visible}
.ls-bruh path{fill:none;stroke:var(--ls-ink,#000);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--e-io)}
.ls-bruh span{position:absolute;left:calc(68% + 70px);top:calc(6% + 88px);white-space:nowrap;font-family:var(--f-hand);font-size:19px;color:var(--ls-ink,#000);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.ls-bruh.up path{stroke-dashoffset:0;transition-delay:.45s}
.ls-bruh.up span{opacity:1;transform:none;transition-delay:.85s}

/* ---------------- worm and lens in the new colours ---------------- */
.fx-worm .bd{stroke:var(--ls-ink,#000)}
.fx-worm .ey{fill:var(--ls-ink,#000)}
.fx-worm .hl{stroke:transparent}
html.ls-dark .fx-worm .ey{fill:#000}
html:not(.ls-dark) .fx-worm .ey{fill:#fff}
.fx-worm .tr{background:color-mix(in srgb,var(--ls-ink,#000) 14%,transparent)}
.fx-lens{box-shadow:0 18px 40px -12px rgba(0,0,0,.35),inset 0 0 0 1.5px #000,inset 0 -8px 22px rgba(255,255,255,.55)}
.fx-lens .rim{opacity:.35}

/* ---------------- the films page in the new colours ---------------- */
body.proj .cds{background:#fff}

/* ---------------- phones ---------------- */
@media (max-width:760px){
  .ls-tick{left:88px}
  .lh-hint{top:14vh}
  .lh-hero{height:min(52vh,92vw);right:-4vw}
  .lh-drone{right:12vw;top:9vh}
  .lh-lab{top:13vh;max-width:210px}
  .ls-in-k{top:13vh}
  .ls-in-s{top:auto;bottom:6vh;right:auto;left:max(7vw,24px);max-width:80vw}
  .ls-in-f{bottom:22vh;height:min(46vh,80vw)}
  .ls-tl::before,.ls-tl::after,.tl-end{left:14px}
  .tl-row{grid-template-columns:1fr;padding-left:38px;margin-bottom:8vh}
  .tl-node{grid-column:1;grid-row:auto;justify-self:start;text-align:left;margin:0 0 18px -6px}
  .tl-l,.tl-r{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none}
  .tl-wide{margin-left:38px}
  .ls-pg .s-stats{grid-template-columns:repeat(3,1fr);row-gap:18px}
  .ls-pg .s-stamp{right:-6px}
  .ls-ft-cr{flex-direction:column;gap:6px}
  .ls-bruh{width:120px;height:134px;margin-left:-60px}
  .ls-bruh svg{width:64px;height:52px}
  .ls-bruh span{left:calc(68% + 34px);top:calc(6% + 56px);font-size:16px}
  .ls-menu em{position:static;display:block;margin-top:8px;opacity:1;transform:none}
}
/* undo the older card styles inside the new pages */
.ls-pg .s-script{border-radius:0}
.ls-pg .s-q{display:block;max-width:none}
.ls-pg .s-q img{width:100%;aspect-ratio:auto;object-fit:initial;border-radius:0;box-shadow:none;grid-row:auto}
.ls-pg .s-women{display:flex;flex-direction:column;gap:2px;padding-top:40px}
.ls-pg .s-women span{margin-bottom:22px}

/* the films page keeps its film index; the portrait button does the rest */
body.proj .cd-nav .home,body.proj .cd-nav>span.on{display:none}
/* the animated illustrations: they move on their own, so they only lift a touch when pointed at */
.lh-f .ls-fig img{transition:transform .5s var(--e-out)}
.lh-hit:hover .lh-f:not(.fl) .ls-fig img{transform:translateY(-1.2%)}
.lh-endf{height:calc(44 * var(--u))!important}
.lh-cred{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);margin:0;max-width:80vw;text-align:center;font-family:var(--f-wide);font-size:10px;color:#8c8c8c}
.in-cred{margin:40px auto 0;max-width:520px;text-align:center;font-family:var(--f-cap);font-style:italic;font-size:15px;color:#8c8c8c}
.ls-bruh{height:min(37vh,273px)}
@media (max-width:760px){.ls-bruh{height:172px}}