@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#363014;--yellow:#f5d337}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#eee5ac;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;padding:6vh 4.8vw 25px;background-image:radial-gradient(ellipse at 70% 75%,#fff6c9,transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}.stage{position:relative;max-width:1450px;height:min(790px,85vh);min-height:640px;margin:auto;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 77% 60%,#ffe97a 0%,transparent 63%),linear-gradient(120deg,#ccab22,#edcc36 50%,#f9dc52);box-shadow:0 2px 4px #796d3040,0 25px 65px #a2934325;border:1px solid #c6ac4360}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:relative;z-index:5}.logo{font-size:25px;letter-spacing:-1.8px;font-weight:800}.logo span{font-size:10px;vertical-align:top;letter-spacing:0;margin-left:2px}nav{display:flex;align-items:center;gap:5px;background:#fff9ca28;border:1px solid #fff8c216;border-radius:40px;padding:6px}nav a,nav button{font-size:13px;padding:11px 23px;background:transparent;border-radius:25px}nav .active{background:#fff6bd3d}.profile{background:transparent;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.avatar{width:28px;height:28px;border-radius:50%;background:#ffeeb0;overflow:hidden}.avatar img{width:39px;margin:-2px -6px}.tiny-arrow{font-size:18px;margin-left:8px}.watermark{position:absolute;top:105px;left:50%;transform:translateX(-50%);font-family:'Manrope',sans-serif;font-size:clamp(100px,15.5vw,235px);letter-spacing:-.075em;font-weight:800;color:#fff4b6;opacity:.58;line-height:1;white-space:nowrap}.intro{position:absolute;z-index:3;top:36%;left:7%;width:29%}.available{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px}.available>span{border-radius:50%;background:#fff09a;display:grid;place-items:center;width:22px;height:22px}.available small{display:block;font-size:8px;letter-spacing:1px;opacity:.65;margin-top:3px}h1{font-size:clamp(23px,2.3vw,35px);line-height:1.13;letter-spacing:-1.1px;margin:24px 0 5px;font-family:Manrope,Arial,sans-serif;font-weight:800}.tagline{font-style:italic;opacity:.74;margin:9px 0 24px;font-size:16px}.description{font-size:13px;line-height:1.8;max-width:260px;opacity:.75}.actions{display:flex;gap:12px;align-items:center;margin-top:23px}.primary{border-radius:30px;background:#39331a;color:#fff4ba;padding:16px 22px;font-size:12px;font-weight:700;box-shadow:0 7px 12px #6d591426}.primary span{margin-left:16px}.round{background:#d9b93060;border-radius:50%;height:38px;width:38px}.character-wrap{position:absolute;inset:0;pointer-events:none}.character{position:absolute;height:78%;width:auto;left:50%;bottom:10%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 20px 15px #69541920);mask-image:linear-gradient(#000 88%,transparent 100%)}.character-caption{position:absolute;top:56%;left:35%;font-size:8px;letter-spacing:2.5px;opacity:.65;white-space:nowrap;z-index:1}.work-preview{position:absolute;top:32%;left:73%;width:28%;z-index:4}.work-heading{font-size:10px;font-weight:700;letter-spacing:1.5px;margin:0 0 12px 4px}.work-heading span{font-size:9px;opacity:.6;margin-left:18px}.cards{display:flex;gap:12px;transition:transform .45s ease}.project-card{text-align:left;flex:0 0 173px;border:1px solid #fff9ce88;border-radius:21px;background:#fff7cbbd;padding:16px 12px 12px;box-shadow:0 8px 30px #ad901410;transition:transform .25s}.project-card:hover{transform:translateY(-6px)}.project-card strong{font-size:16px;letter-spacing:-.5px}.project-card p{font-size:10px;line-height:1.45;opacity:.65;margin:4px 0 12px}.project-art{height:150px;border-radius:12px;padding:12px;display:flex;flex-direction:column;overflow:hidden}.art-one{background:#27261e;color:#eee7cc}.project-art>span{font-size:10px}.project-art b{font-size:29px;line-height:1.05;margin:auto 0;font-weight:500;letter-spacing:-1.5px}.project-art i{font-size:6px;font-style:normal;letter-spacing:1.5px}.art-two{background:#e8b830;color:#3a301d}.art-two b{font-size:75px;font-weight:800}.art-two b span{font-size:35px;vertical-align:top}.art-three{background:#ebbea4}.card-link{display:inline-block;font-size:9px;background:#b39730;color:#fff9df;padding:8px 11px;border-radius:20px;margin-top:12px}.work-bottom{display:flex;justify-content:space-between;align-items:center;width:173px;padding:7px 4px}.work-bottom p{font-size:10px;line-height:1.5;opacity:.7}.carousel{background:transparent;border:1px solid #68551930;border-radius:50%;width:24px;height:24px;font-size:12px}.code{position:absolute;font-family:monospace;color:#806c23;opacity:.18;font-size:12px}.code-one{left:2%;top:24%}.code-two{left:-2%;top:67%}.ghost-square{position:absolute;width:20px;height:27px;border:2px solid #fff4b62e;left:4%;top:51%;transform:rotate(-8deg)}footer{position:absolute;bottom:0;height:77px;left:0;right:0;padding:0 7%;display:flex;align-items:center;gap:28px;border-top:1px solid #eed97480;z-index:5}footer .logo{font-size:21px}footer>span{font-size:10px;opacity:.55}footer button{margin-left:auto;background:transparent;font-size:12px}footer button span{margin-left:20px}.under-label{max-width:1450px;margin:20px auto;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.7px;opacity:.5}button:hover,.primary:hover{filter:brightness(1.08)}button:focus-visible,a:focus-visible{outline:3px solid #584b14;outline-offset:4px}dialog{border:1px solid #ebd15e;border-radius:24px;background:#fff5c9;color:var(--ink);width:min(540px,90vw);padding:42px;box-shadow:0 30px 100px #34280040}dialog::backdrop{background:#29210875;backdrop-filter:blur(8px)}dialog h2{font:800 36px Manrope,Arial;margin:10px 0 20px;letter-spacing:-1.5px}dialog p{line-height:1.8;font-size:16px}dialog .eyebrow{font-size:11px;letter-spacing:2px}dialog .close{position:absolute;top:12px;right:18px;background:none;font-size:28px}dialog .project-art{height:230px;margin:20px 0}dialog .project-art b{font-size:54px}.dialog-project{width:100%;background:#edd66e;text-align:left;padding:15px 18px;margin:6px 0;border-radius:12px;display:flex;justify-content:space-between}.note{opacity:.6;font-size:12px!important}
@media(min-width:1600px){.watermark{font-size:235px}}@media(max-width:1050px){body{padding:4vh 3vw}.stage{min-height:650px}header{padding:0 5%}nav a,nav button{padding:10px 15px}.intro{left:6%;width:32%}.character{height:68%;left:51%;bottom:12%}.work-preview{left:76%;top:34%}.project-card{flex-basis:158px}.description{max-width:220px}.watermark{top:130px}.profile{font-size:0}.profile .tiny-arrow{display:none}.character-caption{display:none}}
@media(max-width:700px){body{padding:16px 14px;background:#eee5ac}.stage{height:auto;min-height:1030px;border-radius:20px}header{height:76px;padding:0 7%}.logo{font-size:23px}nav{gap:0;padding:4px}nav a,nav button{padding:9px 10px;font-size:11px}.profile{display:none}.watermark{top:103px;font-size:20vw;letter-spacing:-.075em}.character{height:390px;top:135px;bottom:auto;left:50%;mask-image:linear-gradient(#000 83%,transparent 100%)}.intro{top:490px;left:8%;width:84%;text-align:center}.available{justify-content:center}h1{font-size:32px;margin-top:20px}.tagline{font-size:14px;margin-bottom:16px}.description{font-size:13px;max-width:290px;margin:auto}.actions{justify-content:center;margin-top:19px}.work-preview{top:790px;left:8%;width:84%}.work-heading{margin-bottom:10px}.cards{gap:10px}.project-card{flex-basis:calc(50% - 5px);padding:13px;border-radius:15px}.project-card p,.project-art,.card-link{display:none}.project-card strong{font-size:15px}.project-card:after{content:'View concept';font-size:10px;display:block;margin-top:8px;opacity:.65}.work-bottom{width:100%;padding-top:8px}.work-bottom p{font-size:10px;margin:4px}footer{height:62px;padding:0 8%;gap:15px}footer>span{font-size:8px;max-width:120px}footer button{font-size:10px}footer button span{margin-left:6px}.under-label{font-size:7px;letter-spacing:1px}.under-label span:last-child{display:none}.code-one{top:200px}.code-two{top:470px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Full viewport presentation */
body{padding:0;background:#edcc36}
.stage{width:100%;max-width:none;height:100svh;min-height:680px;margin:0;border:0;border-radius:0;box-shadow:none}
.under-label{display:none}
.watermark{font-size:16.5vw;top:14%;}
header{height:13vh;min-height:86px}
.character{height:81%;bottom:9%}
@media(min-width:1600px){.watermark{font-size:16.5vw}}
@media(max-width:1050px){body{padding:0}.stage{min-height:680px}.character{height:72%;bottom:11%}.watermark{top:18%}}
@media(max-width:700px){body{padding:0}.stage{height:auto;min-height:max(1030px,100svh);border-radius:0}header{height:76px;min-height:76px}.watermark{top:103px;font-size:20vw}.character{height:390px;top:135px;bottom:auto}}
/* Ahmad: page navigation, animated roles and separated content columns. */
.logo{letter-spacing:-1px;font-size:23px}
.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}
.role-watermark{top:19%;width:90%;text-align:center;font-size:clamp(30px,7.1vw,112px);letter-spacing:-.065em;opacity:.58;min-height:1.2em}
.typing-cursor{font-weight:400;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.intro{left:6%;width:27%;top:39%}
.character-wrap{left:33%;right:auto;width:37%;top:28%;bottom:10%;overflow:hidden}
.character{left:50%;top:auto;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;max-width:100%;}
.character-caption{display:none}
.work-preview{left:73%;width:24%;top:37%;overflow:hidden;padding-top:8px}
.cards{position:relative;overflow:hidden;transform:none!important;gap:12px;padding:6px 0;scrollbar-width:none}
.project-card{display:block;flex:0 0 173px;min-width:0}
.project-card:hover{transform:translateY(-3px)}
.work-bottom{width:100%;max-width:235px}.work-heading{font-size:9px;letter-spacing:1px;white-space:nowrap}.work-heading span{margin-left:10px}
.inner-page .stage{height:auto;min-height:100svh;overflow:hidden;padding-bottom:100px}
.page-content{position:relative;width:86%;max-width:1100px;margin:55px auto 70px}
.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700}
.page-content h1{font-size:clamp(45px,7vw,92px);line-height:1.05;letter-spacing:-.06em;margin:20px 0 25px}
.page-lead{font-size:20px;max-width:610px;line-height:1.7}.page-content p{line-height:1.8}.page-note{font-size:14px;opacity:.7}
.github-feature{display:block;padding:35px;border-radius:22px;background:#34311d;color:#fff0a5;margin-top:32px;max-width:620px}.github-feature>span{font-size:13px;letter-spacing:1px}.github-feature h2{font-size:clamp(32px,5vw,60px);letter-spacing:-2px;line-height:1.1;margin:28px 0}
.about-content{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}.about-portrait{width:100%;mask-image:linear-gradient(#000 85%,transparent)}.skill-tags{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}.skill-tags span{font-size:13px;padding:10px 15px;border:1px solid #63501640;border-radius:30px}.inline-button{display:inline-block;margin-top:12px}
.contact-links{max-width:720px;margin-top:35px;display:grid;gap:12px}.contact-links a{display:flex;justify-content:space-between;gap:20px;align-items:center;background:#fff5ba77;border:1px solid #fff9d488;padding:24px;border-radius:16px;overflow-wrap:anywhere}.contact-links a:hover{background:#fff5babf}.contact-links span{font-size:13px}.contact-links strong{font-size:17px}
@media(max-width:1050px) and (min-width:701px){.intro{left:5%;width:28%}.character-wrap{left:34%;width:36%;top:32%}.work-preview{left:73%;width:24%}.role-watermark{top:21%}.description{max-width:100%}h1{font-size:25px}.tagline{font-size:14px}.actions{gap:5px}.primary{padding:15px 17px}.round{flex-shrink:0}}
@media(max-width:700px){.logo{font-size:20px}.role-watermark{top:102px;font-size:8.4vw;width:94%;white-space:nowrap}.character-wrap{left:15%;width:70%;top:145px;height:340px;bottom:auto}.character{height:100%;width:100%;top:auto;bottom:0}.intro{left:8%;width:84%;top:500px}.work-preview{left:8%;width:84%;top:808px}.stage{min-height:1080px}.project-card{flex-basis:calc(65% - 6px)}.project-card:after{display:none}.project-card .card-link{display:inline-block;background:transparent;padding:0;margin-top:10px;color:var(--ink)}.work-heading{font-size:10px}.page-content{margin-top:35px}.about-content{grid-template-columns:1fr;gap:20px}.about-portrait{max-width:330px;margin:auto}.page-lead{font-size:17px}.contact-links a{align-items:flex-start;flex-direction:column;gap:9px;padding:20px}.contact-links strong{font-size:16px}.inner-page .stage{min-height:100svh}header{padding:0 6%}nav a{padding:9px}.inner-page footer>span{max-width:150px}}
@media(prefers-reduced-motion:reduce){.typing-cursor{animation:none}}
@media(min-width:701px){.character{width:145%;max-width:none;height:130%;object-fit:contain;object-position:center bottom}.character-wrap{overflow:hidden}}
/* Layer the animated title behind Ahmad's portrait. */
.role-watermark{top:35%;z-index:1;pointer-events:none}
.character-wrap{z-index:2}
@media(max-width:1050px) and (min-width:701px){.role-watermark{top:34%}}
@media(max-width:700px){.role-watermark{top:205px}}
/* Keep the title in its own upper band, with only the portrait crossing it. */
@media(min-width:701px){
 #home .role-watermark{top:20%;width:90%;font-size:clamp(38px,7.1vw,112px);line-height:1.12;z-index:1}
 #home .intro{top:39%;left:5%;width:27%}
 #home .work-preview{top:39%;left:74%;width:23%;padding-top:0}
 #home .character-wrap{top:19%;bottom:11%;left:33%;width:38%;overflow:hidden;z-index:2}
 #home .character{width:145%;height:130%;max-width:none;left:50%;bottom:0;top:auto;object-fit:contain;object-position:center bottom}
 #home .work-heading{margin-bottom:15px}
 #home .code-one{top:17%}
}
@media(max-width:700px){
 #home .role-watermark{top:168px;font-size:8.4vw;line-height:1.12}
 #home .character-wrap{top:115px;height:355px;left:15%;width:70%}
 #home .intro{top:495px}
 #home .work-preview{top:808px}
}
@media(min-width:701px){
 #home .role-watermark{top:24%}
 #home .character-wrap{top:13%;bottom:17%}
 #home .intro,#home .work-preview{top:35%}
}
/* Raise the composition and fit the complete portrait without side clipping. */
@media(min-width:701px){
 #home .role-watermark{top:19%}
 #home .intro,#home .work-preview{top:29%}
 #home .character-wrap{top:10%;bottom:23%;left:32%;width:40%;overflow:visible}
 #home .character{width:128%;height:128%;max-width:none;object-fit:contain;object-position:center bottom}
}
@media(max-width:700px){
 #home .role-watermark{top:143px}
 #home .character-wrap{top:90px;height:355px;overflow:visible}
 #home .intro{top:465px}
 #home .work-preview{top:778px}
}
/* Slightly enlarge the central portrait while retaining its full edges. */
@media(min-width:701px){#home .character{width:138%;height:138%}}
@media(max-width:700px){#home .character{width:108%;height:108%;max-width:none}}
/* Shared full-width footer, inspired by the supplied reference. */
.site-footer{position:relative;inset:auto;height:auto;min-height:330px;width:100%;padding:55px 7% 32px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:60px;align-items:start;background:radial-gradient(ellipse at 52% 0%,#181810 0%,#090a09 65%);color:#eee;border-top:1px solid #23241d;font-size:14px;z-index:auto}
.site-footer .footer-brand{font:800 65px/1 Manrope,Arial,sans-serif;letter-spacing:-7px;display:inline-block;margin-bottom:19px;color:#fff}.footer-brand span{color:#f5d337}
.site-footer p{font-size:14px;line-height:1.75;margin:0;max-width:350px}.site-footer .footer-summary{font-weight:600}.site-footer .footer-muted{color:#94958f;font-weight:400;margin-top:5px}.site-footer .footer-copyright{font-size:11px;letter-spacing:1.2px;color:#74766f;margin-top:32px}
.site-footer h2{font-size:11px;letter-spacing:1.5px;color:#7e8178;font-weight:600;margin:5px 0 20px}.footer-status{text-align:center}.site-footer .footer-status p{margin:16px auto 0}.status-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:30px;border:1px solid #303128;background:#1b1d17;font-size:13px;font-weight:600;white-space:nowrap}.status-badge>span{width:8px;height:8px;background:#f5d337;border-radius:50%}.footer-connect{text-align:right}.footer-socials{display:flex;justify-content:flex-end;gap:12px;margin-bottom:25px}.footer-socials a{width:42px;height:42px;display:grid;place-items:center;background:#171816;border:1px solid #292b26;border-radius:50%;color:#aeb1a6;transition:color .2s,border-color .2s}.footer-socials a:hover{color:#f5d337;border-color:#f5d337}.footer-socials svg{width:18px;height:18px;fill:currentColor}.footer-socials a:last-child svg{fill:none;stroke:currentColor;stroke-width:1.7}.footer-email{font-size:14px;font-weight:600;overflow-wrap:anywhere}.footer-email:hover{color:#f5d337}
.inner-page .stage{padding-bottom:20px}
@media(max-width:900px){.site-footer{gap:25px;padding:45px 5% 30px;grid-template-columns:1.1fr 1fr 1fr}.site-footer p{font-size:13px}.footer-email{font-size:12px}}
@media(max-width:700px){.site-footer{grid-template-columns:1fr;gap:32px;padding:38px 8%}.footer-status,.footer-connect{text-align:left}.footer-socials{justify-content:flex-start}.site-footer .footer-status p{margin:14px 0 0}.site-footer .footer-brand{font-size:58px}.site-footer p{max-width:100%;font-size:14px}.footer-email{font-size:14px}.site-footer .footer-copyright{margin-top:20px}}
/* A tonal yellow footer with a typographic invitation. */
.site-footer{background:radial-gradient(ellipse at 80% 0%,#ffe978,transparent 65%),linear-gradient(115deg,#dfbc28,#f5d744);color:#363014;border-top:1px solid #7f681e30;min-height:290px;grid-template-columns:1.5fr 1fr 1fr;gap:38px;padding:45px 6% 28px}
.footer-kicker{display:block;font-size:10px;letter-spacing:2px;font-weight:600;margin-bottom:17px;color:#716021}
.footer-invitation{display:block;position:relative;width:fit-content;padding-right:43px;font-family:Manrope,Arial,sans-serif;font-size:clamp(25px,3.5vw,51px);line-height:1.13;letter-spacing:-1.7px;font-weight:800}
.footer-invitation>span{position:absolute;right:0;top:0;font-size:35px;font-weight:400;transition:transform .2s}.footer-invitation:hover>span{transform:translate(3px,-3px)}
.site-footer h2{color:#716021;font-size:10px;letter-spacing:1.7px;margin-top:0}
.site-footer .footer-muted{color:#716021;font-size:13px}.site-footer .footer-copyright{color:#7a6724;font-size:10px;margin-top:30px;letter-spacing:1px}
.status-badge{background:#fff4b54d;border-color:#8b74232b;color:#443917;font-size:12px;padding:10px 13px}.status-badge>span{background:#665218}
.footer-socials a{background:#fff5b650;border-color:#8b74232b;color:#51431b}.footer-socials a:hover{background:#3d341b;color:#fff2af;border-color:#3d341b}.footer-email{color:#51431b;font-size:13px}.footer-email:hover{color:#211c0d;text-decoration:underline}
@media(max-width:900px){.site-footer{gap:25px;grid-template-columns:1.3fr 1fr 1fr;padding:38px 5% 28px}.footer-invitation{font-size:29px;letter-spacing:-1px;padding-right:28px}.footer-invitation>span{font-size:27px}.footer-email{font-size:11px}}
@media(max-width:700px){.site-footer{grid-template-columns:1fr 1fr;gap:30px 20px;padding:34px 8%}.footer-about{grid-column:1/-1}.footer-invitation{font-size:38px;padding-right:40px}.footer-invitation>span{font-size:34px}.footer-status,.footer-connect{text-align:left}.footer-socials{gap:8px}.footer-socials a{width:36px;height:36px}.footer-email{font-size:12px}.site-footer .footer-muted{font-size:12px}.status-badge{font-size:11px;padding:9px 10px}}
@media(max-width:380px){.site-footer{grid-template-columns:1fr}.footer-about{grid-column:auto}}
/* Seamless technology strip below the hero portrait. */
#home .skills-marquee{position:absolute;bottom:0;left:0;width:100%;height:100px;display:flex;align-items:center;overflow:hidden;border-top:1px solid #79641c25;background:#fff1a51f;z-index:3;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.skills-track{display:flex;width:max-content;animation:skills-scroll 42s linear infinite}
.skills-list{display:flex;align-items:center;gap:52px;flex-shrink:0;list-style:none;margin:0;padding:0 52px 0 0}
.skills-list li{display:flex;gap:13px;align-items:center;white-space:nowrap;font:700 19px Manrope,Arial,sans-serif;color:#766321}
.skill-symbol{font:800 23px/1 ui-monospace,monospace;letter-spacing:-1.5px;min-width:37px;display:grid;place-items:center;color:#8b7428}
.skills-marquee:hover .skills-track,.skills-marquee:focus .skills-track{animation-play-state:paused}
@keyframes skills-scroll{to{transform:translateX(-50%)}}
@media(max-width:700px){#home .stage{height:auto}#home{min-height:1100px}#home .skills-marquee{height:82px}.skills-list{gap:32px;padding-right:32px}.skills-list li{font-size:16px}.skill-symbol{font-size:20px}}
@media(prefers-reduced-motion:reduce){.skills-track{animation:none}#home .skills-marquee{overflow-x:auto;mask-image:none}.skills-list[aria-hidden="true"]{display:none}}
/* Expanded home and about content. */
.home-details,.about-more{padding:75px 7%;background:linear-gradient(125deg,#f0d047,#ffe781);color:var(--ink)}
.section-heading{max-width:620px;margin-bottom:36px}.home-details h2,.about-more h2{font:800 clamp(30px,4vw,56px)/1.12 Manrope,Arial,sans-serif;letter-spacing:-2px;margin:18px 0}.section-heading>p,.about-statement>p{font-size:17px;line-height:1.8;color:#6d5a23}
.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.expertise-grid article,.toolbox-grid article{padding:30px;border:1px solid #92752735;border-radius:20px;background:#fff4b13d}.area-number{font-size:10px;letter-spacing:1.5px;color:#786323}.home-details h3,.about-more h3{font:800 23px/1.25 Manrope,Arial,sans-serif;letter-spacing:-.6px;margin:23px 0 12px}.expertise-grid p,.toolbox-grid p,.process-list p{font-size:15px;line-height:1.8;color:#6d5a23;margin:0}.expertise-grid .skill-tags,.toolbox-grid .skill-tags{margin-bottom:0}.skill-tags span{background:#fff6c035}
.process-section{display:grid;grid-template-columns:1fr 1fr;gap:65px;margin:95px 0}.process-list{list-style:none;padding:0;margin:0}.process-list li{display:flex;gap:25px;border-bottom:1px solid #816c2a35;padding:23px 0}.process-list li:first-child{padding-top:0}.process-list>li>span{font:500 13px ui-monospace,monospace;padding-top:6px;color:#8a7428}.process-list h3{margin:0 0 7px}.text-link{display:inline-block;font-size:14px;font-weight:700;border-bottom:1px solid #766225;padding-bottom:7px;margin-top:20px}.code-banner{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:40px;border-radius:22px;background:#3a331c;color:#fff0b0}.code-banner p{font-size:15px;line-height:1.7;color:#d2c58f}.banner-link{white-space:nowrap;font-size:14px;border-bottom:1px solid #a49864;padding-bottom:10px}
.about-content{max-width:1250px;grid-template-columns:1.2fr 1fr;margin-top:40px;margin-bottom:65px}.about-copy h1{font-size:clamp(40px,5.3vw,75px)}.soft-heading{color:#8e742b}.about-copy>p:not(.page-lead){max-width:520px;font-size:16px;color:#695721}.about-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.about-image-frame{position:relative;border:1px solid #fff2a44d;border-radius:140px 140px 24px 24px;background:linear-gradient(#fff2a255,#fff2a200);padding-top:30px}.about-image-frame .about-portrait{display:block;width:115%;max-width:none;margin-left:-7.5%}.portrait-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:2px;white-space:nowrap;z-index:1}.about-more{padding-top:60px}.about-statement{max-width:750px;margin-bottom:80px}.toolbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.toolbox-grid h3{margin-top:0}.about-closing{margin:75px 0 15px;padding-top:40px;border-top:1px solid #80682235}.inner-page .stage:has(.about-more){padding-bottom:0}
@media(max-width:900px){.expertise-grid{grid-template-columns:1fr}.expertise-grid article{padding:25px}.process-section{gap:35px}.code-banner{align-items:flex-start;flex-direction:column}.about-content{gap:25px}.about-copy h1{font-size:40px}}
@media(max-width:700px){.home-details,.about-more{padding:45px 8%}.home-details h2,.about-more h2{font-size:34px;letter-spacing:-1.2px}.process-section{grid-template-columns:1fr;gap:35px;margin:60px 0}.code-banner{padding:27px}.toolbox-grid{grid-template-columns:1fr}.about-content{grid-template-columns:1fr;margin-bottom:45px}.about-image-frame{max-width:330px;margin:20px auto;width:90%}.about-content .about-portrait{max-width:none}.about-statement{margin-bottom:45px}.about-closing{margin-top:45px}.about-copy h1{font-size:43px}.banner-link{font-size:12px}}
/* Editorial engineering layout: rows and fine rules instead of cards. */
.developer-details{padding:65px 7% 70px;background:linear-gradient(115deg,#efd047,#ffe477)}
.dev-section-label{display:flex;justify-content:space-between;gap:20px;font:500 11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.3px;color:#776323}
.dev-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:end;margin:30px 0 45px}.developer-details h2{font-size:clamp(30px,3.8vw,52px);letter-spacing:-1.8px;margin:0}.dev-intro p,.dev-source p{font-size:15px;line-height:1.8;color:#6d5b27;margin:0;max-width:390px}
.engineering-rows{border-top:1px solid #6e592b55}.engineering-rows article{display:grid;grid-template-columns:35px 1fr 1.3fr 1fr;align-items:start;gap:25px;padding:30px 0;border-bottom:1px solid #6e592b35}.dev-index{font:12px/1.8 ui-monospace,monospace;color:#897130}.engineering-rows h3{font-size:18px;font-weight:700;letter-spacing:-.4px;line-height:1.4;margin:0}.engineering-rows p{font-size:14px;line-height:1.7;color:#6d5b27;margin:0}.dev-stack{font:11px/1.9 ui-monospace,monospace;color:#776323;text-align:right}
.dev-source{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:65px}.dev-source h2{font-size:32px;margin:17px 0 10px}.dev-source>a{display:flex;gap:30px;align-items:center;border-bottom:1px solid #756029;padding:16px 0;font:13px ui-monospace,monospace}.dev-source>a:hover{color:#000}.dev-source>a>span:last-child{font-size:24px}
@media(max-width:900px){.engineering-rows article{grid-template-columns:25px 1fr 1.3fr;gap:18px}.dev-stack{grid-column:2/-1;text-align:left}.dev-intro{gap:35px}.dev-source{align-items:flex-start;flex-direction:column;gap:15px}}
@media(max-width:700px){.developer-details{padding:40px 8% 50px}.dev-section-label{font-size:9px}.dev-section-label>span:last-child{display:none}.dev-intro{grid-template-columns:1fr;gap:20px;margin:25px 0 30px}.engineering-rows article{grid-template-columns:24px 1fr;gap:12px;padding:25px 0}.engineering-rows p{grid-column:2}.dev-stack{grid-column:2}.dev-source{padding-top:40px}.dev-source h2{font-size:29px}.developer-details h2{letter-spacing:-1px}}
/* Bound the portrait by both viewport height and its central column. */
@media(min-width:701px){
 #home .character-wrap{top:max(100px,14vh);bottom:calc(100px + 5vh);left:32%;width:40%;overflow:visible}
 #home .character{top:0;bottom:auto;left:50%;width:128%;height:100%;max-width:none;max-height:100%;object-fit:contain;object-position:center center;transform:translateX(-50%)}
}
/* Focused developer feature and pared-back About content. */
.developer-showcase{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:65px;padding:80px 7%;background:linear-gradient(115deg,#eed045,#ffe577);border-top:1px solid #8e77252b}
.showcase-copy h2{font:800 clamp(40px,5vw,70px)/1.05 Manrope,Arial,sans-serif;letter-spacing:-3px;margin:22px 0}.showcase-copy h2>span{color:#9f8225}.showcase-copy p{font-size:16px;line-height:1.9;color:#6c5926}.source-link{display:inline-flex;align-items:center;gap:45px;margin-top:20px;padding:12px 0;border-bottom:1px solid #78622c;font-size:14px;font-weight:700}.source-link span{font-size:22px}
.code-profile{min-width:0;border-top:1px solid #86703270;border-bottom:1px solid #86703270}.code-file,.code-caption{display:flex;justify-content:space-between;gap:15px;padding:17px 0;font:11px/1.5 ui-monospace,monospace;color:#79672f}.code-file{border-bottom:1px solid #86703235}.code-file span:last-child{font-size:9px;letter-spacing:1.5px}.code-profile pre{margin:0;padding:28px 0;overflow-x:auto;font:13px/2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#403823}.syntax-muted{color:#8e7938}.syntax-keyword{color:#854e2b}.syntax-name{color:#463d1f;font-weight:700}.syntax-string{color:#6c652b}.code-caption{border-top:1px solid #86703235}.code-caption a{font-weight:700;color:#514321}
.about-essential{padding:15px 7% 65px;max-width:1400px;margin:auto}.about-essential>.eyebrow{display:block;margin-bottom:22px}.essential-row{display:grid;grid-template-columns:1fr 1.6fr;gap:30px;padding:23px 0;border-top:1px solid #806c2b40}.essential-row h2{font-size:16px;line-height:1.6;margin:0;letter-spacing:-.3px}.essential-row p{font:13px/1.9 ui-monospace,monospace;color:#73602a;margin:0}
@media(max-width:900px){.developer-showcase{gap:30px;padding:55px 6%}.code-profile pre{font-size:11px}.showcase-copy h2{font-size:45px;letter-spacing:-2px}}
@media(max-width:700px){.developer-showcase{grid-template-columns:1fr;gap:35px;padding:45px 8%}.showcase-copy h2{font-size:46px}.code-profile pre{font-size:11px}.code-caption{font-size:10px}.about-essential{padding:0 8% 40px}.essential-row{grid-template-columns:1fr;gap:7px}}
/* Recruiter-readable profile and grouped About skills. */
.professional-overview{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;padding:75px 7%;background:linear-gradient(115deg,#efd047,#ffe577);border-top:1px solid #816c2926}
.overview-heading h2{font:800 clamp(29px,3.4vw,48px)/1.18 Manrope,Arial,sans-serif;letter-spacing:-1.7px;margin:22px 0 0}
.overview-summary{font-size:17px;line-height:1.85;margin:0 0 26px;color:#5f5026;max-width:620px}.overview-facts{margin:0}.overview-facts>div{padding:17px 0;border-top:1px solid #80682735;display:grid;grid-template-columns:1fr 1.5fr;gap:22px}.overview-facts dt{font-size:13px;font-weight:700;line-height:1.8}.overview-facts dd{margin:0;font-size:14px;line-height:1.8;color:#71602b}.overview-links{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:17px}
.skills-heading{font:800 34px/1.2 Manrope,Arial,sans-serif;letter-spacing:-1px;margin:0 0 28px}.about-skill-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.about-skill-cards article{border:1px solid #8b722b35;border-radius:18px;padding:28px;background:#fff3b259}.skill-category{font:10px ui-monospace,monospace;letter-spacing:1.4px;color:#7b662b}.about-skill-cards h3{font:700 22px/1.3 Manrope,Arial,sans-serif;letter-spacing:-.5px;margin:18px 0}.about-skill-cards .skill-tags{margin:0;gap:8px}.about-skill-cards .skill-tags span{font-size:13px;background:#fff7ce66}
@media(max-width:900px){.professional-overview{gap:35px;padding:55px 6%}.overview-facts>div{grid-template-columns:1fr;gap:4px}.overview-summary{font-size:15px}}
@media(max-width:700px){.professional-overview{grid-template-columns:1fr;gap:28px;padding:45px 8%}.overview-heading h2{font-size:34px;letter-spacing:-1px}.about-skill-cards{grid-template-columns:1fr}.about-skill-cards article{padding:24px}.skills-heading{font-size:29px}.overview-links{gap:18px}}
/* White recruiter sections with yellow accents. */
.recruiter-content{background:#fff;color:#20211e;padding:0 7%;font-family:'DM Sans',Arial,sans-serif}.recruit-section{max-width:1280px;margin:auto;padding:78px 0;border-bottom:1px solid #e7e7df}.recruit-heading{display:flex;justify-content:space-between;align-items:end;gap:25px}.section-index{font:600 11px/1.6 ui-monospace,monospace;letter-spacing:1.6px;color:#73756d}.recruit-section h2{font:800 clamp(30px,3.5vw,49px)/1.12 Manrope,Arial,sans-serif;letter-spacing:-1.9px;margin:17px 0 0}.plain-link{font-size:13px;font-weight:700;border-bottom:2px solid #ebc62f;padding-bottom:7px;white-space:nowrap}.section-intro{font-size:16px;line-height:1.8;color:#66685f;max-width:640px;margin:20px 0}.content-note{font-size:12px;line-height:1.7;color:#7c7151;margin:0 0 25px}.featured-grid,.competency-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.featured-project{border:1px solid #e4e5dc;border-radius:17px;padding:25px;background:#fff;display:flex;flex-direction:column}.project-topline{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;font:10px ui-monospace,monospace;color:#717469}.draft-badge{display:inline-block;font:500 10px/1.5 'DM Sans',Arial,sans-serif;padding:4px 8px;background:#f3f3ed;border:1px solid #e5e5dc;border-radius:6px;color:#77796f}.recruit-section h3{font:700 21px/1.35 Manrope,Arial,sans-serif;letter-spacing:-.5px;margin:24px 0 12px}.project-description{font-size:14px;line-height:1.8;color:#6b6d64;margin:0 0 20px}.recruit-tags{display:flex;flex-wrap:wrap;gap:6px}.recruit-tags span{font-size:11px;border-radius:5px;padding:6px 9px;background:#fff7ce;color:#716024}.project-result{margin-top:26px;padding:15px 0;border-top:1px solid #ecece4}.project-result>span{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#8b7741}.project-result p{font-size:13px;color:#66695e;margin:7px 0}.project-destinations{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#909187;margin-top:auto;padding-top:12px}.experience-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:65px;margin-top:30px}.experience-timeline{list-style:none;border-left:2px solid #eed24d;margin:0;padding:0 0 0 30px}.experience-timeline>li{position:relative}.experience-timeline>li:before{content:'';position:absolute;left:-37px;top:4px;width:12px;height:12px;border-radius:50%;background:#f2ce36;box-shadow:0 0 0 5px #fff9dc}.timeline-meta{display:flex;align-items:center;gap:18px;font:10px ui-monospace,monospace;color:#83857b}.experience-timeline h3{margin-top:15px}.organization{color:#71736b;font-size:14px}.experience-timeline ul{padding-left:18px;color:#71736b;font-size:14px;line-height:2}.competency-grid{margin-top:32px}.competency-grid article{background:#f8f8f4;border:1px solid #e9e9df;padding:28px;border-radius:16px}.competency-symbol{display:grid;place-items:center;width:38px;height:38px;background:#f6d53d;border-radius:9px;font:600 12px ui-monospace,monospace}.competency-grid p{color:#64685e;font-size:14px;line-height:1.8;margin-bottom:24px}.education-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}.education-grid article{border:1px solid #e5e5db;border-left:4px solid #f1ce35;border-radius:10px;padding:26px}.education-label{font-size:10px;letter-spacing:1.6px;color:#858775}.education-grid h3{margin-top:14px}.education-grid p{font-size:14px;line-height:1.8;color:#6c6f63}.hiring-contact{display:grid;grid-template-columns:1fr 1fr;gap:75px;border-bottom:0}.hiring-status{display:inline-flex;align-items:center;gap:8px;background:#fff5c6;border:1px solid #f0dd87;border-radius:20px;padding:9px 12px;font-size:11px;font-weight:600}.hiring-status>span{width:7px;height:7px;border-radius:50%;background:#968124}.hiring-copy h2{margin:23px 0}.hiring-copy>p{font-size:15px;line-height:1.8;color:#6b6e63;max-width:430px}.hiring-links{display:flex;gap:18px;flex-wrap:wrap;margin:25px 0;font-size:13px}.hiring-links a{border-bottom:1px solid #d9bc38;padding-bottom:5px;overflow-wrap:anywhere}.resume-button{background:#ededdf;padding:13px 20px;border:1px solid #ddddcc;border-radius:7px;font-size:13px;color:#858779;cursor:not-allowed}.hiring-copy .resume-note{font-size:11px;margin-top:8px}.quick-contact{background:#f8f8f3;border:1px solid #e9e9df;border-radius:18px;padding:30px;display:flex;flex-direction:column}.quick-contact label{font-size:12px;font-weight:700;margin-bottom:8px}.quick-contact input,.quick-contact textarea{font:14px 'DM Sans',Arial,sans-serif;background:#fff;border:1px solid #ddded4;border-radius:7px;padding:13px;margin-bottom:20px;color:#25271e;width:100%;resize:vertical}.quick-contact input:focus,.quick-contact textarea:focus{outline:2px solid #debe33;outline-offset:2px}.quick-contact button{background:#f4d23c;border-radius:7px;font-weight:700;font-size:13px;padding:15px;display:flex;justify-content:space-between}.form-help,#contact-status{font-size:11px;color:#74776b;line-height:1.6;margin:12px 0 0}#contact-status:empty{display:none}
@media(max-width:1050px){.featured-grid,.competency-grid{grid-template-columns:1fr}.project-destinations{justify-content:flex-start;gap:30px}.experience-layout,.hiring-contact{gap:35px}.project-topline{flex-wrap:nowrap}}
@media(max-width:700px){.recruiter-content{padding:0 8%}.recruit-section{padding:45px 0}.recruit-heading{align-items:flex-start;flex-direction:column;gap:18px}.recruit-section h2{font-size:32px;letter-spacing:-1.1px}.experience-layout,.education-grid,.hiring-contact{grid-template-columns:1fr;gap:25px}.quick-contact{padding:22px}.featured-project,.competency-grid article{padding:23px}.hiring-status{font-size:10px}.experience-timeline{margin-left:5px}}

html{scroll-behavior:smooth}#get-in-touch{scroll-margin-top:24px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skills-list .tech-logo{display:block;width:48px;height:48px;object-fit:contain}.skills-list{gap:65px;padding-right:65px}.skills-list li{min-width:60px;justify-content:center}@media(max-width:700px){.skills-list .tech-logo{width:38px;height:38px}.skills-list{gap:38px;padding-right:38px}}

.about-biography{align-items:start;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:55px}.about-biography .about-copy>p{max-width:720px;font-size:16px;line-height:1.85;margin:0 0 22px}.about-biography .about-copy>.page-lead{font-size:18px;line-height:1.75}.about-biography .about-image-frame{margin-top:65px;position:sticky;top:35px}.about-biography .about-actions{margin-top:28px}@media(max-width:700px){.about-biography{grid-template-columns:1fr;gap:25px}.about-biography .about-image-frame{position:relative;top:auto;margin:0 auto;grid-row:1}.about-biography .about-copy>p{font-size:16px}.about-biography .about-copy>.page-lead{font-size:17px}}

.avatar img{display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:center 40%;transform:scale(1.2)}
.managed-education-group{display:grid;gap:18px;align-content:start}.inner-page .stage:has(#education){padding-bottom:0}