/* ===========================================================================
   Muhammad Zakria Syed — stylesheet
   Hand-written for exactly the components this page uses. No framework.
   Palette: Deep Emerald + Antique Gold + Ivory.
   =========================================================================== */


/* ===========================================================================
   Mehr Nastaliq Web v2.0
   Mehr Type with CSaLT, Information Technology University of the Punjab,
   Lahore. Licensed CC BY-SA 4.0 — https://mehrtype.com/
   Full licence: assets/fonts/mehr-nastaliq-LICENSE.txt

   Self-hosted rather than pulled from a CDN: 68 KB of WOFF served from our own
   domain beats a third-party round trip, and the file cannot disappear.
   =========================================================================== */
@font-face {
    font-family: "Mehr Nastaliq Web";
    src: url("../fonts/mehr-nastaliq-web.woff") format("woff"),
         url("../fonts/mehr-nastaliq-web.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
    --c-emerald-deep: #0B3D2E;
    --c-emerald:      #145C43;
    --c-emerald-soft: #1E7A5A;
    --c-gold:         #C9A227;
    --c-gold-soft:    #E0C463;
    --c-ivory:        #F7F3E9;
    --c-sand:         #E8DFC8;
    --c-ink:          #1A1A17;
    --c-ink-soft:     #4A4A42;

    /* Semantic tokens — these are the ones the dark theme overrides.
       Everything below reads from these, never from the raw palette above,
       so a theme is defined in one place instead of a hundred. */
    --bg:            var(--c-ivory);
    --bg-tint:       #F1ECDD;
    --text:          var(--c-ink);
    --text-soft:     var(--c-ink-soft);
    --line:          var(--c-sand);
    --heading:       var(--c-emerald-deep);   /* headings, strong, card titles */
    --accent:        var(--c-emerald);        /* small labels, stat numerals   */
    --hero-top:      #FBF8F0;                 /* hero gradient start           */
    --arch-fill:     #fff;                    /* portrait frame backing        */
    --ghost-line:    rgba(11, 61, 46, .28);
    --ghost-wash:    rgba(11, 61, 46, .05);
    --header-bg:     rgba(247, 243, 233, .88);
    --header-h:      74px;
    --social-bg:     rgba(255, 255, 255, .6);
    --tag-bg:        rgba(20, 92, 67, .09);

    --font-display: "Cormorant Infant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-arabic:  "Amiri", "Traditional Arabic", serif;

    --shell:        1180px;
    --shell-narrow: 800px;
    --radius:       4px;
    --radius-lg:    10px;

    --pad-section: clamp(4rem, 9vw, 7.5rem);
    --gap:         clamp(1.25rem, 2.4vw, 2rem);

    /* Aged paper (parchment) surface — see the "Paper surface" block below. */
    --paper-base:  #F8F1DF;
    --paper-line:  #DDCCA6;
    --paper-stain: rgba(150, 116, 60, .085);
    --paper-edge:  rgba(146, 112, 58, .16);
    --paper-sheen: linear-gradient(158deg, #FCF7EA 0%, #F6EEDB 48%, #F0E6CE 100%);
    --paper-grain: .5;

    /* Background for the deliberately dark sections (stats, leadership, quote). */
    --strong-bg: var(--c-emerald-deep);

    /* Warm-brown shadows: cool grey reads as modern, brown reads as aged. */
    --shadow-sm: 0 1px 2px rgba(96, 70, 30, .07), 0 4px 14px rgba(96, 70, 30, .06);
    --shadow-md: 0 6px 28px rgba(96, 70, 30, .14);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------------------
   Dark theme.

   Applied when the visitor picks it (data-theme="dark") and, by default, when
   their system asks for it — but the explicit data-theme="light" wins over the
   system preference, so the toggle works in both directions.

   The paper surface becomes aged leather-brown rather than bleached parchment:
   inverting it to grey would lose the historical feel the light theme has.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:         #0A1912;
        --bg-tint:    #0D2018;
        --text:       #E9E1CD;
        --text-soft:  #ADA694;
        --line:       rgba(233, 224, 200, .13);
        --heading:    #F1E9D5;
        --accent:     #7FC6A4;
        --hero-top:   #0C1E16;
        --arch-fill:  #14261D;
        --ghost-line: rgba(233, 224, 200, .3);
        --ghost-wash: rgba(233, 224, 200, .06);
        --header-bg:  rgba(10, 25, 18, .9);
        --social-bg:  rgba(233, 224, 200, .05);
        --tag-bg:     rgba(127, 198, 164, .12);

        --paper-base:  #16281F;
        --paper-line:  rgba(201, 162, 39, .2);
        --paper-stain: rgba(201, 162, 39, .045);
        --paper-edge:  rgba(0, 0, 0, .38);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .26);
        --shadow-md: 0 6px 28px rgba(0, 0, 0, .42);
        --paper-sheen: linear-gradient(158deg, #1B2F24 0%, #16281F 48%, #102017 100%);
        --paper-grain: .28;
        --strong-bg:   #061109;
    }
}

:root[data-theme="dark"] {
    --bg:         #0A1912;
    --bg-tint:    #0D2018;
    --text:       #E9E1CD;
    --text-soft:  #ADA694;
    --line:       rgba(233, 224, 200, .13);
    --heading:    #F1E9D5;
    --accent:     #7FC6A4;
    --hero-top:   #0C1E16;
    --arch-fill:  #14261D;
    --ghost-line: rgba(233, 224, 200, .3);
    --ghost-wash: rgba(233, 224, 200, .06);
    --header-bg:  rgba(10, 25, 18, .9);
    --social-bg:  rgba(233, 224, 200, .05);
    --tag-bg:     rgba(127, 198, 164, .12);

    --paper-base:  #16281F;
    --paper-line:  rgba(201, 162, 39, .2);
    --paper-stain: rgba(201, 162, 39, .045);
    --paper-edge:  rgba(0, 0, 0, .38);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .26);
    --shadow-md: 0 6px 28px rgba(0, 0, 0, .42);
        --paper-sheen: linear-gradient(158deg, #1B2F24 0%, #16281F 48%, #102017 100%);
        --paper-grain: .28;
        --strong-bg:   #061109;
}


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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    /* The viewport scroller is html, not body. Overflow on body alone does not
       stop RTL pages from shifting sideways when a child is slightly too wide. */
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    padding-top: var(--header-h);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
    line-height: 1.75;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.18;
    margin: 0;
    letter-spacing: .002em;
}

p  { margin: 0 0 1.15em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
strong { font-weight: 600; color: var(--heading); }
em { font-style: italic; }

:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Hidden by moving it *up*, never sideways. A large horizontal offset
   overflows the page in RTL, where the inline start edge is the right one, and
   that shifts the whole layout. */
.skip-link {
    position: absolute; inset-inline-start: 0; top: 0; z-index: 200;
    transform: translateY(-200%);
    background: var(--c-emerald-deep); color: var(--c-ivory);
    padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
    transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* --- Layout -------------------------------------------------------------- */
.shell {
    width: min(100% - 2.5rem, var(--shell));
    margin-inline: auto;
}
.shell--narrow { width: min(100% - 2.5rem, var(--shell-narrow)); }

.section {
    position: relative;
    padding-block: var(--pad-section);
}
.section--tint { background: var(--bg-tint); }

/* Two sections that share a background read as one continuous band, so their
   stacked top and bottom padding looks like a hole rather than a separation.
   Where the colour does change, the full padding is what makes the change feel
   deliberate — so only the same-on-same seam is tightened. */
.section--tint + .section--tint,
.section--dark + .section--dark,
.section:not(.section--tint):not(.section--dark) + .section:not(.section--tint):not(.section--dark) {
    padding-top: calc(var(--pad-section) * .4);
}
/* …and the section above the seam gives a little back too, so the join is
   balanced rather than lopsided. Browsers without :has() simply keep the full
   bottom padding — the seam is still tightened by the rule above. */
.section--tint:has(+ .section--tint),
.section--dark:has(+ .section--dark),
.section:not(.section--tint):not(.section--dark):has(+ .section:not(.section--tint):not(.section--dark)) {
    padding-bottom: calc(var(--pad-section) * .65);
}

.section--dark {
    background: var(--strong-bg);
    color: rgba(247, 243, 233, .82);
    overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-ivory); }
.section--dark strong { color: var(--c-gold-soft); }
.section--dark .eyebrow { color: var(--c-gold-soft); }
.section--dark .eyebrow::before,
.section--dark .eyebrow::after { background: rgba(201, 162, 39, .5); }
.section--dark .section__intro { color: rgba(247, 243, 233, .74); }

/* --- Islamic geometric pattern layer ------------------------------------- */
.pattern-layer {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .055;
    background-image:
        repeating-linear-gradient(45deg,  currentColor 0 1px, transparent 1px 34px),
        repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg,   currentColor 0 1px, transparent 1px 68px),
        repeating-linear-gradient(90deg,  currentColor 0 1px, transparent 1px 68px);
    color: var(--accent);
}
.pattern-layer--soft { opacity: .05; color: var(--c-gold); }

/* --- Section heads ------------------------------------------------------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 600; color: var(--c-gold);
    margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--c-gold); opacity: .6; }
.eyebrow--center { display: flex; justify-content: center; }
.eyebrow--center::after { content: ""; width: 2.25rem; height: 1px; background: var(--c-gold); opacity: .6; }

.section__head { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section__head--center { text-align: center; }
.section__head--center .eyebrow { display: inline-flex; }
.section__head--center .eyebrow::after { content: ""; width: 2.25rem; height: 1px; background: var(--c-gold); opacity: .6; }

.section__title {
    font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem);
    color: var(--heading);
    max-width: 22ch;
}
.section__head--center .section__title { margin-inline: auto; max-width: 26ch; }
.section__title--display {
    font-style: italic;
    font-weight: 500;
    max-width: 30ch;
}

.section__intro {
    margin: 1.25rem auto 0;
    max-width: 68ch;
    color: var(--text-soft);
}
.section__head:not(.section__head--center) .section__intro { margin-inline: 0; }

.subheading {
    font-family: var(--font-body);
    font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 600; color: var(--accent);
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem;
}
.subheading--center { text-align: center; }
.subheading__note { max-width: 68ch; color: var(--text-soft); margin-top: -.75rem; }

/* --- Prose --------------------------------------------------------------- */
.prose { color: var(--text-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose--wide { max-width: 72ch; }
.prose--center { max-width: 66ch; margin-inline: auto; text-align: center; }

.prose-split {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.pull-quote {
    position: relative;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--c-gold);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pull-quote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--heading);
}
.pull-quote__mark { width: 2rem; height: 2rem; color: var(--c-gold); opacity: .55; margin-bottom: .75rem; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.75rem;
    font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    border-radius: 100px; border: 1px solid transparent;
    transition: background .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn__icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary { background: var(--c-gold); color: #0B3D2E; }
.btn--primary:hover { background: var(--c-gold-soft); }

.btn--ghost { border-color: var(--ghost-line); color: var(--heading); }
.btn--ghost:hover { border-color: var(--heading); background: var(--ghost-wash); }

/* --- Header -------------------------------------------------------------- */
.site-header {
    position: fixed; top: 0; inset-inline: 0; z-index: 90;
    width: 100%;
    max-width: 100%;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck {
    border-color: var(--line);
    box-shadow: 0 2px 20px rgba(11, 61, 46, .06);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    min-height: 74px;
}

.brand { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.brand__mark { color: var(--c-gold); width: 34px; height: 34px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand__name {
    font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
    color: var(--heading); letter-spacing: .01em;
    white-space: nowrap;
}
.brand__sub {
    font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft);
    white-space: nowrap;
}

.nav ul { display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 1.75rem); }
.nav a {
    position: relative;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
    color: var(--text-soft);
    padding-block: .35rem;
    transition: color .2s var(--ease);
}
.nav a::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0;
    height: 1px; background: var(--c-gold);
    transform: scaleX(0); transform-origin: var(--edge-start, left);
    transition: transform .3s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--heading); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Theme toggle: the two icons are stacked and cross-fade, so the button never
   changes size and nothing around it shifts when the theme flips. */
.theme-toggle {
    position: relative;
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--heading);
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease),
                color .25s var(--ease);
}
.theme-toggle:hover { background: var(--ghost-wash); border-color: var(--ghost-line); }
.theme-toggle .icon {
    grid-area: 1 / 1;
    width: 1.15rem; height: 1.15rem;
    transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.theme-toggle__moon { opacity: 0; transform: rotate(-70deg) scale(.6); }
.theme-toggle__sun  { opacity: 1; transform: none; }
.theme-toggle.is-dark .theme-toggle__sun  { opacity: 0; transform: rotate(70deg) scale(.6); }
.theme-toggle.is-dark .theme-toggle__moon { opacity: 1; transform: none; color: var(--c-gold-soft); }

.nav-toggle {
    display: none;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--heading); padding: .5rem; cursor: pointer;
}
.nav-toggle .icon { width: 1.4rem; height: 1.4rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(201, 162, 39, .10), transparent 55%),
        linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%);
    overflow: hidden;
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}
.hero--with-portrait .hero__inner,
.hero__inner:has(.hero__ornament) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }

.hero__eyebrow {
    font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
    font-weight: 600; color: var(--c-gold); margin-bottom: 1.25rem;
}
.hero__name {
    font-size: clamp(2.6rem, 1.4rem + 5.2vw, 4.6rem);
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 1.1rem;
    overflow-wrap: break-word;
}
.hero__roles {
    font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 500; color: var(--accent); margin-bottom: 1.75rem;
}
.hero__lead { max-width: 56ch; color: var(--text-soft); font-size: 1.075rem; }

.hero__positions {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin: 1.75rem 0 2.25rem;
}
.hero__positions li {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .8rem 1.15rem;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--c-gold);
    border-radius: var(--radius);
    max-width: 22rem;
}
.hero__position-role {
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 600; color: var(--c-gold);
}
.hero__position-org { font-size: .9rem; font-weight: 500; color: var(--heading); line-height: 1.4; }
.hero__position-note { font-size: .78rem; color: var(--text-soft); line-height: 1.4; }

/* View letter — tucked into the bottom corner opposite the gold edge. */
.hero__positions li.has-doc .hero__position-note { padding-inline-end: 2rem; }
.hero__doc {
    position: absolute; inset-inline-end: .55rem; bottom: .55rem; z-index: 1;
    display: grid; place-items: center;
    width: 1.5rem; height: 1.5rem; padding: 0;
    border-radius: 50%;
    color: var(--c-gold);
    border: 1px solid rgba(201, 162, 39, .7);
    background: rgba(255, 255, 255, .75);
    font: inherit; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: background-color .2s, color .2s;
}
.hero__doc .icon { width: .85rem; height: .85rem; }
.hero__doc:hover, .hero__doc:focus-visible { background: var(--c-gold); color: #fff; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.25rem; }

/* Arch / mihrab frame */
.arch-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 32% 32% 4% 4%;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    background: linear-gradient(160deg, var(--arch-fill), var(--bg-tint));
}
.arch-frame::after {
    content: ""; position: absolute; inset: 10px;
    border: 1px solid rgba(201, 162, 39, .5);
    border-radius: 50% 50% var(--radius) var(--radius) / 32% 32% 3% 3%;
    pointer-events: none;
}
.arch-frame img { width: 100%; height: 100%; object-fit: cover; }
.arch-frame--empty {
    display: grid; place-items: center;
    color: var(--accent);
    opacity: .3;
}
.arch-frame--empty svg { width: 72%; }

/* --- Social -------------------------------------------------------------- */
.social { display: flex; flex-wrap: wrap; gap: .6rem; }
.social__link {
    position: relative;
    display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--heading);
    background: var(--social-bg);
    overflow: hidden;
    transition: color .3s var(--ease), border-color .3s var(--ease),
                transform .35s var(--ease), box-shadow .35s var(--ease);
}
.social__link .icon {
    position: relative; z-index: 1;
    width: 1.05rem; height: 1.05rem;
    transition: transform .35s var(--ease);
}

/* The fill grows from the bottom of the circle on hover rather than the whole
   background switching at once — softer, and it reads as deliberate. */
.social__link::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--strong-bg);
    transform: translateY(101%);
    transition: transform .35s var(--ease);
}
a.social__link:hover,
a.social__link:focus-visible {
    color: var(--c-gold);
    border-color: var(--strong-bg);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(11, 61, 46, .22);
}
a.social__link:hover::before,
a.social__link:focus-visible::before { transform: none; }
a.social__link:hover .icon,
a.social__link:focus-visible .icon { transform: scale(1.12); }
a.social__link:active { transform: translateY(-1px); }

/* Links that are not live yet: still respond, but stay clearly inactive. */
.social__link.is-pending { opacity: .4; cursor: default; }
.social__link.is-pending:hover {
    opacity: .62;
    border-color: var(--c-gold);
    transform: translateY(-1px);
}

/* On the dark Connect section the fill inverts: it lights up instead. */
.social--large .social__link {
    width: 3rem; height: 3rem;
    background: rgba(247, 243, 233, .08);
    border-color: rgba(247, 243, 233, .22);
    color: var(--c-ivory);
}
.social--large .social__link::before { background: var(--c-gold); }
.social--large a.social__link:hover,
.social--large a.social__link:focus-visible {
    box-shadow: 0 6px 18px rgba(201, 162, 39, .3);
}
.social--large a.social__link:hover {
    background: var(--c-gold); color: #0B3D2E; border-color: var(--c-gold);
}

/* Seven icons on a phone: shrink the circles so the row never wraps. */
@media (max-width: 620px) {
    .hero__social .social,
    .connect__social .social {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: .22rem;
        width: 100%;
    }
    .hero__social .social__link,
    .connect__social .social__link,
    .connect__social .social--large .social__link {
        width: 1.95rem;
        height: 1.95rem;
    }
    .hero__social .social__link .icon,
    .connect__social .social__link .icon {
        width: .78rem;
        height: .78rem;
    }
}

/* --- Stats --------------------------------------------------------------- */
.stats__note {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
    color: var(--c-ivory); max-width: 40ch; margin-inline: auto;
}
.stats__aside {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.75rem;
    max-width: 52rem;
    margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
    font-size: .95rem;
    line-height: 1.7;
    color: rgba(247, 243, 233, .78);
    text-align: center;
}
.stats__aside-item { max-width: 28rem; }
.stats__aside strong {
    display: inline;
    color: var(--c-gold-soft);
    font-weight: 600;
    margin-inline-end: .35em;
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    /* Same colour as the cells, so a row that does not fill completely shows
       the section background rather than a stray pale block. The separator
       lines come from each cell's own hairline shadow below. */
    background: var(--strong-bg);
    border: 1px solid rgba(247, 243, 233, .14);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.stat {
    background: var(--strong-bg);
    box-shadow: 0 0 0 1px rgba(247, 243, 233, .14);
    padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;
    text-align: center;
}
.stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
    font-weight: 600;
    color: var(--c-gold-soft);
    line-height: 1.15;
    margin-bottom: .5rem;
}
.stat__label {
    display: block;
    font-size: .8rem; line-height: 1.5;
    color: rgba(247, 243, 233, .7);
}

/* --- Cards --------------------------------------------------------------- */
.cards { display: grid; gap: var(--gap); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
    .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .cards--3 { grid-template-columns: minmax(0, 1fr); }
}
.cards--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.75rem, 1.4vw, 1.15rem);
}
.cards--5 .card { padding: clamp(1.15rem, 1.6vw, 1.65rem) .9rem; }
@media (max-width: 960px) {
    .cards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .cards--5 { grid-template-columns: minmax(0, 1fr); }
}

.card {
    padding: clamp(1.5rem, 3vw, 2.1rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon { width: 1.9rem; height: 1.9rem; color: var(--c-gold); margin-bottom: 1.1rem; }
.card__title {
    font-size: 1.3rem; color: var(--heading); margin-bottom: .65rem;
}
.card__body { margin: 0; font-size: .95rem; color: var(--text-soft); }

.card--stat { border-top: 3px solid var(--c-gold); }
.card__stat {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 600; color: var(--accent);
    line-height: 1; margin: 0 0 .85rem;
}
.card__stat span {
    font-family: var(--font-body);
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 600; color: var(--text-soft); margin-inline-start: .4rem;
}

.card--outline {
    background: rgba(247, 243, 233, .045);
    border-color: rgba(247, 243, 233, .16);
    box-shadow: none;
}
.card--outline:hover { background: rgba(247, 243, 233, .08); box-shadow: none; }
.card--outline .card__body { color: rgba(247, 243, 233, .7); }

/* --- Lineage ------------------------------------------------------------- */
.lineage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}
.lineage__card {
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.lineage__card p:last-child { margin-bottom: 0; color: var(--text-soft); font-size: .95rem; }
.lineage__icon { width: 2rem; height: 2rem; color: var(--c-gold); margin: 0 auto 1rem; }
.lineage__name { font-size: 1.5rem; color: var(--heading); margin-bottom: .4rem; }
.lineage__meta {
    font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 600; color: var(--c-gold); margin-bottom: 1rem;
}
.lineage__link { display: grid; place-items: center; }
.lineage__link span {
    display: block; width: 1px; height: 3.5rem;
    background: linear-gradient(180deg, transparent, var(--c-gold), transparent);
}

/* --- Journey strip ------------------------------------------------------- */
.journey {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 1px;
    margin-top: clamp(2.25rem, 4vw, 3rem);
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.journey__step {
    background: #fff;
    padding: 1.5rem 1.15rem;
    text-align: center;
    transition: background .25s var(--ease);
}
.journey__step:hover { background-color: color-mix(in srgb, var(--paper-base) 88%, var(--heading)); }
.journey__num {
    display: block;
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
    color: var(--c-gold); margin-bottom: .5rem;
}
.journey__label {
    font-size: .88rem; font-weight: 500; line-height: 1.45; color: var(--heading);
}

/* --- Checklist ----------------------------------------------------------- */
.checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: .35rem 2.5rem;
}
.checklist__item {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-soft);
}
.checklist__marker {
    flex: none; margin-top: .55rem;
    width: 7px; height: 7px;
    background: var(--c-gold);
    transform: rotate(45deg);
}

/* --- Feature card -------------------------------------------------------- */
.feature-card {
    display: flex; gap: clamp(1rem, 2.5vw, 1.5rem);
    width: fit-content; max-width: 100%;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.35rem, 3vw, 2.25rem);
    background: #fff;
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--c-gold);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.prose + .feature-card { margin-top: 1.75rem; }
/* Under a wide intro, the card lines up with the text column above it. */
.prose--wide + .feature-card { width: 100%; max-width: 72ch; }
.feature-card__icon { width: 2rem; height: 2rem; color: var(--c-gold); flex: none; }
.feature-card p { color: var(--text-soft); }
.feature-card > div > :last-child { margin-bottom: 0; }
.feature-card__role {
    font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 600; color: var(--c-gold); margin-bottom: .35rem;
}
.feature-card__title { font-size: 1.45rem; color: var(--heading); margin-bottom: .5rem; }

/* Opens the letter in the on-page lightbox instead of downloading it. */
.doc-link {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: .35rem;
    padding: .5rem 1rem;
    font-family: inherit;
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    color: var(--heading);
    border: 1px solid rgba(201, 162, 39, .6);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    position: relative; z-index: 1;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
.doc-link .icon { width: 1rem; height: 1rem; color: var(--c-gold); transition: color .2s; }
.doc-link:hover, .doc-link:focus-visible { background: var(--c-gold); border-color: var(--c-gold); color: #0B3D2E; }
.doc-link:hover .icon, .doc-link:focus-visible .icon { color: #0B3D2E; }

/* --- Tags / role lists --------------------------------------------------- */
.tag {
    display: inline-block;
    font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    color: var(--accent);
    background: var(--tag-bg);
    border-radius: 100px;
    padding: .3rem .8rem;
}

.roles { display: grid; gap: .35rem; }
.roles__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 1.25rem;
    padding: 1.1rem .25rem;
    border-bottom: 1px solid var(--line);
}
.roles__org { font-weight: 500; color: var(--heading); }
.roles__place {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .85rem; color: var(--text-soft);
    justify-content: flex-end;
}
.flag {
    width: 1.35rem; height: .9rem; flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(96, 70, 30, .22);
}

/* --- International exposure --------------------------------------------- */
.countries {
    display: grid; gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    margin-top: 2.25rem;
}
.countries__item {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem;
    background: var(--bg-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.countries__name { font-weight: 500; color: var(--heading); line-height: 1.35; }
.flag--lg { width: 2.4rem; height: 1.6rem; border-radius: 3px; }
@media (max-width: 480px) {
    .countries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .countries__item { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .8rem; }
}

/* --- Timeline ------------------------------------------------------------ */
.timeline { position: relative; padding-inline-start: 2rem; }
.timeline::before {
    content: ""; position: absolute; inset-inline-start: 5px; top: .5rem; bottom: .5rem;
    width: 1px; background: linear-gradient(180deg, var(--c-gold), rgba(201, 162, 39, .15));
}
.timeline__item { position: relative; padding-bottom: 2.25rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    position: absolute; inset-inline-start: -2rem; top: .5rem;
    width: 11px; height: 11px;
    background: var(--bg); border: 2px solid var(--c-gold);
    transform: rotate(45deg);
}
.section--tint .timeline__dot { background: var(--bg-tint); }
.timeline__org { font-size: 1.25rem; color: var(--heading); margin: .6rem 0 .5rem; }
.timeline__body p { margin: 0; color: var(--text-soft); font-size: .95rem; }

/* --- Values -------------------------------------------------------------- */
.values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
}
.value {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.25rem) 1.35rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value__ar {
    display: block;
    font-family: var(--font-arabic);
    font-size: 2.5rem; line-height: 1.4;
    color: var(--c-gold); opacity: .55;
    margin-bottom: .5rem;
}
.value__term {
    font-family: var(--font-body);
    font-size: .78rem; letter-spacing: .2em; font-weight: 600;
    color: var(--heading);
}
.value__en {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.2rem; color: var(--accent); margin: .2rem 0 .85rem;
}
.value__body { margin: 0; font-size: .88rem; color: var(--text-soft); }

/* --- Principles ---------------------------------------------------------- */
.principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.15rem, 2.2vw, 2rem);
}
.principle { display: flex; gap: 1.35rem; min-width: 0; }
.principle__num {
    font-family: var(--font-display);
    font-size: 2.3rem; font-weight: 600; line-height: 1;
    color: var(--c-gold); opacity: .5; flex: none;
}
.principle__title { font-size: 1.3rem; color: var(--heading); margin-bottom: .55rem; }
.principle p { margin: 0; color: var(--text-soft); font-size: .95rem; }
@media (max-width: 960px) {
    .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .principles { grid-template-columns: minmax(0, 1fr); }
}

/* --- Big quote ----------------------------------------------------------- */
.philosophy { text-align: center; }
.big-quote { margin: 0 0 2.25rem; }
.big-quote__mark { width: 2.5rem; height: 2.5rem; color: var(--c-gold); opacity: .6; margin: 0 auto 1.5rem; }
.big-quote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1rem + 1.9vw, 2.15rem);
    font-style: italic; line-height: 1.5;
    color: var(--c-ivory);
}
.philosophy__close { max-width: 62ch; margin-inline: auto; }

/* --- Chips --------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .65rem; }
.chips--center { justify-content: center; }
.chip {
    padding: .55rem 1.15rem;
    font-size: .82rem; font-weight: 500;
    color: var(--heading);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 100px;
}
.chip--light {
    background: rgba(247, 243, 233, .07);
    border-color: rgba(247, 243, 233, .2);
    color: rgba(247, 243, 233, .85);
}

/* --- Topics -------------------------------------------------------------- */
.topics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.topic {
    background: var(--bg-tint);
    padding: clamp(1.25rem, 2vw, 1.75rem) 1.1rem;
    min-width: 0;
    transition: background .25s var(--ease);
}
.topic:hover { background-color: color-mix(in srgb, var(--paper-base) 92%, #fff); }
.topic__title { font-size: 1.2rem; color: var(--heading); margin-bottom: .5rem; }
.topic__body { margin: 0; font-size: .93rem; color: var(--text-soft); }
@media (max-width: 960px) {
    .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .topics { grid-template-columns: minmax(0, 1fr); }
}

/* --- Identity block ------------------------------------------------------ */
.identity {
    text-align: center;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid rgba(247, 243, 233, .16);
}
.identity__name { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin-bottom: .6rem; }
.identity__roles { font-size: .82rem; letter-spacing: .06em; color: var(--c-gold-soft); margin-bottom: .4rem; }
.identity__location { font-size: .85rem; color: rgba(247, 243, 233, .6); margin: 0; }
.connect__social { display: flex; justify-content: center; }

/* --- Gallery ------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Masonry wall.

   Every photograph keeps its own proportions — the folders mix portrait,
   landscape and square shots, and forcing them into one shape would cut people
   out of the portraits.

   Two layouts, one markup:
     - No JavaScript: CSS `columns`, which is real masonry on its own.
     - With JavaScript: `.gallery--js` switches to flex columns that the script
       fills one item at a time. This matters for "Show more" — CSS columns
       re-balance on every reveal, so photographs the visitor is already looking
       at would jump to a different column. Filling explicit columns means newly
       revealed images only ever appear below what is already there.
   ------------------------------------------------------------------------- */
.gallery { --gallery-cols: 4; }

/* Masonry: each photograph at its own proportions. */
.gallery--masonry {
    display: block;
    columns: var(--gallery-cols);
    column-gap: var(--gap);
}

/* Tiles: every box identical, each photograph cropped to fill it. Used by the
   short in-section galleries, where a tidy, predictable block reads better than
   a ragged wall. Clicking still opens the photograph whole in the lightbox. */
.gallery--tiles {
    display: grid;
    grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
    gap: var(--gap);
}
.gallery--tiles .gallery__item { margin: 0; }
.gallery--tiles .gallery__trigger { aspect-ratio: 4 / 3; }
/* Anchor the crop to the top of the photograph: faces and heads sit near the
   top, so cutting from the bottom keeps the subject. */
.gallery--tiles .gallery__trigger img { object-position: top center; }
/* With scripting on, the CSS-columns layout would paint first and then be
   rebuilt by the script — a visible reshuffle on every page load. Hold the wall
   back until the script has placed it. Without scripting there is no `.js`
   class, so the CSS-columns layout shows immediately as normal. */
.js .gallery--masonry:not(.gallery--js) {
    visibility: hidden;
    /* Safety net: if the script never runs (blocked, error, slow device), the
       wall still appears — in the CSS-columns layout — instead of staying
       invisible for good. */
    animation: gallery-reveal 0s 1.5s forwards;
}
@keyframes gallery-reveal { to { visibility: visible; } }

.gallery--js {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    columns: auto;
}
.gallery__col {
    display: flex; flex-direction: column; gap: var(--gap);
    flex: 1 1 0; min-width: 0;
}

.gallery__item {
    margin: 0 0 var(--gap);
    break-inside: avoid;
}
.gallery--js .gallery__item { margin: 0; }
.gallery__item.is-hidden { display: none; }

/* No frame or border — the photograph itself is the edge. */
.gallery__trigger {
    display: block;
    width: 100%; padding: 0; cursor: zoom-in;
    background: var(--paper-base);
    border: 0;
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery__trigger:hover,
.gallery__trigger:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
/* The button already carries the photograph's exact aspect ratio inline, so the
   image simply fills it — nothing is cropped and nothing shifts on load. */
.gallery__trigger img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Trimmed to level the wall's bottom edge: keep the top of the photograph,
   where the subject almost always is, and lose height from the bottom. */
.gallery__trigger.is-cropped img { object-position: top center; }

/* A lone image is a portrait/feature shot, not a wall. */
.gallery--count-1 {
    columns: 1;
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
    margin-inline: auto;
}
.gallery--count-1.gallery--tiles .gallery__trigger { aspect-ratio: 16 / 9; }
.gallery--count-1.gallery--js { display: block; }

/* The full album packs tighter than the small in-section galleries. */
.gallery--album { --gallery-cols: 4; }

.gallery-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gallery--spaced { margin-top: 0; }

.gallery__footer {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.gallery__count {
    margin: 0;
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-soft);
}
.gallery__more-icon { transform: rotate(90deg); }
.gallery__more:hover .gallery__more-icon { transform: rotate(90deg) translateX(3px); }

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
    position: fixed; inset: 0; z-index: 150;
    display: grid; place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(11, 61, 46, .94);
    animation: fade .25s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
    max-width: 100%; max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.lightbox__close {
    position: absolute; top: 1.25rem; inset-inline-end: 1.25rem;
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    background: rgba(247, 243, 233, .1); color: var(--c-ivory);
    border: 1px solid rgba(247, 243, 233, .28);
    border-radius: 50%; cursor: pointer;
    transition: background .2s var(--ease);
}
.lightbox__close:hover { background: rgba(247, 243, 233, .22); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
    background: #082B21;
    color: rgba(247, 243, 233, .68);
}
.site-footer__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem;
    padding-block: 1.75rem;
    font-size: .8rem;
}
.site-footer__bar p { margin: 0; }
.credit a { color: var(--c-gold-soft); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.credit a:hover { border-color: var(--c-gold-soft); }

/* --- Back to top --------------------------------------------------------- */
.to-top {
    position: fixed; inset-inline-end: 1.5rem; bottom: 1.5rem; z-index: 80;
    display: grid; place-items: center;
    width: 2.9rem; height: 2.9rem;
    background: var(--strong-bg); color: var(--c-gold);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top .icon { transform: rotate(-90deg); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
/* Never let it sit on top of the footer credit line. */
.to-top.is-over-footer { opacity: 0; visibility: hidden; transform: translateY(12px); }

/* --- Reveal animation ---------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================================
   Paper surface — aged parchment for every boxed element.

   One shared block so a change to the paper propagates everywhere. Built from
   CSS layers rather than a texture image: no extra request, and it stays crisp
   at any size and on any screen density.

   Layers, bottom to top:
     1. background-color .... the base tone (overridable per component for hover)
     2. radial-gradients .... irregular tea-coloured staining
     3. linear-gradient ..... the light-centre / darker-edges falloff of old paper
     4. inset box-shadow .... darkening around the edge, as if handled for years
     5. ::before ............ fine SVG-turbulence grain, multiplied over the rest
   =========================================================================== */
.pull-quote,
.hero__positions li,
.card:not(.card--outline),
.lineage__card,
.feature-card,
.journey__step,
.value,
.topic,
.chip:not(.chip--light),
.timeline__body {
    position: relative;
    background-color: var(--paper-base);
    background-image:
        radial-gradient(ellipse 55% 40% at 18% 20%, var(--paper-stain), transparent 70%),
        radial-gradient(ellipse 45% 35% at 84% 14%, var(--paper-stain), transparent 70%),
        radial-gradient(ellipse 60% 45% at 72% 86%, var(--paper-stain), transparent 70%),
        radial-gradient(ellipse 40% 40% at 26% 80%, var(--paper-stain), transparent 70%),
        var(--paper-sheen);
    border-color: var(--paper-line);
    box-shadow:
        inset 0 0 32px var(--paper-edge),
        var(--shadow-sm);
}

/* The grain. Sits above the paper but below the text. */
.pull-quote::before,
.hero__positions li::before,
.card:not(.card--outline)::before,
.lineage__card::before,
.feature-card::before,
.journey__step::before,
.value::before,
.topic::before,
.timeline__body::before,
.chip:not(.chip--light)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--paper-grain);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* Hand-cut rather than machine-cut: an irregular radius on the larger sheets. */
.pull-quote,
.card:not(.card--outline),
.lineage__card,
.feature-card,
.value {
    border-radius: 13px 9px 14px 10px / 10px 14px 9px 13px;
}
.hero__positions li { border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px; }

/* Components that keep a coloured accent edge need it restated after the
   shared border-color above. */
.pull-quote     { border-top-color: var(--c-gold); }
.card--stat     { border-top-color: var(--c-gold); }
.feature-card   { border-inline-start-color: var(--c-gold); }
.hero__positions li { border-inline-start-color: var(--c-gold); }

/* The timeline entries are borderless text blocks, so they get paper as an
   inset panel instead of a bordered card. */
.timeline__body {
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--paper-line);
    border-radius: 12px 9px 13px 10px / 9px 13px 10px 12px;
}

/* Grain must not sit on top of a gallery photo. */
.gallery__trigger { background-color: var(--paper-base); }

@media (prefers-reduced-motion: no-preference) {
    .journey__step, .topic { transition: background-color .25s var(--ease); }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
    .gallery, .gallery--album { --gallery-cols: 3; }
    .hero--with-portrait .hero__inner,
    .hero__inner:has(.hero__ornament) { grid-template-columns: minmax(0, 1fr); }
    .hero__portrait, .hero__ornament { max-width: 380px; margin-inline: auto; order: -1; }
    .prose-split { grid-template-columns: minmax(0, 1fr); }
    .lineage { grid-template-columns: minmax(0, 1fr); }
    .lineage__link span { width: 3.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold), transparent); }
}

/* The nav collapses early: eight items plus the name and two buttons stop
   fitting well before the usual tablet breakpoint. */
@media (max-width: 1200px) {
    .nav-toggle { display: block; }
    .nav {
        position: absolute; inset-inline: 0; top: 100%;
        background: var(--bg);
        border-block: 1px solid var(--line);
        box-shadow: 0 12px 28px rgba(11, 61, 46, .1);
        display: none;
    }
    .nav.is-open { display: block; }
    .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .nav li { border-bottom: 1px solid var(--line); }
    .nav li:last-child { border-bottom: 0; }
    .nav a { display: block; padding: 1rem 1.25rem; width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
    .nav a::after { display: none; }
}

@media (max-width: 560px) {
    .brand__mark { width: 28px; height: 28px; }
    .brand { gap: .55rem; }
    .site-header__actions { gap: .4rem; }
    .theme-toggle { width: 2.25rem; height: 2.25rem; }
    .theme-toggle .icon { width: 1rem; height: 1rem; }
}

@media (max-width: 620px) {
    .gallery, .gallery--album { --gallery-cols: 2; }
    /* Keep the portrait from eating the whole first screen. */
    .hero__portrait, .hero__ornament { max-width: 220px; }
    .roles__item { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    /* Single column: the tag is a grid item, so stop it stretching full width. */
    .roles__item .tag { justify-self: start; }
    .roles__place { justify-content: flex-start; }
    .feature-card { flex-direction: column; }
    .site-footer__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
        padding-block: .7rem;
        font-size: clamp(.58rem, 2.85vw, .68rem);
        line-height: 1.35;
        letter-spacing: 0;
    }
    .site-footer__bar p { white-space: nowrap; }
    :root[lang="ur"] .site-footer__bar,
    :root[lang="ar"] .site-footer__bar {
        font-size: clamp(.58rem, 2.85vw, .68rem);
        line-height: 1.4;
    }
    .to-top { inset-inline-end: 1rem; bottom: 1rem; }
}

/* --- Motion / print ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .site-header, .to-top, .lightbox, .nav-toggle, .pattern-layer { display: none !important; }
    body { background: #fff; color: #000; padding-top: 0; }
    .section--dark { background: #fff !important; color: #000 !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    /* Paper grain is screen decoration; it only muddies a printed page. */
    .pull-quote::before, .hero__positions li::before, .card::before,
    .lineage__card::before, .feature-card::before, .journey__step::before,
    .value::before, .topic::before, .timeline__body::before,
    .chip::before { display: none !important; }
}


/* ===========================================================================
   Language switcher
   =========================================================================== */
.lang { position: relative; }
/* The closed menu is only visually hidden, so it still widens the page. In RTL
   that extra width sits on the inline-start edge and the header slides off-screen. */
.lang:not(.is-open) { overflow: hidden; }

.lang__button {
    display: flex; align-items: center; gap: .4rem;
    height: 2.5rem; padding: 0 .7rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--heading);
    font-family: var(--font-body);
    font-size: .72rem; font-weight: 600; letter-spacing: .1em;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lang__button:hover { background: var(--ghost-wash); border-color: var(--ghost-line); }
.lang__icon  { width: 1rem; height: 1rem; color: var(--c-gold); }
.lang__caret { width: .85rem; height: .85rem; transition: transform .25s var(--ease); }
.lang__button[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }

.lang__menu {
    position: absolute; top: calc(100% + .5rem); inset-inline-end: 0;
    z-index: 95;
    min-width: 11rem;
    padding: .35rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }

.lang__option {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem;
    border-radius: var(--radius);
    color: var(--text-soft);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__option:hover { background: var(--ghost-wash); color: var(--heading); }
.lang__option.is-active { color: var(--heading); font-weight: 600; }
.lang__option.is-active .lang__short { background: var(--c-gold); color: #0B3D2E; border-color: var(--c-gold); }
.lang__short {
    display: grid; place-items: center;
    min-width: 2.1rem; padding: .1rem .35rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: .66rem; font-weight: 600; letter-spacing: .08em;
}
.lang__label { font-size: .95rem; }

/* ===========================================================================
   Right-to-left

   The layout itself mirrors through logical properties above. What remains
   here are the pieces that carry a direction of their own: icons that point
   somewhere, and decorations anchored to one side.
   =========================================================================== */
[dir="rtl"] { --edge-start: right; }

/* Arrows point the way the reader is going. */
[dir="rtl"] .btn__icon,
[dir="rtl"] .to-top .icon { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__icon { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .to-top .icon { transform: rotate(-90deg); }          /* points up, not sideways */
[dir="rtl"] .gallery__more-icon { transform: rotate(90deg); }      /* points down, not sideways */
[dir="rtl"] .gallery__more:hover .gallery__more-icon { transform: rotate(90deg) translateX(3px); }

/* The eyebrow rule sits on the reading side. */
[dir="rtl"] .journey__step:not(:last-child),
[dir="rtl"] .lineage__link { transform: scaleX(-1); }
[dir="rtl"] .journey__step:not(:last-child) > *,
[dir="rtl"] .lineage__link > * { transform: scaleX(-1); }

/* Latin fragments inside RTL prose (UCID, MAAG, 1078–1166) keep their own run. */
[dir="rtl"] .roles__place { direction: rtl; }
[dir="rtl"] .identity__roles { direction: rtl; }

/* ===========================================================================
   Urdu and Arabic typography

   Nastaliq is written on a steep diagonal baseline: it needs far more line
   height than Latin type, and it should never be forced into uppercase or
   letter-spaced, both of which break the joins between letters.
   =========================================================================== */
:root[lang="ur"] {
    --font-display: "Mehr Nastaliq Web", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
    --font-body:    "Mehr Nastaliq Web", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
}
:root[lang="ar"] {
    --font-display: "IBM Plex Sans Arabic", "Noto Naskh Arabic", sans-serif;
    --font-body:    "IBM Plex Sans Arabic", "Noto Naskh Arabic", sans-serif;
    --font-ui:      "IBM Plex Sans Arabic", "Inter", sans-serif;
}

:root[lang="ur"] body { line-height: 2.5; font-size: clamp(.95rem, .9rem + .2vw, 1.02rem); }
:root[lang="ar"] body { line-height: 2.05; }

:root[lang="ur"] h1, :root[lang="ur"] h2,
:root[lang="ur"] h3, :root[lang="ur"] h4 { line-height: 1.9; }
:root[lang="ar"] h1, :root[lang="ar"] h2,
:root[lang="ar"] h3, :root[lang="ar"] h4 { line-height: 1.6; }

/* Nastaliq has no capitals and its letters must stay joined. */
:root[lang="ur"] .eyebrow,
:root[lang="ur"] .subheading,
:root[lang="ur"] .hero__eyebrow,
:root[lang="ur"] .hero__roles,
:root[lang="ur"] .hero__position-role,
:root[lang="ur"] .tag,
:root[lang="ur"] .btn,
:root[lang="ur"] .nav a,
:root[lang="ur"] .lineage__meta,
:root[lang="ur"] .card__stat span,
:root[lang="ur"] .value__term,
:root[lang="ur"] .feature-card__role,
:root[lang="ur"] .gallery__count,
:root[lang="ur"] .site-footer__bar,
:root[lang="ur"] .identity__roles,
:root[lang="ar"] .eyebrow,
:root[lang="ar"] .subheading,
:root[lang="ar"] .hero__eyebrow,
:root[lang="ar"] .hero__roles,
:root[lang="ar"] .tag,
:root[lang="ar"] .btn,
:root[lang="ar"] .nav a {
    text-transform: none;
    letter-spacing: 0;
}

/* Descenders in Nastaliq drop well below the baseline; give them room. */
:root[lang="ur"] .hero__name { line-height: 1.7; padding-bottom: .15em; }
:root[lang="ur"] .section__title { line-height: 1.85; padding-bottom: .1em; }
:root[lang="ur"] .value__ar { line-height: 1.9; }

/* On a wide screen these headings read as one thought; 22ch was clipping the
   last word onto a second line in Urdu and Arabic. Phones may still wrap. */
@media (min-width: 961px) {
    :root[lang="ur"] .section__title,
    :root[lang="ar"] .section__title {
        max-width: none;
        white-space: nowrap;
    }
}
:root[lang="ur"] .stat__value { line-height: 1.6; }
:root[lang="ur"] .journey__label,
:root[lang="ur"] .checklist__item { line-height: 2.1; }
:root[lang="ur"] .checklist__marker { margin-top: .85rem; }

/* Numerals and Latin names stay upright and legible inside Nastaliq runs. */
:root[lang="ur"] .stat__value,
:root[lang="ur"] .card__stat,
:root[lang="ur"] .principle__num,
:root[lang="ur"] .journey__num,
:root[lang="ur"] .lang__short,
:root[lang="ur"] .lang__button { font-family: var(--font-body), "Inter", sans-serif; }
:root[lang="ur"] .stat__value,
:root[lang="ur"] .card__stat,
:root[lang="ur"] .principle__num,
:root[lang="ur"] .journey__num { font-family: "Cormorant Infant", Georgia, serif; }

/* The switcher's own labels are written in their own scripts. */
.lang__button, .lang__short { font-family: "Inter", sans-serif; }

/* Nastaliq at 0.64rem is unreadable: it carries far more detail per glyph than
   Latin type, so the small labels need a size the script can actually show. */
:root[lang="ur"] .eyebrow,
:root[lang="ur"] .subheading,
:root[lang="ur"] .hero__eyebrow { font-size: .92rem; line-height: 2; }
:root[lang="ur"] .tag,
:root[lang="ur"] .hero__position-role,
:root[lang="ur"] .feature-card__role,
:root[lang="ur"] .lineage__meta,
:root[lang="ur"] .card__stat span { font-size: .82rem; line-height: 1.9; }
:root[lang="ur"] .hero__roles,
:root[lang="ur"] .identity__roles { font-size: .95rem; line-height: 2.1; }
:root[lang="ur"] .nav a { font-size: .95rem; }
:root[lang="ur"] .btn { font-size: .92rem; padding-block: .8rem; }
:root[lang="ur"] .chip,
:root[lang="ur"] .journey__label { font-size: .92rem; }
:root[lang="ur"] .gallery__count,
:root[lang="ur"] .site-footer__bar,
:root[lang="ur"] .brand__sub { font-size: .82rem; line-height: 2; }
:root[lang="ur"] .brand__name { font-size: 1.1rem; line-height: 1.9; }
:root[lang="ur"] .stat__label,
:root[lang="ur"] .card__body,
:root[lang="ur"] .topic__body,
:root[lang="ur"] .value__body { font-size: .92rem; }
:root[lang="ur"] .value__en { font-size: 1.15rem; font-style: normal; }

/* ===========================================================================
   Nastaliq vertical metrics

   Measured from the font itself: Mehr Nastaliq Web declares an ascent of 1.46em
   and a descent of 0.49em, so a line box smaller than ~1.95 of the font size is
   shorter than the font's own box. Where that happens inside a container with
   overflow:hidden — the journey strip, the value cards, the hero — the tops and
   tails of the letters are simply cut off.

   Everything below therefore keeps a floor of about 2.05.
   =========================================================================== */
:root[lang="ur"] h1,
:root[lang="ur"] h2,
:root[lang="ur"] h3,
:root[lang="ur"] h4     { line-height: 2.1; }
:root[lang="ur"] .hero__name {
    line-height: 2.05;
    padding-block: .12em .18em;   /* room for the highest ascender and lowest tail */
}
:root[lang="ur"] .section__title   { line-height: 2.05; padding-block: .06em .1em; }
:root[lang="ur"] .brand__name      { line-height: 2.05; }
:root[lang="ur"] .value__ar        { line-height: 2.15; }
:root[lang="ur"] .value__en        { line-height: 2.15; }
:root[lang="ur"] .stat__value      { line-height: 2.05; }
:root[lang="ur"] .card__title,
:root[lang="ur"] .lineage__name,
:root[lang="ur"] .timeline__org,
:root[lang="ur"] .feature-card__title,
:root[lang="ur"] .principle__title,
:root[lang="ur"] .topic__title,
:root[lang="ur"] .identity__name   { line-height: 2.05; }
:root[lang="ur"] .tag,
:root[lang="ur"] .hero__position-role,
:root[lang="ur"] .feature-card__role,
:root[lang="ur"] .lineage__meta,
:root[lang="ur"] .card__stat span,
:root[lang="ur"] .chip             { line-height: 2.05; }
:root[lang="ur"] .btn,
:root[lang="ur"] .nav a,
:root[lang="ur"] .lang__label      { line-height: 2.05; }

/* These sit inside containers that clip to a rounded corner, so the text needs
   its own breathing room rather than relying on the container's. */
:root[lang="ur"] .journey__step    { padding-block: 1.75rem; }
:root[lang="ur"] .journey__label   { line-height: 2.1; display: block; }
:root[lang="ur"] .value            { padding-block: 2rem; }
:root[lang="ur"] .topic            { padding-block: 1.9rem; }
:root[lang="ur"] .stat             { padding-block: 2rem; }
:root[lang="ur"] .checklist__item  { line-height: 2.15; padding-block: 1rem; }
:root[lang="ur"] .checklist__marker { margin-top: 1.05rem; }

/* Nastaliq is drawn on a diagonal: an italic slant on top of that smears it. */
:root[lang="ur"] .section__title--display,
:root[lang="ur"] .value__en,
:root[lang="ur"] .pull-quote p,
:root[lang="ur"] .big-quote p,
:root[lang="ur"] .stats__note,
:root[lang="ur"] em { font-style: normal; }

/* The last few that set their own tight line height for Latin display type. */
:root[lang="ur"] .pull-quote p     { line-height: 2.1; }
:root[lang="ur"] .big-quote p      { line-height: 2.15; }
:root[lang="ur"] .stats__note      { line-height: 2.15; }
:root[lang="ur"] .stats__aside     { line-height: 2.05; }
:root[lang="ur"] .card__stat       { line-height: 2.05; }
:root[lang="ur"] .hero__position-org { line-height: 2.05; }
:root[lang="ur"] .stat__label      { line-height: 2.1; }
:root[lang="ur"] .journey__num,
:root[lang="ur"] .principle__num   { line-height: 1.6; }

/* ===========================================================================
   Alexandria alongside Nastaliq (Urdu and Arabic)

   Two faces, two jobs:

     Mehr Nastaliq  — everything meant to be *read*: section titles, prose,
                      quotes, card bodies, lists. This is the voice of the page
                      and the reason the Urdu edition feels like Urdu.

     Alexandria     — the name, and everything that is *interface*: navigation,
                      buttons, eyebrows, tags, chips, figures, the footer bar.

   Nastaliq is drawn on a steep diagonal and needs roughly twice its font size
   in line height, which makes small labels either cramped or enormous. A clean
   modern face solves that, and the contrast between the two gives the page a
   hierarchy it did not have when everything was set in one script.
   =========================================================================== */
:root[lang="ur"] { --font-ui: "Alexandria", "Inter", sans-serif; }

:root[lang="ur"] .hero__name,
:root[lang="ur"] .identity__name,
:root[lang="ur"] .brand__name,
:root[lang="ur"] .brand__sub,
:root[lang="ur"] .nav a,
:root[lang="ur"] .btn,
:root[lang="ur"] .eyebrow,
:root[lang="ur"] .subheading,
:root[lang="ur"] .tag,
:root[lang="ur"] .chip,
:root[lang="ur"] .hero__eyebrow,
:root[lang="ur"] .hero__roles,
:root[lang="ur"] .hero__position-role,
:root[lang="ur"] .hero__position-org,
:root[lang="ur"] .stat__value,
:root[lang="ur"] .stat__label,
:root[lang="ur"] .card__stat,
:root[lang="ur"] .card__stat span,
:root[lang="ur"] .journey__num,
:root[lang="ur"] .journey__label,
:root[lang="ur"] .principle__num,
:root[lang="ur"] .lineage__meta,
:root[lang="ur"] .feature-card__role,
:root[lang="ur"] .roles__place,
:root[lang="ur"] .gallery__count,
:root[lang="ur"] .gallery__more,
:root[lang="ur"] .site-footer__bar,
:root[lang="ur"] .identity__roles,
:root[lang="ur"] .identity__location,
:root[lang="ur"] .lang__label {
    font-family: var(--font-ui);
}

/* Alexandria sits on a normal Latin-style baseline, so it does not want the
   doubled line height Nastaliq needs. Undo that here or the header, buttons and
   labels all end up twice as tall as they should be. */
:root[lang="ur"] .hero__name {
    line-height: 1.22;
    padding-block: 0;
    font-weight: 600;
    letter-spacing: -.015em;
}
:root[lang="ur"] .identity__name { line-height: 1.3; font-weight: 600; }
:root[lang="ur"] .brand__name    { line-height: 1.35; font-size: 1rem; font-weight: 600; }
:root[lang="ur"] .brand__sub     { line-height: 1.4; font-size: .68rem; text-transform: none; letter-spacing: 0; }
:root[lang="ur"] .nav a          { line-height: 1.6; font-size: .8rem; }
:root[lang="ur"] .btn            { line-height: 1.5; font-size: .78rem; padding-block: .95rem; }
:root[lang="ur"] .eyebrow        { line-height: 1.6; font-size: .74rem; letter-spacing: .1em; }
:root[lang="ur"] .subheading     { line-height: 1.6; font-size: .8rem; letter-spacing: .08em; }
:root[lang="ur"] .tag            { line-height: 1.6; font-size: .66rem; letter-spacing: .06em; }
:root[lang="ur"] .chip           { line-height: 1.7; font-size: .82rem; }
:root[lang="ur"] .hero__eyebrow  { line-height: 1.7; font-size: .74rem; letter-spacing: .16em; }
:root[lang="ur"] .hero__roles    { line-height: 1.8; font-size: .8rem; letter-spacing: .06em; }
:root[lang="ur"] .hero__position-role { line-height: 1.6; font-size: .64rem; letter-spacing: .12em; }
:root[lang="ur"] .hero__position-org  { line-height: 1.55; font-size: .88rem; }
:root[lang="ur"] .stat__value    { line-height: 1.25; }
:root[lang="ur"] .stat__label    { line-height: 1.65; font-size: .82rem; }
:root[lang="ur"] .card__stat     { line-height: 1.25; }
:root[lang="ur"] .card__stat span{ line-height: 1.6; font-size: .68rem; letter-spacing: .1em; }
:root[lang="ur"] .journey__num,
:root[lang="ur"] .principle__num { line-height: 1.3; }
:root[lang="ur"] .journey__label { line-height: 1.65; font-size: .86rem; }
:root[lang="ur"] .journey__step  { padding-block: 1.5rem; }
:root[lang="ur"] .lineage__meta  { line-height: 1.6; font-size: .7rem; letter-spacing: .12em; }
:root[lang="ur"] .feature-card__role { line-height: 1.6; font-size: .68rem; letter-spacing: .14em; }
:root[lang="ur"] .roles__place   { line-height: 1.7; font-size: .84rem; }
:root[lang="ur"] .gallery__count { line-height: 1.7; font-size: .76rem; letter-spacing: .08em; }
:root[lang="ur"] .gallery__more  { line-height: 1.5; }
:root[lang="ur"] .site-footer__bar { line-height: 1.7; font-size: .78rem; }
:root[lang="ur"] .identity__roles  { line-height: 1.8; font-size: .82rem; }
:root[lang="ur"] .identity__location { line-height: 1.7; font-size: .84rem; }
:root[lang="ur"] .lang__label      { line-height: 1.5; }

/* Alexandria carries its own uppercase, so the tracking that suited Latin small
   caps can come back for these labels. */
:root[lang="ur"] .eyebrow,
:root[lang="ur"] .subheading,
:root[lang="ur"] .hero__eyebrow,
:root[lang="ur"] .hero__roles,
:root[lang="ur"] .hero__position-role,
:root[lang="ur"] .tag,
:root[lang="ur"] .lineage__meta,
:root[lang="ur"] .feature-card__role,
:root[lang="ur"] .card__stat span,
:root[lang="ur"] .gallery__count { font-weight: 600; }

/* ===========================================================================
   Header fit

   The name and the line under it must stay fully readable on a phone, in every
   language. Cutting them with an ellipsis (or hiding the subtitle) was the
   previous fit tactic; wrapping inside the leftover width is the one that
   keeps the words. The action cluster never shrinks, so the brand takes what
   remains and the text wraps there instead of pushing the page sideways in RTL.
   =========================================================================== */
.brand      { flex: 0 1 auto; min-width: 0; }

@media (max-width: 1200px) {
    .site-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .65rem;
        padding-block: .45rem;
        min-width: 0;
        max-width: 100%;
    }
    /* Grid minmax(0, 1fr) gives the name a real width. Flex items sized with
       auto basis keep their max-content width, and in RTL that extra spills off
       the inline-start edge — the mark and the start of the name vanish. */
    .brand {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        min-width: 0;
        max-width: 100%;
    }
    .brand__text { min-width: 0; }
    .brand__name,
    .brand__sub {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    .brand__name { line-height: 1.3; }
    .brand__sub {
        display: block;
        letter-spacing: .06em;
        line-height: 1.35;
    }
    /* English subtitle is a short Latin line; wrapping leaves a stranded
       last word under the name. Keep it on one line and size the brand
       to that line instead of to the name. */
    :root[lang="en"] .brand__sub {
        white-space: nowrap;
        overflow-wrap: normal;
        width: max-content;
        max-width: none;
        letter-spacing: .04em;
    }
}

@media (max-width: 620px) {
    /* The globe is decoration; the code says everything the picker needs to. */
    .lang__icon { display: none; }
    .lang__button { padding-inline: .55rem; gap: .25rem; }
    .site-header__actions { gap: .35rem; }
    .theme-toggle { width: 2.2rem; height: 2.2rem; }
    .nav-toggle { padding: .4rem; }

    .brand__name { font-size: .92rem; line-height: 1.3; }
    .brand__sub  { font-size: .62rem; letter-spacing: .04em; line-height: 1.4; }

    :root[lang="ur"] .brand__name,
    :root[lang="ar"] .brand__name { font-size: .95rem; line-height: 1.4; }
    :root[lang="ur"] .brand__sub,
    :root[lang="ar"] .brand__sub  { font-size: .68rem; letter-spacing: 0; line-height: 1.45; }
}

@media (max-width: 430px) {
    .brand__name { font-size: .86rem; line-height: 1.3; }
    .brand__sub  { font-size: .6rem; letter-spacing: .03em; }

    :root[lang="ur"] .brand__name,
    :root[lang="ar"] .brand__name { font-size: .9rem; line-height: 1.4; white-space: normal; }
    :root[lang="ur"] .brand__sub,
    :root[lang="ar"] .brand__sub  { font-size: .66rem; letter-spacing: 0; white-space: normal; }
}

/* ===========================================================================
   Nastaliq word spacing

   Nastaliq words cascade down and to the left, so a word's tail reaches under
   the word that follows it. At the default spacing the two run into each other
   and read as one broken shape. A little extra room between words — and none
   between letters, which would break the joins — separates them cleanly.
   =========================================================================== */
:root[lang="ur"] {
    word-spacing: .12em;
    letter-spacing: 0;
}
:root[lang="ur"] h1, :root[lang="ur"] h2,
:root[lang="ur"] h3, :root[lang="ur"] h4 { word-spacing: .16em; letter-spacing: 0; }
:root[lang="ur"] .hero__lead,
:root[lang="ur"] .prose p,
:root[lang="ur"] .section__intro,
:root[lang="ur"] .card__body,
:root[lang="ur"] .topic__body,
:root[lang="ur"] .value__body,
:root[lang="ur"] .timeline__body p,
:root[lang="ur"] .feature-card p,
:root[lang="ur"] .lineage__card p,
:root[lang="ur"] .subheading__note { word-spacing: .14em; }
:root[lang="ur"] .pull-quote p,
:root[lang="ur"] .big-quote p,
:root[lang="ur"] .stats__note { word-spacing: .18em; }
:root[lang="ur"] .checklist__item { word-spacing: .14em; }

/* Alexandria is a normal joined-Naskh face and needs none of this. */
:root[lang="ur"] .hero__name,
:root[lang="ur"] .identity__name,
:root[lang="ur"] .brand__name,
:root[lang="ur"] .brand__sub,
:root[lang="ur"] .nav a,
:root[lang="ur"] .btn,
:root[lang="ur"] .eyebrow,
:root[lang="ur"] .subheading,
:root[lang="ur"] .tag,
:root[lang="ur"] .chip,
:root[lang="ur"] .hero__eyebrow,
:root[lang="ur"] .hero__roles,
:root[lang="ur"] .hero__position-role,
:root[lang="ur"] .hero__position-org,
:root[lang="ur"] .stat__value,
:root[lang="ur"] .stat__label,
:root[lang="ur"] .card__stat,
:root[lang="ur"] .journey__label,
:root[lang="ur"] .lineage__meta,
:root[lang="ur"] .feature-card__role,
:root[lang="ur"] .roles__place,
:root[lang="ur"] .gallery__count,
:root[lang="ur"] .site-footer__bar,
:root[lang="ur"] .identity__roles,
:root[lang="ur"] .identity__location { word-spacing: normal; }

/* Two-word navigation labels must never split across lines. */
:root[lang="ur"] .nav a,
:root[lang="ur"] .chip,
:root[lang="ur"] .tag,
:root[lang="ur"] .journey__label { white-space: nowrap; }

/* ===========================================================================
   Arabic typography

   IBM Plex Sans Arabic is a single modern family covering both scripts, so
   Arabic needs none of the two-face arrangement Urdu required: the same face
   sets the name, the headings, the prose and the interface. It also sits on a
   normal baseline, so it wants ordinary line heights rather than the doubled
   ones Nastaliq demands.
   =========================================================================== */
:root[lang="ar"] body            { line-height: 1.95; font-size: clamp(1rem, .96rem + .18vw, 1.06rem); }
:root[lang="ar"] h1, :root[lang="ar"] h2,
:root[lang="ar"] h3, :root[lang="ar"] h4 { line-height: 1.45; }

:root[lang="ar"] .hero__name     { line-height: 1.28; font-weight: 600; letter-spacing: -.01em; }
:root[lang="ar"] .identity__name { line-height: 1.35; font-weight: 600; }
:root[lang="ar"] .section__title { line-height: 1.45; }
:root[lang="ar"] .brand__name    { line-height: 1.4; font-size: 1rem; font-weight: 600; }
:root[lang="ar"] .brand__sub     { line-height: 1.5; font-size: .7rem; }

/* Arabic has no capitals, so uppercasing does nothing and the wide tracking
   meant for Latin small caps only pulls the joined letters apart. */
:root[lang="ar"] .eyebrow,
:root[lang="ar"] .subheading,
:root[lang="ar"] .hero__eyebrow,
:root[lang="ar"] .hero__roles,
:root[lang="ar"] .hero__position-role,
:root[lang="ar"] .feature-card__role,
:root[lang="ar"] .lineage__meta,
:root[lang="ar"] .card__stat span,
:root[lang="ar"] .gallery__count,
:root[lang="ar"] .tag,
:root[lang="ar"] .btn,
:root[lang="ar"] .nav a,
:root[lang="ar"] .brand__sub     { text-transform: none; letter-spacing: 0; font-weight: 600; }

:root[lang="ar"] .eyebrow        { font-size: .8rem; }
:root[lang="ar"] .subheading     { font-size: .84rem; }
:root[lang="ar"] .hero__eyebrow  { font-size: .8rem; }
:root[lang="ar"] .hero__roles    { font-size: .84rem; }
:root[lang="ar"] .nav a          { font-size: .85rem; }
:root[lang="ar"] .btn            { font-size: .82rem; }
:root[lang="ar"] .tag            { font-size: .7rem; }
:root[lang="ar"] .chip           { font-size: .86rem; }
:root[lang="ar"] .hero__position-role { font-size: .68rem; }
:root[lang="ar"] .lineage__meta  { font-size: .74rem; }
:root[lang="ar"] .feature-card__role { font-size: .72rem; }

/* An italic slant is a Latin convention; Arabic type has no italic and simply
   shears when one is forced on it. */
:root[lang="ar"] .section__title--display,
:root[lang="ar"] .value__en,
:root[lang="ar"] .pull-quote p,
:root[lang="ar"] .big-quote p,
:root[lang="ar"] .stats__note,
:root[lang="ar"] em              { font-style: normal; }

/* Two-word labels stay on one line. */
:root[lang="ar"] .nav a,
:root[lang="ar"] .tag,
:root[lang="ar"] .journey__label { white-space: nowrap; }

/* The decorative Arabic terms on the value cards are already Arabic, so the
   transliteration above them would just repeat the word. */
:root[lang="ar"] .value__ar      { font-family: "Amiri", serif; }

/* ===========================================================================
   Touch targets

   On a phone the header row is only 335px wide and completely full, which had
   squeezed the two buttons down to 35px. A finger needs more than that, so the
   row's own gap gives up the space instead.
   =========================================================================== */
@media (max-width: 620px) {
    .site-header__inner { gap: .65rem; }
    .site-header__actions { gap: .3rem; }

    .theme-toggle { width: 2.5rem; height: 2.5rem; }
    .nav-toggle   { padding: .55rem; }
    .lang__button { height: 2.5rem; }

    /* The logo link is short; give it a finger-sized band to sit in. */
    .brand { min-height: 44px; }

    /* Inline links in running text need a hit area of their own. The footer
       credit is a whole line, so extra block padding only stretches the bar. */
    .credit a { display: inline-block; padding-block: .15rem; }
    .site-footer__bar { padding-block: .65rem; }
}

/* ===========================================================================
   Phone navigation bar

   Below 820px the eight destinations move out of the header and into a bar
   pinned to the bottom of the screen, where a thumb reaches without stretching.
   Four sit in the bar; the rest open from the raised button in the middle.

   The header keeps only what identifies and configures the page: the name, the
   theme toggle and the language picker.
   =========================================================================== */
.tabbar,
.tabbar__scrim { display: none; }

@media (max-width: 820px) {
    /* The header sheds the menu button; the bar below carries navigation now. */
    .nav-toggle { display: none; }
    .nav { display: none; }

    /* Home in the bar already returns to the top. */
    .to-top { display: none; }

    /* Nothing should end up hidden under the bar. */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    .tabbar {
        display: block;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 100;
        overflow: visible;
        background: var(--header-bg);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .tabbar__list {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        margin: 0; padding: 0;
        list-style: none;
    }
    .tabbar__item { display: flex; justify-content: center; }

    .tabbar__link {
        display: flex; flex-direction: column; align-items: center; gap: .25rem;
        width: 100%;
        padding: .6rem .25rem .55rem;
        color: var(--text-soft);
        transition: color .2s var(--ease);
    }
    .tabbar__icon { width: 1.4rem; height: 1.4rem; }
    .tabbar__label {
        font-family: var(--font-ui, var(--font-body));
        font-size: .66rem;
        line-height: 1.3;
        letter-spacing: .02em;
        text-align: center;
    }
    .tabbar__link.is-active { color: var(--accent); }
    .tabbar__link.is-active .tabbar__icon { color: var(--c-gold); }

    /* The middle slot: a raised button, the way an app marks its primary action. */
    .tabbar__item--more {
        flex-direction: column; align-items: center; gap: .25rem;
        padding-bottom: .55rem;
    }
    .tabbar__more {
        display: grid; place-items: center;
        width: 3.25rem; height: 3.25rem;
        margin-top: -1.4rem;
        background: var(--strong-bg);
        color: var(--c-gold);
        border: 3px solid var(--bg);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: var(--shadow-md);
        transition: transform .25s var(--ease), background .25s var(--ease);
    }
    .tabbar__more:active { transform: scale(.94); }
    .tabbar__more .icon { grid-area: 1 / 1; width: 1.4rem; height: 1.4rem;
                          transition: opacity .25s var(--ease), transform .3s var(--ease); }
    .tabbar__more-close { opacity: 0; transform: rotate(-90deg); }
    .tabbar__more[aria-expanded="true"] { background: var(--c-gold); color: #0B3D2E; }
    .tabbar__more[aria-expanded="true"] .tabbar__more-open  { opacity: 0; transform: rotate(90deg); }
    .tabbar__more[aria-expanded="true"] .tabbar__more-close { opacity: 1; transform: none; }
    .tabbar__label--more { font-family: var(--font-ui, var(--font-body));
                           font-size: .66rem; color: var(--text-soft); }

    /* The bar stays pinned at the bottom. The extra destinations open upward
       as a card with space on every side, sitting above the raised More button. */
    .tabbar__panel {
        position: absolute;
        inset-inline: 1rem;
        bottom: calc(100% + 2.2rem);
        z-index: 1;
        padding: .85rem;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 1.15rem;
        box-shadow: 0 8px 28px rgba(11, 61, 46, .14);
        transform: translateY(10px);
        opacity: 0;
        transition: opacity .25s var(--ease), transform .25s var(--ease);
    }
    .tabbar__panel[hidden] { display: none; }
    .tabbar.is-open .tabbar__panel { opacity: 1; transform: none; }

    .tabbar__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .65rem;
        margin: 0; padding: 0; list-style: none;
    }
    /* An odd count would leave a hole, so the last tile takes the full row. */
    .tabbar__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

    .tabbar__tile {
        display: flex; flex-direction: column; align-items: center; gap: .5rem;
        min-height: 88px;
        padding: .9rem .5rem;
        background: var(--paper-base);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        color: var(--heading);
        transition: transform .2s var(--ease), border-color .2s var(--ease);
    }
    .tabbar__tile:active { transform: scale(.97); }
    .tabbar__tile.is-active { border-color: var(--c-gold); }
    .tabbar__tile-icon {
        display: grid; place-items: center;
        width: 2.4rem; height: 2.4rem;
        background: var(--tag-bg);
        border-radius: var(--radius-lg);
        color: var(--c-gold);
    }
    .tabbar__tile-icon .icon { width: 1.3rem; height: 1.3rem; }
    .tabbar__tile-label {
        font-family: var(--font-ui, var(--font-body));
        font-size: .82rem; font-weight: 600; text-align: center;
    }

    .tabbar__scrim {
        display: block;
        position: fixed; inset: 0;
        z-index: 99;
        background: rgba(11, 61, 46, .35);
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity .25s var(--ease);
    }
    .tabbar__scrim[hidden] { display: none; }
    .tabbar__scrim.is-open { opacity: 1; }
}

/* Nastaliq needs a touch more room in the tiny bar labels. */
:root[lang="ur"] .tabbar__label,
:root[lang="ur"] .tabbar__label--more { font-size: .7rem; line-height: 1.5; }
:root[lang="ur"] .tabbar__tile-label  { font-size: .86rem; line-height: 1.6; }

/* ===========================================================================
   Launch countdown
   =========================================================================== */
html.gate-page,
html.gate-page body {
    min-height: 100%;
}
html.gate-page body {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}
html.gate-page .pattern-layer {
    position: fixed;
}

.gate__bar {
    position: absolute;
    top: 1.1rem;
    inset-inline-end: 1.1rem;
    z-index: 2;
}

.gate {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5rem 1.25rem 3rem;
    text-align: center;
}
.gate__mark {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1.4rem;
    color: var(--c-gold);
}
.gate__mark svg { width: 100%; height: 100%; }

.gate__name {
    margin: 0 0 .35rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.15;
    color: var(--heading);
}
.gate__sub {
    margin: 0 0 2.2rem;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-soft);
}
.gate__lead {
    max-width: 28rem;
    margin: 1.75rem 0 0;
    color: var(--text-soft);
    font-size: .95rem;
}

.gate__timer {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .7rem;
    direction: ltr;
}
.gate__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 6.4rem;
    padding: 1.15rem 1.15rem 1rem;
    background:
        radial-gradient(120% 90% at 14% 0%, rgba(255,255,255,.14), transparent 52%),
        #141414;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.gate__num {
    font-family: var(--font-body);
    font-size: clamp(1.85rem, 5vw, 2.55rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.gate__lbl {
    margin-top: .55rem;
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255,255,255,.48);
}

:root[lang="ur"] .gate__name { font-family: var(--font-ui, var(--font-body)); line-height: 1.7; }
:root[lang="ur"] .gate__sub  { text-transform: none; letter-spacing: 0; font-size: .9rem; }
:root[lang="ur"] .gate__lbl  { text-transform: none; letter-spacing: 0; font-size: .78rem; }
:root[lang="ar"] .gate__name { font-family: var(--font-body); line-height: 1.4; }
:root[lang="ar"] .gate__sub,
:root[lang="ar"] .gate__lbl  { text-transform: none; letter-spacing: 0; }

@media (max-width: 520px) {
    .gate__timer { gap: .4rem; }
    .gate__unit { min-width: 0; flex: 1; padding: .85rem .35rem .75rem; }
}