/* =============================================================
   THEME · lumen  —  شيماء · Shaima
   -------------------------------------------------------------
   Loaded AFTER the engine's style.css and drive.css, so anything
   here wins. Two jobs:

     PART 1  redefine the design tokens → colour, type, radius
     PART 2  a handful of structural rules → the layout's character

   The character: warm paper in deep rose, hairline rules instead of
   shadows, an arched portrait, serif headlines, and section titles
   that sit at the start of the line instead of the middle. Nothing
   here is a copy of another person's site.

   Palette history, because it moved twice and the reason matters:
   blue → dark blue at her request (2026-08-22), then to PINK on the
   same day, once Abu Mohammed's brand manual arrived and made
   Executive Navy #0B2447 his mandated primary. Two navy sites would
   have undone the whole point of the exercise, and his colour is
   contractual where hers is a preference — so hers moved.
   The rose-gold trim
   (--gold) is deliberately kept as the warm counterpoint — it is
   what stops two blues from muddying each other on the bars, the
   "current" chips, and the gradient ends. Change it to a lighter
   steel blue (#7fa8cf) if she wants it fully monochrome.

   Every rule is prefixed html[data-variant="lumen"] so this file
   can also be dropped next to another theme without a fight.
   ============================================================= */

/* =============================================================
   PART 1 · TOKENS
   ============================================================= */
:root {
  /* ---- brand ramp: deep rose ----
     The token names stay --navy-* because ~40 rules across the shared
     engine reference them; only the values are the identity. */
  --navy-900: #40102A;
  --navy-800: #4E1533;
  --navy-700: #601B41;
  --navy-600: #74234F;
  --steel:    #A03A63;   /* accent base */
  --gold:     #B5836B;   /* rose-gold trim — the warm counterpoint */
  --gold-soft:#DCB49C;

  /* ---- light surfaces: warm paper, not white ---- */
  --bg:        #FDF8FA;
  --bg-alt:    #F6ECF0;
  --surface:   #FFFFFF;
  --surface-2: #FAF2F5;
  --border:    #EBDCE3;
  --text:      #2B1A21;
  --text-soft: #5A4049;
  --muted:     #8A6F79;

  /* Flat, quiet elevation: this look leans on rules, not shadows. */
  --shadow:    0 1px 0 rgba(64,16,42,.07);
  --shadow-lg: 0 12px 34px rgba(64,16,42,.14);

  --header-bg: var(--navy-700);
  --accent:    #A03A63;
  --ring:      rgba(160,58,99,.34);

  /* ---- geometry: crisp, editorial ---- */
  --radius:    4px;
  --radius-sm: 3px;
  --maxw:      1120px;
  --nav-h:     72px;

  /* ---- type: Cairo/Amiri (ar) · Inter/Playfair (en) ---- */
  --ff-ar: "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif;
  --ff-en: "Inter", "Segoe UI", system-ui, sans-serif;
  --ff-display-ar: "Amiri", "Cairo", Georgia, serif;
  --ff-display-en: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-num: "Playfair Display", Georgia, serif;

  --eyebrow-tracking: .2em;
  --eyebrow-case: uppercase;
  --h-tracking: 0;

  /* ---- theme seams (see the engine's style.css) ---- */
  --brand-grad: var(--navy-700);          /* flat, not a gradient */
  --cta-grad:   var(--bg-alt);            /* the CTA band is light here */
  --footer-bg:  #33091F;
  /* …and because that band is light, the text on it must not be white.
     Leaving the engine's default white here is what made the two
     secondary buttons on the contact page invisible. */
  --cta-fg:      #2B1A21;
  --cta-fg-soft: #5A4049;
  --cta-fg-line: rgba(43,26,33,.28);
}

html[data-theme="dark"] {
  --cta-fg:      #F7ECF0;
  --cta-fg-soft: #DAC4CC;
  --cta-fg-line: rgba(247,236,240,.3);
  --bg:        #160F13;
  --bg-alt:    #1E141A;
  --surface:   #1E141A;
  --surface-2: #271A21;
  --border:    #3A2831;
  --text:      #F7ECF0;
  --text-soft: #DAC4CC;
  --muted:     #A18A93;
  --header-bg: #1E141A;
  --accent:    #E491B1;
  --ring:      rgba(228,145,177,.4);
  --gold:      #D3A98F;
  --shadow:    0 1px 0 rgba(0,0,0,.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  --brand-grad: #74234F;
  --cta-grad:   #1E141A;
  --footer-bg:  #100A0D;
}

/* Amiri and Playfair top out at 700 — asking for 800 makes the
   browser fake a bolder weight, which looks smeared. */
html[data-variant="lumen"] h1,
html[data-variant="lumen"] h2,
html[data-variant="lumen"] h3,
html[data-variant="lumen"] .section-head h2,
html[data-variant="lumen"] .stat .num,
html[data-variant="lumen"] .hero h1 { font-weight: 700; }

/* =============================================================
   PART 2 · STRUCTURE
   ============================================================= */

/* ---------- Nav: opaque, hairline, no pill hovers ---------- */
html[data-variant="lumen"] .nav {
  background: var(--bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}
html[data-variant="lumen"] .nav.scrolled { box-shadow: 0 1px 0 var(--border); }
html[data-variant="lumen"] .brand .mono {
  border-radius: 2px;
  box-shadow: none;
  font-size: 1rem;
  letter-spacing: .04em;
}
html[data-variant="lumen"] .nav-links a { border-radius: 0; padding-inline: 12px; }
html[data-variant="lumen"] .nav-links a:hover { background: none; color: var(--accent); }
html[data-variant="lumen"] .nav-links a.active::after {
  height: 2px; border-radius: 0; inset-inline: 12px;
}
html[data-variant="lumen"] .icon-btn { border-radius: 2px; }
html[data-variant="lumen"] .icon-btn:hover { transform: none; }

/* ---------- Hero: a wash instead of two blobs ---------- */
html[data-variant="lumen"] .hero { padding: 76px 0 52px; }
html[data-variant="lumen"] .hero::before {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 42%),
    linear-gradient(200deg, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 38%);
}
/* Desktop only: below 960px the engine collapses the hero to one
   column, and a bare override here would fight that. */
@media (min-width: 961px) {
  html[data-variant="lumen"] .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 56px; }
}
html[data-variant="lumen"] .hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.7rem);
  line-height: 1.16;
  letter-spacing: 0;
}
html[data-variant="lumen"] .hero .role {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
}
html[data-variant="lumen"] .hero .lead {
  font-size: 1.08rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-inline-start: 16px;
  margin-top: 22px;
}
html[data-variant="lumen"] .hero-badge {
  border-radius: 2px;
  box-shadow: none;
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  letter-spacing: .04em;
}

/* ---------- Buttons: flat, square-ish ---------- */
html[data-variant="lumen"] .btn { border-radius: 2px; padding: 13px 26px; }
html[data-variant="lumen"] .btn-primary { box-shadow: none; }
html[data-variant="lumen"] .btn-primary:hover {
  transform: none;
  background: var(--navy-600);
  box-shadow: none;
}
html[data-variant="lumen"] .btn-ghost:hover { transform: none; background: var(--surface-2); }

/* ---------- Portrait: an arch, not a circle ---------- */
html[data-variant="lumen"] .portrait-ring {
  width: min(320px, 74vw);
  aspect-ratio: 3 / 4;
  border-radius: 180px 180px 4px 4px;
  background: none;
  padding: 0;
  box-shadow: none;
  border: 1px solid var(--border);
}
/* The offset block behind it replaces the engine's spinning dashes. */
html[data-variant="lumen"] .portrait-ring::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: none;
  border-radius: 180px 180px 4px 4px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  animation: none;
  z-index: -1;
}
html[data-variant="lumen"] .portrait-inner {
  border-radius: 179px 179px 3px 3px;
}
/* The chips are positioned against .hero-portrait, which is wider than
   the arch — so without this they float over the photo instead of
   beside it. Pinning the column to the arch's width fixes both. */
html[data-variant="lumen"] .hero-portrait { width: min(320px, 74vw); }
html[data-variant="lumen"] .float-chip {
  border-radius: 2px;
  box-shadow: var(--shadow-lg);
  animation: none;
}
html[data-variant="lumen"] .float-chip.c1 { top: 8%; inset-inline-start: -22%; }
html[data-variant="lumen"] .float-chip.c2 { bottom: 6%; inset-inline-end: -18%; }
html[data-variant="lumen"] .float-chip .fi { border-radius: 2px; }

/* ---------- Section heads: start-aligned, one hairline ---------- */
html[data-variant="lumen"] .section-head { text-align: start; }
html[data-variant="lumen"] .section-head .eyebrow { font-size: .72rem; }
html[data-variant="lumen"] .section-head .rule {
  margin-inline: 0;
  margin-top: 18px;
  width: 100%;
  height: 1px;
  border-radius: 0;
  background: var(--border);
}
html[data-variant="lumen"] .section-head p { margin-inline: 0; max-width: 60ch; }
html[data-variant="lumen"] .section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* ---------- Cards: paper with a rule, no lift ---------- */
html[data-variant="lumen"] .card {
  box-shadow: none;
  border-color: var(--border);
}
html[data-variant="lumen"] .card:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
html[data-variant="lumen"] .card-title { font-size: 1.15rem; letter-spacing: 0; }
html[data-variant="lumen"] .card-title .ci {
  border-radius: 2px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
html[data-variant="lumen"] .fact .fi { border-radius: 2px; }

/* ---------- Stats: one band, divided by rules ---------- */
html[data-variant="lumen"] .stats { background: var(--bg-alt); }
html[data-variant="lumen"] .stats-grid { gap: 0; }
html[data-variant="lumen"] .stat { padding: 34px 18px; }
@media (min-width: 961px) {
  html[data-variant="lumen"] .stat { border-inline-start: 1px solid var(--border); }
  html[data-variant="lumen"] .stat:first-child { border-inline-start: none; }
}
html[data-variant="lumen"] .stat .num { font-weight: 700; color: var(--navy-700); }
html[data-variant="lumen"][data-theme="dark"] .stat .num { color: var(--accent); }
html[data-variant="lumen"] .stat .lbl { font-weight: 500; font-size: .9rem; }

/* ---------- Timeline: a hairline with small square nodes ---------- */
html[data-variant="lumen"] .timeline::before { background: var(--border); }
html[data-variant="lumen"] .tl-dot {
  border-radius: 1px;
  width: 14px; height: 14px;
  top: 10px;
  inset-inline-start: -31px;
  border-width: 2px;
}
html[data-variant="lumen"] .tl-dot svg { display: none; }
html[data-variant="lumen"] .tl-period { border-radius: 2px; font-weight: 600; }
html[data-variant="lumen"] .tl-org { color: var(--accent); }
html[data-variant="lumen"] .tl-points li::before { border-radius: 0; transform: none; width: 8px; height: 1px; top: 14px; }
html[data-variant="lumen"] .tl-note { border-inline-start: 2px solid var(--accent); border-radius: 0; }

/* ---------- Chips, bars, numbered badges ---------- */
html[data-variant="lumen"] .chip { border-radius: 2px; }
html[data-variant="lumen"] .chip:hover { transform: none; }
html[data-variant="lumen"] .chip .ci { border-radius: 2px; }
html[data-variant="lumen"] .bar { border-radius: 0; height: 6px; }
html[data-variant="lumen"] .bar > i {
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
html[data-variant="lumen"] .pub .pn { border-radius: 2px; font-weight: 700; }

/* ---------- Community & contact: outlined, not filled ---------- */
html[data-variant="lumen"] .comm-card { text-align: start; }
html[data-variant="lumen"] .comm-card .ci {
  margin: 0 0 16px;
  border-radius: 2px;
  width: 52px; height: 52px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
html[data-variant="lumen"] .comm-card .ci svg { width: 24px; height: 24px; }
html[data-variant="lumen"] .comm-card .org { color: var(--accent); }
html[data-variant="lumen"] .contact-card .ci {
  border-radius: 2px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

/* ---------- CTA band: light, framed — not a dark slab ---------- */
html[data-variant="lumen"] .cta-band {
  border-radius: 0;
  border-block: 1px solid var(--border);
  color: var(--text);
}
html[data-variant="lumen"] .cta-band::before { display: none; }
html[data-variant="lumen"] .cta-band h3 { color: var(--navy-700); }
html[data-variant="lumen"][data-theme="dark"] .cta-band h3 { color: var(--text); }
html[data-variant="lumen"] .cta-band p { color: var(--text-soft); }
html[data-variant="lumen"] .cta-band .btn-primary {
  background: var(--navy-700);
  color: #fff;
}
html[data-variant="lumen"] .cta-band .btn-primary:hover { background: var(--navy-600); }

/* ---------- Research proposal & journey ---------- */
html[data-variant="lumen"] .prop-n,
html[data-variant="lumen"] .jr-n {
  border-radius: 2px;
  font-family: var(--ff-num);
}
html[data-variant="lumen"] .jr-card { border-inline-start: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- Documents, media, footer ---------- */
html[data-variant="lumen"] .dl-card,
html[data-variant="lumen"] .blog-card,
html[data-variant="lumen"] .gal-item { border-radius: var(--radius); }
html[data-variant="lumen"] .dl-btn { border-radius: 2px; box-shadow: none; }
html[data-variant="lumen"] .footer-links a:hover { color: var(--gold-soft); }
/* one step lighter than the footer slab, or the mark vanishes into it */
html[data-variant="lumen"] .footer .brand .mono { background: var(--navy-600); }
html[data-variant="lumen"] .to-top { border-radius: 2px; }

/* ---------- Reduced motion is already respected by the engine;
   this look barely animates anyway. ---------- */

/* ---------- Small screens: let the engine's centred hero stand, and
   keep the start-aligned section heads (they read fine at any width). ---------- */
@media (max-width: 960px) {
  html[data-variant="lumen"] .hero .lead {
    border-inline-start: none;
    padding-inline-start: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    padding-top: 16px;
  }
  html[data-variant="lumen"] .portrait-ring::after { inset: 14px -14px -14px 14px; }
}