/* css/main.css — Al-Maali cinematic scroll story.
   Layout per docs/art-direction.md. Logical properties throughout, so the Arabic (rtl) and English (ltr)
   documents mirror with no per-direction rules beyond the few custom properties in :root[dir="rtl"].
   Static-first: sections 1–8 are the complete page (no JS, reduced motion); section 9 adds the pinned /
   cross-fade presentations only under html.js-motion; section 10 is the stacked phone / portrait layout. */

/* ==========================================================================
   1. Fonts — self-hosted WOFF2 (OFL, see assets/fonts/licenses), split by script with unicode-range
   so an Arabic page never downloads Latin display faces it does not show (and vice versa).
   ========================================================================== */

@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-arabic-300.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-latin-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Tokens (docs/art-direction.md §1–§2)
   ========================================================================== */

:root {
  --ivory: #F5F0E7;
  --paper: #EFE8DA;
  --petrol: #0B3D43;
  --green: #1F4D3A;
  --sage: #A7B69A;
  --sand: #D8C5A5;
  --ochre: #C6A253;
  --rose: #C58E96;

  --ink: var(--petrol);
  --ink-2: rgba(11, 61, 67, .78);   /* small text: ≥ 5.0 : 1 on ivory and on every chapter wash (worst: family bgB) */
  --ink-3: rgba(11, 61, 67, .46);   /* decorative only: rules, numerals, inactive marks */
  --ink-dim: rgba(11, 61, 67, .18); /* not-yet-active lines in pinned chapters */
  --ink-past: rgba(11, 61, 67, .55);
  --hair: rgba(11, 61, 67, .16);
  /* the paper colour behind the page; the motion layer may set it to the current chapter tint (bgA) so the
     header band, the mobile veil and the text halo always match the canvas */
  --page-bg: var(--ivory);
  --veil: color-mix(in srgb, var(--page-bg) 86%, transparent);
  --halo: 0 0 1.1em var(--page-bg), 0 0 .3em var(--page-bg);

  /* the four-pointed star ✦ of the team chapter, as a mask so it is drawn in --accent at any size and never
     depends on a symbol font being installed */
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,0C12.8,6.4,17.6,11.2,24,12C17.6,12.8,12.8,17.6,12,24C11.2,17.6,6.4,12.8,0,12C6.4,11.2,11.2,6.4,12,0Z'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 64px);
  --col-gap: clamp(14px, 1.7vw, 28px);
  --header-space: clamp(92px, 13vh, 128px);
  /* width the fixed chapter rail takes at the inline-end edge (0 where the rail is hidden); content keeps clear */
  --rail-space: 0px;
  --pad-end: max(var(--gutter), var(--rail-space));
  --accent: var(--ochre);

  /* read by the motion layer: getComputedStyle(document.documentElement).getPropertyValue('--layout') */
  --layout: split;

  /* direction-dependent values that have no logical CSS property */
  --origin-start: left;
  --to-start: to left;
  --to-write: to right;   /* the reading direction: where a line of text is written toward */
  --far-x: 74%;
  --dir-sign: 1;

  --ar-display: "Reem Kufi", "IBM Plex Sans Arabic", "Geeza Pro", sans-serif;
  --ar-body: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", system-ui, sans-serif;
  --en-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --en-body: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;

  color-scheme: light;
}

:root[dir="rtl"] {
  --origin-start: right;
  --to-start: to right;
  --to-write: to left;
  --far-x: 26%;
  --dir-sign: -1;
}

/* Type scale per language (art direction §2). Declared on any [lang] element, so an English word inside
   the Arabic page (and the reverse) picks up its own faces. */
[lang|="ar"] {
  --font-display: var(--ar-display);
  --font-body: var(--ar-body);
  --fw-display: 500;
  --fw-hero: 600;
  --fw-h3: 500;
  --fw-stat: 600;
  --fs-hero: clamp(3.3rem, 8.6vw, 10.4rem);
  --fs-display: clamp(2.9rem, 7.4vw, 8.6rem);
  --fs-center: clamp(2.9rem, 7.4vw, 8.6rem);
  --lh-display: 1.28;
  --ls-display: 0;
  --fs-h3: clamp(1.6rem, 2.6vw, 2.6rem);
  --lh-h3: 1.42;
  --fs-lead: clamp(1.1rem, 1.35vw, 1.35rem);
  --lh-lead: 1.95;
  --fs-body: 1.05rem;
  --lh-body: 1.9;
  --fs-small: .92rem;
  --lh-small: 1.85;
  --fs-kicker: .9rem;
  --ls-kicker: 0;
  --tt-kicker: none;
  --fw-kicker: 500;
  --fs-eyebrow: .95rem;
  --ls-eyebrow: 0;
  --tt-eyebrow: none;
  --fw-eyebrow: 500;
  --fs-pull: clamp(1.7rem, 2.4vw, 2.2rem);
  --lh-pull: 1.62;
  --fs-stat: clamp(4rem, 9vw, 9rem);
  --lh-stat: 1.08;
  --measure-lead: 40ch;
  --measure-body: 46ch;
}

[lang|="en"] {
  --font-display: var(--en-display);
  --font-body: var(--en-body);
  --fw-display: 400;
  --fw-hero: 400;
  --fw-h3: 400;
  --fw-stat: 400;
  --fs-hero: clamp(3.1rem, 8.4vw, 9.6rem);
  --fs-display: clamp(3.1rem, 7vw, 8.4rem);
  --fs-center: clamp(3.1rem, 8.4vw, 9.6rem);
  --lh-display: .96;
  --ls-display: -.02em;
  --fs-h3: clamp(1.6rem, 2.6vw, 2.6rem);
  --lh-h3: 1.08;
  --fs-lead: clamp(1.05rem, 1.25vw, 1.3rem);
  --lh-lead: 1.65;
  --fs-body: 1rem;
  --lh-body: 1.7;
  --fs-small: .88rem;
  --lh-small: 1.65;
  --fs-kicker: .68rem;
  --ls-kicker: .18em;
  --tt-kicker: uppercase;
  --fw-kicker: 600;
  --fs-eyebrow: .72rem;
  --ls-eyebrow: .22em;
  --tt-eyebrow: uppercase;
  --fw-eyebrow: 600;
  --fs-pull: clamp(1.8rem, 2.6vw, 2.4rem);
  --lh-pull: 1.14;
  --fs-stat: clamp(4rem, 9vw, 9rem);
  --lh-stat: .92;
  --measure-lead: 34ch;
  --measure-body: 42ch;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

html {
  background: var(--page-bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

[lang] { font-family: var(--font-body); }

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
p, li, dd { text-wrap: pretty; }

::selection { background: var(--petrol); color: var(--ivory); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
main:focus { outline: none; }

.visually-hidden,
.values__kicker {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Static page: native smooth anchor scrolling. With the motion layer on, ScrollSmoother scrolls instead. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.js-motion) { scroll-behavior: smooth; }
}

/* ==========================================================================
   4. Fixed layers: sculpture canvas, no-WebGL fallback, grain
   ========================================================================== */

#sculpture {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* No-WebGL backdrop. figure#fallback is display:none, and display:contents under html.no-webgl so its
   parts stack independently: the image and its veil sit behind the page (z 0) like the canvas would, while
   its illustrative tag stays readable above the content (z 25), in the bottom inline-end corner. */
#fallback { display: none; }
html.no-webgl #fallback { display: contents; }
#fallback img,
#fallback::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#fallback img { object-fit: cover; opacity: .26; filter: saturate(.75); }
#fallback::after {
  content: "";
  background: linear-gradient(to bottom, color-mix(in srgb, var(--page-bg) 55%, transparent),
    color-mix(in srgb, var(--page-bg) 20%, transparent) 45%, color-mix(in srgb, var(--page-bg) 60%, transparent));
}
#fallback .fallback__tag {
  position: fixed;
  z-index: 25;
  inset-block: auto max(1rem, env(safe-area-inset-bottom));
  inset-inline: auto var(--pad-end);
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--hair);
}
html.no-webgl #sculpture { display: none; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .24 0 0 0 0 .26 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

#smooth-wrapper { position: relative; z-index: 2; }

/* ==========================================================================
   5. Chrome: skip link, header, menu, rail, preloader, cursor (all outside #smooth-wrapper)
   ========================================================================== */

.skip-link {
  position: fixed;
  z-index: 110;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-size: .9rem;
  text-decoration: none;
  translate: 0 -180%;
  transition: translate .35s var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { translate: 0 0; }

.site-header {
  position: fixed;
  z-index: 40;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: max(16px, env(safe-area-inset-top)) 16px;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -36px;
  z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--page-bg) 92%, transparent),
    color-mix(in srgb, var(--page-bg) 66%, transparent) 52%, color-mix(in srgb, var(--page-bg) 0%, transparent));
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

/* The wordmark keeps a little paper of its own. The header's own veil (above) is only 66 % opaque by the
   time it reaches the lockup, so display type scrolling past printed straight through it — most of all in
   the team chapter, whose seven subject titles sit at the inline-start edge and pass under it one by one.
   Padding and a matching negative margin, so the halo grows around the letters without moving them. */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 7px 14px;
  margin: -7px -14px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--page-bg) 86%, transparent), color-mix(in srgb, var(--page-bg) 0%, transparent));
  color: var(--ink);
  text-decoration: none;
}
.brand__ar {
  font-family: var(--ar-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
}
.brand__latin {
  font-family: var(--en-body);
  font-weight: 600;
  font-size: .5rem;
  line-height: 1;
  letter-spacing: .4em;
  margin-inline-end: -.4em;
  color: var(--ink-2);
}

.site-header__actions { display: flex; align-items: center; gap: clamp(6px, .9vw, 12px); }

.chip,
.menu__close,
.site-footer__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 1.15rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.chip:hover, .menu__close:hover, .site-footer__top:hover { border-color: var(--ink); }
.chip[lang|="en"] { letter-spacing: .06em; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  transition: border-color .35s var(--ease-out);
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn__icon path { transition: opacity .35s var(--ease-out); }
.icon-motion__flat { opacity: 0; }
.icon-btn[aria-pressed="true"] .icon-motion__wave { opacity: 0; }
.icon-btn[aria-pressed="true"] .icon-motion__flat { opacity: 1; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 1.15rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1;
}
.menu-btn__icon { display: grid; gap: 5px; width: 18px; }
.menu-btn__icon span {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .5s var(--ease-out), width .5s var(--ease-out);
}
.menu-btn__icon span:last-child { width: 62%; }
.menu-btn:hover .menu-btn__icon span:last-child { width: 100%; }
.menu-btn:focus-visible { outline-color: var(--ink); }

/* The toggles and the menu need JavaScript; without it the page is a complete static document. */
html.no-js .site-header button { display: none; }

/* Menu: full-screen <dialog> (open with showModal(); Escape closes; <form method="dialog"> closes too) */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--page-bg);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.menu::backdrop { background: color-mix(in srgb, var(--petrol) 20%, transparent); }
/* the wipe is part of the motion layer: the reader's "reduce motion" toggle turns it off too */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .menu[open] { animation: menu-in .8s var(--ease-out); }
}
@keyframes menu-in {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
.menu__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding-block: max(16px, env(safe-area-inset-top)) max(1.75rem, env(safe-area-inset-bottom));
  padding-inline: var(--gutter);
}
.menu__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.menu__x { position: relative; width: 14px; height: 14px; }
.menu__x::before, .menu__x::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  rotate: 45deg;
}
.menu__x::after { rotate: -45deg; }
.menu__nav { align-self: center; padding-block: clamp(1.5rem, 5vh, 4rem); }
.menu__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto); /* two columns of six: room for every chapter */
  column-gap: clamp(2rem, 6vw, 7rem);
}
.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  padding-block: clamp(.45rem, 1.4vh, 1rem);
  border-block-end: 1px solid var(--hair);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 3.3rem);
  line-height: 1.3;
  text-decoration: none;
}
.menu__num {
  min-width: 2.4em;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.menu__label { transition: translate .6s var(--ease-out); }
.menu__link:hover .menu__label, .menu__link:focus-visible .menu__label { translate: calc(var(--dir-sign, 1) * .35em) 0; }
[lang|="en"] .menu__link:hover .menu__label, [lang|="en"] .menu__link:focus-visible .menu__label { font-style: italic; }
/* the chapter in view: its number in ink over a short accent rule (out of flow, so no label shifts) */
.menu__link[aria-current] .menu__num { position: relative; color: var(--ink); }
.menu__link[aria-current] .menu__num::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + .3em);
  width: 1.6em;
  height: 1px;
  background: var(--accent);
}
.menu__foot { font-size: var(--fs-small); color: var(--ink-2); }
.menu__foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--hair); }

/* While the menu is open the page stays put (ScrollSmoother is paused; without it, the root stops scrolling). */
html.scroll-lock { overflow: hidden; }

/* Chapter rail (desktop): one tick per chapter at the inline-end edge; .is-active (or aria-current)
   lengthens one. */
.rail { display: none; }
.rail__tick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 44px;
  height: 44px;
  text-decoration: none;
}
.rail__line {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--ink-3);
  transition: width .6s var(--ease-out), background-color .4s var(--ease-out);
}
.rail__label {
  position: absolute;
  inset-inline-end: 42px;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  white-space: nowrap;
  font-size: .78rem;
  line-height: 1;
  color: var(--ink);
  text-shadow: var(--halo); /* legible over a passing form or card */
  opacity: 0;
  translate: calc(var(--dir-sign, 1) * 6px) 0;
  transition: opacity .4s var(--ease-out), translate .6s var(--ease-out);
  pointer-events: none;
}
.rail__num { font-size: .7rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rail__tick:hover .rail__line, .rail__tick:focus-visible .rail__line { width: 24px; background: var(--ink); }
.rail__tick.is-active .rail__line, .rail__tick[aria-current] .rail__line { width: 32px; background: var(--ink); }
.rail__tick:hover .rail__label, .rail__tick:focus-visible .rail__label,
.rail__tick.is-active .rail__label, .rail__tick[aria-current] .rail__label { opacity: 1; translate: 0 0; }
.rail__tick:focus-visible { outline-offset: -2px; }

/* Preloader: only with JavaScript (the static page must never be hidden behind it). The boot sets
   --progress (0..1) on #preloader, writes .preloader__num, and finally sets [hidden]. */
.preloader { display: none; }
html.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--gutter);
  background: var(--page-bg);
}
html.js .preloader[hidden] { display: none; }
/* the <head> script sets html.lang-pending when the reader's language is not the prerendered Arabic: the
   preloader's words wait for js/i18n.js (the wordmark is the same in both languages) */
html.lang-pending .preloader__label,
html.lang-pending .preloader__count { visibility: hidden; }
/* failsafe: even if the boot never finishes, the page is never left covered — the preloader fades out
   by itself after 8 s (the boot hides it far earlier) */
html.js .preloader { animation: preloader-failsafe .6s ease 8s forwards; }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }
.preloader__center {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.preloader .brand { align-items: center; gap: 10px; }
.preloader .brand__ar { font-size: clamp(2.8rem, 6vw, 4.6rem); }
.preloader .brand__latin { font-size: .62rem; }
.preloader__label { font-size: var(--fs-small); color: var(--ink-2); }
.preloader__meter { display: flex; align-items: flex-end; gap: clamp(1rem, 2vw, 2rem); padding-block-end: env(safe-area-inset-bottom); }
.preloader__bar { position: relative; flex: 1; height: 1px; margin-block-end: .6rem; overflow: hidden; background: var(--hair); }
.preloader__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(var(--progress, 0));
  transform-origin: var(--origin-start) 50%;
}
.preloader__count {
  display: flex;
  align-items: baseline;
  gap: .08em;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preloader__pct { font-size: .45em; color: var(--ink-2); }

/* Cursor ring: fine pointers with the motion layer on (js/chrome.js moves it with transforms and sets
   [hidden] whenever it is off). It never takes a pointer event; .is-out while the pointer is outside the window. */
.cursor {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out),
    background-color .45s var(--ease-out), border-color .45s var(--ease-out), opacity .3s var(--ease-out);
}
.cursor.is-hover {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: color-mix(in srgb, var(--petrol) 6%, transparent);
}
.cursor.is-hover.is-on-dark {
  border-color: color-mix(in srgb, var(--ivory) 80%, transparent);
  background: color-mix(in srgb, var(--ivory) 10%, transparent);
}
.cursor.is-out { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  html.js-motion .cursor:not([hidden]) { display: block; }
}

/* A chapter heading focused after a chapter link (the scroll target, not a control): no ring. */
.chapter [data-split][tabindex="-1"]:focus { outline: none; }
/* Mid language / motion switch: the fading page takes no clicks. */
html[data-switching] #smooth-content { pointer-events: none; }

/* ==========================================================================
   6. Chapter scaffolding
   ========================================================================== */

.chapter {
  position: relative;
  padding-block: clamp(7.5rem, 17vh, 12rem) clamp(5rem, 12vh, 9rem);
  overflow-x: clip;
}
/* Room for the sculpture is reserved only where one is drawn: with JS and WebGL (motion on or off).
   Without JS or without WebGL the document stays compact. */
:root.js:not(.no-webgl) .chapter { min-height: 100vh; min-height: 100svh; }

.chapter__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-content: start;
  padding-inline: var(--gutter) var(--pad-end);
}
/* Text lives on the inline-start seven columns; the sculpture owns the rest (art direction §3). */
.chapter__inner > * { grid-column: 1 / span 7; min-width: 0; }
.chapter__inner--center > * { grid-column: 1 / -1; }

.chapter__head { display: flex; flex-direction: column; align-items: flex-start; }
.chapter__head--center { align-items: center; text-align: center; }
.chapter__head--center .lead { margin-inline: auto; }

/* The big outlined chapter numeral, drifting on the sculpture side. Static offsets use `translate`, so
   ScrollSmoother's data-speed transform never fights them. */
.chapter__numeral {
  position: absolute;
  z-index: 0;
  inset-block-start: clamp(4.5rem, 11vh, 8rem);
  inset-inline-end: calc(var(--rail-space) + var(--gutter) * .5);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(9rem, 24vw, 26rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--hair);
  font-variant-numeric: lining-nums;
  pointer-events: none;
  user-select: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-block-end: clamp(1.2rem, 2.4vw, 2.2rem);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: var(--tt-eyebrow);
  line-height: 1.5;
  color: var(--ink-2);
}
.eyebrow__num { color: var(--ink); font-variant-numeric: tabular-nums; }
.eyebrow__rule { flex: none; width: clamp(26px, 3.6vw, 52px); height: 1px; background: var(--accent); }
.chapter__head--center .eyebrow { justify-content: center; }

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
}
.display .line { display: block; }
.display em { font-style: italic; }
.chapter__inner--center .display { font-size: var(--fs-center); }
/* SplitText mask:'lines' wraps each line in an overflow:clip box; give it room for diacritics above and
   descenders below so the reveal never clips Arabic marks or English g/y/p. */
[data-split] [class*="-mask"] { padding-block: .16em; margin-block: -.16em; }

.lead {
  max-width: var(--measure-lead);
  margin-block-start: clamp(1.4rem, 2.6vw, 2.4rem);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
}

.kicker {
  margin-block-end: .7rem;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  line-height: 1.5;
  color: var(--ink-2);
}

.note {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  max-width: var(--measure-body);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink-2);
}
.note::before {
  content: "";
  flex: none;
  width: 18px;
  height: 1px;
  translate: 0 -.3em;
  background: var(--accent);
}

/* Hairline rules draw in from the inline-start edge (Task 7 tweens scaleX 0 → 1). */
.rule {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: var(--origin-start) 50%;
}

.pullquote {
  position: relative;
  grid-column: 2 / span 6;
  max-width: 24ch;
  margin-block-start: clamp(5rem, 10vw, 9rem);
  padding-block-start: 2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-pull);
  line-height: var(--lh-pull);
  color: var(--ink);
  text-wrap: balance;
}
[lang|="en"] .pullquote { font-style: italic; }
.pullquote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 44px;
  height: 1px;
  background: var(--accent);
}

.media {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  padding: .32rem .75rem .36rem;
  border-radius: 999px;
  background: var(--veil);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   7. Chapters
   ========================================================================== */

/* Centred chapters put body-size text over the sculpture: a soft paper halo knocks the particles back
   behind each glyph (display type is large enough not to need it). */
.chapter__inner--center :is(.eyebrow, .lead, .note, .values__body, .values__count, .values__names, .initiative__by),
.hero__eyebrow, .hero__lead, .hero__cue { text-shadow: var(--halo); }
/* never the signature: its glyphs are painted by a clipped gradient, and a shadow would print the letters
   the pen has not reached yet */
.initiative__name { text-shadow: none; }

/* ---- 1 hero: centred; orb in the middle, title low over it, lead and cue in the bottom corners ---- */
.chapter--hero { padding-block: 0; }
/* the ghost word drifts slower than the page (data-speed): it leaves with the hero instead of trailing into the next chapter */
html.js-motion .chapter--hero { overflow: clip; }
.hero__inner {
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: auto minmax(2rem, 1fr) auto auto;
  padding-block: var(--header-space) clamp(1.25rem, 3.6svh, 2.5rem);
}
.hero__inner > * { grid-column: 1 / -1; }
.hero__eyebrow { grid-row: 1; justify-content: center; margin: 0; text-align: center; }
.hero__eyebrow::after { content: ""; flex: none; width: clamp(26px, 3.6vw, 52px); height: 1px; background: var(--accent); }
.display--hero {
  grid-row: 3;
  justify-self: center;
  font-size: var(--fs-hero);
  font-weight: var(--fw-hero);
  text-align: center;
}
.hero__foot {
  grid-row: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-block-start: clamp(1rem, 2.6svh, 2rem);
}
.hero__lead { max-width: 31ch; margin: 0; }
/* keyboard focus on the scroll cue keeps the hero's foot in full, whatever its scrubbed exit has reached (QA I24) */
.hero__foot:focus-within { opacity: 1 !important; transform: none !important; }
.hero__cue {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-decoration: none;
}
.hero__cue-line { position: relative; width: 1px; height: 64px; overflow: hidden; background: var(--hair); }
.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .hero__cue-line::after { animation: cue 2.4s var(--ease-out) infinite; }
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
.hero__ghost {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 -56%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(7rem, 25vw, 30rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--hair);
  pointer-events: none;
  user-select: none;
}
[lang|="en"] .hero__ghost { font-style: italic; font-size: clamp(7rem, 27vw, 32rem); }

/* ---- 2 school: fact cards in two staggered columns, then a pull-quote ---- */
.facts {
  --stagger: clamp(2.5rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--col-gap) * 2.2);
  row-gap: clamp(3rem, 5.5vw, 5rem);
  margin-block-start: clamp(4.5rem, 9vw, 8rem);
  padding-block-end: var(--stagger);
}
.fact { position: relative; padding-block-start: clamp(1.1rem, 1.6vw, 1.5rem); }
.fact:nth-child(even) { inset-block-start: var(--stagger); }
.fact__title {
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.fact__body { max-width: 36ch; margin-block-start: .85rem; color: var(--ink-2); }

/* ---- 3 vision: official quote, then four clauses (pinned under js-motion) ---- */
.vision__stage { margin-block-start: clamp(4rem, 8vw, 7rem); }
.vision__quote {
  position: relative;
  max-width: 52ch;
  padding-block-start: 1.4rem;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-small);
  color: var(--ink-2);
}
[lang|="en"] .vision__quote { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.9; }
.vision__quote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 44px;
  height: 1px;
  background: var(--accent);
}
.vision__track, .mission__track { position: relative; margin-block-start: clamp(2rem, 4vw, 3rem); }
.vision__clauses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--col-gap) * 2);
  row-gap: clamp(2.5rem, 4.5vw, 4rem);
}
.vision__clause { position: relative; padding-block-start: clamp(1.1rem, 1.6vw, 1.5rem); border-block-start: 1px solid var(--hair); }
.vision__kicker {
  margin-block-end: .35rem;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  color: var(--ink-2);
  transition: color .7s var(--ease-out);
}
.vision__title {
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: calc(var(--fs-h3) * 1.3);
  line-height: var(--lh-h3);
  transition: color .7s var(--ease-out);
}
.vision__body { max-width: var(--measure-body); margin-block-start: .7rem; color: var(--ink-2); }

/* thin vertical progress line (vision + mission, js-motion only): set --progress (0..1) on the stage */
.progress { display: none; position: absolute; inset-block: 0; inset-inline-start: 0; width: 1px; background: var(--hair); }
.progress__fill { position: absolute; inset: 0; background: var(--ink); transform: scaleY(var(--progress, 0)); transform-origin: 50% 0; }

/* ---- 4 mission: the official mission as a quote-lead, then six numbered pillars ---- */
.mission__quote {
  position: relative;
  max-width: 38ch;
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  padding-inline-start: clamp(1.1rem, 2vw, 1.75rem);
  border-inline-start: 1px solid var(--accent);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.55vw, 1.5rem);
  line-height: 2;
  color: var(--ink);
}
[lang|="en"] .mission__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.22; max-width: 30ch; }
.mission__stage { margin-block-start: clamp(4rem, 8vw, 7rem); }
.mission__item {
  display: grid;
  grid-template-columns: clamp(6.5rem, 10vw, 9.5rem) minmax(0, 1fr);
  column-gap: var(--col-gap);
  padding-block: clamp(1.3rem, 2.1vw, 1.9rem);
  border-block-start: 1px solid var(--hair);
}
.mission__item:last-child { border-block-end: 1px solid var(--hair); }
.mission__kicker {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-block-start: .45em;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  line-height: 1.4;
  color: var(--ink-2);
  transition: color .7s var(--ease-out);
}
.mission__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  letter-spacing: 0;
  color: var(--ink);
  transition: color .7s var(--ease-out);
}
.mission__title {
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  transition: color .7s var(--ease-out);
}
.mission__body { max-width: 48ch; margin-block-start: .7rem; color: var(--ink-2); }

/* ---- 5 values: centred; five values (stacked in one slot under js-motion) ---- */
.values__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.values__names {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .4rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.values__name { position: relative; transition: color .6s var(--ease-out); }
.values__name + .values__name::before { content: "·"; margin-inline: .85rem; color: var(--accent); }
.values__name::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.2em;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: var(--origin-start) 50%;
  transition: transform .8s var(--ease-out);
}
.values__name + .values__name::after { inset-inline-start: 1.9rem; }
.values__list {
  display: grid;
  row-gap: clamp(4rem, 9vw, 7.5rem);
  width: min(100%, 64rem);
  margin-block-start: clamp(4rem, 8vw, 6.5rem);
}
.values__item { position: relative; display: flex; flex-direction: column; align-items: center; }
.values__count {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.values__of { font-size: .82em; color: var(--ink-2); }
.values__title {
  margin-block-start: clamp(.6rem, 1.4vw, 1.1rem);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.7rem, 6.2vw, 6.8rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.values__body {
  max-width: var(--measure-body);
  margin-block-start: clamp(.9rem, 1.6vw, 1.4rem);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
}
.values__stage .note { justify-content: center; margin-inline: auto; }

/* ---- 6 numbers: one lead figure, then a 2 × 3 grid of tiles ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--col-gap) * 2);
  row-gap: clamp(2.75rem, 5vw, 4.5rem);
  margin-block-start: clamp(4rem, 8vw, 7rem);
}
.stat { position: relative; padding-block-start: clamp(1rem, 1.5vw, 1.4rem); }
.stat__figure {
  display: flex;
  align-items: baseline;
  gap: .12em;
  font-family: var(--font-display);
  font-weight: var(--fw-stat);
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.stat__suffix { font-size: .36em; font-weight: 500; letter-spacing: 0; }
/* while a counter counts (js/story.js): an invisible copy of the final value keeps the tile exactly as it rests,
   and the counting digits ride over it from its end edge, so nothing around them moves */
.stat__value.is-counting { position: relative; }
.stat__ghost { visibility: hidden; }
.stat__live { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
.stat__label {
  margin-block-start: .55rem;
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: clamp(1.2rem, 1.7vw, 1.7rem);
  line-height: 1.35;
}
[lang|="en"] .stat__label { line-height: 1.1; }
.stat__note { max-width: 32ch; margin-block-start: .5rem; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.stat--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.stat--lead .stat__figure { grid-row: 1 / span 2; font-size: clamp(5.5rem, 15vw, 15rem); }
.stat--lead .stat__label { align-self: end; font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
.stat--lead .stat__note { align-self: start; padding-block-end: .6em; }

/* ---- 7 team: the people of the school as an editorial masthead; one star of the sky per name ----
   Three layers, loudest first: the leaders set large, the administration as a quieter row of four, the
   teachers as a typographic index by subject. Every name is a .team__person[data-star] — hovering, tapping
   or focusing it lights the matching star of the constellation (js/story.js) and marks it .is-lit here. */
/* the ghost word is a folio at the foot of the chapter, on the sculpture side: it fills the paper the sky
   leaves as the reader comes out of the index, and never crosses a name */
.team__ghost {
  position: absolute;
  z-index: 0;
  inset-block: auto clamp(1.5rem, 7vh, 6rem);
  /* --pad-end, not --gutter: the ghost stops at the rail's gutter, so the active rail label never lands on
     its letters (the English "PEOPLE" is the widest, and reached the rail column at 1440) */
  inset-inline: auto var(--pad-end);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 13vw, 15rem);
  line-height: .9;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--hair);
  pointer-events: none;
  user-select: none;
}
[lang|="en"] .team__ghost { font-style: italic; text-transform: uppercase; letter-spacing: -.03em; }

/* «لكلّ نجمةٍ / في سمائنا اسم.» — Reem Kufi hangs the tanwin kasr of «نجمةٍ» far below the baseline, where
   at display size it reads as a stray mark adrift between the two lines. A little more leading, on this
   title alone, puts the mark back inside the line it belongs to. */
[lang|="ar"] #team .display { line-height: 1.38; }

.team__masthead { margin-block-start: clamp(3.5rem, 7vw, 6rem); }

/* a name, at every size: the display face, the ✦ that appears at its end when it is lit, and — in English —
   the original Arabic set small beneath it */
.team__name {
  position: relative;
  display: inline-block;
  /* justify-self: a grid item is stretched to its track by default, which would blow the box of a leader's
     or an administrator's name out to the whole column — and carry the ✦ (anchored at 100 %) and the
     English gloss out there with it. The box must be the TEXT, at every size. */
  justify-self: start;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
  transition: color .5s var(--ease-out), translate .6s var(--ease-out);
}
.team__name::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(100% + .42em);
  inset-block-start: .36em;
  width: min(.4em, 15px);
  height: min(.4em, 15px);
  background: var(--accent);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
  opacity: 0;
  scale: .4;
  rotate: -60deg;
  transition: opacity .4s var(--ease-out), scale .6s var(--ease-out), rotate .7s var(--ease-out);
  pointer-events: none;
}
.team__person:hover .team__name,
.team__person:focus-visible .team__name,
.team__person.is-lit .team__name { color: var(--ink); translate: calc(var(--dir-sign, 1) * 4px) 0; }
.team__person:hover .team__name::after,
.team__person:focus-visible .team__name::after,
.team__person.is-lit .team__name::after { opacity: 1; scale: 1; rotate: 0deg; }
.team__person:focus-visible { outline-offset: 7px; }
@media (prefers-reduced-motion: no-preference) {
  /* the teachers' mark is a rule, not a star: scaling it would stretch the underline, not twinkle it */
  html.js-motion .team__person.is-lit:not(.team__teacher) .team__name::after { animation: team-twinkle 2.6s var(--ease-out) infinite; }
}
@keyframes team-twinkle { 0%, 100% { scale: 1; } 50% { scale: 1.26; } }

.team__mask { display: block; overflow: clip; padding-block: .16em; margin-block: -.16em; }
.team__rise { display: block; }
.team__role {
  margin: 0;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  line-height: 1.5;
  color: var(--ink-2);
}
/* English only: the woman's own Arabic name, set under the Latin one. It is her name, not an ornament, so it
   is held at --ink-2 (≥ 5 : 1 on every chapter wash) and never below 14 px. `dir="rtl"` on the span would
   also drag `text-align: start` to the right edge of the box, so the alignment is pinned to the LTR line the
   gloss belongs to — the Arabic begins under the first letter of the Latin name, for leaders, administration
   and teachers alike. */
.team__native {
  display: block;
  margin-block-start: .3rem;
  font-family: var(--ar-body);
  font-size: max(.875rem, .32em);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  text-align: left;
  color: var(--ink-2);
}

/* (1) the leaders: the principal across both columns, the two vice-principals beneath her */
.team__leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--col-gap) * 2);
  row-gap: clamp(2.25rem, 4vw, 3.5rem);
}
.team__leader--first { grid-column: 1 / -1; }
/* the role absorbs the row's slack (an English role may run to two lines), so the hairline and the name of
   every person in a row sit on the same line */
.team__leader { display: grid; grid-template-rows: 1fr auto auto; }
.team__leader > .team__role { align-self: start; }
.team__hair { position: relative; inset: auto; display: block; width: 100%; margin-block: .7rem .9rem; }
.team__leader .team__name { font-size: clamp(1.45rem, 2.2vw, 2.3rem); }
.team__leader--first .team__name { font-weight: var(--fw-display); font-size: clamp(2.2rem, 4.2vw, 4.3rem); }

/* (2) the administration: five quieter columns under their own hairlines */
.team__admins {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2.25rem) var(--col-gap);
  margin-block-start: clamp(3rem, 6vw, 5rem);
}
.team__admin {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block-start: clamp(.85rem, 1.3vw, 1.2rem);
}
.team__admin > .team__role { align-self: start; }
.team__admin .team__name { margin-block-start: .5rem; font-size: clamp(1.05rem, 1.35vw, 1.35rem); }

/* (3) the teachers: an index by subject, the names flowing between delicate ochre stars */
/* the index keeps an index's measure: past ~1700 px the row rules would run on for half a screen after the
   last name in the row, so the whole block stops where the names stop reading */
.team__index { max-inline-size: min(100%, 52rem); margin-block-start: clamp(3.5rem, 7vw, 6rem); }
.team__subject {
  position: relative;
  display: grid;
  grid-template-columns: clamp(7.5rem, 13vw, 13rem) minmax(0, 1fr);
  column-gap: var(--col-gap);
  padding-block: clamp(1rem, 1.7vw, 1.55rem) clamp(1.1rem, 2vw, 1.9rem);
}
.team__field {
  display: flex;
  align-items: baseline;
  gap: .6em;
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  line-height: var(--lh-h3);
  color: var(--ink);
}
/* how many teachers the subject carries — a folio number, not a mark on the word: the ochre is kept for the
   ✦ glyphs (a graphic), and the count is set in the ink at a size that reads as a number at 1× */
.team__tally {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--ink-2);
  translate: 0 -.45em;
  font-variant-numeric: tabular-nums;
}
.team__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: .5rem;
  font-size: calc(var(--fs-body) * .98);
  line-height: 1.8;
}
.team__teacher { display: flex; align-items: baseline; }
/* The ✦ leads the name that follows it, never trails the one before. Each teacher is one flex item of the
   row, so the star can never be torn from its name: a wrapped line begins «✦ اسم» and no line ever ends on
   a hanging star. (The pair of .7rem margins keeps exactly the rhythm the trailing star had.) */
.team__teacher + .team__teacher::before {
  content: "";
  flex: none;
  width: .52em;
  height: .52em;
  margin-inline: .7rem;
  background: var(--accent);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
  opacity: .78;
}
/* A second ✦ beside a lit teacher would sit a few px from the index's own separator and read as a glitch,
   so a lit teacher is UNDERSCORED instead: an ochre rule drawn from the inline-start, the mark this site
   uses everywhere for "this one". (The shared `.is-lit` rule sets scale: 1, which draws it.) */
.team__teacher .team__name::after {
  inset-block: auto -.26em;
  inset-inline: 0 auto;
  width: 100%;
  height: 2px;
  -webkit-mask: none;
  mask: none;
  scale: 0 1;
  rotate: 0deg;
  transform-origin: var(--origin-start) 50%;
  transition: opacity .35s var(--ease-out), scale .55s var(--ease-out);
}
.team__teacher .team__name {
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 400;
  line-height: inherit;
  color: var(--ink-2);
}
/* the teachers' own gloss: .78em of the index's body size would be ~12 px — too small for a woman's name */
.team__teacher .team__native { margin-block-start: .1rem; font-size: .875rem; }
.team__note { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }

/* ---- 8 journey: head + gallery; native swipe row, or a pinned horizontal track under js-motion ---- */
.journey__stage { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.journey__head { grid-column: 1 / span 7; }
.journey__note { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.gallery {
  grid-column: 1 / -1;
  margin-block-start: clamp(3.5rem, 7vw, 6rem);
  /* full bleed to both viewport edges, except where the chapter rail sits at the inline-end edge */
  margin-inline: calc(var(--gutter) * -1) calc(var(--rail-space) - var(--pad-end));
  padding-block: .5rem 1.6rem;
  padding-inline: var(--gutter) calc(var(--pad-end) - var(--rail-space));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
}
.gallery:focus-visible { outline-offset: -4px; }
.gallery__track { display: flex; gap: clamp(18px, 2.2vw, 36px); width: max-content; }
.gallery__card { flex: none; width: clamp(264px, 29vw, 420px); scroll-snap-align: start; }
.gallery__media { aspect-ratio: 4 / 5; }
.gallery__text { padding-block-start: 1.2rem; padding-inline-end: .5rem; }
.gallery__text .kicker { display: flex; gap: .6rem; margin-block-end: .5rem; }
.gallery__num { color: var(--ink); font-variant-numeric: tabular-nums; }
.gallery__title {
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: clamp(1.4rem, 1.9vw, 1.95rem);
  line-height: var(--lh-h3);
}
.gallery__body { margin-block-start: .6rem; font-size: calc(var(--fs-body) * .94); line-height: var(--lh-small); color: var(--ink-2); }

/* ---- 9 family: an illustration, four partnership points, a closing line ---- */
.chapter--family { --accent: var(--rose); }
.family__figure { grid-column: 3 / span 5; aspect-ratio: 4 / 3; margin-block-start: clamp(3.5rem, 7vw, 6rem); }
.family__list { margin-block-start: clamp(3.5rem, 7vw, 6rem); }
.family__item {
  display: grid;
  grid-template-columns: clamp(3rem, 5vw, 4.5rem) minmax(0, 1fr);
  column-gap: var(--col-gap);
  padding-block: clamp(1.5rem, 2.4vw, 2.2rem);
  border-block-start: 1px solid var(--hair);
}
.family__item:last-child { border-block-end: 1px solid var(--hair); }
.family__num { padding-block-start: .55em; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.4; color: var(--ink); }
.family__num::after { content: ""; display: block; width: 14px; height: 1px; margin-block-start: .7rem; background: var(--accent); }
.family__title { font-family: var(--font-display); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.family__body { max-width: 48ch; margin-block-start: .7rem; color: var(--ink-2); }

/* ---- 10 horizon: centred title over the top of the globe; lead and three aim cards beneath it ---- */
.chapter--horizon .chapter__head { max-width: 60rem; justify-self: center; }
/* the lead drops below the globe only when the globe is drawn */
:root.js:not(.no-webgl) .chapter--horizon .lead { margin-block-start: clamp(10rem, 38svh, 24rem); }
.aims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-block-start: clamp(3rem, 6vw, 5rem);
}
.aim {
  position: relative;
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  border-radius: 3px;
  background: color-mix(in srgb, var(--page-bg) 74%, transparent);
}
.aim__num { margin-block-end: clamp(1.4rem, 3vw, 2.6rem); font-family: var(--font-display); font-size: 1.1rem; line-height: 1; color: var(--ink); }
.aim__title { font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(1.45rem, 2vw, 2.1rem); line-height: var(--lh-h3); }
.aim__body { margin-block-start: .8rem; font-size: calc(var(--fs-body) * .96); line-height: var(--lh-small); color: var(--ink-2); }
.aims__note { justify-self: center; justify-content: center; text-align: center; }

/* ---- 11 contact: the particle word above, closing title, lead and a huge email link ---- */
.chapter--contact { padding-block-end: clamp(3rem, 8vh, 6rem); }
/* the particle word «المعالي» fills the top of the closing chapter when the sculpture is drawn */
:root.js:not(.no-webgl) .chapter--contact { padding-block-start: 0; }
:root.js:not(.no-webgl) .chapter--contact .chapter__inner { padding-block-start: clamp(20rem, 63svh, 46rem); }
/* a clean band of paper between the email link and the coda: the closing word re-forms there, comes to rest
   and becomes the signature's stroke (js/story-state.js closingPlace, js/story.js) */
:root.js:not(.no-webgl) .chapter--contact { padding-block-end: clamp(20rem, 58vh, 38rem); }
.chapter--contact .chapter__head { max-width: 56rem; justify-self: center; }
.contact__cta { display: flex; flex-direction: column; align-items: center; margin-block-start: clamp(3rem, 6vw, 5rem); text-align: center; }
.contact__label {
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  color: var(--ink-2);
}
.contact__email {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  margin-block-start: .9rem;
  padding-block-end: .1em;
  font-family: var(--en-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 6.6vw, 7rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact__email::before, .contact__email::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--hair);
}
.contact__email::after { height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: var(--origin-start) 50%; transition: transform .9s var(--ease-out); }
.contact__email:hover::after, .contact__email:focus-visible::after { transform: scaleX(1); }
.contact__email:focus-visible { outline-offset: 8px; }

/* ---- 11 initiative: the coda — the colophon. A quiet line, the role, and the name, written out ---- */
.chapter--initiative { --sig-room: calc(100vw - var(--gutter) - var(--pad-end) - 8px); }
.initiative__stage { display: grid; justify-items: center; width: 100%; text-align: center; }
.initiative__head { width: 100%; }
/* the line is quiet on purpose: the name is the only loud thing in this chapter */
.chapter--initiative .initiative__line {
  max-width: 26ch;
  font-size: clamp(1.3rem, 2.6vw, 2.5rem);
  line-height: 1.52;
  letter-spacing: 0;
  color: var(--ink-2);
}
/* The display face is set small here — the name is the only loud thing in the chapter — and Reem Kufi's own
   .13 em word space shrinks with it, down to ~5 px, where «تبدأ بمبادرة.» reads as one word (alef then ba:
   two uprights with nothing between them). The bump is scoped to this one line; the big headings keep theirs. */
[lang|="ar"] .chapter--initiative .initiative__line { word-spacing: .1em; }
[lang|="en"] .chapter--initiative .initiative__line { line-height: 1.26; }
.initiative__by {
  margin-block-start: clamp(2.5rem, 7svh, 5rem);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  line-height: 1.5;
  color: var(--ink-2);
}
.initiative__name {
  max-width: 100%;
  margin-block-start: clamp(.7rem, 2svh, 1.4rem);
  font-family: var(--font-display);
  font-weight: var(--fw-hero);
  font-size: min(4.9rem, calc(var(--sig-room) / 12.2));
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  white-space: nowrap;
}
[lang|="en"] .initiative__name { font-size: min(4.6rem, calc(var(--sig-room) / 15)); line-height: 1.04; }
/* the gradient that writes it is clipped to these glyphs, so the box has to be the text's own box */
.initiative__ink { display: inline-block; max-width: 100%; }
.initiative__hon { font-size: .52em; font-weight: 400; }

/* The wet-ink edge: --ink-write runs 0 → 1 (the coda's pin scrubs it; 1 wherever nothing drives it, so the
   static page, reduced motion and a failed boot all show the name whole). The gradient is ochre where the
   reed pen is writing now and dries to petrol behind it; ahead of the edge the paper is still bare. The edge
   travels a little past both ends (×1.22 − 0.08) so nothing is gilded when the signature is finished. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .initiative__ink {
    --ink-edge: calc((var(--ink-write, 1) * 1.22 - 0.08) * 100%);
    /* the gold the letters are wet with: a step darker than --ochre, so the glyphs under the pen keep
       3.6 : 1 on this chapter's paper (plain --ochre reads 2.5 : 1 — below the 3 : 1 large text needs).
       The translucent falloff ahead of the edge stays the lighter gold: it carries no letter. */
    --ink-wet: #A8822F;
    background-image: linear-gradient(var(--to-write),
      var(--petrol) 0,
      var(--petrol) calc(var(--ink-edge) - 5.5%),
      var(--ink-wet) calc(var(--ink-edge) - 0.5%),
      rgba(198, 162, 83, .55) calc(var(--ink-edge) + 1.4%),
      rgba(198, 162, 83, 0) calc(var(--ink-edge) + 4.5%),
      rgba(198, 162, 83, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* the band kept clear under the name: the particle swash is placed into it (js/story.js), and without WebGL
   the inline SVG stroke takes its place */
.initiative__room {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* the flourish is fitted to the smaller of the name's measure and this room (js/story.js fit): the room
     has to be deep enough for the name's measure to be the one that wins, or the stroke shrinks to a doodle
     under a large name — on a short viewport, and in English, where the name is wider */
  min-height: clamp(7rem, 30svh, 19rem);
  margin-block-start: clamp(.5rem, 1.5svh, 1.25rem);
}
.initiative__svg { display: none; width: min(100%, 38rem); height: auto; fill: var(--petrol); opacity: .88; }
html.no-webgl .initiative__svg, html.no-js .initiative__svg { display: block; }
/* the stroke is drawn head-on-the-right, the way Arabic is written; English reads it the other way */
:root[dir="ltr"] .initiative__svg { scale: -1 1; }

/* ==========================================================================
   8. Footer (the page's contentinfo, right after <main>)
   ========================================================================== */

.site-footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 5vw, 4rem) max(1.5rem, env(safe-area-inset-bottom));
  padding-inline: var(--gutter) var(--pad-end);
}
.site-footer__details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem var(--col-gap);
  padding-block-start: clamp(2rem, 3.5vw, 3rem);
  border-block-start: 1px solid var(--hair);
}
.site-footer__item dt {
  margin-block-end: .65rem;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  color: var(--ink-2);
}
.site-footer__item dd { font-size: var(--fs-small); line-height: var(--lh-small); }
.site-footer__item a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; text-decoration-color: var(--hair); }
.site-footer__item a:hover { text-decoration-color: currentColor; }
.site-footer__disclaimer { max-width: 76ch; margin-block-start: clamp(2.5rem, 5vw, 4rem); font-size: .84rem; line-height: 1.8; color: var(--ink-2); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-start: 1.6rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--hair);
}
.site-footer__rights { font-size: .84rem; color: var(--ink-2); }
.site-footer__top { gap: .6rem; }
.site-footer__arrow { transition: translate .6s var(--ease-out); }
.site-footer__top:hover .site-footer__arrow { translate: 0 -3px; }

/* The maker's mark — the studio's signature under the school's. One link: label, «زخم+» set large, the host. */
.maker {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: .75rem clamp(1rem, 3vw, 2.5rem);
  margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem) .4rem;
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}
.maker::before, .maker::after { /* a hairline; on hover an ochre one draws over it from the writing start */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--hair);
}
.maker::after {
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: var(--from, right);
  transition: transform 1.1s var(--ease-out);
}
:root[dir="ltr"] .maker::after { --from: left; }
.maker__label {
  align-self: center;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-kicker);
  color: var(--ink-2);
  white-space: nowrap;
}
.maker__lockup { display: inline-flex; align-items: center; gap: clamp(.35rem, 1vw, .8rem); min-width: 0; }
.maker__word {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  padding-block: .08em;
  /* the ink: petrol, re-inked in ochre from the writing start on hover (a gradient clipped to the live text) */
  background-image: linear-gradient(to var(--ink-to, left), var(--ochre) 0 42%, #B8893A 48%, var(--ink) 54% 100%);
  background-size: 240% 100%;
  background-position: var(--ink-rest, 0%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.2s var(--ease-out);
}
:root[dir="rtl"] .maker__word { --ink-to: left; --ink-rest: 0%; --ink-on: 100%; }
:root[dir="ltr"] .maker__word { --ink-to: right; --ink-rest: 100%; --ink-on: 0%; }
.maker__plus {
  flex: none;
  width: clamp(1.6rem, 4.2vw, 3.6rem);
  height: auto;
  color: var(--ochre);
  rotate: var(--spin, 0deg);
  will-change: rotate;
}
.maker__alt {
  align-self: flex-end;
  margin-block-end: .9em;
  margin-inline-start: .35rem;
  font-family: var(--en-display, inherit);
  font-size: clamp(.82rem, 1.2vw, 1rem);
  letter-spacing: .04em;
  color: var(--ink-2);
  white-space: nowrap;
}
.maker__alt[lang="ar"] { font-family: var(--ar-display, inherit); letter-spacing: 0; }
.maker__go {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  padding-block-end: .9rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  white-space: nowrap;
}
.maker__host { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--en-text, inherit); letter-spacing: .02em; color: var(--ink); }
.maker__arrow { flex: none; transition: translate .7s var(--ease-out); }
.maker__tag { font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: var(--tt-kicker); }
.maker:hover .maker__word, .maker:focus-visible .maker__word { background-position: var(--ink-on) 0; }
.maker:hover::after, .maker:focus-visible::after { transform: scaleX(1); }
.maker:hover .maker__arrow, .maker:focus-visible .maker__arrow { translate: 4px -4px; }
.maker:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
@media (max-width: 767.98px) {
  .maker { grid-template-columns: 1fr; align-items: start; gap: .4rem; }
  .maker__go { flex-direction: row; align-items: center; gap: .8rem; padding-block-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .maker__word, .maker::after, .maker__arrow { transition: none; }
}

/* ==========================================================================
   9. Motion layer layouts (html.js-motion — set by the story when motion is on). Everything above is the
      complete static layout (no JS, reduced motion, motion toggle off).
      [data-pin] carries --pin: 1 where the pinned presentation fits, 0 where the story must not pin.
   ========================================================================== */

[data-pin] { --pin: 0; }
.values__stage { --pin: 1; }

/* values: one value at a time in a single slot below the star, names row at the bottom */
html.js-motion .values__stage {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  justify-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-block-start: 0;
  padding-block: var(--header-space) clamp(1.25rem, 3.5svh, 2.75rem);
}
html.js-motion:not(.no-webgl) .values__stage { grid-template-rows: minmax(0, 1fr) auto auto auto; align-content: stretch; }
html.js-motion .values__list { grid-row: 2; row-gap: 0; margin: 0; }
html.js-motion .values__item {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity .7s ease, translate 1s var(--ease-out);
}
html.js-motion .values__item.is-active { opacity: 1; translate: 0 0; }
html.js-motion .values__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.2vw, 2.25rem);
  align-items: center;
}
html.js-motion .values__count { grid-column: 1; grid-row: 1; justify-self: end; }
html.js-motion .values__title { grid-column: 2; grid-row: 1; margin-block-start: 0; font-size: clamp(2.7rem, 5.8vw, 6.4rem); }
html.js-motion .values__body { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: var(--fs-body); line-height: var(--lh-body); }
html.js-motion .values__names { order: 0; grid-row: 3; margin-block-start: clamp(1.5rem, 4svh, 3rem); }
html.js-motion .values__name.is-active { color: var(--ink); }
html.js-motion .values__name.is-active::after { transform: scaleX(1); }
html.js-motion .values__stage .note { grid-row: 4; margin-block-start: clamp(.75rem, 2svh, 1.5rem); }

@media (not (max-width: 767.98px)) and (not ((orientation: portrait) and (max-width: 1100px))) {
  .vision__stage, .mission__stage, .journey__stage, .initiative__stage { --pin: 1; }

  /* the coda, pinned: the colophon holds the screen while the signature is written. Only with a sculpture to
     write — without WebGL the stage is a still colophon in the chapter's own flow (js/story.js), and a stage
     that claimed the whole screen would push its SVG stroke past the fold. */
  html.js-motion:not(.no-webgl) .initiative__stage {
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: var(--header-space) clamp(2.5rem, 8svh, 6rem);
  }
  /* and scroll of its own after the pin lets go: the colophon rises off the top with its stroke and the ink
     dries as it goes (js/story.js), and only then the footer. Without it the page runs out of scroll in the
     middle of that flight and the last screen of the whole story is a signature sliced by the top edge. */
  html.js-motion:not(.no-webgl) .chapter--initiative { padding-block-end: 26svh; }

  /* vision: clauses stacked as large lines; the active one is ink and opens its body line */
  html.js-motion .vision__stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    margin-block-start: 0;
    padding-block: var(--header-space) clamp(1.5rem, 5svh, 3.5rem);
  }
  html.js-motion .vision__track { padding-inline-start: clamp(1.5rem, 2.6vw, 2.75rem); }
  html.js-motion .vision__clauses { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  html.js-motion .vision__stage .progress,
  html.js-motion .mission__stage .progress { display: block; }
  html.js-motion .vision__clause { padding-block: clamp(.45rem, 1.3svh, .95rem); border: 0; }
  html.js-motion .vision__kicker, html.js-motion .vision__title { color: var(--ink-dim); }
  html.js-motion .vision__clause.is-active .vision__kicker { color: var(--ink-2); }
  html.js-motion .vision__clause.is-active .vision__title { color: var(--ink); }
  html.js-motion .vision__detail,
  html.js-motion .mission__detail {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .9s var(--ease-out), opacity .6s ease;
  }
  html.js-motion .vision__detail > p,
  html.js-motion .mission__detail > p { min-height: 0; overflow: hidden; }
  html.js-motion .vision__clause.is-active .vision__detail,
  html.js-motion .mission__item.is-active .mission__detail { grid-template-rows: 1fr; opacity: 1; }
  html.js-motion .vision__stage .note { margin-block-start: clamp(1.5rem, 4svh, 3rem); }

  /* mission: six pillars; earlier ones stay at 55 %, later ones at 18 %, the active one is ink + body */
  html.js-motion .mission__stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    margin-block-start: 0;
    padding-block: var(--header-space) clamp(1.5rem, 5svh, 3.5rem);
  }
  html.js-motion .mission__track { margin-block-start: 0; padding-inline-start: clamp(1.5rem, 2.6vw, 2.75rem); }
  html.js-motion .mission__item { padding-block: clamp(.4rem, 1.15svh, .85rem); border: 0; }
  html.js-motion .mission__title { font-size: clamp(1.35rem, 2.1vw, 2.2rem); }
  html.js-motion .mission__kicker, html.js-motion .mission__num, html.js-motion .mission__title { color: var(--ink-dim); }
  html.js-motion .mission__item.is-past :is(.mission__kicker, .mission__num, .mission__title) { color: var(--ink-past); }
  html.js-motion .mission__item.is-active .mission__kicker { color: var(--ink-2); }
  html.js-motion .mission__item.is-active :is(.mission__num, .mission__title) { color: var(--ink); }
  html.js-motion .mission__stage .note { margin-block-start: clamp(1.25rem, 3.5svh, 2.5rem); }

  /* journey: head fixed at inline-start, the track moves under a clipped window on the far side */
  html.js-motion .journey__stage {
    /* its own 12 columns (the same tracks as .chapter__inner): the story pins this stage inside a
       ScrollTrigger pin-spacer, where `subgrid` would have no parent grid to follow */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
    height: 100vh;
    height: 100svh;
    min-height: 34rem;
    padding-block: var(--header-space) clamp(1.25rem, 4svh, 3rem);
  }
  html.js-motion .journey__head { grid-column: 1 / span 5; grid-row: 1; }
  html.js-motion .journey__head .display { font-size: clamp(2.4rem, 4.2vw, 5rem); } /* room for the atom above it */
  html.js-motion .journey__head .lead { font-size: var(--fs-body); line-height: var(--lh-body); }
  html.js-motion .gallery {
    grid-column: 6 / -1;
    grid-row: 1;
    margin: 0;
    margin-inline-end: calc(var(--rail-space) - var(--pad-end));
    padding: 0;
    overflow: clip;
    scroll-snap-type: none;
    -webkit-mask-image: linear-gradient(var(--to-start), transparent, #000 2.5rem, #000 calc(100% - 4.5rem), transparent);
    mask-image: linear-gradient(var(--to-start), transparent, #000 2.5rem, #000 calc(100% - 4.5rem), transparent);
  }
  /* the first card starts past the fade; the last one ends before the rail */
  html.js-motion .gallery__track { padding-inline: 5.5rem var(--gutter); }
  html.js-motion .gallery__card { width: clamp(270px, 24vw, 380px); }
  html.js-motion .gallery__media { max-height: 46svh; }

}

@media (min-width: 1024px) and (not ((orientation: portrait) and (max-width: 1100px))) {
  :root { --rail-space: calc(var(--gutter) * .4 + 58px); }
  .rail {
    position: fixed;
    z-index: 30;
    inset-inline-end: 0;
    inset-block-start: 50%;
    display: block;
    translate: 0 -50%;
    padding-inline-end: calc(var(--gutter) * .4);
  }
}

/* ==========================================================================
   10. Stacked layout — phones and portrait tablets (the same query as STACKED_QUERY in js/render.js).
       The sculpture takes the top ~45 % of the viewport; text flows below it on a soft ivory veil.
   ========================================================================== */

@media (max-width: 767.98px), (orientation: portrait) and (max-width: 1100px) {
  :root { --layout: stacked; --header-space: 84px; }
  [lang|="ar"] {
    --fs-display: clamp(2.5rem, calc((100vw - 2 * var(--gutter)) / 6.9), 5.6rem);
    --fs-center: var(--fs-display);
    --fs-hero: clamp(2.9rem, calc((100vw - 2 * var(--gutter)) / 4.5), 7.2rem);
    --fs-stat: clamp(2.9rem, 12.5vw, 6rem);
  }
  [lang|="en"] {
    --fs-display: clamp(2.3rem, calc((100vw - 2 * var(--gutter)) / 7.5), 5.6rem);
    --fs-center: var(--fs-display);
    --fs-hero: clamp(2.5rem, calc((100vw - 2 * var(--gutter)) / 7), 6.4rem);
    --fs-stat: clamp(2.9rem, 12.5vw, 6rem);
  }

  .chapter { padding-block: clamp(5.5rem, 13vh, 7rem) clamp(3.5rem, 9vh, 5.5rem); }
  .chapter--hero { padding-block: 0; }
  .chapter__inner { display: block; }
  /* with a sculpture: its top ~45 % of the viewport per chapter (the band the form lives in, js/story.js
     measureBand), text below on the ivory veil (the hero is its own full-viewport composition, below). The
     veil holds under the last line and feathers out in the inner's own end padding; no chapter padding follows,
     so the next chapter's band — where the next form rides in (story-state.js RIDE) — starts right there. */
  :root.js:not(.no-webgl) .chapter { padding-block: 0; }
  :root.js:not(.no-webgl) .chapter__inner:not(.hero__inner) {
    padding-block: 45svh 2.5rem;
    /* feathered at both ends: the veil's lower edge never slices the sculpture as the next chapter morphs in */
    background: linear-gradient(to bottom, transparent calc(45svh - 4.5rem), var(--veil) calc(45svh - .75rem), var(--veil) calc(100% - 2.5rem), transparent);
  }
  /* the header row on opaque paper: scrolling copy never reads through the chips (the form stays below it) */
  .site-header::before { inset: 0 0 -24px; background: linear-gradient(to bottom, var(--page-bg) 0 70%, color-mix(in srgb, var(--page-bg) 0%, transparent)); }
  .chapter__numeral { inset-block-start: calc(var(--header-space) - 1rem); font-size: clamp(7rem, 34vw, 16rem); }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    padding-block: var(--header-space) clamp(1.25rem, 4svh, 2.5rem);
  }
  /* the veil feathers out at the hero's foot: no straight edge where the school's band rides in */
  :root.js:not(.no-webgl) .hero__inner { background: linear-gradient(to bottom, transparent 44svh, var(--veil) 54svh, var(--veil) calc(100% - 5rem), transparent); }
  .hero__inner > * { grid-column: 1; }
  .hero__eyebrow { font-size: .8rem; }
  .hero__eyebrow::after, .hero__eyebrow .eyebrow__rule { display: none; }
  .hero__foot { flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
  .hero__lead { max-width: 34ch; }
  .hero__cue-line { height: 40px; }
  .hero__ghost { inset-block-start: 26%; font-size: clamp(6rem, 34vw, 16rem); }

  .facts { grid-template-columns: minmax(0, 1fr); padding-block-end: 0; }
  .fact:nth-child(even) { inset-block-start: 0; }
  .pullquote { max-width: none; }

  .vision__clauses { grid-template-columns: minmax(0, 1fr); }
  .mission__item { grid-template-columns: minmax(0, 1fr); row-gap: .6rem; }
  .mission__kicker { flex-direction: row; align-items: baseline; gap: .75rem; padding-block-start: 0; }

  .stats { column-gap: var(--col-gap); }
  .stat--lead { display: block; }
  .stat--lead .stat__figure { font-size: clamp(4.5rem, 24vw, 9rem); }

  /* team: the sky keeps the band at the top, the names run below it in one column.
     A denser veil than the rest of the page: twenty-six small, high-contrast star cores drifting under the
     names read as speckle on a phone where a palm silhouette reads as an illustration, so below the band the
     sky is held back to paper texture and the names keep the page. */
  #team .chapter__inner { --veil: color-mix(in srgb, var(--page-bg) 95%, transparent); }
  .team__ghost { inset-block-end: clamp(1rem, 4vh, 3rem); inset-inline-end: calc(var(--gutter) * -.35); font-size: clamp(4rem, 27vw, 12rem); }
  .team__leaders { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.75rem, 6vw, 2.5rem); }
  .team__leader--first .team__name { font-size: clamp(2rem, 9.6vw, 3.4rem); }
  .team__leader .team__name { font-size: clamp(1.25rem, 5.8vw, 1.9rem); }
  .team__admins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem var(--col-gap); }
  .team__admin .team__name { font-size: clamp(1rem, 4.4vw, 1.25rem); }
  .team__subject { grid-template-columns: minmax(0, 1fr); row-gap: .5rem; padding-block: 1.15rem 1.4rem; }
  .team__field { font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .team__teacher + .team__teacher::before { margin-inline: .55rem; }

  .gallery__card { width: min(78vw, 420px); }
  /* the stage is a subgrid of .chapter__inner, which is display:block here: flow head and gallery as blocks
     (as a subgrid of nothing the gallery collapsed to one narrow implicit column) */
  .journey__stage { display: block; }

  .family__figure { max-width: 32rem; }
  .family__item { grid-template-columns: 2.6rem minmax(0, 1fr); }

  /* the lead follows its title (the desktop drop below the globe has the same selector, so this one must too) */
  .chapter--horizon .lead,
  :root.js:not(.no-webgl) .chapter--horizon .lead { margin-block-start: clamp(1.4rem, 2.6vw, 2.4rem); }
  .aims { grid-template-columns: minmax(0, 1fr); margin-block-start: clamp(3rem, 8vw, 5rem); }

  /* the coda on a phone: the swash rides the measured band at the top like every other form, so the room
     under the name is only needed when there is no sculpture to put there */
  :root.js:not(.no-webgl) .initiative__room { min-height: 0; margin-block-start: 0; }
  .initiative__by { margin-block-start: clamp(1.75rem, 5svh, 3rem); }
  .chapter--initiative { --sig-room: calc(100vw - 2 * var(--gutter) - 4px); }
  /* the signature is the last thing on the page: no reserved screen under it — but enough paper after it
     for the colophon and its stroke to leave the screen together (js/story.js), since the footer alone
     leaves no room for them to rest under the header */
  :root.js:not(.no-webgl) .chapter--initiative {
    min-height: auto;
    /* a screen of paper less the footer's own height: just enough scroll for the colophon to rise off the
       top with its stroke while the footer comes up behind it (tests/e2e/coda.spec.mjs holds it to that) */
    padding-block-end: max(42svh, calc(100svh - 23rem));
  }
  /* and no veil over the whole chapter — it would wash the stroke out of its band for the whole chapter
     (the values stage does the same): the colophon carries a veil of its own, for the moment it scrolls
     over the stroke */
  :root.js:not(.no-webgl) .chapter--initiative .chapter__inner { background: none; }
  :root.js:not(.no-webgl) .initiative__stage { position: relative; isolation: isolate; }
  :root.js:not(.no-webgl) .initiative__stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: -3.5rem -2.5rem;
    inset-inline: calc(var(--gutter) * -1) calc(var(--pad-end) * -1);
    background: linear-gradient(to bottom, transparent, var(--veil) 3.5rem, var(--veil) calc(100% - 2.5rem), transparent);
    pointer-events: none;
  }

  :root.js:not(.no-webgl) .chapter--contact .chapter__inner { padding-block-start: 50svh; }
  /* the paper between the email link and the coda — far shorter here than on the split layout, where the
     closing word also comes to rest in it: on a phone the word re-forms in the coda's own band instead
     (js/story.js closing), so a long band here would only be a screen of paper to scroll past between the
     email and the signature. The email link rides on its own paper as it passes. */
  :root.js:not(.no-webgl) .chapter--contact { padding-block-end: 6svh; }
  :root.js:not(.no-webgl) .contact__cta {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: .85rem 1.4rem 1rem;
    border-radius: 1.4rem;
    background: var(--page-bg);
  }

  html.js-motion .values__stage { grid-template-rows: auto auto auto; }
  /* pinned values: no veil behind the stage — the chapter's veil would sit behind it for the whole pin and wash
     the star out (the star keeps the top 45svh, the value text sits below it with its halo); the head keeps a
     veil of its own, full bleed, for the moment it scrolls over the star */
  :root.js-motion:not(.no-webgl) .chapter--values .chapter__inner:not(.hero__inner) { background: none; }
  :root.js-motion:not(.no-webgl) .chapter--values .chapter__head { position: relative; isolation: isolate; }
  :root.js-motion:not(.no-webgl) .chapter--values .chapter__head::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: -3.75rem -3rem;
    inset-inline: calc(var(--gutter) * -1) calc(var(--pad-end) * -1);
    background: linear-gradient(to bottom, transparent, var(--veil) 3.75rem, var(--veil) calc(100% - 3rem), transparent);
    pointer-events: none;
  }
  html.js-motion:not(.no-webgl) .values__stage {
    grid-template-rows: auto auto auto;
    align-content: end;
    padding-block: 45svh clamp(1rem, 3svh, 2rem);
  }
  html.js-motion .values__list { grid-row: 1; }
  html.js-motion .values__names { grid-row: 2; }
  html.js-motion .values__stage .note { grid-row: 3; }
  html.js-motion .values__item { display: flex; }
  html.js-motion .values__count { margin-block-end: .6rem; }
  html.js-motion .values__title { font-size: var(--fs-display); }

  .site-footer__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
}

@media (max-width: 599.98px) {
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu-btn { padding-inline: 0; width: 44px; justify-content: center; }
  .chip { padding-inline: .9rem; }
  .site-footer__details { grid-template-columns: minmax(0, 1fr); }
  /* with the closing word drawn, a two-column footer leaves it room above the footer at the page end */
  :root.js:not(.no-webgl) .site-footer__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root.js:not(.no-webgl) .site-footer__details a[href^="mailto:"] { font-size: clamp(.72rem, 3.3vw, .9rem); } /* one line in a column */
  .stat__note { font-size: .84rem; }
}

/* ==========================================================================
   11. Chapter tints (art direction §7). The canvas paints them when WebGL runs; without JS or without
       WebGL the same washes are drawn here, on the sculpture side of each chapter.
   ========================================================================== */

#hero { --tint-a: #F5F0E7; --tint-b: #E9E1CF; --wash-x: 50%; }
#school { --tint-a: #F4EFE4; --tint-b: #E7DBC4; }
#vision { --tint-a: #F2F1E6; --tint-b: #DCE3CF; }
#mission { --tint-a: #F5EEE1; --tint-b: #EBDABB; }
#values { --tint-a: #F6F0E3; --tint-b: #EEDDBA; --wash-x: 50%; }
#numbers { --tint-a: #F2EFE7; --tint-b: #DADFD9; }
#team { --tint-a: #F2F0E9; --tint-b: #D9DFE3; }
#journey { --tint-a: #F3F1E7; --tint-b: #E0E4D3; }
#family { --tint-a: #F6EFE9; --tint-b: #EDD6D6; }
#horizon { --tint-a: #F1F1EB; --tint-b: #D6E1DF; --wash-x: 50%; }
#contact { --tint-a: #F5F0E7; --tint-b: #E8DECA; --wash-x: 50%; }
#initiative { --tint-a: #F6F1E4; --tint-b: #E4D4B6; --wash-x: 50%; }

html.no-js .chapter,
html.no-webgl .chapter {
  background-image: radial-gradient(ellipse 58% 44% at var(--wash-x, var(--far-x)) 46%, var(--tint-b), transparent 100%);
}

/* ==========================================================================
   12. Reduced motion
   ========================================================================== */

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