@font-face{font-family:"Aeiou";src:url("../assets/fonts/aeiou.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Bold.woff2") format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/Montserrat-SemiBold-infinity.woff2") format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"Clarity City";src:url("../assets/fonts/ClarityCity-Bold.woff2") format("woff2");font-weight:700;font-display:block}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
#track,.card,#hero,.stat,.pbox,.pgal{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root{color-scheme:light;--s:1;--hh:475;--d:0}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:#000}
body{font-family:"Geist",system-ui,sans-serif;font-size:9px;line-height:normal;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0;outline:none}
ul{list-style:none}

/* every page is drawn on the 842px Figma canvas and scaled to the window */
.stage{position:relative;width:100%;overflow:hidden}
.view{position:absolute;left:0;top:0;width:842px;transform:scale(var(--s));transform-origin:0 0}
.view[hidden]{display:none}
.a{position:absolute;white-space:nowrap}
.up{text-transform:uppercase}
.b9{font-weight:700;font-size:9px}
.s9{font-weight:600;font-size:9px}
.m9{font-weight:500;font-size:9px}
.r9{font-weight:400;font-size:9px}
.t24{font-family:"Clarity City",sans-serif;font-weight:700;font-size:24px;text-transform:uppercase}
.logo{font-family:"Aeiou",cursive;font-weight:400;font-size:32px;line-height:normal}
.just{white-space:normal;text-align:justify;text-transform:uppercase}
.just p+p{margin-top:12px}
.just .lbl{display:block;margin-bottom:2px}
.lnk{transition:opacity .2s}
.lnk:hover,.lnk:focus-visible{opacity:.5}
.soon{cursor:default}

/* nav */
.navbox{}
/* the borders are made of separate dots (and the tiny JARNS words); on hover they burst
   outwards and fall back into place */
.bits{position:absolute;left:0;top:0;pointer-events:none}
.bit{position:absolute;background:#000;will-change:transform}
.jbox span{position:absolute;font-family:"Aeiou",cursive;font-size:4px;line-height:normal;white-space:nowrap}

/* hero */
#hero{left:20px;top:48px;width:802px;height:calc(var(--hh)*1px);background:#000;color:#fff;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%}
.placard{position:absolute;left:20px;top:20px;width:170px;white-space:normal;z-index:2;text-transform:uppercase;transition:opacity .45s ease,transform .45s ease}
.placard.out,.placard.away{opacity:0;transform:translateY(-3px)}
.placard strong{display:block;font-weight:700;font-size:9px;white-space:nowrap}
.placard .pl-tx{display:block;margin-top:4px;font-size:8px;line-height:10px;opacity:.7}
.stat{position:absolute;margin-top:1px;cursor:default;outline:none;transition:opacity .5s ease}
.stat b{position:absolute;white-space:nowrap;font-family:"Clarity City",sans-serif;font-weight:700;font-size:24px}
.stat b.inf{font-family:"Montserrat",sans-serif;font-weight:600;font-size:40px}
.stat span{position:absolute;white-space:nowrap;font-size:9px;text-transform:uppercase}
.stat:focus-visible{outline:1px dotted #fff;outline-offset:2px}
.stats.focused .stat{opacity:.3}
.stats.focused .stat.on{opacity:1}
#hero.intro .stats,#hero.intro .placard{opacity:0;pointer-events:none;transition:none}
.stats{transition:opacity .8s ease .2s}
/* the numbers and the arrow stay anchored to the bottom of the panel when its height adapts */
.stats{position:absolute;left:0;top:calc((var(--d) + 48)*1px);width:802px;height:475px;pointer-events:none}
.stat{pointer-events:auto}
.below{position:absolute;left:0;top:calc(var(--d)*1px);width:842px}
.introbar{position:absolute;left:20px;right:20px;bottom:24px;height:2px;z-index:2;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff .9px,transparent 1.1px) 0 0/6px 2px;transform-origin:left;transform:scaleX(0)}
#hero.intro .introbar{opacity:.55;animation:introbar 3.1s linear forwards}
@keyframes introbar{to{transform:scaleX(1)}}
#cap{display:none}

/* projects */
#track{left:0;top:762px;width:842px;height:230px;
  /* cards fade into the page at both sides: a smooth mask, nothing painted on top */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 22px,#000 84px,#000 758px,rgba(0,0,0,.25) 820px,transparent 842px);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 22px,#000 84px,#000 758px,rgba(0,0,0,.25) 820px,transparent 842px)}
.card{position:absolute;left:0;top:6px;width:160px;height:218px;overflow:hidden;cursor:pointer;background:transparent;will-change:transform;display:block}
.card img{position:absolute;left:0;width:160px;display:block}
/* "Read more" follows the pointer over the cards: same dotted tag as the Contact button */
.card{cursor:none}
.card video,.card img{pointer-events:none}
/* row controls: one dot per project + arrows; the row can also be dragged or swiped */
.pbtn{cursor:pointer}
.pbtn:focus-visible,.pdots button:focus-visible{outline:1px dotted #000;outline-offset:2px}
.pdots{top:1009px;height:10px}
.pdots button{position:absolute;top:0;width:10px;height:10px;cursor:pointer}
.pdots button i{position:absolute;left:3px;top:3px;width:4px;height:4px;border-radius:50%;border:.5px solid #000;transition:background .25s,transform .25s}
.pdots button:hover i{transform:scale(1.35)}
.pdots button[aria-current="true"] i{background:#000}
#track{touch-action:pan-y}
#track.drag{cursor:grabbing}
/* hover: the other projects step back, the hovered one keeps its colour and gets a frame of dots */
.card{transition:filter .45s ease,opacity .45s ease}
#track.focus .card:not(.on){filter:grayscale(1);opacity:.35}
.cframe{position:absolute;left:0;top:0;width:172px;height:230px;pointer-events:none;opacity:0;transition:opacity .2s}
.cframe.on{opacity:1}
.cframe svg{position:absolute;left:0;top:0;overflow:visible}
.cframe circle{fill:#000;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card img{width:100%}
.rmore{width:0;height:0;pointer-events:none;z-index:6;filter:drop-shadow(0 0 1.2px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(0,0,0,.35))}
.rmore .ring{position:absolute;left:0;top:0;transform:scale(.2);opacity:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.rmore .ring i{position:absolute;width:1.4px;height:1.4px;margin:-.7px 0 0 -.7px;border-radius:50%;background:#fff}
.rmore .ring b{position:absolute;left:-1.25px;top:-1.25px;width:2.5px;height:2.5px;border-radius:50%;background:#fff}
.rmore .spin{position:absolute;left:0;top:0;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rmore span{position:absolute;left:17px;top:-6px;color:#fff;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .3s ease}
.rmore.on .ring{transform:none;opacity:1}
.rmore.on span{opacity:1;transform:none;transition-delay:.06s}
.card:focus-visible{outline:1px dotted #000;outline-offset:2px}
#plabel{left:212px;top:717px;opacity:0;transition:opacity .25s}
#plabel.on{opacity:1}
#plabel div{position:absolute;left:0;font-weight:700;font-size:9px;white-space:nowrap;text-transform:uppercase}
#plabel em{font-style:normal;font-weight:400}

/* about */
.sig{font-family:"Aeiou",cursive;font-size:128px;line-height:normal;white-space:nowrap}

/* footer */
.rule{height:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='1'%3E%3Ccircle cx='.5' cy='.5' r='.5'/%3E%3C/svg%3E") 0 0/7px 1px repeat-x}
.cta{font-size:24px;text-transform:uppercase;font-weight:400}
.cta b{font-weight:600}
.bul{padding-left:13.5px}
.bul::before{content:"";position:absolute;left:4.25px;top:4.75px;width:2.5px;height:2.5px;border-radius:50%;background:#000}

/* project page */
.pbox{background:#d9d9d9;overflow:hidden}
.pbox.zoom{cursor:zoom-in}
/* project page: extra visuals in justified rows under the story */
.pgal{left:20px;width:802px}
.pgal .gl{position:absolute;left:0;top:0;font-weight:700;font-size:9px;text-transform:uppercase}
.pgal button{position:absolute;padding:0;cursor:zoom-in;overflow:hidden;background:#eee}
.pgal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pgal button:hover img{transform:scale(1.02)}
.pgal button:focus-visible{outline:1px dotted #000;outline-offset:2px}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lightbox button{position:absolute;top:18px;right:22px;color:#fff;font-family:Geist,sans-serif;font-size:12px;cursor:pointer;letter-spacing:.02em}
.pbox video{width:100%;height:100%;object-fit:cover;display:block}
.pbox video[hidden],.pbox img[hidden]{display:none}
.pbox img{width:100%;height:100%;object-fit:cover;display:block}
.hand{font-family:"Aeiou",cursive;font-size:32px;line-height:normal;white-space:normal;text-transform:none}

/* contact page */
.field{left:20px;width:253px;height:20px;font-size:9px;font-weight:400}
.field::placeholder{color:#000;opacity:.4}
.uline{height:.5px;background:#000;opacity:.4}
.chip{height:22px;border:.5px solid #000;font-weight:500;font-size:9px;cursor:pointer;text-transform:uppercase;transition:background .2s,color .2s}
.chip i{position:absolute;width:5px;height:5px;border-radius:50%;border:.5px solid #000}
.chip span{position:absolute;white-space:nowrap}
.chip[aria-checked="true"]{background:#000;color:#fff}
.chip[aria-checked="true"] i{background:#fff;border-color:#fff}
.chip:focus-visible,.send:focus-visible{outline:1px dotted #000;outline-offset:2px}
.send{font-weight:600;font-size:9px;cursor:pointer;text-transform:uppercase}
.send span{position:absolute;white-space:nowrap}
.dim{opacity:.4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send[disabled]{cursor:progress;opacity:.5}
.sdot{display:inline-block;vertical-align:1px;margin-right:4px;width:4px;height:4px;border-radius:50%;background:#000;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.note{font-size:9px;font-weight:500;text-transform:uppercase;opacity:0;transition:opacity .3s}
.note.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* groups that only matter on small screens */
.pctl,.facts{display:contents}
.burger,.mmenu{display:none}
/* =================== PHONES (< 700px): the 393px mobile design, scaled to the screen =================== */
.m .view{width:393px}
.m #vHome{height:1985px!important}
/* nav: menu button, logo in the middle, Contact on the right */
.m .view > nav > a.s9{display:none}
.m .view > nav .logo{left:163px!important;top:10px!important}
.m .view > nav .navbox{left:297px!important;top:12px!important}
.m .burger{display:block;position:absolute;left:16px;top:12px;width:23px;height:19px;padding:0;cursor:pointer}
.m .burger i{position:absolute;left:4px;width:15px;height:1px;background:#000}
.m .burger i:nth-child(1){top:4px}.m .burger i:nth-child(2){top:9px}.m .burger i:nth-child(3){top:14px}
.m .mmenu:not([hidden]){display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;background:#fff;padding:12px 20px 28px;animation:mfade .25s ease}
@keyframes mfade{from{opacity:0}}
.m .mmenu .logo{align-self:center;font-size:32px;line-height:normal}
.m .mclose{position:absolute;left:16px;top:14px;width:24px;height:24px;cursor:pointer}
.m .mclose::before,.m .mclose::after{content:"";position:absolute;left:4px;top:11px;width:16px;height:1px;background:#000;transform:rotate(45deg)}
.m .mclose::after{transform:rotate(-45deg)}
.m .mmenu ul{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:14px}
.m .mmenu li a{font-family:"Clarity City",sans-serif;font-weight:700;font-size:40px;text-transform:uppercase;line-height:1}
.m .mmenu .mfoot{font-size:20px;text-transform:uppercase}
.m .mmenu .mfoot b{font-weight:600}

/* ---- home: positions from the mobile design ---- */
.m #hero{left:20px;top:48px;width:353px;height:475px}
.m .stats{top:0!important;left:0;width:353px;height:475px}
.m .stat{left:0!important;width:353px!important;height:auto!important;margin:0!important;text-align:center}
.m .stat b,.m .stat span{position:static!important;display:block;width:auto!important;text-align:center}
.m .stat b{font-size:17px}
.m .stat b.inf{font-size:28px;line-height:30px}
.m .stat span{margin-top:1px;font-size:8px}
.m .stat:nth-child(2) span{margin-top:-4px}
.m .stat:nth-child(1){top:340px!important}
.m .stat:nth-child(2){top:380px!important}
.m .stat:nth-child(3){top:426px!important}
.m .below{top:0!important;width:393px}
.m #manifesto{width:353px!important}
.m #projects{top:695px!important}
.m #plabel{top:747px!important}
.m #track{width:393px;top:792px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 12px,#000 40px,#000 353px,rgba(0,0,0,.3) 381px,transparent 393px);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 12px,#000 40px,#000 353px,rgba(0,0,0,.3) 381px,transparent 393px)}
.m #rmore{display:none}
/* phones: the card in the middle is the 'hovered' one; arrows and dots sit under the row like on desktop */
.m #plabel{left:20px!important;width:353px;text-align:center}
.m #plabel div{left:0;width:353px;white-space:normal}
.m #pPrev,.m #pNext,.m #pdots{top:1036px!important}
.m .pbtn::after,.m .pdots button::after{content:"";position:absolute;inset:-8px -2px}
.m #track.focus .card:not(.on){filter:grayscale(1);opacity:.4}
.m #vHome div[style*="text-align:center"]{width:393px!important}
.m #about{top:1212px!important}
.m #vHome div[style*="width:609px"]{left:20px!important;top:1471px!important;width:352px!important;height:294px!important}
.m img[alt="Portrait of Jarne"]{left:49px!important;top:1464px!important;width:324px!important;height:301px!important}
.m #vHome .just[style*="width:172px"]{top:1264px!important;width:353px!important}
.m .sig:not([style*="clip-path"]){display:none}
.m .sig[style*="clip-path"]{clip-path:none!important;left:30px!important;top:1517px!important;font-size:92px}
/* the white JARNS slides just behind the portrait */
.m #vHome div[style*="width:609px"]{z-index:1}
.m .sig[style*="clip-path"]{z-index:2}
.m img[alt="Portrait of Jarne"]{z-index:3}
.m #vHome .rule{width:350px!important}
.m #vHome div[style*="left:721px"]{left:20px!important;top:1953px!important;width:352px;display:flex;justify-content:space-between}
.m .cdash{display:none}

/* ---- project & contact pages: the same 393px canvas, content flows down ---- */
.m #vProject,.m #vContact{height:auto!important;padding:48px 20px 36px}
.m :is(#vProject,#vContact) .a:where(:not(nav .a):not(.chip):not(.send):not(.chip .a):not(.send .a)){position:static!important;left:auto!important;top:auto!important;width:auto!important;white-space:normal}
.m :is(#vProject,#vContact) .uline{height:.5px}
.m :is(#vProject,#vContact) .rule{height:1px;margin-top:40px}
.m :is(#vProject,#vContact) .cta{margin-top:20px}
.m :is(#vProject,#vContact) .subfoot ul{display:flex;justify-content:space-between;margin-top:14px;padding-right:14px}
.m :is(#vProject,#vContact) .bul{position:relative!important}
.m #vProject:not([hidden]){display:flex;flex-direction:column}
.m #vProject #pvHand{order:1;width:auto!important;max-width:300px;margin:16px 0 14px;transform:rotate(-4deg)!important;transform-origin:0 50%}
.m #vProject .pbox{order:2;width:353px!important;height:479px!important}
.m #vProject #pBody{order:3;margin-top:20px}
.m #vProject #pvName{order:4;margin-top:16px}
.m #vProject #pvBrand{order:5;margin-top:4px}
.m #vProject #pvLink{order:6;margin-top:4px}
.m #vProject .pgal{order:7;position:relative!important;width:353px!important;margin-top:36px}
.m #vProject #pFoot{order:8;position:static!important;width:auto!important}
.m #vContact .t24{margin-top:14px}
.m #vContact .just{margin-top:12px}
.m #vContact #cHand{width:auto!important;display:block;margin:6px 0 4px;transform:rotate(-3deg)!important;transform-origin:0 50%}
.m #vContact label.b9,.m #aboutLbl{display:block;margin-top:18px}
.m #vContact .field{width:353px!important;height:24px}
.m [role=radiogroup]{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.m #vContact .chip{position:relative!important;left:auto!important;top:auto!important}
.m #vContact .send{position:relative!important;left:auto!important;top:auto!important;margin-top:20px;display:block}
.m #vContact #cnote{margin-top:10px}
.m #vContact > div.b9{margin-top:36px}
.m #vContact > ul{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.m .facts{display:grid;grid-template-columns:95px 1fr;row-gap:8px}
.m .facts > .b9,.m .facts > .uline{grid-column:1/-1}
.m .facts > .b9{margin-top:32px}