@font-face{font-family:Anton;src:url('assets/fonts/anton-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/dm-serif-display-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Caveat;src:url('assets/fonts/caveat-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--bg:#101012;--ink:#f3efe3;--muted:#b9b6af;--lime:#d4ed5c;--purple:#894aef;--coral:#ff795d;--line:#f3efe343;--pad:clamp(24px,4vw,70px);--font-sans:'DM Sans',Arial,sans-serif;--font-serif:'DM Serif Display',Georgia,serif;--grain:none;color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:24px}
html[data-mode='light']{--bg:#eee9dc;--ink:#171719;--muted:#5b5654;--line:#17171940;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:10;background-image:var(--grain);opacity:.075}
body>*{max-width:1800px;margin-left:auto;margin-right:auto}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}
button[hidden]{display:none}img{display:block;max-width:100%;height:auto}svg{display:inline-block;flex-shrink:0}h1,h2,h3,p{margin:0}button{border:0}
::selection{background:var(--purple);color:#fff}
:focus-visible{outline:3px solid var(--coral);outline-offset:6px}
.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}
.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}
.skip-link{position:fixed;left:18px;top:12px;z-index:20;padding:12px 18px;background:var(--lime);color:#101012;transform:translateY(-150%)}.skip-link:focus{transform:none}
.site-header{display:flex;align-items:center;gap:32px;padding:23px var(--pad) 22px;position:relative;z-index:4}
.wordmark{font-size:29px;font-weight:700;letter-spacing:-1.8px;line-height:1}
.main-nav{display:flex;gap:33px;margin-left:36px;font-size:14px}.main-nav a{padding:10px 0;transition:color .2s}.main-nav a:hover{color:var(--lime)}html[data-mode='light'] .main-nav a:hover{color:#6b31c5}
.mode-toggle{margin-left:auto;background:transparent;display:inline-flex;align-items:center;gap:8px;padding:9px 0;font-size:12px;color:var(--muted)}.mode-toggle>span:first-child{font-size:19px}
.main-nav a,.mode-toggle{min-height:44px;display:inline-flex;align-items:center}.mode-toggle{min-width:44px;justify-content:center}
.hand{font-family:Caveat,cursive;font-weight:400}
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:600}
.hero{position:relative;padding:20px var(--pad) 52px;isolation:isolate;min-height:570px}
.hero-copy{position:relative;z-index:2;width:65%;padding-top:2px}
.hero h1{font-family:Anton,Impact,'Arial Narrow',sans-serif;font-size:clamp(88px,15.15vw,246px);line-height:1.12;font-weight:400;letter-spacing:-.045em;white-space:nowrap}
.hero h1 span{position:relative;left:-.02em}
.role{position:relative;display:inline-block;font-family:var(--font-serif);font-size:clamp(56px,7.6vw,121px);line-height:1.12;margin-top:3px;letter-spacing:-.04em;color:#101012;isolation:isolate;padding:7px 19px 12px 12px;transform:rotate(-1.4deg)}
.role::before{content:'';position:absolute;inset:0 -8px;z-index:-1;background:var(--lime);clip-path:polygon(1% 5%,8% 3%,10% 6%,33% 0,53% 3%,79% 0,98% 4%,99% 17%,98% 46%,100% 73%,98% 97%,83% 96%,70% 100%,49% 96%,28% 100%,8% 95%,0 97%,1% 76%,0 42%)}
.role::after{content:'';position:absolute;left:18px;right:20px;bottom:13px;height:2px;background:#101012;transform:rotate(-.5deg)}
.hero-description{font-family:var(--font-serif);font-size:clamp(23px,2.9vw,44px);line-height:1.12;letter-spacing:-.025em;margin-top:18px;max-width:760px}.desktop-break{display:none}
.hero-actions{display:flex;align-items:center;gap:45px;margin-top:28px;position:relative}
.paint-button{background:var(--coral);color:#141414;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:58px;padding:17px 27px;font-family:var(--font-serif);font-size:21px;line-height:1;position:relative;isolation:isolate;clip-path:polygon(2% 15%,4% 8%,11% 3%,18% 5%,28% 0,43% 5%,63% 3%,80% 5%,94% 9%,98% 17%,97% 25%,100% 42%,98% 50%,99% 71%,96% 85%,88% 95%,68% 96%,53% 100%,37% 96%,17% 98%,6% 93%,2% 84%,0 66%,2% 51%,0 36%);transition:transform .22s,background .22s}
.paint-button svg{width:30px;height:22px}.paint-button:hover{transform:rotate(-2deg) translateY(-3px);background:#ff9a7e}
.hero-note{font-size:19px;line-height:1.04;letter-spacing:1.4px;transform:rotate(-12deg);color:var(--ink);padding-top:6px}
.hero-actions .paint-button{flex-shrink:0;white-space:nowrap}
.little-star{color:var(--lime);width:48px;height:48px;margin-left:-8px;transform:rotate(-17deg)}
.hero-art{position:absolute;width:53.5%;right:-1.5%;top:-51px;z-index:1;transform:translate3d(var(--art-x,0px),var(--art-y,0px),0) rotate(var(--art-rotate,0deg));transition:transform .65s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hero-art picture{display:block;width:100%}.hero-art img{width:100%;aspect-ratio:1;object-fit:contain}
.art-note{position:absolute;right:13%;top:15%;font-size:19px;line-height:1.04;letter-spacing:2px;transform:rotate(-13deg);color:var(--ink)}.art-note span{display:block;font-size:49px;line-height:.65;text-align:right;margin-top:5px}
.art-star{position:absolute;right:18%;top:3%;color:var(--lime);width:65px;height:65px;transform:rotate(-14deg)}
.hero-stroke{position:absolute;top:41%;left:27%;width:26%;height:14px;background:var(--coral);transform:rotate(1deg);z-index:3;clip-path:polygon(0 42%,16% 10%,70% 14%,93% 40%,100% 96%,84% 70%,51% 58%,13% 78%);pointer-events:none}
.work-section{padding:3px var(--pad) 42px;position:relative;z-index:2}
.section-line{display:flex;gap:20px;align-items:center;margin-bottom:24px}.section-line h2{font-family:var(--font-sans);font-weight:500;font-size:12px;letter-spacing:3px;text-transform:uppercase}.section-rule{height:1px;flex:1;background:var(--line)}.section-line>a{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;white-space:nowrap}.section-line>a:hover{color:var(--coral)}
.project-grid{display:grid;grid-template-columns:1.26fr 1fr .74fr;gap:25px}
.project-card{min-width:0}.project-art{display:block;aspect-ratio:1.77;position:relative;overflow:hidden;background:var(--purple);isolation:isolate}
.project-art img{width:92%;height:92%;object-fit:cover;position:absolute;left:4%;top:5%;transform:rotate(-2deg) scale(1.05);transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:saturate(.82)}
.project-art:hover img{transform:rotate(0) scale(1.07)}
.project-paper{position:absolute;inset:12% -9% -3% 10%;background:var(--lime);transform:rotate(16deg);z-index:-1}.cattle-project .project-art{background:var(--lime)}.cattle-project .project-paper{background:var(--coral);transform:rotate(-14deg);inset:5% 13% -12% -2%}.cattle-project .project-art img{transform:rotate(2deg) scale(1.05)}.cattle-project .project-art:hover img{transform:rotate(0) scale(1.07)}
.project-stamp{position:absolute;left:8px;bottom:10px;background:var(--ink);color:var(--bg);font-family:Caveat,cursive;line-height:1.1;font-size:18px;padding:7px 12px;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--coral)}.cattle-project .project-stamp{left:auto;right:9px;transform:rotate(5deg);box-shadow:3px 3px 0 var(--purple)}
.project-title{display:flex;align-items:center;gap:14px;padding-top:14px}.project-title h3{font-family:var(--font-serif);font-size:clamp(30px,3.65vw,57px);font-weight:400;letter-spacing:-1.8px;line-height:1}.project-title svg{width:20px;height:20px;margin-left:auto;transition:transform .2s}.project-title:hover svg{transform:translate(3px,-3px)}
.project-type{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;margin-top:12px}.project-description{font-size:13px;color:var(--muted);line-height:1.6;max-width:420px;margin-top:13px}
.maker-card{position:relative;display:flex;flex-direction:column;min-width:0;border-bottom:1px solid var(--line)}
.maker-art{width:100%;aspect-ratio:1.38;background:var(--purple);overflow:hidden;position:relative}.maker-art::before{content:'';position:absolute;inset:15% -20% -10% 25%;background:var(--lime);transform:rotate(-18deg)}.maker-art img{position:relative;width:115%;max-width:none;left:-13%;top:-8%;transform:rotate(8deg);transition:transform .4s}.maker-card:hover .maker-art img{transform:rotate(0) translateY(-5px)}
.maker-card h3{font-family:var(--font-serif);font-size:clamp(27px,2.65vw,41px);font-weight:400;line-height:1.02;letter-spacing:-1.2px;margin-top:14px}.maker-card-copy>p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:12px}.maker-link{display:flex;align-items:center;gap:12px;padding:17px 0;margin-top:4px;font-size:12px}.maker-link svg{width:34px;height:24px;margin-left:auto}
.concept-note{font-size:11px;line-height:1.7;color:var(--muted);margin-top:27px;max-width:850px}
.about-section{display:grid;grid-template-columns:1.12fr 1fr;gap:9%;padding:76px var(--pad) 86px;border-top:1px solid var(--line);margin-top:20px}
.about-heading h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(40px,4.4vw,68px);letter-spacing:-2px;line-height:1.03;margin-top:22px}.about-heading h2 em{font-style:normal;color:var(--lime)}html[data-mode='light'] .about-heading h2 em{color:#6c36bd}
.about-scribble{display:block;width:fit-content;line-height:1.05;letter-spacing:1px;font-size:22px;transform:rotate(-7deg);color:var(--coral);margin:31px 0 0 20px}
.about-copy{padding-top:35px}.about-copy p{font-size:20px;line-height:1.6;letter-spacing:-.3px}.about-copy p+p{margin-top:18px}.about-copy .about-small{font-size:14px;color:var(--muted);line-height:1.75;margin-top:25px}
.build-section{padding:10px var(--pad) 85px}.build-section .section-line .hand{font-size:24px;letter-spacing:0;transform:rotate(-7deg);color:var(--coral)}
.build-workbench{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:9%;padding:28px 0 0}
.build-keys{display:flex;align-items:flex-end;gap:13px;transform:rotate(-4deg);padding:8px 4px 20px}
.build-key{--key:#d4ed5c;display:flex;flex-direction:column;position:relative;align-items:flex-start;justify-content:space-between;flex:1;min-width:0;aspect-ratio:.85;padding:23px 19px 17px;background:var(--key);color:#141414;border-radius:18px;border:2px solid #111;box-shadow:0 8px 0 color-mix(in srgb,var(--key),#101012 28%),0 10px 0 #101012;transition:transform .14s,box-shadow .14s}
.build-key::before{content:'';position:absolute;inset:5px;border-radius:12px;border:1px solid #ffffff88;pointer-events:none}.key-apps{--key:var(--coral)}.key-extensions{--key:#b29ae9}.key-websites{--key:var(--lime)}
.key-letter{font-family:var(--font-sans);font-weight:700;font-size:clamp(43px,5vw,77px);line-height:1;letter-spacing:-4px}.key-label{font-size:11px;font-weight:600;line-height:1.3}.key-arrow{position:absolute;right:15px;top:22px;font-size:18px}
.build-key:hover,.build-key:active,.build-key[aria-pressed='true']{transform:translateY(7px);box-shadow:0 1px 0 color-mix(in srgb,var(--key),#101012 28%),0 3px 0 #101012}
.build-detail{min-height:217px}.build-detail .eyebrow{color:var(--muted)}.build-detail h3{font-family:var(--font-serif);font-size:38px;font-weight:400;letter-spacing:-1.3px;line-height:1.05;margin-top:18px}.build-detail p{font-size:15px;line-height:1.7;max-width:410px;color:var(--muted);margin-top:17px}.build-detail a{display:flex;gap:14px;align-items:center;font-size:12px;margin-top:22px;width:fit-content}.build-detail a svg{width:30px;height:20px}
.contact-section{position:relative;padding:68px var(--pad) 62px;background:var(--lime);color:#171719;isolation:isolate;overflow:hidden;clip-path:polygon(0 1%,11% 0,31% 1%,54% 0,79% 1%,100% 0,100% 100%,0 100%)}
.contact-section h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(65px,8.35vw,130px);line-height:1.05;letter-spacing:-.025em;margin-top:20px;position:relative;z-index:2}.contact-section h2 span{color:#6e35cd}
.contact-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:30px;position:relative;z-index:2}.email-link{font-family:var(--font-serif);font-size:clamp(25px,2.6vw,40px);letter-spacing:-1px;display:inline-flex;align-items:center;gap:25px}.email-link svg{width:22px;height:22px}.contact-bottom p{font-size:12px;line-height:1.6;margin-top:12px}.contact-button{flex-shrink:0}
.contact-star{position:absolute;right:-10px;top:51px;width:240px;height:240px;color:var(--purple);transform:rotate(15deg);opacity:.75;z-index:-1}
.site-footer{padding:27px var(--pad);display:flex;justify-content:space-between;gap:20px;font-size:11px;line-height:1.5;color:var(--muted)}.motion-toggle{background:transparent;font-size:11px;color:var(--muted);padding:0}.motion-toggle:hover,.site-footer a:hover{color:var(--ink)}
.site-footer button,.site-footer>a{min-height:44px;display:inline-flex;align-items:center}
html[data-motion='off'] *,html[data-motion='off'] *::before,html[data-motion='off'] *::after{animation:none!important;transition:none!important}html[data-motion='off']{scroll-behavior:auto}
@media(min-width:1800px){.hero h1{font-size:270px}.role{font-size:132px}.hero{min-height:710px}.hero-description{font-size:48px}.hero-art{top:-75px}.project-title h3{font-size:64px}}
@media(max-width:1250px){.hero{min-height:525px}.hero-copy{width:68%}.hero-art{width:57%;right:-4%;top:-25px}.hero-description{font-size:31px}.hero-actions{gap:30px}.little-star{width:38px;height:38px}.hero-stroke{top:40%;left:29%}.project-grid{gap:20px}.project-description{font-size:12px}.project-stamp{font-size:15px}.art-note{right:11%;top:11%;font-size:16px}.art-star{width:55px;height:55px;right:15%;top:0}.about-section{gap:7%}.about-copy p{font-size:18px}}
@media(max-width:1100px){.hero{min-height:540px;padding-top:34px}.hero-art{width:57%;top:19px;right:-3%}.hero-copy{width:68%}.hero h1{font-size:15vw}.role{font-size:8vw}.hero-description{max-width:480px;font-size:29px;line-height:1.2}.desktop-break{display:block}.hero-stroke{display:none}.hero-actions{gap:28px}.hero-note{font-size:17px}.little-star{display:none}.project-grid{grid-template-columns:1fr 1fr;gap:28px 23px}.project-title h3{font-size:44px}.maker-card{grid-column:1 / -1;flex-direction:row;gap:30px;align-items:center;border:1px solid var(--line);padding:14px 22px;overflow:hidden}.maker-art{width:165px;height:150px;aspect-ratio:auto;flex-shrink:0;background:none}.maker-art::before{display:none}.maker-art img{width:112%;top:-6%}.maker-card h3{font-size:35px;margin-top:0}.maker-card h3 br{display:none}.maker-card-copy>p br{display:none}.maker-card-copy{width:100%}.maker-link{margin-top:0;padding:10px 0;max-width:230px}.concept-note{margin-top:21px}.about-section{padding-top:65px;gap:5%}.about-heading h2{font-size:49px}.build-workbench{gap:7%;grid-template-columns:1.2fr 1fr}.build-key{padding:20px 15px 16px}.build-detail h3{font-size:34px}.contact-star{width:180px;height:180px;right:-28px;top:70px}}
@media(max-width:850px){.main-nav{margin-left:15px;gap:25px}.hero{min-height:520px;padding-top:26px;padding-bottom:48px}.hero h1{font-size:14.85vw}.hero-art{top:45px;width:58%;right:-5%}.hero-description{font-size:26px}.hero-actions{gap:20px}.hero-note{font-size:15px}.paint-button{font-size:19px;padding:17px 21px;min-height:54px;gap:18px}.paint-button svg{width:24px}.art-note{display:none}.art-star{right:18%;top:1%}.about-section{grid-template-columns:1fr 1fr;gap:8%;padding-top:57px;padding-bottom:62px}.about-heading h2{font-size:43px}.about-copy{padding-top:24px}.about-copy p{font-size:16px}.about-scribble{font-size:20px}.build-workbench{grid-template-columns:1fr;gap:30px;max-width:650px;margin:auto;padding-top:16px}.build-keys{max-width:520px}.build-key{aspect-ratio:1;padding:22px}.key-letter{font-size:66px}.key-label{font-size:13px}.build-detail{min-height:200px}.build-detail h3{font-size:36px}.contact-bottom{align-items:flex-start;flex-direction:column;gap:25px}.contact-section h2{font-size:10vw}.contact-section{padding-top:58px;padding-bottom:50px}.contact-star{width:150px;height:150px;top:35px;right:-38px}}
@media(max-width:740px){.project-grid{grid-template-columns:1fr;gap:30px}.project-art{aspect-ratio:1.75}.project-title h3{font-size:clamp(38px,7vw,54px)}.project-description{font-size:14px;max-width:none}.project-stamp{font-size:19px}.maker-card{grid-column:auto}.maker-card h3{font-size:34px}.concept-note{font-size:11px}.section-line{gap:14px}.section-line h2{font-size:11px;letter-spacing:2.5px}.section-line>a{font-size:10px;letter-spacing:1.1px}.about-section{grid-template-columns:1fr;gap:20px;padding-top:49px}.about-heading h2{font-size:clamp(40px,7.4vw,55px)}.about-scribble{display:none}.about-copy{padding-top:0;max-width:560px}.about-copy p{font-size:18px}.build-section{padding-bottom:64px}.email-link{font-size:30px}.site-footer{flex-wrap:wrap;align-items:center;font-size:11px}.site-footer p{flex-basis:100%}}
@media(max-width:620px){:root{--pad:24px}.site-header{padding-top:24px;padding-bottom:16px;gap:18px}.wordmark{font-size:28px}.main-nav{margin-left:auto;gap:19px;font-size:12px}.mode-toggle{margin-left:4px;font-size:10px;gap:5px}.mode-toggle>span:first-child{font-size:17px}.hero{display:flex;flex-direction:column;padding-top:26px;padding-bottom:32px;min-height:0}.hero-copy{width:100%;padding-top:0}.hero h1{font-size:clamp(75px,16.8vw,109px);letter-spacing:-.045em;line-height:1.1}.role{font-size:clamp(51px,10.8vw,69px);margin-top:6px;padding-top:6px;padding-bottom:12px;letter-spacing:-.04em}.role::after{bottom:12px}.hero-description{font-size:clamp(24px,5.6vw,34px);max-width:100%;margin-top:19px;line-height:1.17}.desktop-break{display:none}.hero-actions{gap:27px;margin-top:24px}.hero-note{font-size:17px}.paint-button{font-size:19px;padding:17px 23px;gap:16px}.hero-art{position:relative;width:116%;right:auto;margin:-19px -8% -16px;top:0;order:2}.art-note{display:block;right:12%;top:9%;font-size:16px}.art-star{right:19%;top:3%;width:46px;height:46px}.hero-stroke{display:none}.work-section{padding-top:10px;padding-bottom:39px}.section-line{margin-bottom:23px}.project-title{padding-top:16px}.project-title h3{font-size:43px}.project-type{font-size:10px;letter-spacing:2px}.project-description{font-size:13px;margin-top:12px}.maker-card{gap:14px;padding:13px}.maker-art{width:112px;height:135px}.maker-card h3{font-size:30px}.maker-card h3 br{display:block}.maker-card-copy>p{font-size:12px}.maker-link{font-size:11px;gap:8px}.maker-link svg{width:24px}.concept-note{line-height:1.8}.about-section{margin-top:0;padding:45px var(--pad) 52px}.about-heading .eyebrow{font-size:10px;letter-spacing:1.6px}.about-heading h2{font-size:44px;letter-spacing:-1.6px}.about-copy p{font-size:17px}.about-copy .about-small{font-size:13px;margin-top:20px}.build-section{padding-top:0}.build-section .section-line .hand{font-size:21px}.build-keys{gap:10px;transform:rotate(-3deg);padding-top:5px}.build-key{aspect-ratio:.85;padding:18px 12px 15px;border-radius:15px}.build-key::before{inset:4px;border-radius:10px}.key-letter{font-size:54px;letter-spacing:-3px}.key-label{font-size:11px}.key-arrow{font-size:15px;right:11px;top:19px}.build-detail h3{font-size:34px}.build-detail p{font-size:14px}.build-detail{min-height:213px}.contact-section{padding-top:46px;padding-bottom:45px}.contact-section h2{font-size:clamp(52px,11.65vw,73px);letter-spacing:-.02em;margin-top:20px}.contact-section h2 span{display:block}.contact-star{width:120px;height:120px;right:-35px;top:24px;opacity:.55}.contact-bottom{gap:22px;margin-top:26px}.email-link{font-size:clamp(23px,5.7vw,32px);gap:14px;letter-spacing:-.7px}.email-link svg{width:19px;height:19px}.contact-bottom p{font-size:11px;max-width:300px}.contact-button{font-size:19px}.site-footer{gap:20px;padding-top:24px;padding-bottom:27px}}
@media(max-width:380px){:root{--pad:20px}.main-nav{gap:14px;font-size:11px}.site-header{gap:14px}.mode-toggle [data-mode-label]{display:none}.hero h1{font-size:17.3vw}.role{font-size:12.6vw;padding-left:9px;padding-right:15px}.hero-description{font-size:24px}.hero-actions{gap:18px}.hero-note{font-size:15px}.paint-button{font-size:17px;padding:16px 19px;gap:14px;min-height:53px}.paint-button svg{width:23px}.project-title h3{font-size:36px}.project-stamp{font-size:17px}.maker-art{width:96px}.maker-card h3{font-size:27px}.maker-card-copy>p{font-size:11px}.section-line>a{font-size:9px;letter-spacing:.8px}.about-heading h2{font-size:39px}.build-key{padding:17px 9px 13px}.key-letter{font-size:46px}.key-arrow{right:8px;top:16px;font-size:13px}.build-detail h3{font-size:31px}.contact-section h2{font-size:12.2vw}.email-link{font-size:23px;gap:10px}.contact-star{width:95px;height:95px;right:-26px}}
@media(min-width:621px) and (max-width:850px){.hero-note{display:none}}
@media(max-width:620px){.hero-actions{gap:22px}.hero-actions .paint-button{padding-left:22px;padding-right:22px;font-size:18px;gap:14px}.hero-note{font-size:15px;letter-spacing:.8px}}
@media(max-width:380px){.mode-toggle{min-width:24px;margin-left:0}.hero-actions .paint-button{font-size:16px;padding-left:18px;padding-right:18px;gap:12px}.hero-actions{gap:18px}.hero-note{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-art{transform:none!important}}
/* Work list (Claude copy): each build is a row that floods with colour on hover, and a picture of the build follows the pointer */
.work-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.work-row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px) 44px;align-items:center;gap:12px 40px;padding:20px 16px 22px;border-top:1px solid var(--line);color:var(--ink);transition:color .25s}
.work-row::before{content:'';position:absolute;inset:-1px -6px;z-index:-1;background:var(--rc);transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.16,1,.3,1);clip-path:polygon(0 5%,9% 0,24% 4%,41% 0,58% 5%,77% 1%,92% 4%,100% 0,100% 100%,88% 96%,70% 100%,52% 95%,33% 100%,15% 96%,0 100%)}
.work-row:hover,.work-row:focus-visible,.work-row:active{color:var(--rt)}
.work-row:hover::before,.work-row:focus-visible::before,.work-row:active::before{transform:scaleX(1)}
.row-name{font-family:var(--font-serif);font-weight:400;font-size:clamp(40px,5.4vw,88px);line-height:.98;letter-spacing:-.035em;min-width:0;overflow-wrap:anywhere;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.work-row:hover .row-name,.work-row:focus-visible .row-name{transform:translateX(18px)}
.row-meta{display:grid;gap:8px;min-width:0}
.row-type{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase}
.row-desc{font-size:13px;line-height:1.55;color:var(--muted);transition:color .25s}
.work-row:hover .row-desc,.work-row:focus-visible .row-desc,.work-row:active .row-desc{color:inherit}
.row-arrow{grid-column:3;width:40px;height:30px;justify-self:end;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.work-row:hover .row-arrow,.work-row:focus-visible .row-arrow{transform:translateX(8px)}
.row-thumb{display:none}
.row-preview{position:fixed;left:0;top:0;z-index:6;width:clamp(260px,25vw,400px);pointer-events:none;will-change:transform}
.row-preview-card{padding:10px;background:var(--pc,var(--lime));opacity:0;transform:rotate(-6deg) scale(.86);transition:opacity .18s,transform .4s cubic-bezier(.16,1,.3,1);clip-path:polygon(1% 3%,12% 0,30% 2%,52% 0,71% 3%,89% 0,100% 2%,99% 30%,100% 62%,98% 97%,80% 100%,61% 97%,40% 100%,19% 97%,0 100%,2% 68%,0 35%)}
.row-preview.is-on .row-preview-card{opacity:1;transform:rotate(-3deg) scale(1)}
.row-preview img{width:100%;height:auto;filter:saturate(.9)}
@media(max-width:1100px){.work-row{grid-template-columns:minmax(0,1fr) minmax(0,260px) 40px;gap:12px 28px}}
@media(max-width:740px){.work-row{grid-template-columns:minmax(0,1fr) 84px;gap:10px 18px;padding:18px 6px 20px}.row-name{font-size:clamp(34px,9vw,48px)}.row-meta{grid-column:1;grid-row:2}.row-thumb{display:block;grid-column:2;grid-row:1 / 3;align-self:center;width:84px;height:84px;object-fit:cover;object-position:left top;border:4px solid var(--rc);transform:rotate(-3deg)}.row-arrow{display:none}.work-row:hover .row-name,.work-row:focus-visible .row-name{transform:translateX(8px)}.row-preview{display:none}}
@media(hover:none){.row-preview{display:none}}
/* Work groups (Claude copy): Websites, Apps and Chrome extensions, each with its own hover colour */
.work-group{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:0 48px;align-items:start}
.work-group+.work-group{margin-top:64px}
.group-name{position:sticky;top:24px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(30px,3vw,46px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;padding-top:22px}
.group-name::before{content:'';display:block;width:58px;height:14px;margin-bottom:16px;background:var(--rc);clip-path:polygon(0 30%,14% 0,60% 14%,100% 0,96% 72%,70% 100%,30% 86%,0 100%)}
.group-count{display:block;margin-top:12px;font-size:22px;letter-spacing:0;text-transform:none;color:var(--muted)}
.work-group .row-name{margin:0;font-size:clamp(34px,4.2vw,68px)}
.work-group .work-row{grid-template-columns:minmax(0,1fr) minmax(0,290px) 44px;gap:12px 32px}
@media(max-width:1100px){.work-group{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:0 28px}.work-group .work-row{grid-template-columns:minmax(0,1fr) minmax(0,230px) 40px;gap:12px 22px}}
@media(max-width:900px){.work-group{grid-template-columns:minmax(0,1fr)}.group-name{position:static;padding:0 0 18px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.group-name::before{display:none}.group-count{margin-top:0}.work-group+.work-group{margin-top:48px}}
@media(max-width:740px){.work-group .work-row{grid-template-columns:minmax(0,1fr) 84px;gap:10px 18px}.work-group .row-name{font-size:clamp(32px,8.6vw,46px)}}
/* About (Claude copy): portrait left, words right, both centred on one line */
.about-section{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,7%,120px);align-items:center}
.about-media{position:relative;justify-self:center;width:min(440px,100%)}
.about-portrait{display:block;width:100%;height:auto;transform:rotate(-3deg)}
.about-media .about-scribble{position:static;margin:22px 0 0 10%}
.about-text{max-width:620px}
.about-text h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(40px,4.4vw,68px);letter-spacing:-2px;line-height:1.03;margin-top:20px}
.about-text h2 em{font-style:normal;color:var(--lime)}html[data-mode='light'] .about-text h2 em{color:#6c36bd}
.about-text .about-copy{padding-top:0;margin-top:28px}
@media(max-width:850px){.about-section{grid-template-columns:minmax(0,1fr);gap:40px}.about-media{width:min(360px,80%)}.about-media .about-scribble{display:block}}
@media(max-width:620px){.about-media{width:min(300px,80%)}.about-text h2{font-size:clamp(38px,10vw,48px);letter-spacing:-1.4px}.about-media .about-scribble{font-size:18px;margin-top:18px}}