/* ============================================================
   IGNIZ AI — "Editorial Atelier" design system
   Luxury-editorial: warm ivory canvas, ink type, forged gold.
   Self-hosted Fraunces (display) + Inter (body/UI).
============================================================ */

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/fraunces-normal-400.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/fraunces-normal-500.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/fraunces-normal-600.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/fraunces-italic-400.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:500; font-display:swap;
  src:url('fonts/fraunces-italic-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-normal-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-normal-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-normal-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-normal-700.woff2') format('woff2'); }

/* ---------- Arabic fonts (self-hosted, OFL) — used only for Arabic characters ---------- */
@font-face { font-family:'Noto Naskh Arabic'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/noto-naskh-arabic-400.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family:'Noto Naskh Arabic'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/noto-naskh-arabic-500.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family:'Noto Naskh Arabic'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/noto-naskh-arabic-600.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/ibm-plex-sans-arabic-400.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/ibm-plex-sans-arabic-500.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/ibm-plex-sans-arabic-600.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }

/* ---------- Tokens ---------- */
:root {
  /* Editorial palette */
  --bg:        #F7F3EC;   /* warm ivory canvas */
  --surface:   #FFFFFF;   /* raised */
  --bg-alt:    #EFE8DC;   /* sand band */
  --forest:    #17362A;   /* deep pine green — dark sections / footer */
  --forest-2:  #0F251C;   /* deeper green for gradients */
  --espresso:  var(--forest);   /* back-compat alias (was brown) */
  --ink:       #1A1712;   /* headings */
  --ink-2:     #4A443B;   /* body */
  --ink-3:     #8A8172;   /* muted */
  --line:      #DED4C4;   /* hairline */
  --gold:      #B08528;   /* forged gold accent */
  --gold-2:    #C99A3A;   /* bright gold (hover / gradient top) */
  --gold-soft: rgba(176,133,40,0.12);
  --ok:        #4F7A52;
  --err:       #B04A3A;

  --grad-gold: linear-gradient(105deg, #B08528 0%, #C99A3A 55%, #E4C063 100%);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart:cubic-bezier(0.25, 1, 0.5, 1);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --nav-h: 92px;
  --maxw: 1240px;
  --gutter: 40px;
  --section-y: clamp(80px, 11vw, 168px);

  /* Fluid type scale */
  --fs-display: clamp(3rem, 7vw, 6rem);
  --fs-h1:      clamp(2.6rem, 6vw, 5rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3:      clamp(1.35rem, 2vw, 1.85rem);
  --fs-lead:    clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-eyebrow: 0.78rem;

  /* ---- Legacy aliases so not-yet-migrated pages stay coherent ---- */
  --clr-bg: var(--bg); --clr-surface: var(--bg-alt); --clr-surface-2: var(--surface);
  --clr-border: var(--line); --clr-border-glow: var(--gold-soft);
  --clr-blue: var(--gold); --clr-blue-dark: #8f6a1e; --clr-blue-bright: var(--gold-2);
  --clr-purple: var(--gold); --clr-gold: var(--gold); --clr-gold-light: var(--gold-2);
  --clr-text-1: var(--ink); --clr-text-2: var(--ink-2); --clr-text-3: var(--ink-3);
  --primary: var(--gold); --primary-dark:#8f6a1e; --primary-light: var(--gold-2);
  --accent: var(--gold); --accent-dark:#8f6a1e;
  --font-head: var(--font-display);
  --ease-out-expo: var(--ease); --ease-out-quart: var(--ease-quart);
  --radius-xl: 40px; --h1-size: var(--fs-h1); --h2-size: var(--fs-h2); --h3-size: var(--fs-h3);
  --grad-brand: var(--grad-gold);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--ink-2);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,canvas { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }

h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); font-weight:500;
  line-height:1.08; letter-spacing:-0.015em; }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg-alt); }
::-webkit-scrollbar-thumb { background:#cbb98f; border-radius:6px; border:2px solid var(--bg-alt); }

:where(a,button,input,textarea,select):focus-visible {
  outline:2px solid var(--gold); outline-offset:3px; border-radius:3px;
}

/* ---------- Editorial primitives ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before { content:''; width:26px; height:1px; background:var(--grad-gold); }
.eyebrow--center::after { content:''; width:26px; height:1px; background:var(--grad-gold); }

/* Live hero ribbon canvas — fills any hero, sits behind content */
.aura { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }

.display-serif { font-family:var(--font-display); }
.ital { font-style:italic; font-weight:500; }
.gold-text {
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body);
  font-size:0.94rem; font-weight:600; letter-spacing:0.01em; padding:15px 30px;
  border-radius:100px; position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s, background .3s; }
.btn--gold { background:var(--espresso); color:#F7F3EC; }
.btn--gold::before { content:''; position:absolute; inset:0; background:var(--grad-gold);
  transform:translateY(101%); transition:transform .45s var(--ease); z-index:0; }
.btn--gold:hover::before { transform:translateY(0); }
.btn--gold span,.btn--gold svg { position:relative; z-index:1; }
.btn--gold:hover { color:var(--espresso); transform:translateY(-2px); box-shadow:0 16px 34px rgba(176,133,40,0.28); }
.btn--ghost { color:var(--ink); padding-left:0; padding-right:0; border-radius:0; }
.btn--ghost .btn__line { position:relative; }
.btn--ghost .btn__line::after { content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(1); transform-origin:right; transition:transform .4s var(--ease); }
.btn--ghost:hover .btn__line::after { transform:scaleX(0); transform-origin:left; }
.btn--ghost:hover { color:var(--gold); }

/* Animated gold underline link */
.link-gold { position:relative; color:var(--ink); }
.link-gold::after { content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.link-gold:hover::after { transform:scaleX(1); }

/* ---------- Scroll-reveal motion ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}.reveal-d5{transition-delay:.40s}.reveal-d6{transition-delay:.48s}

/* Line clip-reveal (hero) */
.line-mask { display:block; overflow:hidden; }
.line-mask > span { display:block; transform:translateY(110%); }
.is-lit .line-mask > span { transform:translateY(0); transition:transform 1s var(--ease); }
.is-lit .line-mask:nth-child(2) > span { transition-delay:.10s; }
.is-lit .line-mask:nth-child(3) > span { transition-delay:.20s; }
.is-lit .line-mask:nth-child(4) > span { transition-delay:.30s; }

/* Gold rule that draws itself */
.gold-rule { height:1px; background:var(--grad-gold); transform:scaleX(0); transform-origin:left; }
.is-lit .gold-rule, .reveal.is-in .gold-rule { transform:scaleX(1); transition:transform 1.1s var(--ease) .35s; }

@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal,.line-mask>span,.gold-rule { opacity:1 !important; transform:none !important; }
  .sr-word { opacity:1 !important; transform:none !important; }
  .tw-ch { opacity:1 !important; } .tw-cursor { display:none !important; }
}

/* ============================================================
   SHARED INNER-PAGE SHELL (nav / hero / sections / footer)
   So every page matches index.html without redefining it.
============================================================ */
/* Nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; transition:background .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav.is-solid { background:rgba(247,243,236,0.86); backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%); box-shadow:0 1px 0 var(--line); height:72px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand__mark { width:auto; height:36px; flex-shrink:0; display:block; }
.brand__name { font-family:var(--font-display); font-size:1.4rem; font-weight:500; color:var(--ink); letter-spacing:-0.01em; }
.brand__name .ital { color:var(--gold); }
.nav__links { display:flex; align-items:center; gap:34px; }
.nav__links a { font-size:0.92rem; font-weight:500; color:var(--ink-2); transition:color .3s; }
.nav__links a:hover, .nav__links a.active { color:var(--ink); }
.nav__right { display:flex; align-items:center; gap:22px; }
.lang-btn { display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; font-weight:600; letter-spacing:0.06em; color:var(--ink-2); }
.lang-btn svg { opacity:.7; }
.nav__cta { font-size:0.9rem; font-weight:600; padding:11px 22px; }
.hamburger { display:none; flex-direction:column; gap:5px; width:26px; }
.hamburger span { height:1.5px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease), opacity .3s; }
.hamburger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu { position:fixed; inset:0; z-index:850; background:var(--bg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-menu a { font-family:var(--font-display); font-size:2rem; color:var(--ink); }
@media (max-width:900px){ .nav__links,.nav__right .lang-btn,.nav__cta{ display:none; } .hamburger{ display:flex; } }

/* Page hero (inner pages) */
.page-hero { position:relative; overflow:hidden; padding:calc(var(--nav-h) + 80px) 0 96px; }
.page-hero .hero__grain { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.page-hero__inner { position:relative; z-index:2; max-width:920px; }
.page-hero__crumb { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px;
  opacity:0; transform:translateY(12px); transition:all .8s var(--ease) .1s; }
.is-lit .page-hero__crumb { opacity:1; transform:none; }
.page-hero__crumb a:hover { color:var(--gold); }
.page-hero__title { font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:1.04;
  letter-spacing:-0.02em; color:var(--ink); }
.page-hero__title .ital { font-weight:500; }
.page-hero__rule { width:110px; height:1px; background:var(--grad-gold); margin:34px 0 30px; transform:scaleX(0); transform-origin:left; }
.is-lit .page-hero__rule { transform:scaleX(1); transition:transform 1.1s var(--ease) .5s; }
.page-hero__lead { max-width:60ch; font-size:15px; color:var(--ink-2); line-height:1.6;
  opacity:0; transform:translateY(14px); transition:all .9s var(--ease) .55s; }
.is-lit .page-hero__lead { opacity:1; transform:none; }

/* Section shell */
.section { padding:var(--section-y) 0; position:relative; }
.section--alt { background:var(--bg-alt); }
.section--dark { background:var(--forest); color:#E9E1D2; }
.section--dark h1,.section--dark h2,.section--dark h3 { color:#F7F3EC; }
.sec-head { max-width:760px; margin-bottom:64px; }
.sec-head h2 { font-size:var(--fs-h2); margin:20px 0 0; }
.sec-head .lead { margin-top:20px; font-size:var(--fs-lead); color:var(--ink-2); max-width:58ch; }
.section--dark .sec-head .lead { color:#c9bfa8; }

/* Footer */
.footer { background:var(--forest); color:#b8ae98; padding:90px 0 40px; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px; }
.footer h4 { font-family:var(--font-body); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#8a8172; margin-bottom:22px; font-weight:600; }
.footer a { display:block; color:#cabfa8; margin-bottom:12px; font-size:.95rem; transition:color .3s; }
.footer a:hover { color:var(--gold); }
.footer__brand .brand__name { color:#F7F3EC; }
.footer__brand p { margin-top:18px; max-width:34ch; color:#8a8172; font-size:.95rem; line-height:1.7; }
.footer__bottom { margin-top:64px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.09);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#6f6754; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:40px 24px; } }

/* ============================================================
   ARTICLE (Journal post) — editorial long-form
============================================================ */
.article-hero { position:relative; overflow:hidden; background:var(--forest); color:#E9E1D2;
  padding:calc(var(--nav-h) + 80px) 0 84px; }
.article-hero .hero__grain { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.article-hero__inner { position:relative; z-index:2; max-width:820px; }
.article-hero__crumb { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#a99f89; margin-bottom:22px;
  opacity:0; transform:translateY(12px); transition:all .8s var(--ease) .1s; }
.is-lit .article-hero__crumb { opacity:1; transform:none; }
.article-hero__crumb a { color:var(--gold); }
.article-hero__meta { display:flex; align-items:center; gap:14px; margin-bottom:22px; font-size:.82rem; color:#a99f89;
  opacity:0; transform:translateY(12px); transition:all .8s var(--ease) .2s; }
.is-lit .article-hero__meta { opacity:1; transform:none; }
.article-hero__tag { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); background:var(--grad-gold);
  padding:5px 12px; border-radius:100px; font-weight:700; }
.article-hero__title { font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2);
  line-height:1.1; letter-spacing:-0.02em; color:#F7F3EC;
  opacity:0; transform:translateY(16px); transition:all .9s var(--ease) .3s; }
.is-lit .article-hero__title { opacity:1; transform:none; }
.article-hero__intro { margin-top:22px; font-size:15px; color:#cabfa8; line-height:1.7; max-width:64ch;
  opacity:0; transform:translateY(16px); transition:all .9s var(--ease) .45s; }
.is-lit .article-hero__intro { opacity:1; transform:none; }

.article-body { padding:var(--section-y) 0; }
.prose { max-width:74ch; margin:0 auto; color:var(--ink-2); font-size:1.12rem; line-height:1.8; }
.prose > * { margin-bottom:1.3em; }
.prose h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--ink);
  line-height:1.2; margin-top:1.8em; margin-bottom:.5em; letter-spacing:-0.01em; }
.prose h3 { font-family:var(--font-display); font-weight:500; font-size:1.35rem; color:var(--ink); margin-top:1.4em; margin-bottom:.4em; }
.prose h2 .ital, .prose h3 .ital { color:var(--gold); font-style:italic; }
.prose strong { color:var(--ink); font-weight:600; }
.prose a { color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose ul, .prose ol { padding-left:1.3em; }
.prose li { margin-bottom:.55em; }
.prose ul li::marker { color:var(--gold); }
.prose blockquote { border-left:2px solid var(--gold); padding:6px 0 6px 26px; margin:1.6em 0;
  font-family:var(--font-display); font-style:italic; font-size:1.35rem; color:var(--ink); line-height:1.4; }
.prose img { border-radius:var(--radius-md); border:1px solid var(--line); }
.prose .cta-inline { display:flex; gap:16px; align-items:center; flex-wrap:wrap; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 30px; margin:2em 0; }
.prose .cta-inline p { margin:0; color:var(--ink); font-family:var(--font-display); font-size:1.2rem; }
.article-back { display:inline-flex; margin-top:60px; }
/* legacy prose bits carried from old articles */
.prose .prose { max-width:none; margin:0; font-size:inherit; }
.prose .back-to-blog { display:none; }
.prose .highlight { background:var(--bg-alt); border-left:2px solid var(--gold); padding:18px 24px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--ink); font-size:1rem; }
.prose .highlight strong { color:var(--gold); }

/* ============================================================
   RTL / ARABIC
============================================================ */
html[dir="rtl"] {
  /* Latin (brand, numbers) keeps Fraunces/Inter; Arabic falls through to the Arabic faces */
  --font-display: 'Fraunces','Noto Naskh Arabic','Geeza Pro','Tahoma',serif;
  --font-body: 'Inter','IBM Plex Sans Arabic','Segoe UI','Tahoma','Geeza Pro',sans-serif;
}
html[dir="rtl"] body { direction:rtl; }
html[dir="rtl"] .eyebrow::before,
html[dir="rtl"] .gold-rule,
html[dir="rtl"] .hero__rule,
html[dir="rtl"] .page-hero__rule { transform-origin:right; }
html[dir="rtl"] .is-lit .hero__rule,
html[dir="rtl"] .is-lit .page-hero__rule,
html[dir="rtl"] .reveal.is-in .gold-rule { transform-origin:right; }
html[dir="rtl"] .btn--gold svg,
html[dir="rtl"] .hero__title .ital ~ svg { transform:scaleX(-1); }
/* (flex rows already mirror in RTL — no row-reverse needed) */
html[dir="rtl"] .manifesto__aside,
html[dir="rtl"] .prose { text-align:right; }
html[dir="rtl"] .prose ul, html[dir="rtl"] .prose ol { padding-left:0; padding-right:1.3em; }
html[dir="rtl"] .prose blockquote { border-left:none; border-right:2px solid var(--gold); padding:6px 26px 6px 0; }

@media (max-width:768px){ :root{ --gutter:22px; --nav-h:74px; } }

/* Typewriter-on-scroll ([data-typewriter], driven by editorial.js) */
.tw-armed .tw-ch { opacity:0; transition:opacity .01s linear; }
.tw-armed.tw-go .tw-ch { opacity:1; }
.tw-cursor { display:inline-block; width:.07em; height:.82em; background:var(--gold);
  margin-left:3px; vertical-align:-0.05em; opacity:0; }
.tw-armed .tw-cursor { opacity:1; animation:tw-blink .9s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity:0; } }

/* Nav over a dark hero (blog articles): light text until the nav turns solid on scroll
   or the mobile menu opens */
.nav--on-dark:not(.is-solid):not(:has(.hamburger.open)) .brand__name { color:#F7F3EC; }
.nav--on-dark:not(.is-solid):not(:has(.hamburger.open)) .brand__name .ital { color:var(--gold-2); }
.nav--on-dark:not(.is-solid) .nav__links a { color:rgba(247,243,236,0.72); }
.nav--on-dark:not(.is-solid) .nav__links a:hover,
.nav--on-dark:not(.is-solid) .nav__links a.active { color:#F7F3EC; }
.nav--on-dark:not(.is-solid) .lang-btn { color:rgba(247,243,236,0.85); }
.nav--on-dark:not(.is-solid) .nav__cta { background:var(--grad-gold); color:var(--forest-2); border-color:transparent; }
.nav--on-dark:not(.is-solid) .hamburger:not(.open) span { background:#F7F3EC; }

/* ---------- Language switch in the mobile menu ---------- */
.mobile-menu__lang { margin-top:14px; padding:10px 22px; border:1px solid var(--line); border-radius:100px;
  font-size:.95rem; color:var(--ink); background:transparent; cursor:pointer; }

/* ---------- Arabic typography ---------- */
html[lang="ar"] body * { letter-spacing:0 !important; }
html[lang="ar"] .ital, html[lang="ar"] em, html[lang="ar"] i { font-style:normal; }
html[lang="ar"] body { line-height:1.85; }
html[lang="ar"] :is(h1,h2,h3,h4,.hero__title,.page-hero__title,.article-hero__title,.svc-row__title,
  .work-card__name,.statement__text,.manifesto__big,.quote__text,.cta-band h2) { line-height:1.45; }
html[lang="ar"] .eyebrow, html[lang="ar"] .eyebrow-sm { text-transform:none; }

/* ---------- WhatsApp floating button (all pages) ---------- */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:950; display:inline-flex; align-items:center; gap:10px;
  height:58px; padding:0 15px; border-radius:100px; background:#25D366; color:#fff;
  box-shadow:0 14px 34px rgba(18,140,74,0.35), 0 2px 6px rgba(0,0,0,0.12);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.wa-float:hover, .wa-float:focus-visible { transform:translateY(-3px); box-shadow:0 18px 40px rgba(18,140,74,0.45), 0 2px 6px rgba(0,0,0,0.12); }
.wa-float:focus-visible { outline:3px solid var(--gold-2); outline-offset:3px; }
.wa-float svg { flex-shrink:0; }
.wa-float__label { max-width:0; overflow:hidden; white-space:nowrap; font-family:var(--font-body); font-size:.92rem; font-weight:600;
  transition:max-width .45s var(--ease), margin .45s var(--ease); margin-right:-10px; }
.wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { max-width:180px; margin-right:4px; }
html[dir="rtl"] .wa-float__label { margin-right:0; margin-left:-10px; }
html[dir="rtl"] .wa-float:hover .wa-float__label { margin-left:4px; }
.mobile-menu.open ~ .wa-float, body:has(.mobile-menu.open) .wa-float { opacity:0; pointer-events:none; }
/* Phones & tablets: compact round button, clear of the iPhone home bar and notch,
   no hover label (a tap would leave it stuck open), footer gets room so the
   button never covers its last line */
@media (hover:none), (max-width:600px){
  .wa-float { right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom));
    width:52px; height:52px; padding:0; justify-content:center; }
  .wa-float svg { width:26px; height:26px; }
  .wa-float__label { display:none; }
  .wa-float:hover { transform:none; }
  .wa-float:active { transform:scale(.94); }
  body .footer { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media print { .wa-float { display:none; } }

/* ---------- Nav links: forest-green glass tab on hover ---------- */
body .nav__links { gap:6px; }
body .nav__links a { position:relative; display:inline-flex; align-items:center; padding:9px 16px; border-radius:12px;
  border:1px solid transparent; isolation:isolate;
  transition:color .3s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
body .nav__links a:hover, body .nav__links a:focus-visible {
  color:var(--forest);
  background:linear-gradient(180deg, rgba(23,54,42,0.16) 0%, rgba(23,54,42,0.08) 100%);
  border-color:rgba(23,54,42,0.22);
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(23,54,42,0.08), 0 6px 18px rgba(23,54,42,0.12);
  transform:translateY(-1px); outline:none; }
body .nav__links a.active { color:var(--forest); }
/* current page: thin forest-green bar under the link */
body .nav__links a.active::after { content:''; position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  border-radius:2px; background:var(--forest); }
body .nav--on-dark:not(.is-solid) .nav__links a.active::after { background:var(--gold-2); }
/* over a dark hero (blog articles) the glass turns light */
body .nav--on-dark:not(.is-solid) .nav__links a:hover, body .nav--on-dark:not(.is-solid) .nav__links a:focus-visible {
  color:#F7F3EC; background:linear-gradient(180deg, rgba(247,243,236,0.16), rgba(247,243,236,0.06));
  border-color:rgba(247,243,236,0.24); box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 18px rgba(0,0,0,0.18); }
@media (prefers-reduced-motion: reduce){ body .nav__links a:hover { transform:none; } }

/* Mobile menu: 7 links fit below the top bar on any phone height */
body .mobile-menu { justify-content:center; gap:clamp(10px, 2.6vh, 26px);
  padding:calc(var(--nav-h) + 12px) 24px 28px; overflow-y:auto; }
body .mobile-menu a { font-size:clamp(1.45rem, 4.6vh, 2rem); line-height:1.15; }
body .mobile-menu .mobile-menu__lang { margin-top:clamp(4px, 1.4vh, 14px); }


/* ============================================================
   TYPOGRAPHY SYSTEM — Fraunces (headings) + Inter (UI & text)
   One consistent scale for nav, headings, text, buttons and footer.
============================================================ */
/* Headings: regular-weight serif reads more refined at large sizes */
h1, h2 { font-weight:400; letter-spacing:-0.02em; }
h3, h4 { font-weight:500; letter-spacing:-0.01em; }
.hero__title, .page-hero__title, .sec-head h2 { font-weight:400; }
/* Gold italic accent words */
.ital { font-weight:400; }
/* Eyebrows / small labels */
.eyebrow { font-size:0.75rem; letter-spacing:0.2em; font-weight:600; }
/* Navigation */
.nav__links a { font-size:0.92rem; font-weight:500; letter-spacing:0.01em; }
.nav__cta { font-size:0.875rem; font-weight:600; letter-spacing:0.01em; }
.lang-btn { font-size:0.8rem; }
/* Body text & descriptions */
body { font-size:1.0625rem; line-height:1.65; }
.sec-head .lead, .hero__lead, .page-hero__lead { line-height:1.6; }
/* Buttons */
.btn { font-size:0.94rem; font-weight:600; letter-spacing:0.01em; text-transform:none; }
/* Footer */
.footer { font-size:0.9rem; }
.footer h4 { font-size:0.72rem; letter-spacing:0.18em; font-weight:600; }
.footer a { font-size:0.9rem; }
.footer__brand .brand__name { font-family:var(--font-display); font-weight:400; }
.footer__brand p { font-size:0.9rem; line-height:1.7; }
.footer__bottom { font-size:0.8rem; letter-spacing:0.02em; }
/* Arabic: Naskh headings and Plex text read best a touch larger, with no tracking */
html[lang="ar"] h1, html[lang="ar"] h2 { font-weight:500; letter-spacing:0; line-height:1.3; }
html[lang="ar"] body { line-height:1.8; }