:root{color-scheme:light;--bg:#f7f5f2;--surface:#fff;--text:#1c1f26;--muted:#555b60;--accent:#42654b;--soft:#e8eee7;--line:#cbd0ca;--noor:#e7eddf}
html[data-theme=dark]{color-scheme:dark;--bg:#1c1f26;--surface:#242830;--text:#f0eee8;--muted:#b9bfc2;--accent:#b2c9ac;--soft:#303c33;--line:#4b5354;--noor:#303c33}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;font-family:Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.12;letter-spacing:-.035em}h1{font-size:clamp(2.8rem,5.1vw,4.3rem);font-weight:600}h2{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:500}h3{font-size:1.65rem;font-weight:500}p{max-width:69ch}a{color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1px}button,a,input{touch-action:manipulation}button{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}a:hover{text-decoration-thickness:2px}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}::selection{background:var(--accent);color:var(--bg)}.wrap{width:min(1120px,calc(100% - 64px));margin:auto}.muted{color:var(--muted)}.skip{position:fixed;top:8px;left:12px;transform:translateY(-170%);background:var(--surface);padding:12px;z-index:40}.skip:focus{transform:none}
.nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}.brand{font-family:'Space Grotesk',sans-serif;font-size:1.14rem;font-weight:600;letter-spacing:-.025em;text-decoration:none;color:var(--text);white-space:nowrap}.nav-links{display:flex;gap:26px;align-items:center}.nav-links a{font-size:.85rem;font-weight:500;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.nav-links a:hover{color:var(--accent)}.nav-tools{display:flex;gap:8px;align-items:center}.icon-button{display:grid;place-items:center;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--text)}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:var(--soft)}#menu-toggle{display:none}.sun{display:none}html[data-theme=dark] .sun{display:block}html[data-theme=dark] .moon{display:none}
.hero{padding:66px 0 64px;display:grid;grid-template-columns:minmax(0,1fr) 235px;align-items:center;gap:85px}.hero h1 span{color:var(--accent)}.hero p{font-size:1rem;color:var(--muted);max-width:59ch;margin:23px 0 26px}.portrait{width:235px;height:235px;object-fit:cover;border-radius:50%;display:block}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px}.button{min-height:46px;padding:10px 20px;border:1px solid var(--accent);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:.88rem;font-weight:500;text-decoration:none;color:var(--bg);background:var(--accent)}.button:hover{filter:brightness(.93);text-decoration:none}.button.secondary{background:transparent;color:var(--accent)}.text-link{display:inline-flex;gap:10px;align-items:center;min-height:44px;font-size:.88rem;font-weight:500}.text-link svg{width:17px;height:17px}
.section{padding:58px 0;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}.section-heading p{color:var(--muted);font-size:.94rem;max-width:43ch}.noor-feature{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}.noor-copy{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}.noor-name{display:flex;align-items:center;gap:16px;margin-bottom:24px}.noor-name img{height:58px;width:58px;border-radius:13px}.noor-name h3{font-size:2.1rem}.platforms{display:block;color:var(--muted);font-size:.78rem;margin-top:7px}.noor-copy h4{font-size:1.75rem;max-width:18ch;line-height:1.2;letter-spacing:-.025em}.noor-copy>p{margin:16px 0 20px;color:var(--muted);font-size:.94rem}.noor-visual{padding:26px 20px 0;background:var(--noor);display:flex;gap:18px;align-items:flex-start;justify-content:center;overflow:hidden;min-height:400px}.noor-visual img{width:calc(50% - 12px);max-width:198px;height:auto;border-radius:12px;display:block}.noor-visual img+img{margin-top:34px}.noor-visual figcaption{display:none}figure{margin:0}
.project-list{margin-top:28px}.project-row{display:grid;grid-template-columns:215px minmax(0,1fr) 160px;gap:32px;padding:25px 0;border-bottom:1px solid var(--line);align-items:start}.project-row h3{font-size:1.35rem;line-height:1.35;letter-spacing:-.025em}.project-row p{color:var(--muted);font-size:.91rem}.project-row .type{font-size:.77rem;color:var(--muted);margin-top:5px}.project-row .project-action{text-align:right}.project-row .text-link{font-size:.83rem}.project-row details{grid-column:2/4;color:var(--muted);font-size:.91rem;margin-top:-12px}.project-row summary{color:var(--accent);cursor:pointer;width:fit-content;padding:8px 0;min-height:44px;font-weight:500}.project-row details p{margin:7px 0;max-width:78ch}.project-row details ul{padding-left:20px;max-width:78ch}.project-row details li{margin:6px 0}.apps-pair{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:32px}.app{display:grid;grid-template-columns:108px minmax(0,1fr);gap:24px;align-items:center}.app-image{height:150px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.app-image img{width:100%;height:auto;display:block}.app h3{font-size:1.45rem;margin-bottom:10px}.app p{font-size:.88rem;color:var(--muted)}.app .text-link{font-size:.81rem;margin-top:4px}
.demo-block{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:27px 30px;margin-top:32px;background:var(--soft);border-radius:12px}.demo-block h3{font-size:1.4rem;margin-bottom:7px}.demo-block p{font-size:.91rem;color:var(--muted)}.demo-block .button{white-space:nowrap}
.experience-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.experience-intro p{margin-top:22px;color:var(--muted);font-size:.95rem}.capability{padding:0 0 22px;margin-bottom:24px;border-bottom:1px solid var(--line)}.capability:last-child{margin-bottom:0}.capability h3{font-size:1.2rem;margin-bottom:9px}.capability p{color:var(--muted);font-size:.91rem}.capability span{display:block;font-size:.77rem;color:var(--accent);margin-top:11px}.experience-intro .text-link{margin-top:20px}
.method{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.method p{color:var(--muted);margin-top:18px;font-size:.94rem}.method-steps{margin:0;padding:0;list-style:none}.method-steps li{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}.method-steps h3{font-size:1.18rem}.method-steps p{margin-top:9px;font-size:.91rem}.method-steps li:last-child{margin-bottom:0}.writing{display:flex;gap:30px;justify-content:space-between;align-items:center}.writing p{color:var(--muted);margin-top:18px;font-size:.94rem}.contact{padding:66px 0 56px;border-top:1px solid var(--line)}.contact-inner{display:flex;justify-content:space-between;gap:40px;align-items:center}.contact p{color:var(--muted);margin-top:18px;font-size:.94rem}.contact a.email{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;white-space:nowrap}.footer{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.77rem}.footer div{display:flex;gap:24px}.footer a{color:var(--muted)}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){.hero-copy{animation:arrive .55s ease-out}@keyframes arrive{from{transform:translateY(10px);filter:blur(1px)}to{transform:none;filter:none}}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.nav-links{gap:18px}.hero{gap:40px;grid-template-columns:minmax(0,1fr) 190px}.portrait{width:190px;height:190px}.project-row{grid-template-columns:170px minmax(0,1fr) 130px;gap:24px}.noor-copy{padding:30px}.noor-visual{gap:12px}.experience-grid,.method{gap:44px}.app{grid-template-columns:85px 1fr;gap:16px}.app-image{height:126px}}
@media(max-width:760px){html{scroll-padding-top:84px}.wrap{width:calc(100% - 40px)}.nav-inner{min-height:70px;gap:15px}.brand{font-size:1rem}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--bg);padding:16px 20px 24px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px}.nav-links.open{display:flex}.nav-links a{font-size:1rem;padding:7px 4px}#menu-toggle{display:grid}.hero{padding:35px 0 40px;grid-template-columns:1fr 72px;gap:14px;align-items:start}.hero-copy{grid-column:1/-1;grid-row:1}.hero h1{font-size:clamp(2.35rem,8.9vw,3.4rem);max-width:calc(100% - 50px)}.hero p{font-size:.94rem;margin:22px 0}.portrait{grid-row:1;grid-column:2;width:62px;height:62px;justify-self:end;margin-top:4px}.hero .actions{gap:13px}.button{font-size:.83rem;padding:10px 15px}.text-link{font-size:.84rem}.section{padding:36px 0}.section-heading{display:block;margin-bottom:24px}.section-heading p{margin-top:13px;font-size:.91rem}.noor-feature{grid-template-columns:1fr}.noor-copy{padding:26px}.noor-name{margin-bottom:19px}.noor-name h3{font-size:1.85rem}.noor-copy h4{font-size:1.6rem;max-width:22ch}.noor-copy>p{font-size:.91rem}.noor-visual{min-height:0;height:285px;padding:22px 16px 0;gap:16px}.noor-visual img{max-width:150px;width:calc(50% - 16px)}.noor-visual img+img{margin-top:24px}.project-row{grid-template-columns:1fr;gap:10px;padding:24px 0}.project-row .project-action{text-align:left}.project-row details{grid-column:1;margin-top:0}.project-row .text-link{min-height:44px}.apps-pair{grid-template-columns:1fr;gap:26px}.app{grid-template-columns:85px 1fr;gap:20px}.demo-block{grid-template-columns:1fr;padding:24px;gap:19px}.demo-block .button{width:fit-content}.experience-grid,.method{grid-template-columns:1fr;gap:30px}.experience-intro .text-link{margin-top:13px}.experience-intro p{margin-top:18px}.capability{margin-bottom:23px;padding-bottom:23px}.writing,.contact-inner{display:block}.writing .button{margin-top:22px}.contact{padding:40px 0}.contact a.email{display:inline-block;margin-top:25px}.footer{flex-direction:column;gap:13px}.footer div{flex-wrap:wrap}.footer a{min-height:44px;display:inline-flex;align-items:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Professional identity and experience lead; projects follow as personal learning. */
.hero{padding:52px 0 48px}.hero h1{font-size:clamp(2.8rem,4.9vw,4.1rem)}
.about-intro{display:grid;grid-template-columns:230px 1fr;gap:46px;margin-bottom:34px}.about-intro p{font-size:.97rem;color:var(--muted);max-width:74ch}.about-intro p+p{margin-top:16px}
.expertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.expertise{padding:29px 30px;background:var(--surface);border:1px solid var(--line);border-radius:13px}.expertise>svg{color:var(--accent);width:25px;height:25px;margin-bottom:17px}.expertise h3{font-size:1.23rem;margin-bottom:13px;letter-spacing:-.02em}.expertise p{font-size:.92rem;color:var(--muted);max-width:64ch}.expertise-tools{font-size:.77rem;color:var(--accent);margin-top:19px;line-height:1.8}
.career{margin-top:34px;padding:28px 30px;background:var(--surface);border:1px solid var(--line);border-radius:13px;scroll-margin-top:100px}.career-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.career-heading h3{font-size:1.38rem}.career-track{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 30px}.career-track li{border-top:1px solid var(--line);padding-top:15px}.career-date{display:block;color:var(--accent);font-size:.79rem;margin-bottom:8px}.career-track strong{display:block;font-weight:500;font-size:.9rem}.career-track p{color:var(--muted);font-size:.78rem;margin-top:6px}
.toolkit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}.toolkit-group h3{font-size:1.02rem;letter-spacing:-.015em;margin-bottom:12px}.toolkit-group p{font-size:.82rem;line-height:1.95;color:var(--muted)}.personal-projects .section-heading{align-items:start}.personal-projects .section-heading p{max-width:66ch}.nav-links{gap:23px}
@media(max-width:900px){.about-intro{grid-template-columns:180px 1fr;gap:30px}.nav-links{gap:16px}.expertise{padding:25px}.toolkit-grid{gap:25px}}
@media(max-width:760px){.hero{padding:32px 0 36px}.hero h1{font-size:clamp(2rem,8.25vw,3.2rem);max-width:calc(100% - 38px)}.hero .portrait{width:54px;height:54px}.about-intro{grid-template-columns:1fr;gap:20px;margin-bottom:26px}.about-intro p{font-size:.93rem}.expertise-grid{grid-template-columns:1fr;gap:18px}.expertise{padding:24px}.career{padding:24px}.career-heading{align-items:start;gap:12px;flex-direction:column;margin-bottom:16px}.career-heading .text-link{min-height:35px}.career-track{grid-template-columns:1fr;gap:19px}.toolkit-grid{grid-template-columns:1fr 1fr;gap:25px 20px}.toolkit-group h3{font-size:.96rem}.toolkit-group p{font-size:.8rem}.personal-projects .section-heading p{max-width:none}.nav-links{gap:4px}}
@media(max-width:360px){.hero h1{font-size:1.82rem}.toolkit-grid{grid-template-columns:1fr}.hero .portrait{width:46px;height:46px}}

.writing{display:block}.writing .section-heading{align-items:center}.published-article{display:flex;align-items:center;justify-content:space-between;gap:38px;padding-top:26px;border-top:1px solid var(--line)}.published-article h3{font-size:1.55rem;line-height:1.3;max-width:40ch}.published-article h3 a{color:var(--text);text-decoration:none}.published-article h3 a:hover{text-decoration:underline}.published-article p{max-width:66ch;margin-top:15px}.published-article .publication{font-size:.8rem;color:var(--muted);margin-top:12px}.published-article .button{white-space:nowrap}
@media(max-width:760px){.writing .section-heading{display:block}.writing .section-heading .text-link{margin-top:12px}.published-article{display:block}.published-article h3{font-size:1.35rem}.published-article .button{margin-top:22px}}
.academy{display:grid;grid-template-columns:230px minmax(0,1fr);gap:46px}.academy h3{font-size:1.65rem;line-height:1.25}.academy p{color:var(--muted);font-size:.94rem;margin-top:17px;max-width:69ch}.academy .button{margin-top:24px}
@media(max-width:900px){.academy{grid-template-columns:180px minmax(0,1fr);gap:30px}}
@media(max-width:760px){.academy{grid-template-columns:1fr;gap:22px}.academy h3{font-size:1.4rem}}

/* Interaction polish layer (13 Oct 2026): press feedback, translucent nav material, card lift, current-section marker. Degrades to the previous behaviour under reduced motion, reduced transparency and older browsers. */
.button,.icon-button,.text-link,.nav-links a,.expertise,summary{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .22s ease,transform .15s ease,filter .18s ease}
.text-link svg,.button svg{transition:transform .18s ease}
.button:hover{transform:translateY(-1px)}
.button:active,.icon-button:active{transform:scale(.97)}
.text-link:hover svg,.button:hover svg{transform:translateX(3px)}
@media(hover:hover){.expertise:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 28px rgba(28,31,38,.07)}html[data-theme=dark] .expertise:hover{box-shadow:0 12px 28px rgba(0,0,0,.35)}}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.nav{background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}}
@media(prefers-reduced-transparency:reduce){.nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav-links a[aria-current=true]{color:var(--accent)}
/* Noor visual: anchor both screenshots to the panel's bottom edge so the staggered crop is consistent at every width (previously the crop depended on panel height, leaving one phone floating and one cut at mid widths). Mobile keeps its fixed-height top-crop layout. */
.noor-visual{align-items:flex-start}
.noor-visual img{margin-bottom:0}
.noor-visual img+img{margin-top:0;margin-bottom:0}
/* Tool and platform lists: each entry is one unbreakable token with its separator generated in front of it, so lines wrap only between tools, no orphaned dots, no column overflow. On narrow screens tokens flow as text again. */
.ti{display:inline-block;white-space:nowrap}
.ti+.ti::before{content:"· ";color:inherit}
@media(max-width:760px){.ti{display:inline;white-space:normal}}

.published-article+.published-article{margin-top:22px}.footer{flex-wrap:wrap}.footer div{flex-wrap:wrap;gap:14px 24px}
.document{max-width:850px;padding:64px 0 80px;min-height:65vh}.document>h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:35px}.article-content{font-size:1rem}.article-content h2{font-size:1.7rem;margin:34px 0 15px}.article-content h3{font-size:1.4rem;margin:26px 0 12px}.article-content p{margin:15px 0}.article-content li{margin:8px 0}.article-content ul,.article-content ol{padding-left:25px}.article-content hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.contact-form{max-width:620px;margin-top:30px}.contact-form label{display:block;font-weight:500;margin-bottom:7px}.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:12px;border:1px solid var(--line);border-radius:6px;color:var(--text);background:var(--surface)}.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.contact-form textarea{min-height:180px;resize:vertical}.form-row{margin-bottom:24px}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-note{font-size:.85rem;color:var(--muted)}.form-status{margin:18px 0;min-height:1.5em}.form-status[data-error=true]{color:#a83232}html[data-theme=dark] .form-status[data-error=true]{color:#ffb4b4}.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.contact-form button:disabled{opacity:.6;cursor:wait}.cf-turnstile{margin-bottom:18px}
@media(max-width:760px){.document{padding:38px 0 55px}.name-fields{grid-template-columns:1fr;gap:20px}.footer div{gap:12px 20px}.published-article h3{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}