@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--black:#101111;--white:#f7f7f2;--muted:#959895;--lime:#d5ff5f}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;font-size:16px}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:7px}header{height:110px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:relative;z-index:10}.wordmark{font-size:27px;letter-spacing:-1.5px;font-weight:650}.wordmark span{font-size:12px;vertical-align:top;display:inline-block;margin:5px 0 0 3px;letter-spacing:0}nav{display:flex;gap:40px;align-items:center;font-size:14px}nav span{color:#90928d;font-size:12px;margin-left:5px}.nav-about{margin-left:35px;border-bottom:1px solid #676965;padding:8px 0}.eyebrow{font-size:12px;letter-spacing:1.7px;font-weight:550}.hero{padding:70px 5% 0;position:relative;overflow:hidden;min-height:1070px}.hero>.eyebrow{color:#b0b3ad;margin-bottom:35px}h1{font-family:'Manrope',sans-serif;font-size:clamp(64px,7.6vw,128px);font-weight:500;letter-spacing:-.07em;line-height:1.07;margin:0;position:relative;z-index:2}h1 em{font-style:normal;color:var(--lime)}.hero-note{display:flex;justify-content:space-between;align-items:center;width:215px;margin-top:35px;margin-left:auto;color:#afb1ac;font-size:14px;line-height:1.5}.hero-note a{width:46px;height:46px;border:1px solid #5c5f58;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--white);transition:background .2s}.hero-note a:hover{background:#343630}.hero-art{height:490px;position:relative;margin-top:-12px}.art{position:absolute;margin:0;box-shadow:0 25px 50px #0005;border:6px solid #30322f;border-radius:13px;overflow:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.art img{display:block;width:100%;height:100%;object-fit:cover}.art figcaption{position:absolute;bottom:0;background:#101111cc;backdrop-filter:blur(15px);padding:13px 18px;width:100%;font-size:12px}.art-vessel{width:57%;height:350px;left:17%;top:55px;transform:rotate(-7deg);z-index:2}.art-lil{width:31%;height:285px;right:-4%;top:142px;transform:rotate(9deg);z-index:3}.art-auto{width:33%;height:245px;left:-6%;top:211px;transform:rotate(-12deg);z-index:4}.art-auto img{object-position:top}.art:hover{transform:rotate(0deg) translateY(-15px);z-index:5}.intro{padding:95px 8% 110px;background:var(--white);color:var(--black);position:relative}.intro .eyebrow{display:block;margin-bottom:40px;color:#65675f}h2{font-family:'Manrope',sans-serif;font-size:clamp(40px,5.4vw,82px);font-weight:500;line-height:1.07;letter-spacing:-.055em;margin:0}.intro p{font-size:18px;line-height:1.6;color:#676960;margin:35px 0 0 44%}.skip{position:absolute;top:-100px;left:20px;background:var(--lime);color:black;padding:15px;z-index:100}.skip:focus{top:10px}@media(min-width:1700px){.hero{min-height:1200px}.hero-art{margin-top:20px;height:570px}.art-vessel{height:440px}.art-lil{height:360px}.art-auto{height:320px}}@media(max-width:700px){header{height:85px;padding:0 6%}nav{gap:22px}.nav-about{display:none}.wordmark{font-size:24px}.hero{padding:52px 6% 0;min-height:780px}.hero>.eyebrow{font-size:10px;letter-spacing:1px;max-width:260px;line-height:1.8;margin-bottom:26px}h1{font-size:clamp(48px,10.7vw,75px);line-height:1.12;letter-spacing:-.055em}.hero-note{margin-top:28px;width:180px}.hero-art{height:335px;margin-top:10px}.art-vessel{width:90%;left:5%;height:220px;top:40px;border-width:4px}.art-lil{width:47%;height:160px;right:-15%;top:190px;border-width:4px}.art-auto{width:57%;height:150px;left:-12%;top:202px;border-width:4px}.art figcaption{display:none}.intro{padding:65px 7%}.intro p{margin:25px 0 0;font-size:16px}.intro .eyebrow{margin-bottom:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;z-index:50}.project-nav{position:sticky;top:0;z-index:20;background:#f7f7f2ed;backdrop-filter:blur(20px);color:#1c1e18;border-top:1px solid #d5d7cf;border-bottom:1px solid #d5d7cf;display:flex;justify-content:space-between;gap:15px;padding:22px 8%;font-size:14px}.project-nav a{opacity:.55;white-space:nowrap;transition:opacity .2s}.project-nav a.active,.project-nav a:hover{opacity:1}.project-nav b{font-weight:400;font-size:12px;margin-right:10px}.project{position:relative;padding:70px 8% 28px;overflow:hidden;scroll-margin-top:60px}.project-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:75px;gap:25px}.brand{font-size:36px;font-weight:650;letter-spacing:-2px}.vessel{background:#daefdd;color:#17382c}.vessel-brand{font-size:50px;font-weight:500;letter-spacing:-3px}.project-copy{display:grid;grid-template-columns:1.3fr 1fr;gap:10%;position:relative;z-index:2;align-items:start}.project-copy h2{font-size:clamp(40px,4.8vw,72px)}.project-copy p{font-size:20px;line-height:1.5;margin:0 0 18px}.project-copy .secondary{font-size:16px;opacity:.7}.text-link{display:inline-flex;gap:30px;justify-content:space-between;border-bottom:1px solid currentColor;font-size:14px;padding:9px 0;margin-top:12px}.text-link span{transition:transform .2s}.text-link:hover span{transform:translate(3px,-3px)}.vessel-stage{position:relative;height:640px;margin:60px -2% 40px}.vessel-main{position:absolute;left:0;top:12px;width:83%;height:480px;object-fit:cover;border-radius:6px;box-shadow:0 30px 60px #17382c18;transform:rotate(-3deg)}.vessel-detail{position:absolute;width:40%;height:315px;object-fit:cover;right:-3%;top:300px;border:6px solid #ecf5e9;border-radius:8px;box-shadow:0 22px 60px #17382c30;transform:rotate(7deg)}.floating-label{position:absolute;font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-1px;bottom:32px;left:4%}.project-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:25px;border-top:1px solid #17382c35;font-size:12px;line-height:1.6}.project-bottom>span{letter-spacing:1px;opacity:.65}.project-bottom a{opacity:.7}.project-bottom a:hover{opacity:1;text-decoration:underline}.mogl{background:#ff673f;color:#321b13}.mogl-brand{font-weight:800;letter-spacing:-3px;font-size:45px}.mogl-brand span{font-size:13px;vertical-align:top;letter-spacing:0;margin:7px}.mogl-stage{height:710px;position:relative;margin-top:65px}.mogl-big{font-family:'Manrope',sans-serif;font-size:clamp(70px,10vw,170px);font-weight:800;letter-spacing:-.07em;line-height:.92;position:absolute;top:115px;left:-3%;color:#7c220e;opacity:.65}.mogl-web{margin:0;position:absolute;height:610px;width:38%;max-width:460px;right:24%;top:10px;overflow:hidden;border:5px solid #fff4e4;border-radius:7px;transform:rotate(6deg);box-shadow:0 25px 50px #6f260950}.mogl-web img{width:100%;display:block}.mogl-identity{position:absolute;margin:0;width:31%;right:-7%;height:510px;top:150px;border:5px solid #ffeed9;border-radius:7px;overflow:hidden;transform:rotate(-6deg);box-shadow:0 25px 50px #6f260945}.mogl-identity img{width:100%;display:block}.mogl-sticker{position:absolute;left:23%;top:480px;background:#f4ec57;border:1px solid #321b13;border-radius:50%;width:155px;height:155px;display:grid;align-content:center;text-align:center;transform:rotate(-14deg);font-size:21px;font-weight:600;line-height:1.1;box-shadow:0 6px 0 #321b13}.auto{background:#101719;color:#f4f7f3}.auto .project-top .eyebrow{color:#b2c3bf}.auto-brand{width:220px;height:auto}.auto .project-bottom{border-color:#ffffff30}.auto-stage{height:720px;position:relative;margin-top:80px}.ambient{position:absolute;inset:0 -20%;background:radial-gradient(ellipse at 50% 45%,#005c523b,transparent 65%);pointer-events:none}.browser-frame{position:absolute;width:91%;left:1%;top:0;background:#121519;overflow:hidden;border:1px solid #76888877;border-radius:14px;transform:perspective(1600px) rotateY(-8deg) rotateX(4deg) rotateZ(-2deg);box-shadow:0 45px 60px #0009}.browser-frame img{width:100%;display:block}.browser-bar{display:flex;justify-content:space-between;padding:13px 20px;font-size:12px;background:#202627;color:#a0aca6}.browser-bar span:first-child{color:#687671;letter-spacing:3px}.auto-caption{position:absolute;bottom:0;right:0;background:#d7ff64;color:#192219;padding:25px 35px;transform:rotate(5deg);font-family:'Manrope',sans-serif;font-size:30px;line-height:1.15;letter-spacing:-1px;box-shadow:0 10px 35px #0004}.auto-caption em{font-style:normal;font-weight:700}.lil{background:#d1c7ff;color:#251449}.lil-brand{font-size:30px;font-weight:750;letter-spacing:-1.5px}.lil-brand span{font-size:44px;display:inline-block;margin-left:12px;vertical-align:middle}.lil-stage{height:710px;margin:75px -3% 20px;position:relative}.lil-website{position:absolute;left:5%;top:0;width:80%;border:7px solid #ede7ff;border-radius:8px;transform:rotate(-4deg);box-shadow:0 25px 50px #24163a40}.lil-people{position:absolute;right:-1%;top:350px;width:40%;border:8px solid #fffcf1;transform:rotate(8deg);box-shadow:0 20px 45px #24163a40}.lil-product{position:absolute;left:-5%;top:395px;width:31%;border:8px solid #fffcf1;transform:rotate(-9deg);box-shadow:0 20px 45px #24163a30}.lil-sticker{position:absolute;bottom:15px;left:35%;font-size:24px;line-height:1.1;font-weight:600;transform:rotate(-6deg)}.about{padding:120px 8% 90px;position:relative;background:var(--white);color:var(--black);overflow:hidden}.about .eyebrow{margin-bottom:35px}.about-text{max-width:510px;margin:40px 0 0 44%;color:#62665d;line-height:1.7;font-size:18px}.about-text strong{font-weight:500;color:#131612}.signature{font-family:Georgia,serif;font-style:italic;position:absolute;left:10%;bottom:100px;font-size:115px;letter-spacing:-10px;transform:rotate(-12deg)}.writing{padding:100px 8%;background:#eceee6;color:var(--black)}.writing-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.writing-head h2{font-size:clamp(38px,4vw,62px);margin-top:28px}.featured-posts{margin-top:65px;display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.post-card{border-top:1px solid #b1b5a9;padding:23px 0;display:block}.post-card time,.post-card .post-type{font-size:12px;color:#656b5e;text-transform:uppercase;letter-spacing:1px}.post-card h3{font-size:24px;line-height:1.3;letter-spacing:-.7px;font-weight:500;margin:25px 0;max-width:330px}.post-card>span{font-size:14px}.post-card:hover h3{text-decoration:underline;text-underline-offset:5px}footer{padding:40px 5%;display:flex;justify-content:space-between;align-items:center;gap:25px;color:#afb4a8;font-size:12px}footer .wordmark{color:var(--white)}footer>a:last-child{font-size:14px}.blog-body{background:var(--white);color:var(--black)}.blog-body header{border-bottom:1px solid #dddfd5}.blog-body nav span{color:#6f7368}.blog-body footer{background:var(--black)}.blog-heading{padding:90px 8% 60px}.blog-heading h1{font-size:clamp(55px,7vw,105px);margin:25px 0}.blog-heading p{font-size:18px;color:#60655a;line-height:1.6}.blog-list{margin:0 8% 100px}.blog-row{display:grid;grid-template-columns:140px 1fr 35px;gap:25px;align-items:start;border-top:1px solid #c9cdc0;padding:30px 0}.blog-row time{font-size:13px;color:#62675b;padding-top:6px}.blog-row h2{font-size:26px;line-height:1.3;letter-spacing:-.7px}.blog-row p{color:#707669;line-height:1.6;font-size:15px;margin:12px 0 0;max-width:680px}.blog-row:hover h2{text-decoration:underline;text-underline-offset:5px}.article-wrap{max-width:890px;padding:70px 35px 110px;margin:auto}.back-link{font-size:14px;display:inline-block;border-bottom:1px solid;padding-bottom:5px;margin-bottom:55px}.article-meta{display:flex;gap:15px;flex-wrap:wrap;color:#6c7363;font-size:12px;letter-spacing:1px;text-transform:uppercase}.article-wrap h1{font-size:clamp(38px,5vw,66px);letter-spacing:-.045em;line-height:1.12;margin:25px 0 40px}.article-content{font-size:18px;line-height:1.8;color:#343b2d}.article-content p{margin:1.3em 0}.article-content img{max-width:100%;height:auto;display:block;margin:25px auto}.article-content iframe{width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0}.article-content a{color:#375c20;text-decoration:underline;overflow-wrap:anywhere}.article-content blockquote{font-size:23px;line-height:1.6;border-left:3px solid #687b47;padding-left:28px;margin:35px 0}.article-content h2,.article-content h3{font-size:28px;line-height:1.3;letter-spacing:-1px;margin:35px 0 20px}.article-content li{margin:12px 0}.original-link{display:block;margin-top:55px;padding-top:25px;border-top:1px solid #c9cdc0;font-size:14px;color:#727969}.article-next{display:flex;justify-content:space-between;gap:25px;margin-top:40px;font-size:14px}.archive-note{font-size:14px!important}.article-content [style]{max-width:100%}.article-content table{max-width:100%;display:block;overflow:auto}
@media(min-width:1600px){.vessel-stage{height:770px}.vessel-main{height:590px}.vessel-detail{height:360px;top:350px}.auto-stage{height:900px}.lil-stage{height:900px}.lil-people{top:460px}.lil-product{top:510px}}
@media(max-width:900px){.project{padding:55px 6% 25px}.project-top{margin-bottom:45px}.project-copy{grid-template-columns:1.15fr 1fr;gap:6%}.project-copy p{font-size:18px}.project-copy .secondary{font-size:15px}.vessel-stage{height:470px}.vessel-main{height:340px}.vessel-detail{height:220px;top:230px}.floating-label{font-size:21px;bottom:15px}.mogl-stage{height:540px}.mogl-web{height:490px;right:25%;width:42%}.mogl-identity{height:380px;width:35%;top:130px}.mogl-big{font-size:90px;top:90px}.mogl-sticker{top:365px;left:16%;width:120px;height:120px;font-size:18px}.auto-stage{height:530px}.auto-caption{font-size:25px}.lil-stage{height:560px}.lil-people{top:275px}.lil-product{top:320px}.lil-sticker{font-size:21px}.brand{font-size:30px}.auto-brand{width:190px}.project-nav{padding:20px 6%;gap:16px}.project-nav b{display:none}.project-bottom{font-size:11px}.about{padding:80px 7%}.writing{padding:75px 7%}.featured-posts{gap:25px}.post-card h3{font-size:21px}footer>span{max-width:180px;line-height:1.5}}
@media(max-width:600px){.project-nav{overflow-x:auto;justify-content:flex-start;gap:26px;padding:19px 6%;font-size:12px}.project-top .eyebrow{max-width:180px;font-size:10px;letter-spacing:1px;line-height:1.7}.project-top{margin-bottom:40px}.brand,.lil-brand{font-size:23px;letter-spacing:-1px;white-space:nowrap}.vessel-brand,.mogl-brand{font-size:34px}.lil-brand span{font-size:25px;margin-left:5px}.auto-brand{width:155px}.project-copy{display:block}.project-copy h2{font-size:44px;margin-bottom:27px}.project-copy p{font-size:18px;max-width:450px}.project-copy .secondary{font-size:16px}.text-link{margin-top:8px}.vessel-stage{height:370px;margin-top:40px}.vessel-main{width:100%;height:260px;left:0}.vessel-detail{width:52%;height:170px;top:185px;right:-3%;border-width:4px}.floating-label{left:2%;bottom:15px;font-size:19px}.project-bottom{flex-direction:column;gap:8px;font-size:11px}.mogl-stage{height:490px;margin-top:40px}.mogl-big{font-size:70px;left:-8%;top:80px}.mogl-web{width:49%;right:21%;height:380px;top:20px;border-width:3px}.mogl-identity{width:42%;right:-14%;top:100px;height:335px;border-width:3px}.mogl-sticker{width:100px;height:100px;font-size:16px;left:9%;top:340px}.auto-stage{height:355px;margin-top:40px}.browser-frame{width:110%;left:-5%;border-radius:8px}.browser-bar{font-size:8px;padding:9px 12px}.auto-caption{font-size:21px;bottom:0;padding:17px 23px}.lil-stage{height:395px;margin-top:45px}.lil-website{width:100%;left:0;border-width:4px}.lil-people{width:51%;top:195px;right:-4%;border-width:5px}.lil-product{width:41%;top:240px;left:-4%;border-width:5px}.lil-sticker{font-size:17px;bottom:0;left:43%}.about-text{margin:30px 0 0;font-size:17px}.signature{position:static;display:block;font-size:80px;margin:15px 0 0 15px;letter-spacing:-6px}.writing-head{display:block}.writing-head .text-link{margin-top:25px}.featured-posts{display:block;margin-top:40px}.post-card{padding:23px 0 30px}.post-card h3{max-width:100%;margin:15px 0;font-size:24px}footer{padding:35px 6%;flex-wrap:wrap}footer>span{order:3;max-width:100%;width:100%;font-size:12px}.blog-heading{padding:55px 7% 35px}.blog-list{margin:0 7% 65px}.blog-row{grid-template-columns:1fr 24px;gap:14px}.blog-row time{grid-column:1/-1}.blog-row h2{font-size:25px}.blog-row p{font-size:14px}.article-wrap{padding:40px 7% 70px}.article-wrap h1{font-size:39px}.article-content{font-size:17px}.article-content blockquote{font-size:20px}.back-link{margin-bottom:38px}}

@media(min-width:901px){.auto-stage{height:clamp(720px,59vw,1050px)}}