@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;700&display=swap";:root{--paper:#f3f1e9;--ink:#292d28;--muted:#666a60;--red:#963f34;--line:#363d3033;--serif:Georgia, "Times New Roman", serif;--sans:"DM Sans", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{color:var(--ink);background:var(--paper);font-family:var(--sans);margin:0;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:6px}::selection{background:#963f3433}.skip-link{background:var(--paper);z-index:100;padding:10px 20px;position:fixed;top:-80px;left:20px}.skip-link:focus{top:10px}.landscape{z-index:-3;pointer-events:none;background:#f3f1e9;position:fixed;inset:0;overflow:hidden}.landscape canvas{opacity:.83;filter:grayscale();mix-blend-mode:multiply;border:0;width:100%;height:100%}.paper-wash{z-index:-2;pointer-events:none;background:linear-gradient(90deg,#f3f1e9f5 0%,#f3f1e9e6 21%,#f3f1e994 48%,#f3f1e914 82%),linear-gradient(#f3f1e9d9,#0000 30% 75%,#f3f1e9a6);position:fixed;inset:0}.site-header{z-index:3;justify-content:space-between;align-items:center;width:100%;padding:28px 4.8%;display:flex;position:absolute;top:0;left:0}.identity{align-items:center;gap:13px;font-size:15px;font-weight:600;line-height:1.35;display:flex}nav{align-items:center;gap:33px;font-size:12px;display:flex}nav a{transition:color .2s}nav a:hover,.quiet-link:hover,.text-link:hover,.social-links a:hover{color:var(--red)}nav .nav-contact{border-bottom:1px solid var(--ink);margin-left:12px;padding-bottom:4px}nav .nav-contact span{margin-left:18px}.hero{align-items:center;height:100svh;min-height:820px;max-height:1200px;padding:170px 9% 120px;display:flex;position:relative}.hero-copy{padding-bottom:25px}.eyebrow{letter-spacing:2px;margin:0 0 26px;font-size:10px;font-weight:500;line-height:1.6}h1,h2,h3,p{margin-top:0}h1{font-family:var(--serif);letter-spacing:-5px;margin-bottom:27px;font-size:clamp(72px,7.4vw,122px);font-weight:400;line-height:1.02}em{font-family:var(--serif);color:var(--red);font-weight:400}.intro{color:#555b50;margin-bottom:32px;font-size:16px;line-height:1.8}.hero-actions{align-items:center;gap:28px;font-size:12px;display:flex}.primary-link{background:var(--ink);color:var(--paper);align-items:center;gap:35px;padding:13px 19px;transition:background .2s;display:inline-flex}.primary-link:hover{background:var(--red)}.primary-link span{font-size:19px;line-height:1}.quiet-link{border-bottom:1px solid var(--line);padding:8px 0}.quiet-link span{margin-left:15px}.content-sheet{border-top:1px solid var(--line);background:linear-gradient(#f3f1e9c7 0% 55%,#f3f1e994 85%,#f3f1e92e 100%)}.section{max-width:1280px;margin:0 auto;padding:104px 64px;scroll-margin-top:0}.section-heading{grid-template-columns:1fr 1fr;align-items:end;margin-bottom:48px;display:grid}.section-heading .eyebrow{grid-column:1/-1;margin-bottom:23px}h2{font-family:var(--serif);letter-spacing:-2px;margin:0;font-size:clamp(43px,4.5vw,68px);font-weight:400;line-height:1.08}.section-heading>p:last-child{color:var(--muted);justify-self:end;margin:0 0 5px;font-size:13px}.project{border-top:1px solid var(--line)}.project:last-child{border-bottom:1px solid var(--line)}.project summary{cursor:pointer;grid-template-columns:45px 1fr auto 30px;align-items:center;gap:15px;padding:28px 0;list-style:none;display:grid}.project summary::-webkit-details-marker{display:none}.project-number{color:var(--muted);align-self:start;padding-top:9px;font-size:10px}.project-title{font-size:25px;font-family:var(--serif);line-height:1.3}.project-title>span{font-family:var(--sans);color:var(--muted);margin-top:7px;font-size:11px;display:block}.project-category{letter-spacing:1.3px;margin-right:20px;font-size:9px}.expand-icon{text-align:center;font-size:23px;font-weight:400}.project[open] .expand-icon{font-size:0}.project[open] .expand-icon:after{content:"−";font-size:23px}.project-body{grid-template-columns:1fr 1.12fr;gap:55px;padding:10px 0 44px 60px;display:grid}.project-description h3{font-family:var(--serif);letter-spacing:-.6px;margin-bottom:20px;font-size:34px;font-weight:400;line-height:1.1}.project-description>p{color:var(--muted);max-width:380px;font-size:13px}.tags{flex-wrap:wrap;gap:7px;margin:22px 0;padding:0;list-style:none;display:flex}.tags li{border:1px solid var(--line);padding:3px 8px;font-size:9px}.text-link{border-bottom:1px solid var(--line);padding-bottom:5px;font-size:11px;display:inline-block}.text-link span{margin-left:16px}.project-art{flex-direction:column;justify-content:space-between;min-height:320px;padding:24px 27px;display:flex;position:relative;overflow:hidden}.catering-art{color:#3b493b;background:#dfe3d6}.art-label,.art-caption{letter-spacing:1.7px;font-size:8px}.art-caption{opacity:.7}.platform-node{font-family:var(--serif);text-align:center;align-self:center;margin-top:23px;font-size:47px;line-height:.9}.platform-node span{font-size:60px;font-style:italic;display:block}.art-branches{justify-content:center;gap:12px;margin:30px 0;display:flex}.art-branches span{border:1px solid #57634e66;padding:6px 12px;font-size:9px;position:relative}.art-branches:before{content:"";background:#57634e55;width:1px;height:24px;position:absolute;top:54%;left:50%}.commerce-art{color:#eee9dc;background:#2e3530}.code-art{flex-direction:column;gap:18px;display:flex}.code-art>span{opacity:.6;font-family:monospace;font-size:10px}.code-art strong{color:#c3ceb3;font-family:monospace;font-size:26px;font-weight:400}.travel-art{color:#6b4938;background:#e9d8c1}.travel-type{font-family:var(--serif);margin:20px 0;font-size:43px;line-height:1.1}.travel-type em{color:inherit}.travel-type span{margin-top:7px;display:inline-block}.about-section{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:50px 70px;display:grid}.about-copy p{color:var(--muted);margin-bottom:20px;font-size:14px}.about-copy .large-copy{letter-spacing:-.4px;color:var(--ink);font-size:21px;line-height:1.6}.skills{grid-column:1/-1;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:15px;display:grid}.skills>div{border-top:1px solid var(--line);padding-top:18px}.skills span{color:var(--red);font-size:9px}.skills h3{margin:14px 0 9px;font-size:14px;font-weight:500}.skills p{color:var(--muted);margin:0;font-size:12px;line-height:1.9}.experience-section{border-top:1px solid var(--line)}.section-heading>.text-link{justify-self:end;margin-bottom:7px}.job{border-top:1px solid var(--line);grid-template-columns:250px 1fr;gap:30px;padding:29px 0;display:grid}.job-date{letter-spacing:1px;color:var(--muted);margin:0;padding-top:7px;font-size:9px}.job h3{font-family:var(--serif);margin-bottom:3px;font-size:27px;font-weight:400}.job-role{margin-bottom:11px;color:var(--ink)!important;font-size:12px!important}.job>div>p{color:var(--muted);max-width:610px;margin-bottom:0;font-size:13px}.contact-section{border-top:1px solid var(--line);text-align:center;padding-top:110px;padding-bottom:115px}.contact-section h2{margin:30px 0;font-size:clamp(50px,6vw,83px)}.contact-email{border-bottom:1px solid var(--ink);padding-bottom:6px;font-size:clamp(15px,2.2vw,24px)}.contact-email span{margin-left:23px}.social-links{justify-content:center;gap:30px;margin-top:30px;font-size:11px;display:flex}footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;padding:22px 4.8% 85px;font-size:9px;display:flex}footer p{margin:0}footer p a{border-bottom:1px solid var(--line)}@media (width>=1600px){.hero{padding-left:12%}}@media (width<=850px){.site-header{padding:24px 5%}nav{gap:20px}.hero{min-height:760px;padding-left:7%}h1{font-size:88px}.section{padding:80px 6%}.project-body{gap:28px;padding-left:0}.project summary{grid-template-columns:30px 1fr 25px;gap:10px}.project-category{display:none}.about-section{gap:40px}.job{grid-template-columns:180px 1fr}.paper-wash{background:linear-gradient(90deg,#f3f1e9ef,#f3f1e9b0 50%,#f3f1e922)}}@media (width<=600px){html{scroll-padding-top:30px}.site-header{align-items:flex-start;padding:21px 6%}.identity{gap:10px;font-size:13px}nav{gap:17px;padding-top:5px;font-size:11px}nav a[href=\#experience],nav .nav-contact{display:none}.hero{align-items:center;height:100svh;min-height:740px;max-height:960px;padding:145px 7% 180px}.hero-copy{padding-bottom:0}h1{letter-spacing:-3px;margin-bottom:25px;font-size:clamp(62px,15vw,88px)}.intro{margin-bottom:27px;font-size:14px}.hero-actions{gap:22px;font-size:10px}.primary-link{gap:21px;padding:12px 15px}.quiet-link span{margin-left:8px}.landscape canvas{opacity:.7}.paper-wash{background:linear-gradient(90deg,#f3f1e9e8 0%,#f3f1e9a8 70%,#f3f1e944),linear-gradient(#0000 45%,#f3f1e966)}.section{padding:65px 7%}.section-heading{margin-bottom:30px;display:block}.section-heading>p:last-child{margin-top:20px;font-size:12px}.section-heading>.text-link{margin-top:22px}h2{letter-spacing:-1.5px;font-size:43px}.project-title{font-size:24px}.project-title>span{font-size:10px}.project summary{grid-template-columns:22px 1fr 20px;padding:23px 0}.project-body{grid-template-columns:1fr;gap:25px;padding:5px 0 30px}.project-description h3{font-size:32px}.project-description>p{max-width:none}.project-art{min-height:290px}.about-section{grid-template-columns:1fr;gap:30px}.about-copy .large-copy{font-size:19px}.skills{grid-template-columns:1fr;gap:23px;margin-top:5px}.skills>div{grid-template-columns:20px 1fr;gap:4px 13px;display:grid}.skills span{grid-row:1/3;padding-top:6px}.skills h3{margin:0}.skills p{grid-column:2}.job{grid-template-columns:1fr;gap:10px;padding:24px 0}.job-date{padding:0;font-size:8px}.job h3{font-size:25px}.contact-section{padding-top:70px;padding-bottom:75px}.contact-section h2{font-size:50px}.contact-email{font-size:15px}.contact-email span{margin-left:7px}footer{flex-wrap:wrap;gap:15px;padding:22px 7% 85px;font-size:8px}footer>a:last-child{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important}}.company-strip{border-bottom:1px solid var(--line);max-width:1152px;margin:0 auto;padding:38px 0 30px}.company-strip>.eyebrow{text-align:center;letter-spacing:1.8px;color:var(--muted);margin-bottom:25px;font-size:8px}.company-logos{justify-content:space-around;align-items:center;gap:34px;display:flex}.company-logos a{justify-content:center;align-items:center;gap:10px;min-height:48px;font-size:17px;font-weight:600;line-height:1.3;display:flex}.company-logos img{object-fit:contain;max-width:110px;height:32px;display:block}.company-logos .symbol-logo{width:32px;height:32px}.website-art{background:#e6e4dc;justify-content:space-between;gap:22px;padding:22px}.catering-art.website-art{background:#f2e4d7}.travel-art.website-art{background:#e3e6df}.project-brand{color:var(--ink);align-items:center;gap:10px;font-size:15px;font-weight:600;display:flex}.project-brand img{object-fit:contain;flex-shrink:0}.project-brand .travel-logo{width:75px;height:45px}.project-brand>a{margin-left:auto;font-size:21px;font-weight:400}.website-preview{background:#fff;border:1px solid #292d281a;display:block;overflow:hidden;box-shadow:0 8px 18px #292d2812}.website-preview img{width:100%;height:auto;display:block}.website-art .art-caption{letter-spacing:1.2px;color:var(--ink);opacity:.8;font-size:7px}.job-company{align-items:center;gap:13px;display:inline-flex}.job-company img{object-fit:contain;background:#ffffff85;border:1px solid #292d2810;border-radius:7px;flex-shrink:0;width:38px;height:38px;padding:4px}.job-company[href="https://yassir.com"] img{width:75px;padding:6px}.job-company:hover{color:var(--red)}@media (width<=1250px){.company-strip{margin:0 6%}}@media (width<=600px){.company-strip{padding:30px 0}.company-logos{flex-wrap:wrap;gap:23px 30px}.company-logos a{gap:7px;font-size:14px}.company-logos img{max-width:90px;height:27px}.company-logos .symbol-logo{width:28px;height:28px}.company-logos .brandrescue-logo{width:50px;height:46px}.website-art{gap:19px;padding:18px}.job-company{gap:10px}.job-company img{width:32px;height:32px}.job-company[href="https://yassir.com"] img{width:66px}}.theme-showcase{background:#e1e5dc;align-self:start;padding:22px}.theme-showcase-heading{justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px;display:flex}.theme-showcase-heading>span{font-family:var(--sans);letter-spacing:-1px;font-size:18px;font-weight:650}.stores-mark{color:var(--red)}.theme-showcase-heading small{letter-spacing:.9px;color:var(--muted);font-size:6px}.theme-collage{grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;display:grid}.theme-shot{grid-column:span 2;min-width:0;margin:0}.theme-shot.theme-featured{grid-column:1/-1}.theme-shot a{background:#fff;border:1px solid #292d2815;display:block;overflow:hidden;box-shadow:0 4px 9px #292d2815}.theme-shot img{aspect-ratio:1.44;object-fit:cover;object-position:top;width:100%;height:auto;transition:transform .2s;display:block}.theme-shot.theme-featured img{aspect-ratio:2.55}.theme-shot a:hover img{transform:scale(1.025)}.theme-shot figcaption{color:var(--muted);margin-top:4px;font-size:8px}.theme-showcase>.art-caption{letter-spacing:1px;color:var(--muted);opacity:1;margin:18px 0 0;font-size:7px}.freelance-section{border-top:1px solid var(--line);padding:0 0 70px;overflow:hidden}.freelance-heading{justify-content:space-between;align-items:flex-end;padding-bottom:44px;display:flex}.freelance-heading>p{color:var(--muted);margin:0 0 5px;font-size:13px}.marquee-viewport{overflow:hidden}.marquee-track{will-change:transform;width:max-content;animation:82s linear infinite project-drift;display:flex}.marquee-group{gap:24px;padding-right:24px;display:flex}.freelance-card{border:1px solid var(--line);background:#f7f5ee;flex-shrink:0;width:360px;display:block;overflow:hidden}.marquee-viewport:hover .marquee-track,.showcase-paused .marquee-track{animation-play-state:paused}.marquee-viewport:has(:focus-visible){overflow-x:auto}.marquee-viewport:has(:focus-visible) .marquee-track{animation:none;transform:none}#showcase-toggle{cursor:pointer;color:var(--muted);background:0 0;border:0;padding:7px 0;font-size:10px}#showcase-toggle>span{color:var(--red);margin-left:8px}@keyframes project-drift{to{transform:translate(-50%)}}@media (width<=600px){.theme-showcase{padding:18px}.theme-showcase-heading>span{font-size:16px}.theme-showcase-heading small{letter-spacing:.6px;font-size:5px}.theme-collage{gap:8px}.theme-shot figcaption{font-size:7px}.theme-showcase>.art-caption{letter-spacing:.6px;font-size:6px}.freelance-section{padding-bottom:45px}.freelance-heading{padding-bottom:30px;display:block}.freelance-heading>p{margin-top:22px;font-size:12px}.freelance-card{width:285px}.marquee-group{gap:16px;padding-right:16px}#showcase-toggle{white-space:nowrap;padding-top:0;font-size:9px}}@media (prefers-reduced-motion:reduce){.marquee-track{will-change:auto;animation:none;transform:none}.marquee-viewport{overflow-x:auto}.marquee-group[aria-hidden=true]{display:none}.showcase-playing .marquee-track{animation:82s linear infinite project-drift}.showcase-playing .marquee-group[aria-hidden=true]{display:flex}.showcase-playing .marquee-viewport{overflow-x:hidden}.showcase-playing .marquee-viewport:has(:focus-visible){overflow-x:auto}.showcase-playing .marquee-viewport:has(:focus-visible) .marquee-track{animation:none}}.freelance-section{padding-bottom:38px}.freelance-heading{align-items:center;padding-top:38px;padding-bottom:22px}.freelance-heading h2{font-family:var(--sans);letter-spacing:2px;margin:0;font-size:10px;font-weight:500;line-height:1.6}.freelance-card{background:0 0;border:0;justify-content:center;align-items:center;width:210px;height:120px;padding:10px;display:flex;overflow:visible}.freelance-logo{object-fit:contain;width:auto;max-width:190px;height:auto;max-height:100px;display:block}.marquee-group{gap:38px;padding-right:38px}.marquee-track{animation-duration:65s}@media (width<=600px){.freelance-section{padding-bottom:25px}.freelance-heading{gap:15px;padding-top:28px;padding-bottom:15px;display:flex}.freelance-heading h2{letter-spacing:1.4px;font-size:8px}.freelance-card{width:160px;height:105px;padding:10px}.freelance-logo{max-width:140px;max-height:85px}.marquee-group{gap:20px;padding-right:20px}}.company-logos img,.job-company img,.project-brand img,.freelance-logo{filter:grayscale()sepia(.2)contrast(.9);mix-blend-mode:multiply;opacity:.78;transition:opacity .2s}.company-logos a:hover img,.company-logos a:focus-visible img,.job-company:hover img,.job-company:focus-visible img,.freelance-card:hover img,.freelance-card:focus-visible img{opacity:1}.job-company img{background:0 0;border-color:#0000}.freelance-logo{max-height:88px}.freelance-logo[src$=enfes-logo\.jpeg]{filter:grayscale()invert()contrast(2.1);opacity:.7}.freelance-logo[src$=aimobile-logo\.webp]{max-height:112px}.freelance-logo[src$=iphoneprix-logo\.png]{max-height:105px}@media (width<=600px){.freelance-logo{max-height:76px}.freelance-logo[src$=aimobile-logo\.webp]{max-height:94px}.freelance-logo[src$=iphoneprix-logo\.png]{max-height:90px}}.marquee-track{background:var(--paper)}.freelance-logo{filter:grayscale()sepia(.15)contrast(1.15);opacity:.84}.freelance-logo[src$=aimobile-logo\.webp]{filter:grayscale()contrast(1.5)brightness(.8);opacity:.9}.company-logos img,.job-company img{filter:none;mix-blend-mode:normal;opacity:1}.company-logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;display:grid}.company-logos a{text-align:center;gap:9px;min-width:0;min-height:74px;font-size:15px}.company-logos .brandrescue-logo{width:35px;height:40px}.freelance-logo{transition:filter .25s,opacity .25s}.freelance-card:hover .freelance-logo,.freelance-card:focus-visible .freelance-logo{filter:none;mix-blend-mode:normal;opacity:1}@media (width<=850px){.company-strip{padding:28px 0}.company-strip>.eyebrow{margin-bottom:18px}.company-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 8px}.company-logos a{flex-direction:column;grid-column:span 2;justify-content:center;gap:8px;min-height:84px;font-size:12px}.company-logos a:nth-child(4){grid-column:2/span 2}.company-logos a:nth-child(5){grid-column:4/span 2}.company-logos a:first-child img{width:100%;max-width:90px;height:30px}.company-logos .symbol-logo{width:30px;height:30px}.company-logos .brandrescue-logo{width:32px;height:35px}}.site-header{align-items:center}.identity{font-weight:500}.hero{text-align:center;justify-content:center;align-items:flex-start;height:100svh;min-height:640px;max-height:none;padding:clamp(145px,20svh,210px) 6% 0}.hero-copy{width:100%;max-width:960px;padding:0}.hero h1{letter-spacing:-.045em;margin-bottom:0;font-size:clamp(72px,7.4vw,112px)}.hero-actions{justify-content:center;margin-top:30px}.paper-wash{background:linear-gradient(#f3f1e9d1,#f3f1e9a6 32%,#f3f1e926 65%,#f3f1e940),radial-gradient(at 50% 25%,#f3f1e9cc,#0000 68%)}.project summary{grid-template-columns:1fr 30px}.project-body{padding-left:0}.project-description>p{margin-top:8px}.skills h3{margin-top:0}.portfolio footer{padding-bottom:30px}.portfolio:not(.is-ready){height:100svh;overflow:hidden}.site-content{opacity:0;transition:opacity .55s}.is-ready .site-content{opacity:1}.page-loader{z-index:4;background:var(--paper);color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:20px;font-size:12px;display:flex;position:fixed;inset:0}.loading-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.loading-landscape{width:min(70vw,320px);height:auto;overflow:visible}.loading-ghost,.loading-ink,.loading-detail{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}.loading-ghost{stroke-width:.8px;opacity:.13}.loading-ink{stroke-width:1.1px}.loading-ink path{stroke-dasharray:1;stroke-dashoffset:1px;animation:3.4s ease-in-out infinite ink-trace}.loading-ink path:nth-child(2){animation-delay:.22s}.loading-ink path:nth-child(3){animation-delay:.44s}.loading-detail{stroke-width:.65px;animation:3.4s ease-in-out infinite ink-settle}@keyframes ink-trace{0%{stroke-dashoffset:1px;opacity:.15}60%,82%{stroke-dashoffset:0;opacity:.65}to{stroke-dashoffset:0;opacity:0}}@keyframes ink-settle{0%,15%{opacity:.08}60%,82%{opacity:.36}to{opacity:.08}}@media (width<=600px){.hero h1{font-size:clamp(50px,13.5vw,70px)}.hero-actions{margin-top:25px;font-size:11px}.site-header{align-items:center}nav{gap:16px;padding:0}.skills>div{display:block}.skills h3{margin-bottom:8px}}@media (prefers-reduced-motion:reduce){.loading-ink path,.loading-detail{stroke-dashoffset:0;opacity:.5;animation:none}}