:root {
  /* Brand Manual 2026 palette: one accent on warm neutrals. */
  --ari-orange: #DB5921;      /* emblem, rules, bars, focus, full-bleed cards */
  --ari-ember: #AE3E15;       /* backgrounds carrying white text at any size */
  --ari-ember-dark: #8E3211;  /* hover/active state of Ember */
  --ari-apricot: #E8845A;     /* orange text, on dark grounds only */
  --ari-clay: #F1CBB2;        /* peach light ground */
  --ari-ink: #1A1714;         /* primary text, dark ground */
  --ari-umber: #3E2E24;       /* quiet dark ground */
  --ari-warm-grey: #605A54;   /* secondary text on light */
  --ari-light-grey: #D9D9D4;  /* rules and dividers only */
  --ari-sand: #F2E7DA;        /* warm light ground */
  --ari-off-white: #EBEEE6;   /* primary light ground */

  /* "Never orange text on white": text that used to be orange is Ink on light
     grounds and Apricot on dark ones (dark containers override this token). */
  --ari-text-accent: var(--ari-ink);

  --ari-color-bg: #ffffff;
  --ari-color-surface: var(--ari-off-white);
  --ari-color-surface-2: var(--ari-sand);
  --ari-color-text: var(--ari-ink);
  --ari-color-text-muted: var(--ari-warm-grey);
  --ari-color-accent: var(--ari-orange);
  --ari-color-accent-strong: var(--ari-ember);
  --ari-color-accent-2: var(--ari-apricot);
  --ari-color-dark: var(--ari-ink);
  --ari-color-dark-2: var(--ari-umber);
  --ari-color-line: var(--ari-umber);
  --ari-color-border: var(--ari-light-grey);

  /* --ari-font-heading / --ari-font-body are resolved per html[lang] in fonts.css */

  --ari-text-xs: 0.8125rem; /* manual: never below 13px on web */
  --ari-text-sm: 0.875rem;
  --ari-text-base: 1rem;
  --ari-text-lg: 1.125rem;
  --ari-text-xl: 1.5rem;
  --ari-text-2xl: 2rem;
  --ari-text-hero: clamp(2.25rem, 5vw, 2.75rem); /* Headline 44px max */

  /* Editorial type scale: ARI-Typography-Reference.md §4. Sizes in px
     converted to rem (16px base); Arabic runs ~1.1x Latin with looser
     line-height (ascenders/descenders travel further, sits lower on the
     line). New components should read sizes from here rather than
     hardcoding px, so the scale stays enforceable in one place. */
  /* Brand Manual 2026 web scale (size / line height, px):
     Headline 44/48, Heading 28/31, Lead 22/33, Body 18/29, Quote 28/33,
     Statistic 64, Label 13/20, Meta/caption 14/18. Never below 13px. */
  --ari-scale-h1: clamp(2.25rem, 4vw, 2.75rem);
  --ari-scale-h1-mobile: clamp(2rem, 6vw, 2.25rem);
  --ari-scale-h2: 1.75rem;
  --ari-scale-h2-mobile: 1.5rem;
  --ari-scale-h3: 1.375rem;
  --ari-scale-h3-mobile: 1.25rem;
  --ari-scale-lead: 1.375rem;
  --ari-scale-body: 1.125rem;
  --ari-scale-body-mobile: 1.0625rem;
  --ari-scale-quote: 1.75rem;
  --ari-scale-stat: 4rem;
  --ari-scale-label: 0.8125rem;
  --ari-scale-label-mobile: 0.8125rem;
  --ari-scale-caption: 0.875rem;
  --ari-scale-caption-mobile: 0.8125rem;
  --ari-scale-footnote: 0.875rem;
  --ari-scale-footnote-mobile: 0.8125rem;

  /* Display leading 1.05-1.1 (Latin) / 1.15 (Arabic); text 1.6 / 1.8. */
  --ari-leading-h1-latin: 1.09;
  --ari-leading-h1-arabic: 1.15;
  --ari-leading-h2-latin: 1.11;
  --ari-leading-h2-arabic: 1.15;
  --ari-leading-h3-latin: 1.3;
  --ari-leading-h3-arabic: 1.5;
  --ari-leading-lead-latin: 1.5;
  --ari-leading-lead-arabic: 1.8;
  --ari-leading-body-latin: 1.6;
  --ari-leading-body-arabic: 1.8;
  --ari-leading-quote-latin: 1.18;
  --ari-leading-quote-arabic: 1.15;
  --ari-leading-label-latin: 1.54;
  --ari-leading-label-arabic: 1.6;
  --ari-leading-caption-latin: 1.29;
  --ari-leading-caption-arabic: 1.6;
  --ari-leading-footnote-latin: 1.29;
  --ari-leading-footnote-arabic: 1.8;

  --ari-space-1: 0.25rem;
  --ari-space-2: 0.5rem;
  --ari-space-3: 0.75rem;
  --ari-space-4: 1rem;
  --ari-space-5: 1.5rem;
  --ari-space-6: 2rem;
  --ari-space-7: 3rem;
  --ari-space-8: 4rem;

  --ari-size-header-utility: 52px;
  --ari-size-header-main: 74px;
  --ari-max-width: 1240px;
  --ari-radius-sm: 0; /* brand manual: square corners */
  --ari-radius: 0;
  --ari-radius-lg: 0;
  --ari-shadow: none; /* brand manual: no drop shadows */

  --ari-breakpoint-sm: 640px;
  --ari-breakpoint-md: 900px;
  --ari-breakpoint-lg: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Prevent the browser from adjusting scrollY when the sticky header changes
     height (scroll anchoring). Without this, the header toggling at the threshold
     scroll position causes a feedback loop: header shrinks → browser pulls scrollY
     down → scrollY crosses restore threshold → header expands → repeat (shake). */
  overflow-anchor: none;
  /* Ensure no inherited or plugin-injected width constraint shrinks the root */
  width: 100%;
  /* overflow-x: clip (not hidden) clips at the viewport boundary WITHOUT creating
     a scroll container.  This is critical for mobile: position:fixed elements that
     extend beyond the viewport edge (e.g. the closed drawer at translateX(-100%))
     are visually clipped rather than causing a scrollable overflow region.
     Unlike overflow-x: hidden, clip does not promote <html> into a scroll container,
     so position:fixed coordinates remain viewport-relative on all mobile browsers. */
  overflow-x: clip;
  /* Stop the iOS elastic-scroll rubber-band from panning the page sideways */
  overscroll-behavior-x: none;
  /* Stop vertical overscroll (trackpad rubber-band on macOS, pull-to-refresh
     on mobile) from revealing the default white canvas above/below the page */
  overscroll-behavior-y: none;
  background-color: var(--ari-ink); /* matches .site-footer's dark brand bg, so the rubber-band area isn't a white flash */
}

body {
  margin: 0;
  width: 100%;          /* never narrower than the viewport */
  overflow-x: clip;     /* prevent horizontal scroll; clip (not hidden) avoids BFC scroll-container */
  overscroll-behavior-x: none; /* belt-and-suspenders: block horizontal elastic scroll */
  overscroll-behavior-y: none;
  color: var(--ari-color-text);
  background: var(--ari-color-bg);
  font-family: var(--ari-font-body);
  font-size: var(--ari-text-base);
  line-height: 1.6;
}

[lang="ar"] body { line-height: 1.8; }

/* Brand: emphasis by weight only (one SemiBold clause), never italics. */
em,
i,
cite,
.wp-block-quote cite {
  font-style: normal;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Brand: no orange words; links show the accent as an underline instead.
   Zero-specificity pseudo so component rules (buttons, cards, logo) win. */
a:where(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-color: var(--ari-color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.skip-link {
  /* Hide off-screen on the vertical axis, not horizontal: a physical
     `left: -9999px` is invisible to LTR scrollWidth calculations, but RTL
     documents treat negative-x as their natural overflow direction, so the
     same offset becomes 9999px of real, scrollable document overflow:
     exactly the bug this file must not reintroduce. Vertical offset has no
     direction-dependent scrollable-overflow behavior, so it's safe in both. */
  position: absolute;
  top: -9999px;
  left: 1rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border-radius: 0;
  z-index: 1000;
}

.shell {
  width: min(var(--ari-max-width), 92vw);
  margin-inline: auto;
}

.section {
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.section--dark {
  background: linear-gradient(180deg, var(--ari-ink) 0%, var(--ari-ink) 100%);
  color: #ffffff;
  --ari-text-accent: var(--ari-apricot);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section__title {
  margin: 0;
  font-family: var(--ari-font-heading);
  font-size: clamp(1.625rem, 2vw, 2.25rem);
  letter-spacing: -0.02em;
}

.section__title--light {
  color: #ffffff;
}

.site-main {
  min-height: 55vh;
}

.u-container {
  width: min(var(--ari-max-width), 92vw);
  margin-inline: auto;
}

.u-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ari-space-4);
}

.u-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ari-space-4);
}

.u-muted {
  color: var(--ari-color-text-muted);
}

.u-accent {
  color: var(--ari-text-accent);
}

.u-pill {
  border-radius: 0;
}

.u-card {
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  background: #fff;
  box-shadow: var(--ari-shadow);
  --ari-text-accent: var(--ari-ink);
}

.u-section-dark {
  background: linear-gradient(180deg, var(--ari-color-dark-2) 0%, var(--ari-ink) 100%);
  color: #fff;
  --ari-text-accent: var(--ari-apricot);
}

@media (max-width: 900px) {
  .section {
    padding: 2.5rem 0;
  }

  .u-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .u-grid-2,
  .u-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Justified text across all prose / body-copy areas ──────────────────
   No hyphens:auto here; it splits words across lines with a hyphen, which
   reads as truncated text. overflow-wrap only breaks words that would
   otherwise overflow (e.g. long URLs), not normal copy.
   Works in both LTR (EN/FR) and RTL (AR): the browser handles both correctly.
   ─────────────────────────────────────────────────────────────────────── */

/* Core WordPress content (the_content / wp_kses_post wrappers) */
.entry-content p,
.entry-content li,

/* Publication single */
.pub-content p,
.pub-exec-summary__body p,

/* Podcast series */
.pcast-desc__body p,
.pcast-desc__body li,

/* People single: bio */
.people-bio__body p,

/* Single video */
.svid-desc p,

/* Program / area of work */
.prog-body p,
.prog-body li,

/* Job posting */
.sjob-content p,
.sjob-content li,
.jobs-policy__body p,

/* About Us page */
.about-who__prose p,
.about-mission-text p,
.about-memoriam__text p,
.about-funding__lead,
.about-governance__intro,
.about-pillar__desc,
.about-shifts__text,

/* Fellowship detail */
.fd-intro p,
.fd-full-content p,

/* Student Prize page */
.sprize-intro p,

/* Annual Fellowships */
.fellowships-about__body p,

/* Archive page headers (description paragraphs) */
.archive-header__desc,
.ev-header__desc,
.experts-header__desc,
.vid-header__desc,
.jobs-header__desc,

/* Newsletter page */
.nl-hero__desc {
  text-align: start; /* brand: ragged, never justified */
  overflow-wrap: break-word;
}

/* Brand: text is ragged, never justified, including editor-set alignment. */
[style*="text-align: justify"],
[style*="text-align:justify"],
.has-text-align-justify {
  text-align: start !important;
}

/* Form controls take the page font (Barlow / Thmanyah) instead of the browser default. */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
}

/* Brand: square corners on core block buttons too (classic-theme-styles gives them 9999px). */
.wp-block-button__link,
.wp-element-button {
  border-radius: 0;
}