/* ============ Fonts: IBM Plex Sans Arabic (self-hosted) ============ */
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ Tokens ============ */
:root {
  --ink: #15171B;
  --ink-2: #4A4F57;
  --paper: #F7F4EE;
  --paper-2: #EFEAE1;
  --line: #D9D2C5;
  --gold: #9C7C46;
  --font: "Plex Arabic", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --measure: 38em;
  color-scheme: light;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .switch, .download a { transition-duration: 0ms; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[dir="ltr"] body { line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
.skip { position: absolute; inset-inline-start: 1rem; top: -100%; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { top: 1rem; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ============ Sections ============ */
.section { padding-block: var(--section); border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.section--tint { background: var(--paper-2); }
.section__label { display: flex; align-items: center; gap: 1rem; font-size: .8125rem; font-weight: 500; color: var(--ink-2); margin-block-end: 2.5rem; }
.section__label::before { content: ""; inline-size: 2.5rem; block-size: 1px; background: var(--gold); }
[dir="ltr"] .section__label { text-transform: uppercase; letter-spacing: .12em; }

/* ============ Type ============ */
.eyebrow { font-size: .9375rem; color: var(--ink-2); font-weight: 500; }
.display { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.15; font-weight: 600; text-wrap: balance; }
[dir="ltr"] .display { letter-spacing: -.015em; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.summary { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.75; max-width: var(--measure); }

/* ============ Masthead ============ */
.masthead { padding-block: 1.5rem clamp(4rem, 9vw, 7rem); }
.masthead__bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem 1.5rem; padding-block-end: clamp(3rem, 8vw, 6rem); }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-weight: 600; }
.brand__mark { inline-size: 2.5rem; block-size: 2.5rem; }
.nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .9375rem; }
.nav a { text-decoration: none; color: var(--ink-2); transition: color 150ms cubic-bezier(0.2, 0, 0, 1); }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.switch { text-decoration: none; border: 1px solid var(--line); padding: .5rem 1rem; border-radius: 999px; font-size: .9375rem; justify-self: end; grid-row: 1; grid-column: 2; transition-property: scale, color, background-color, border-color; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.switch:hover { border-color: var(--ink); }
.switch:active { scale: 0.96; }
@media (min-width: 56rem) {
  .masthead__bar { grid-template-columns: auto 1fr auto; }
  .nav { grid-column: auto; justify-self: center; }
  .switch { grid-row: auto; grid-column: auto; }
}
.masthead__grid { display: grid; gap: 3rem; align-items: end; }
@media (min-width: 56rem) { .masthead__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); } }
.masthead__text { display: grid; gap: 1.25rem; }
.creds { display: grid; gap: .4rem; font-size: .9375rem; color: var(--ink-2); }
.creds li { display: flex; align-items: center; gap: .75rem; }
.creds li::before { content: ""; flex: none; inline-size: 1rem; block-size: 1px; background: var(--gold); }
.masthead__portrait { max-inline-size: 26rem; justify-self: end; inline-size: 100%; }
.masthead__portrait img { aspect-ratio: 4 / 5; object-fit: cover; inline-size: 100%; outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; background: var(--paper-2); }
@media (max-width: 55.98rem) { .masthead__portrait { justify-self: start; max-inline-size: 18rem; order: -1; } }

/* ============ Metrics ============ */
.metrics { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.metric { border-top: 1px solid var(--gold); padding-block-start: 1rem; display: grid; gap: .25rem; align-content: start; }
.metric__value { font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; justify-self: start; }
.metric__unit { font-size: 1rem; font-weight: 500; }
.metric__label { font-size: .9375rem; color: var(--ink-2); }

/* ============ Case studies ============ */
.case { display: grid; gap: 1.5rem 3rem; padding-block: 3rem; border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; padding-block-start: 0; }
@media (min-width: 60rem) {
  .case { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .case__head { grid-column: 1 / -1; }
}
.case__num { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.5rem; }
.case__title { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 600; line-height: 1.3; text-wrap: balance; max-width: 28em; margin-block: .5rem .75rem; }
.case__meta { display: flex; flex-wrap: wrap; gap: .25rem 0; color: var(--ink-2); font-size: .9375rem; }
.case__meta span + span::before { content: "·"; color: var(--gold); margin-inline: .6rem; }

@media (max-width: 39.98rem) {
  .case__meta { display: grid; gap: .15rem; }
  .case__meta span + span::before { content: none; }
}
.case__body { display: grid; gap: .5rem; max-width: var(--measure); }
.case__label { font-size: .8125rem; font-weight: 500; color: var(--ink-2); margin-block-start: 1rem; }
[dir="ltr"] .case__label { text-transform: uppercase; letter-spacing: .1em; }
.case__body .case__label:first-child, .case__outcome .case__label { margin-block-start: 0; }
.case__outcome { background: var(--paper-2); border-inline-start: 2px solid var(--gold); padding: 1.5rem; align-self: start; display: grid; gap: .5rem; }
.case__metrics { display: grid; gap: .75rem; margin-block-start: .75rem; padding-block-start: .75rem; border-top: 1px solid var(--line); }
.case__metrics li { display: flex; align-items: baseline; gap: .6rem; }
.case__metric-value { font-weight: 600; font-size: 1.375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============ Platforms ============ */
.section__intro { max-width: var(--measure); color: var(--ink-2); margin-block: -1.5rem 2.5rem; }
.platforms { display: grid; gap: 2.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.platform { display: grid; gap: 1rem; align-content: start; }
.platform__shot img { aspect-ratio: 2 / 1; object-fit: cover; object-position: top; inline-size: 100%; outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; background: var(--paper); }
.platform__body { display: grid; gap: .35rem; }
.platform__num { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.5rem; justify-self: start; }
.platform__name { font-size: 1.25rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.platform__org { color: var(--ink-2); font-size: .9375rem; }
.platform__summary { font-size: .9375rem; text-wrap: pretty; }

/* ============ Career ============ */
.timeline { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: 1.25rem; max-width: 48rem; }
.timeline__years { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline__role { font-weight: 600; }
.timeline__org { color: var(--ink-2); font-size: .9375rem; }
.aside { margin-block-start: 2rem; color: var(--ink-2); font-size: .9375rem; max-width: var(--measure); }
.timeline dt, .timeline dd { margin: 0; }

/* ============ Education and credentials ============ */
.edu { display: grid; gap: 1rem; max-width: 48rem; margin-block-end: 3.5rem; }
.edu__item { display: grid; gap: .15rem; padding-block-end: 1rem; border-bottom: 1px solid var(--line); }
.edu__degree { font-weight: 600; }
.edu__degree--top { font-size: 1.25rem; }
.edu__note, .edu__years { color: var(--ink-2); font-size: .9375rem; }
.groups { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.group__title { font-size: .9375rem; font-weight: 600; margin-block-end: .5rem; }
.group ul { display: grid; gap: .25rem; }
.group li { font-size: .9375rem; }
[dir="rtl"] .group li { text-align: end; }
.groups__note { margin-block-start: 2rem; color: var(--ink-2); font-size: .9375rem; }

/* ============ Recognition ============ */
.recog { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.recog__title { font-weight: 600; }
.recog__detail { color: var(--ink-2); font-size: .9375rem; text-wrap: pretty; }

/* ============ Contact and footer ============ */
.contact { display: grid; gap: .5rem; font-size: 1.125rem; }
.contact a { text-decoration: none; transition: color 150ms cubic-bezier(0.2, 0, 0, 1); }
.contact a:hover { text-decoration: underline; }
.download { margin-block-start: 2rem; }
.download a { display: inline-block; border: 1px solid var(--ink); padding: .6rem 1.2rem; text-decoration: none; font-weight: 500; transition-property: scale, color, background-color, border-color; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.download a:hover { background: var(--ink); color: var(--paper); }
.download a:active { scale: 0.96; }
.footer { padding-block: 2.5rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .875rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }