@font-face{font-family:OffBit;src:url(/assets/fonts/OffBit-Regular.BUl2rdng.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:OffBit;src:url(/assets/fonts/OffBit-101Bold.JQCzxZZ0.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--color-white: #cacaca;--color-black: #131313;--color-gray: #555555;--bg-primary: var(--color-black);--text-primary: var(--color-white);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 4rem;--spacing-3xl: 6rem;--radius-sm: 4px;--font-family: "OffBit", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;--font-size-base: 16px;--font-size-small: 1.2rem;--font-size-medium: 2rem;--font-size-large: 2.6rem;--letter-spacing-base: .12rem;--letter-spacing-wide: .172rem;--letter-spacing-wider: .2rem;--line-height-tight: 1.2;--line-height-base: 1.425;--z-strips: 1;--z-filter: 10;--z-content: 100;--z-header: 300;--z-grain: 400}html[data-project=danny-saucedo]{--project-color: #9b2500;--project-color-text: var(--color-white)}html[data-project=svartljus]{--project-color: #b07600;--project-color-text: var(--color-white)}html[data-project=eastern-city-portal]{--project-color: #4698d2;--project-color-text: var(--color-black)}html[data-project=embed]{--project-color: #1a43fe;--project-color-text: var(--color-white)}html[data-project=emerging-sensation]{--project-color: #1521b4;--project-color-text: var(--color-white)}html[data-project=firestarter]{--project-color: #005d80;--project-color-text: var(--color-white)}html[data-project=harpa]{--project-color: #ff5c1a;--project-color-text: var(--color-black)}html[data-project=heroes]{--project-color: #727171;--project-color-text: var(--color-white)}html[data-project=icehotel]{--project-color: #0b4f80;--project-color-text: var(--color-white)}html[data-project=jag-ar-gud]{--project-color: #833e00;--project-color-text: var(--color-white)}html[data-project=lights-for-ukraine]{--project-color: #5500a0;--project-color-text: var(--color-white)}html[data-project=lyra]{--project-color: #070a79;--project-color-text: var(--color-white)}html[data-project=people-in-orbit]{--project-color: #e16518;--project-color-text: var(--color-black)}html[data-project=resonance]{--project-color: #4f0396;--project-color-text: var(--color-white)}html[data-project=retrospectives]{--project-color: #ff6a1a;--project-color-text: var(--color-black)}html[data-project=sala-hjartslag]{--project-color: #962d00;--project-color-text: var(--color-white)}html[data-project=tinymassive]{--project-color: #00338e;--project-color-text: var(--color-white)}html[data-project=transcend]{--project-color: #cc1c65;--project-color-text: var(--color-white)}html[data-project=tufting-ex-machina]{--project-color: #f37100;--project-color-text: var(--color-black)}html[data-project=vista]{--project-color: #8401ff;--project-color-text: var(--color-white)}:root{--cut-corner-sm: polygon( 8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50% );--cut-corner-md: polygon( 12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50% );--cut-corner-lg: polygon( 16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50% )}*,*:before,*:after{box-sizing:border-box}html{min-height:100vh;overflow-y:auto;margin:0;padding:0}html.transition-lock,body.about-visible{overflow:hidden;background:var(--color-black);scroll-snap-type:y proximity;scrollbar-width:none}body{min-height:100vh;width:100%;margin:0;padding:0;background:var(--color-black);color:var(--text-primary);font-family:var(--font-family);letter-spacing:var(--letter-spacing-wider);overflow-y:auto;overflow-x:hidden;position:relative}#content{position:relative;z-index:var(--z-content);overflow-anchor:none}::-webkit-scrollbar{display:none}.skip-link{position:absolute;top:-100%;left:50%;transform:translate(-50%);background:var(--color-white);color:var(--color-black);padding:var(--spacing-sm) var(--spacing-lg);z-index:calc(var(--z-loading) + 1);font-family:var(--font-family);font-size:var(--font-size-base);text-decoration:none;clip-path:var(--cut-corner-sm)}.skip-link:focus{top:var(--spacing-lg)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}a{color:inherit;text-decoration:none}a:hover{color:inherit}header,#strips,.filter-dropdown{user-select:none;-webkit-user-select:none}img,figure,video,canvas,svg,picture,figcaption{-webkit-user-drag:none}body.loading #main,body.loading #strips,body.loading #header,body.loading #filter-dropdown-container,body.loading #about,body.loading #projects{opacity:0!important;visibility:hidden!important;pointer-events:none!important}body.loading:before{opacity:0!important;visibility:hidden!important}body.loaded #header{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}body.loaded[data-route=home] #strips,body.loaded:not([data-route]):not(.project-visible):not(.about-visible) #strips{opacity:1;visibility:visible;pointer-events:auto}body.loaded[data-route=project] #projects,body.loaded.project-visible #projects{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}.cut-corner-sm{clip-path:var(--cut-corner-sm)}.cut-corner-md{clip-path:var(--cut-corner-md)}.cut-corner-lg{clip-path:var(--cut-corner-lg)}.project-hero{background-size:cover;background-position:center;background-repeat:no-repeat}.btn-base{background:var(--color-white);border:none;border-radius:var(--radius-sm);clip-path:var(--cut-corner-sm);color:var(--color-black);font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-lg);padding-top:calc(var(--spacing-sm) + 2px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;letter-spacing:var(--letter-spacing-base);line-height:var(--line-height-tight);text-transform:uppercase;font-family:var(--font-family);transition:all .2s ease}.btn-base:hover:not(:disabled){background:var(--color-gray)}.btn-base:disabled{opacity:.5;cursor:not-allowed}.fullscreen-layout{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;overflow-y:auto;padding:var(--spacing-xl);display:flex;flex-direction:column;justify-content:center;align-items:center}.text-base{font-size:var(--font-size-base);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;line-height:var(--line-height-tight);font-family:var(--font-family)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-column-center{display:flex;flex-direction:column;align-items:center;justify-content:center}@media print{body *{display:none!important;visibility:hidden!important}body:before{display:none!important}body:after{content:"Hey, I see you're interested in printing this page. Reach out to j@jonasjohansson.se and I'll send you a PDF.";display:block!important;visibility:visible!important;color:#000;background:#fff;font-family:system-ui,sans-serif;font-size:18px;line-height:1.6;text-align:center;padding:4rem 2rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}header{position:fixed;top:var(--spacing-lg);top:calc(var(--spacing-lg) + env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:var(--z-header);pointer-events:auto;background:transparent;color:var(--color-black);-webkit-user-select:none;user-select:none;padding:calc(var(--spacing-sm) + 2px) var(--spacing-lg) var(--spacing-sm);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sm);text-align:center;mix-blend-mode:normal;font-family:var(--font-family);visibility:visible;opacity:1}.header-center{display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;position:relative;overflow:visible;touch-action:manipulation;cursor:pointer;pointer-events:auto}.header-content{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;pointer-events:auto}.header-title{background:var(--project-color, var(--color-white));color:var(--project-color-text, var(--color-black));clip-path:var(--cut-corner-md);transform:rotate(0);padding:calc(var(--spacing-xs) + 2px) var(--spacing-xl) var(--spacing-xs);transition:background-color .3s ease,color .3s ease,transform .4s cubic-bezier(.22,1,.36,1);position:relative;z-index:1}.header-subtitle{background:var(--project-color, var(--color-white));color:var(--project-color-text, var(--color-black));clip-path:var(--cut-corner-sm);transform:rotate(0);padding:calc(var(--spacing-xs) + 2px) var(--spacing-lg) var(--spacing-xs);margin-top:-4px;transition:background-color .3s ease,color .3s ease,transform .4s cubic-bezier(.22,1,.36,1);position:relative;z-index:2}html[data-project] .header-title{transform:rotate(var(--header-tilt-title, -2deg))}html[data-project] .header-subtitle{transform:rotate(var(--header-tilt-subtitle, 1.5deg))}.header-center:hover .header-title,.header-center:focus-visible .header-title,.header-center:hover .header-subtitle,.header-center:focus-visible .header-subtitle{background:var(--color-black);color:var(--color-white)}html[data-project] .header-center:hover .header-title,html[data-project] .header-center:focus-visible .header-title,html[data-project] .header-center:hover .header-subtitle,html[data-project] .header-center:focus-visible .header-subtitle{background:var(--color-white);color:var(--color-black)}.header-center:focus{outline:none}.header-center:focus-visible{outline:none}.header-center:focus-visible .header-title{outline:2px solid currentColor;outline-offset:2px}.header-title,.header-subtitle{font-size:16px;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;line-height:var(--line-height-tight)}.header-title{display:flex;align-items:center;gap:var(--spacing-xs);font-weight:500;margin:0;white-space:nowrap}.header-subtitle{white-space:nowrap}body.loading #content{visibility:hidden}#strips:has(.strip.selected) .filter-dropdown{opacity:0;pointer-events:none;transition:opacity .3s ease}.filter-dropdown{position:absolute;bottom:var(--spacing-xl);bottom:calc(var(--spacing-xl) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%) scale(1);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);max-height:50vh;max-height:50dvh;overflow-y:auto;scroll-margin:0;scroll-padding:0;contain:layout style paint;z-index:var(--z-filter)}.filter-dropdown-button,.filter-option{background:var(--project-color, var(--color-white));border:none;border-radius:var(--radius-sm);clip-path:var(--cut-corner-sm);color:var(--project-color-text, var(--color-black));transition:background-color .3s ease,color .3s ease;font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-lg);padding-top:calc(var(--spacing-sm) + 2px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);letter-spacing:var(--letter-spacing-base);text-transform:uppercase;font-family:var(--font-family);width:fit-content;white-space:nowrap;line-height:var(--line-height-tight);transition:none;transform:none}.filter-dropdown-button{order:2;pointer-events:auto;scroll-margin:0!important;scroll-padding:0!important}.filter-dropdown-button:focus{outline:none}.filter-dropdown-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.filter-dropdown-button:hover,.filter-option:hover{background:var(--color-black);color:var(--color-white)}html[data-project] .filter-dropdown-button:hover,html[data-project] .filter-option:hover{background:var(--color-white);color:var(--color-black)}.filter-dropdown-content{display:none;flex-direction:column;align-items:center;gap:var(--spacing-sm);white-space:nowrap;pointer-events:none;order:1;width:auto;transition:opacity .3s ease,transform .3s ease;opacity:0;transform:translateY(10px)}.filter-dropdown.open .filter-dropdown-content{display:flex;pointer-events:auto;opacity:1;transform:translateY(0)}.filter-separator{border:none;border-top:1px solid color-mix(in srgb,var(--color-black) 20%,transparent);margin:.25rem 0}.filter-option{border-radius:var(--radius-sm);flex-shrink:0;-webkit-user-select:none;user-select:none;scroll-margin:0;scroll-padding:0}.filter-option:focus{outline:none}.filter-option:focus-visible{outline:2px solid currentColor;outline-offset:2px}.filter-option:hover span{color:var(--color-white)}html[data-project] .filter-option:hover span{color:var(--color-black)}.filter-option input[type=checkbox]{display:none;position:absolute;opacity:0;pointer-events:none}.filter-option span{color:var(--project-color-text, var(--color-black));font-size:var(--font-size-base);white-space:nowrap;letter-spacing:var(--letter-spacing-base);text-transform:uppercase;line-height:var(--line-height-tight)}.filter-option:has(input[type=checkbox]:checked){background:var(--color-black)}.filter-option:has(input[type=checkbox]:checked) span{color:var(--color-white)}.filter-option.is-active{background:var(--color-black)}.filter-option.is-active span{color:var(--color-white)}.strip{display:block}body.filter-active .strip{display:none}body.filter-active .strip.filter-match{display:block}#strips{display:flex;flex-direction:row;width:100vw;max-width:100vw;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;backface-visibility:hidden;transition:opacity .3s ease;touch-action:pan-y;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;position:relative;margin:0;padding:0;top:0;background:var(--color-black);z-index:var(--z-strips);scroll-snap-align:start}#strips.dimmed{opacity:.3;pointer-events:none}#strips::-webkit-scrollbar{display:none}.strip{height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;flex:1 1 0;min-width:0;overflow:visible;cursor:pointer;margin-left:-1px;transform:translateY(105%);transition:transform .6s cubic-bezier(.22,1,.36,1),flex-grow .2s cubic-bezier(.25,.46,.45,.94);position:relative;z-index:var(--z-strips)}.strip.strip-visible{transform:translateY(0)}#strips.resizing .strip{transition:none}#strips[data-visible-count="1"] .strip{transition:transform .8s cubic-bezier(.34,1.56,.64,1)}.strip-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}.strip-image{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:background-size .6s cubic-bezier(.25,.46,.45,.94),background-position .6s cubic-bezier(.25,.46,.45,.94)}.strip:first-child{margin-left:0}.strip:hover,.strip.touch-hover,.strip:focus-visible{flex-grow:4;transform:translateZ(0) scale(1.02);transition-delay:0s;will-change:flex-grow,transform}.strip:focus{outline:none}.strip:focus-visible{outline:2px solid var(--color-white);outline-offset:-2px}.strip.selected{flex-grow:1000;transform:scale(1);transition:flex-grow 1s cubic-bezier(.4,0,.2,1) .5s}.strip.strip-visible.not-selected{transform:translateY(105%)!important;transition:transform .5s cubic-bezier(.5,0,1,.5)!important;pointer-events:none}.strip .strip-image{position:absolute;top:0;left:0;transform:translateZ(0);backface-visibility:hidden;transition:transform .8s cubic-bezier(.34,1.56,.64,1);will-change:transform}.strip:hover .strip-image,.strip.touch-hover .strip-image{transform:translateZ(0)}.strip.hidden{display:none}@media(prefers-reduced-motion:reduce){.strip{will-change:auto}}.project{width:100%;display:block;background-color:var(--bg-primary);flex-shrink:0;position:relative}.project.visible{display:block}.project-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.project.fade-in{animation:fadeIn .3s ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.text-small{font-size:var(--font-size-small);line-height:1.425;letter-spacing:var(--letter-spacing-base)}.text-medium{font-size:var(--font-size-medium);line-height:1.35;text-align:center}.text-block .text-large,.text-large{font-size:var(--font-size-large);line-height:1.15!important}.media-video{max-width:100%;height:auto}@media(max-width:768px){.text-small{font-size:1rem}.text-medium{font-size:1.4rem}.text-block .text-large,.text-large{font-size:2.2rem}}#projects{display:block;width:100%;min-height:100vh;position:relative;background:var(--project-accent-color-dark, var(--color-black))}body:has(#projects),body.project-visible{background:var(--project-accent-color-dark, var(--color-black))}#projects:not(:has(.project)){display:none;min-height:0}#projects.visible{display:block;width:100%;min-height:100vh}figure{margin:0;padding:0}.project-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--spacing-xl);row-gap:var(--spacing-3xl);grid-auto-flow:dense;width:100%;max-width:100%;padding:10rem var(--spacing-xl)}.project-grid>.media-item:first-child,.project-grid>.media-item.hero{overflow:hidden;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh;margin-top:-10rem;margin-left:calc(-1 * var(--spacing-xl));margin-right:calc(-1 * var(--spacing-xl));width:calc(100% + 2 * var(--spacing-xl));max-width:none;position:relative;scroll-snap-align:start}.project-grid>.media-item:first-child img,.project-grid>.media-item.hero img,.project-grid>.media-item:first-child video,.project-grid>.media-item.hero video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;min-height:100%;border-radius:0}.media-item{width:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:normal}.media-item+.media-item{margin-top:calc(-1 * var(--spacing-3xl) + var(--spacing-xl))}.media-item img,.media-item video{width:100%;height:auto;max-height:calc(100vh - 2 * var(--spacing-3xl));max-height:calc(100dvh - 2 * var(--spacing-3xl));object-fit:contain;display:block;border-radius:var(--radius-sm)}.text-block{max-width:50ch;margin:0 auto;line-height:1.5;text-align:left}.text-block a{color:var(--project-color, var(--color-black));text-decoration:underline}.text-block a:hover{opacity:.7}.text-block.text-medium{line-height:1.35}.text-block.text-large{max-width:40ch;text-align:left}.project-grid p{margin:0 0 1em}.project-grid p:last-child{margin-bottom:0}#about .text-block,#about .text-block.text-medium,[data-project=about] .text-block,[data-project=about] .text-block.text-medium{font-size:var(--font-size-small)!important;line-height:var(--line-height-base)}@media(max-width:768px){#about .text-block,#about .text-block.text-medium,[data-project=about] .text-block,[data-project=about] .text-block.text-medium{font-size:1rem!important}}.credits-block{font-size:.8rem;opacity:.7}.credits-list{list-style:none;padding:0;margin:0;text-align:left}.credits-list li{margin-bottom:.5rem}[style*=--col-start]{grid-column-start:var(--col-start)}[style*=--col-span]{grid-column-end:span var(--col-span)}.media-item.size-full{grid-column:1 / -1}.media-item.size-large{grid-column:2 / span 10}.media-item.size-left{grid-column:1 / span 7}.media-item.size-right{grid-column:6 / span 7}.media-item.size-half-left{grid-column:1 / span 6}.media-item.size-half-right{grid-column:7 / span 6}.media-item.size-small-left{grid-column:1 / span 5}.media-item.size-small-right{grid-column:8 / span 5}@media(min-width:1800px){.project-grid>.media-item:not(:first-child):not([class*=size-]){grid-column:2 / 12!important}.text-block{grid-column:1 / -1!important;max-width:80ch;margin-top:var(--spacing-3xl);margin-bottom:var(--spacing-3xl)}.text-block:has(+.text-block){margin-bottom:0}.text-block+.text-block{margin-top:0}.text-block.text-large{grid-column:1 / -1!important;max-width:60ch}.text-small{font-size:1.6rem}.text-medium{font-size:2.6rem}.text-block .text-large,.text-large{font-size:3.6rem}}@media(max-width:768px){.project-grid{row-gap:var(--spacing-2xl)}.media-item+.media-item{margin-top:calc(-1 * var(--spacing-2xl) + var(--spacing-xl))}[style*=--col-start]{grid-column-start:1}[style*=--col-span]{grid-column-end:span 12}.media-item.size-full,.media-item.size-large,.media-item.size-left,.media-item.size-right,.media-item.size-half-left,.media-item.size-half-right,.media-item.size-small-left,.media-item.size-small-right{grid-column:1 / -1}}#about{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:var(--color-black);color:var(--color-white);overflow:hidden;overflow-y:auto;transform:translateY(-100%);transition:transform .5s cubic-bezier(.4,0,.2,1);backface-visibility:hidden;overscroll-behavior:contain;z-index:200}#about.visible{transform:translateY(0)}#about[data-initial-about]{transform:translateY(0);transition:none}.about-container{height:100%;position:relative;display:flex}.about-text{width:50%;padding:0 var(--spacing-xl) var(--spacing-xl);overflow-y:auto;height:100%;display:flex;align-items:flex-end;container-type:size;container-name:about-text}.about-text-inner{max-width:min(50vw,700px)}.about-text-inner>*{margin:0;font-size:clamp(1rem,min(4cqw,2.2cqh),1.4rem);line-height:1.35;letter-spacing:var(--letter-spacing-base);font-weight:400;text-align:left}.about-text-inner>*+*{margin-top:.6em}.about-image{width:50%;height:100vh;height:100dvh;position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.about-image picture,.about-image img{width:100%;height:100%;display:block;position:relative;z-index:0}.about-image img{object-fit:cover;object-position:center center}#about a{text-decoration:underline}@media(max-width:768px){.about-container{flex-direction:column;overflow-y:auto;height:100%}.about-text{width:100%;order:2;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-lg);overflow-y:visible;height:auto;align-items:flex-start}.about-text-inner{max-width:100%;width:100%}.about-image{position:relative;width:100%;height:50vh;height:50dvh;order:1;flex-shrink:0}.about-image picture,.about-image img{height:100%}.about-text{container-type:inline-size}.about-text-inner>*{font-size:clamp(.7rem,3cqw,1rem);line-height:1.35}}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;z-index:var(--z-grain);pointer-events:none;opacity:.02;background-image:url(/assets/img/grain.png);background-size:200px 200px;background-repeat:repeat;mix-blend-mode:screen}