:root{--purple: #3e2ece;--greyblack: #312F37;--creme: #fdf7f9;--dustylav: #BFBAD0}@font-face{font-family:Roboto Mono;src:url(/assets/RobotoMono-Regular-44XoGH_Y.ttf)}@font-face{font-family:Roboto Mono Medium;src:url(/assets/RobotoMono-Medium-B0UKl2Zn.ttf);font-weight:500}@font-face{font-family:Roboto Mono Italic;src:url(/assets/RobotoMono-Italic-DEEXT_P3.ttf);font-style:italic,oblique}@font-face{font-family:Roboto Mono Light;src:url(/assets/RobotoMono-Light-Chav2xHn.ttf);font-weight:300}@font-face{font-family:Roboto Mono LightItalic;src:url(/assets/RobotoMono-LightItalic-DYuE74eB.ttf);font-weight:300;font-style:italic,oblique}@font-face{font-family:Roboto Mono Bold;src:url(/assets/RobotoMono-Bold-B8rsEFyH.ttf);font-weight:600}@font-face{font-family:Roboto Mono Bold Italic;src:url(/assets/RobotoMono-BoldItalic-DXnX3WMX.ttf);font-weight:600;font-style:italic,oblique}@font-face{font-family:Archivo;src:url(/assets/Archivo-Regular-Dv2uU1nf.ttf)}@font-face{font-family:Archivo Light;src:url(/assets/Archivo-Light-C4om4bkb.ttf);font-weight:300}@font-face{font-family:Archivo Bold;src:url(/assets/Archivo-Bold-E7yA2Da6.ttf);font-weight:600;font-style:bold}@font-face{font-family:Archivo Italic;src:url(/assets/Archivo-Italic-CqPsTlPc.ttf);font-weight:600;font-style:italic}body{background:radial-gradient(circle at 20% 30%,#fbeccf,#e8d9b5 30%,#bfbad0 70%,#9f99b0);background-attachment:fixed;margin:0;min-height:100vh}canvas{position:fixed;top:0;left:0}main{position:absolute;width:80vw;color:var(--greyblack);z-index:99;margin:0 auto;padding:40px;font-family:Roboto Mono;display:flex;flex-direction:column}nav{position:fixed;display:flex;flex-direction:row;justify-content:space-around;top:0;height:36px;padding:16px;margin-top:20px;background:var(--creme);box-shadow:4px 4px 18px var(--dustylav);border-radius:16px;align-items:center;z-index:1000}.navigation .links{display:flex;list-style-type:none;gap:16px;margin-left:20px}.navigation .links li{display:inline-block!important}a{text-decoration:none;font-weight:500;color:var(--purple);font-weight:700}a:hover{color:var(--greyblack);cursor:pointer}h2{font-size:1.2rem;color:var(--greyblack);font-weight:600}p{font-family:Archivo;font-size:1rem;color:var(--greyblack);font-weight:400;line-height:1.2rem}audio{margin-left:20px;height:40px}#hero{height:40rem;display:flex;justify-content:flex-start;align-items:flex-end}#hero-tagline{width:fit-content;max-width:50%;margin-right:5%;background-color:#fdf7f9e6;border-radius:20px;padding:1rem;box-shadow:4px 4px 18px var(--dustylav)}#hero-tagline>h2{color:var(--greyblack)}.projects-container{min-height:40rem;margin-top:2rem;margin-bottom:2rem}.tags-filter{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}.tags-filter button{padding:.5rem 1rem;background:var(--creme);color:var(--greyblack);border:1px solid var(--dustylav);border-radius:4px;cursor:pointer;transition:all .2s;font-family:Roboto;font-weight:600}.tags-filter button:hover{background:var(--purple);color:var(--creme)}.tags-filter button.active{background:var(--greyblack);color:var(--creme)}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;width:100%}.project-card{position:relative;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;width:100%;aspect-ratio:1 / 1.5;min-height:0;border-radius:8px;box-sizing:border-box}.project-media{width:100%;aspect-ratio:1 / 1;overflow:hidden;flex-shrink:0}.project-media img{width:100%;height:100%;object-fit:cover}.project-video{width:100%;height:100%;object-fit:fill}.project-caption{flex:1;min-height:0;background-color:#fffc;padding:1rem;display:flex;flex-direction:column}.project-description{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#312f37cc;color:var(--creme);opacity:0;transition:opacity .3s ease;transform:scale .3s ease;z-index:2;box-sizing:border-box}.description{color:var(--creme);padding:2rem}.project-card:hover .project-description{opacity:1}.project-card:hover{box-shadow:4px 4px 18px var(--dustylav);transform:scale(1.05)}.project-media{transition:transform .3s ease}.popup-content{background:#fff;max-width:900px;padding:2rem;border-radius:8px;position:relative}.popup:not(.hidden){display:block}body.popup-open main{filter:brightness(.7);transition:filter .3s ease}.close-text{position:absolute;top:20px;right:20px;cursor:pointer;color:#fff}body.showing-case-study #tags{display:none}.grid{height:24rem;width:24rem}.popup{background-color:#fff;border-radius:16px;border:solid 1px black;padding:20px;max-width:1080px;max-height:720px;z-index:110;position:fixed;width:80vw;margin:40px;top:35%;left:45%;transform:translate(-50%,-50%);box-shadow:0 4px 8px #0003;overflow-y:auto}.close-text{font-size:12px;color:gray;cursor:pointer;text-align:right}.hidden{display:none!important}.teaser{height:600px;display:flex}.row{display:flex;flex-direction:row;height:100%;max-height:600px}.portfolio-item>img{height:480px;width:auto}#cmm-video{width:1080px;height:720px}.container{position:relative;overflow:hidden;width:50%;padding-top:56.25%}.responsive-iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#e3dcf1}::-webkit-scrollbar-thumb:hover{background:#cec7db}#paintings>*{width:100vw;max-width:1080px}#moth-website{margin-top:240px}.react-filter .tags{display:flex;gap:10px;margin-bottom:20px}.react-filter .tag{padding:8px 16px;background:#f0f0f0;border:none;cursor:pointer}.react-filter .tag.active{background:#646cff;color:#fff}.grid{border:1px solid #ddd;transition:transform .2s}.grid:hover{transform:scale(1.02)}@media only screen and (max-width: 600px){body,html{margin:0;padding:0;box-sizing:border-box;width:100%;overflow-x:hidden}main{width:auto;padding:0;box-sizing:border-box;flex-direction:column;justify-content:center;margin:1rem}#hero-tagline{max-width:100%}nav .logo{margin-bottom:10px}nav .links{padding:0}nav ul{list-style:none;padding:0;margin:0}nav ul a{text-decoration:none;display:block;padding:8px 0}audio{align-self:flex-start}.projects-grid{display:flex;flex-direction:column;max-width:100vw}#portfolio{margin-top:80px}.container{position:relative;overflow:hidden;width:380px;height:auto}}