/*! ============================================================================
 *  style.css -- design tokens and typography system
 *  Copyright (c) 2026 Ahmed Sobhy. All Rights Reserved.
 *
 *  Original visual identity and design system. Proprietary — not open source.
 *  Reproduction, redistribution or derivative works (including reskinning this
 *  design with different content) are prohibited without prior written
 *  permission. See LICENSE.txt.
 *
 *  Bundled Noto Sans Arabic is licensed separately under the SIL Open Font
 *  License 1.1 — see assets/fonts/OFL.txt.
 * ========================================================================== */
/* =========================================================================
   Ahmed Sobhy — Academic Portfolio
   Design tokens: Deep Navy + Gold (academic prestige) + Turquoise (edtech)
   ========================================================================= */

/* =========================================================================
   Noto Sans Arabic — bundled locally, no network at runtime.
   -------------------------------------------------------------------------
   Files live in assets/fonts/ (SIL Open Font License 1.1). These are the
   Arabic-subset builds, not the full family: the unicode-range below keeps
   the browser from using them for Latin text, so digits, "MBA", "LinkedIn"
   and institution names inside Arabic pages keep the system Latin face
   they already had. It also means the files are only fetched when Arabic
   text is actually rendered — the eight other languages never touch them.

   Three static weights rather than the variable build: together they are
   smaller (152 KB vs 162 KB) and each one is fetched only if that weight
   is really used on the page.

   font-display: swap — text paints immediately in the fallback and swaps
   when the file arrives, so there is no invisible-text (FOIT) pause. The
   fallback is Segoe UI, an Arabic face with similar metrics, which keeps
   the swap from shifting the layout noticeably.
   ========================================================================= */
/* =========================================================================
   Amiri — the Arabic display face, bundled locally.
   -------------------------------------------------------------------------
   Headings previously relied on 'Traditional Arabic', a Windows system font
   that is NOT shipped with this site and cannot be: it belongs to Microsoft.
   Anyone on macOS, Linux, Android or iOS — and anyone whose browser limits
   font fingerprinting — fell through to 'Times New Roman', which is 29%
   wider and shapes Arabic joins poorly. That is why the same heading sat on
   one line locally and broke onto two once published.

   Amiri is a classical Naskh close in character to Traditional Arabic, and
   its SIL OFL licence permits redistribution, so bundling it makes the
   headings render identically on every device instead of depending on what
   the visitor happens to have installed.

   Same unicode-range discipline as Noto below: Arabic codepoints only, so
   Latin runs keep their own face and the eight other languages never fetch
   these files.
   ========================================================================= */
@font-face{
  font-family: 'Amiri';
  src: url('../assets/fonts/Amiri-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face{
  font-family: 'Amiri';
  src: url('../assets/fonts/Amiri-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face{
  font-family: 'Noto Sans Arabic';
  src: url('../assets/fonts/NotoSansArabic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face{
  font-family: 'Noto Sans Arabic';
  src: url('../assets/fonts/NotoSansArabic-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face{
  font-family: 'Noto Sans Arabic';
  src: url('../assets/fonts/NotoSansArabic-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root{
  /* ---- Color: Dark (default) ---- */
  --bg:            #0A1128;
  --bg-alt:        #060B1C;
  --surface:       #101B3D;
  --surface-2:     #16234A;
  --border:        rgba(201,162,39,0.16);
  --border-strong: rgba(201,162,39,0.32);

  --gold:          #C9A227;
  --gold-light:    #E8C766;
  --turquoise:     #2EC4B6;
  --turquoise-light:#5EEAD4;

  --text:          #F5F3EC;
  --text-muted:    #A8B0C3;
  --text-faint:    #828BAA;   /* WCAG AA: 4.53:1 on --surface-2 (was #6B7390 = 3.26:1) */

  --shadow: 0 20px 60px rgba(0,0,0,0.45);

  /* =====================================================================
     TYPOGRAPHY SYSTEM
     ---------------------------------------------------------------------
     Three layers, all driven from here:
       1. Font stacks  — one per script family.
       2. Type scale   — 7 levels in rem, so browser font-size settings
                         are respected. Never hardcode px in a rule.
       3. Script tuning — each language block below re-declares only the
                          multipliers/line-heights/tracking it needs; no
                          rule anywhere repeats a per-language font-size.
     ===================================================================== */

  /* ---- 1. Font stacks (base definitions — never self-referential) ---- */
  --font-display-latin:  Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  /* Amiri first because it is bundled — it is the only entry guaranteed to
     exist on every device. The rest remain as fallbacks for the moment
     before the file arrives, or if it fails to load. */
  --font-display-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', 'Times New Roman', serif;
  --font-body-latin:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body-arabic:    'Segoe UI', 'Noto Sans Arabic', 'Dubai', 'Geeza Pro', Tahoma, Arial, sans-serif;
  --font-mono:           'Courier New', Courier, monospace;

  /* Resolved per language further down. */
  --font-display: var(--font-display-latin);
  --font-body:    var(--font-body-latin);
  /* Small labels/meta follow the body script so Arabic and CJK never
     fall through a Latin-only stack. */
  --font-label:   var(--font-body);
  /* Latin-only decorative mono (codes, years). Neutralised for other
     scripts, which have no glyphs in a Latin monospace face. */
  --font-utility: var(--font-mono);

  /* ---- 2. Type scale — 7 levels ----
     Optical multipliers: Arabic and CJK faces render smaller than
     Georgia at an identical font-size (measured: Traditional Arabic
     ink-height 75 vs Georgia 98 at 100px), so each script corrects
     headings and body independently instead of hardcoding sizes. */
  --type-scale: 1;          /* body + label levels */
  --type-scale-display: 1;  /* display / h1 / h2 / h3 levels */

  --fs-display:  calc(clamp(2.375rem, 5vw,   4rem)      * var(--type-scale-display));
  --fs-h1:       calc(clamp(1.875rem, 3.6vw, 2.625rem)  * var(--type-scale-display));
  --fs-h2:       calc(clamp(1.5rem,   2.8vw, 1.875rem)  * var(--type-scale-display));
  --fs-h3:       calc(1.1875rem                          * var(--type-scale-display));
  --fs-body-lg:  calc(1.0625rem                          * var(--type-scale));
  --fs-body:     calc(0.9375rem                          * var(--type-scale));
  --fs-label:    calc(0.8125rem                          * var(--type-scale));

  /* ---- 3. Rhythm & tracking ---- */
  --lh-display: 1.15;   /* display / h1 / h2 */
  --lh-heading: 1.35;   /* h3 and short headline-ish text */
  --lh-body:    1.65;   /* paragraphs */

  --ls-label: 0.16em;   /* eyebrow / small-caps tracking */
  --ls-meta:  0.04em;   /* metadata lines */
  --ls-title: 0.01em;
  --tt-label: uppercase;
  --fw-label: 600;

  /* ---- Layout ---- */
  --container: 1180px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --header-h: 76px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"]{
  --bg:            #F7F5EE;
  --bg-alt:        #EFEADA;
  --surface:       #FFFFFF;
  --surface-2:     #FBF9F2;
  --border:        rgba(169,121,28,0.22);
  --border-strong: rgba(169,121,28,0.4);

  --gold:          #9C7415;
  --gold-light:    #B98E22;
  --turquoise:     #0E8074;
  --turquoise-light:#0A6259;

  --text:          #14192B;
  --text-muted:    #4B5266;
  --text-faint:    #63697F;   /* WCAG AA: 4.52:1 on --bg-alt (was #7A8199 = 3.22:1) */

  --shadow: 0 20px 50px rgba(20,25,43,0.12);
}

/* =========================================================================
   Per-script tuning (offline, system fonts only)
   -------------------------------------------------------------------------
   Every block below redeclares ONLY variables — no rule sets a font-size
   per language. Stacks always extend --font-body-latin / --font-display-latin
   (the base definitions), never var(--font-body) / var(--font-display),
   which would be a circular reference: CSS invalidates the property and
   silently falls back to Times New Roman.
   ========================================================================= */

/* ---- Arabic: cursive script — letter-spacing severs the joins, and
        uppercase is meaningless. Needs a bigger optical size and a taller
        line so dots below the baseline clear the next line. ---- */
html[lang="ar"]{
  --font-display: var(--font-display-arabic);
  --font-body:    var(--font-body-arabic);
  --font-utility: var(--font-body-arabic);

  --type-scale: 1.06;
  /* Recalibrated for Amiri. The old 1.18 was measured against Traditional
     Arabic, whose letterforms are noticeably smaller and narrower; Amiri
     sets larger at the same nominal size, so the same multiplier overshot
     and pushed the hero title onto a third line. */
  --type-scale-display: 1.08;

  --lh-display: 1.4;
  --lh-heading: 1.55;
  --lh-body:    1.9;

  --ls-label: 0;
  --ls-meta:  0;
  --ls-title: 0;
  --tt-label: none;

  /* Long-form reading. Only paragraphs and descriptions use these — never
     headings, the philosophy quote or eyebrows, which keep the display
     face that carries the site's Arabic identity. Declared here so the
     eight other languages never see the tokens at all. */
  --font-reading: 'Noto Sans Arabic', var(--font-body-arabic);
  --fs-reading:   1.125rem;  /* 18px */
  --lh-reading:   1.9;
}

/* ---- CJK: no letter-spacing (it breaks word cohesion), no uppercase,
        a taller line, and a floor on small sizes — dense glyphs are
        unreadable below ~12px. ---- */
html[lang="zh"], html[lang="ja"], html[lang="ko"]{
  --type-scale: 1.06;
  --lh-display: 1.35;
  --lh-heading: 1.5;
  --lh-body:    1.8;

  --ls-label: 0;
  --ls-meta:  0;
  --ls-title: 0;
  --tt-label: none;
}
html[lang="zh"]{
  --font-display: 'Songti SC', 'STSong', 'Noto Serif CJK SC', 'SimSun', var(--font-display-latin);
  --font-body:    'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'Noto Sans CJK SC', var(--font-body-latin);
  --font-utility: var(--font-body);
  --type-scale-display: 1.06;
}
html[lang="ja"]{
  --font-display: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', 'MS Mincho', var(--font-display-latin);
  --font-body:    'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans CJK JP', var(--font-body-latin);
  --font-utility: var(--font-body);
  --type-scale-display: 1;
}
html[lang="ko"]{
  --font-display: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Serif CJK KR', var(--font-display-latin);
  --font-body:    'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', var(--font-body-latin);
  --font-utility: var(--font-body);
  --type-scale-display: 1.06;
}

*, *::before, *::after{ box-sizing: border-box; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  overflow-x: hidden;
}

/* Images are not draggable out of the page. This is friction only — the
   bytes are still in the browser cache, as they must be to render at all —
   but it stops the accidental drag-to-desktop that accounts for most casual
   copying. Text selection is deliberately left untouched: user-select:none
   would break screen readers and translation tools for no real gain. */
img{
  max-width: 100%; display: block;
  -webkit-user-drag: none; user-drag: none;
}
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; cursor: pointer; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ---- Skip link: off-screen until focused, then anchored under the header.
   Uses logical inset-inline-start so it lands correctly in RTL too. ---- */
.skip-link{
  position: fixed; z-index: 900;
  inset-inline-start: 16px; top: -100px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 10px 18px; font-size: var(--fs-body);
  transition: top 0.2s var(--ease);
}
.skip-link:focus{ top: calc(var(--header-h) + 8px); }

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   Loading screen
   ========================================================================= */
#loading-screen{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  background: var(--bg);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
#loading-screen.hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.loading-mark{ position: relative; width: 88px; height: 88px; display:flex; align-items:center; justify-content:center; }
.loading-ring circle{
  fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: 0.5;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  transform-origin: center;
  animation: ring-draw 1.4s var(--ease) infinite;
}
.loading-ring{ width: 88px; height: 88px; position: absolute; inset: 0; animation: ring-spin 2.6s linear infinite; }
@keyframes ring-draw{ 0%{ stroke-dashoffset: 320; } 50%{ stroke-dashoffset: 40; } 100%{ stroke-dashoffset: 320; } }
@keyframes ring-spin{ to{ transform: rotate(360deg); } }
.loading-initials{ font-family: var(--font-display); font-size: 1.375rem; color: var(--text); letter-spacing: var(--ls-title); }
.loading-text{
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--text-muted);
}

/* =========================================================================
   Header / Nav
   ========================================================================= */
.site-header{
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.header-inner{
  max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand{
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: var(--ls-title);
  color: var(--text); flex-shrink: 0;
}
/* The brand is a fixed size rather than a type-scale step, so it never gets
   the optical correction Arabic headings receive elsewhere: Traditional
   Arabic renders ~23% shorter than Georgia at the same font-size (measured
   ink-height 75 vs 98 at 100px), which left the name reading as a nav link
   instead of an identity. Corrected for Arabic only — every other language
   keeps 1.25rem. letter-spacing already resolves to 0 here via --ls-title. */
html[lang="ar"] .brand{
  font-size: 1.5rem;
  font-weight: 600;
}
.main-nav ul{ display: flex; gap: 30px; }
.main-nav a{
  font-size: var(--fs-body); letter-spacing: var(--ls-meta); color: var(--text-muted);
  position: relative; padding: 6px 0; transition: color 0.25s var(--ease);
}
.main-nav a::after{
  content: ""; position: absolute; left:0; right:0; bottom: -2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.main-nav a:hover{ color: var(--text); }
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display: flex; align-items: center; gap: 14px; }

/* Language switcher */
.lang-switcher{ position: relative; }
.lang-toggle{
  display:flex; align-items:center; gap:6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: 999px;
  font-size: var(--fs-label); letter-spacing: var(--ls-meta);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.lang-toggle:hover{ border-color: var(--border-strong); background: var(--surface); }
.lang-toggle .chevron{ width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.lang-switcher.open .chevron{ transform: rotate(180deg); }
.lang-menu{
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 168px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s var(--ease);
  max-height: 320px; overflow-y: auto;
}
.lang-switcher.open .lang-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li button{
  width: 100%; text-align: start; background: transparent; border: none;
  color: var(--text); padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-body); display:flex; align-items:center;
  transition: background 0.2s var(--ease);
}
.lang-menu li button:hover{ background: var(--surface-2); }
/* Current language is marked by colour alone — no badge, no outline. */
.lang-menu li button.active{ color: var(--gold); }
.lang-menu li button[disabled]{ opacity: 0.35; cursor: not-allowed; }
.lang-menu li button .soon{ font-size: var(--fs-label); text-transform: var(--tt-label); letter-spacing: var(--ls-label); color: var(--text-faint); }
.lang-name{ font-size: var(--fs-body); }
/* Kept on the toggle only: below 640px the label is hidden and this code
   is the button's entire content. Always Latin, so a real mono face. */
.lang-toggle #lang-current-code{
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--turquoise-light); letter-spacing: 0.02em;
}
.lang-toggle #lang-current-label{ display: none; }
@media (min-width: 640px){ .lang-toggle #lang-current-label{ display: inline; } }

/* Theme toggle */
.theme-toggle{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; display:flex; align-items:center; justify-content:center;
  color: var(--text); transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.theme-toggle:hover{ border-color: var(--border-strong); background: var(--surface); }
.theme-toggle svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; position: absolute; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.theme-toggle .icon-sun circle{ fill: none; }
.theme-toggle .icon-moon path{ fill: currentColor; stroke: none; }
[data-theme="dark"] .theme-toggle .icon-moon, :root:not([data-theme="light"]) .theme-toggle .icon-moon{ opacity: 1; }
:root:not([data-theme="light"]) .theme-toggle .icon-sun{ opacity: 0; transform: rotate(-40deg); }
[data-theme="light"] .theme-toggle .icon-sun{ opacity: 1; }
[data-theme="light"] .theme-toggle .icon-moon{ opacity: 0; transform: rotate(40deg); }

/* Mobile nav toggle */
.nav-toggle{ display:none; width: 34px; height: 34px; border: none; background: transparent; flex-direction: column; justify-content:center; gap: 6px; }
.nav-toggle span{ display:block; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h); overflow: hidden;
  background: radial-gradient(120% 90% at 80% -10%, color-mix(in srgb, var(--turquoise) 12%, transparent), transparent 60%),
              radial-gradient(90% 70% at 0% 110%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
              var(--bg);
}
.hero-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-calligraphy{ position:absolute; top: 50%; left: 50%; width: min(900px, 90vw); transform: translate(-50%,-50%); opacity: 0.06; }
.calligraphy-text{
  /* System faces only, deliberately NOT var(--font-display-arabic): this
     watermark sits behind the hero at 6% opacity on every language, and
     pointing it at the bundled Amiri pulled a 108 KB download onto the eight
     pages that have no Arabic text at all. Its exact letterforms carry no
     meaning at this opacity. */
  font-family: 'Traditional Arabic', 'Times New Roman', serif; font-size: 220px;
  fill: none; stroke: var(--gold); stroke-width: 1;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: draw-calligraphy 3.5s var(--ease) 0.4s forwards;
}
@keyframes draw-calligraphy{ to{ stroke-dashoffset: 0; fill: var(--gold); } }
.hero-pattern{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--gold) 6%, transparent) 1px, transparent 1px),
    linear-gradient(-45deg, color-mix(in srgb, var(--turquoise) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 40%, black, transparent 75%);
  opacity: 0.5;
}

.hero-inner{
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto; padding: 60px 32px;
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: center;
}
.eyebrow{
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--turquoise); margin: 0 0 18px;
}
.eyebrow.center{ text-align: center; }
.hero-title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display);
  line-height: var(--lh-display); margin: 0 0 18px; color: var(--text);
}
.hero-title .accent{ color: var(--gold-light); }
.hero-name{
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--text-muted); margin: 0 0 20px;
}
.hero-desc{ max-width: 560px; color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); margin: 0 0 34px; }
.hero-actions{ display: flex; gap: 16px; flex-wrap: wrap; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-size: var(--fs-body); letter-spacing: var(--ls-title);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  border: 1px solid transparent;
}
.btn-primary{ background: linear-gradient(120deg, var(--gold), var(--gold-light)); color: #17140A; font-weight: 600; }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--gold) 35%, transparent); }
.btn-ghost{ border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover{ background: var(--surface); transform: translateY(-2px); }

.hero-portrait{
  display: flex; justify-content: center;
  animation: portrait-appear 1.1s var(--ease) both;
  padding-top: 46px; /* reserves visual room for the breakout head so it never crowds the header */
}
.portrait-frame{
  position: relative;
  width: min(280px, 58vw);
  aspect-ratio: 3 / 4;
}
.portrait-frame img{
  position: absolute;
  left: 0; right: 0; top: -12%;
  width: 100%; height: 112%;
  object-fit: cover; object-position: 50% 12%;
  display: block;
  /* Arch / niche silhouette — a domed academic portrait, not a rectangle */
  border-radius: 50% 50% 8px 8px / 30% 30% 5% 5%;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--gold) 60%, transparent),
    0 32px 60px -24px rgba(0,0,0,.5),
    0 0 54px -12px color-mix(in srgb, var(--turquoise) 50%, transparent);
  animation: portrait-float 8s ease-in-out infinite, portrait-glow 6s ease-in-out infinite;
}
@keyframes portrait-appear{
  from{ opacity: 0; transform: translateY(20px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes portrait-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes portrait-glow{
  0%, 100%{
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gold) 60%, transparent),
      0 32px 60px -24px rgba(0,0,0,.5), 0 0 54px -12px color-mix(in srgb, var(--turquoise) 50%, transparent);
  }
  50%{
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gold) 80%, transparent),
      0 32px 60px -24px rgba(0,0,0,.5), 0 0 68px -8px color-mix(in srgb, var(--turquoise) 68%, transparent);
  }
}

.scroll-hint{
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--text-faint); z-index: 1;
}
.scroll-hint svg{ width: 16px; height:16px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* =========================================================================
   Sections generic
   ========================================================================= */
.section{ padding: 110px 0; }
.section.alt-bg{ background: var(--bg-alt); }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500;
  line-height: var(--lh-display); margin: 0; color: var(--text);
}
.innovation-desc{ color: var(--text-muted); margin-top: 14px; }
/* Purpose line under a section heading. Same weight as .innovation-desc so
   it reads as part of the existing heading system, not a new element. */
.section-desc{
  color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body);
  margin: 12px 0 0; max-width: 58ch;
}
.section-head.center .section-desc{ margin-inline: auto; }
.section-desc:empty{ display: none; }

/* Reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible{ opacity: 1; transform: translateY(0); }

/* ---- Academic profile strip ---- */
.academic-profile{ padding: 56px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.profile-line{
  text-align: center; font-family: var(--font-display); font-size: var(--fs-h3);
  line-height: var(--lh-heading); color: var(--gold-light); letter-spacing: var(--ls-title); margin: 0;
}

/* ---- Professional highlights (quick-scan credibility strip) ---- */
.highlights{ padding: 84px 0; }
.highlights-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 44px 28px; margin-top: 8px;
}
.highlight-item{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; }
.highlight-value{
  position: relative;
  font-family: var(--font-display); font-weight: 500; line-height: var(--lh-display);
  font-size: var(--fs-h1); color: var(--gold-light);
  padding-bottom: 16px; margin-bottom: 10px;
  white-space: nowrap;
}
.highlight-value::after{
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 26px; height: 2px; background: linear-gradient(90deg, var(--turquoise), var(--gold));
}
.highlight-label{
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--text); margin-bottom: 8px;
}
.highlight-desc{ font-size: var(--fs-body); color: var(--text-faint); line-height: var(--lh-body); max-width: 250px; }
/* A long value ("3 Languages") is wider than its 201px column at the full
   display size and used to spill into the neighbouring tile. The container
   query scales the value down to whatever the tile can hold, so it stays on
   one line and every tile's underline keeps the same baseline. Short values
   (9+, 3, عالمي) are unaffected — min() leaves them at --fs-h1. */
.highlight-item{ container-type: inline-size; }
.highlight-value{ max-width: 100%; font-size: min(var(--fs-h1), 21cqi); }

/* ---- About ---- */
.about-grid{ display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.about-body p{ color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); margin: 0 0 20px; }
/* Lead paragraph: same size as the rest, separated by colour and weight
   instead of an imperceptible 1.5px step. */
.about-body p:first-child{ color: var(--text); font-weight: 500; }

/* ---- Achievements ---- */
.achievements-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover{ transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card-icon{
  width: 44px; height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--turquoise) 14%, transparent); color: var(--turquoise-light); margin-bottom: 18px;
}
.card-icon svg{ width: 22px; height: 22px; fill:none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card h3{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-heading); margin: 0 0 8px; color: var(--text); }
.card p{ color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }

/* ---- Timeline ---- */
.timeline{ position: relative; padding-inline-start: 36px; }
.timeline::before{
  content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 5px; width: 1px;
  background: linear-gradient(var(--gold), var(--turquoise));
  opacity: 0.4;
}
.timeline-item{ position: relative; padding-bottom: 36px; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-dot{
  position: absolute; inset-inline-start: -36px; top: 26px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gold); z-index: 1;
}
.timeline-item.in-view .timeline-dot{ background: var(--gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 18%, transparent); }

.timeline-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 30px; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.timeline-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.timeline-card-head{ display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.timeline-card-head .card-icon{ margin-bottom: 0; width: 42px; height: 42px; flex-shrink: 0; }
.timeline-period-badge{
  display: inline-block; font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--ls-meta);
  color: var(--turquoise-light); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 3px 13px; margin: 0 0 9px;
}
.timeline-card h3{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-heading); margin: 0 0 3px; color: var(--text); }
.timeline-org{ color: var(--text-faint); font-size: var(--fs-label); letter-spacing: var(--ls-meta); margin: 0; }
.timeline-summary{ color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 6px; max-width: 640px; }

.timeline-block{ margin-top: 16px; }
.timeline-block-label{
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label);
  color: var(--text-faint); margin: 0 0 9px;
}
.timeline-list, .timeline-achievements{ margin: 0; padding: 0; }
.timeline-list li, .timeline-achievements li{
  color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); padding-inline-start: 22px; position: relative; margin-bottom: 7px;
}
.timeline-list li::before{ content: "—"; position: absolute; inset-inline-start: 0; color: var(--gold); }
.timeline-achievements li{ color: var(--text); }
.timeline-achievements li::before{
  content: "★"; position: absolute; inset-inline-start: 1px; top: 0.5px; font-size: 0.625rem; color: var(--turquoise);
}

.timeline-skills{ display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag{
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--ls-meta);
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--turquoise-light); background: color-mix(in srgb, var(--turquoise) 8%, transparent);
}

/* ---- Methodology ---- */
.philosophy-quote{
  max-width: 720px; margin: 0 auto 56px; text-align: center; padding: 0 20px;
  font-family: var(--font-display); font-size: var(--fs-h2); font-style: normal;
  color: var(--text); line-height: var(--lh-heading); position: relative;
}
.philosophy-quote::before, .philosophy-quote::after{ content: '"'; color: var(--gold); }
.methodology-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }

/* ---- Innovation ---- */
.innovation-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.innovation-areas{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.innovation-area{
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px;
  background: var(--surface); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.innovation-area:hover{ border-color: var(--turquoise); transform: translateY(-4px); }

/* ---- Project (feature) ---- */
.project-card{
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 56px; text-align: center;
}
.project-glow{
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--turquoise) 22%, transparent), transparent 70%);
  top: -220px; inset-inline-end: -160px; pointer-events: none;
}
.project-card h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-display); margin: 10px 0 18px; color: var(--gold-light); }
.project-desc{ max-width: 640px; margin: 0 auto 28px; color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.project-features{
  max-width: 520px; margin: 0 auto 24px; text-align: start; display: inline-block;
}
.project-features li{
  color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); padding-inline-start: 20px; position: relative; margin-bottom: 8px;
}
.project-features li::before{ content: "—"; position: absolute; inset-inline-start: 0; color: var(--turquoise); }
.project-status{
  display: inline-block; margin: 0 0 22px; padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong); font-family: var(--font-label);
  font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--turquoise-light);
}
.project-tags{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.project-tags span{
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 16px;
  font-size: var(--fs-label); letter-spacing: var(--ls-meta); color: var(--turquoise-light);
}

/* ---- Skills ---- */
.skills-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.skill-chip{
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px;
  background: var(--surface); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text);
  display: flex; align-items: center; gap: 12px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.skill-chip:hover{ border-color: var(--gold); transform: translateY(-3px); }
.skill-chip .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--turquoise); flex-shrink:0; }

/* ---- Education ---- */
.education-list{ display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
.education-item{
  display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 26px 0;
  border-bottom: 1px solid var(--border); align-items: start;
}
.education-year{ font-family: var(--font-utility); color: var(--gold-light); font-size: var(--fs-body); padding-top: 2px; }
.education-item h3{ font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0 0 4px; color: var(--text); }
.education-item p{ margin: 0; color: var(--text-faint); font-size: var(--fs-label); letter-spacing: var(--ls-meta); }
.education-meta{ margin-bottom: 6px !important; }
/* Scoped through .education-item so it outranks `.education-item p` above
   on specificity instead of on !important, which would otherwise block any
   later override of these properties. */
.education-item .education-desc{ color: var(--text-muted); font-size: var(--fs-body); letter-spacing: normal; line-height: var(--lh-body); }

/* ---- Certifications ---- */
.certifications-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
.cert-item{
  display: flex; align-items: flex-start; gap: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px;
  background: var(--surface);
}
.cert-item .card-icon{ margin: 0; width: 36px; height: 36px; flex-shrink: 0; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-light); }
.cert-body{ display: flex; flex-direction: column; gap: 4px; }
.cert-name{ font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-heading); color: var(--text); }
.cert-meta{ font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--ls-meta); color: var(--text-faint); }
.cert-desc{ font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-body); }
.cert-courses{ margin: 6px 0 0; padding: 0 0 0 1.2em; font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-body); }
html[dir="rtl"] .cert-courses{ padding: 0 1.2em 0 0; }
.cert-courses li{ margin-bottom: 2px; }

/* ---- Contact ---- */
.contact-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.contact-desc{ color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); margin: 0 0 30px; max-width: 440px; }
.contact-detail{ display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.contact-label{
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--text-faint);
}
/* display:flex above would otherwise defeat the hidden attribute the
   profiles block relies on. */
.contact-detail[hidden]{ display: none; }
.contact-detail a{ color: var(--turquoise-light); font-size: var(--fs-body-lg); }
.contact-detail a:hover{ text-decoration: underline; }

/* Professional profiles — same quiet weight as the contact details above,
   deliberately not a button or a card. */
.contact-profiles{ gap: 6px; }
.profile-links{ display: flex; flex-wrap: wrap; gap: 20px; }
.profile-links a{ display: inline-flex; align-items: center; gap: 8px; }
.profile-icon{
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* WeChat QR — the same quiet card language as the rest of Contact: existing
   border token, existing radius, existing hover. The white plate is not a new
   colour choice; a QR must sit on white to stay scannable in the dark theme. */
.contact-wechat{ gap: 10px; align-items: start; }
.wechat-qr{
  display: inline-block; align-self: start;
  /* This plate is white, so its padding is part of the code's quiet zone, not
     a second margin on top of it — the scanner reads image-white and
     plate-white as one continuous field. The image carries 3 modules and this
     adds the rest, landing at 4.3 modules against the 4 that ISO/IEC 18004
     requires. Reducing either further drops below the standard. */
  padding: 4px; background: #FFFFFF;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  line-height: 0;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.wechat-qr:hover{ border-color: var(--border-strong); transform: translateY(-2px); }
/* height:auto, never a fixed square. The exported code is not necessarily a
   square canvas (the current one is 821x770), and forcing it to a square
   stretches the modules — a distorted QR can fail to scan. */
.wechat-qr img{ width: 130px; height: auto; display: block; }
.wechat-hint{ font-size: var(--fs-label); color: var(--text-faint); }

#contact-location{ font-size: var(--fs-body-lg); color: var(--text); }
.contact-status{ display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: var(--fs-body); color: var(--text-muted); }
.status-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 4px color-mix(in srgb, var(--turquoise) 22%, transparent); }

.contact-form{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px; display: flex; flex-direction: column; gap: 14px;
}
.contact-form label{ font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-meta); color: var(--text-muted); }
.contact-form input, .contact-form textarea{
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: var(--fs-body);
  transition: border-color 0.25s var(--ease);
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--turquoise); outline: none; }
.contact-form .btn{ margin-top: 8px; }
.form-note{ font-size: var(--fs-label); color: var(--text-faint); margin: 4px 0 0; }
.form-status{
  font-size: var(--fs-label); color: var(--turquoise-light); margin: 0; min-height: 1em;
}
.form-status:empty{ display: none; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{ padding: 48px 0; border-top: 1px solid var(--border); background: var(--bg-alt); }
.footer-inner{ display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.footer-tagline{ font-family: var(--font-display); color: var(--text-muted); margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.footer-rights{ font-size: var(--fs-label); color: var(--text-faint); margin: 0; }

/* =========================================================================
   Arabic long-form reading
   -------------------------------------------------------------------------
   Noto Sans Arabic on running text only. Everything selected here is a
   paragraph or a description the visitor actually reads through; headings,
   the philosophy quote, the profile line, the footer tagline and every
   eyebrow/label keep the display face, which carries the site's Arabic
   identity and would lose it under a neutral sans.

   Scoped to html[lang="ar"], so the other eight languages never match these
   rules and never request the font files.
   ========================================================================= */
html[lang="ar"] .hero-desc,
html[lang="ar"] .section-desc,
html[lang="ar"] .about-body p,
html[lang="ar"] .card p,
html[lang="ar"] .timeline-summary,
html[lang="ar"] .timeline-list li,
html[lang="ar"] .timeline-achievements li,
html[lang="ar"] .innovation-desc,
html[lang="ar"] .project-desc,
html[lang="ar"] .project-features li,
html[lang="ar"] .education-item .education-desc,
html[lang="ar"] .cert-desc,
html[lang="ar"] .contact-desc{
  font-family: var(--font-reading);
  font-size: var(--fs-reading);
  line-height: var(--lh-reading);
  letter-spacing: 0;
}

@media (max-width: 640px){
  html[lang="ar"]{ --fs-reading: 1.0625rem; }  /* 17px */
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px){
  /* .scroll-hint is position:absolute (bottom: 28px), so nothing in the flow
     reserves room for it. On desktop the hero is taller than its content and
     the slack hides that; stacked on a phone the content fills and overruns
     100svh, leaving only .hero-inner's 60px bottom padding as clearance while
     the hint needs 28px + its own ~48px = 76px — so the CTA sat on top of it.
     Reserve that 76px plus a 28px gap here; the hint keeps its position and
     appearance, it simply stops being overlapped. */
  .hero-inner{ grid-template-columns: 1fr; text-align: center; gap: 40px; padding-bottom: 104px; }
  .hero-content{ order: 2; }
  .hero-portrait{ order: 1; }
  .hero-actions{ justify-content: center; }
  .hero-desc{ margin-inline: auto; }
  .about-grid, .innovation-grid, .contact-grid{ grid-template-columns: 1fr; gap: 32px; }
  .main-nav{ display: none; }
  .nav-toggle{ display: flex; }
}

@media (max-width: 980px) and (min-width: 1px){
  /* .site-header carries backdrop-filter, which makes IT the containing
     block for its position:fixed descendants instead of the viewport. With
     `inset: var(--header-h) 0 0 0` the panel was measured against the 76px
     header, so its height collapsed to zero: the background covered nothing
     and the links spilled out over the page.

     Anchoring to top/left/right with an explicit height is correct either
     way — the header's top-left corner and width match the viewport's, so
     this resolves identically if backdrop-filter is ever absent. */
  .main-nav{
    position: fixed; top: var(--header-h); left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--bg);
    display: flex; padding: 24px 0; transform: translateY(-12px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease);
  }
  .main-nav.open{ opacity: 1; visibility: visible; transform: translateY(0); display: flex; }
  .main-nav ul{ flex-direction: column; align-items: center; gap: 22px; width: 100%; }
  .main-nav a{ font-size: var(--fs-body-lg); }
}

@media (max-width: 640px){
  /* The QR must not dominate a phone screen — smaller and centred, with the
     hint under it. Tapping opens the full-size image for scanning. */
  .contact-wechat{ align-items: center; text-align: center; }
  /* Same 4px as desktop — the quiet zone rides in the image and scales with
     it, so the plate does not need a bigger margin here. */
  .wechat-qr{ align-self: center; padding: 4px; }
  .wechat-qr img{ width: 104px; height: auto; }

  .container{ padding: 0 20px; }
  .header-inner{ padding: 0 20px; }
  .section{ padding: 80px 0; }
  .project-card{ padding: 36px 22px; }
  .education-item{ grid-template-columns: 70px 1fr; }
  .innovation-areas{ grid-template-columns: 1fr; }
}

/* =========================================================================
   Print — an academic CV on paper
   -------------------------------------------------------------------------
   Screen chrome (nav, theme/language controls, the contact form, decorative
   watermarks and animations) carries no meaning on paper, so it is dropped.
   Everything that is CV content is kept, forced to a light palette, and
   protected from splitting across pages. Screen rules are untouched.
   ========================================================================= */
@media print{
  /* Force the light palette regardless of the theme on screen */
  :root, [data-theme="dark"], [data-theme="light"]{
    --bg: #FFFFFF; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF;
    --text: #000000; --text-muted: #222222; --text-faint: #444444;
    --gold: #7A5A10; --gold-light: #7A5A10;
    --turquoise: #10605A; --turquoise-light: #10605A;
    --border: #BBBBBB; --border-strong: #888888;
    --shadow: none;
  }

  @page{ margin: 16mm 14mm; }

  html, body{ background: #FFFFFF !important; color: #000 !important; }

  /* Screen-only chrome */
  .site-header, .nav-toggle, .main-nav, .lang-switcher, .theme-toggle,
  .skip-link, .scroll-hint, .hero-actions, .contact-form,
  #loading-screen, .hero-bg, .project-glow, .contact-status{
    display: none !important;
  }

  /* No motion or reveal-on-scroll on paper */
  *, *::before, *::after{
    animation: none !important; transition: none !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  .reveal{ opacity: 1 !important; transform: none !important; }

  main, .section{ padding: 0 !important; }
  .section{ padding-top: 10mm !important; }
  .container{ max-width: 100%; padding: 0; }

  /* Single column on paper */
  .hero-inner, .about-grid, .innovation-grid, .contact-grid{
    display: block !important;
  }
  .highlights-grid, .achievements-grid, .methodology-grid,
  .skills-grid, .certifications-list, .innovation-areas{
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6mm !important;
  }

  .portrait-frame{ width: 42mm !important; }
  .hero-portrait{ padding-top: 0 !important; }

  /* Keep a card, a role or a qualification from breaking across pages */
  .card, .timeline-item, .education-item, .cert-item,
  .highlight-item, .project-card, .philosophy-quote{
    break-inside: avoid; page-break-inside: avoid;
  }
  .section-head h2{ break-after: avoid; page-break-after: avoid; }

  /* Spell out link targets so a printed page stays useful */
  .contact-detail a[href^="http"]::after,
  .profile-links a[href^="http"]::after{
    content: " (" attr(href) ")"; font-size: 9pt; color: #444;
  }
}