:root{--paper:#f7f6f1;--ink:#171717;--muted:#686868;--line:#202020;--yellow:#f3e451;--blue:#b9d7ff;--pink:#f6bdcf;--green:#c7e9c0;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC",sans-serif;overflow-x:hidden;transition:background .35s,color .35s}body.inverted{--paper:#171717;--ink:#f7f6f1;--muted:#b6b6b6;--line:#f7f6f1;--yellow:#b7a900;--blue:#264872;--pink:#75384d;--green:#36652e}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.shell{width:min(var(--max),calc(100% - 56px));margin:0 auto}.paper-grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}#doodle-trail{position:fixed;inset:0;z-index:90;width:100%;height:100%;pointer-events:none}.scroll-line{position:fixed;z-index:80;top:0;left:0;width:100%;height:3px}.scroll-line span{display:block;width:0;height:100%;background:var(--ink)}
.nav-wrap{position:fixed;z-index:70;top:18px;left:50%;transform:translateX(-50%);width:min(940px,calc(100% - 36px));height:58px;padding:7px 9px 7px 14px;display:flex;align-items:center;justify-content:space-between;border:2px solid var(--line);border-radius:100px;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);box-shadow:4px 4px 0 var(--ink)}.logo{display:flex;align-items:center;gap:8px;font:800 12px/1 ui-monospace,monospace;letter-spacing:.1em}.logo span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--yellow);color:#171717;border:2px solid #171717;font:900 17px sans-serif}.nav-wrap nav{display:flex;gap:28px;font-size:12px}.nav-wrap nav a{position:relative}.nav-wrap nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--ink);transform:scaleX(0);transition:.2s}.nav-wrap nav a:hover:after{transform:scaleX(1)}.invert-button{display:flex;gap:7px;align-items:center;padding:10px 15px;border:0;border-radius:100px;background:var(--ink);color:var(--paper);cursor:pointer;font-size:11px}
.hero{min-height:100vh;padding:145px 0 60px;display:grid;grid-template-columns:1.08fr .92fr;gap:65px;align-items:center;position:relative}.stamp{display:inline-block;margin-bottom:22px;padding:7px 12px;border:2px solid var(--line);transform:rotate(-3deg);font:800 10px ui-monospace,monospace;letter-spacing:.08em;background:var(--yellow);color:#171717}.overline,.section-label{font:700 11px/1.4 ui-monospace,monospace;letter-spacing:.1em}.overline{margin:0 0 20px;color:var(--muted)}h1{margin:0;font-size:clamp(50px,4.9vw,76px);line-height:1.03;letter-spacing:-.06em;font-weight:800}.scribble-name{position:relative;display:inline-block;margin-left:.08em}.scribble-name svg{position:absolute;left:0;bottom:-10px;width:100%;height:24px;overflow:visible}.scribble-name path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}.intro{max-width:650px;margin:35px 0 0;color:var(--muted);font-size:16px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:34px}.pill{display:inline-flex;align-items:center;gap:38px;padding:15px 20px;border:2px solid var(--line);border-radius:100px;font-size:13px}.pill-dark{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 30%,transparent)}.pill-dark:hover{background:var(--yellow);color:#171717}.text-link{font-size:13px;border-bottom:1px solid var(--line);padding-bottom:4px}.portrait-board{position:relative;min-height:610px;border:2px solid var(--line);border-radius:48% 52% 42% 58% / 52% 44% 56% 48%;background:var(--blue);box-shadow:10px 12px 0 var(--ink);overflow:hidden}.portrait{position:absolute;inset:4% 3% 0;width:94%;height:96%}.portrait path,.portrait ellipse{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.portrait .draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 2.6s ease forwards}.portrait .draw-2{animation-delay:.15s}.portrait .draw-3,.portrait .draw-4{animation-delay:.35s}.portrait .draw-5,.portrait .draw-6{animation-delay:.55s}.portrait .draw-7{animation-delay:.8s}.portrait .eye{fill:var(--paper);stroke:var(--line);stroke-width:4}.portrait .pupil{fill:var(--ink)}.portrait .accent-line{stroke:#ed5b36;stroke-width:4}@keyframes draw{to{stroke-dashoffset:0}}.drag-note{position:absolute;z-index:4;right:22px;top:30px;width:112px;height:91px;border:2px solid #171717;background:var(--yellow);color:#171717;box-shadow:4px 5px 0 #171717;transform:rotate(6deg);cursor:grab;font-size:12px}.drag-note b{font:800 10px ui-monospace,monospace}.drag-note:active{cursor:grabbing}.orbit-note{position:absolute;padding:7px 10px;border:2px solid #171717;background:var(--paper);color:#171717;font:700 9px ui-monospace,monospace}.note-one{left:18px;top:23%;transform:rotate(-7deg)}.note-two{right:19px;bottom:23%;transform:rotate(5deg)}.note-three{left:28px;bottom:11%;transform:rotate(-3deg)}.scroll-hint{position:absolute;left:0;bottom:26px;font:700 9px ui-monospace,monospace;letter-spacing:.09em}.scroll-hint span{display:inline-block;margin-left:10px;animation:bob 1.3s infinite}@keyframes bob{50%{transform:translateY(6px)}}
.ticker{overflow:hidden;padding:17px 0;border-block:2px solid var(--line);background:var(--yellow);color:#171717;transform:rotate(-1deg);width:102%;margin-left:-1%}.ticker div{width:max-content;white-space:nowrap;font:800 16px ui-monospace,monospace;animation:marquee 22s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}
.about,.work,.path{padding:150px 0}.section-label{display:flex;align-items:center;gap:10px}.section-label span{display:grid;place-items:center;width:31px;height:31px;border:2px solid var(--line);border-radius:50%;font-size:10px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin:45px 0 75px}.about h2,.work-heading h2,.path h2,.contact h2{margin:0;font-size:clamp(52px,7vw,96px);line-height:.98;letter-spacing:-.065em}.about-copy>p{font-size:20px;line-height:1.8;margin:0;color:var(--muted)}.tiny-formula{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:32px}.tiny-formula span,.tiny-formula strong{padding:8px 13px;border:2px solid var(--line);border-radius:100px;font-size:12px}.tiny-formula strong{background:var(--yellow);color:#171717}.skill-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;perspective:900px}.paper-note{position:relative;min-height:290px;padding:30px;border:2px solid var(--line);background:var(--paper);box-shadow:6px 7px 0 var(--ink);transition:transform .2s}.paper-note:nth-child(2){background:var(--pink);color:#171717;transform:rotate(1.5deg)}.paper-note:nth-child(3){background:var(--green);color:#171717;transform:rotate(-1deg)}.note-no{font:700 10px ui-monospace,monospace}.doodle-icon{width:72px;height:72px;margin:38px 0 25px;display:grid;place-items:center;border:3px solid currentColor;border-radius:46% 54% 55% 45%;font:800 31px ui-monospace,monospace}.paper-note h3{font-size:25px;margin:0 0 13px}.paper-note p{font-size:14px;line-height:1.7;margin:0;color:currentColor;opacity:.7}
.work{border-top:2px solid var(--line)}.work-heading{display:flex;align-items:end;justify-content:space-between;margin:45px 0 80px}.work-heading p{color:var(--muted);font:700 10px ui-monospace,monospace}.project-list{border-top:2px solid var(--line)}.project-row{border-bottom:2px solid var(--line)}.project-summary{width:100%;padding:30px 8px;display:grid;grid-template-columns:48px 145px 1fr 190px 35px;gap:14px;align-items:center;text-align:left;border:0;background:transparent;cursor:pointer}.project-summary:hover h3{transform:translateX(8px)}.project-index,.project-type{font:700 10px ui-monospace,monospace;color:var(--muted)}.project-summary h3{font-size:29px;margin:0;transition:.2s}.project-summary strong{font-size:14px}.project-summary i{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--line);border-radius:50%;font-style:normal;font-size:18px}.project-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;max-height:0;overflow:hidden;opacity:0;transition:max-height .7s cubic-bezier(.2,.8,.2,1),opacity .4s,padding .5s}.project-row.open .project-detail{max-height:720px;opacity:1;padding:10px 8px 45px}.project-copy{padding-left:207px}.project-copy p{font-size:17px;line-height:1.75}.project-copy ul{padding:0;list-style:none;color:var(--muted);font-size:13px;line-height:1.8}.project-copy li:before{content:"↳ ";color:var(--ink)}.project-copy small{color:var(--muted);font-size:10px}.sketch-panel{min-height:300px;padding:25px;display:grid;place-items:center;border:2px solid var(--line);background:var(--blue);position:relative;overflow:hidden}.sketch-panel svg{width:95%;height:240px}.sketch-panel path,.sketch-panel rect,.sketch-panel circle{fill:none;stroke:#171717;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.sketch-panel span{position:absolute;bottom:15px;font:800 9px ui-monospace,monospace;color:#171717;letter-spacing:.08em}.food-sketch{background:var(--pink)}.media-sketch{background:var(--green)}
.project-link{display:inline-flex;align-items:center;gap:18px;margin-top:12px;padding:10px 15px;border:2px solid var(--line);border-radius:100px;font:800 10px ui-monospace,monospace;letter-spacing:.04em;transition:.2s}.project-link:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}.flow-sketch{background:var(--yellow)}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--line);box-shadow:8px 8px 0 var(--ink)}.number{padding:35px;text-align:center;border-right:2px solid var(--line)}.number:last-child{border-right:0}.number strong{display:block;font-size:48px;letter-spacing:-.05em}.number span{font-size:11px;color:var(--muted)}
.path{padding-top:170px}.path-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;margin-top:55px}.path-title{position:sticky;top:125px;height:max-content}.path-title p{font-size:24px;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:#ed5b36}.steps{border-top:2px solid var(--line)}.step{display:grid;grid-template-columns:70px 1fr;gap:22px;padding:38px 0;border-bottom:2px solid var(--line)}.step>span{width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--line);border-radius:47% 53% 41% 59%;font:800 11px ui-monospace,monospace}.step small{font:700 10px ui-monospace,monospace;color:var(--muted)}.step h3{font-size:27px;margin:9px 0}.step p{color:var(--muted);margin:0;line-height:1.7}
.playground{padding-bottom:150px}.play-card{position:relative;min-height:570px;padding:60px;border:2px solid var(--line);background:var(--yellow);color:#171717;box-shadow:10px 10px 0 #171717;overflow:hidden}.play-card h2{font-size:clamp(62px,9vw,130px);line-height:.75;letter-spacing:-.07em;margin:50px 0 40px}.play-card h2 em{font-style:normal;font-size:.6em}.play-card p{max-width:390px;line-height:1.7}.racket{position:absolute;right:8%;top:10%;width:240px;height:400px;transform:rotate(23deg)}.racket ellipse,.racket path{fill:none;stroke:#171717;stroke-width:4}.ball{position:absolute;right:32%;top:14%;width:70px;height:70px;border:3px solid #171717;border-radius:50%;background:#f7f6f1;animation:ball 3s ease-in-out infinite}@keyframes ball{50%{transform:translate(-90px,260px) rotate(220deg)}}
.contact{padding:160px 0}.contact-head{text-align:center}.contact-head .section-label{justify-content:center}.contact-head h2{margin:40px 0 20px}.contact-head p{color:var(--muted)}.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:70px}.social-link{position:relative;min-height:220px;padding:28px;display:flex;flex-direction:column;border:2px solid var(--line);background:var(--paper);box-shadow:5px 6px 0 var(--ink);transition:.25s}.social-link:nth-child(2){background:var(--pink);color:#171717}.social-link:nth-child(3){background:var(--green);color:#171717}.social-link:nth-child(4){background:var(--blue);color:#171717}.social-link:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:10px 12px 0 var(--ink)}.social-link>span{font:700 10px ui-monospace,monospace}.social-link strong{font-size:25px;margin-top:auto}.social-link i{position:absolute;right:25px;top:25px;width:38px;height:38px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font-style:normal}.social-link small{margin-top:8px;opacity:.65}.link-note{text-align:center;color:var(--muted);font:700 10px ui-monospace,monospace;margin-top:28px}.footer{padding:30px 0;display:flex;justify-content:space-between;border-top:2px solid var(--line);font:700 9px ui-monospace,monospace;letter-spacing:.08em}.toast{position:fixed;left:50%;bottom:28px;z-index:120;padding:12px 18px;border:2px solid #171717;background:var(--yellow);color:#171717;box-shadow:4px 4px 0 #171717;transform:translate(-50%,30px);opacity:0;transition:.25s;font-size:12px}.toast.show{transform:translate(-50%,0);opacity:1}.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s,transform .75s}.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:950px){.hero{grid-template-columns:1fr;padding-top:130px}.portrait-board{min-height:560px}.about-grid,.path-layout{grid-template-columns:1fr}.path-title{position:static}.skill-notes{grid-template-columns:1fr}.paper-note{min-height:230px}.work-heading{display:block}.work-heading p{margin-top:25px}.project-summary{grid-template-columns:42px 110px 1fr 35px}.project-summary strong{display:none}.project-detail{grid-template-columns:1fr}.project-copy{padding-left:0}.numbers{grid-template-columns:1fr 1fr}.number:nth-child(2){border-right:0}.number:nth-child(-n+2){border-bottom:2px solid var(--line)}.social-grid{grid-template-columns:1fr}.racket{right:-2%}}
@media(max-width:620px){.shell{width:calc(100% - 32px)}.nav-wrap{height:54px;top:10px}.nav-wrap nav{display:none}.invert-button{padding:9px 12px}.hero{padding-top:105px;gap:42px}h1{font-size:50px}.intro{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.portrait-board{min-height:430px;box-shadow:6px 7px 0 var(--ink)}.orbit-note{font-size:7px}.drag-note{width:90px;height:74px}.scroll-hint{display:none}.about,.work,.path{padding:100px 0}.about h2,.work-heading h2,.path h2,.contact h2{font-size:48px}.about-grid{gap:34px;margin-bottom:50px}.about-copy>p{font-size:16px}.project-summary{grid-template-columns:35px 1fr 34px;padding:24px 2px}.project-type{display:none}.project-summary h3{font-size:21px}.project-row.open .project-detail{padding-bottom:28px;gap:25px}.sketch-panel{min-height:230px}.sketch-panel svg{height:180px}.numbers{box-shadow:5px 6px 0 var(--ink)}.number{padding:25px 10px}.number strong{font-size:36px}.path-layout{gap:30px}.play-card{padding:35px 25px;min-height:570px}.play-card h2{font-size:62px;line-height:.83}.racket{width:165px;height:300px;right:-5%;top:48%}.ball{width:48px;height:48px;right:42%;top:53%}.contact{padding:110px 0}.footer{gap:14px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}
@media(min-width:951px){.hero{grid-template-columns:1.14fr .86fr;gap:42px}}
.hero-line{display:block;white-space:nowrap;font-size:.88em}
.hero-title-line{display:block;white-space:nowrap}.hero-title-secondary{font-size:.85em}.hero-title-tertiary{font-size:.76em;letter-spacing:-.045em}