@font-face{font-family:'Inter Tight';src:url('/portfolio/kinetic-type-studio/demo/fonts/inter-tight.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--space:5vw;--body-size:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--color-ash) var(--color-void-canvas)}
body{margin:0;background:var(--color-void-canvas);color:var(--color-bone-white);font:400 var(--body-size)/1.5 'Inter Tight',sans-serif}
button,a{font:inherit;color:inherit}a{text-decoration:none;text-underline-offset:.2em}button{cursor:pointer}a:hover{text-decoration:underline;text-decoration-color:var(--color-arterial-red)}
:focus-visible{outline:2px solid var(--color-arterial-red);outline-offset:7px}::selection{background:var(--color-arterial-red);color:var(--color-absolute-black)}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}img{display:block;max-width:100%}
.site-header{position:absolute;inset:26px var(--space) auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:550;max-width:14ch;line-height:1.2}.brand::before{content:'';width:8px;height:8px;background:var(--color-arterial-red);border-radius:50%;flex:none}
.site-header a,.text-link,.motion-toggle{min-height:44px;display:inline-flex;align-items:center;gap:12px;padding-block:10px;font-size:18px}
.site-header h1{font:inherit;letter-spacing:0}.text-link{border-bottom:1px solid var(--color-iron)}.text-link svg{width:18px;height:18px;flex:none}
.skip-link{position:fixed;top:-90px;left:var(--space);z-index:20;padding:12px;background:var(--color-bone-white);color:var(--color-absolute-black)}.skip-link:focus{top:10px}
.intro{height:650vh;position:relative}.particle-stage{position:sticky;top:0;height:100vh;height:100svh;isolation:isolate;overflow:hidden}
.particle-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;touch-action:pan-y}.particle-canvas canvas{width:100%;height:100%;display:block}
.scene-caption{position:absolute;inset:auto var(--space) 8vh;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;pointer-events:none}
.scene-caption h2{font-size:clamp(38px,4.7vw,68px);max-width:12ch}.scene-caption p{max-width:27ch;font-size:18px;color:var(--color-ash);text-wrap:pretty}
.scene-dots{position:absolute;left:var(--space);bottom:30px;display:flex;gap:8px}.scene-dots span{width:30px;height:2px;background:var(--color-iron)}.scene-dots .active{background:var(--color-arterial-red)}
.motion-toggle{position:absolute;bottom:17px;right:var(--space);border:0;background:none;font-size:16px;color:var(--color-pebble);text-decoration:underline;text-decoration-color:var(--color-iron);text-underline-offset:4px;z-index:2}
.static-scenes{padding:140px var(--space) 0}.static-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.4fr);gap:5vw;align-items:center;margin-bottom:110px}.static-scene img{width:100%;height:auto;aspect-ratio:1440/1120;object-fit:contain}.static-scene h2{font-size:clamp(36px,4vw,60px);margin-bottom:22px}.static-scene p{color:var(--color-ash);font-size:18px;max-width:30ch}
.js-motion .static-scenes{display:none}.motion-only{display:none}.js-motion .motion-only{display:block}.no-motion .intro,.intro:has(.static-scenes):not(.js-motion .intro){height:auto}
.work{position:relative;z-index:2;padding:100px var(--space) 130px;background:var(--color-void-canvas);scroll-margin-top:24px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px}.section-heading h2{font-size:clamp(44px,6vw,86px);max-width:10ch}.section-heading p{color:var(--color-ash);max-width:31ch;font-size:18px}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:84px 4vw}.work-card{display:block;min-width:0}.work-card figure{overflow:hidden;aspect-ratio:4/3;background:var(--color-smoke-plate)}.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.work-card:hover img{transform:scale(1.035)}
.work-caption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:22px}.work-caption h3{font-size:30px}.work-caption span{color:var(--color-pebble);font-size:16px}.work-card:hover h3{text-decoration:underline;text-decoration-color:var(--color-arterial-red);text-underline-offset:8px}
.outro{height:380vh;position:relative}.outro .scene-caption h2{max-width:13ch}.outro .static-scenes{padding-top:50px}.no-motion .outro{height:auto}
.site-footer{position:relative;z-index:3;background:var(--color-charcoal-plate);padding:76px var(--space) 32px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:64px}.footer-top p{color:var(--color-ash);max-width:28ch}.footer-wordmark{font-size:clamp(64px,12.6vw,190px);line-height:.94;letter-spacing:-.035em;font-weight:500;margin:0 0 68px}.footer-wordmark span{display:block}.footer-wordmark span:last-child{color:var(--color-pebble)}.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:24px;border-top:1px solid var(--color-iron);font-size:16px;color:var(--color-pebble)}.footer-bottom a{font-size:16px}
.study-page{padding:180px var(--space) 90px}.study-title{font-size:clamp(56px,8vw,112px);margin-bottom:32px}.study-intro{display:flex;justify-content:space-between;gap:40px;margin-bottom:60px}.study-intro p{max-width:50ch;font-size:20px;color:var(--color-ash)}.study-intro span{font-size:18px;color:var(--color-pebble)}.study-image{width:100%;height:auto;max-height:80vh;object-fit:cover}.study-note{max-width:64ch;margin:48px 0 64px;font-size:18px;color:var(--color-ash)}
@media(max-width:700px){:root{--space:6vw}.site-header{top:18px;gap:20px}.site-header a{font-size:16px}.brand{max-width:13ch;gap:8px}.scene-caption{bottom:12vh;display:block}.scene-caption h2{font-size:clamp(34px,9vw,48px);max-width:14ch;margin-bottom:14px}.scene-caption p{max-width:29ch;font-size:18px}.scene-dots{bottom:34px}.scene-dots span{width:22px}.motion-toggle{bottom:20px}.static-scenes{padding-top:125px}.static-scene{display:block;margin-bottom:80px}.static-scene h2{font-size:36px;margin:16px 0}.static-scene img{aspect-ratio:1/1}.work{padding-top:70px;padding-bottom:90px}.section-heading{display:block;margin-bottom:40px}.section-heading h2{font-size:48px;margin-bottom:24px}.work-grid{grid-template-columns:1fr;gap:48px}.work-caption{gap:16px;margin-top:18px;flex-wrap:wrap}.work-caption h3{font-size:28px}.work-caption span{font-size:16px}.footer-top{align-items:flex-start;margin-bottom:48px}.footer-top p{max-width:16ch}.footer-wordmark{font-size:clamp(60px,15vw,104px);margin-bottom:52px}.footer-bottom{display:block}.footer-bottom a{display:inline-flex;margin-top:18px;min-height:44px;align-items:center}.study-page{padding-top:150px}.study-title{font-size:52px}.study-intro{display:block;margin-bottom:36px}.study-intro span{display:block;margin-bottom:20px}.study-intro p{font-size:18px}.study-image{min-height:270px}.site-footer{padding-top:50px}.outro .scene-caption{bottom:12vh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}


main{position:relative;z-index:1}
.particle-world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.particle-world canvas{display:block;width:100%;height:100%}
.js-motion .work{background:transparent}
.work .section-heading{position:relative}
.work-intro{max-width:31ch}
.gallery-motion{position:static;min-height:44px;margin-top:12px;padding:10px 0}
.js-motion .gallery-motion{display:inline-flex}
.js-motion .work-caption{position:relative}
.js-motion .work-card img{transition:none;transform:scale(1.18)}
@media(hover:hover) and (pointer:fine){.no-motion .work-card:hover img{transform:scale(1.035)}}
@media(hover:none){.work-card:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.work-card:hover img{transform:none}}




.site-footer .footer-wordmark{margin-bottom:32px}
.footer-contact-block{margin-bottom:40px}.footer-contact{display:flex;flex-wrap:wrap;gap:24px;margin:0;font-style:normal}
.footer-contact a{display:flex;flex:1 1 16rem;min-width:0;min-height:44px;flex-direction:column;align-items:flex-start;gap:8px;padding-block:4px}
.footer-contact-label{font-size:16px;line-height:1.5;color:var(--color-pebble)}
.footer-contact-value{max-width:100%;font-size:clamp(20px,1.8vw,28px);font-weight:500;line-height:1.35;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--color-iron);text-underline-offset:6px}
.footer-contact a:hover{text-decoration:none}.footer-contact a:hover .footer-contact-value{text-decoration-color:var(--color-arterial-red)}
.footer-contact-note{font-size:16px;line-height:1.5;color:var(--color-pebble);margin-top:20px}
@media(max-width:700px){.footer-contact-block{margin-bottom:32px}.footer-contact{flex-direction:column;gap:24px}.footer-contact a{flex-basis:auto}.footer-contact-value{font-size:22px}}


:root{--ease-link:cubic-bezier(.23,1,.32,1);--duration-link:280ms}
.link-motion .link-ink,.motion-toggle.link-ink{position:relative}
.link-motion .link-roll,.link-motion .link-roll-copy{font:inherit;color:inherit;letter-spacing:inherit}
.link-motion .link-roll{display:inline-block;max-width:100%;vertical-align:bottom;overflow:hidden}
.link-motion .link-roll-copy{display:block;position:relative}
.link-roll-copy::after{content:attr(data-copy);position:absolute;inset:100% 0 auto;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit}
.link-motion .link-ink::after,.motion-toggle.link-ink::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--color-arterial-red);transform:scaleX(0);transform-origin:right}
.motion-toggle.link-ink::after{bottom:8px}
.text-link .link-ink::after{bottom:-11px}
.link-motion-ready .link-motion,.link-motion-ready .link-motion:hover,.link-motion-ready .link-motion .link-ink,.link-motion-ready .work-card:hover h3{text-decoration:none}
.link-motion-ready .link-motion .link-ink::after,.link-motion-ready .motion-toggle.link-ink::after{transition:transform 200ms var(--ease-link)}
.link-motion-ready .link-hovered .link-ink::after,.link-motion-ready .motion-toggle.link-hovered::after{transform:scaleX(1);transform-origin:left;transition-duration:var(--duration-link)}
.link-motion:focus-visible .link-ink::after,.motion-toggle.link-motion:focus-visible::after{transform:scaleX(1);transition:none}
.link-motion-ready .footer-contact-value{border-bottom:1px solid var(--color-iron);padding-bottom:5px}
.link-motion-ready .footer-contact-value::after{bottom:-1px}
.link-motion-ready .motion-toggle{text-decoration:underline;text-decoration-color:var(--color-iron)}
.link-motion-ready .motion-toggle:hover{text-decoration-color:var(--color-arterial-red)}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.link-roll-copy{transform:none!important}.link-roll-copy::after{visibility:hidden}}