:root { --ink:#e8eee8; --muted:#9ba59e; --line:rgba(232,238,232,.16); --paper:#101414; --panel:#18201e; --lime:#d8ff5d; --orange:#ff8b62; --mono:var(--font-zed-mono); --marquee-speed:28s; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-agrandir); font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.page-shell { overflow-x:clip; }
.site-header, main > section, footer { max-width:1280px; margin:auto; padding-left:42px; padding-right:42px; }
.site-header { position:sticky; top:0; z-index:100; height:92px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:rgba(16,20,20,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
#work,#stack,#notes,#contact { scroll-margin-top:104px; }
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.wordmark { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:18px; font-weight:bold; letter-spacing:-2px; }.wordmark i { width:7px; height:7px; border-radius:50%; background:var(--lime); }
nav { display:flex; gap:31px; margin-left:auto; margin-right:48px; } nav a,.language { color:var(--muted); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; } nav a:hover,.language:hover { color:var(--lime); } nav a.is-active { color:var(--lime); }
.nav-toggle { display:none; background:none; border:0; padding:8px; cursor:pointer; flex-direction:column; gap:5px; }.nav-toggle i { display:block; width:18px; height:2px; background:var(--ink); transition:transform .25s ease; } body.nav-open .nav-toggle i:first-child { transform:translateY(3.5px) rotate(45deg); } body.nav-open .nav-toggle i:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.header-actions { display:flex; align-items:center; gap:22px; }.nav-cta { border:1px solid var(--ink); border-radius:999px; padding:10px 14px; font-size:12px; transition:background .2s ease,color .2s ease; }.nav-cta:hover { background:var(--ink); color:var(--paper); }.nav-cta span { color:var(--lime); margin-left:8px; }
.hero { min-height:640px; padding-top:115px; padding-bottom:96px; display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:80px; }
.eyebrow { color:var(--lime); font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin:0 0 20px; }.eyebrow > span { display:inline-block; height:7px; width:7px; background:var(--lime); border-radius:50%; margin-right:8px; }.hero .eyebrow > span { animation:dot-pulse 2.4s ease-in-out infinite; } @keyframes dot-pulse { 0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(216,255,93,.45); } 50% { opacity:.7; transform:scale(1.3); box-shadow:0 0 0 5px rgba(216,255,93,0); } }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:400; }
h1 { font-size:clamp(50px,6vw,82px); line-height:.98; letter-spacing:-.065em; max-width:680px; margin:0 0 27px; } em { color:var(--lime); font-family:var(--font-lora); font-weight:400; letter-spacing:-.075em; }
.hero-intro { max-width:510px; font-size:18px; line-height:1.55; color:var(--muted); margin-bottom:35px; }.hero-actions { display:flex; align-items:center; gap:27px; }.button { padding:15px 20px; display:inline-flex; gap:22px; align-items:center; font-size:13px; transition:transform .2s ease; }.button-primary { background:var(--lime); color:#142014; }.button-primary:hover { transform:translateY(-2px); }.button-primary span { font-size:17px; }.text-link { color:var(--ink); font-size:13px; border-bottom:1px solid var(--muted); padding-bottom:3px; }.text-link span { color:var(--lime); margin-left:5px; }
.code-card { background:#1b2522; border:1px solid rgba(216,255,93,.3); box-shadow:15px 15px 0 rgba(216,255,93,.12); transform:rotate(2deg); font-family:var(--mono); color:#d4ddd5; font-size:12px; }.card-top { height:46px; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 15px; gap:12px; color:var(--muted); font-size:10px; }.card-top b { margin-left:auto; font-weight:normal; color:var(--lime); }.terminal-dots { display:flex; gap:5px; }.terminal-dots i { width:6px; height:6px; border-radius:50%; background:#607068; }.terminal-dots i:first-child { background:var(--orange); }.card-top + pre { padding:25px 24px 18px; margin:0; overflow:auto; line-height:1.8; }.syntax-purple { color:#c89cff; }.syntax-green { color:#b4e47a; }.syntax-yellow { color:#ffcd70; }.syntax-blue { color:#9dccff; }.syntax-pink { color:#f39fc1; }.card-status { padding:12px 15px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }.card-status > span:last-child { float:right; }.pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--lime); margin-right:7px; }
.marquee { max-width:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:17px 0!important; overflow:hidden; white-space:nowrap; }.marquee div { display:inline-flex; align-items:center; gap:28px; padding-right:28px; animation:slide var(--marquee-speed) linear infinite; font:12px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }.marquee i { color:var(--lime); font-style:normal; } @keyframes slide { to { transform:translateX(-50%); } }
.work,.stack,.notes { padding-top:145px; padding-bottom:145px; }.section-heading { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; margin-bottom:68px; }.section-heading .eyebrow { grid-column:1; }.section-heading h2 { grid-column:1; grid-row:2; font-size:clamp(40px,4.5vw,61px); letter-spacing:-.06em; line-height:1; margin:0; }.section-heading > p:not(.eyebrow) { grid-column:2; grid-row:2; align-self:end; color:var(--muted); max-width:365px; margin:0; }.section-heading .text-link { grid-column:2; grid-row:2; align-self:end; justify-self:start; }
.project-list { border-top:1px solid var(--line); }.project { min-height:230px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:70px 1fr 150px 30px; gap:20px; padding:27px 5px; position:relative; transition:padding .3s, background .3s; }.project:hover { padding-left:19px; padding-right:19px; background:var(--panel); }.project-index,.project-type,.tags,.stack-no,.article-num { font:10px var(--mono); letter-spacing:.06em; color:var(--muted); }.project-type { text-transform:uppercase; margin-bottom:10px; }.project h3 { font-size:38px; letter-spacing:-.05em; margin:0 0 8px; }.project-main > p:not(.project-type) { color:var(--muted); max-width:430px; margin:0 0 17px; }.tags { display:flex; gap:7px; flex-wrap:wrap; }.tags span { padding:5px 7px; border:1px solid var(--line); color:#bdc7bf; }.project-mark { display:grid; place-items:center; width:100px; height:100px; border-radius:50%; align-self:center; justify-self:center; font-size:42px; }.video-mark { background:#ff7557; color:#231211; }.legal-mark { background:#ede4d1; color:#15211d; font-family:var(--font-lora); }.mohami-mark { background:#b0d7d4; color:#172722; font-family:var(--font-lora); }.project-arrow { align-self:center; font-size:25px; color:var(--lime); transition:transform .25s ease; }.project:hover .project-arrow { transform:translate(3px,-3px); }
.stack { background:#15201d; max-width:none!important; padding-left:max(42px, calc((100vw - 1280px)/2 + 42px))!important; padding-right:max(42px, calc((100vw - 1280px)/2 + 42px))!important; }.stack-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }.stack-card { min-height:270px; padding:25px 25px 20px 0; border-right:1px solid var(--line); margin-right:25px; display:flex; flex-direction:column; }.stack-card:last-child { border:0; }.stack-card h3 { font-size:25px; letter-spacing:-.04em; margin:auto 0 8px; }.stack-card p { color:var(--muted); font-size:14px; margin:0; max-width:210px; }.stack-card-accent h3 { color:var(--lime); }
.notes { padding-bottom:125px; }.articles { border-top:1px solid var(--line); }.articles a { display:grid; grid-template-columns:75px 1fr 20px; padding:24px 0; border-bottom:1px solid var(--line); align-items:center; transition:padding .25s; }.articles a:hover { padding-left:14px; padding-right:14px; background:var(--panel); }.articles p { font:10px var(--mono); color:var(--muted); margin:0 0 7px; text-transform:uppercase; letter-spacing:.07em; }.articles h3 { font-size:22px; margin:0; letter-spacing:-.035em; }.articles > a > span:last-child { color:var(--lime); font-size:21px; }
.contact { max-width:none!important; background:var(--lime); color:#142014; padding-top:115px; padding-bottom:35px; padding-left:max(42px, calc((100vw - 1280px)/2 + 42px))!important; padding-right:max(42px, calc((100vw - 1280px)/2 + 42px))!important; }.contact .eyebrow { color:#142014; }.contact h2 { font-size:clamp(47px,6vw,78px); line-height:.96; letter-spacing:-.065em; margin:0 0 42px; }.contact em { color:#253c2d; }.email-link { display:inline-block; border-bottom:2px solid #142014; padding-bottom:7px; font-size:clamp(22px,3vw,36px); letter-spacing:-.05em; }.email-link span { font-size:.8em; margin-left:15px; }.contact-bottom { margin-top:115px; padding-top:22px; border-top:1px solid rgba(20,32,20,.3); display:flex; justify-content:space-between; font:11px var(--mono); color:#2c4231; }.contact-bottom p { margin:0; }.contact-bottom div { display:flex; gap:25px; }.contact-bottom a { border-bottom:1px solid rgba(20,32,20,.4); }
footer { height:75px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:10px var(--mono); letter-spacing:.05em; } .back-top { color:var(--muted); }.back-top:hover { color:var(--lime); }
.js .section-reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }.js .section-reveal.is-visible { opacity:1; transform:none; }
@media (max-width:1024px) { :root { --marquee-speed:45s; } }
@media (max-width:760px) { .site-header,main > section,footer { padding-left:20px; padding-right:20px; }.site-header { height:70px; }.nav-toggle { display:flex; }.site-header nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; margin:0; padding:6px 20px 16px; background:var(--paper); border-bottom:1px solid var(--line); } body.nav-open nav { display:flex; } nav a { padding:9px 0; } .header-actions { margin-left:auto; gap:14px; } #work,#stack,#notes,#contact { scroll-margin-top:80px; }:root { --marquee-speed:60s; }.hero { min-height:auto; padding-top:82px; padding-bottom:80px; grid-template-columns:1fr; gap:58px; }.code-card { width:95%; justify-self:center; font-size:10px; }.section-heading { display:block; margin-bottom:44px; }.section-heading h2 { margin-bottom:22px; }.work,.stack,.notes { padding-top:86px; padding-bottom:86px; }.project { min-height:0; grid-template-columns:32px 1fr 20px; padding:25px 0; }.project-mark { display:none; }.project h3 { font-size:30px; }.stack { padding-left:20px!important; padding-right:20px!important; }.stack-grid { grid-template-columns:1fr 1fr; }.stack-card { min-height:230px; margin-right:14px; padding-right:14px; }.stack-card:nth-child(2) { border:0; }.contact { padding:80px 20px 30px!important; }.contact-bottom { margin-top:78px; }.contact-bottom div { gap:12px; }.contact-bottom { font-size:9px; }.articles a { grid-template-columns:42px 1fr 16px; }.articles h3 { font-size:18px; } footer { height:auto; min-height:72px; gap:10px; font-size:8px; } }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .section-reveal { opacity:1; transform:none; } }