:root{--paper:#f8f7f4;--ink:#0e0e0d;--muted:#6b6966;--line:#ceccc7;--sans:'DM Sans','PingFang SC','Microsoft YaHei',sans-serif;--serif:'Newsreader','Songti SC','STSong',serif;--hand:'Patrick Hand','Kaiti SC',cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #176349;outline-offset:6px}h1,h2,h3,p,figure{margin:0}h2,h3{font-family:var(--serif);font-weight:500}h2{font-size:60px;line-height:1}em{font-family:var(--serif);font-weight:500}svg{display:block}svg path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}button{border:0;background:none}.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;padding:0!important;border:0!important}.skip-link{position:fixed;left:20px;top:-70px;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:100}.skip-link:focus{top:14px}.site-header{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:25px 32px;background:var(--paper)}.wordmark{font-family:var(--serif);font-size:32px;font-weight:500;line-height:1.25}.site-header nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}.site-header nav a{padding:9px 0}.site-header nav a:hover{text-decoration:underline;text-underline-offset:5px}.mobile-language,.menu-toggle{display:none!important}.button{min-height:40px;padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid var(--ink);font-size:14px;font-weight:500;line-height:20px;transition:background-color .2s,color .2s}.button:hover{background:#e9e7e1}.button-dark{background:var(--ink);color:var(--paper)}.button-dark:hover{background:#34342f;color:#fff}.button svg{width:16px;height:16px;stroke-width:1.6;flex:none}.small-lead{font-size:18px;margin-bottom:12px}.object-art{display:block;background-image:url('assets/objects/raymond-objects-20261003.webp');background-size:300% 200%;background-repeat:no-repeat;width:100%;aspect-ratio:1}.art-laptop{background-position:0 0}.art-racket{background-position:50% 0}.art-plant{background-position:100% 0}.art-dumbbell{background-position:0 100%}.art-coffee{background-position:50% 100%}.art-paper{background-position:100% 100%}
/* One continuous horizontal world. The hero is the first part of this track. */
.brain{height:720vh;position:relative}.brain-viewport{height:100vh;position:sticky;top:0;overflow:hidden}.brain-track{position:relative;width:570vw;height:100vh;will-change:transform}.brain-thread{position:absolute;inset:0;width:570vw;height:100vh;pointer-events:none;color:var(--ink);overflow:visible}.brain-thread path{stroke-width:3;vector-effect:non-scaling-stroke}.brain-thread ellipse{fill:var(--ink)}.hero{position:absolute;left:0;top:0;width:100vw;height:100vh}.knot-wrap{position:absolute;left:30.5vw;top:9vh;width:46vw;height:63vh}.knot-wrap canvas,.knot-toggle{position:absolute;inset:0;width:100%;height:100%}.knot-toggle{z-index:2}.knot-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:360px;line-height:1}.canvas-ready .knot-fallback{display:none}.hero-note{position:absolute;left:64.8vw;top:11.5vh;max-width:225px;font-size:14px;line-height:1.45;color:var(--muted)}.hero-note svg{position:absolute;width:35px;height:29px;left:-43px;top:1px;stroke-width:1.3}.hero h1{position:absolute;left:32px;bottom:32px;font-size:48px;font-weight:600;line-height:1;letter-spacing:-1.2px}.hero h1 em{font-size:48px;font-weight:600;letter-spacing:-.5px}.hero-welcome{position:absolute;right:32px;bottom:32px;text-align:right;font-size:14px}.hero-welcome p{margin-bottom:15px}.hero-actions{display:flex;gap:8px;justify-content:flex-end}.interests,.values,.journey,.process{display:contents}.interest-copy{position:absolute;left:114vw;top:42vh;width:50vw;text-align:center}.interest-copy>p:last-child{font-size:18px;color:var(--muted);margin-top:16px}.interest-object{position:absolute;display:block;width:16vw;transition:transform .25s;z-index:2}.interest-object:hover{transform:rotate(-4deg) translateY(-5px)}.interest-laptop{left:104vw;top:14vh}.interest-plant{left:101vw;top:55vh}.interest-coffee{left:122vw;top:64vh}.interest-paper{left:134vw;top:13vh}.interest-racket{left:149vw;top:63vh;width:18vw}.interest-dumbbell{left:162vw;top:25vh;width:17vw}.values>h2{position:absolute;left:181vw;top:18vh;width:360px}.value{position:absolute;display:flex;align-items:center;gap:10px;z-index:2}.value .object-art{width:18vw;flex:none}.value-copy{width:21vw}.value-tools .value-copy{position:relative;isolation:isolate}.value-tools .value-copy:before{content:"";position:absolute;inset:-12px;background:var(--paper);z-index:-1}.value h3{font-size:36px;line-height:1.05;margin-bottom:12px}.value p{font-size:16px;color:var(--muted);max-width:280px}.value:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}.value-space{left:199vw;top:53vh}.value-tools{left:222vw;top:18vh}.value-people{left:258vw;top:56vh}.timeline{list-style:none;margin:0;padding:0}.milestone{position:absolute;width:15vw;font-size:16px;top:48vh}.milestone:nth-child(odd){transform:translateY(-100%);padding-bottom:72px}.milestone:nth-child(even){padding-top:75px}.milestone:before{content:'';position:absolute;left:0;width:1px;height:56px;background:#9d9a93}.milestone:after{content:'';position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink)}.milestone:nth-child(odd):before{bottom:0}.milestone:nth-child(odd):after{bottom:-3px}.milestone:nth-child(even):before{top:0}.milestone:nth-child(even):after{top:-3px}.milestone-1{left:302vw}.milestone-2{left:320vw;top:47vh}.milestone-3{left:338vw;top:49vh}.milestone-4{left:356vw;top:48vh}.milestone-5{left:374vw;top:43vh}.milestone-6{left:392vw;top:44vh}.milestone h3{font-family:var(--sans);font-size:18px;line-height:1.3;margin-bottom:6px}.milestone p{color:var(--muted);max-width:190px;line-height:1.35}.milestone time{display:block;margin-top:12px;color:var(--muted);font-size:14px}.ownership{position:absolute;left:312vw;top:79vh;display:flex;align-items:center;gap:80px;width:90vw}.ownership-title{font-family:var(--serif);font-size:46px;line-height:1.02;min-width:530px}.ownership>p:last-child{color:var(--muted);max-width:360px;font-size:16px}.process>h2{position:absolute;left:429vw;top:17vh;width:440px}.process-labels{position:absolute;left:445vw;top:36vh;width:38vw;height:40vh;font-family:var(--hand);font-size:22px}.process-labels span{position:absolute;background:var(--paper);padding:3px 9px}.process-labels span:nth-child(1){left:24%;top:-7%}.process-labels span:nth-child(2){right:0;top:10%}.process-labels span:nth-child(3){right:-3%;bottom:13%}.process-labels span:nth-child(4){left:27%;bottom:-5%}.process-labels span:nth-child(5){left:0;top:38%}.bridge{position:absolute;left:513vw;top:38vh;width:52vw;text-align:center}.bridge h2{margin-bottom:28px}.bridge .button{gap:12px}
/* Three selected projects, following the reference's sticky introduction. */
.work{position:relative;border-top:1px solid var(--ink);padding:370px 32px 100px;scroll-margin-top:0}.work-grid{display:grid;grid-template-columns:calc(36.25vw - 96px) minmax(0,1fr);gap:64px;align-items:start}.work-intro{position:sticky;top:120px}.section-label{font-size:14px;margin-bottom:27px}.work-intro h2{margin-bottom:24px}.work-description{max-width:285px;font-size:16px;line-height:1.5;color:var(--muted)}.filter-label{font-size:14px;margin-top:32px;margin-bottom:12px}.project-filters{display:flex;gap:8px;flex-wrap:wrap;max-width:350px}.project{margin-bottom:82px;scroll-margin-top:112px}.project[hidden]{display:none}.project-cover{display:block;aspect-ratio:4/3;overflow:hidden;background:#eae5da}.project-screens{display:flex;justify-content:center;align-items:center;gap:2.2%;width:100%;height:100%;padding:5.5% 6.2%}.project-screens img{width:28.65%;height:auto;display:block;max-height:100%;object-fit:contain;transition:transform .45s}.project-cover:hover .project-screens img:nth-child(1){transform:translateY(-7px)}.project-cover:hover .project-screens img:nth-child(3){transform:translateY(7px)}.cover-nopaper{background:#ece6db}.project-info{display:flex;align-items:flex-start;justify-content:space-between;gap:35px;padding-top:23px}.project-meta{font-size:13px;color:var(--muted);margin-bottom:8px}.project h3{font-size:36px;line-height:1.15}.project h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.project-description{font-size:16px;line-height:1.5;color:var(--muted);margin-top:10px;max-width:655px}.project-outbound{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ink);flex:none;margin-top:25px}.project-outbound svg{width:17px;height:17px;stroke-width:1.5}.project-outbound:hover{background:var(--ink);color:var(--paper)}.more-work{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);padding:0 0 17px;font-size:18px}.more-work svg{width:20px;height:20px;stroke-width:1.4}.more-work:hover{text-decoration:underline;text-underline-offset:5px}
/* A personal closing at the same scale as the opening. */
.hi{position:relative;min-height:760px;height:100vh;padding:22vh 4.5vw 0;overflow:hidden}.hi-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hi-thread path{stroke-width:3;vector-effect:non-scaling-stroke}.hi-copy{position:relative;z-index:2;max-width:780px}.hand-note{position:absolute;left:0;top:-49px;font-family:var(--hand);font-size:18px;transform:rotate(-10deg)}.hand-note svg{position:absolute;width:33px;height:25px;left:-31px;top:16px;stroke-width:1}.hi h2{font-size:96px;line-height:.9;letter-spacing:-2px}.hi-description{font-size:18px;line-height:1.25;color:var(--muted);margin-top:28px}.hi-invitation{font-family:var(--serif);font-size:40px;line-height:1.05;margin-top:27px}.contact-links{margin-top:35px}.contact-links .button{border-radius:7px;min-height:47px;font-size:16px;justify-content:space-between;padding:11px 18px}.contact-main{min-width:270px}.contact-secondary{display:flex;gap:12px;margin-top:12px}.contact-secondary .button{min-width:125px;border-color:#8d8b86}.hi-coffee{position:absolute;left:50vw;top:59vh;width:175px;transform:rotate(-3deg);z-index:2}.hi-coffee p{position:absolute;right:100%;top:35px;width:155px;font-family:var(--hand);font-size:18px;line-height:1.3;transform:rotate(-9deg)}.profile-photo{position:absolute;right:6.5vw;bottom:7vh;width:24vw;height:66vh;max-height:680px;z-index:1}.profile-photo img{width:100%;height:100%;object-fit:cover;object-position:51% center;display:block}.profile-photo figcaption{font-family:var(--hand);font-size:16px;color:var(--muted);position:absolute;right:3px;bottom:-28px;transform:rotate(-4deg)}.hi footer{position:absolute;bottom:20px;right:32px;font-size:12px;color:#8a8883;z-index:2}.hi footer a:hover{text-decoration:underline}html[lang=zh-CN] .hero h1{line-height:1.12;letter-spacing:0}html[lang=zh-CN] h2,html[lang=zh-CN] h3{line-height:1.15}html[lang=zh-CN] .hi h2{font-size:82px;line-height:1.12}html[lang=zh-CN] .hi-invitation{line-height:1.3}html[lang=zh-CN] .small-lead{margin-bottom:18px}html[lang=zh-CN] .ownership-title{font-size:42px}
@media(min-width:768px) and (max-width:1100px){h2{font-size:48px}.hero h1,.hero h1 em{font-size:44px}.value h3{font-size:29px}.value-copy{width:25vw}.value p{font-size:15px}.process>h2{width:350px}.ownership-title{font-size:38px;min-width:440px}.work-grid{grid-template-columns:30% 1fr;gap:45px}.project-description{font-size:15px}.hi h2{font-size:78px}.hi-invitation{font-size:34px}.hi-coffee{left:51vw;width:145px}.hi-coffee p{display:none}.contact-secondary{gap:8px}.contact-secondary .button{min-width:100px;padding:10px 12px}.profile-photo{right:4vw;width:25vw;height:58vh}.hero-welcome{max-width:300px}}
/* The same narrative becomes a natural vertical read on narrow screens. */
@media(max-width:767px){
 html{scroll-padding-top:84px}.site-header{padding:20px;min-height:80px}.wordmark{font-size:30px}.menu-toggle{display:flex!important;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-right:-8px;z-index:2}.menu-toggle span{display:block;width:23px;height:1.5px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}.site-header nav{display:none;position:absolute;left:0;right:0;top:79px;background:var(--paper);border-bottom:1px solid var(--line);padding:15px 20px 27px;align-items:flex-start;gap:8px;font-size:22px}.site-header nav.is-open{display:flex;flex-direction:column}.site-header nav a{padding:9px 0}.mobile-language{display:block!important;font-size:16px!important;margin-top:5px}.brain{height:auto}.brain-viewport{height:auto;position:relative;overflow:hidden}.brain-track{width:100%;height:auto;transform:none!important;will-change:auto}.brain-thread{width:100%;height:100%;opacity:1!important}.brain-thread path{stroke-width:2}.brain-thread ellipse{display:none}.hero{position:relative;width:100%;height:132svh;min-height:900px}.knot-wrap{left:7vw;top:25svh;width:86vw;height:49svh;max-height:440px}.hero-note{left:auto;right:28px;top:17svh;font-size:12px;max-width:180px}.hero-note svg{width:30px;left:-38px}.hero h1{left:20px;bottom:auto;top:90svh;font-size:48px;line-height:1;letter-spacing:-1.2px}.hero h1 em{font-size:48px}.hero-welcome{display:none}h2{font-size:46px;line-height:1.04}.small-lead{font-size:15px}.interests{display:block;position:relative;width:100%;height:1000px}.interest-copy{left:20px;top:380px;width:calc(100% - 40px);text-align:center;z-index:2;background:var(--paper);padding:18px 0}.interest-copy h2{max-width:340px;margin:auto}.interest-copy>p:last-child{font-size:16px;max-width:285px;margin:15px auto 0}.interest-object{width:170px}.interest-laptop{left:2%;top:70px}.interest-paper{left:auto;right:-2%;top:170px}.interest-plant{left:-3%;top:595px}.interest-coffee{left:auto;right:2%;top:655px}.interest-racket{left:6%;top:800px;width:180px}.interest-dumbbell{left:auto;right:-1%;top:850px;width:160px}.values{display:block;position:relative;height:1270px;padding-top:80px}.values>h2{position:relative;left:auto;top:auto;width:auto;padding:0 28px;background:var(--paper);display:table;margin-bottom:45px}.value{position:relative;left:auto;top:auto;width:100%;gap:0;margin-top:32px}.value .object-art{width:44%;max-width:190px}.value-copy{width:54%;padding-right:22px;background:var(--paper)}.value h3{font-size:31px}.value p{font-size:15px;line-height:1.45}.value-tools{flex-direction:row-reverse;margin-top:75px}.value-tools .value-copy{padding:0 0 0 24px}.value-people{margin-top:75px}.journey{display:block;position:relative;padding:0 28px 90px}.timeline{position:relative;padding-left:25px;border-left:1px solid var(--line)}.milestone,.milestone:nth-child(odd),.milestone:nth-child(even){position:relative;left:auto;top:auto;transform:none;width:100%;padding:0 0 46px;background:var(--paper)}.milestone:before{display:none}.milestone:after,.milestone:nth-child(odd):after,.milestone:nth-child(even):after{top:10px;bottom:auto;left:-29px}.milestone h3{font-size:19px}.milestone p{max-width:none;font-size:16px}.milestone time{margin-top:7px;font-size:13px}.ownership{position:relative;left:auto;top:auto;display:block;width:auto;margin:30px -8px 0;background:var(--paper);padding:16px 0}.ownership-title{font-size:38px;min-width:0;margin-bottom:20px}.ownership>p:last-child{max-width:300px;font-size:16px}.process{display:block;position:relative;height:700px;padding:50px 24px}.process>h2{position:relative;left:auto;top:auto;width:auto;background:var(--paper);display:table}.process-labels{left:15%;top:310px;width:70%;height:290px;font-size:22px}.bridge{position:relative;left:auto;top:auto;width:100%;text-align:center;padding:120px 20px 150px}.bridge h2{font-size:45px}.bridge .small-lead{background:var(--paper);display:table;margin:0 auto 18px}.work{padding:105px 20px 80px}.work-grid{display:block}.work-intro{position:relative;top:auto;margin-bottom:60px}.work-intro h2{font-size:56px;margin-bottom:24px}.section-label{margin-bottom:24px}.work-description{max-width:315px}.filter-label{margin-top:28px}.project-filters{max-width:none;gap:8px}.project{margin-bottom:65px}.project-cover{aspect-ratio:4/3}.project-screens{padding:5% 4%;gap:2%}.project-screens img{width:29%}.project-info{gap:18px;padding-top:20px}.project h3{font-size:33px}.project-meta{font-size:12px}.project-description{font-size:15px;margin-top:9px}.project-outbound{width:37px;height:37px;margin-top:25px}.more-work{font-size:16px;gap:20px;padding-bottom:15px}.more-work svg{flex:none}.hi{height:auto;min-height:0;padding:140px 24px 80px;overflow:hidden}.hi-copy{max-width:100%}.hi h2{font-size:clamp(40px,14.3vw,56px);line-height:.95;letter-spacing:-1.5px}.hand-note{font-size:16px;left:12px;top:-43px}.hand-note svg{left:-28px}.hi-description{font-size:17px;margin-top:26px}.hi-invitation{font-size:31px;line-height:1.1;margin-top:24px}.contact-links{margin-top:27px}.contact-links .button{font-size:14px;min-height:44px;padding:10px 13px}.contact-main{min-width:240px}.contact-secondary{gap:8px;flex-wrap:wrap}.contact-secondary .button{min-width:0;gap:12px}.hi-thread{height:550px;top:auto;bottom:110px;left:-35%;width:150%;opacity:1}.hi-thread path{stroke-width:2}.profile-photo{position:relative;right:auto;bottom:auto;width:63%;height:380px;margin:80px 0 55px auto;max-height:none}.profile-photo figcaption{font-size:14px;white-space:nowrap;right:0;bottom:-24px}.hi-coffee{left:0;top:auto;bottom:175px;width:135px}.hi-coffee p{left:18px;right:auto;top:-52px;width:130px;font-size:16px}.hi footer{bottom:22px;right:24px;font-size:11px}html[lang=zh-CN] .hero h1,html[lang=zh-CN] .hero h1 em{font-size:47px}html[lang=zh-CN] .hi h2{font-size:clamp(34px,10.7vw,42px);line-height:1.2;letter-spacing:-1px}html[lang=zh-CN] .ownership-title{font-size:36px}html[lang=zh-CN] .work-intro h2{font-size:48px}html[lang=zh-CN] .hi-invitation{font-size:29px}
}
/* Respect reduced motion without hiding any story content. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.brain-track{will-change:auto}}
@media(min-width:768px) and (prefers-reduced-motion:reduce){
.brain{height:auto}.brain-viewport{height:auto;position:relative}.brain-track{width:100%;height:auto;transform:none!important}.brain-thread{display:none}.hero{position:relative}.interests{display:block;position:relative;height:900px}.interest-copy{left:25%;top:350px;width:50%}.interest-object{width:190px}.interest-laptop{left:12%;top:60px}.interest-plant{left:9%;top:470px}.interest-coffee{left:32%;top:630px}.interest-paper{left:57%;top:70px}.interest-racket{left:71%;top:580px}.interest-dumbbell{left:80%;top:260px}.values{display:block;position:relative;padding:80px 6vw}.values>h2{position:relative;left:auto;top:auto;width:100%;margin-bottom:50px}.value{position:relative;left:auto;top:auto;width:65%;margin-bottom:60px}.value-tools{margin-left:auto}.value .object-art{width:230px}.value-copy{width:auto}.journey{display:block;padding:80px 7vw}.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:60px}.milestone,.milestone:nth-child(odd),.milestone:nth-child(even){position:relative;transform:none;left:auto;top:auto;width:auto;padding:0}.milestone:before,.milestone:after{display:none}.ownership{position:relative;left:auto;top:auto;width:auto;margin-top:100px;gap:50px}.ownership-title{min-width:440px}.process{display:block;position:relative;height:700px;padding:80px 8vw}.process>h2{position:relative;left:auto;top:auto}.process-labels{left:55%;top:170px;width:32%;height:330px;border:2px solid var(--ink);border-radius:50%}.bridge{position:relative;left:auto;top:auto;width:100%;padding:120px 20px 180px}.work{padding-top:180px}
}

/* One shared ink path from the opening knot to the final introduction. */
.brain-thread path,.work-thread path,.hi-thread path{stroke-width:2.5;vector-effect:non-scaling-stroke}
.work-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--ink)}
.work-grid{position:relative;z-index:1}
.hi .hi-thread{left:0;top:0;bottom:auto;width:100%;height:100%}
.milestone{width:24vw}
.milestone-1{left:303vw}.milestone-2{left:351vw}.milestone-3{left:399vw}
.milestone h3 a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px}
.milestone h3 a:hover,.milestone h3 a:focus-visible{text-decoration-color:currentColor}
@media(max-width:767px){.brain-thread path,.work-thread path,.hi-thread path{stroke-width:2}.milestone-1,.milestone-2,.milestone-3,.milestone-4,.milestone-5,.milestone-6,.milestone-7{left:auto;width:100%}.timeline{border-left-color:transparent}}
@media(min-width:768px) and (prefers-reduced-motion:reduce){.milestone-1,.milestone-2,.milestone-3,.milestone-4,.milestone-5,.milestone-6,.milestone-7{left:auto;width:auto}}

.milestone:after{background:var(--paper);border:1px solid var(--ink)}
.milestone.is-reached:after{background:var(--ink)}
@media(max-width:767px),(prefers-reduced-motion:reduce){.milestone:after{background:var(--ink)}}

/* The three selected directions: BOLD, apps and GRVT mini program. */
.project-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cover-bold{background:#b6aa95}
.cover-apps{background:#ece6db}
.cover-mini{background:#e9ff3a}
.project-preview{display:block;width:100%;height:100%;object-fit:contain}
.project-jumps{display:flex;flex-wrap:wrap;gap:8px;max-width:350px;margin-top:30px}
.project-jumps a{display:inline-flex;align-items:center;min-height:44px;padding:9px 13px;border:1px solid #aeaba4;border-radius:99px;font-size:13px;line-height:1.3;transition:background-color .2s,color .2s}
.project-jumps a:hover,.project-jumps a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.app-collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:24px 0 0;margin:24px 0 0;border-top:1px solid var(--line);gap:18px 14px}
.app-collection a{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1.3}
.app-collection img{display:block;width:36px;height:36px;flex:none;border-radius:8px}
.app-collection a:hover span,.app-collection a:focus-visible span{text-decoration:underline;text-underline-offset:4px}
.milestone h3,.milestone p{overflow-wrap:break-word}
.milestone p{max-width:260px}
.interest-plant:hover{transform:none}
.projects>.project:last-child{margin-bottom:0}
@media(max-width:1100px){.app-collection{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:959px){.work-grid{display:block}.work-intro{position:relative;top:auto;margin-bottom:60px}.project-jumps{max-width:none}}
@media(max-width:767px){.app-collection{gap:14px 10px}.app-collection a{font-size:13px;gap:8px}.hi-description{max-width:290px}.milestone p{max-width:none}}

/* Raymond and Whisky, from the owner's supplied photographs. */
.personal-scene{position:absolute;right:3vw;bottom:7vh;width:47vw;height:74vh;max-height:780px;z-index:1}
.personal-scene .profile-photo{right:0;bottom:0;width:68%;height:100%;max-height:none}
.personal-scene .profile-photo img{object-fit:contain;object-position:center bottom}
.personal-scene .profile-photo figcaption{right:24%;bottom:-12px}
.profile-pet{position:absolute;left:0;bottom:16px;width:37%;max-width:250px}
.profile-pet img{display:block;width:100%;height:auto}
.profile-pet figcaption{position:absolute;left:4%;bottom:-22px;font-family:var(--hand);font-size:18px;line-height:1.2;white-space:nowrap;transform:rotate(-5deg);color:var(--muted)}
@media(min-width:768px) and (max-width:1100px){.personal-scene{right:0;width:47vw;height:68vh}.profile-pet{width:39%;left:-2%}.profile-pet figcaption{font-size:16px}}
@media(max-width:767px){
 .personal-scene{position:relative;right:auto;bottom:auto;width:100%;height:480px;max-height:none;margin:70px 0 45px;z-index:1}
 .personal-scene .profile-photo{position:absolute;right:-6px;bottom:0;width:78%;height:100%;margin:0;max-height:none}
 .personal-scene .profile-photo figcaption{right:22%;bottom:-18px;font-size:16px}
 .profile-pet{left:-5px;bottom:12px;width:40%;max-width:185px}
 .profile-pet figcaption{left:0;bottom:-24px;font-size:16px}
}

/* Whisky follows the moving ink tip. The 790px split preserves every paw. */
.whisky-chaser{position:fixed;left:0;top:0;width:clamp(112px,10.7vw,156px);aspect-ratio:790/512;z-index:4;pointer-events:none;user-select:none;contain:layout style;transform-origin:0 0}
.whisky-chaser[hidden]{display:none}
.whisky-chase-body,.whisky-chase-sprite{width:100%;height:100%}
.whisky-chase-body{transform-origin:50% 55%}
.whisky-chase-sprite{position:relative;overflow:hidden}
.whisky-chase-frames{position:absolute;left:0;top:0;display:block;width:194.43038%;height:200%;max-width:none;pointer-events:none}
.whisky-chaser.is-moving{will-change:transform}
.whisky-chaser.is-running .whisky-chase-frames{animation:whisky-run .48s steps(1,end) infinite;will-change:transform}
@keyframes whisky-run{0%,100%{transform:translate(0,0)}25%{transform:translate(-51.432292%,0)}50%{transform:translate(0,-50%)}75%{transform:translate(-51.432292%,-50%)}}
@media(max-width:767px),(prefers-reduced-motion:reduce){.whisky-chaser{display:none!important}}

/* A single endpoint crosses every section without a divider. */
.work{border-top:0}
.thread-tip{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--ink);z-index:4;pointer-events:none}
.thread-tip[hidden]{display:none}
@media(max-width:767px),(prefers-reduced-motion:reduce){.thread-tip{display:none!important}}

/* Personal interests disclose a note; they never navigate to a project. */
.art-kettlebell{background-image:url('assets/objects/kettlebell-20261004.png');background-size:contain;background-position:center}
.hobby-object{padding:0;border:0;background:none;aspect-ratio:1;touch-action:manipulation;isolation:isolate}
.hobby-object:hover{transform:none}
.hobby-object.is-active{z-index:6}
.hobby-object .object-art{pointer-events:none}
.hobby-object:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.interest-copy>p:not(.small-lead):not(.interest-hint){font-size:18px;color:var(--muted);margin-top:16px}
.interest-copy>.interest-hint{font-family:var(--hand);font-size:16px!important;color:var(--muted);margin-top:13px!important}
.hobby-panel{position:fixed;z-index:25;width:min(310px,calc(100vw - 32px));padding:23px 22px 22px;background:var(--paper);border:1px solid #b8b5ad;border-radius:4px;box-shadow:0 10px 26px rgb(14 14 13 / .09)}
.hobby-panel[hidden]{display:none}
.hobby-panel h3{padding-right:25px;font-size:28px;line-height:1.15;text-wrap:balance}
.hobby-panel p{font-size:15px;line-height:1.65;margin-top:14px;color:#53544e}
.hobby-close{position:absolute;right:9px;top:9px;display:grid;place-items:center;width:32px;height:32px;padding:6px;border-radius:3px}
.hobby-close:hover{background:#e9e7e1}
.hobby-close svg{width:18px;height:18px;stroke-width:1.5}
.hobby-contact{display:inline-flex;align-items:center;gap:13px;min-height:44px;margin-top:12px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:5px}
.hobby-contact svg{width:16px;height:16px;stroke-width:1.5}
.hobby-effects{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;stroke-width:1.5}
.is-active .hobby-effects{opacity:1}
.water-can{transform-origin:137px 25px;fill:var(--paper);color:#425b47;opacity:0}
.water-can path:first-child{fill:var(--paper)}
.water-drops path{stroke:#568773;stroke-width:2;opacity:0}
.is-active .art-plant{animation:plant-drink 1.7s ease-out both;transform-origin:50% 88%}
.is-active .water-can{animation:water-pour 1.8s ease-out both}
.is-active .water-drops path{animation:water-drops .55s ease-in .25s 3 both}
.is-active .water-drops path:nth-child(2){animation-delay:.38s}
.is-active .water-drops path:nth-child(3){animation-delay:.49s}
@keyframes plant-drink{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg)}65%{transform:rotate(1.5deg)}}
@keyframes water-pour{0%{opacity:0;transform:translate(7px,-8px) rotate(8deg)}18%{opacity:1;transform:rotate(-12deg)}76%{opacity:1;transform:rotate(-12deg)}100%{opacity:0;transform:translate(7px,-8px) rotate(8deg)}}
@keyframes water-drops{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translate(-8px,33px)}}
.coffee-making .latte-heart{fill:#fff4db;stroke:none;transform:scale(0);transform-origin:0 0}
.milk-jug{color:#77786f;transform-origin:137px 18px;opacity:0}
.milk-jug path:first-child{fill:var(--paper)}
.coffee-making .milk-stream{stroke:#fff4db;stroke-width:2.8;stroke-dasharray:55;stroke-dashoffset:55;opacity:0}
.is-active .milk-jug{animation:milk-pour 1.9s ease-out both}
.is-active .milk-stream{animation:milk-stream 1.5s ease-out .2s both}
.is-active .latte-heart{animation:latte-bloom 1.1s cubic-bezier(.16,1,.3,1) .55s both}
@keyframes milk-pour{0%{opacity:0;transform:translate(5px,-6px) rotate(8deg)}20%,75%{opacity:1;transform:rotate(-16deg)}100%{opacity:0;transform:translate(5px,-6px) rotate(8deg)}}
@keyframes milk-stream{0%{opacity:0;stroke-dashoffset:55}30%,75%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes latte-bloom{0%{transform:scale(.05);opacity:0}25%{opacity:1}100%{transform:scale(.82);opacity:1}}
.hobby-object .art-racket{transform-origin:20% 86%}
.ball-trail{stroke:#8d9860;stroke-dasharray:5 7;opacity:0}
.tennis-impact{opacity:0;color:#707461}
.is-active .art-racket{animation:tennis-swing 1s ease-out both}
.is-active .ball-trail{animation:tennis-trail 1s ease-out both}
.is-active .tennis-impact{animation:tennis-hit 1s ease-out both}
@keyframes tennis-swing{0%,100%{transform:rotate(0)}22%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-3deg)}}
@keyframes tennis-trail{0%,30%,100%{opacity:0}45%,65%{opacity:1}}
@keyframes tennis-hit{0%,35%,75%,100%{opacity:0}45%{opacity:1}}
.hobby-object .art-kettlebell{transform-origin:50% 20%}
.kettle-trail{stroke:#84877c;stroke-dasharray:5 8;opacity:0}
.is-active .art-kettlebell{animation:kettlebell-swing 1.15s ease-out both}
.is-active .kettle-trail{animation:tennis-trail 1.15s ease-out both}
@keyframes kettlebell-swing{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-6px,6px) rotate(-10deg)}50%{transform:translate(9px,-21px) rotate(14deg)}78%{transform:translate(-3px,3px) rotate(-4deg)}}
.typing-line{stroke:#92ae8e;stroke-width:2;stroke-dasharray:140;stroke-dashoffset:140}
.typing-cursor{stroke:#dfbc79;stroke-width:2;opacity:0}
.is-active .typing-line{animation:hobby-type 1.3s steps(8,end) both}
.is-active .typing-cursor{animation:hobby-cursor .5s steps(1,end) 3 both}
@keyframes hobby-type{to{stroke-dashoffset:0}}
@keyframes hobby-cursor{0%,100%{opacity:0}50%{opacity:1}}
.idea-mark{color:#65675c;opacity:0}
.is-active .art-paper{animation:paper-thought 1s ease-out both}
.is-active .idea-mark{animation:idea-appear .55s ease-out .2s both}
@keyframes paper-thought{0%,100%{transform:rotate(0)}30%{transform:rotate(5deg) scale(.97)}65%{transform:rotate(-3deg)}}
@keyframes idea-appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){.interest-copy>p:not(.small-lead):not(.interest-hint){font-size:16px;max-width:290px;margin:15px auto 0}.interest-copy>.interest-hint{font-size:15px!important;max-width:none}.hobby-panel h3{font-size:26px}.hobby-panel{padding:22px 20px 20px}}
@media(prefers-reduced-motion:reduce){.hobby-effects{display:none!important}.hobby-object .object-art{transform:none!important}}