/* The Syrian Sovereign Fund Register.
 *
 * Design: الصرح — the institution. A sovereign-institutional face: warm paper
 * stock, deep sovereign green, heritage gold. The register speaks about a state
 * fund and now carries itself with the same formality, so that a finding rated
 * `official` and a finding rated `inferred` are read with the same seriousness.
 *
 * It is an homage, not a costume. The register is independent of the Fund and
 * says so in its own masthead; it borrows an institutional visual language, and
 * takes none of the Fund's identity marks.
 *
 * Five rules govern this file.
 *
 * 1. Every inline-axis property is logical — margin-inline, padding-inline,
 *    border-inline-start, inset-inline, text-align: start/end. The register is
 *    Arabic-first and RTL by default; English flips the whole document with one
 *    `dir` attribute and no override block. A `margin-left` here is a bug that
 *    only shows up in one of the two languages.
 *
 * 2. The five confidence hues are reserved. --official / --reported /
 *    --inferred / --disputed / --struck mean a rating and nothing else. The
 *    sovereign green is `official` — the colour of the party speaking for
 *    itself — so the chrome is gold: rules, eyebrows, active states, the mark.
 *    Gold is never a rating; green is never decoration.
 *
 * 3. Rating is never carried by hue alone. Each of the five is also a fill
 *    pattern in `.mark` — solid, half, dashed, split, crossed — so the notation
 *    survives colour blindness, greyscale printing and a bad screen. Nothing
 *    else on the page is a small filled square.
 *
 * 4. Radius and shadow are structural, not ornamental. A card is rounded
 *    because it is a surface lifted off the sheet; a rule, a mark and a table
 *    are square, because they are the record and the record is not a widget.
 *
 * 5. `main` is a three-track grid — full-bleed gutter, content, gutter. Every
 *    child lands in `content` by default; a section that wants the whole width
 *    says `.bleed` and re-centres its own `.wrap`. That is the only escape
 *    hatch, so no template has to reason about page margins.
 */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-400-arabic.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-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-400-latin.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/ibm-plex-sans-arabic-600-arabic.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-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-600-latin.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 Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.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;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* The institutional ground: warm paper, not white and not the cold bond of
   * the earlier design. The sheet is the *darker* cream — the Fund's own pages
   * sit on this tone and keep the lighter one for bands and surfaces, so the
   * register does the same and reads as the same stock. */
  --paper:      #eeeadf;
  --band:       #f5f3ec;   /* the lighter band, between two sheets */
  --face:       #fbf9f3;   /* a record's own surface — lifts off both */
  --sunk:       #e7e2d3;   /* what a surface drops to: a row under the
                              pointer, a table head, a hit in the palette */
  --void:       #d3ccb9;   /* the hatch that fills a line nobody wrote on */

  /* The sovereign ground, for full-bleed sections, the masthead and the foot. */
  --deep:       #002623;
  --deep-base:  #064239;
  --emerald:    #427f77;

  /* The ink for the green surfaces — masthead, hero, footer. Kept separate from
   * `--ink`/`--band` because those describe type on paper, and a reader editing
   * the paper palette should not be able to silently change the contrast on the
   * green by doing so. */
  --on-deep:      #eeeadf;
  --on-deep-soft: rgb(238 234 223 / 78%);
  --on-deep-dim:  rgb(238 234 223 / 68%);

  /* Ink is neutral, not green-tinted. The green belongs to the sovereign
   * surfaces; type that borrows a little of it makes the paper read as tinted
   * rather than as paper, which is the opposite of what the tint was for. */
  --ink:        #161616;
  --ink-soft:   #3c3a3b;
  --ink-faint:  #67635f;   /* 4.9:1 on the darkest light surface — this tier
                              carries chips, stat labels and table heads, which
                              are all small text and need the 4.5:1 floor */
  --rule:       #cfc8b6;   /* a record's rule — visible, not a hairline */
  --rule-soft:  #ddd6c5;   /* the sheet's own ruling */

  /* Heritage gold is the chrome, and only the chrome. The display gold is for
   * rules, marks and surfaces; the ink gold is the same hue pulled down until
   * it carries body text on cream at 4.5:1. */
  --gold:       #b7a678;
  --gold-warm:  #c9b98c;
  --stamp-ink:  #6f5c2e;

  --official:   #064239;
  --reported:   #1e4c8a;
  --inferred:   #7f5f0e;
  --disputed:   #6c2f84;
  --struck:     #5f6567;

  /* One spacing scale. Every structural gap is a step on it, so the page has a
   * rhythm rather than a collection of one-off values. */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2.25rem; --s7: 3.5rem;  --s8: 5rem;
  --s9: 7rem;

  /* Radius: a surface is rounded, a record is not. See rule 4. */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;

  /* Long, soft, green-tinted, and cast almost entirely below the surface by a
   * heavy negative spread: the shadow of a sheet lying on a table, not the
   * drop shadow of a widget floating over one. */
  --shadow-sm: 0 10px 22px -14px rgb(0 38 35 / 30%);
  --shadow-md: 0 18px 40px -22px rgb(0 38 35 / 34%);
  --shadow-lg: 0 30px 60px -30px rgb(0 38 35 / 38%);

  /* Motion. Chrome answers at once, because a reader is waiting on it; anything
   * that moves a surface takes its time, on the long in-out curve. */
  --dur-chrome: 200ms;
  --dur-move:   600ms;
  --ease:       cubic-bezier(0.65, 0, 0.35, 1);

  /* The masthead is fixed, so anything an in-page link targets has to be pushed
   * clear of it or the reader arrives with the entry's own title hidden behind
   * the bar. One number — the bar's height plus the gap it floats on — used by
   * the scroll offset, by the space `main` reserves at the top of a page, and
   * by the dossier sidebar's sticky top. */
  --masthead-h: 4.25rem;
  --float-gap: 0.75rem;   /* how far clear of the viewport the plate sits */

  /* The ground. A girih lattice, drawn here in the register's own gold and
   * laid under every band that wants to read as a surface rather than as a
   * colour — the Fund runs the same tile under nearly every section of its
   * own site, heavier on the green and barely there on the paper. Declared
   * once, so a band asks for `--lattice` and never carries its own copy of
   * the drawing. The geometry is the shared vernacular; the file is not the
   * Fund's.
   *
   * It is laid at architectural scale, not at screen scale. The tile used to
   * run at 112px, where an octagram the size of a thumbnail reads as mesh —
   * a texture laid over the page rather than a ground the page sits on. The
   * Fund lays the same class of tile at 220–340px and changes the size from
   * section to section, which is most of why theirs reads as masonry;
   * `--lattice-size` is that number and every band sets its own below.
   *
   * The stroke is in viewBox units and therefore scales with the tile, so it
   * comes down from 1.1 to 0.32 — about a pixel and a half at these sizes. A
   * line that thickened threefold along with the drawing would be a wall, not
   * a watermark. */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none' stroke='%23b7a678' stroke-width='0.32'%3E%3Cpath d='M8.2 8.2h39.6v39.6H8.2z'/%3E%3Cpath d='M28 0l28 28-28 28L0 28z'/%3E%3Cpath d='M0 0l8.2 8.2M56 0l-8.2 8.2M56 56l-8.2-8.2M0 56l8.2-8.2'/%3E%3C/svg%3E");
  --lattice-size: 300px;
  /* The same drawing, stroked for paper. On cream a hairline at a few per cent
   * is not a ground, it is nothing: the Fund's paper sections read as
   * patterned because its tile is drawn in a heavy line (about 4px at the size
   * it is laid) and then taken down to 4–10% opacity. This is that weight —
   * 0.95 viewBox units, about 4px at 240px — for the paper bands only; the
   * green keeps the hairline, where the same gold already reads. */
  --lattice-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none' stroke='%23b7a678' stroke-width='0.95'%3E%3Cpath d='M8.2 8.2h39.6v39.6H8.2z'/%3E%3Cpath d='M28 0l28 28-28 28L0 28z'/%3E%3Cpath d='M0 0l8.2 8.2M56 0l-8.2 8.2M56 56l-8.2-8.2M0 56l8.2-8.2'/%3E%3C/svg%3E");

  --measure: 64ch;
  --gutter: 6.5rem;        /* the entry's own margin column, inside a row */
  --content: 80rem;        /* the page's content track */

  /* The band rhythm, and the only two vertical values a section may use. An
   * institutional page is mostly air — but the home page carries eight sections
   * and the air was reading as absence rather than as formality: two 8rem
   * paddings between two bands is a screen and a half of nothing on a laptop.
   * A band still opens further from its neighbour than a heading in the flow
   * does, so the bigger break is still the band; both are simply tighter. */
  --section:    clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
  --section-sm: clamp(2rem, 1.7rem + 1.4vw, 2.75rem);

  /* One family carries both scripts. A kufic display face gave the headings a
   * lot of character and cost Arabic readers legibility at every size; the type
   * is plain on purpose, and the institutional weight comes from scale, colour
   * and space rather than from a display cut. */
  --font-body: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Dates and figures that may carry Arabic words. Monospacing an Arabic month
   * name pulls its letters apart and breaks the join, so that side falls back
   * to the body face; hostnames and IDs stay in the mono either way. */
  --font-data: var(--font-mono);
}
/* Arabic typography. These rules undo Latin mannerisms — small caps, letter
 * spacing, a mono face — that do not survive the transition to an Arabic
 * script. The register has one language, so every one of them always applies;
 * they stay keyed on the `lang` the document carries rather than being folded
 * into the rules above, so that what is a property of the script still reads
 * as one. */
html[lang="ar"] { --font-data: var(--font-body); }

/* --- the label voice, in Arabic -------------------------------------------
 * Undoing the Latin mannerisms left a hole. Every small classifying label on
 * this site — the eyebrow over a heading, the kicker over a card title, the
 * name of a facet, the label under a figure, a table head — is drawn in Latin
 * as tracked uppercase mono, and roughly two dozen `html[lang="ar"]` blocks
 * take all three of those away, because none of them survives the script: you
 * cannot track an Arabic word without breaking its joins, there is no case to
 * raise, and monospacing pulls the letters apart.
 *
 * What was left behind was a negation and nothing in its place. In the
 * register's own language an eyebrow, a stat label and a card kicker were all
 * simply small grey text at slightly different sizes, and the tier that in
 * English is unmistakably *a label* read as body copy set small. That is the
 * language the site is actually published in, so the design system was, in
 * practice, invisible.
 *
 * Arabic's own device for this is weight, which is what the Fund uses: its
 * labels are set bold and coloured, never tracked. So the label voice here is
 * 600 — the heavier of the two cuts the register vendors — and the two tiers
 * stay apart by the colour each already carries:
 *
 *   the classifier   what kind of record this is        --stamp-ink, the oxide
 *   the instrument   what field or control this names   --ink-faint, the grey
 *
 * Declared once, for the whole tier, rather than as a `font-weight` added to
 * two dozen existing blocks — a voice is one decision, and it should be
 * possible to change it back in one place. */
html[lang="ar"] :is(
  .eyebrow, .hero__eyebrow, .card__kicker,
  .disclosure__question-label, .q__eyebrow,
  .stat__l, .facet__name, .facets__count, .palette__group,
  .cv__label, .facts dt, .sidebar dt, .disclosure__meta dt, th
) { font-weight: 600; }

/* Author styles and the UA stylesheet's [hidden] rule have equal specificity,
 * so any class that sets its own `display` beats it. The filtering in app.js
 * toggles `hidden`, so it has to win outright. */
[hidden] { display: none !important; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Both durations are tokens, so a reader who has asked for stillness gets it
   * from one place rather than from a rule per component. */
  :root { --dur-chrome: 1ms; --dur-move: 1ms; }
}

/* The page is a column, and `main` takes the slack. A dossier with two
 * relations is a short page, and without this the green footer lands halfway
 * down the window with paper below it — which reads as the page having failed
 * to load rather than as a short record. */
body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1;
}
main { flex: 1 0 auto; }
.footer { flex: none; }

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

/* A Latin company name or a dollar figure inside an Arabic sentence, and an
 * Arabic name inside an English one, both reorder wrongly without this. */
.mono, code, .num, .src__out { unicode-bidi: plaintext; font-family: var(--font-mono); }
/* A published date is an Arabic month name, not a figure: it belongs in the
 * body face, because monospacing an Arabic word breaks the letter joins. */
.src__date { white-space: nowrap; font-size: 0.85rem; color: var(--ink-soft); }
[dir="ltr"], [dir="rtl"], [dir="auto"] { unicode-bidi: isolate; }

/* Selected text is picked out in the chrome gold, on both the paper and the
 * green. Deep green and not white as the knocked-out ink: white over 55% gold
 * on cream does not clear 4.5:1, and a selection a reader cannot read is a
 * strange thing to hand them. */
::selection { background: rgb(183 166 120 / 55%); color: var(--deep); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--gold); }
a:hover { text-decoration-color: var(--stamp-ink); }
:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 2px; border-radius: var(--r-sm); }

.wrap { max-width: var(--content); margin-inline: auto; padding-inline: 1.5rem; }

/* Every anchor target clears the sticky masthead. `:where()` so it carries no
 * specificity and any element can still set its own offset. */
:where([id]) { scroll-margin-block-start: calc(var(--masthead-h) + var(--s4)); }

.skip {
  position: absolute; inset-block-start: -3rem; inset-inline-start: 1rem;
  background: var(--deep); color: var(--on-deep); padding: 0.5rem 0.9rem; z-index: 60;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.skip:focus { inset-block-start: 0; }

/* The one texture in the design. A field nobody wrote on is ruled through, so
 * it cannot be mistaken for a field still waiting to be filled. */
.is-void, [data-status="absent"] .void, .void {
  background-image: repeating-linear-gradient(
    -45deg, var(--void) 0 2px, transparent 2px 7px);
}

/* --- the rating mark ------------------------------------------------------
 * The register's notation, and the one thing a reader has to learn. Five
 * states, five fills, in the colour of the rating:
 *
 *   ■  official   the party said it itself
 *   ▄  reported   somebody credible carried it
 *   ▢  inferred   nobody said it; it fits the pattern
 *   ◪  disputed   two sources, no winner
 *   ⊠  struck     withdrawn
 *
 * Drawn with gradients rather than glyphs so it never depends on a font, and
 * with 45deg angles rather than inline ones so it looks the same in both
 * scripts. Square, per rule 4: this is the record, not a surface. */
.mark {
  --m: 0.68em;
  display: inline-block; flex: none;
  inline-size: var(--m); block-size: var(--m);
  border: 1.4px solid currentColor;
  vertical-align: -0.08em;
  background-repeat: no-repeat;
}
/* In the map's key the rating sits on the wrapper, not on the mark itself, so
 * each fill answers to either. */
[data-conf="official"] > .mark, [data-conf="reported"] > .mark, [data-conf="inferred"] > .mark,
[data-conf="disputed"] > .mark, [data-conf="struck"] > .mark { border-color: currentColor; }
[data-conf="official"] > .mark { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 100%; }
[data-conf="reported"] > .mark { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 50%; background-position: 0 100%; }
[data-conf="inferred"] > .mark { border-style: dashed; }
[data-conf="disputed"] > .mark { background-image: linear-gradient(45deg, currentColor 0 50%, transparent 50%); background-size: 100% 100%; }
[data-conf="struck"] > .mark {
  background-image:
    linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
  background-size: 100% 100%;
}

.mark[data-conf="official"],  .mark[data-status="published"] { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 100%; }
.mark[data-conf="reported"],  .mark[data-status="partial"]   { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 50%; background-position: 0 100%; }
.mark[data-conf="inferred"],  .mark[data-status="unknown"]   { border-style: dashed; }
.mark[data-conf="disputed"] { background-image: linear-gradient(45deg, currentColor 0 50%, transparent 50%); background-size: 100% 100%; }
.mark[data-conf="struck"],    .mark[data-status="absent"]    {
  background-image:
    linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
  background-size: 100% 100%;
}

/* --- masthead -------------------------------------------------------------
 * A sovereign green bar carrying the wordmark, the primary nav and the tools —
 * one line, floating clear of the page. It was two stacked rows, branding over
 * tabs, which took a seventh of a laptop viewport on every page and kept it.
 *
 * Two states, and the page decides which. Over a section that opens on the
 * green — the home hero, a dossier head — the unscrolled bar is a gradient with
 * no edge, so the first screen is the record and not the chrome. Everywhere
 * else, and the moment the page scrolls, it draws itself in to a plate: the
 * content track's width, a hairline, and the ground behind it blurred. The
 * blur is what keeps a line of Arabic from reading through the bar; the tint
 * alone is not enough on the paper.
 *
 * It is fixed rather than sticky because the plate has to leave the page's
 * ground visible along its sides — a sticky bar is in the flow and cannot. */

.masthead {
  position: fixed; z-index: 50;
  inset-block-start: var(--float-gap);
  inset-inline: 0; margin-inline: auto;
  inline-size: min(96%, var(--content));
  background: color-mix(in srgb, var(--deep) 88%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--on-deep);
  border: 1px solid rgb(183 166 120 / 20%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transition:
    inset-block-start var(--dur-chrome) var(--ease),
    inline-size var(--dur-chrome) var(--ease),
    background var(--dur-chrome) ease,
    border-color var(--dur-chrome) ease,
    border-radius var(--dur-chrome) ease;
}
/* The unscrolled state, on the pages whose first section is green. `:has()` is
 * the whole mechanism: nothing has to tell the layout which pages those are,
 * and a page that later opens on paper gets the plate without an edit here. */
body:has(main > .hero:first-child) .masthead:not([data-scrolled]),
body:has(main > .bleed--deep:first-child) .masthead:not([data-scrolled]) {
  inset-block-start: 0;
  inline-size: 100%;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: linear-gradient(
    to bottom, rgb(0 38 35 / 88%) 0%, rgb(0 38 35 / 55%) 55%, rgb(0 38 35 / 0%) 100%);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  max-inline-size: var(--content); margin-inline: auto;
  padding: 0.55rem 1.1rem;
}
body:has(main > .hero:first-child) .masthead:not([data-scrolled]) .masthead__inner,
body:has(main > .bleed--deep:first-child) .masthead:not([data-scrolled]) .masthead__inner {
  padding-inline: 1.5rem;   /* the `.wrap` gutter: the bar aligns to the content */
}
.masthead__tools { display: flex; gap: 0.5rem; align-items: center; }

.wordmark { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }

/* The mark. A gold-ruled square holding the register's initials — the
 * register's own frame, and deliberately not a seal, a crest or anything the
 * Fund would recognise as its own. */
.wordmark__mark {
  display: grid; place-items: center;
  inline-size: 2.3rem; block-size: 2.3rem;
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  color: var(--gold-warm);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  transition: background var(--dur-chrome) ease, color var(--dur-chrome) ease;
}
.wordmark:hover .wordmark__mark { background: var(--gold); color: var(--deep); }

.wordmark__text {
  display: grid; gap: 0.1rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.08rem; line-height: 1.25; letter-spacing: -0.005em;
  color: #fff;
}
/* The line that keeps the homage from reading as the thing it borrows from.
 * It is in the masthead, not the footer, because that is where a reader who
 * arrived from a search result looks to find out whose site this is. */
.wordmark__note {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); opacity: 0.9;
}
html[lang="ar"] .wordmark__note {
  font-family: var(--font-body); font-size: 0.74rem;
  letter-spacing: 0; text-transform: none;
}

.btn {
  font: inherit; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.04em; padding: 0.42rem 0.85rem;
  background: rgb(255 255 255 / 6%); color: var(--on-deep);
  border: 1px solid rgb(238 234 223 / 30%); border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-chrome) ease, border-color var(--dur-chrome) ease, color var(--dur-chrome) ease;
}
html[lang="ar"] .btn { letter-spacing: 0; font-family: var(--font-body); font-size: 0.82rem; }
.btn:hover { border-color: var(--gold); color: #fff; }
.btn--icon { padding-inline: 0.6rem; }
.btn--search { display: inline-flex; align-items: center; gap: 0.4rem; }

/* --- the language control -------------------------------------------------
 * A globe, the code of the language in use, and a menu naming both languages.
 * The code is the *current* language, not the target: a reader who has landed
 * on a page they cannot read should not have to work out whether "English"
 * means "you are reading English" or "press for English".
 */
.langpick { position: relative; }
.btn--lang { display: inline-flex; align-items: center; gap: 0.5rem; }
.globe { flex: none; inline-size: 1rem; block-size: 1rem; }
.langpick__code {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-family: var(--font-mono);
}

.langpick__menu {
  position: absolute; inset-block-start: calc(100% + 0.4rem); inset-inline-end: 0;
  z-index: 60; min-inline-size: 9rem;
  display: grid;
  background: var(--deep-base);
  border: 1px solid rgb(183 166 120 / 35%);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 0.3rem;
}
.langpick__item {
  font: inherit; font-size: 0.9rem; text-align: start;
  padding: 0.5rem 0.7rem; cursor: pointer;
  background: transparent; color: var(--on-deep);
  border: 0; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.langpick__item:hover { background: rgb(255 255 255 / 8%); color: #fff; }
/* The language in use is marked, not hidden: the menu says where you are as
 * well as where you can go. A tick and not a colour, so it survives a
 * greyscale screen. */
.langpick__item[aria-checked="true"] { color: var(--gold-warm); font-weight: 600; }
.langpick__item[aria-checked="true"]::after { content: "✓"; font-size: 0.85em; }


/* The indexes, in the bar itself. An open index is named in gold and ruled
 * under in gold; the rule grows out from the link's own start edge on hover,
 * so the bar answers the pointer without moving anything. */
.nav {
  display: flex; align-items: center; gap: 0.1rem;
  margin-inline-start: auto;
}
.nav a {
  position: relative;
  padding: 0.5rem 0.7rem; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--on-deep-soft); text-decoration: none; white-space: nowrap;
  border-radius: var(--r-sm);
  transition: color var(--dur-chrome) ease;
}
html[lang="ar"] .nav a { font-family: var(--font-body); font-size: 0.9rem; }
.nav a::after {
  content: ""; position: absolute;
  inset-inline-start: 0.7rem; inset-block-end: 0.22rem;
  inline-size: 0; block-size: 2px; border-radius: var(--r-pill);
  background: var(--gold);
  transition: inline-size var(--dur-chrome) var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { inline-size: calc(100% - 1.4rem); }
.nav a[aria-current] { color: var(--gold-warm); }
.nav a[aria-current]::after { inline-size: calc(100% - 1.4rem); }

/* The menu control, and the panel it opens. Six indexes do not fit beside the
 * wordmark on a phone, and a bar that wrapped to a second row there would be
 * the thing this bar was rebuilt to stop doing. So below the breakpoint the
 * nav leaves the bar and becomes a plate under it, in the bar's own palette. */
.btn--menu { display: none; padding-inline: 0.55rem; line-height: 0; }
.btn--menu svg path {
  transform-box: view-box; transform-origin: 12px 12px;
  transition: transform var(--dur-chrome) var(--ease), opacity var(--dur-chrome) ease;
}
.masthead[data-menu-open] .menu-icon__top { transform: translateY(5px) rotate(45deg); }
.masthead[data-menu-open] .menu-icon__mid { opacity: 0; }
.masthead[data-menu-open] .menu-icon__bot { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 62rem) {
  .btn--menu { display: inline-flex; align-items: center; }
  /* The nav leaves the flow below the breakpoint, and it was the thing holding
   * the tools against the far end of the bar. */
  .masthead__tools { margin-inline-start: auto; }
  .nav {
    position: absolute; inset-block-start: calc(100% + 0.45rem); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.4rem;
    background: color-mix(in srgb, var(--deep-base) 94%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgb(183 166 120 / 22%);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .masthead:not([data-menu-open]) .nav { display: none; }
  .nav a { padding: 0.7rem 0.8rem; font-size: 0.95rem; }
  /* In the panel the same link is a full-width row, and a rule running the
   * width of one row reads as a divider between two. The open index is marked
   * on its start edge instead — same gold, a mark and not a line. */
  .nav a::after {
    inset-block: 0.35rem; inset-inline-start: 0;
    inline-size: 0; block-size: auto;
  }
  .nav a:hover::after, .nav a[aria-current]::after { inline-size: 2px; }
  .nav a:hover, .nav a[aria-current] { background: rgb(255 255 255 / 7%); }
}
/* The wordmark's own line is what sets the bar's height, and on a phone the
 * search label is the first thing that can go. */
@media (max-width: 34rem) {
  :root { --masthead-h: 3.9rem; }
  .btn--search .btn__label { display: none; }
  .btn--search { padding-inline: 0.6rem; }
  .wordmark__text { font-size: 0.98rem; }
  .wordmark__mark { inline-size: 2rem; block-size: 2rem; font-size: 0.7rem; }
}

/* --- page furniture -------------------------------------------------------
 * Three tracks: a gutter, the content column, a gutter. Everything lands in
 * `content`; a `.bleed` section takes all three and re-centres its own `.wrap`.
 * See rule 5. */
main {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.5rem, 1fr)
    [content-start] minmax(0, var(--content)) [content-end]
    minmax(1.5rem, 1fr) [full-end];
  /* The bar is fixed, so the page has to reserve its height. A page that opens
   * on a green section does not: that section is what the bar floats over, and
   * it pads its own first line clear of it instead. */
  padding-block: calc(var(--masthead-h) + var(--s4)) var(--s8);
  row-gap: 0;
  /* `main` is the flex child that takes the slack on a page shorter than the
   * window, so on a short dossier it is taller than its own rows. A grid's
   * default `align-content: stretch` would then hand that slack to the rows
   * and pull every heading away from its section; the slack belongs at the
   * bottom, above the footer, which is where `start` leaves it. */
  align-content: start;
}
/* `:where()` and not `:is()`: this is the default placement, and everything
 * that wants a different track — a full-bleed band — has to be able to say so
 * without a specificity fight. `:is()` would take the specificity of its most
 * specific branch and quietly outrank them. */
:where(main) > * {
  grid-column: content;
  padding-inline: 1.5rem;
}
main > .bleed { grid-column: full; padding-inline: 0; }

main:has(> .hero:first-child), main:has(> .bleed--deep:first-child) { padding-block-start: 0; }
/* …and a page that *closes* on a band does not: the band already carries its
 * own vertical padding, and the page's would print a strip of bare paper
 * between it and the footer. */
main:has(> .bleed:last-child) { padding-block-end: 0; }

/* --- full-bleed bands ----------------------------------------------------- */

/* Four grounds, and a page alternates between them rather than running on one.
 * Two greens: the deep is the page's own ground — the hero and the foot — and
 * the base is the mid-tone that carries a band in the middle of the flow, so
 * two green sections on one page never read as the same section interrupted. */
.bleed { position: relative; }
.bleed--deep { background: var(--deep); color: var(--on-deep); }
.bleed--base { background: var(--deep-base); color: var(--on-deep); }
.bleed--band { background: var(--band); }
.bleed--deep a, .bleed--base a { color: inherit; text-decoration-color: var(--gold); }
.bleed--deep h2, .bleed--base h2 { color: #fff; }
.bleed--deep .eyebrow, .bleed--base .eyebrow { color: var(--gold); }
/* The lattice, at a few per cent — enough that the ground reads as a surface,
 * not enough to be a pattern a reader has to look past. The page's own green
 * (a head, the hero, the foot) always carries it. A band in the middle of the
 * flow carries it only when it says `.bleed--lattice`, because down the
 * Fund's own page the pattern alternates, section by section — patterned,
 * plain, patterned — on paper and on the mid-green alike, so a change of
 * section reads as a change of ground and not only of heading. Which sections
 * take it is the page's decision, made in its template; the home page starts
 * the run at the ownership tree. */
.hero::before, .bleed--deep::before, .bleed--lattice::before, .footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--lattice);
  background-size: var(--lattice-size);
  opacity: 0.08;
}
/* The tile is sized to the weight of the ground under it: widest on the page's
 * own sovereign green, a step down on the mid-tone that carries a section in
 * the flow, narrower again on the paper — where the same gold is a texture
 * rather than a whisper, and a 340px octagram would be furniture. Paper also
 * takes the heavier-stroked tile, since a hairline on cream is nothing. */
.hero::before, .bleed--deep::before { --lattice-size: 340px; }
.bleed--base.bleed--lattice::before { --lattice-size: 300px; }
.footer::before { --lattice-size: 240px; }
.bleed--lattice:not(.bleed--deep, .bleed--base)::before {
  --lattice-size: 240px; background-image: var(--lattice-paper); opacity: 0.12;
}
.footer { position: relative; overflow: hidden; }
/* The lattice is a positioned pseudo-element, so it paints above in-flow
 * content unless the content is positioned too. */
.hero > .wrap, .bleed--deep > .wrap, .bleed--lattice > .wrap, .footer > * { position: relative; }

.bleed > .wrap { padding-block: var(--section); }
/* A band sets its own top space. The heading inside it must not add the flow's
 * on top, or the band opens with two section gaps stacked. */
.bleed > .wrap > :first-child { margin-block-start: 0; }

/* --- the hero -------------------------------------------------------------
 * The Fund opens on what it intends to build. The register opens on what the
 * Fund has not published — same weight of type, opposite content. */

.hero {
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--emerald) 30%, transparent) 0%, transparent 62%),
    radial-gradient(90% 80% at 10% 100%, rgb(183 166 120 / 16%) 0%, transparent 60%),
    var(--deep);
  color: var(--on-deep);
  overflow: hidden;
}
/* The bar floats over the hero, so the hero's own top padding carries it: the
 * first line of the title clears the bar at every width, and the green behind
 * it runs all the way to the top of the window. */
.hero > .wrap {
  padding-block:
    calc(var(--masthead-h) + clamp(1.5rem, 0.8rem + 3.5vw, 3.5rem))
    clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: grid; gap: var(--s5);
}
/* The leadership roster continues the hero on the same green, held off the
 * hero's text by a hairline of gold rather than by a second band. The hero's
 * own wrap carries the masthead clearance, so the roster sets its own. */
.hero > .hero__roster {
  display: block;
  padding-block: var(--section);
  border-block-start: 1px solid rgb(183 166 120 / 25%);
}
.hero__roster > :first-child { margin-block-start: 0; }

.hero__eyebrow {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin: 0;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
html[lang="ar"] .hero__eyebrow { font-family: var(--font-body); font-size: 0.86rem; letter-spacing: 0; text-transform: none; }
.hero__eyebrow::before {
  content: ""; inline-size: 2.2rem; block-size: 1px; background: var(--gold); flex: none;
}
.hero__title {
  margin: 0; max-inline-size: 20ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.6rem);
  line-height: 1.12; letter-spacing: -0.02em; color: #fff;
}
html[lang="ar"] .hero__title { line-height: 1.35; letter-spacing: 0; max-inline-size: 18ch; }
.hero__title em { font-style: normal; color: var(--gold-warm); }
.hero__lede {
  margin: 0; max-inline-size: 56ch;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
  color: var(--on-deep-soft);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: var(--s2); }

/* Two actions and a clear order between them: read the absences, or take the
 * data. Nothing else on the page is a filled button. */
.action {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.4rem; border-radius: var(--r-pill);
  font-size: 0.94rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  transition:
    background var(--dur-chrome) ease, color var(--dur-chrome) ease,
    border-color var(--dur-chrome) ease, transform var(--dur-move) var(--ease);
}
.action--primary { background: var(--gold); color: var(--deep); }
.action--primary:hover { background: var(--gold-warm); transform: translateY(-2px); }
.action--ghost { border-color: rgb(183 166 120 / 45%); color: var(--on-deep); }
.action--ghost:hover { background: rgb(255 255 255 / 8%); border-color: var(--gold); transform: translateY(-2px); }

/* The hero's own footing: the register's size, stated as three figures on the
 * green so the first screen carries a fact and not only a claim. */
.hero__figures {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7);
  margin-block-start: var(--s5); padding-block-start: var(--s5);
  border-block-start: 1px solid rgb(183 166 120 / 26%);
}
.hero__figure { display: grid; gap: 0.15rem; }
.hero__figure b {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 500;
  line-height: 1; letter-spacing: -0.03em; color: var(--gold-warm);
  font-variant-numeric: tabular-nums;
}
.hero__figure span { font-size: 0.82rem; color: var(--on-deep-dim); }

/* --- headings -------------------------------------------------------------
 * Large, and unruled. Every section head used to carry a full-width rule with
 * a gold tick sitting on its start edge — a stamp repeated eight times down
 * the home page, and the loudest single thing a template can do. The Fund
 * draws no such rule: its own section heads are simply set big, with air
 * above them and no line under them, and what reads as institutional is the
 * scale. So the rule is gone and the type has gone up to take over the work.
 * A heading twice the size of the text beneath it does not need a line to
 * announce that it is a heading.
 *
 * The tick stays. It was the full-width rule that read as a stamp, not the
 * mark at the head of it — on its own, hanging off the heading's start edge
 * with nothing running out of it, it is the register's one ornament and the
 * chrome gold doing the job the chrome gold is for.
 *
 * The weight stays at 600. The register vendors two cuts of the body face and
 * 600 is the heavier; asking for 700 would hand an Arabic reader a synthesised
 * bold, which thickens the strokes without redrawing the joins. */

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.02em; margin-block: 0 0.6rem;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.4; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.4rem); margin-block-end: 1rem; }
/* The space above a section head is the whole of what separates one section
 * from the next now that no rule does, so it takes the band's own step rather
 * than the smaller one it took when the line was carrying that job. */
h2 {
  position: relative;
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.9rem);
  margin-block: var(--section) var(--s5);
  /* What the tick hangs in. It used to be the gap between the heading and its
   * rule; with the rule gone it is the gap between the heading and the mark. */
  padding-block-end: var(--s3);
}
h2::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 2.6rem; block-size: 3px; background: var(--gold);
}
h3 { font-size: 1.15rem; }
p { margin-block: 0 0.95rem; max-inline-size: var(--measure); }

/* The section label, above its heading. Gold, tracked, small. */
.eyebrow {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stamp-ink); font-weight: 500;
  margin-block: var(--section-sm) var(--s3);
}
html[lang="ar"] .eyebrow { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.82rem; }
.eyebrow + h2 { margin-block-start: 0; }

.lede { font-size: 1.1rem; color: var(--ink-soft); max-inline-size: var(--measure); }

/* --- prose ------------------------------------------------------------------
 * A field the schema marks `markdown`, rendered: paragraphs, emphasis, a list,
 * a link. The wrapper is the field, so its own outer margins come off and the
 * blocks inside it space themselves — which is what lets `.lede` and a bare
 * note keep the rhythm they had when each was one paragraph.
 *
 * Nothing here restyles the marks themselves: a link is the site's link, a
 * bullet is the site's bullet. The formatting is the author's, and a record
 * that can shout in bold is a record that can overclaim quietly. */
/* The wrapper stands in for the paragraph the field used to be, so it carries
 * what that paragraph carried: the reading measure, and the space after it.
 * The blocks inside it inherit the measure from the wrapper instead of each
 * setting their own, or a list and the paragraph above it would wrap at two
 * different widths. */
.prose { max-inline-size: var(--measure); margin-block-end: 0.95rem; }
.prose > :first-child { margin-block-start: 0; }
.prose > :last-child { margin-block-end: 0; }
.prose p { max-inline-size: none; }
.prose ul, .prose ol { margin-block: 0 0.95rem; padding-inline-start: 1.2rem; }
.prose li { margin-block-end: 0.35rem; unicode-bidi: plaintext; }
.prose li:last-child { margin-block-end: 0; }
.prose li > p { margin-block-end: 0; }
/* Every heading a field writes is demoted to h4 (lib/markdown.mjs). A
 * disclosure's `body` is long enough to want subheads, so they get a size
 * rather than the UA's, and the space above them marks a new section. */
.prose h4 { font-size: 1rem; margin-block: var(--s5) var(--s2); }
.prose blockquote {
  margin-inline: 0; padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--gold); color: var(--ink-soft);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--sunk); padding: 0.1em 0.35em; border-radius: var(--r-sm);
}
/* A heading inside a record's own prose is a run of text, not a landmark: the
 * page's outline is the template's, and a summary must not be able to insert
 * itself into it at the size of the sections around it. */
.prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit; font-size: 1em; font-weight: 600;
  margin-block: 0.95rem 0.3rem; color: var(--ink);
}

.rule { border: 0; border-block-start: 1px solid var(--rule); margin-block: var(--s7); }

.note {
  font-size: 0.86rem; color: var(--ink-soft);
  border-inline-start: 2px solid var(--gold); padding-inline-start: 0.9rem;
  max-inline-size: var(--measure);
}

/* --- disclosure question ----------------------------------------------------
 * A disclosure's `question` is the register's punchier register — a short line
 * addressed straight at the Fund, pulled out of the sober `body` prose
 * beneath it. Gold is chrome, never a rating, so it carries this
 * the same way it carries every other non-rating accent on the page: the
 * question is a stance the register takes on its own account, not a claim
 * with a confidence of its own — that stays on `body`. */
.disclosure__question {
  grid-column: 1 / -1;
  margin-block: var(--s4) var(--s5);
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--gold);
  max-inline-size: var(--measure);
}
.disclosure__question-label {
  display: block;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stamp-ink); font-weight: 500;
  margin-block-end: 0.3rem;
}
html[lang="ar"] .disclosure__question-label { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.82rem; }
.disclosure__question-text { font-size: 1.15rem; font-weight: 600; color: var(--ink); }

/* The same question, compressed to one line, wherever a disclosure is only
 * cited rather than shown in full — the homepage ledger. No label here; the
 * context (a "not published" row) already says what it is, so a second
 * eyebrow would just be noise at this size. */
.q-line { display: block; font-size: 0.84rem; color: var(--stamp-ink); font-weight: 500; margin-block-start: 0.15rem; }

/* --- questions to the Fund --------------------------------------------------
 * Pulled forward to right under the summary, before the relations list — the
 * campaign's voice belongs where the reader is, not at the foot of the page.
 * Each question is a card in the Fund's own FAQ idiom: a face-coloured sheet
 * in a thick frame of translucent heritage gold that deepens on hover and
 * again when open, a chevron in a gold box that turns over, and a gold
 * hairline between the question and what it rests on. Borrowed layout, our
 * palette — the question is set in ink, not their sovereign green, because
 * green here is the `official` rating and never decoration. A question
 * carries no confidence of its own (that stays with the disclosure it falls
 * under), so nothing here takes `data-conf`. Numbered in the markup (a
 * campaign's questions are a count), unnumbered on the page: the number is
 * not an order of importance. */
.q-list {
  list-style: none; padding: 0; margin: 0 0 var(--s4);
  display: grid; gap: var(--s3);
  max-inline-size: var(--measure);
}
.q__card {
  background: var(--face);
  border: 8px solid color-mix(in srgb, var(--gold) 10%, transparent);
  border-radius: var(--r-md);
  transition: border-color 0.3s;
}
.q__card:hover { border-color: color-mix(in srgb, var(--gold) 20%, transparent); }
.q__card[open] { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.q:target .q__card { border-color: color-mix(in srgb, var(--gold) 65%, transparent); }

.q__face {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5);
  cursor: pointer; list-style: none;
}
.q__face::-webkit-details-marker { display: none; }
.q__face:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }
.q__text { min-inline-size: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.5; color: var(--ink); }
.q__chevron {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  color: var(--stamp-ink);
  transition: transform 0.3s;
}
.q__chevron svg { inline-size: 1.25rem; block-size: 1.25rem; }
.q__card[open] .q__chevron { transform: rotate(180deg); }

.q__panel {
  display: grid; gap: var(--s3);
  margin-inline: var(--s5);
  padding-block: var(--s4) var(--s5);
  border-block-start: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.q__panel > * { margin: 0; }
.q__eyebrow { font-size: 0.82rem; color: var(--stamp-ink); font-weight: 600; }
.q__eyebrow a { color: inherit; }
.q__context { color: var(--ink-soft); line-height: 1.95; }
.q__context > :first-child { margin-block-start: 0; }
.q__context > :last-child { margin-block-end: 0; }
.q__meta { font-size: 0.84rem; color: var(--ink-soft); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* The Fund's answer, when there is one, is set off from the question the way
 * a reply is — its own rule, not a second card. Neutral, not green: the
 * green is the `official` rating and a lifecycle is not a rating. */
.q__answer { border-inline-start: 2px solid var(--rule-soft); padding-inline-start: var(--s4); }
.q__answer > :last-child { margin-block-end: 0; }

@media (max-width: 46rem) {
  .q__card { border-width: 6px; }
  .q__face { padding: var(--s3) var(--s4); }
  .q__panel { margin-inline: var(--s4); }
  .q__text { font-size: 1rem; }
  .q__chevron { inline-size: 2rem; block-size: 2rem; }
  .q__chevron svg { inline-size: 1rem; block-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .q__card, .q__chevron { transition: none; }
}

/* The home page: two tracks across the content width. Each card holds its
 * own height (`align-items: start`), so opening one leaves its neighbour a
 * line tall instead of stretching an empty frame beside it; a grid, not
 * CSS columns, because columns reflow every card below an opened one into
 * the other column. Collapses to one track at the same width the cards
 * tighten. */
.questions--wide .q-list {
  max-inline-size: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--s3) var(--s4);
}
.questions--wide .q__card { border-width: 6px; }
.questions--wide .q__face { padding: var(--s3) var(--s4); }
.questions--wide .q__panel { margin-inline: var(--s4); padding-block: var(--s3) var(--s4); }
.questions--wide .q__text { font-size: 1.02rem; }
@media (max-width: 46rem) {
  .questions--wide .q-list { grid-template-columns: minmax(0, 1fr); }
}

.questions__contact { font-size: 0.9rem; color: var(--ink-soft); max-inline-size: var(--measure); }

/* --- tags -----------------------------------------------------------------
 * Not pills. A bordered rounded capsule is the house style of every dashboard
 * ever shipped; a register writes its classifications small and unemphatic,
 * separated by rules. The rounding in this design is for surfaces, not labels. */

.chip {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  font-size: 0.78rem; line-height: 1.4; color: var(--ink-faint);
  white-space: nowrap;
}
.chip + .chip { border-inline-start: 1px solid var(--rule); padding-inline-start: 0.55rem; margin-inline-start: 0.2rem; }
.chip--quiet { font-family: var(--font-mono); font-size: 0.74rem; }

.chip--conf, .chip--status, .chip--disc { font-weight: 600; }
.chip--conf::before, .chip--disc::before {
  content: ""; flex: none; align-self: center;
  inline-size: 0.62em; block-size: 0.62em; border: 1.4px solid currentColor;
  background-repeat: no-repeat;
}
.chip--conf[data-conf="official"]::before,  .chip--disc[data-status="published"]::before { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 100%; }
.chip--conf[data-conf="reported"]::before,  .chip--disc[data-status="partial"]::before   { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 50%; background-position: 0 100%; }
.chip--conf[data-conf="inferred"]::before,  .chip--disc[data-status="unknown"]::before   { border-style: dashed; }
.chip--conf[data-conf="disputed"]::before { background-image: linear-gradient(45deg, currentColor 0 50%, transparent 50%); background-size: 100% 100%; }
.chip--conf[data-conf="struck"]::before,    .chip--disc[data-status="absent"]::before    {
  background-image:
    linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
  background-size: 100% 100%;
}

/* One mark per line. The margin carries it; the word beside the entry is its
 * legend, not a second copy of it. */
.rel__meta .chip--conf::before, .card__meta .chip--conf::before { display: none; }
.rel__meta .chip--conf, .card__meta .chip--conf { gap: 0; }

[data-conf="official"] { color: var(--official); }
[data-conf="reported"] { color: var(--reported); }
[data-conf="inferred"] { color: var(--inferred); }
[data-conf="disputed"] { color: var(--disputed); }
[data-conf="struck"]   { color: var(--struck); text-decoration: line-through; }

/* Scoped to the chip, the mark and the tally — never to the article that
 * carries the same attribute, which would tint a whole entry's prose. */
.chip--disc[data-status="absent"],    .mark[data-status="absent"],    .silence__state[data-status="absent"]    { color: var(--disputed); }
.chip--disc[data-status="partial"],   .mark[data-status="partial"],   .silence__state[data-status="partial"]   { color: var(--inferred); }
.chip--disc[data-status="unknown"],   .mark[data-status="unknown"],   .silence__state[data-status="unknown"]   { color: var(--struck); }
.chip--disc[data-status="published"], .mark[data-status="published"], .silence__state[data-status="published"] { color: var(--official); }

/* Whether a person has read the record against the sources it cites. Both
 * states are drawn, because an absent mark reads as no information rather than
 * as "nobody has checked this", and the second is what it would mean on nearly
 * every record in the register today.
 *
 * Emphatically *not* a sixth rating, so it borrows none of the five hues and
 * none of the `.mark` fills: reviewed is a tick in the stamp oxide the cards'
 * watermark uses, unreviewed a hollow ring in the faint ink — present enough to
 * be read, quiet enough that a page of them is still a page of records. */
.chip--review { font-weight: 600; }
.chip--review[data-reviewed="yes"] { color: var(--stamp-ink); }
.chip--review[data-reviewed="yes"]::before { content: "✓"; font-size: 0.92em; line-height: 1; }
.chip--review[data-reviewed="no"] { color: var(--ink-faint); font-weight: 500; }
.chip--review[data-reviewed="no"]::before { content: "○"; font-size: 0.92em; line-height: 1; }
/* On the green both paper tones fail contrast, the same problem the five
 * ratings have there, and it takes the same answer: the warm gold for the
 * stamp, and the dim on-deep ink for the gap. */
.hero-meta .chip--review[data-reviewed="yes"], .cv-head__role .chip--review[data-reviewed="yes"] { color: var(--gold-warm); }
.hero-meta .chip--review[data-reviewed="no"], .cv-head__role .chip--review[data-reviewed="no"] { color: var(--on-deep-dim); }

/* The unreviewed state at length, at the head of the record's own page. It
 * qualifies everything under it, so it is set as a note in the faint ink with
 * the hatch colour on its rule — the same `--void` the register uses for a line
 * nobody has written on, which is exactly what this says about itself. */
.note--unreviewed { border-inline-start-color: var(--void); color: var(--ink-faint); }

/* --- record faces ---------------------------------------------------------
 * A card is a surface lifted off the sheet: rounded, shadowed, and carrying its
 * rating as a bar along the inline start so the grid can be scanned by colour
 * and by fill without reading a word of it.
 *
 * It is also the one place on the site that most wanted the Fund's own hand.
 * Theirs are half a metre tall, padded like a page, and built out of four
 * things: a heading held at the top, a paragraph pushed to the bottom, the air
 * left standing between the two, and a corner of soft colour with one enormous
 * glyph bleeding out of it. Take those away and any card is a box with a title
 * in it — which is what this one was. So the construction is theirs, and the
 * palette is the register's: gold and oxide for the washes and the watermark,
 * because the sovereign green is the `official` rating and is never decoration.
 */

/* Three columns at the full content width, as the Fund's own grid runs. The
 * `min()` is load-bearing: a bare `minmax(22rem, …)` floors the track at 22rem,
 * and on a phone that is wider than the content track — one grid then widens
 * the whole document and every band on the page scrolls sideways with it. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: var(--s5); }

.card {
  background: var(--face); padding: var(--s6) var(--s5) var(--s5);
  display: flex; flex-direction: column;
  /* A floor, not a height: the row stretches every card to its tallest
   * neighbour anyway, and this is what guarantees there is air inside even
   * when the tallest card in the row is a short one. */
  min-block-size: 20rem;
  /* Two pixels of the sheet's own cream, so the card's edge is a seam rather
   * than a drawn rule — and so there is something for the gold to take over on
   * hover. */
  border: 2px solid var(--sunk);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  /* The wash and the watermark sit behind the text on a negative z-index. The
   * card has to be their stacking context or they drop behind its own
   * background and vanish — this one declaration is what holds both layers. */
  isolation: isolate;
  /* Nothing on the card moves any more, so the hover is chrome and answers at
   * the chrome's speed. It used to run on `--dur-move`, which is the curve for
   * a surface that travels; six hundred milliseconds to change a border is a
   * card thinking about it. */
  transition:
    box-shadow var(--dur-chrome) var(--ease),
    border-color var(--dur-chrome) var(--ease);
}
.card::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 4px; background: var(--rule);
}
/* The corner wash. Two soft fields at opposite corners they spread and lift as
 * the pointer arrives. The positions are physical, like the hero's own washes
 * above — a gradient is a picture, not a margin. */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 42% at 88% -6%, rgb(183 166 120 / 40%) 0%, transparent 70%),
    radial-gradient(40% 40% at 10% 104%, rgb(111 92 46 / 15%) 0%, transparent 70%);
}
/* The pointer arriving used to set five things going at once: the card rose
 * six pixels, the shadow went from `sm` to `lg`, the border took the gold, the
 * corner wash grew by two fifths and the watermark by a twelfth. Five
 * simultaneous animations is a widget being pleased with itself, and it is the
 * single loudest thing on a page whose subject is a state fund's accounts.
 *
 * What is left is the seam taking the gold, and the arrow in the foot sliding
 * the way the page reads. The shadow still answers, but one step rather than
 * three: without the lift under it, `sm` to `lg` read as the card inflating.
 * The wash and the watermark hold still — they are the card's stock, and
 * stationery does not move when you look at it. */
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgb(183 166 120 / 55%);
}
.card[data-confidence="official"]::before { background: var(--official); }
.card[data-confidence="reported"]::before { background: var(--reported); }
.card[data-confidence="inferred"]::before { background: var(--inferred); }
.card[data-confidence="disputed"]::before { background: var(--disputed); }
.card[data-confidence="struck"]::before   { background: var(--struck); }

/* The watermark: the record's classification drawn as one glyph, hung far
 * enough off the top outer corner that the card's own edge cuts it, and drawn
 * in the oxide at a weight that keeps it a texture rather than a second label
 * competing with the rating chip that sits over it. It sits high and far enough
 * into the corner that roughly a quarter of it is cut on each side */
.card__ghost {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -2.2rem; inset-inline-end: -2.2rem;
  inline-size: 8.5rem; block-size: 8.5rem;
  color: rgb(111 92 46 / 6%);
}
.card__ghost svg { inline-size: 100%; block-size: 100%; display: block; }

.card__title { margin: 0; font-size: 1.4rem; font-weight: 600; font-family: var(--font-display); line-height: 1.4; }
.card__title a { text-decoration-color: var(--rule); transition: color var(--dur-chrome) ease; }
/* The whole card is the target, so the title answers to the card's hover and
 * not only to its own — the green is the institution's colour and this is the
 * one place a link borrows it. */
.card:hover .card__title a { color: var(--deep-base); text-decoration-color: var(--gold); }
/* What the record says about itself, held down on the footer rule. The `auto`
 * is the whole point: it is what opens the gap under the title. */
.card__body {
  margin-block-start: auto; padding-block-start: var(--s5);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.card__meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; }
.card__summary {
  margin: 0; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); max-inline-size: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__figure {
  margin: 0; font-family: var(--font-data); font-size: 1.35rem;
  font-weight: 500; color: var(--stamp-ink); letter-spacing: -0.02em;
}
.card__foot {
  margin: 0; padding-block-start: var(--s4);
  border-block-start: 1px solid var(--sunk);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-family: var(--font-data); font-size: 0.73rem; color: var(--ink-faint);
}
/* What the card knows about itself — a date, a tally — trails the way in,
 * held off it by a short rule so the two do not read as one phrase. */
.card__footnote { display: inline-flex; align-items: center; gap: 0.6rem; }
.card__footnote::before {
  content: ""; inline-size: 1.6rem; block-size: 1px; background: var(--sunk); flex: none;
}
.card__eyebrow { margin: 0; }

/* --- classification kicker & footer link (card) ----------------------------
 * A card's category sits above the title as a small label and its rating sits
 * opposite as a badge — the scan order a listing card anywhere uses — and the
 * footer's plain-text link is what turns "legible without opening" into
 * "still asks to be opened". */
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card__topmain { min-inline-size: 0; }
.card__kicker {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stamp-ink); margin: 0 0 0.3rem;
}
html[lang="ar"] .card__kicker { font-family: var(--font-body); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.card__badge { flex: none; }
.card__cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  color: var(--deep-base); white-space: nowrap; text-decoration: none;
  transition: color var(--dur-chrome) ease;
}
.card__cta:hover { color: var(--deep); text-decoration: none; }
/* The arrow is drawn pointing left because the page reads right to left, and
 * it travels a little further that way while the pointer is on the card. */
.card__arrow { flex: none; transition: transform var(--dur-chrome) var(--ease); }
.card:hover .card__arrow, .card__cta:hover .card__arrow { transform: translateX(-0.25rem); }

/* --- the tally ------------------------------------------------------------
 * What the register holds, counted — as a row of surfaces, each figure set
 * large in the data face. */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--s3);
  margin-block: var(--s5) var(--s6);
}
.stat {
  padding: 1.1rem 1.25rem;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.stat__n {
  font-family: var(--font-mono); font-size: 1.85rem; font-weight: 500;
  line-height: 1.05; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  color: var(--stamp-ink);
}
.stat__l {
  font-size: 0.74rem; color: var(--ink-faint);
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
html[lang="ar"] .stat__l { font-family: var(--font-body); font-size: 0.82rem; text-transform: none; letter-spacing: 0; }
.stat--conf .stat__n { color: currentColor; }
.stat--conf { position: relative; }
.stat--conf .stat__l { color: inherit; opacity: 0.9; }
/* On the green band the surfaces invert. */
.bleed--deep .stat, .bleed--base .stat { background: rgb(255 255 255 / 5%); border-color: rgb(183 166 120 / 25%); box-shadow: none; }
.bleed--deep .stat__n, .bleed--base .stat__n { color: var(--gold-warm); }
.bleed--deep .stat__l, .bleed--base .stat__l { color: var(--on-deep-dim); }

/* --- the roster ------------------------------------------------------------
 * The Fund publishes no board page, so the register prints one — on the
 * sovereign ground, where a fund's own site would put its leadership.
 *
 * The tiles are paper on the green for the reason `.dossier-head__logo` is: a
 * portrait and a confidence chip are both drawn for the paper palette, and
 * `official` *is* this green — a rating set on it would be a rating nobody can
 * see. Supplying the light ground is cheaper than fighting it. */

/* Default is the paper reading — `.leaders` now also renders on `.bleed--band`
 * for the subsidiary roster, not only on the sovereign green — so the deep
 * tone is a scoped override, not the base rule; on-deep on paper is the
 * invisible failure this file's own comments warn about. */
.leaders__note { color: var(--ink-soft); margin-block: var(--s3) 0; }
.bleed--deep .leaders__note, .bleed--base .leaders__note { color: var(--on-deep-soft); }

.leaders {
  list-style: none; padding: 0;
  margin-block: var(--s5) var(--s2);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--s4);
}
.leader { display: flex; }
/* Two class names on purpose: `.bleed--base a { color: inherit }` outranks a
 * single one, and inheriting there means the band's cream ink on a paper tile
 * — invisible rather than merely wrong. */
.leaders .leader__link {
  display: flex; align-items: center; gap: 1rem;
  inline-size: 100%; padding: 1.05rem 1.2rem;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none;
  transition: background 140ms ease;
}
.leader__link:hover { background: var(--band); }
.leader__link:hover .leader__name { text-decoration: underline; text-decoration-color: var(--gold); }
.leader__portrait {
  flex: none; inline-size: 4.25rem; block-size: 4.25rem;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); background: var(--sunk);
}
/* No portrait yet. A quiet figure on the sunk tone — deliberately *not* the
 * hatch: the hatch fills what the Fund has not published, and a photograph the
 * register has not obtained is the register's own gap, not a finding about the
 * Fund. */
.leader__portrait--none {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b6ae9c'%3E%3Ccircle cx='12' cy='8.6' r='4.1'/%3E%3Cpath d='M12 14.3c-4.5 0-8 2.9-8 6.6V24h16v-3.1c0-3.7-3.5-6.6-8-6.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center bottom; background-size: 78%;
}
.leader__text { display: grid; gap: 0.2rem; min-inline-size: 0; }
.leader__name { font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
.leader__role { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.35; }
.leader__conf { font-size: 0.9em; }

/* --- the Fund's own claims ------------------------------------------------
 * The Fund states its governance and its oversight as two numbered lists of
 * three, set large and light against the sovereign green. These rows are those
 * lists — same numerals, same order, same weight of type — with the register's
 * answer stapled underneath each one.
 *
 * The answer is paper on the green for the reason the leader tiles are: a
 * status mark is drawn for the paper palette, and `absent` on deep green is a
 * mark nobody can read. So the claim gets the Fund's own treatment and the
 * answer gets the register's, and the contrast between the two surfaces is the
 * argument the section is making.
 *
 * That contrast reads across the row, not down it. The answer used to sit on a
 * second line under the claim, which made it a footnote to the claim rather
 * than a reply to it — a reader met the Fund's sentence, then some small print,
 * and the two never stood against each other. The Fund builds nearly every
 * section of its own homepage as an asymmetric split, a column of words against
 * a column of something else, and this is the one section here whose content is
 * already a pair. So the row is three tracks: the numeral, the claim, the
 * record — and the eye crosses from what was said to what is filed, which is
 * the whole argument of the page made by looking rather than by reading.
 *
 * 1.05fr against 0.95fr, which is the Fund's own ratio: the claim takes the
 * larger share because it is quoted at the size it was published, and the
 * answer is a slip of paper, not a rebuttal set to match. */

.claims { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.claim {
  display: grid;
  grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0.55rem var(--s6);
  align-items: center;
  padding-block: var(--s5);
  border-block-start: 1px solid var(--rule);
}
.bleed--deep .claim, .bleed--base .claim { border-block-start-color: rgb(183 166 120 / 30%); }
.claim:first-child { border-block-start: 0; }
.claim__num {
  font-size: 1.35rem; font-weight: 700; line-height: 1.25;
  color: var(--ink-faint);
  align-self: start;
}
.bleed--deep .claim__num, .bleed--base .claim__num { color: var(--gold-warm); }
/* Light and large, the way the Fund sets it. The claim is quoted, so it is set
 * as the claim — not shrunk into evidence for a rebuttal. */
.claim__text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.7rem);
  font-weight: 300; line-height: 1.5;
  max-inline-size: var(--measure);
}
.claim__answer {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.5rem;
  justify-self: start;
  padding: 0.5rem 0.85rem;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  font-size: 0.88rem; line-height: 1.5;
}
/* Two class names, as with `.leaders .leader__link`: the band's own `a { color:
 * inherit }` would otherwise put cream ink on this paper slip. */
.claims .claim__answer a { color: var(--ink); text-decoration-color: var(--gold); }
.claim__answer .mark { align-self: center; }
.claim__state { font-weight: 600; }
/* Under the split's own width the two tracks stop being a comparison and start
 * being two narrow gutters, so the row folds back to what it was: the numeral
 * in the margin, the claim, and the record on the line beneath it. */
@media (max-width: 58rem) {
  .claim {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem 1rem;
    align-items: start;
    padding-block: var(--s4);
  }
  .claim__num { grid-row: 1 / span 2; }
}
.claims__note { margin-block-start: var(--s5); }
.bleed--deep .claims__note, .bleed--base .claims__note { color: var(--on-deep-soft); border-inline-start-color: var(--gold); }

.oversight__banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-block-size: clamp(12.5rem, 8rem + 12vw, 18.75rem);
  padding: var(--s6) var(--s6);
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse at 100% 0%, rgb(76 169 155 / 22%) 0%, transparent 58%),
    var(--deep);
  color: var(--on-deep);
  box-shadow: 0 30px 70px -34px rgb(0 38 35 / 75%);
}
/* The far side: a gold glow and the treasury drawn over it, cut by the edge. */
.oversight__banner::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block: -20%; inset-inline-end: -12%; inline-size: 55%;
  background: radial-gradient(ellipse at center, rgb(183 166 120 / 26%) 0%, transparent 62%);
}
.oversight__ghost {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: 50%; translate: 0 -46%;
  inset-inline-end: -2.5rem;
  inline-size: min(46%, 24rem); block-size: auto; aspect-ratio: 1;
  color: rgb(201 185 140 / 30%);
}
.oversight__head { max-inline-size: 52%; }
.oversight__title {
  margin: 0; font-weight: 700; line-height: 1.2; text-wrap: balance;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.5rem);
  background: linear-gradient(200deg, #e7d9b0 0%, #c2af7e 48%, #b7a678 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-block: 0.1em;
}
.oversight__note {
  margin: var(--s4) 0 0; max-inline-size: 34rem;
  color: var(--on-deep-soft); font-size: 1rem; line-height: 1.8;
}
@media (max-width: 40rem) {
  .oversight__banner { align-items: flex-start; padding: var(--s5); padding-block-end: 9rem; }
  .oversight__head { max-inline-size: none; }
  .oversight__ghost { inset-block-start: auto; inset-block-end: -1.5rem; translate: none; inset-inline-end: 50%; margin-inline-end: -5rem; inline-size: 10rem; }
  .oversight__banner::after { inset-inline-end: 15%; inset-block: 45% -20%; inline-size: 70%; }
}

.ocards {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 58rem) { .ocards { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 64rem) { .ocards { gap: var(--s5); } }
.ocard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-block-size: 17.5rem;
  padding: var(--s6) var(--s6) var(--s5);
  border-radius: var(--r-md);
  color: #fff;
}
.ocard--gold {
  background: #7f6e3f;
  box-shadow: 0 18px 48px -30px rgb(0 38 35 / 45%);
}
.ocard--deep {
  background: var(--deep);
  box-shadow: 0 24px 60px -30px rgb(0 38 35 / 70%);
}
/* The two soft fields at opposite corners, as on the Fund's cards: light over
 * dark on the gold, gold over emerald on the green. */
.ocard::before, .ocard::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inline-size: 60%; block-size: 60%; border-radius: 50%; filter: blur(60px);
}
.ocard::before { inset-block-start: -15%; inset-inline-start: -15%; }
.ocard::after  { inset-block-end: -15%;  inset-inline-end: -15%; }
.ocard--gold::before { background: rgb(255 255 255 / 15%); }
.ocard--gold::after  { background: rgb(0 38 35 / 12%); }
.ocard--deep::before { background: rgb(183 166 120 / 22%); }
.ocard--deep::after  { background: rgb(66 127 119 / 24%); }
.ocard__ghost {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -3rem; inset-inline-end: -3rem;
  inline-size: 12rem; block-size: 12rem;
  color: rgb(255 255 255 / 10%);
}
.ocard--deep .ocard__ghost { color: rgb(255 255 255 / 6%); }
.ocard__icon { inline-size: 2.5rem; block-size: 2.5rem; opacity: 0.85; margin-block-end: var(--s6); }
.ocard__text {
  margin: auto 0 0; max-inline-size: none;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; font-weight: 500;
}
.ocard__answer { margin-block-start: var(--s4); }
.ocards .claim__answer a { color: var(--ink); text-decoration-color: var(--gold); }

/* --- the silence ---------------------------------------------------------
 * The register's actual subject: the things a sovereign fund is expected to
 * publish, and the state of each. Absence is what the register has to report,
 * so it gets the first screen — a ruled list on a lifted surface, not a stat
 * card. */

.silence {
  margin-block: 0;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.silence__row {
  display: grid; align-items: baseline;
  grid-template-columns: 1.6rem minmax(0, auto) minmax(1.5rem, 1fr) auto;
  gap: 0 0.8rem;
  padding-block: 0.8rem;
  padding-inline: 1.35rem;
  text-decoration: none;
  position: relative;
  transition: background 140ms ease;
}
.silence__row + .silence__row { border-block-start: 1px solid var(--rule-soft); }
.silence__row:hover { background: var(--sunk); }
.silence__row:hover .silence__title { text-decoration: underline; text-decoration-color: var(--gold); }
.silence__mark { --m: 0.82rem; justify-self: center; align-self: center; }
/* The blank where an entry should have been, ruled through so nothing can be
 * written on it later. Only the gap is hatched — the words stay on clean paper. */
.silence__gap { block-size: 100%; }
.silence__row[data-status="absent"] .silence__gap {
  background-image: repeating-linear-gradient(-45deg, var(--void) 0 2px, transparent 2px 7px);
}
.silence__text { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; }
.silence__title { font-size: 0.96rem; }
/* On a phone the hatch column is a sliver and the title wraps to three lines to
 * make room for it. The row drops to title-and-state and the hatch goes: it is
 * the entry that has to survive the narrow screen, not the texture. */
@media (max-width: 34rem) {
  .silence__row { grid-template-columns: 1.4rem minmax(0, 1fr) auto; padding-inline: 1rem; }
  .silence__gap { display: none; }
}
.silence__state {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
html[lang="ar"] .silence__state { font-family: var(--font-body); font-size: 0.82rem; text-transform: none; letter-spacing: 0; }
.silence__foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: baseline;
  padding-block-start: var(--s4); font-size: 0.88rem; color: var(--ink-soft);
  max-inline-size: none;
}
.silence__count { font-family: var(--font-mono); font-size: 1.25rem; color: var(--stamp-ink); font-weight: 500; letter-spacing: -0.02em; }

/* --- the thesis ---------------------------------------------------------- */

.thesis { margin-block: 0 var(--s6); max-inline-size: 48rem; }
.thesis p { max-inline-size: none; font-size: 1.1rem; line-height: 1.65; }
html[lang="ar"] .thesis p { line-height: 1.9; }
.thesis p:first-of-type { font-size: 1.28rem; color: var(--ink-soft); }
/* Only the load-bearing clause is set strong. The rest of the sentence is
 * context, and setting all of it bold says nothing about which part is news. */
.thesis strong { font-weight: 600; color: var(--ink); }
.thesis__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em;
  font-weight: 600; color: var(--stamp-ink); text-decoration-color: var(--gold);
}
html[lang="ar"] .thesis__link { font-family: var(--font-body); font-size: 0.92rem; letter-spacing: 0; }

/* A row of onward links at the foot of a section. */
.more { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-block-start: var(--s5); }
.more a {
  font-weight: 600; font-size: 0.92rem; color: var(--stamp-ink);
  text-decoration-color: var(--gold);
}
.bleed--deep .more a, .bleed--base .more a { color: var(--gold-warm); }

/* --- facets & filtering --------------------------------------------------- */

/* The controls are a row of instruments, not one panel with everything in it.
 * The Fund's listing pages set the search on one side and each control in its
 * own bordered, lightly shadowed box on the other; this is that row, and like
 * theirs each facet is a dropdown — a native select, so the phone's own picker,
 * the keyboard and a screen reader all work without code. Each option carries
 * its count, so no value is chosen blind. */
.facets {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: stretch;
  margin-block: var(--s5) 0;
}
.facet {
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  padding-inline-start: 0.9rem;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--dur-chrome) ease, box-shadow var(--dur-chrome) ease;
}
.facet:hover { border-color: var(--gold); }
.facet:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(183 166 120 / 22%); }
.facet__name {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.1em; flex: none;
}
html[lang="ar"] .facet__name { font-family: var(--font-body); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
/* The chevron is drawn on the box, at its inline end, and the select pads
 * itself clear of it — a background image on the select would have to be
 * positioned with a physical `right`/`left`, which is the wrong side in RTL.
 * It is a clipped triangle rather than a rotated border corner, because a
 * corner drawn with logical borders mirrors in RTL and points sideways. */
.facet::after {
  content: ""; position: absolute; inset-inline-end: 0.9rem; inset-block-start: 50%;
  inline-size: 0.55rem; block-size: 0.32rem; margin-block-start: -0.16rem;
  background: var(--stamp-ink); clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.facet__select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.86rem; color: var(--ink);
  padding-block: 0.5rem; padding-inline: 0 2.1rem;
  background: transparent; border: 0; border-radius: 0; cursor: pointer;
  flex: 1 1 auto; min-inline-size: 7rem;
}
.facet__select:focus { outline: none; }
.facet__select.is-on { color: var(--stamp-ink); font-weight: 600; }
/* On a phone the row is a column: each control takes the full width, so the
 * stack reads as one form rather than three boxes of whatever width their
 * longest option happened to give them. */
@media (max-width: 40rem) {
  .facet, .facets__searchbox { flex: 1 1 100%; max-inline-size: none; }
}
/* The search field and its key are one object: the field takes the paper, the
 * key takes the emerald and closes the box off at the end. */
.facets__searchbox {
  display: flex; align-items: stretch; overflow: hidden;
  flex: 1 1 16rem; max-inline-size: 26rem;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-chrome) ease, box-shadow var(--dur-chrome) ease;
}
.facets__searchbox:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(183 166 120 / 22%); }
.facets__search {
  font: inherit; font-size: 0.9rem; padding: 0.55rem 0.9rem;
  flex: 1 1 auto; min-inline-size: 0;
  border: 0; background: transparent; color: var(--ink);
}
.facets__search:focus { outline: none; }
.facets__searchkey {
  display: flex; align-items: center; justify-content: center; flex: none;
  padding-inline: 1.1rem; background: var(--emerald); color: var(--on-deep);
}
.facets__count {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint);
  letter-spacing: 0.05em; margin-block: var(--s4) var(--s5);
}
html[lang="ar"] .facets__count { font-family: var(--font-body); letter-spacing: 0; font-size: 0.84rem; }

/* --- the entry ledger -----------------------------------------------------
 * Every relation is still a line in the book: the mark and the kind of entry in
 * the margin, the entry itself past the rule. The list is a lifted surface now,
 * but inside it the ruling is unchanged — this is the record, and a record is
 * square. */

.rels {
  list-style: none; padding: 0; margin: 0;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.rel { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); }
.rel + .rel { border-block-start: 1px solid var(--rule-soft); }
.rel__gutter {
  display: flex; align-items: baseline; gap: 0.45rem;
  padding-block: 1rem;
  padding-inline: 1.25rem 0.8rem;
}
.rel__label { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.35; }
.rel__body {
  border-inline-start: 1px solid var(--rule);
  padding-block: 1rem;
  padding-inline: 1.15rem 1.25rem;
  display: grid; gap: 0.28rem;
}
.rel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem; margin: 0; }
.rel__other { font-weight: 600; font-size: 1.02rem; font-family: var(--font-display); }
.rel__meta { display: flex; gap: 0.35rem; align-items: baseline; flex-wrap: wrap; margin-inline-start: auto; }
/* A pair reads as a sentence — from, to, and what the edge is for. Giving the
 * head two real columns keeps the rating on the entry's first line and lets a
 * long sentence wrap inside its own column, instead of pushing the rating onto
 * a line of its own. */
.rels--pair .rel__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s4); align-items: baseline;
}
.rels--pair .rel__meta { margin-inline-start: 0; justify-self: end; }
.rel__date { font-family: var(--font-data); font-size: 0.73rem; color: var(--ink-faint); }
.rel__role, .rel__summary, .rel__project { margin: 0; }
.rel__role { font-size: 0.88rem; color: var(--ink-soft); font-weight: 400; }
/* Which way the edge runs. It is the one glyph on the page whose direction is
 * the content, so it is set per language rather than mirrored by the browser. */
.rel__arrow { color: var(--ink-faint); margin-inline: 0.45rem; font-weight: 400; }
.rel__summary { font-size: 0.88rem; color: var(--ink-soft); max-inline-size: var(--measure); }
.rel__project { font-size: 0.83rem; }
.rel[data-kind="not_affiliated"] .rel__label { text-decoration: line-through; }
@media (max-width: 46rem) {
  .rel { grid-template-columns: 1fr; }
  .rel__gutter { padding-block-end: 0; }
  .rel__body { border-inline-start: 0; padding-inline: 1.25rem; }
  .rel__meta { margin-inline-start: 0; }
}

/* --- the network map ------------------------------------------------------
 * A second reading of the register, on its own page: one force-directed
 * drawing of every entity and every relation, pulled into sector groups. The
 * drawing, the pan/zoom and the pin-a-node interaction are ported from the
 * El-Msadi register; what is this register's own is everything it paints.
 *
 * The rating is on the *edge* — a relation is what carries a source here — in
 * hue and in dash pattern both, because no rating on this site may be colour
 * alone. Nodes are deliberately neutral: a diamond for a person, a circle for
 * an organisation, the plate's own green for the Fund. That leaves the five
 * confidence hues as the only colour on the map, which is the point. */

.netmap { margin-block-start: var(--s5); }
/* The aspect ratio matches the viewBox exactly, so the browser never
 * letterboxes the drawing into the middle of a box the wrong shape for it. */
.netmap svg {
  display: block; inline-size: 100%; aspect-ratio: 1280 / 820; block-size: auto;
  background: var(--band);
  border: 1px solid var(--rule-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  touch-action: none; cursor: grab;
}
.netmap svg:active { cursor: grabbing; }

/* The orbit bands. Chrome, so gold — they are a scale the drawing is set on,
 * not a rating and not a record. */
.netmap__band {
  fill: none; stroke: var(--gold); stroke-width: 1;
  stroke-dasharray: 2 6; opacity: 0.4; pointer-events: none;
}

.netmap__clusterlabel {
  fill: var(--stamp-ink); font-size: 15px; font-weight: 600;
  opacity: 0.55; pointer-events: none;
}

.netmap__hit { fill: transparent; stroke: none; }
.netmap__node :is(circle, rect):not(.netmap__hit) {
  fill: var(--face); stroke: var(--ink-faint); stroke-width: 1.5px;
}
.netmap__node--fund circle:not(.netmap__hit, .netmap__ring) { fill: var(--deep-base); stroke: var(--gold); stroke-width: 2px; }
/* No path from the Fund reaches this record, so it sits off the end of the
 * scale rather than at the end of it — drawn open, because a radius one step
 * further out is too quiet a way to say something that different. It is not a
 * rating and carries no hue. */
.netmap__node--loose :is(circle, rect):not(.netmap__hit) { fill: none; stroke-dasharray: 3 2.5; }
.netmap__ring { fill: none !important; stroke: var(--gold) !important; stroke-width: 1px !important; opacity: 0.5; }
/* The halo is the drawing's own ground, painted under the glyphs, so a label
 * crossing an edge stays readable without the edge being moved for it. */
.netmap__node text {
  fill: var(--ink-soft); font-size: 12px; font-weight: 600;
  paint-order: stroke; stroke: var(--band); stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; pointer-events: none;
}
.netmap__node, .netmap__edge, .netmap__node text { transition: opacity var(--dur-chrome) ease; }
.netmap__node.is-hub text,
.netmap__node.is-labelled text,
.netmap__node:hover text,
.netmap__node:focus-visible text { opacity: 1; }
.netmap__node:hover :is(circle, rect):not(.netmap__hit),
.netmap__node:focus-visible :is(circle, rect):not(.netmap__hit) { stroke: var(--gold); stroke-width: 3px; }
.netmap__node:hover text, .netmap__node:focus-visible text { fill: var(--ink); }
.netmap__node.is-dim { opacity: 0.16; }

/* The rating, and the only colour the drawing carries. The dash patterns are
 * the five fills of `.mark` drawn as a line: solid, half, dashed, split,
 * crossed becomes solid, long dash, fine dash, dash-dot, dotted. */
.netmap__edge { stroke: var(--rule); stroke-width: 1.4; }
.netmap__edge[data-conf="official"] { stroke: var(--official); }
.netmap__edge[data-conf="reported"] { stroke: var(--reported); stroke-dasharray: 7 3; }
.netmap__edge[data-conf="inferred"] { stroke: var(--inferred); stroke-dasharray: 2 4; }
.netmap__edge[data-conf="disputed"] { stroke: var(--disputed); stroke-dasharray: 10 3 2 3; }
.netmap__edge[data-conf="struck"]   { stroke: var(--struck); stroke-dasharray: 1 4; }
.netmap__edge.is-dim { opacity: 0.1; }
.is-focused .netmap__edge:not(.is-dim) { stroke-width: 2.2; }

.netmap__controls {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin: var(--s4) 0 0;
}
.netmap__hint { font-size: 0.82rem; color: var(--ink-faint); }
.netmap__btn {
  font: inherit; font-size: 0.82rem; cursor: pointer;
  padding: 0.35rem 0.85rem;
  background: transparent; color: var(--stamp-ink);
  border: 1px solid var(--gold); border-radius: var(--r-pill);
  margin-inline-start: auto;
  transition: background var(--dur-chrome) ease, color var(--dur-chrome) ease;
}
.netmap__btn:hover { background: var(--gold); color: var(--deep); }

.netmap__key {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  margin-block-start: var(--s4);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--rule-soft);
}
.netmap__keyrings {
  inline-size: 100%; margin: 0;
  font-size: 0.82rem; color: var(--ink-soft); max-inline-size: var(--measure);
}
.netmap__keygroup { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; }
.netmap__keyitem {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; white-space: nowrap;
}
.netmap__glyph {
  inline-size: 11px; block-size: 11px; flex: none;
  background: var(--face); border: 1.5px solid var(--ink-faint); border-radius: 50%;
}
.netmap__glyph--fund { background: var(--deep-base); border-color: var(--gold); }
.netmap__glyph--person { border-radius: 1px; rotate: 45deg; }
.netmap__rule { inline-size: 20px; block-size: 0; flex: none; border-block-start: 2px solid currentColor; }
.netmap__rule[data-conf="reported"] { border-block-start-style: dashed; }
.netmap__rule[data-conf="inferred"] { border-block-start-style: dotted; }
.netmap__rule[data-conf="disputed"] { border-block-start-style: dashed; }
.netmap__rule[data-conf="struck"]   { border-block-start-style: dotted; opacity: 0.6; }

.netmap__fallback { font-size: 0.82rem; color: var(--ink-faint); margin-block-start: var(--s4); }

/* The pinned record, as a card under the drawing — the map's way of answering
 * "what is this?" without leaving the map. */
.netmap__panel {
  position: relative;
  margin-block-start: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.netmap__panelhead {
  display: flex; align-items: baseline; gap: 0.35rem 0.7rem; flex-wrap: wrap;
  margin: 0;
}
.netmap__panelkicker { font-size: 0.78rem; color: var(--ink-faint); inline-size: 100%; }
.netmap__paneltitle {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); text-decoration-color: var(--gold);
}
/* Pinned to the panel's far corner rather than pushed there by an auto margin:
 * it shares a wrapping flex line with the title and the rating, and where it
 * lands on that line depends on how long the name happens to be. */
.netmap__panelclose {
  position: absolute; inset-block-start: var(--s3); inset-inline-end: var(--s4);
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
  padding: 0 0.3rem; background: transparent; border: 0; color: var(--ink-faint);
}
.netmap__panelclose:hover { color: var(--ink); }
.netmap__panelsummary {
  margin: var(--s3) 0 0; font-size: 0.9rem; color: var(--ink-soft);
  max-inline-size: var(--measure);
}
.netmap__panellist {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; gap: 0.3rem;
}
.netmap__panellist li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.88rem; }
.netmap__panelkind { color: var(--ink-faint); font-size: 0.78rem; min-inline-size: 7.5rem; }
.netmap__panelopen { display: inline-block; margin-block-start: var(--s4); font-size: 0.85rem; font-weight: 600; }

@media (max-width: 46rem) {
  /* A phone gets a portrait box rather than a 16:9 strip; the script zooms the
   * drawing until it covers it, and the reader pans and pinches from there. */
  .netmap svg { aspect-ratio: 4 / 5; }
  .netmap__panelkind { min-inline-size: 0; }
  .netmap__panellist li { flex-wrap: wrap; }
}

/* --- the apparatus --------------------------------------------------------
 * What a claim rests on, set the way a critical edition sets its apparatus:
 * small, in the data face, hanging off the entry rather than boxed beside it. */

.srcs {
  list-style: none; padding: 0; margin: 0.5rem 0 0;
  font-size: 0.77rem; color: var(--ink-faint); display: grid; gap: 0.2rem;
}
.srcs li { padding-inline-start: 0.85rem; position: relative; }
.srcs li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
  inline-size: 0.42rem; block-size: 1px; background: var(--gold);
}
.srcs a { text-decoration: none; }
.srcs a:hover { text-decoration: underline; }
.src__out { color: var(--ink-faint); font-size: 0.72rem; margin-inline-start: 0.4rem; opacity: 0.85; }
.srcs__reprint { display: block; font-size: 0.72rem; color: var(--ink-faint); font-style: italic; }
.srcs__independence {
  font-size: 0.77rem; color: var(--ink-soft); margin-block: 0.5rem 0;
  border-inline-start: 2px solid var(--inferred); padding-inline-start: 0.6rem;
  max-inline-size: var(--measure);
}
.srcs__why { display: block; color: var(--ink-faint); }
/* The folded apparatus: one quiet line with the count and a gold chevron,
 * turned over when open. As a page's own sources section the line is the
 * section heading, and keeps the heading's size and rule. */
.srcs-fold > summary {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.77rem; color: var(--ink-faint); cursor: pointer; list-style: none;
}
.srcs-fold > summary::-webkit-details-marker { display: none; }
.srcs-fold > summary::after {
  content: ""; inline-size: 0.4rem; block-size: 0.4rem;
  border-inline-end: 1.5px solid var(--gold); border-block-end: 1.5px solid var(--gold);
  transform: translateY(-0.12rem) rotate(45deg); transition: transform 0.2s;
}
.srcs-fold[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.srcs-fold > summary:hover { color: var(--ink-soft); }
.srcs-fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .srcs-fold > summary::after { transition: none; } }
.srcs-fold--section > summary { display: flex; color: var(--ink); }
.srcs-fold--section > summary > :is(h2, h3) { margin: 0; }
.srcs-fold--section > summary::after { inline-size: 0.6rem; block-size: 0.6rem; border-width: 0 2px 2px 0; border-style: solid; border-color: var(--gold); }
.srcs-fold--section > summary .num { font-size: 0.6em; color: var(--stamp-ink); font-weight: 400; }
.srcs-fold--section:has(> summary > h2) { margin-block-start: var(--section); }
.srcs-fold--section:has(> summary > h3) { margin-block-start: var(--s5); }
.srcs-fold--section[open] > summary { margin-block-end: var(--s4); }

/* --- the ownership chart --------------------------------------------------
 * What the Fund owns. The institution is a plate; what it owns sits beneath it
 * in a grid, grouped by the kind of ownership, and each holding is a surface
 * carrying the three things the register knows about it — its name, the share
 * when a source states one, and the rating of the *edge* that puts it under
 * the Fund. The rating is on the edge and not on the company: that a company
 * exists is rarely in doubt; who owns it is the claim.
 *
 * It was one column of full-width rows hung off a drawn spine, and fourteen
 * names took a screen and a half. The grid holds the same fourteen in about a
 * third of that, and on a phone it is one column of single-line rows again. */
.chart {
  --spine: rgb(183 166 120 / 55%);
}

/* The chart reads in a column, and the rule that governs it reads under it. */
.chart-layout { margin-block-start: var(--s5); }
.chart-layout .note { margin-block-start: var(--s5); }
.chart-layout .more { margin-block-start: var(--s4); }

/* The head of the chart. The sovereign green, because this is the institution
 * itself and not one of its records. */
.chart__root {
  padding: var(--s4) var(--s5);
  background: var(--deep-base); color: var(--on-deep);
  border: 1px solid rgb(183 166 120 / 30%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.chart__rootname {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.3;
  color: #fff; text-decoration-color: rgb(183 166 120 / 50%);
}

/* A group names its kind of ownership once, with the count beside it, and
 * hangs off the plate by the one stretch of spine left on the chart. */
.chart__group {
  margin-block-start: var(--s4);
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--spine);
}
.chart__grouphead {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 0 0 var(--s3); font-size: 0.9rem; font-weight: 600; color: var(--stamp-ink);
}
.chart__grouphead .num { color: var(--ink-faint); font-weight: 500; }

/* The same trick `.grid` uses: the `min()` stops the track from flooring wider
 * than a phone's content box. */
.chart__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
.chart__cell { display: grid; min-inline-size: 0; }
/* A holding with holdings of its own takes a whole row, at the end of its
 * group (the template orders it there). Beside other tiles it stretched its
 * whole row to its own height; alone, it reads as a sub-heading over its own
 * holdings, which is what it is. */
.chart__cell--parent { grid-column: 1 / -1; }
/* Its own holdings: the same grid one level down, indented behind the spine,
 * so on a phone it is an indented list and on a desktop a row of tiles. */
.chart__grid--sub {
  margin-block-start: 0.6rem;
  margin-inline-start: var(--s3);
  padding-inline-start: var(--s3);
  border-inline-start: 2px solid var(--spine);
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}

.holding {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.35rem var(--s3);
  padding: 0.65rem 1rem;
  background: var(--face); color: var(--ink);
  border: 1px solid var(--rule-soft); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--dur-chrome) ease, border-color var(--dur-chrome) ease;
}
.holding:hover { box-shadow: var(--shadow-md); border-color: var(--rule); }
.holding:hover .holding__name { text-decoration: underline; text-decoration-color: var(--gold); }
/* The rating of the edge, as the tile's own start edge — the same device
 * `.card` uses, and the reason the rating is not set on the tile's text. */
.holding::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 3px; background: var(--rule);
}
.holding[data-confidence="official"]::before { background: var(--official); }
.holding[data-confidence="reported"]::before { background: var(--reported); }
.holding[data-confidence="inferred"]::before { background: var(--inferred); }
.holding[data-confidence="disputed"]::before { background: var(--disputed); }
.holding[data-confidence="struck"]::before   { background: var(--struck); }

/* The name takes the line and the side wraps under it when the tile is too
 * narrow for both — so a wide tile is one line and a narrow one is two,
 * without a breakpoint for either. */
.holding__name {
  flex: 1 1 9rem; min-inline-size: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.holding__side { display: flex; align-items: center; gap: 0.6rem; flex: none; }
/* A share is a figure and the one number on the tile, so it is set as one. */
.holding__share {
  /* The data face, not the mono: a share can be words ("الحصة العظمى"), and
   * monospacing an Arabic word pulls its letters apart. */
  font-family: var(--font-data); font-size: 1.15rem; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em; color: var(--stamp-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 34rem) {
  .chart__root { padding: var(--s4); }
  .chart__group { padding-inline-start: var(--s3); }
}

/* --- search palette ------------------------------------------------------- */

.palette {
  inline-size: min(38rem, 92vw); max-block-size: 70vh; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-lg);
  margin-block-start: 8vh; overflow: hidden;
}
.palette::backdrop { background: rgb(0 38 35 / 55%); }
.palette__form { margin: 0; }
.palette__input {
  font: inherit; font-size: 1.05rem; inline-size: 100%; padding: 1rem 1.2rem;
  border: 0; border-block-end: 1px solid var(--rule); background: transparent; color: inherit;
}
.palette__input:focus { outline: none; }
.palette__hint, .palette__results { padding: 0.8rem 1.2rem; margin: 0; font-size: 0.87rem; }
.palette__results { overflow-y: auto; max-block-size: 52vh; }
.palette__group {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.12em; margin-block: 0.9rem 0.3rem;
  padding-block-end: 0.25rem; border-block-end: 1px solid var(--rule-soft);
}
html[lang="ar"] .palette__group { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.palette__hit { display: block; padding: 0.5rem 0.6rem; text-decoration: none; border-radius: var(--r-md); }
.palette__hit:hover, .palette__hit.is-active { background: var(--sunk); }
.palette__hit small { display: block; color: var(--ink-faint); font-size: 0.78rem; }

/* --- contact --------------------------------------------------------------
 * The home page's last section: a sentence and an address. Its head sits at
 * the inline start like every other section's on the page — a centred one
 * here read as a different page's heading. */
.contact__address { margin-block: var(--s4) 0; font-size: 1.15rem; }
.contact__address a { font-weight: 600; }

/* --- footer ---------------------------------------------------------------
 * The sovereign green closes the page, and carries the independence line in
 * full — who publishes this, and who does not. */

.footer {
  background: var(--deep-base); color: var(--on-deep-soft);
  font-size: 0.85rem;
  border-block-start: 1px solid rgb(183 166 120 / 20%);
}
.footer a { text-decoration: none; text-decoration-color: var(--gold); transition: color var(--dur-chrome) ease; }
.footer a:hover { color: var(--gold-warm); text-decoration: underline; }

/* The top row: mark, indexes, and the two ways to take the data. Three tracks
 * on a wide screen and one stacked column below it, which is the whole
 * responsive story — nothing here reorders. */
.footer__inner {
  padding-block: var(--s6);
  display: grid; gap: var(--s4) var(--s5);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
@media (max-width: 62rem) {
  .footer__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}

.footer__brand {
  display: flex; align-items: center; gap: 0.7rem;
  color: #fff; font-weight: 600; font-size: 0.95rem;
}
.footer__brand .wordmark__mark { inline-size: 2rem; block-size: 2rem; font-size: 0.7rem; }
.footer__brand:hover { text-decoration: none; }
.footer__brand:hover .wordmark__mark { background: var(--gold); color: var(--deep); }

.footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.4rem;
}
.footer__nav a { font-size: 0.82rem; font-weight: 500; }

/* The data, offered as the two things a reader can actually leave with. */
.footer__take { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; }
.footer__take a { font-family: var(--font-mono); font-size: 0.76rem; white-space: nowrap; }
html[lang="ar"] .footer__take a { font-family: var(--font-body); font-size: 0.84rem; }

.footer__rule { border: 0; border-block-start: 1px solid rgb(238 234 223 / 12%); margin: 0; }

/* The bottom band. The independence line is centred and full-size — it is the
 * one sentence that keeps the homage from being taken for the thing it borrows
 * from, so it is not fine print. The licence and the date are, and they share
 * a single centred row beneath it. */
.footer__base { padding-block: var(--s5); text-align: center; }
.footer__base p { margin-block: 0; max-inline-size: 68ch; margin-inline: auto; }
.footer__disclaimer { color: var(--gold-warm); font-weight: 600; }
.footer__base .footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.1rem;
  margin-block-start: 0.7rem; max-inline-size: none;
  font-size: 0.76rem; color: var(--on-deep-dim);
}

/* --- back to top ----------------------------------------------------------
 * Appears once the reader is a viewport down. It is deliberately the only
 * fixed control on the page, and it sits at the start edge so it never lands
 * on a scrollbar in either direction. */

.totop {
  position: fixed; inset-block-end: 1.5rem; inset-inline-start: 1.5rem; z-index: 40;
  inline-size: 3rem; block-size: 3rem;
  display: grid; place-items: center;
  border: 1px solid rgb(183 166 120 / 40%); border-radius: var(--r-pill);
  background: var(--deep); color: var(--gold-warm);
  box-shadow: var(--shadow-md); cursor: pointer;
  transition: background var(--dur-chrome) ease, color var(--dur-chrome) ease,
              transform var(--dur-move) var(--ease);
}
.totop:hover { background: var(--gold); color: var(--deep); transform: translateY(-3px); }

/* --- dossier head -----------------------------------------------------------
 * Every record opens on the same green banner the home page does, the way the
 * Fund's own sub-pages open each page on the band before the white content
 * starts. A gold rule closes it off, echoing the one that opens the footer. */

/* `main` is a grid, and grid items never collapse margins with each other —
 * so every section here sets only its own trailing space and leaves the next
 * one's leading edge at 0, rather than trying to make two margins collapse
 * into one gap the way they would in normal flow. */
.dossier-head {
  border-block-end: 3px solid var(--gold);
  margin-block-end: var(--s6);
  overflow: hidden;
  /* The band is not a flat fill. Two wide, soft lights lift the green off
   * itself — a cooler one falling from the top and the emerald pooling at the
   * bottom — which is how the Fund's own bands are built, and how the home
   * page's hero is already built here. Same technique, one band further. */
  background:
    radial-gradient(60% 130% at 88% -15%, rgb(9 66 57 / 85%) 0%, transparent 62%),
    radial-gradient(48% 115% at 8% 118%, color-mix(in srgb, var(--emerald) 30%, transparent) 0%, transparent 60%),
    var(--deep);
}
/* Like the hero: the bar floats over this band, so the band pads its own first
 * line clear of it rather than the page reserving the space above. */
.dossier-head .wrap { padding-block: calc(var(--masthead-h) + var(--s3)) var(--s6); }
.dossier-head .eyebrow { margin-block: 0 var(--s2); }
.dossier-head h1 { margin-block-end: 0; }

/* An index's band. A dossier head reads from the start edge, like the top of a
 * file; an index announces a shelf, so it is centred and taller and carries
 * its lede on the green rather than dropping it onto the paper below — which
 * is where the Fund puts the same sentence on its own listing pages. */
.dossier-head--index .wrap {
  padding-block: calc(var(--masthead-h) + var(--s6)) var(--s7);
  text-align: center;
}
.dossier-head--index .dossier-head__crumb { justify-content: center; }
.dossier-head--index h1 { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.1rem); }
.dossier-head__lede {
  margin: var(--s4) auto 0; max-inline-size: 60ch;
  color: var(--on-deep-soft);
  font-size: clamp(0.98rem, 0.93rem + 0.3vw, 1.12rem);
}
.dossier-head__crumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--on-deep-dim); margin-block: 0 var(--s4);
}
html[lang="ar"] .dossier-head__crumb { font-family: var(--font-body); font-size: 0.86rem; }
.dossier-head__crumb a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--on-deep-soft); text-decoration-color: var(--gold); }
.dossier-head__crumb a:hover { color: #fff; }
/* The chevron is drawn pointing left and the page is RTL, so it is mirrored
 * to point the way back. */
.crumb-arrow { flex: none; transform: scaleX(-1); }

/* The dossier's own classification, read as pills on the green — the same
 * place a job posting puts its type/location badges. The five confidence
 * hues are lightened here and only here: the paper-tuned hues fail contrast
 * on the deep green, but the mark's fill pattern still carries the rating
 * regardless of the tint, so the notation survives the ground it sits on. */
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-block: var(--s3) 0; max-inline-size: none; }
.hero-meta .chip {
  background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 20%);
  color: var(--on-deep); padding: 0.4rem 0.85rem; border-radius: var(--r-pill);
  font-size: 0.82rem; gap: 0.4rem;
}
.hero-meta .chip + .chip { border-inline-start: 0; padding-inline-start: 0.85rem; margin-inline-start: 0; }
.hero-meta [data-conf="official"], .cv-head__role [data-conf="official"] { color: #8fd6c4; }
.hero-meta [data-conf="reported"], .cv-head__role [data-conf="reported"] { color: #9cc3ff; }
.hero-meta [data-conf="inferred"], .cv-head__role [data-conf="inferred"] { color: var(--gold-warm); }
.hero-meta [data-conf="disputed"], .cv-head__role [data-conf="disputed"] { color: #e3aeff; }
.hero-meta [data-conf="struck"], .cv-head__role [data-conf="struck"]   { color: rgb(238 234 223 / 55%); }
.dossier-head__row { display: flex; align-items: center; gap: 1.25rem; }
.dossier-head__text { min-inline-size: 0; }
/* A person gets a portrait, ringed in the chrome colour so it reads as a mark
 * of record rather than a decorative photo. An organisation gets its logo on
 * a paper tile instead — most logos are drawn for a light ground, and the
 * fund's own green is not one, so we supply one rather than fight the mark. */
.dossier-head__portrait {
  flex: none; inline-size: 5.5rem; block-size: 5.5rem; border-radius: 50%;
  object-fit: cover; border: 2px solid rgb(238 234 223 / 35%);
  box-shadow: var(--shadow-md);
}
.dossier-head__logo {
  flex: none; display: grid; place-items: center;
  inline-size: 5.5rem; block-size: 5.5rem; padding: 0.6rem;
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.dossier-head__logo img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
@media (max-width: 30rem) {
  .dossier-head__portrait, .dossier-head__logo { inline-size: 3.6rem; block-size: 3.6rem; }
}

.dossier-meta { margin-block: 0 var(--s4); }

/* --- the personal record ----------------------------------------------------
 * A person is the one record type the register holds a career for, so a person
 * opens as a curriculum vitae rather than as a classification: the portrait
 * centred over the name, the office held directly beneath it, and one column of
 * entries under the date of birth. It is the form a public appointment notice
 * takes — which is the point. The register prints the CV the Fund does not.
 *
 * Nothing here invents a notation. The band, the crumb and the rating chips are
 * the ones every other record gets; the entry mark is the same gold tick that
 * heads a section rule, and it is a rule and not a square precisely because a
 * small filled square is the confidence mark and may be nothing else. */

/* A CV closes on more air than a dossier head does, but it opens on the same:
 * the bar floats over this band too, and its own top padding is the only thing
 * keeping the crumb out from under it. */
.dossier-head--cv .wrap { padding-block: calc(var(--masthead-h) + var(--s3)) var(--s7); }
.cv-head { display: grid; justify-items: center; text-align: center; }
.cv-head > * { max-inline-size: 48ch; }
/* The portrait carries the page, so it is drawn at twice the dossier size —
 * still a circle, because the roster on the home page draws the same faces at
 * the same shape and two shapes for one face is a different person to a reader
 * scanning quickly. */
.cv-head .dossier-head__portrait {
  inline-size: 10.5rem; block-size: 10.5rem;
  margin-block-end: var(--s5);
}
/* No portrait obtained. It renders only on the green band, so unlike the
 * roster's tile it is not a paper disc: a cream circle at this size would be
 * the loudest thing on the page, and a photograph the register has not got is
 * the register's own gap. It must not be the hatch either — that fills what the
 * Fund has not published, which is a finding and this is not. */
.dossier-head__portrait--none {
  background-color: rgb(255 255 255 / 6%);
  background-repeat: no-repeat; background-position: center bottom; background-size: 78%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eeeadf' fill-opacity='.38'%3E%3Ccircle cx='12' cy='8.6' r='4.1'/%3E%3Cpath d='M12 14.3c-4.5 0-8 2.9-8 6.6V24h16v-3.1c0-3.7-3.5-6.6-8-6.6z'/%3E%3C/svg%3E");
  border-color: rgb(238 234 223 / 20%);
}
.cv-head h1 { margin-block-end: 0; }
/* Other spellings, right under the name: small and quiet on purpose — a
 * name repeating itself in another script is not the same weight as the
 * office below it, so it takes neither the office's size nor its own line in
 * the CV column further down the page. */
.cv-head__aka {
  margin-block: 0.35rem 0; font-size: 0.8rem; line-height: 1.6;
  color: var(--on-deep-dim);
}
.cv-head__aka-label { color: rgb(238 234 223 / 55%); }
.cv-head__aka span[aria-hidden] { color: rgb(238 234 223 / 55%); }
/* The office, printed whole. A position the register can only source to one
 * post says so in its own text, so the line has to be able to run to three
 * lines without looking like a mistake — hence the measure and the leading. */
.cv-head__role {
  margin-block: var(--s3) 0; line-height: 1.7;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  color: var(--on-deep-soft);
}
/* The office, and how well the register knows it. The rating belongs on this
 * line rather than only in the relations below, because the line is the claim:
 * a directorship known from one Facebook post and one stated in a decree read
 * identically as words. The five hues are the lightened set the green ground
 * needs — the same ones `.hero-meta` uses, and for the same reason. */
.cv-head__role a { text-underline-offset: 0.2em; }
.cv-head__role .chip--conf {
  margin-inline-start: 0.5rem; font-size: 0.74rem; font-weight: 600;
  vertical-align: 0.08em;
}
@media (max-width: 30rem) {
  .cv-head .dossier-head__portrait { inline-size: 7rem; block-size: 7rem; }
}

/* The entries. The rule that opens them carries the date of birth as a stamp at
 * its head — gold, because it is chrome and not a rating — and runs on across
 * the column, so the column has a top edge whether or not a birth date is
 * known. The stamp is square: a rule and a mark are the record. */
.cv { margin-block: 0 var(--s6); }
.cv__stamp {
  display: flex; align-items: center; gap: var(--s3);
  margin-block: 0 var(--s5); max-inline-size: none;
}
.cv__stamp::after { content: ""; flex: 1 1 auto; block-size: 1px; background: var(--rule); }
.cv__born {
  flex: none; background: var(--gold); color: var(--deep);
  font-size: 0.86rem; font-weight: 600; padding: 0.35rem 0.85rem;
}
/* Degrees and offices are two different kinds of claim — one closed and dated
 * once, the other the career the rest of the page is about — so each gets its
 * own small-caps eyebrow, the same mono treatment `.facts dt` uses for a
 * labelled fact, before its own list. */
.cv__label {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint);
  margin-block: var(--s5) var(--s3);
}
.cv__label:first-child { margin-block-start: 0; }
html[lang="ar"] .cv__label { font-family: var(--font-body); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.cv__list { list-style: none; margin: 0; padding: 0; max-inline-size: var(--measure); }
.cv__item {
  position: relative; padding-inline-start: 1.6rem;
  margin-block-end: var(--s4); line-height: 1.9;
}
.cv__item:last-child { margin-block-end: 0; }
.cv__item::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.9em;
  inline-size: 0.75rem; block-size: 2px; background: var(--gold);
}
/* A degree is a mark closed once, not a bar drawn across the line — a small
 * hollow gold square, so a column with both kinds of entry can still be told
 * apart at a glance without a second colour. */
.cv__item--edu::before {
  inline-size: 0.5rem; block-size: 0.5rem; inset-block-start: 0.65em;
  background: transparent; border: 2px solid var(--gold);
}

/* --- facts ------------------------------------------------------------------
 * What is known about the entity itself, not its relations: read as a small
 * card of labelled particulars directly under the name, the way a profile
 * gives its facts before its story. Sits in the flow, not off to the side —
 * a fact here needs no seat sticky enough to escape the page's own reading order. */

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s4) var(--s6); margin: 0;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.4rem; margin-block: 0 var(--s6);
  font-size: 0.88rem;
}
.facts__row { display: grid; gap: 0.3rem; align-content: start; }
/* A list-valued fact (aka, positions, education) reads as a column of bullets
 * and can run long, so it takes the full row rather than fighting a scalar
 * fact next to it for a narrow third of the grid. */
.facts__row:has(ul) { grid-column: 1 / -1; }
/* The aka row is a comma-run, not a bulleted list, but it is exactly as long
 * as one — several name variants in two scripts — so it gets the same
 * full-width lane rather than wrapping tall inside one narrow column. */
.facts__row--wide { grid-column: 1 / -1; }
.facts__names { line-height: 1.5; }
.facts__names span[aria-hidden] { color: var(--ink-faint); }
.facts dt {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint);
}
html[lang="ar"] .facts dt { font-family: var(--font-body); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.facts dd { margin: 0; }
.facts ul { margin: 0; padding-inline-start: 1.1rem; }

/* --- photo gallery ----------------------------------------------------------
 * Photographs of the record beyond its portrait — at an event, a site, a
 * signing. Tiles, not cards: there is no text to give a card's padding
 * something to hold, so the seam runs straight round the image the way the
 * Fund's own press pages border a photograph, gold on hover in place of the
 * card's lift. */
.photo-gallery {
  list-style: none; margin: 0 0 var(--s6); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--s4);
}
.photo-gallery__item a {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border: 2px solid var(--sunk); border-radius: var(--r-md);
  transition: border-color var(--dur-move) var(--ease), box-shadow var(--dur-move) var(--ease);
}
.photo-gallery__item a:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.photo-gallery__item img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-move) var(--ease);
}
.photo-gallery__item a:hover img { transform: scale(1.05); }

/* The opened photograph. The dialog is sized to the picture rather than to the
 * viewport, which is what makes a click anywhere around it land on the dialog
 * itself and close it — the palette closes on the same one line. The backdrop
 * goes much darker than the palette's: that one dims a page still being read,
 * this one has to get out of the way of a photograph. The gold seam is the
 * tile's own hover border, kept so the picture arrives looking like the thing
 * that was clicked. */
.lightbox {
  position: relative; padding: 0; border: 0; background: transparent;
  max-inline-size: 94vw; max-block-size: 90vh; overflow: visible;
}
.lightbox::backdrop { background: rgb(0 38 35 / 88%); }
.lightbox__img {
  display: block; max-inline-size: 94vw; max-block-size: 90vh;
  inline-size: auto; block-size: auto;
  border: 2px solid rgb(183 166 120 / 55%); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.lightbox__close {
  position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem;
  display: grid; place-items: center;
  inline-size: 2.4rem; block-size: 2.4rem; padding: 0;
  border: 1px solid rgb(238 234 223 / 30%); border-radius: var(--r-pill);
  background: rgb(0 38 35 / 70%); color: var(--on-deep); cursor: pointer;
  transition: background var(--dur-chrome) ease, border-color var(--dur-chrome) ease;
}
.lightbox__close:hover { background: var(--deep); border-color: var(--gold); }

/* --- dossier --------------------------------------------------------------
 * The record and what is known about it: the entry in the wide column, its own
 * particulars on a lifted card beside it. */

/* A record with no sidebar beside it. An entity dossier is one column now —
 * the `بإيجاز` panel only ever repeated the green head and counted lists that
 * are printed in full further down the page. The measure still governs the
 * prose inside it; what runs the full width is the ledger, the chart and the
 * tables, which are records rather than reading. */
.record { margin-block-start: var(--s7); max-inline-size: 58rem; }
/* An organisation's particulars card beside the record, at the inline end —
 * the left, in this RTL page — in the width the 58rem column leaves standing
 * empty. It holds only what the page prints nowhere else, so it is not the
 * `بإيجاز` panel back. The card comes first in the source and the grid areas
 * put it on the side, so the one-column fallback still reads particulars,
 * then summary. It stays in view while the record scrolls past it. */
.record--aside {
  max-inline-size: none;
  display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 58rem) minmax(15rem, 19rem);
  grid-template-areas: "main aside";
  align-items: start;
}
.record--aside > .record__main { grid-area: main; min-inline-size: 0; }
.record__aside {
  grid-area: aside;
  position: sticky; inset-block-start: calc(var(--masthead-h) + var(--s4));
}
.record__aside .facts { grid-template-columns: 1fr; margin: 0; }
@media (max-width: 62rem) {
  .record--aside { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "main"; gap: 0; }
  .record__aside { position: static; }
  .record__aside .facts { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-block-end: var(--s6); }
}

.dossier { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 2.3fr) minmax(16rem, 1fr); align-items: start; margin-block-start: var(--s7); }
@media (max-width: 62rem) { .dossier { grid-template-columns: 1fr; gap: var(--s5); } }

.sidebar {
  font-size: 0.88rem;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.35rem 1.5rem;
  position: sticky; inset-block-start: calc(var(--masthead-h) + var(--s3));
}
@media (max-width: 62rem) { .sidebar { position: static; } }
.sidebar dt {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint); margin-block-start: 1.15rem;
}
.sidebar > :first-child, .sidebar dl:first-child > dt:first-child { margin-block-start: 0; }
html[lang="ar"] .sidebar dt { font-family: var(--font-body); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.sidebar dd { margin: 0; }
.sidebar ul { margin: 0; padding-inline-start: 1.1rem; }
.sidebar p { max-inline-size: none; }

/* The record's own tally, and the two ways to act on it — the same seat a job
 * posting gives its apply card, once the classification above has already
 * said what this is. */
.sidebar__stats {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem;
  margin-block: 1.1rem 0; padding-block-start: 1rem;
  border-block-start: 1px solid var(--rule-soft);
}
.sidebar__stat { display: grid; gap: 0.1rem; }
.sidebar__stat b {
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; line-height: 1;
  color: var(--stamp-ink); font-variant-numeric: tabular-nums;
}
.sidebar__stat span { font-size: 0.72rem; color: var(--ink-faint); }
html[lang="ar"] .sidebar__stat span { font-family: var(--font-body); font-size: 0.78rem; }

.sidebar__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-block-start: 1.2rem; }
.sidebar__actions .action { inline-size: 100%; }

/* A ghost action for a light surface — `.action--ghost` is tuned for the
 * green and disappears on paper. */
.action--outline { border-color: var(--rule); color: var(--stamp-ink); }
.action--outline:hover { background: var(--band); border-color: var(--gold); transform: translateY(-2px); }

.callout {
  border-inline-start: 3px solid currentColor; padding: 0.6rem 0 0.6rem 1rem;
  padding-inline: 1rem 0; margin-block: var(--s5); max-inline-size: var(--measure);
  color: var(--disputed);
  background: rgb(108 47 132 / 5%);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout h3 { margin-block-end: 0.3rem; font-size: 0.92rem; font-family: var(--font-body); }
.callout p { color: var(--ink); margin-block-end: 0; }

.detail-list { padding-inline-start: 1.2rem; max-inline-size: var(--measure); }
.detail-list li { margin-block-end: 0.4rem; }

/* A table is the record, so it stays square and ruled. It sits on a lifted
 * surface like every other index, but the ruling inside it is unchanged. */
.scroll-x {
  overflow-x: auto;
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; inline-size: 100%; font-size: 0.88rem; }
th, td { text-align: start; padding: 0.7rem 0.9rem; border-block-end: 1px solid var(--rule-soft); vertical-align: baseline; }
th {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 500;
  border-block-end: 1px solid var(--rule); background: var(--sunk);
}
html[lang="ar"] th { font-family: var(--font-body); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
tbody tr:hover { background: var(--sunk); }
tbody tr:last-child td { border-block-end: 0; }
/* An ISO date is one token; letting a column break it mid-date reads as two. */
td.num, .srcs a + .src__out { white-space: nowrap; }
td:first-child { inline-size: 60%; }

/* --- disclosures ----------------------------------------------------------
 * Absence is the register's subject, not an appendix to it, so these read as
 * full entries rather than cards in a grid — and one that is genuinely absent
 * carries the hatch in its margin, a line ruled through. */

.disclosure {
  display: grid; gap: 0 2.5rem; align-items: start;
  grid-template-columns: minmax(0, 2.3fr) minmax(14rem, 1fr);
  background: var(--face); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--s6) var(--s6) var(--s6) calc(var(--s6) + 0.9rem);
  padding-inline: calc(var(--s6) + 0.9rem) var(--s6);
  margin-block-end: var(--s4);
  position: relative; overflow: hidden;
}
.disclosure::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 0.62rem; background: var(--sunk);
}
.disclosure[data-status="absent"]::before {
  background-image: repeating-linear-gradient(-45deg, var(--rule) 0 1.5px, transparent 1.5px 5px);
}
.disclosure__title {
  grid-column: 1 / -1; margin-block: 0 1rem; font-size: 1.3rem;
  display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap;
}
.disclosure__body h3 {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--ink-faint); margin-block: 1.3rem 0.3rem;
}
html[lang="ar"] .disclosure__body h3 { font-family: var(--font-body); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.disclosure__meta { font-size: 0.86rem; }
.disclosure__meta dt {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint); margin-block-start: 0.9rem;
}
html[lang="ar"] .disclosure__meta dt { font-family: var(--font-body); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.disclosure__meta dd { margin: 0; }
.disclosure__meta ul { margin: 0; padding-inline-start: 1.1rem; }
@media (max-width: 46rem) { .disclosure { grid-template-columns: 1fr; } .disclosure__meta { margin-block-start: 1.2rem; } }

/* A disclosure's card. Its stripe is not a rating — a disclosure has none — so
 * it stays the neutral rule, except where the thing is absent: there it takes
 * the hatch, widened to the entry's margin so the ruling reads, because the
 * hatch is what the register draws for what the Fund has not published. */
.card--disc[data-status="absent"]::before {
  inline-size: 0.62rem; background: var(--sunk);
  background-image: repeating-linear-gradient(-45deg, var(--rule) 0 1.5px, transparent 1.5px 5px);
}
/* On its own page the entry has no title row — the head carries it. */
.disclosure--page { margin-block-start: var(--s6); }

/* --- motion ---------------------------------------------------------------
 * The marks and figures ink in on load, top to bottom, the way a page is
 * stamped. The hero's own lines come up with it. Nothing else animates. */

@keyframes ink-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.silence__row { animation: ink-in 320ms both; animation-delay: calc(var(--i, 0) * 45ms); }
.hero__eyebrow { animation: rise-in 520ms both; }
.hero__title { animation: rise-in 520ms 80ms both; }
.hero__lede { animation: rise-in 520ms 160ms both; }
.hero__actions { animation: rise-in 520ms 240ms both; }
.hero__figures { animation: rise-in 520ms 320ms both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}