/* ---- Unified numbered nav: overlay menu + footer (Omran 30 Oct 2026: "make them all the same (numbers) Eng Arabic") ----
   One row type everywhere: [ (00) ][ WORD ]. The number sits in a fixed-width column so every word starts on the same
   left edge, and is centred on the word's cap height. Same items/order: (00) Home (01) Conceptual Studies (02) Research
   (03) Majlis Talks (04) Say hi. English uppercase; on hover the English rolls up and the Arabic rolls in, in place.
   Digits stay Western "(00)" in both languages. Touch screens (no hover) see the English only. Loaded last on every page. */
:root{--nv-col:3.4rem}
@media (max-width:767px){:root{--nv-col:2.75rem}}

.nv{display:block;width:max-content;max-width:100%;text-transform:uppercase;font-weight:300;letter-spacing:-.03em}
.menu-links a.nv .m-in,.foot-nav a.nv{display:grid;grid-template-columns:var(--nv-col) auto;align-items:center;column-gap:0}
.foot-nav a.nv{position:static;overflow:visible;width:max-content;flex-direction:initial;white-space:nowrap}

/* the number label: identical in the menu and the footer */
.nv .nv-n{display:block;font-size:var(--t-small);font-weight:500;letter-spacing:.09em;line-height:1;text-transform:none;
  font-variant-numeric:tabular-nums;opacity:.55;transform:none;justify-self:start;transition:opacity .3s ease}
@media (hover:hover){.nv:hover .nv-n,.nv:focus-visible .nv-n{opacity:1}}

/* the word: English roll-up, Arabic rolls in at the same left edge (clipped vertically only, so a long Arabic word is never cut) */
.nv .nv-w{position:relative;display:block;clip-path:inset(0 -100vw 0 -100vw)}
.nv .nv-w .roll{display:block;line-height:1.1em}
.nv .nv-w .roll>span{text-shadow:none}
.nv .nv-ar{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;font-size:.86em;line-height:1;letter-spacing:0;
  font-weight:400;text-transform:none;white-space:nowrap;color:#fcfcfa;transform:translateY(105%);transition:transform .545s var(--ease-2)}
@media (hover:hover){
  .nv:hover .nv-w .roll>span,.nv:focus-visible .nv-w .roll>span{transform:translateY(-110%)}
  .nv:hover .nv-ar,.nv:focus-visible .nv-ar{transform:none}
}
@media (hover:none){.nv .nv-ar{display:none}}

/* menu: same size as before, words share one edge */
.menu-links a.nv{font-size:clamp(1.5rem,6.2vw,5.6rem);line-height:1.02}

/* footer: same treatment, sized so CONCEPTUAL STUDIES fits its column */
.foot-nav a.nv{font-size:clamp(1.5rem,2.75vw,2.6rem);line-height:1.08}
.foot-nav{gap:.25rem}
.foot-nav .gs{margin-left:var(--nv-col)}
/* phone: menu and footer rows are the same size, and both scale down so CONCEPTUAL STUDIES never clips (320px+) */
@media (max-width:767px){.menu-links a.nv,.foot-nav a.nv{font-size:clamp(1.15rem,6.2vw,2.4rem)}}