@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@500;600;700&display=swap');
:root{--ink:#303030;--muted:#8a8a8a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:white;color:var(--ink);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #438c96;outline-offset:5px}.wrap,.nav-wrap{width:min(1000px,calc(100% - 64px));margin:auto}header{height:74px;background:#111;color:#fff}.nav-wrap{height:100%;display:flex;align-items:center}.logo{width:48px;height:48px;border:3px solid white;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 28px 'Poppins',Arial,sans-serif;letter-spacing:-5px;padding-right:5px;transform:rotate(-12deg)}.logo span{font-weight:500}.nav-wrap nav{display:flex;gap:30px;margin-left:auto;font-size:12px;align-items:center}nav a{transition:opacity .2s}nav a:hover{opacity:.65}.mail-icon{display:block;margin-left:42px;width:22px;height:22px}.mail-icon svg{width:22px;height:22px;fill:none;stroke:white;stroke-width:1.7}.hero{height:490px;border-bottom:1px solid #e6e6e6;overflow:hidden;background:#fff}.hero-inner{height:100%;width:min(1060px,100%);margin:auto;position:relative}.hero-portrait{position:absolute;bottom:-1px;height:474px;width:auto;left:50%;transform:translateX(-50%);z-index:2;object-fit:contain}.hero-label{position:absolute;top:150px;z-index:3;display:block}.hero-label h1,.hero-label h2{font-family:'Poppins',Arial,sans-serif;font-size:52px;font-weight:600;line-height:1.25;letter-spacing:-3px;margin:0 0 9px}.hero-label p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.designer{left:30px}.coder{right:20px}.hero-label:hover h1,.hero-label:hover h2{color:#666}.code-background{position:absolute;left:61%;bottom:12px;font-family:Consolas,monospace;font-size:14px;color:#d7d7d7;line-height:1.25;transform:rotate(-1deg);z-index:1;white-space:nowrap}.code-background span{font-size:30px}.work{background:#fafafa;padding:62px 0 45px;border-bottom:1px solid #eee}.section-divider{display:flex;align-items:center;gap:30px;margin-bottom:27px}.section-divider>span{height:1px;background:#e3e3e3;flex:1}.section-divider h2{font-size:10px;font-weight:600;letter-spacing:2px;white-space:nowrap;margin:0}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project{text-align:left;background:white;padding:5px;border:1px solid #e6e6e6;border-radius:5px;box-shadow:0 1px 3px #00000005;color:var(--ink);transition:transform .2s,box-shadow .2s}.project:hover{transform:translateY(-5px);box-shadow:0 5px 17px #0000000d}.preview{display:block;height:180px;overflow:hidden;border-radius:2px;position:relative}.browser-bar{display:flex;height:19px;gap:4px;background:#ececec;align-items:center;padding-left:8px}.browser-bar i{width:4px;height:4px;border-radius:50%;background:#ccc}.design-site{display:block;background:#e6e4de;height:100%;position:relative;padding:15px 18px;overflow:hidden}.design-site small{font-size:6px;letter-spacing:1.5px;position:relative;z-index:2}.design-site b{position:relative;z-index:2;display:block;font-family:'Poppins',Arial,sans-serif;font-size:25px;line-height:1.3;letter-spacing:-1px;margin-top:10px}.design-site em{font-family:Georgia,serif;font-weight:400}.paint-disc{position:absolute;width:130px;height:130px;border-radius:50%;right:-7px;top:27px;background:#b7c5c1;box-shadow:inset -35px -5px 0 #3d777a,inset 20px 9px 0 #e4b467}.code-preview{background:#273034}.code-preview .browser-bar{background:#353e41}.code-preview .browser-bar i{background:#657075}.code-preview code{display:block;font:10px/1.85 Consolas,monospace;color:#e4e8e7;padding:22px 17px;white-space:pre}.code-preview code span{color:#88bdc7}.code-preview code em{color:#dfbb7e;font-style:normal}.personal-site{display:flex;height:161px;align-items:center;gap:15px;padding:15px;background:#efefed}.personal-photo{width:93px;height:125px;background:url('../img/germ.jpg') 50% 20% / cover;filter:grayscale(1)}.personal-site>span+span{flex:1}.personal-site small{font-size:6px;letter-spacing:1px}.personal-site b{font-family:'Poppins',Arial,sans-serif;display:block;font-size:32px;letter-spacing:-2px}.personal-site em{font-size:8px;font-style:normal;display:block;color:#777}.project-caption{display:block;padding:16px 13px 13px}.project-caption strong{font-size:13px;font-weight:600;display:block}.project-caption small{font-size:10px;color:#999;display:block;margin-top:3px}.demo-note{text-align:center;font-size:10px;color:#aaa;margin:26px 0 0}.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:70px;padding-bottom:65px}.eyebrow{font-size:9px;letter-spacing:1.5px;color:#999;margin:0 0 15px}h2{font-family:'Poppins',Arial,sans-serif;font-weight:500;letter-spacing:-1px;font-size:28px;line-height:1.4;margin:0 0 20px}.about>div+div{font-size:13px;color:#888}.about p{margin-top:0}.contact{text-align:center;border-top:1px solid #eee;background:#fafafa;padding:55px 0 60px}.contact h2{margin-bottom:10px}.contact p{font-size:12px;color:#888;margin-bottom:22px}.contact a{display:inline-block;background:#292929;padding:12px 22px;color:white;font-size:12px;border-radius:3px}.contact a:hover{background:#555}.contact a span{margin-left:20px}footer{display:flex;align-items:center;justify-content:space-between;padding-top:23px;padding-bottom:23px;color:#999;font-size:10px}.skip{position:fixed;top:-100px;left:10px;background:#fff;z-index:20;padding:10px}.skip:focus{top:10px}dialog{border:1px solid #ddd;background:#fff;color:var(--ink);border-radius:5px;padding:45px;max-width:550px;width:calc(100% - 36px)}dialog::backdrop{background:#0009}dialog>p:not(.eyebrow){color:#888;font-size:13px}.close-dialog{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:26px;color:#777}.dialog-note{border-top:1px solid #eee;margin-top:25px;padding-top:20px;font-size:11px!important}.dialog-contact{display:inline-block;margin-top:12px;font-size:12px;border-bottom:1px solid #888}
@media(min-width:1400px){.hero{height:545px}.hero-portrait{height:529px}.hero-inner{width:1100px}.hero-label{top:175px}.hero-label h1,.hero-label h2{font-size:57px}.designer{left:0}.coder{right:0}}
@media(max-width:950px){.hero-label h1,.hero-label h2{font-size:42px}.hero-label p{font-size:10px}.hero-label{top:155px}.designer{left:35px}.coder{right:25px}.hero-portrait{height:440px}.hero{height:455px}.hero-inner{max-width:850px}.projects{gap:15px}.preview{height:160px}.design-site b{font-size:22px}.personal-site{padding:10px;gap:10px}.personal-photo{width:72px}.code-preview code{font-size:8px}}
@media(max-width:650px){.wrap,.nav-wrap{width:calc(100% - 36px)}header{height:65px}.logo{width:39px;height:39px;font-size:23px}.nav-wrap nav{gap:19px;font-size:10px}.mail-icon{margin-left:23px;width:19px}.mail-icon svg{width:19px}.hero{height:515px}.hero-inner{width:100%}.hero-label{top:32px}.hero-label h1,.hero-label h2{font-size:35px;letter-spacing:-2px;margin-bottom:7px}.hero-label p{font-size:9px;line-height:1.7;max-width:140px}.designer{left:22px}.coder{right:20px}.hero-portrait{height:381px;bottom:-1px}.code-background{font-size:9px;left:60%;bottom:20px}.code-background span{font-size:20px}.work{padding:35px 0}.section-divider{gap:14px;margin-bottom:23px}.section-divider h2{font-size:8px;letter-spacing:1.3px}.projects{grid-template-columns:1fr;gap:18px;max-width:380px;margin:auto}.preview{height:195px}.design-site{padding:18px 25px}.design-site b{font-size:30px}.paint-disc{right:20px;width:160px;height:160px}.code-preview code{font-size:12px;padding:20px}.personal-site{height:177px;padding:18px 25px;gap:26px}.personal-photo{width:115px;height:145px}.personal-site small{font-size:8px}.personal-site b{font-size:40px}.personal-site em{font-size:10px}.project-caption{padding:15px}.about{grid-template-columns:1fr;gap:12px;padding-top:45px;padding-bottom:40px}h2{font-size:25px}.contact{padding:40px 0}dialog{padding:40px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media(max-width:650px){.hero{height:410px}.hero-portrait{width:100%;height:auto;max-width:none}}

/* Beweging: intro, diepte en scroll; alle inhoud blijft zonder JavaScript zichtbaar. */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1)}
.reading-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;background:linear-gradient(90deg,#337f85,#e2ac55,#df6d55);transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}


.hero-inner{isolation:isolate;--pointer-x:0px;--pointer-y:0px;--design-light:0;--code-light:0}
.hero-inner:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 32% 80%,#36848a12,transparent 43%);opacity:var(--design-light);transition:opacity .7s}
.hero-inner:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 70% 80%,#6992b715,transparent 43%);opacity:var(--code-light);transition:opacity .7s}
.hero-portrait{transform:translateX(calc(-50% + var(--pointer-x))) translateY(var(--pointer-y));transition:transform .7s var(--motion-ease);will-change:transform}
.hero-label{transition:transform .65s var(--motion-ease)}
.hero-label h1,.hero-label h2{transition:color .3s,letter-spacing .5s var(--motion-ease);position:relative;width:fit-content}
.hero-label h1:after,.hero-label h2:after{content:'';position:absolute;left:2px;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#3f8a8e,#e6b257,#dd755c);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--motion-ease)}
.hero-label:hover h1,.hero-label:hover h2{color:#303030;letter-spacing:-1.6px}
.hero-label:hover h1:after,.hero-label:hover h2:after{transform:scaleX(1)}
.code-background{transition:opacity .7s,transform .7s;opacity:.72}
.hero-inner:has(.coder:hover) .code-background{opacity:1;transform:translateY(-7px)}
.hero-inner:has(.designer:hover){--design-light:1}
.hero-inner:has(.coder:hover){--code-light:1}
.motion-enabled .hero.is-intro .hero-portrait{animation:portrait-arrives 1.3s var(--motion-ease) both}
.motion-enabled .hero.is-intro .designer{animation:design-arrives 1.1s .25s var(--motion-ease) both}
.motion-enabled .hero.is-intro .coder{animation:code-arrives 1.1s .4s var(--motion-ease) both}
.motion-enabled .hero.is-intro .code-background{animation:code-arrives 1.5s .7s var(--motion-ease) both}
.motion-enabled .hero.is-intro .hero-label p{animation:copy-arrives 1s .65s var(--motion-ease) both}
@keyframes portrait-arrives{from{opacity:0;filter:blur(7px);transform:translateX(-50%) translateY(70px) scale(.97)}to{opacity:1;filter:blur(0);transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes design-arrives{from{opacity:0;transform:translateX(-45px)}to{opacity:1;transform:translateX(0)}}
@keyframes code-arrives{from{opacity:0;transform:translateX(45px)}to{opacity:1;transform:translateX(0)}}
@keyframes copy-arrives{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.motion-enabled .reveal-ready{opacity:0;transform:translateY(36px);transition:opacity .85s var(--motion-ease),transform .85s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-enabled .reveal-ready.is-visible{opacity:1;transform:translateY(0)}
.projects{perspective:1100px}
.project{--tilt-x:0deg;--tilt-y:0deg;--shine-x:50%;--shine-y:50%;position:relative;transform-style:preserve-3d;transition:transform .45s var(--motion-ease),box-shadow .45s,opacity .8s}
.project.is-visible:hover,.project:hover{transform:translateY(-8px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 15px 28px #00000012;transition-delay:0ms}
.project:after{content:'';pointer-events:none;position:absolute;inset:0;border-radius:5px;opacity:0;background:radial-gradient(circle at var(--shine-x) var(--shine-y),#ffffff40,transparent 65%);transition:opacity .4s}
.project:hover:after{opacity:1}
.paint-disc{transition:transform 1s var(--motion-ease)}
.project:hover .paint-disc{transform:rotate(45deg) scale(1.1)}
.personal-photo{transition:filter .6s,transform .6s}
.project:hover .personal-photo{filter:grayscale(0);transform:scale(1.04)}
.contact a{transition:transform .3s,background .3s,box-shadow .3s}
.contact a:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0002}
nav a{position:relative}nav a:after{content:'';height:1px;background:#fff;position:absolute;left:0;right:0;bottom:-7px;transform:scaleX(0);transition:transform .3s;transform-origin:left}nav a:hover:after,nav a[aria-current]:after{transform:scaleX(1)}
.motion-toggle{border:0;padding:0;background:transparent;font-size:10px;color:#888;cursor:pointer;margin-left:auto;margin-right:25px}
.motion-toggle:hover{color:#333}
.motion-enabled dialog[open]{animation:dialog-arrives .35s var(--motion-ease)}
@keyframes dialog-arrives{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:650px){.nav-wrap nav{gap:15px}.mail-icon{margin-left:17px}.motion-toggle{margin-right:18px}.hero-portrait{will-change:auto}}
.motion-disabled *{animation:none!important;transition:none!important}.motion-disabled .reveal-ready{opacity:1!important;transform:none!important}.motion-disabled .hero-portrait{transform:translateX(-50%)!important}.motion-disabled .project:hover{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal-ready{opacity:1!important;transform:none!important}.hero-portrait{transform:translateX(-50%)!important}}
/* Meer code achter het portret. */
.code-background{left:17%;top:245px;bottom:auto;width:82%;height:240px;white-space:nowrap;font:13px/1.7 Consolas,monospace;color:#b3bdc1;opacity:.82;transform:none}
.code-background .code-line{position:absolute;font:inherit;display:block;letter-spacing:-.3px}
.code-line.c1{top:0;left:40%}.code-line.c2{top:30px;left:57%}.code-line.c3{top:72px;left:0;color:#c3bab0}.code-line.c4{top:80px;left:51%}.code-line.c5{top:111px;left:58%}.code-line.c6{top:142px;left:51%}.code-line.c7{top:155px;left:3%;color:#bbc8c5}.code-line.c8{top:187px;left:60%}
.subpage main{min-height:75vh}.page-heading{padding-top:36px;padding-bottom:55px}.back-link{font-size:11px;color:#999;display:inline-block;margin-bottom:43px}.back-link:hover{color:#333}.page-heading .eyebrow{margin-bottom:19px;color:#888}.page-heading h1{font:600 clamp(38px,5vw,59px)/1.17 'Poppins',Arial,sans-serif;letter-spacing:-2.7px;margin:0 0 23px}.page-heading h1>span{color:#8e8e8e}.page-lead{font-size:15px;line-height:1.8;color:#888;margin:0;max-width:550px}.subpage .page-heading{animation:page-arrives .75s cubic-bezier(.2,.75,.25,1) both}@keyframes page-arrives{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.bio{display:grid;grid-template-columns:.8fr 1fr;gap:75px;align-items:center;padding-bottom:75px}.bio-image{position:relative;overflow:hidden;background:#eee}.bio-image img{width:100%;height:440px;display:block;object-fit:cover;object-position:50% 30%;filter:grayscale(1);transition:filter .8s}.bio-image:hover img{filter:grayscale(0)}.bio-image>span{position:absolute;bottom:0;left:0;right:0;background:#fffE;padding:12px 18px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase}.bio-copy p:not(.eyebrow){font-size:13px;color:#888;line-height:1.9}.bio-copy h2{font-size:26px}.bio-copy blockquote{font:italic 23px/1.5 Georgia,serif;border-left:2px solid #428087;padding:4px 0 4px 20px;margin:25px 0}.text-link{display:inline-block;font-size:12px;border-bottom:1px solid #aaa;padding-bottom:5px}.interests{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;border-top:1px solid #eee;padding-top:45px;padding-bottom:65px}.interests>div>span{font:12px Consolas,monospace;color:#aaa}.interests h3{font:500 18px 'Poppins',Arial,sans-serif;letter-spacing:-.5px;margin:16px 0 10px}.interests p{font-size:12px;color:#888}.portfolio-page{padding-bottom:70px}.filter-bar{display:flex;gap:25px;margin-bottom:28px;border-bottom:1px solid #eee}.filter-bar button{border:0;background:none;color:#999;padding:0 0 13px;font-size:12px;border-bottom:2px solid transparent}.filter-bar button[aria-pressed=true]{color:#333;border-bottom-color:#333}.filter-bar small{font-size:8px;margin-left:5px}.portfolio-page .projects{gap:23px}.portfolio-page .project[hidden]{display:none}.subpage .project{display:block}.subpage .project-caption{padding-bottom:20px}.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:75px;padding-bottom:90px}.contact-info h2{font-size:23px}.contact-info>p{font-size:13px;color:#888}.contact-address{display:inline-block;border-bottom:1px solid #aaa;padding:10px 0;font-size:19px;letter-spacing:-.5px}.copy-address{display:block;border:0;background:none;padding:13px 0 0;color:#999;font-size:10px}#copy-status{min-height:20px;font-size:11px}.contact-location{border-top:1px solid #eee;margin-top:26px;padding-top:25px;font-size:12px}.contact-location small{display:inline-block;font-size:10px;color:#999;margin-top:8px}.location-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#4a8582;margin-right:6px}.contact-form{padding:28px;background:#fafafa;border:1px solid #eee;border-radius:4px}.contact-form label{display:block;font-size:11px;font-weight:600;color:#666;margin-bottom:20px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;font:12px 'Open Sans',Arial,sans-serif;padding:12px 13px;margin-top:9px;border:1px solid #ddd;background:white;border-radius:2px;color:#444;outline-offset:3px}.contact-form textarea{resize:vertical;min-height:120px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid #508d92}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#aaa}.send-button{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:13px 18px;background:#292929;color:#fff;border:0;border-radius:3px;font-size:12px;transition:background .3s}.send-button:hover{background:#476e70}.form-note{color:#999;font-size:10px;margin-bottom:0;max-width:340px}.project-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.project-tags>span{font-size:9px;border:1px solid #ddd;border-radius:3px;padding:4px 9px;color:#888}.design-showcase{background:#e6e4de;padding:30px 45px;overflow:hidden;position:relative}.showcase-nav{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;border-bottom:1px solid #b9bdb1;padding-bottom:19px;position:relative;z-index:1}.showcase-nav>span{letter-spacing:0;font-size:9px}.showcase-content{position:relative;padding:55px 0 65px}.showcase-content>p{font-size:9px;letter-spacing:1.6px;position:relative;z-index:1}.showcase-content h2{font:500 clamp(55px,8vw,102px)/1.05 'Poppins',Arial,sans-serif;letter-spacing:-5px;position:relative;z-index:1}.showcase-content h2 em{font-family:Georgia,serif;font-weight:400}.showcase-orbit{position:absolute;right:4%;top:27px;width:330px;height:330px;border-radius:50%;background:#b7c5c1;box-shadow:inset -85px -10px 0 #3d777a,inset 50px 20px 0 #e4b467;transition:transform 1s}.design-showcase:hover .showcase-orbit{transform:rotate(30deg)}.showcase-bottom{border-top:1px solid #b9bdb1;padding-top:17px;font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between}.project-story{display:grid;grid-template-columns:.8fr 1fr;gap:80px;padding-top:65px;padding-bottom:60px}.project-story>div+div p{font-size:13px;color:#888}.project-story .concept-label{font-size:10px;color:#aaa}.palette{display:flex;align-items:center;gap:10px;margin-top:22px}.palette>span{width:24px;height:24px;border-radius:50%}.palette small{font-size:10px;color:#999;margin-left:10px}.next-project{border-top:1px solid #eee;padding-top:25px;padding-bottom:35px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#888}.next-project a:hover{color:#333}.code-showcase{display:grid;grid-template-columns:1fr 1fr;background:#fafafa;border:1px solid #eee;border-radius:4px;overflow:hidden}.code-editor{background:#273034;color:#dce3e3;min-height:370px}.editor-title{background:#343e42;padding:15px 22px;font-size:11px;color:#bbb}.editor-title>span{font-size:8px;letter-spacing:2px;color:#73868a;margin-right:25px}.code-editor pre{font:13px/2 Consolas,monospace;white-space:pre-wrap;padding:22px 30px}.token-purple{color:#b6c3e5}.token-gold{color:#dabb83}.token-comment{color:#859997}.live-result{--demo-accent:#3d777a;padding:35px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.live-result .eyebrow{font-size:8px;letter-spacing:2px}.live-result h2{color:var(--demo-accent);font-size:30px;transition:color .4s;margin-bottom:10px}.live-result>p:not(.eyebrow){font-size:11px;color:#888;max-width:250px}.result-orbit{width:55px;height:55px;border-radius:50%;background:var(--demo-accent);margin:6px auto 20px;transition:background .4s,transform .5s;box-shadow:inset -15px -5px 0 #ffffff30}.live-result:hover .result-orbit{transform:rotate(45deg)}.demo-options{display:flex;gap:11px;justify-content:center;margin:12px 0}.demo-options button{width:21px;height:21px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #ddd}.demo-options button[aria-pressed=true]{box-shadow:0 0 0 2px #999}.demo-options [data-accent=teal]{background:#3d777a}.demo-options [data-accent=ochre]{background:#c99b48}.demo-options [data-accent=coral]{background:#cc705d}.live-result .demo-hint{font-size:9px!important;margin-bottom:0}
@media(min-width:1400px){.code-background{top:285px}}
@media(max-width:950px){.code-background{left:12%;font-size:11px;top:240px}.bio{gap:35px}.contact-layout{gap:35px}.field-pair{grid-template-columns:1fr;gap:0}.showcase-orbit{width:270px;height:270px;right:0}.code-editor pre{font-size:11px;padding:20px}}
@media(max-width:650px){.code-background{top:225px;left:0;width:100%;font-size:8px;height:175px;opacity:.7}.code-line.c1{left:5%;top:0}.code-line.c2{left:62%;top:23px}.code-line.c3{left:0;top:68px}.code-line.c4{left:67%;top:90px}.code-line.c5{left:72%;top:108px}.code-line.c6{left:64%;top:132px}.code-line.c7{left:0;top:142px}.code-line.c8{left:70%;top:156px}.page-heading{padding-top:25px;padding-bottom:35px}.back-link{margin-bottom:30px}.page-heading h1{font-size:38px;letter-spacing:-2px}.page-lead{font-size:13px}.bio{grid-template-columns:1fr;gap:30px;padding-bottom:35px}.bio-image img{height:380px}.bio-copy h2{font-size:24px}.interests{grid-template-columns:1fr;gap:20px;padding-top:30px;padding-bottom:35px}.interests>div{border-bottom:1px solid #eee;padding-bottom:15px}.interests h3{margin-top:8px}.portfolio-page{padding-bottom:40px}.filter-bar{gap:19px}.filter-bar button{font-size:10px}.contact-layout{grid-template-columns:1fr;gap:30px;padding-bottom:45px}.contact-form{padding:22px}.field-pair{grid-template-columns:1fr}.contact-info h2{font-size:23px}.contact-location{margin-top:13px;padding-top:18px}.design-showcase{padding:20px}.showcase-nav{font-size:8px}.showcase-nav>span{font-size:7px}.showcase-content{padding:45px 0 55px}.showcase-content h2{font-size:65px;letter-spacing:-3px}.showcase-orbit{width:180px;height:180px;right:-40px;top:35px;box-shadow:inset -50px -8px 0 #3d777a,inset 30px 12px 0 #e4b467}.showcase-bottom{font-size:6px}.project-story{grid-template-columns:1fr;gap:12px;padding-top:40px;padding-bottom:30px}.next-project{font-size:10px}.code-showcase{grid-template-columns:1fr}.code-editor{min-height:300px}.code-editor pre{font-size:12px;padding:20px}.live-result{padding:35px}.subpage footer{font-size:9px}}
.bio-image img{object-position:50% 42%;filter:none}
.projects>*{min-width:0}
.contact-form{position:relative}.contact-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.contact-status{font-size:12px;color:#3d777a;line-height:1.7;margin:16px 0 0}.contact-status:empty{display:none}.contact-status.is-error{color:#a23c30}.send-button:disabled{opacity:.65;cursor:wait}
@media(max-width:650px){.projects{grid-template-columns:minmax(0,1fr)}.code-preview code{font-size:clamp(9px,3vw,12px)}.personal-site{gap:clamp(12px,4vw,26px)}.personal-site>span+span{min-width:0}.personal-site b{font-size:clamp(30px,10vw,40px)}}