:root{
  --bg:#FAF8F4;
  --surface:#FFFFFF;
  --frame:#F1F0F3;
  --ink:#171717;
  --ink-dim:#6F6F6F;
  --line:rgba(23,23,23,0.08);
}
:root[data-theme="dark"]{
  --bg:#121212;
  --surface:#1A1A1A;
  --frame:#222126;
  --ink:#F5F5F5;
  --ink-dim:#A3A3A3;
  --line:rgba(245,245,245,0.10);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:72px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{
  font-weight:500;
  letter-spacing:-0.03em;
  text-wrap:balance;
  margin:0;
  line-height:1.15;
}
a{color:inherit;}
.wrap{max-width:720px;margin:0 auto;padding:0 28px;}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 28px;}
.eyebrow{
  font-size:0.75rem;
  font-weight:500;
  color:var(--ink-dim);
  margin:0 0 28px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

header.masthead{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
}
header.masthead .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; gap:16px;
}
.nameplate{
  font-size:0.95rem;
  font-weight:500;
  letter-spacing:-0.02em;
  text-decoration:none;
}
.nav-links{display:flex; align-items:center; gap:20px;}
.contact-link{
  font-size:0.9rem;
  text-decoration:none;
  color:var(--ink-dim);
}
.contact-link:hover, .contact-link:focus-visible{color:var(--ink);}
@media (max-width:640px){.nav-secondary{display:none;}}

.lang-switch{display:inline-flex; gap:8px;}
.lang-btn{
  all:unset; cursor:pointer;
  font-size:0.8rem; color:var(--ink-dim);
}
.lang-btn[lang="ar"]{font-family:"Tajawal",sans-serif; font-weight:700;}
.lang-btn:hover{color:var(--ink);}
.lang-btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.lang-btn.is-active{color:var(--ink);}

.hero{padding:56px 0 48px;}
.hero-title{
  font-size:clamp(2.2rem, 5.4vw, 3.2rem);
  font-weight:500;
  margin:0 0 18px;
  max-width:14ch;
}
.hero .lede{
  font-size:1.12rem;
  line-height:1.7;
  max-width:38ch;
  margin:0 0 14px;
  color:var(--ink-dim);
}
.hero-meta{
  margin:0;
  font-size:0.92rem;
  color:var(--ink-dim);
}
.hero-meta a{text-decoration:none; border-bottom:1px solid currentColor;}
.hero-meta a:hover{color:var(--ink);}

.work{padding:0 0 108px;}
.project{
  display:flex;
  align-items:center;
  gap:clamp(28px, 5vw, 72px);
  margin:0 0 88px;
}
.project:last-child{margin-bottom:0;}
.project.is-flip{flex-direction:row-reverse;}
.project-copy{flex:0 1 36%; min-width:220px;}
.project-visual{flex:1; min-width:0;}
.view-toggle{display:flex; gap:16px; margin:0 0 12px;}
.view-toggle button{
  all:unset; cursor:pointer;
  font-size:0.85rem; color:var(--ink-dim);
}
.view-toggle button:hover{color:var(--ink);}
.view-toggle button.is-active{color:var(--ink); border-bottom:1px solid currentColor;}
.view-toggle button:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.project-shot{
  position:relative;
  display:block;
  border-radius:22px;
  overflow:hidden;
  background:var(--frame);
  margin:0;
  aspect-ratio:16/9;
  box-shadow:0 16px 40px rgba(17,17,17,0.06);
}
.project-shot .shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.project-shot .shot.is-active{opacity:1;}
.project-copy h3{
  font-size:clamp(1.4rem, 2.4vw, 1.85rem);
  margin:0 0 10px;
}
.project-copy h3 a{text-decoration:none;}
.project-copy h3 a:hover{opacity:.55;}
.project-dek{
  color:var(--ink-dim);
  margin:0 0 14px;
  max-width:52ch;
}
.project-links{display:flex; flex-wrap:wrap; gap:8px 18px;}
.cs-link{
  font-size:0.9rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.cs-link:hover{opacity:.55;}
.byline{display:none;}

.path, .also{padding:0 0 88px;}
.path-list{list-style:none; margin:0; padding:0;}
.path-item{display:grid; grid-template-columns:40px 1fr; gap:16px; padding:20px 0; border-top:1px solid var(--line);}
.path-item:last-child{border-bottom:1px solid var(--line);}
.path-num{font-size:0.8rem; color:var(--ink-dim); padding-top:3px;}
.path-item h3{font-size:1.05rem; font-weight:500; margin-bottom:4px;}
.path-item p{color:var(--ink-dim); margin:0; max-width:58ch;}
.path-skills{color:var(--ink-dim); max-width:58ch; margin:22px 0 0;}

.also-intro{color:var(--ink-dim); max-width:58ch; margin:0 0 24px;}
.also-list{list-style:none; margin:0; padding:0;}
.also-item{padding:20px 0; border-top:1px solid var(--line);}
.also-item:last-child{border-bottom:1px solid var(--line);}
.also-item h3{font-size:1.05rem; font-weight:500; margin:0 0 4px;}
.also-stack{display:block; font-size:0.8rem; color:var(--ink-dim); margin-bottom:8px;}
.also-item p{margin:0; max-width:62ch; color:var(--ink-dim);}

.form-row input, .form-row textarea{
  padding:10px 0;
  border:none; border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
}
.form-row input:focus-visible, .form-row textarea:focus-visible{
  outline:none; border-bottom-color:var(--ink);
}
.btn-primary, .btn-text{
  display:inline-flex; align-items:center;
  font:inherit; font-size:0.9rem;
  text-decoration:none;
  padding:0;
  border:none;
  background:none;
  color:var(--ink);
  cursor:pointer;
  border-bottom:1px solid currentColor;
  border-radius:0;
}
.btn-primary:hover, .btn-text:hover{opacity:.55;}

.contact{padding:0 0 104px;}
.contact-box h2{font-size:clamp(1.8rem,4vw,2.4rem); margin:0 0 12px;}
.contact-box > p{color:var(--ink-dim); max-width:42ch; margin:0 0 32px;}
.contact-form{max-width:420px;}
.form-row{display:flex; flex-direction:column; gap:4px; margin-bottom:18px;}
.form-row label{font-size:0.8rem; color:var(--ink-dim);}
.form-row textarea{resize:vertical; min-width:0;}
.contact-form .btn-primary{margin-top:8px;}
.form-note{margin:14px 0 0; font-size:0.85rem; color:var(--ink-dim);}
.contact-alt{margin:24px 0 0; font-size:0.9rem; color:var(--ink-dim);}

footer{padding:0 0 48px;}
footer .bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
  font-size:0.8rem; color:var(--ink-dim);
}
.footer-nav{display:flex; gap:18px;}
.footer-nav a{color:var(--ink-dim); text-decoration:none;}
.footer-nav a:hover{color:var(--ink);}

html[dir="rtl"] body{font-family:"Tajawal",sans-serif;}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{
  font-family:"Tajawal",sans-serif; font-weight:700; letter-spacing:0; line-height:1.3;
}
html[dir="rtl"] .nameplate,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .contact-link,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-text,
html[dir="rtl"] .cs-link,
html[dir="rtl"] .path-num,
html[dir="rtl"] .view-toggle,
html[dir="rtl"] .hero-meta,
html[dir="rtl"] .footer-nav,
html[dir="rtl"] footer{
  font-family:"Tajawal",sans-serif; letter-spacing:0;
}
html[dir="rtl"] .hero-title{max-width:none;}
html[dir="rtl"] .project{flex-direction:row-reverse;}
html[dir="rtl"] .project.is-flip{flex-direction:row;}

@media (max-width:800px){
  .project, .project.is-flip,
  html[dir="rtl"] .project, html[dir="rtl"] .project.is-flip{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:22px;
    margin-bottom:64px;
  }
  .project-copy{flex:none; width:100%; min-width:0;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .project-shot .shot{transition:none;}
}