:root{--blue:#0078c9;--ink:#17191e;--cream:#f5f4ed;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.portfolio{background:#141518;color:#f8f8f0;font-family:Arial,Helvetica,sans-serif;overflow-x:clip}.portfolio a{text-decoration:none}.portfolio h1,.portfolio h2,.portfolio h3,.portfolio h4{margin:0}.portfolio button{cursor:pointer}.portfolio em{font-family:var(--hand);font-weight:400;font-style:normal;letter-spacing:0;display:inline-block}.folio-nav{height:90px;margin:auto;padding:0 42px;display:flex;align-items:center;justify-content:space-between;max-width:1700px}.folio-brand{font-weight:900;font-size:39px;letter-spacing:-5px;line-height:1}.folio-brand span{font-style:italic}.folio-brand i{color:#81caff}.folio-nav nav{display:flex;gap:36px;font-size:14px}.nav-contact{border:1px solid #55565a;border-radius:30px;padding:12px 20px;font-size:13px}.nav-contact span{margin-left:22px}.desk{position:relative;isolation:isolate;margin:0 22px;min-height:740px;height:calc(100svh - 114px);max-height:1060px;overflow:hidden;border-radius:28px;background:var(--blue);border:1px solid #8ccfff88;box-shadow:inset 0 0 0 5px #ffffff12,0 10px 0 #145686,0 19px 28px #0004}.desk-top,.desk-bottom{position:absolute;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center;font:10px/1.4 var(--mono);letter-spacing:.1em;z-index:4}.desk-top{top:29px}.desk-bottom{bottom:28px}.desk-bottom a span{font-size:23px;margin-left:20px}.live-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#f5f0e4;margin-right:9px;box-shadow:0 0 12px #f5f0e4}.hero-title-wrap{position:absolute;z-index:3;inset:25% 0 auto;text-align:center;pointer-events:none}.hello{font:32px var(--hand);margin:0 0 14px}.portfolio h1{position:relative;max-width:none;margin:0;font-size:clamp(110px,15.4vw,245px);font-weight:900;line-height:.82;letter-spacing:-.08em;white-space:nowrap}.portfolio h1 span{display:inline-block;animation:name-in 900ms var(--ease-out) both}.portfolio h1 span:nth-child(2){animation-delay:80ms}.portfolio h1 i{font-size:22px;vertical-align:top;display:inline-block;letter-spacing:0;margin:8px 0 0 14px;font-style:normal}.hero-intro{font-size:20px;line-height:1.4;margin:35px auto 22px;letter-spacing:-.02em}.hero-intro em{font-size:1.12em}.pill{display:inline-flex;align-items:center;gap:34px;min-height:50px;border-radius:40px;padding:14px 24px;background:var(--cream);color:var(--ink);font-size:13px;font-weight:600;transition:transform 200ms var(--ease-out),background 200ms ease}.pill span{font-size:20px;line-height:1}.hero-link{pointer-events:auto}.captions i{background:#279bee;color:white;font:bold 8px Arial;display:grid;place-items:center}.portfolio-intro{max-width:1400px;margin:0 auto;padding:90px 45px;display:flex;justify-content:space-between;align-items:center}.portfolio-intro>span{font:9px var(--mono);letter-spacing:.12em;color:#adb0b9}.portfolio-intro p{font-size:30px;line-height:1.1;letter-spacing:-1px}.portfolio-intro em{color:#a6d7fa}.folio-section{padding:80px max(5.5vw,26px)}.section-label{display:flex;justify-content:space-between;gap:20px;font:10px/1.5 var(--mono);letter-spacing:.07em;margin-bottom:60px}.featured{background:var(--cream);color:var(--ink);border-radius:28px 28px 0 0;margin:0 22px}.project-header{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:40px;scroll-margin-top:28px}.portfolio h2{font-size:clamp(46px,6.3vw,96px);line-height:1;letter-spacing:-.055em;font-weight:650}.project-header p{font-size:15px;line-height:1.5;padding-bottom:8px}.project-details{display:grid;grid-template-columns:1fr 1.35fr;gap:12%;padding:55px 0 80px}.project-meta>span{font:9px var(--mono);color:#73757a;letter-spacing:.1em}.project-meta p{font-size:13px;margin:10px 0 24px}.dark-pill{background:var(--ink);color:var(--cream);margin-top:10px}.project-description h3{font-size:clamp(28px,3vw,43px);letter-spacing:-.045em;line-height:1.07;margin-bottom:24px}.project-description p,.story-copy p,.studio-copy p,.community-chapter p{font-size:16px;line-height:1.65;color:#5c6069;margin-bottom:18px}.text-link{display:inline-flex;gap:30px;font-size:13px;border-bottom:1px solid currentColor;padding:7px 0}.community-chapter{border-top:1px solid #c6c9c4;display:grid;grid-template-columns:1fr 1.35fr;gap:12%;padding:50px 0 0}.micro{font:9px/1.5 var(--mono);letter-spacing:.12em}.community-chapter h3{font-size:clamp(90px,11vw,164px);line-height:1;letter-spacing:-.08em;margin:14px 0}.community-chapter h3 span{color:#279bee;font-weight:400}.community-chapter h4{font-size:28px;letter-spacing:-1px;margin:20px 0}.community-tag{font:9px var(--mono);padding-top:15px;display:block;color:#279bee}.story{padding-top:100px;padding-bottom:100px}.story .section-label{color:#adafb8}.story-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:12%;align-items:center}.portrait-sheet{position:relative;margin:0;background:#f5f4ed;padding:13px 13px 0;transform:rotate(-4deg);color:var(--ink);max-width:460px;box-shadow:12px 17px 0 #ffffff08}.portrait-sheet img{width:100%;height:auto;aspect-ratio:4/4.7;object-fit:cover;filter:grayscale(1)}.portrait-sheet figcaption{display:flex;justify-content:space-between;padding:22px 6px;font:8px var(--mono)}.story-copy h2{margin:20px 0 32px}.story-copy h2 em{color:#99d4ff}.story-copy p{color:#b5b7c0}.other-work{margin:0 22px;background:#e8eae5;color:var(--ink);border-radius:24px}.studio-project{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.studio-art{aspect-ratio:1.25;border-radius:12px;background:#289aeb;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f6f5ee}.studio-art strong{font-size:clamp(75px,11vw,170px);letter-spacing:-.09em;font-weight:500;line-height:1;z-index:2}.studio-art strong span{font-family:Arial}.studio-art small{letter-spacing:1.1em;font-size:10px;margin-left:10px;z-index:2}.studio-copy h2{font-size:clamp(35px,4vw,60px);margin:20px 0 24px}.studio-copy h2>span{font-size:.6em;display:inline-block;margin-left:20px;transition:transform 200ms var(--ease-out)}.studio-copy p{max-width:420px}.more-work-row{margin-top:50px;border-top:1px solid #bfc2c0;padding-top:28px;display:flex;gap:30px;justify-content:space-between;align-items:center}.more-work-row>span{font:8px var(--mono);min-width:150px}.more-work-row p{font-size:13px;line-height:1.5;color:#626771;max-width:380px}.more-work-row a{flex-shrink:0}.notes h2{margin:0 0 50px}.notes h2 em{color:#96d3ff}.note-row{display:grid;grid-template-columns:1fr 2.5fr 40px;gap:20px;align-items:center;padding:29px 0;border-top:1px solid #414249;transition:color 180ms ease}.note-row>span:first-child{font:9px var(--mono);color:#9d9fa8}.note-row h3{font-size:clamp(20px,2.4vw,34px);font-weight:400;letter-spacing:-.04em}.note-row>span:last-child{font-size:30px;transition:transform 180ms var(--ease-out)}.contact-scene{position:relative;isolation:isolate;margin:15px 22px 0;padding:65px max(4vw,26px) 25px;background:#279bee;border-radius:24px;overflow:hidden}.contact-scene h2{font-size:clamp(56px,8.5vw,130px);margin:35px 0 30px;max-width:85%;position:relative;z-index:1}.contact-scene h2 em{color:#f5f0e4}.contact-symbol{position:absolute;right:7%;top:25%;font-size:240px;color:#d8efff;transform:rotate(8deg);line-height:1;z-index:0}.contact-bottom{margin-top:70px;border-top:1px solid #ffffff40;padding-top:25px;display:flex;justify-content:space-between;gap:25px;align-items:center}.contact-bottom>span{font:8px var(--mono);letter-spacing:.06em}.contact-bottom>div{display:flex;gap:21px;font-size:12px}.folio-footer{padding:30px 30px;display:flex;justify-content:space-between;align-items:center;gap:24px;font:8px var(--mono);color:#b2b4bd}.folio-footer>div{display:flex;gap:18px;align-items:center}.folio-footer button{border:0;background:none;color:inherit;font:inherit;padding:10px 0}.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}.portfolio [data-reveal]{opacity:1;transform:none}.portfolio .reveal-ready{clip-path:inset(0 0 100% 0);transition:clip-path 650ms var(--ease-in-out)}.portfolio .reveal-ready.is-visible{clip-path:inset(0 0 0 0)}.portfolio .cookie-banner{border-radius:18px;background:#f5f4ed;color:#17191e;box-shadow:0 10px 50px #0004}.portfolio .cookie-banner p{color:#626570}.portfolio .cookie-actions button{color:#17191e;border-color:#a6a8ae}.portfolio .cookie-actions .cookie-primary{background:#279bee;color:white}.portfolio .cookie-banner strong{color:#17191e}.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.portfolio :focus-visible{outline:3px solid #9ed1ff;outline-offset:6px}.featured :focus-visible,.other-work :focus-visible{outline-color:#279bee}
@keyframes name-in{from{opacity:0;transform:translateY(45px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes object-in{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}@keyframes blink{50%{opacity:0}}@keyframes playhead{from{transform:translateX(0)}to{transform:translateX(265px)}}@keyframes spark-turn{to{transform:rotate(360deg)}}@keyframes word-land{from{opacity:0;transform:translateY(35px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes film-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(hover:hover) and (pointer:fine){.pill:hover{transform:translateY(-3px);background:#f5f0e4}.studio-project:hover .studio-copy h2>span,.note-row:hover>span:last-child{transform:translate(4px,-4px)}.note-row:hover{color:#9dd6ff}.folio-nav nav a:hover,.folio-footer a:hover{color:#a9dbff}}
@media(min-width:1600px){.hero-title-wrap{inset:27% 0 auto}}
@media(max-width:1100px){.desk{height:760px;min-height:0}.portfolio h1{font-size:15.3vw}.hero-title-wrap{top:30%}.hero-intro{font-size:18px;margin-top:28px}.project-details,.community-chapter{gap:7%;grid-template-columns:.85fr 1.15fr}.story-grid{gap:9%}.contact-symbol{font-size:180px;right:5%}.folio-footer{flex-wrap:wrap}.portfolio-intro{padding:70px 40px}.portfolio-intro>span:last-child{display:none}}
@media(max-width:700px){.folio-nav{height:76px;padding:0 22px}.folio-brand{font-size:32px}.folio-nav nav{gap:18px;font-size:12px}.nav-contact{padding:10px 13px;font-size:11px}.nav-contact span{margin-left:8px}.desk{margin:0 12px;height:750px;border-radius:20px}.desk-top,.desk-bottom{left:22px;right:22px;font-size:7px;letter-spacing:.03em}.desk-top{top:24px;align-items:flex-start;gap:20px}.desk-top>span:first-child{max-width:100px}.desk-top>span:last-child{max-width:130px;text-align:right}.desk-bottom{bottom:24px}.desk-bottom>span{max-width:110px}.desk-bottom a{max-width:135px;text-align:right}.desk-bottom a span{margin-left:8px}.hero-title-wrap{top:31%}.hello{font-size:21px;margin-bottom:14px}.portfolio h1{font-size:23vw;white-space:normal;line-height:.82;letter-spacing:-.075em;padding:0 25px}.portfolio h1 span{display:block}.portfolio h1 i{display:none}.hero-intro{font-size:16px;margin:24px auto 19px}.pill{min-height:44px;padding:11px 20px;font-size:12px;gap:22px}.captions i{font-size:6px}.portfolio-intro{padding:65px 25px;display:block}.portfolio-intro>span{font-size:8px}.portfolio-intro p{font-size:31px;margin-top:20px}.folio-section{padding:50px 24px}.featured,.other-work{margin:0 12px;border-radius:20px}.section-label{font-size:8px;gap:25px;margin-bottom:34px}.section-label>span:last-child{text-align:right}.project-header{display:block;margin-bottom:28px}.portfolio h2{font-size:49px}.project-header p{font-size:13px;margin-top:20px}.project-details{display:flex;flex-direction:column-reverse;padding:30px 0 40px;gap:30px}.project-description h3{font-size:29px}.project-description p,.story-copy p,.studio-copy p,.community-chapter p{font-size:15px}.project-meta{border-top:1px solid #cdcfca;padding-top:25px}.project-meta p{margin-bottom:17px;font-size:12px}.community-chapter{display:block;padding-top:30px}.community-chapter h3{font-size:110px}.community-chapter h4{font-size:25px;margin-top:30px}.community-tag{font-size:7px;line-height:1.6}.story{padding-top:60px;padding-bottom:65px}.story-grid{display:flex;flex-direction:column;gap:50px}.portrait-sheet{width:85%;max-width:350px}.portrait-sheet figcaption{font-size:7px;padding:17px 5px}.story-copy h2{font-size:50px}.studio-project{display:block}.studio-art{aspect-ratio:1.3}.studio-art strong{font-size:110px}.studio-copy{margin-top:30px}.studio-copy h2{font-size:37px}.more-work-row{display:block;margin-top:35px}.more-work-row p{margin:16px 0}.notes h2{font-size:43px;margin-bottom:32px}.note-row{grid-template-columns:1fr 26px;padding:23px 0;gap:12px}.note-row>span:first-child{grid-column:1/-1;font-size:7px}.note-row h3{font-size:23px}.note-row>span:last-child{font-size:26px}.contact-scene{margin:0 12px;padding:40px 24px 25px;border-radius:20px}.contact-scene .micro{font-size:7px}.contact-scene h2{font-size:52px;max-width:100%;margin:28px 0}.contact-symbol{font-size:100px;right:20px;top:44%;opacity:.25}.contact-bottom{display:block;margin-top:50px;padding-top:20px}.contact-bottom>span{font-size:7px}.contact-bottom>div{flex-wrap:wrap;gap:18px;margin-top:20px;font-size:11px}.folio-footer{padding:25px;gap:20px;font-size:7px}.folio-footer>div{order:3;flex-wrap:wrap;gap:15px;width:100%}.portfolio .cookie-banner{right:12px;left:12px;bottom:12px;max-width:none;padding:16px}.portfolio .cookie-banner p{font-size:11px}.portfolio .cookie-actions{gap:8px}.portfolio .cookie-actions button,.portfolio .cookie-actions a{font-size:10px}.portfolio .cookie-banner strong{font-size:10px}}
@keyframes playhead-mobile{to{transform:translateX(140px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portfolio *,.portfolio *:before,.portfolio *:after{animation:none!important;transition-duration:.15s!important}.portfolio .reveal-ready{clip-path:none}}
/* Give each piece of work room to land, then let the text stay still. */
@media(min-width:701px){.portfolio-intro{padding-top:105px;padding-bottom:105px}.story{padding-top:130px;padding-bottom:130px}.notes{padding-top:110px;padding-bottom:110px}}
@media(prefers-reduced-motion:no-preference){.hero-title-wrap .hello{animation:name-in 850ms var(--ease-out) 120ms both}.portfolio h1 span{animation-delay:200ms}.portfolio h1 span:nth-child(2){animation-delay:280ms}.hero-intro{animation:name-in 850ms var(--ease-out) 360ms both}.hero-link{animation:name-in 850ms var(--ease-out) 440ms both}}
@media(max-width:700px){}
@keyframes playhead-small{to{transform:translateX(120px)}}
.folio-brand{font-size:18px;font-weight:600;letter-spacing:-.7px}.phillipe-heading{display:flex;align-items:center;gap:20px}.phillipe-heading img{width:68px;height:68px;border-radius:16px;object-fit:cover}.demo-player{margin:0;background:#141518;border-radius:14px;overflow:hidden}.demo-player video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain;background:#141518}.demo-player figcaption{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;color:#eaeff2;font:9px var(--mono);letter-spacing:.07em}.demo-player button{border:1px solid #687080;border-radius:30px;background:transparent;color:white;padding:9px 15px;font-size:11px}
@media(max-width:700px){.folio-brand{font-size:14px;letter-spacing:-.5px}.folio-nav nav{gap:13px;font-size:11px}.nav-contact{font-size:10px;padding:9px 11px}.nav-contact span{margin-left:5px}.phillipe-heading{gap:13px}.phillipe-heading img{width:45px;height:45px;border-radius:11px}.demo-player{border-radius:10px}.demo-player figcaption{padding:12px;font-size:6px;gap:12px}.demo-player button{font-size:9px;padding:8px 10px;flex-shrink:0}.story-copy h2{font-size:44px}}
@media(max-width:700px){}
@media(max-width:380px){.folio-nav nav a:last-child{display:none}.folio-nav nav{gap:15px}.portfolio h1{font-size:21.5vw}.community-chapter h3{font-size:90px}}

/* Hand-lettered annotations, with the stepped cadence of a redrawn frame. */
:root{--hand:"Reenie Beanie",cursive}
.portfolio{--mono:Arial,Helvetica,sans-serif}
.desk{background:var(--blue)}
.contact-scene,.studio-art,.captions i,.portfolio .cookie-actions .cookie-primary{background:var(--blue)}
.hello,.portfolio h2 em,.portfolio-intro em{display:inline-block;font-style:normal;letter-spacing:0}
.hero-intro a{pointer-events:auto;text-decoration:underline;text-underline-offset:4px}
.phillipe-heading{gap:16px}
.phillipe-heading .phillipe-mascot{width:74px;height:74px;border-radius:4px}
.phillipe-wordmark{position:relative;width:260px;height:84px;overflow:hidden;border-radius:4px;background:#ff5023}
.phillipe-heading .phillipe-wordmark img{position:absolute;width:100%;height:auto;max-width:none;top:50%;left:0;transform:translateY(-50%);border-radius:0}
.personal-note{margin:28px 0 30px;padding:20px 0;border-top:1px solid #55565a;border-bottom:1px solid #55565a}
.personal-note>span{font:12px Arial;color:#b5b7c0}
.personal-note blockquote{margin:12px 0 0;font:36px/1.12 var(--hand);color:#f5f0e4;max-width:420px}
.portfolio-intro p{max-width:590px;line-height:1.2}

@media(prefers-reduced-motion:no-preference){.hero-title-wrap .hello,.portfolio h2 em,.portfolio-intro em{animation:hand-redraw 640ms steps(1,end) infinite}}
@media(max-width:700px){.phillipe-heading{gap:10px}.phillipe-heading .phillipe-mascot{width:48px;height:48px}.phillipe-wordmark{width:200px;height:60px}.personal-note blockquote{font-size:32px}.hero-intro{font-size:14px}.portfolio-intro p{font-size:30px}.portfolio h2 em{line-height:1.15}}
@media(max-width:380px){.phillipe-wordmark{width:160px;height:50px}.phillipe-heading .phillipe-mascot{width:40px;height:40px}.hero-intro{font-size:12px}}

/* Keep the accents personal: actual project imagery, no decorative interface mockups. */
.portfolio h2:has(em){font-family:var(--hand);font-weight:400;letter-spacing:-.015em;line-height:1.05}
.portfolio h2 em{font:inherit;color:inherit}
.portfolio-intro{justify-content:center;text-align:center}
.portfolio-intro em{color:inherit}
.micro,.project-meta>span,.note-row>span:first-child,.more-work-row>span{font:13px/1.5 Arial;letter-spacing:0}
.project-description p,.studio-copy p,.community-chapter p{color:#3b4047}
.story-copy p{color:#e1e1df}
.personal-note{border:0;padding:20px 24px;background:#212326}
.personal-note blockquote{font-size:32px;max-width:380px}
.more-work-row,.note-row{border:0}
.note-row+.note-row{margin-top:6px}
.note-row{background:#212326;padding:25px}
.more-work-row{padding-top:0}
.portrait-sheet{box-shadow:none}
.desk-bottom{font:12px Arial;letter-spacing:0}
.folio-footer{font:11px Arial;letter-spacing:0}
.nav-contact{border:0;padding-right:0}
.contact-bottom{border:0}
@media(max-width:700px){.desk-bottom{font-size:10px}.personal-note blockquote{font-size:28px}.note-row{padding:20px}.note-row>span:first-child{font-size:12px}.portfolio-intro{padding:55px 25px}.portfolio-intro p{margin:0}.story{padding-top:75px}.phillipe-heading{margin-bottom:22px!important}}
@media(max-width:380px){}
@media(min-width:701px) and (max-width:1100px){}
@media(max-width:700px){}
@media(max-width:380px){}
@media(min-width:1101px){}

/* Lowercase Inter carries the page; hand lettering is reserved for personal notes. */
@font-face{font-family:"Reenie Beanie";src:url("/assets/fonts/reenie-beanie.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
.portfolio{font-family:"Inter",Arial,sans-serif}
.portfolio h1,.portfolio h2,.portfolio h2:has(em),.portfolio h3,.portfolio h4{font-family:"Inter",Arial,sans-serif;text-transform:lowercase;font-weight:800;font-style:normal}
.portfolio h2:has(em){letter-spacing:-.055em;line-height:1.05}
.portfolio h2 em{font:inherit;letter-spacing:inherit;animation:none}
.portfolio h1{font-size:clamp(100px,17.4vw,270px);font-weight:800;letter-spacing:-.085em;line-height:1.05}
.desk{min-height:660px;height:calc(100svh - 114px);max-height:920px;background:#0065b4;border-color:#82d5ff50;box-shadow:inset 0 0 0 1px #ffffff0d,0 8px 0 #00417b,0 20px 50px #001e3750}
.desk:before{content:"";position:absolute;inset:-15%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 51% 47%,#63c9ffb3 0%,#149fffa6 24%,#0076d54d 49%,transparent 72%),radial-gradient(ellipse at 8% 12%,#91ddff80,transparent 40%),radial-gradient(ellipse at 92% 95%,#0061b8,transparent 45%)}
.hero-title-wrap{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 24px 75px}
.hero-title-wrap .hello{font:54px/1.1 var(--hand);margin:0 0 10px;animation:none;transform:rotate(-4deg)}
.hero-intro{margin:24px 0;font-size:18px;line-height:1.6}
.hero-link{margin-top:3px}
.contact-scene{background:radial-gradient(ellipse at 80% 100%,#46baff70,transparent 65%),#006bb9}
[data-handwritten]{font-family:var(--hand);font-style:normal;font-weight:400;letter-spacing:0}
.portfolio-intro em{font:48px/1 var(--hand);animation:none}
.personal-note blockquote{font:42px/1.05 var(--hand);max-width:440px}
.hand-word{display:inline-block;white-space:nowrap}
.hand-letter{display:inline-block;transform-origin:50% 75%;transform:translateY(var(--rest-y)) rotate(var(--rest-r));will-change:auto}
@keyframes letter-jitter{0%,100%{transform:translate(0,var(--rest-y)) rotate(var(--rest-r))}25%{transform:translate(.8px,-.6px) rotate(1.8deg)}50%{transform:translate(-.6px,.5px) rotate(-1.6deg)}75%{transform:translate(.4px,.8px) rotate(.7deg)}}
@media(prefers-reduced-motion:no-preference){.hand-letter{animation:letter-jitter var(--letter-duration) steps(1,end) var(--letter-delay) infinite}}
@media(max-width:1100px){.desk{height:700px}.hero-title-wrap{top:0}.portfolio h1{font-size:17.1vw}}
@media(max-width:700px){.desk{height:650px;min-height:0}.hero-title-wrap{inset:0;padding:35px 18px 65px}.hero-title-wrap .hello{font-size:43px;margin-bottom:12px}.portfolio h1{font-size:25vw;line-height:.95;padding:0;letter-spacing:-.08em}.portfolio h1>span{display:block}.hero-intro{font-size:14px;margin:28px 0 20px}.portfolio-intro em{font-size:42px}.story-copy h2{font-size:38px}.notes h2{font-size:39px}.contact-scene h2{font-size:46px}.personal-note blockquote{font-size:36px}.portfolio h2 em{line-height:inherit}}
@media(max-width:380px){.portfolio h1{font-size:24vw}.hero-intro{font-size:12px}.story-copy h2{font-size:32px}.notes h2{font-size:34px}.contact-scene h2{font-size:39px}}
.portfolio h1{display:flex;justify-content:center;gap:.1em;letter-spacing:-.075em}
.story-copy h2{font-size:clamp(38px,5vw,72px)}
@media(max-width:700px){.portfolio h1{flex-direction:column;gap:0;align-items:center}.story-copy h2{font-size:38px}}
@media(max-width:380px){.story-copy h2{font-size:32px}}

/* Draw arrows as vectors so platform emoji substitution cannot change them. */
.arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0}
.pill>.arrow-icon,.text-link>.arrow-icon,.folio-footer>a>.arrow-icon{width:18px;height:18px}
.desk-bottom{justify-content:flex-end}
.studio-art{background:#fff;aspect-ratio:1.25}
.studio-art img{width:100%;height:100%;object-fit:contain}
.email-link{max-width:100%;white-space:normal;line-height:1.5}
@media(max-width:700px){.email-link{font-size:12px;gap:12px;padding:14px 18px}.email-link>span{flex-shrink:0}}
@media(max-width:380px){.email-link{font-size:11px;gap:8px;padding:13px 14px}}

.demo-controls{display:flex;align-items:center;gap:10px}.demo-player button[aria-pressed=true][data-demo-sound]{background:#f5f4ed;color:#17191e;border-color:#f5f4ed}.demo-player figcaption{gap:16px;flex-wrap:wrap}.demo-player .demo-controls button{min-height:40px}.demo-player figcaption>span{font-size:10px}
@media(max-width:700px){.demo-player figcaption{gap:12px}.demo-controls{gap:8px}.demo-player figcaption>span{font-size:8px}.demo-player .demo-controls button{font-size:11px;padding:8px 11px}}