@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#09080e;--fg:#f2eef5;--muted:#95909e;--pink:#ff52c7;--line:#ffffff19}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--pink);outline-offset:6px}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;border-bottom:1px solid var(--line);background:#09080eea;backdrop-filter:blur(20px);position:sticky;top:0;z-index:20}.wordmark{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:700;line-height:1;letter-spacing:-2px;position:relative}.wordmark span{color:var(--pink);margin-left:3px;font-size:31px}.wordmark small{display:block;font-size:8px;letter-spacing:5px;margin-top:6px}nav{display:flex;gap:36px}nav a{font-size:13px;color:#a6a0b2;padding:12px 0;position:relative}nav a.active{color:white}nav a.active:after{content:'';position:absolute;bottom:0;left:0;width:16px;height:2px;background:var(--pink)}.contact{font-size:12px;border:1px solid #ffffff35;border-radius:30px;padding:13px 20px}.contact span{margin-left:22px;color:var(--pink)}.hero{height:min(800px,calc(100svh - 100px));min-height:620px;position:relative;overflow:hidden}#art{position:absolute;width:100%;height:100%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#09080e 2%,#09080eee 21%,#09080e30 58%,transparent 100%);pointer-events:none}.hero-copy{position:relative;padding:115px 5.5% 90px;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;display:flex;align-items:center;gap:10px;line-height:1.6}.eyebrow i{width:6px;height:6px;background:var(--pink);border-radius:50%;box-shadow:0 0 15px var(--pink)}h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:500;margin:0}h1{font-size:clamp(66px,7.7vw,118px);line-height:1.01;letter-spacing:-7px;margin:29px 0}h1 em{font-style:normal;background:linear-gradient(100deg,#ff94da,#ff53c4 50%,#ae78ff);background-clip:text;color:transparent}.hero-copy p{font-size:15px;line-height:1.9;color:#a6a0b0;margin-bottom:34px}.primary{display:inline-flex;gap:40px;align-items:center;background:#f0eaf3;color:#151019;padding:17px 24px;font-size:12px;border-radius:4px;font-weight:600;transition:background .2s,transform .2s}.primary:hover{background:var(--pink);transform:translateY(-3px)}.primary span{font-size:19px}.hero-bottom{position:absolute;bottom:26px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#827b91}.art-caption{position:absolute;right:5.5%;bottom:100px;display:flex;align-items:center;gap:20px;font-size:8px;letter-spacing:1.5px;color:#9a82ab}.art-caption button{background:none;border:1px solid #ffffff20;border-radius:20px;padding:8px 12px;font-size:9px;letter-spacing:0;color:#a7a0b6}.section{padding:100px 5.5%;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px}.section-heading .eyebrow{color:var(--pink);margin-bottom:25px}h2{font-size:clamp(36px,4vw,59px);line-height:1.1;letter-spacing:-2.5px}.section-heading p{font-size:14px;color:var(--muted);line-height:1.8;max-width:300px;margin:0 0 3px}.filters{display:flex;gap:10px;margin:38px 0 30px}.filters button{border:1px solid transparent;background:none;padding:9px 18px;color:var(--muted);border-radius:30px;font-size:12px}.filters button.selected{background:#221722;color:#ffc0ed;border-color:#ff6ac338}.filters sup{margin-left:5px;font-size:8px}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.project{background:transparent;border:0;text-align:left;padding:0;min-width:0}.cover{height:340px;position:relative;overflow:hidden;background:#1c1129;border-radius:5px;isolation:isolate}.cover:after{content:'';position:absolute;inset:0;border:1px solid #ffffff13;border-radius:5px;pointer-events:none}.project:hover .cover-art{transform:scale(1.06) rotate(4deg)}.cover-art{position:absolute;inset:0;transition:transform .8s;display:flex;align-items:center;justify-content:center}.cover .tag{position:absolute;left:20px;top:20px;border:1px solid #ffffff30;border-radius:20px;padding:7px 10px;font-size:8px;letter-spacing:1px;background:#100b1955;z-index:2}.cover .index{position:absolute;bottom:18px;left:20px;font-size:9px;letter-spacing:2px;color:#ffffff88}.cover .arrow{position:absolute;right:18px;bottom:18px;font-size:24px}.sound{background:radial-gradient(ellipse at 45% 35%,#953797,#261031 55%,#100b19)}.disc{width:230px;height:230px;border-radius:50%;background:repeating-radial-gradient(circle,#201226 0 2px,#6a306e 3px,#26172d 4px);box-shadow:15px 25px 50px #0008,inset 0 0 20px #ffc4f050;transform:rotate(-30deg) rotateY(25deg);position:relative}.disc:before{content:'';position:absolute;inset:33%;border-radius:50%;background:linear-gradient(45deg,#fe7dca,#aa4ee1);box-shadow:0 0 22px #ff8adf55}.disc:after{content:'';position:absolute;inset:48%;background:#26172d;border-radius:50%}.motion{background:radial-gradient(ellipse at 60% 30%,#8173b3,#3e315b 45%,#1d152c)}.blob{width:185px;height:185px;border-radius:42% 58% 63% 37% / 49% 35% 65% 51%;background:radial-gradient(circle at 32% 25%,#ffe7f9,#ed92d4 30%,#a254ae 65%,#3d266b);box-shadow:20px 40px 40px #0a051a88,inset -12px -15px 20px #2c144a55;transform:rotate(-15deg);position:relative}.blob:after{content:'• •';position:absolute;color:#3f224a;font-size:40px;letter-spacing:15px;left:52px;top:53px;transform:rotate(10deg)}.play{background:radial-gradient(ellipse at 55% 25%,#774dd4,#291c5a 65%,#171126)}.game-shape{width:215px;height:130px;background:linear-gradient(140deg,#d5c2ff,#8d69e7 65%,#5630a1);border-radius:42px 42px 55px 55px;transform:rotate(-20deg);box-shadow:12px 25px 0 #382359,20px 45px 35px #08051d99;display:flex;align-items:center;justify-content:space-around}.game-shape b{font-size:60px;color:#392b59;line-height:1}.game-shape span{display:grid;grid-template-columns:14px 14px;gap:7px;transform:rotate(-25deg)}.game-shape i{width:14px;height:14px;background:#ff9bdc;border-radius:50%;box-shadow:2px 3px 0 #814b9c}.project-meta{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:8px;letter-spacing:1.1px;color:#ad8db4}.project h3{font-size:24px;letter-spacing:-.7px;margin-top:10px}.project p{color:#797280;font-size:12px;margin-top:8px}.manifesto{display:grid;grid-template-columns:1fr 2fr .5fr;gap:40px;position:relative;background:linear-gradient(115deg,#100b16,#09080e 65%)}.manifesto>.eyebrow{align-self:start;color:#a78aad}.manifesto h2{font-size:43px;margin-bottom:28px}.manifesto h2 span{color:#746b7e}.manifesto p{font-size:14px;line-height:1.9;color:#9f96aa;max-width:500px}.text-link{font-size:12px;display:inline-block;margin-top:20px;border-bottom:1px solid #ff52c770;padding-bottom:8px}.signature{font-size:140px;color:#e478d6;transform:rotate(-12deg);font-family:serif;font-style:italic;text-shadow:0 0 60px #c22e9699;align-self:center}.closing{text-align:center;padding-top:95px;padding-bottom:100px}.closing .eyebrow{justify-content:center;color:#96829e}.closing h2{font-size:clamp(70px,10vw,145px);letter-spacing:-7px;margin:30px 0}.closing h2 span{color:var(--pink)}.closing>a{font-size:15px;color:#b8afc1}.closing>a span{color:var(--pink);margin-left:25px}footer{padding:35px 5.5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:10px;color:#77717e}.footer-brand{font-size:19px;font-weight:700;color:#eee;letter-spacing:-1px}dialog{background:#15101d;color:var(--fg);border:1px solid #604066;border-radius:12px;padding:50px;max-width:650px;width:90%;box-shadow:0 0 100px #b9349830}dialog::backdrop{background:#030207d9;backdrop-filter:blur(12px)}dialog .close{position:absolute;right:16px;top:10px;background:none;border:0;font-size:30px}dialog h2{margin:20px 0;font-size:40px}dialog p{color:#b1a6bd;line-height:1.8}dialog audio,dialog video{width:100%;margin-top:20px}.skip{position:fixed;top:-100px;z-index:100;background:white;color:black;padding:12px}.skip:focus{top:0}body.filtered .hero{display:none}body.filtered .work{border-top:0;min-height:70vh}body.filtered .projects{grid-template-columns:repeat(3,1fr)}.cover img{width:100%;height:100%;object-fit:cover} @media(min-width:1600px){header,.section,footer{padding-left:max(5.5%,calc((100vw - 1440px)/2));padding-right:max(5.5%,calc((100vw - 1440px)/2))}}@media(max-width:900px){header{height:85px}nav{gap:20px}.contact{display:none}.hero{min-height:650px}.hero-copy{padding-top:120px}h1{letter-spacing:-4px}.cover{height:270px}.disc{width:170px;height:170px}.blob{width:150px;height:150px}.game-shape{width:165px;height:110px}.manifesto{grid-template-columns:1fr 2fr}.signature{display:none}.section{padding-top:70px;padding-bottom:70px}.project h3{font-size:20px}.project-meta{font-size:7px}}@media(max-width:600px){header{height:80px;padding:0 6%}.wordmark{font-size:26px}.wordmark span{font-size:24px}nav{gap:16px}nav a{font-size:11px}.hero{height:730px;min-height:0}.hero-copy{padding:78px 6% 0}.hero .eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:66px;letter-spacing:-4px}.hero-copy p{font-size:13px}.hero-shade{background:linear-gradient(180deg,#09080e44,#09080e99 50%,transparent)}.art-caption{bottom:65px;left:6%;right:6%;justify-content:space-between}.hero-bottom{font-size:7px;letter-spacing:1px}.section{padding:60px 6%}.section-heading{display:block}.section-heading p{margin-top:25px}.projects,body.filtered .projects{grid-template-columns:1fr;gap:34px}.cover{height:365px}.disc{width:230px;height:230px}.blob{width:185px;height:185px}.game-shape{width:215px;height:130px}.project h3{font-size:26px}.project-meta{font-size:8px}.filters{gap:3px;justify-content:space-between}.filters button{padding:9px 12px;font-size:11px}.manifesto{display:block}.manifesto h2{font-size:35px;margin-top:28px}.closing h2{letter-spacing:-4px}footer{flex-wrap:wrap;font-size:9px}footer>span:nth-child(2){display:none}dialog{padding:35px 25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Official Jonttu Studio logo */
.wordmark{display:flex;align-items:center;flex-shrink:0}.brand-logo{display:block;width:156px;height:auto}@media(max-width:600px){.brand-logo{width:112px}header{gap:12px}nav{gap:12px}}@media(max-width:360px){.brand-logo{width:94px}nav{gap:9px}nav a{font-size:10px}}