/*
   Executive Editorial Layer
   A high-contrast, media-led visual system for Dr. Buthaina Al Ansari.
   Loaded after styles.css so the original chapter mechanics stay intact.
*/

:root {
  /* Body, UI, cards, labels, navigation and buttons. Section titles do NOT use
     this: they read --font-section-title (final typography contract, bottom). */
  --display: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --display-hero: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --weight-display: 600;
  --weight-heading: 600;
  --weight-subheading: 500;
  --weight-body: 400;
  --weight-label: 500;
  --weight-action: 600;
  --ink-deep: #0b0908;
  --ink: #100d0c;
  --ink-soft: #181311;
  --paper: #f2ede5;
  --paper-hi: #faf7f1;
  --paper-warm: #f5efe7;
  --burgundy: #8a1538;
  --burgundy-deep: #5b0e2b;
  --chair-burgundy: var(--burgundy);
  --chair-burgundy-deep: var(--burgundy-deep);
  --rose: #d9aeb4;
  --rose-pale: #efd9dc;
  --on-paper-mute: #665e57;
  --on-paper-soft: #514b46;
  --ghost: #ded4c7;
  --line-paper: #d1c6b8;
  /* accents lifted from the approved hero art direction */
  --sand: #deb58a;
  --crimson: #f55175;

  /* Canonical scales. Shared components consume these tokens so future
     adjustments do not create another layer of one-off values. */
  --type-section-display: clamp(48px, 4.6vw, 88px);
  --type-section-compact: clamp(40px, 3.6vw, 68px);
  --type-body-copy: clamp(17px, 1.06vw, 20px);
  --type-label: clamp(15px, .9vw, 18px);
  --type-action: clamp(15px, 1vw, 18px);
  --leading-display: 1.16;
  --leading-body: 1.78;

  --control-height: 48px;
  --control-height-large: clamp(56px, 4.1vw, 72px);
  --radius-action: 10px;
  --radius-media: clamp(20px, 2vw, 36px);
  --radius-media-small: clamp(14px, 1.4vw, 24px);
  --radius-feature: clamp(24px, 2.4vw, 42px);
  --radius-pill: 999px;

  --motion-fast: .2s;
  --motion-standard: .3s;
  --motion-slow: .6s;
  --ease-expressive: cubic-bezier(.2, .82, .2, 1);
  --focus-ring-light: var(--burgundy);
  --focus-ring-dark: var(--paper-hi);
  --shadow-action: inset 0 1px rgba(255,255,255,.13), 0 12px 28px rgba(11,9,8,.22);
  --shadow-action-hover: inset 0 1px rgba(255,255,255,.16), 0 16px 34px rgba(11,9,8,.3);
}

body {
  background: var(--ink-deep);
  font-size: clamp(16px, 1.06vw, 20px);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; }

button { color: inherit; }
:where(button, [role='button']) { cursor: pointer; }
:where(a, button) { -webkit-tap-highlight-color: transparent; }

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .027;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 { text-wrap: balance; }

h1, h2, h3,
.hero__name,
.slide__title,
.feature__title,
.career-slide h3,
.program-dossier__body h3,
.advisory__intro h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -.035em;
}

/* Masthead — precise editorial chrome instead of an app-like pill. */
.navbar {
  display: block;
  padding-block-start: max(0px, calc(clamp(16px, 4.4svh, 44px) - 15px));
  padding-inline: var(--hero-gutter);
  transition: none;
}

.navbar.is-stuck { padding-block-start: max(0px, calc(clamp(16px, 4.4svh, 44px) - 15px)); }

.navbar__inner {
  direction: ltr;
  pointer-events: auto;
  width: 100%;
  max-width: var(--hero-max);
  min-height: 63px;
  margin-inline: auto;
  padding-inline: clamp(16px, 1.6vw, 30px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(11,9,8,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px) saturate(120%);
  transition: width .55s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease), min-height .4s var(--ease);
}

/* At the top the masthead is a quiet centered mark. Scrolling opens the
   existing navigation from both sides without changing its fixed position. */
.navbar:not(.is-expanded) .navbar__inner {
  width: 78px;
  grid-template-columns: 1fr;
  padding-inline: 0;
}
/* The collapsed circle keeps ONE row. `.nav` places its own items on row 1
   (and at >=1200px `display: contents` promotes `.nav__contact` into column 1
   of that row), so a brand with an auto row is pushed to an implicit row 2 and
   sits below the centre of the 63px circle. The row is stated, not inferred. */
.navbar:not(.is-expanded) .navbar__brand { grid-column: 1; grid-row: 1; justify-self: center; }
.navbar:not(.is-expanded) .nav {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scaleX(.72);
  transform-origin: center;
}
.navbar.is-expanded .nav {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
}
.navbar__brand, .nav { transition: opacity .38s var(--ease), transform .55s var(--ease); }

.navbar.is-stuck .navbar__inner { min-height: 57px; }

.navbar__brand {
  grid-column: 3;
  justify-self: end;
  width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.navbar__brand:hover {
  opacity: .76;
  transform: translateY(-1px);
}

.navbar__brand:active { transform: translateY(0) scale(.97); }

.navbar__logo {
  position: relative;
  display: block;
  width: 32px;
  height: 43px;
  overflow: hidden;
}

.navbar__logo img {
  position: absolute;
  top: 1px;
  right: 0;
  width: auto;
  max-width: none;
  height: 42px;
}

.navbar__logo-dark { display: none; }

.navbar__menu-toggle { display: none; }

.nav {
  grid-column: 2;
  grid-row: 1;
  direction: rtl;
  max-width: none;
  padding: 0;
  gap: clamp(12px, 3vw, 58px);
  overflow: visible;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.nav__links {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: inherit;
}

.nav a {
  position: relative;
  min-height: 48px;
  padding: 0 clamp(3px, .3vw, 6px);
  border-radius: 0;
  font-size: clamp(13px, 1.02vw, 20px);
  color: rgba(255,255,255,.76);
}

.nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 3px;
  height: 2px;
  background: rgba(255,255,255,.45);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.nav a[aria-current='true']::after { background: var(--crimson); }
.nav a[aria-current='true'] { font-weight: 500; }
/* crimson is a light tint: over the paper masthead the marker needs the
   deeper brand red to stay visible */
.navbar.on-light .nav a[aria-current='true']::after { background: var(--burgundy); }

.nav a:hover,
.nav a[aria-current='true'] { color: #fff; background: transparent; }
.nav a:hover::after,
.nav a[aria-current='true']::after { transform: scaleX(1); }

.nav .nav__contact {
  align-self: center;
  min-height: 44px;
  margin-inline-start: 8px;
  padding-inline: clamp(10px, 1.25vw, 24px);
  font-size: clamp(11px, .82vw, 16px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--chair-burgundy) 0%, var(--chair-burgundy-deep) 100%);
  color: var(--paper-hi);
}

.nav .nav__contact::after { display: none; }
.nav .nav__contact:hover {
  background: linear-gradient(135deg, var(--chair-burgundy) 0%, var(--chair-burgundy-deep) 100%);
  color: #fff;
  opacity: .88;
}

.navbar.on-light .navbar__inner {
  /* Warm paper glass: the surface stays genuinely translucent and lets the
     section behind it read through, so the masthead is refraction rather than
     an opaque bar. Blur + saturation do the legibility work, not opacity. */
  border: 0;
  background: linear-gradient(180deg, rgba(255,252,247,.58) 0%, rgba(242,237,229,.46) 100%);
  backdrop-filter: blur(26px) saturate(168%);
  -webkit-backdrop-filter: blur(26px) saturate(168%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 18px 40px -26px rgba(82,58,45,.22);
}

.navbar.on-light .navbar__logo-light { display: none; }
.navbar.on-light .navbar__logo-dark {
  display: block;
  filter: brightness(0) saturate(100%);
}
.navbar.on-light .nav { background: transparent; }
.navbar.on-light .nav a { color: rgba(16,13,12,.7); }
.navbar.on-light .nav a:hover,
.navbar.on-light .nav a[aria-current='true'] { color: var(--ink); background: transparent; }
.navbar.on-light .nav .nav__contact {
  border: 0;
  background: linear-gradient(135deg, var(--chair-burgundy) 0%, var(--chair-burgundy-deep) 100%);
  color: var(--paper-hi);
}
.navbar.on-light .nav .nav__contact:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--chair-burgundy) 0%, var(--chair-burgundy-deep) 100%);
}

/* Hero — portrait-led, cinematic and confident. */
.hero__img img { object-position: 69% 35%; filter: saturate(.94) contrast(1.01); }

.hero__stage::after {
  /* One left-to-right gradient, nothing else. It sits near-solid behind the
     copy column, then falls away across the middle of the frame so the
     portrait is never veiled. Stop positions are measured off the reference
     art's own falloff. */
  opacity: .05;
  background:
    linear-gradient(90deg,
      rgba(4,3,3,.98) 0%, rgba(4,3,3,.98) 33%, rgba(4,3,3,.84) 41%,
      rgba(4,3,3,.68) 47%, rgba(4,3,3,.5) 54%, rgba(4,3,3,.2) 62%, rgba(4,3,3,0) 72%);
}

.hero__mark { display: none; }

.hero__copy {
  inset-block-start: 50%;
  translate: 0 -50%;
  width: min(600px, 31vw);
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* The line above the name: sand kicker over a short crimson rule. */
.hero__kicker {
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--sand);
}

.hero__kicker-rule {
  width: clamp(56px, 5vw, 96px);
  margin-block: clamp(10px, 1vw, 18px) 2px;
  background: var(--crimson);
}

.hero__name {
  font-family: var(--display-hero);
  font-size: clamp(54px, 4.3vw, 86px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.035em;
  max-width: none;
  text-wrap: balance;
  white-space: nowrap;
}

.hero__sub {
  margin-block-start: clamp(18px, 1.8vw, 34px);
  gap: clamp(18px, 1.8vw, 34px);
}

.hero__eyebrow {
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--sand);
}

.hero__dot {
  display: inline-block;
  width: .21em;
  height: .21em;
  margin-inline: .52em;
  border-radius: 50%;
  background: var(--crimson);
  vertical-align: .1em;
}

/* Keep the complete hero message on one deliberate vertical axis. */
.hero__action {
  align-self: flex-start;
  min-height: var(--control-height);
  gap: clamp(12px, 1vw, 20px);
  padding-inline: clamp(20px, 1.8vw, 32px);
  padding-block: 10px;
  font-size: clamp(14px, 1vw, 18px);
  color: #fff;
  border: 0;
  border-radius: var(--radius-action);
  background: linear-gradient(135deg, var(--chair-burgundy) 0%, var(--chair-burgundy-deep) 100%);
  box-shadow: var(--shadow-action);
  transition: transform var(--motion-standard) var(--ease), box-shadow var(--motion-standard) var(--ease), gap var(--motion-standard) var(--ease);
}

.hero__action-arrow {
  flex: none;
  width: 1.1em;
  height: auto;
  color: var(--paper-hi);
  transition: transform .3s var(--ease);
}

.hero__action:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-action-hover);
}
.hero__action:hover .hero__action-arrow { transform: translateX(-4px); }
.hero__action:active { transform: translateY(0) scale(.98); }
.hero__action:focus-visible {
  outline: 2px solid var(--focus-ring-dark);
  outline-offset: 4px;
}

/* Standing — every institutional role carries its own source visual. */
.stage { isolation: isolate; }

.stage::before { display: none; }

/* Stronger editorial territories. */
.thesis { border-block: 1px solid rgba(255,255,255,.1); }
.thesis__quote blockquote { font-family: var(--display); letter-spacing: -.035em; }

.territories { gap: 0; border-block-start: 1px solid rgba(244,239,232,.16); }
.territories > li { padding: clamp(30px, 3vw, 58px); border-inline-start: 1px solid rgba(244,239,232,.14); }
.territories > li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.territories > li:nth-child(2) { transform: translateY(34px); }

/* Writing — one cinematic feature and two image-led field notes. */

/* Knowledge — a three-act multimedia stage: print, sound, and film. */

/* Remaining chapters inherit the same typographic authority. */
.career__intro h2,
.programs__head h2 { font-family: var(--display); letter-spacing: -.04em; }

/* Typography — a readable editorial hierarchy with stronger supporting roles. */
.nav a { font-weight: 400; }

.engagement__kicker,
.stage__eyebrow,
.writing__note,
.story-head h2,
.story-kicker,
.career__intro > p,
.advisory__intro > p,
.advisory__label,
.closing__group > p {
  font-weight: 400;
}
.thesis__role { font-size: clamp(15px, .95vw, 18px); }
.territories p { font-size: clamp(16px, 1vw, 19px); }
.story-kicker { font-size: clamp(15px, 1vw, 19px); }
.story-link { font-size: clamp(16px, 1vw, 19px); font-weight: 400; }

.career__intro > p { font-size: clamp(16px, 1.04vw, 20px); }
.career__credentials strong { font-size: clamp(15px, .96vw, 18px); }
.career__credentials li > span { font-size: clamp(14px, .8vw, 15px); }
.career-slide time { font-size: clamp(16px, 1.15vw, 20px); }
.closing__territories { font-size: clamp(16px, 1.09vw, 21px); }
.closing__base { font-size: clamp(14px, .86vw, 16px); }
.closing__base .numeral { font-size: 14px; }

@media (min-width: 1921px) {
  .navbar { padding-block-start: max(0px, calc(clamp(42px, 4.4svh, 78px) - 15px)); }
  .navbar.is-stuck { padding-block-start: max(0px, calc(clamp(42px, 4.4svh, 78px) - 15px)); }
  .hero__copy { width: min(680px, 27vw); }
  .hero__name { font-size: clamp(82px, 4vw, 96px); }
}

@media (min-width: 1200px) {
  .navbar__inner { width: min(866px, 42.4vw); }
  .nav { display: contents; }
  .nav__links {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .nav .nav__contact {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
  }
}

@media (max-width: 1199px) {
  .navbar__brand { width: 46px; }
  .nav { gap: 10px; }
  .nav a { font-size: 14px; }
  .nav .nav__contact { font-size: 13px; }
  .navbar__inner { grid-template-columns: 1fr auto; }
  .navbar__brand { grid-column: 2; }
  .nav { grid-column: 1; justify-self: start; }
}

@media (max-width: 1199px) and (min-width: 900px) {
  .hero__copy {
    inset-inline-end: clamp(52px, 7vw, 90px);
    inset-block-start: 50%;
    width: min(420px, 38vw);
  }
  .hero__name { font-size: clamp(52px, 5.3vw, 64px); }
  .hero__kicker { font-size: clamp(16px, 1.8vw, 19px); }
  .hero__eyebrow { font-size: clamp(15px, 1.7vw, 18px); }
  .hero__sub { margin-block-start: 18px; gap: 18px; }
}

@media (max-width: 899px) {
  body::after { opacity: .02; }

  /* h3/h4 land near reading size on phones, where the hairline display
     weight stops holding; h1/h2 stay large enough to keep it. */
  h3, h4 { font-weight: 400; }

  .navbar { padding: 0 12px; }
  .navbar.is-stuck { padding-block-start: 0; }
  .navbar__inner {
    position: relative;
    min-height: 54px;
    padding-inline: 10px;
    display: grid;
    grid-template-columns: 44px 1fr 46px;
    gap: 6px;
    overflow: visible;
    border-radius: 15px;
    background: rgba(11,9,8,.91);
  }
  .navbar.on-light .navbar__inner {
    /* Same glass, tuned denser for phones: small type over a moving page
       needs a little more paper behind it while staying see-through. */
    background: linear-gradient(180deg, rgba(255,252,247,.70) 0%, rgba(242,237,229,.58) 100%);
    backdrop-filter: blur(22px) saturate(158%);
    -webkit-backdrop-filter: blur(22px) saturate(158%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      inset 0 0 0 1px rgba(255,255,255,.36),
      0 10px 26px -18px rgba(82,58,45,.2);
  }
  .navbar__brand { display: grid; grid-column: 3; grid-row: 1; width: 44px; }
  .navbar__logo { width: 40px; height: 52px; }
  .navbar__logo img { height: 50px; }

  .navbar__menu-toggle {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    width: 44px;
    height: 44px;
    display: grid;
    place-content: center;
    gap: 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255,255,255,.9);
    cursor: pointer;
    transition: transform .2s var(--ease), opacity .3s var(--ease);
  }
  .navbar__menu-toggle span {
    display: block;
    width: 20px;
    height: 1px;
    background: currentColor;
    transition: transform .38s var(--ease);
  }
  .navbar__menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
  .navbar__menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .navbar__menu-toggle:active { transform: scale(.97); }
  .navbar.on-light .navbar__menu-toggle { color: var(--ink); }

  .nav {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    width: 100%;
    min-width: 0;
    padding: 10px 18px 16px;
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: rgba(11,9,8,.96);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(20px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
  }
  .navbar.is-menu-open .nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .navbar.on-light .nav { background: rgba(242,237,229,.98); border: 0; }
  .nav__links { display: grid; }
  .nav a {
    min-height: 54px;
    padding-inline: 2px;
    justify-content: flex-start;
    border-block-end: 1px solid rgba(255,255,255,.12);
    font-size: 16px;
  }
  .navbar.on-light .nav a { border-block-end-color: rgba(16,13,12,.12); }
  .nav a::after { display: none; }
  .nav .nav__contact {
    min-height: 54px;
    margin: 10px 0 0;
    padding-inline: 16px;
    justify-content: space-between;
    border: 0;
    border-radius: 999px;
  }

  .hero__stage::after {
    /* the phone hero is an image block with copy beneath, so the scrim turns
       vertical here to seat the copy rather than shading a left column */
    background: linear-gradient(to top, var(--ink-deep) 1%, rgba(11,9,8,.28) 48%, rgba(11,9,8,0) 76%);
  }
  .hero__copy {
    width: auto;
    translate: none;
    padding: clamp(22px, 4.6vw, 36px) var(--gutter) clamp(38px, 6.5vw, 54px);
    border: 0;
  }
  .hero__kicker { font-size: clamp(16px, 2.1vw, 19px); }
  .hero__kicker-rule { width: clamp(54px, 8vw, 68px); margin-block: 9px 1px; }
  .hero__name {
    max-width: 9em;
    font-size: clamp(52px, 10vw, 76px);
    line-height: 1.2;
    letter-spacing: -.03em;
  }
  .hero__sub { margin-block-start: clamp(16px, 2.8vw, 22px); gap: clamp(16px, 2.8vw, 22px); }
  .hero__eyebrow { font-size: clamp(15px, 2.2vw, 17px); line-height: 1.45; }
  .hero__action { font-size: clamp(14px, 2vw, 16px); }

  .territories > li,
  .territories > li:first-child { padding: clamp(24px, 6vw, 36px) 0; border-inline-start: 0; }
  .territories > li:nth-child(2) { transform: none; }
}

@media (max-width: 639px) {
  .navbar { padding-inline: 8px; }
  .navbar__inner { padding-inline: 7px; grid-template-columns: 44px 1fr 44px; gap: 4px; }
  .navbar__brand { width: 44px; }
  .nav { padding-inline: 16px; }
  .hero__copy { padding-block-start: 20px; padding-block-end: 34px; }
  .hero__name { font-size: clamp(46px, 12.2vw, 58px); line-height: 1.18; }
  .hero__sub { margin-block-start: 14px; gap: 14px; }
  .hero__eyebrow { font-size: 15px; }
  .hero__action { font-size: 14px; }
}

/* Short touch landscapes need a compact split hero rather than the stacked
   portrait composition. Keep identity, territories and action in view while
   preserving the portrait on the right side of the frame. */
@media (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
  .hero,
  .js .hero { height: auto; }

  .hero__stage,
  .js .hero__stage {
    position: relative;
    height: 100svh;
    min-height: 360px;
    overflow: hidden;
  }

  .hero__img {
    position: absolute;
    inset: 0;
  }

  .hero__img img {
    height: 100%;
    object-position: 69% 32%;
  }

  .hero__stage::after {
    height: 100%;
    background: linear-gradient(90deg, rgba(4,3,3,.84) 0%, rgba(4,3,3,.66) 34%, rgba(4,3,3,.24) 53%, rgba(4,3,3,0) 70%);
  }

  .hero__copy {
    position: absolute;
    inset-inline-end: clamp(34px, 6vw, 62px);
    inset-block-start: 50%;
    width: min(340px, 42vw);
    padding: 0;
    transform: translateY(-50%) !important;
  }

  .hero__kicker { font-size: 14px; }
  .hero__kicker-rule { width: 48px; margin-block: 6px 0; }
  .hero__name { font-size: clamp(36px, 5.2vw, 46px); line-height: 1.14; }
  .hero__sub { margin-block-start: 10px; gap: 9px; }
  .hero__eyebrow { font-size: 14px; line-height: 1.35; }
  .hero__action { min-height: 46px; padding-inline: 20px; font-size: 14px; }
}

/* ══ Editorial hover-reveal cover · native Framer-style motion ══ */

/* ══ Editorial index · one truthful image, three responsive stories ══ */

/* ══ Journal spread · topic-led imagery and verified publication paths ══ */

.journal__link-arrow {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: currentColor;
  transition: transform .4s cubic-bezier(.2,.78,.2,1);
}

.journal__link-arrow::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 12px;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.journal__link-arrow::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

/* One editorial system: the former black feature and article list are retired. */
.writing {
  overflow: clip;
  background:
    radial-gradient(circle at 14% 9%, rgba(91, 14, 43, .055), transparent 28%),
    var(--paper);
}

.writing__intro { min-width: 0; }

.writing__aside {
  display: grid;
  gap: clamp(24px, 2vw, 38px);
  padding-block-end: 8px;
}

.writing__aside a {
  width: fit-content;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-block-end: 1px solid var(--burgundy);
  font-size: clamp(15px, .94vw, 18px);
  transition: color .3s ease;
}

.writing__aside a:hover,
.writing__aside a:focus-visible { color: var(--burgundy); }

.writing__aside a:hover .journal__link-arrow,
.writing__aside a:focus-visible .journal__link-arrow { transform: translateX(-6px); }

/* Let the new Qatar panorama read as a landscape, not a portrait crop. */

@media (max-width: 899px) {
  .writing__aside { max-width: 540px; padding-block-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .journal-story,
  .journal-story__media img,
  .journal-story h3,
  .journal__link-arrow,
  .journal-card,
  .journal-card__media img,
  .journal-card h4,
  .publication-shelf > a { transition: none; transform: none; }
}

/* ══ Closing invitation · a decisive final action, not a passive footer ══ */
.closing {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 84% 4%, rgba(138, 21, 56, .2), transparent 31%),
    var(--ink-deep);
}

.closing__invitation {
  padding-block: clamp(94px, 9vw, 172px) clamp(76px, 7.2vw, 138px);
  border-block-end: 1px solid rgba(244,239,232,.14);
}

.closing__invitation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
  align-items: end;
  gap: clamp(54px, 8vw, 154px);
}

.closing__invitation-action {
  display: grid;
  gap: clamp(30px, 3vw, 54px);
  padding-block-start: clamp(24px, 2.2vw, 42px);
  /* Separator policy rule 3: this footer-chapter group rule draws with the
     shared dark separator token, not an ad-hoc rgba, so the closing chapter
     reads as one system with the two link groups and the legal base. */
  border-block-start: var(--separator-size) solid var(--separator-on-dark);
}

.closing__top {
  padding-block: clamp(66px, 6vw, 116px);
  border-block-start: 0;
  align-items: start;
}

.closing__identity { padding-block-start: 4px; }
.closing__mark { height: clamp(48px, 4vw, 76px); }

@media (max-width: 899px) {
  .closing__invitation-grid { grid-template-columns: 1fr; align-items: start; gap: 46px; }
  .closing__invitation-action { max-width: 560px; }
}

@media (max-width: 639px) {
  .closing__invitation { padding-block: 82px 74px; }
  .closing__top { padding-block: 56px 48px; }
}

/* ══ IA consolidation · authority first, engagement after proof ══ */
.agenda {
  position: relative;
  overflow: clip;
  background: var(--ink);
}

.agenda .thesis { position: relative; }

.work {
  position: relative;
  overflow: clip;
  background: var(--paper);
}

@media (min-width: 900px) {
  .js .standing { height: 220svh; }
}

/* Five verified posts, but with a tighter and deliberately uneven index. */


/* The transport glyphs are drawn by the shared inline SVG play glyph at the
   end of this file, not by a text symbol or a bordered box. */


.books-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 4.6vw, 88px) clamp(60px, 5.2vw, 100px);
  background:
    radial-gradient(circle at 8% 18%, rgba(139, 23, 60, .075), transparent 25%),
    linear-gradient(180deg, #f8f4ed 0%, var(--paper) 74%, #eee7dc 100%);
  color: var(--ink);
}

.books-section__inner { position: relative; z-index: 1; }

.books-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 1.4vw, 22px);
}

.books-section__note {
  max-width: 38em;
  padding-block-end: 6px;
  display: grid;
  justify-items: center;
}

.books-section .story-link {
  margin-block-start: 24px;
  color: var(--ink);
}

@media (max-width: 899px) {
  .books-section__head { grid-template-columns: 1fr; gap: 26px; }
  .books-section__note { max-width: 38em; }
}

@media (max-width: 639px) {
  .books-section { padding-block: 88px 112px; }
}


/* ══ CANONICAL DESIGN SYSTEM · typography and interaction ═════════
   Tajawal carries every role. Display, feature, reading, label and action
   tiers are defined once here and consume the shared tokens above. */

/* Oversized decorative marks stay hairline — they are texture, not text. */

/* Utility text under ~16px: labels, captions, footnotes, footer links. */
.numeral,
.closing__base,
.closing__group > p,
.closing__territories,
.advisory__action > p,
.advisory__label,
.publication-shelf__source,
.journal-card__cta,
.journal-story__cta,
.writing__aside > a,
.skip-link { font-weight: 500; }

/* These dim values were tuned against a heavier face; lift them back. */
.closing__base { color: rgba(244,239,232,.7); }
.thesis__role { color: rgba(244,239,232,.74); }

body {
  font-family: var(--display);
  font-weight: var(--weight-body);
  line-height: 1.7;
}

h1, h2, h3, h4,
.hero__name,
.slide__org,
.thesis__quote blockquote {
  letter-spacing: 0;
}

/* Primary displays: strong enough to anchor each chapter without shouting. */
.career__intro h2,
.writing__head h2,
.engagement__intro h2,
.programs__head h2,
.closing__invitation h2 {
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: 0;
  text-wrap: balance;
}

.career__intro h2,
.engagement__intro h2 { font-size: var(--type-section-compact); }

.writing__head h2,
.programs__head h2,
.closing__invitation h2 { font-size: var(--type-section-display); }

/* Feature and card titles: a distinct middle tier. */
.slide__org,
.career-slide h3,
.territories h3,
.journal-story h3,
.journal-card h4,
.knowledge-slide h3,
.program-dossier__body h3 {
  font-weight: var(--weight-subheading);
  letter-spacing: 0;
}

.career-slide h3 {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  text-align: center;
}

.territories h3 { line-height: 1.28; }

/* The knowledge-stage heading is a compact chapter label, not body copy. */

/* The manifesto gets editorial presence without reverting to hairline text. */
.thesis__quote blockquote {
  line-height: 1.38;
}

/* Labels and metadata form a visible but restrained supporting tier. */
.nav a,
.hero__kicker,
.stage__eyebrow,
.thesis__name,
.thesis__role,
.writing__eyebrow,
.journal-story__meta,
.journal-card__meta,
.story-kicker,
.story-meta,
.engagement__kicker,
.closing__eyebrow,
.closing__group > p,
.numeral {
  font-weight: var(--weight-label);
  letter-spacing: 0;
}

.hero__kicker,
.stage__eyebrow,
.writing__eyebrow,
.story-kicker,
.engagement__kicker,
.closing__eyebrow { line-height: 1.45; }

/* Reading text: calm weight, generous leading, consistent minimum size. */
.hero__eyebrow,
.slide__note,
.territories p,
.writing__aside p,
.journal-story__excerpt,
.career__intro > p,
.program-dossier__body > p,
.closing__invitation-action > p,
.engagement__path-copy small {
  font-weight: var(--weight-body);
  letter-spacing: 0;
}

.slide__note,
.territories p,
.writing__aside p,
.journal-story__excerpt,
.career__intro > p,
.program-dossier__body > p,
.closing__invitation-action > p {
  font-size: var(--type-body-copy);
  line-height: var(--leading-body);
}

/* Actions are intentionally firmer than adjacent body copy. */
.nav .nav__contact,
.hero__action,
.writing__aside > a,
.journal-story__cta,
.journal-card__cta,
.story-link,
.engagement__path-copy strong,
.program-dossier__link,
.closing__cta,
.closing__links .closing__primary {
  font-weight: var(--weight-action);
  letter-spacing: 0;
}

/* Text spacing follows the new hierarchy rather than inherited one-offs.
   (.career__intro h2 was dropped from this rule on 2026-09-02: the career title
   takes its label gap from the canonical heading block.) */

.territories p { margin-block-start: clamp(12px, 1.2vw, 22px); }
.hero__sub { margin-block-start: clamp(20px, 1.7vw, 30px); }

@media (max-width: 899px) {
  :root {
    --type-section-display: clamp(40px, 6.25vw, 48px);
    --type-section-compact: clamp(34px, 5.3vw, 40px);
    --radius-media: clamp(18px, 5vw, 26px);
  }

  .career-slide h3 {
    font-size: clamp(26px, 6.4vw, 36px);
    line-height: 1.22;
  }
}

@media (max-width: 639px) {
  .slide__note,
  .territories p,
  .writing__aside p,
  .journal-story__excerpt,
  .career__intro > p,
  .program-dossier__body > p,
  .closing__invitation-action > p { font-size: 17px; }
}

/* Final optical refinements for Tajawal at small and display sizes. */
.hero__name { line-height: 1.16; }

.stage__eyebrow,
.writing__eyebrow,
.journal-story__meta,
.journal-card__meta,
.story-kicker,
.engagement__kicker,
.closing__eyebrow,
.closing__group > p {
  font-size: var(--type-label);
}

.nav .nav__contact { font-size: clamp(13px, .82vw, 15px); }

/* Action grammar: primary fill, secondary surface, editorial text. */
.hero__action,
.feature__cta,
.story-link--light,
.closing__cta {
  font-size: var(--type-action);
}

.writing__aside > a,
.journal-story__cta,
.journal-card__cta {
  font-size: var(--type-label);
}

.hero__action:active,
.feature__cta:active,
.story-link--light:active,
.closing__cta:active {
  transform: translateY(1px) scale(.98);
}

:where(a, button):focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 4px;
}

button:disabled {
  cursor: default;
  opacity: .55;
}

/* Four standard navigation labels only; the contact CTA keeps its scale.
   The ceiling is 13px, not 18px: the CTA tier is clamp(13px, .82vw, 15px), so
   an 18px ceiling let the four secondary labels overtake the page's one
   navigation action on wide canvases (17.58px against 15px at 1920). The ramp
   itself is unchanged and still resolves to 12.69px at 1440 - it now simply
   stops growing at the value it already had there instead of passing the CTA. */
.nav__links a {
  font-size: clamp(11px, calc(1.02vw - 2px), 13px);
}

@media (max-width: 1199px) and (min-width: 900px) {
  .nav__links a { font-size: 12px; }
}

@media (max-width: 899px) {
  .nav__links a { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .preloader, .navbar__inner, .navbar__brand, .nav { transition: none !important; }
  .preloader__progress::after { animation: none; transform: none; }
}

/* Mobile hero art direction: use the owner-supplied portrait as a full-height
   stage, with the existing HTML copy placed in the left text-safe area shown
   by heromobile-ref.png. Desktop keeps the wide hero unchanged. */
@media (max-width: 899px) {
  .hero { min-height: 100svh; overflow: hidden; }
  .hero__stage { min-height: 100svh; height: 100svh; overflow: hidden; }
  .hero__img { position: absolute; inset: 0; z-index: 0; }
  .hero__img picture, .hero__img img { display: block; width: 100%; height: 100%; }
  .hero__img img { object-fit: cover; object-position: center top; }
  .hero__stage::after {
    z-index: 1; inset: 0; height: auto; opacity: 1;
    background: linear-gradient(90deg, rgba(10,7,6,.88) 0%, rgba(10,7,6,.62) 42%, rgba(10,7,6,.12) 75%, transparent 100%),
      linear-gradient(0deg, rgba(10,7,6,.54) 0%, transparent 28%);
  }
  .hero__copy {
    position: absolute; z-index: 2;
    inset-block-start: 28%; inset-inline-start: 6%; inset-inline-end: auto;
    width: 56%; padding: 0; transform: none !important;
    text-align: right; direction: rtl;
  }
  .hero__kicker { font-size: clamp(16px, 4.4vw, 22px); color: var(--sand); }
  .hero__kicker-rule { width: 76px; margin-block: 14px 8px; }
  .hero__name { font-size: clamp(42px, 11.2vw, 62px); line-height: 1.16; white-space: normal; }
  .hero__sub { margin-block-start: 20px; gap: 20px; align-items: flex-start; }
  .hero__eyebrow { font-size: clamp(14px, 3.8vw, 19px); line-height: 1.5; color: var(--sand); }
  .hero__action { font-size: clamp(14px, 3.8vw, 18px); min-height: 52px; padding-inline: 18px; }
}

/* ══ Point of view · restrained editorial quotation ════════════ */
.thesis {
  padding-block: clamp(104px, 8vw, 154px) clamp(92px, 7vw, 136px);
}

.thesis__quote {
  width: min(100%, 1280px);
  margin-inline: auto;
  text-align: center;
}

.thesis__quote blockquote {
  max-width: 34ch;
  margin-inline: auto;
  color: var(--paper-hi);
  font-size: clamp(30px, 3vw, 54px);
  font-weight: var(--weight-subheading);
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

.thesis__quote blockquote::before,
.thesis__quote blockquote::after {
  color: var(--burgundy);
  font-size: 1.28em;
  font-weight: var(--weight-heading);
  line-height: 0;
}

.thesis__quote blockquote::before {
  content: "“";
  margin-inline-end: .08em;
  vertical-align: -.12em;
}

.thesis__quote blockquote::after {
  content: "”";
  margin-inline-start: .08em;
  vertical-align: -.18em;
}

.thesis__quote figcaption {
  justify-content: center;
  margin-block-start: clamp(28px, 2.5vw, 46px);
  text-align: center;
}

.territories {
  margin-block-start: clamp(28px, 3vw, 48px);
  align-items: stretch;
}

.territories > li,
.territories > li:first-child {
  padding-inline: clamp(24px, 3vw, 58px);
  border-inline-start: 0;
  border-block-end: 0;
  text-align: center;
}

.territories > li:nth-child(2) { transform: none; }

.territories h3,
.territories p {
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 639px) {
  .thesis {
    padding-block: 92px 78px;
  }

  .thesis__quote blockquote {
    max-width: 20ch;
    font-size: clamp(27px, 7.8vw, 34px);
    line-height: 1.62;
  }

  .thesis__quote figcaption {
    flex-direction: column;
    gap: 7px;
  }
}

/* ══ Verified institutions · editorial credibility field ════════
   Board, career and first-party media relationships share one factual
   visual field. The language never implies that every institution is a
   sponsor, client or press appearance. */
.partners {
  position: relative;
  overflow: clip;
  background: var(--paper-hi);
  color: var(--ink);
}

/* ══ Books · one supplied plate ══════════════════════════════════
   Every cover model this project has carried — the editorial 3D foundation,
   the React 19 + Motion 13 spring gallery, the canonical 6 × 9 plane and the
   flat `.book-object` pocket shelf that superseded them — was retired on
   4 Sep 2026. #knowledge now renders the owner-supplied plate
   `assets/books-notext.png` and nothing else, and the geometry of that plate
   is owned by the `Homepage compact IA · books` block further down. */


/* The waveform is a single continuous SVG ribbon, never a bar array. */


html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Geometry only. The enclosing card (border, radius, tinted fill, inset
   shadow, clipping) was retired with the 2026-09-01 integration; the open-row
   treatment lower in this file is the single owner of the list's surface. */

/* Wash and edge-marker sizing are owned by the integration block below; only
   the text colour survives here. */

/* ══ Video · cinematic editorial screening room ════════════════
   Six authentic posters remain visible in normal page flow. Playback is
   enhanced on demand in one same-page dialog, so YouTube never contributes
   six heavyweight embeds to the initial render. */

/* The lead film has enough horizontal room for its full Arabic title. Keep
   that title editorially prominent and unbroken on tablet/desktop; compact
   phones retain the natural two-line fallback below. */

body.video-lightbox-open { overflow: hidden; }

.video-lightbox {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  background: rgba(8, 7, 6, .96);
  color: var(--paper-hi);
}

.video-lightbox::backdrop { background: rgba(8, 7, 6, .8); }

.video-lightbox__inner {
  width: min(100% - (2 * var(--gutter)), 1440px);
  min-height: 100%;
  margin-inline: auto;
  padding-block: clamp(82px, 8vh, 120px) clamp(44px, 5vh, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-lightbox__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 42px 100px rgba(0, 0, 0, .5);
}

.video-lightbox__player iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.video-lightbox__caption {
  padding-block-start: clamp(22px, 2vw, 34px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
  border-block-end: 1px solid rgba(250, 247, 241, .22);
  padding-block-end: clamp(22px, 2vw, 34px);
}

.video-lightbox__caption p {
  flex: 0 0 auto;
  color: #d9aab8;
  font-size: var(--type-label);
  font-weight: var(--weight-label);
}

.video-lightbox__caption h3 {
  font-size: clamp(24px, 2.2vw, 40px);
  font-weight: var(--weight-subheading);
  line-height: 1.3;
  text-align: start;
}

.video-lightbox__close {
  position: fixed;
  z-index: 2;
  inset-block-start: clamp(20px, 3vw, 42px);
  inset-inline-end: clamp(20px, 3vw, 42px);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(250, 247, 241, .5);
  border-radius: 50%;
  background: rgba(13, 11, 10, .5);
  color: var(--paper-hi);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.video-lightbox__close::before,
.video-lightbox__close::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 20px;
  height: 1px;
  background: currentColor;
}

.video-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.video-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.video-lightbox__close:hover { background: var(--burgundy); transform: rotate(4deg); }

@media (max-width: 639px) {
  .video-lightbox__inner { width: 100%; padding: 78px 0 30px; justify-content: flex-start; }
  .video-lightbox__caption { margin-inline: var(--gutter); flex-direction: column; align-items: flex-start; gap: 8px; }
  .video-lightbox__caption h3 { font-size: clamp(22px, 6.4vw, 28px); }
  .video-lightbox__close { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-lightbox__close { transition: none; }
}

/* Legacy institutional rules disabled after the equal-card redesign.
.standing-showcase,
.js .standing-showcase {
  --standing-accent: #9d2343;
  --standing-card: #fbf7f2;
  height: auto;
  padding: clamp(12px, 1.35vw, 26px);
  background: #f7f2ec;
  color: #151311;
  scroll-margin-top: 96px;
}

.standing-showcase__shell {
  width: min(100%, 2180px);
  margin-inline: auto;
}

.standing-showcase__header {
  padding-inline: clamp(8px, 1.8vw, 34px);
  margin-block: clamp(10px, 1vw, 18px) clamp(18px, 1.4vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  direction: rtl;
  text-align: right;
}

.standing-showcase__title {
  max-inline-size: clamp(390px, 27vw, 500px);
  margin: 0;
  font-size: clamp(44px, 3.2vw, 58px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.standing-feature {
  position: relative;
  min-height: clamp(500px, 31vw, 590px);
  overflow: clip;
  border: 1px solid rgba(82, 58, 45, .08);
  border-radius: clamp(22px, 1.8vw, 38px);
  background: #e9e1d8;
  box-shadow: 0 18px 46px rgba(68, 48, 38, .055);
  isolation: isolate;
}

.standing-feature__media,
.standing-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.standing-feature__media { margin: 0; }

.standing-feature__media img {
  object-fit: cover;
  object-position: center center;
  filter: saturate(.92) contrast(.97) brightness(1.035);
  transition: transform .8s var(--ease-expressive);
}

.standing-feature::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(251, 248, 243, 1) 0%, rgba(251, 248, 243, .985) 24%, rgba(251, 248, 243, .91) 35%, rgba(251, 248, 243, .56) 46%, rgba(251, 248, 243, .16) 58%, rgba(251, 248, 243, 0) 67%),
    linear-gradient(180deg, rgba(255, 252, 248, .07), rgba(77, 48, 32, .04));
}

.standing-feature__copy {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  left: 0;
  width: min(38%, 610px);
  min-height: inherit;
  padding: clamp(38px, 2.8vw, 58px) clamp(42px, 4.2vw, 86px) clamp(28px, 2vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  direction: rtl;
  text-align: right;
}

.standing-feature__badge {
  min-height: clamp(34px, 2.2vw, 42px);
  padding-inline: clamp(18px, 1.5vw, 28px);
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--standing-accent);
  font-size: clamp(14px, .95vw, 18px);
  font-weight: 600;
}

.standing-feature__name {
  margin: clamp(12px, 1vw, 18px) 0 0;
  font-size: clamp(36px, 2.6vw, 50px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.035em;
}

.standing-feature__role {
  margin: clamp(8px, .7vw, 13px) 0 0;
  color: var(--standing-accent);
  font-size: clamp(17px, 1.2vw, 22px);
  line-height: 1.5;
  font-weight: 600;
}

.standing-feature__divider {
  width: min(100%, 380px);
  height: 1px;
  margin-block: clamp(12px, .9vw, 18px);
  background: rgba(157, 35, 67, .28);
}

.standing-feature__description {
  margin: 0;
  color: #625d58;
  font-size: clamp(17px, 1.22vw, 22px);
  line-height: 1.75;
  font-weight: 400;
}

.standing-feature__action {
  min-width: clamp(260px, 18vw, 370px);
  min-height: clamp(56px, 3.1vw, 64px);
  margin-block-start: clamp(14px, 1.2vw, 24px);
  padding-inline: clamp(24px, 2vw, 42px);
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  border: 2px solid rgba(157, 35, 67, .55);
  border-radius: 12px;
  color: var(--standing-accent);
  background: rgba(255, 251, 247, .26);
  font-size: clamp(17px, 1.15vw, 24px);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--motion-standard), background-color var(--motion-standard), border-color var(--motion-standard), transform var(--motion-standard);
}

.standing-feature__action svg { flex: 0 0 auto; }
.standing-feature__action:hover,
.standing-feature__action:focus-visible { color: #fff; background: var(--standing-accent); border-color: var(--standing-accent); }

.standing-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 34px);
  margin-block-start: clamp(14px, 1.3vw, 26px);
  margin-block-end: clamp(24px, 2vw, 40px);
  direction: ltr;
  scroll-margin-top: 100px;
}

.standing-role-card {
  height: clamp(290px, 17vw, 320px);
  min-height: 0;
  display: grid;
  grid-template-columns: 57.2% 42.8%;
  overflow: clip;
  border: 1px solid rgba(82, 58, 45, .08);
  border-radius: clamp(20px, 1.7vw, 34px);
  background: var(--standing-card);
  color: #171411;
  box-shadow: 0 16px 40px rgba(68, 48, 38, .045);
  text-decoration: none;
  direction: ltr;
}

.standing-role-card:last-child { grid-template-columns: 61% 39%; }

.standing-role-card__media {
  position: relative;
  grid-column: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.standing-role-card__media::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: -1px;
  width: clamp(76px, 7.2vw, 132px);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 247, 242, 0) 0%, rgba(251, 247, 242, .24) 32%, rgba(251, 247, 242, .7) 72%, var(--standing-card) 100%);
}

.standing-role-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-expressive), filter .7s var(--ease-expressive);
}

.standing-role-card:first-child .standing-role-card__media img {
  object-position: 36% center;
  filter: saturate(1.2) contrast(1.035) brightness(1.035);
}

.standing-role-card:last-child .standing-role-card__media img {
  object-position: 38% center;
  filter: saturate(.8) contrast(.95) brightness(1.07) sepia(.045);
}

.standing-role-card__copy {
  position: relative;
  grid-column: 2;
  padding-block: clamp(30px, 2vw, 38px) clamp(16px, 1vw, 20px);
  padding-inline-start: clamp(78px, 5.8vw, 112px);
  padding-inline-end: clamp(18px, 1.4vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  direction: rtl;
  text-align: right;
}

.standing-role-card__icon {
  position: absolute;
  inset-block-start: clamp(24px, 1.7vw, 32px);
  inset-inline-start: clamp(20px, 1.5vw, 28px);
  width: clamp(58px, 3.6vw, 72px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--standing-accent);
  background: #f5ede6;
}

.standing-role-card__icon svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.standing-role-card h3 {
  inline-size: clamp(138px, 8.9vw, 166px);
  margin: 0;
  font-size: clamp(30px, 2vw, 38px);
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -.035em;
}

.standing-role-card strong {
  margin-block-start: clamp(9px, .7vw, 13px);
  color: var(--standing-accent);
  font-size: clamp(14px, .9vw, 18px);
  font-weight: 600;
  white-space: nowrap;
}

.standing-role-card p {
  margin: clamp(7px, .55vw, 10px) 0 0;
  color: #6c6660;
  font-size: clamp(14px, .85vw, 17px);
  line-height: 1.75;
  white-space: nowrap;
}

.standing-role-card__arrow {
  margin-block-start: auto;
  font: 300 clamp(26px, 1.6vw, 34px)/1 sans-serif;
  transition: transform var(--motion-standard) var(--ease-expressive), color var(--motion-standard);
}

.standing-role-card:hover .standing-role-card__media img,
.standing-role-card:focus-visible .standing-role-card__media img { transform: scale(1.035); }
.standing-role-card:hover .standing-role-card__arrow,
.standing-role-card:focus-visible .standing-role-card__arrow { color: var(--standing-accent); transform: translateX(-7px); }

@media (min-width: 1181px) {
  .standing-role-card:first-child .standing-role-card__copy { padding-inline-start: clamp(132px, 8vw, 150px); }
  .standing-role-card:last-child .standing-role-card__copy { padding-inline-start: clamp(120px, 7.4vw, 138px); }
}

@media (max-width: 1180px) {
  .standing-feature__copy { width: 47%; padding-inline: clamp(30px, 4vw, 60px); }
  .standing-showcase__title { font-size: clamp(45px, 5.1vw, 66px); }
  .standing-role-card,
  .standing-role-card:last-child { grid-template-columns: 50% 50%; }
  .standing-role-card__copy {
    padding-block: 36px 22px;
    padding-inline-start: clamp(76px, 9vw, 104px);
    padding-inline-end: clamp(24px, 3vw, 38px);
  }
  .standing-role-card__icon { width: 60px; inset-inline-start: 24px; }
}

@media (max-width: 899px) {
  .standing-showcase { padding: 12px; }
  .standing-feature { min-height: 0; }
  .standing-feature__media,
  .standing-feature__media img { position: relative; inset: auto; }
  .standing-feature__media { aspect-ratio: 16 / 9; }
  .standing-feature__media img { object-position: 66% center; }
  .standing-feature::after { display: none; }
  .standing-feature__copy {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    padding: clamp(38px, 7vw, 64px) clamp(26px, 7vw, 58px) clamp(34px, 7vw, 58px);
  }
  .standing-feature__description { line-height: 1.9; }
  .standing-feature__action { margin-block-start: 28px; }
  .standing-roles { grid-template-columns: 1fr; margin-block-end: 48px; }
  .standing-role-card { min-height: 310px; }
}

@media (max-width: 700px) {
  .standing-role-card strong,
  .standing-role-card p { white-space: normal; }
}

@media (max-width: 560px) {
  .standing-feature__media { aspect-ratio: 4 / 3; }
  .standing-feature__media img { object-position: 69% center; }
  .standing-feature__copy { padding-inline: 24px; }
  .standing-showcase__title { max-inline-size: 100%; font-size: clamp(36px, 10vw, 44px); white-space: nowrap; }
  .standing-feature__name { font-size: 39px; }
  .standing-feature__description { font-size: 16px; }
  .standing-feature__description br { display: none; }
  .standing-feature__action { width: 100%; min-width: 0; min-height: 62px; }
  .standing-role-card,
  .standing-role-card:last-child { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .standing-role-card__media { grid-column: 1; aspect-ratio: 16 / 10; }
  .standing-role-card__media::after { display: none; }
  .standing-role-card__copy { grid-column: 1; min-height: 280px; padding: 28px 28px 24px; }
  .standing-role-card__icon { inset-block-start: 26px; inset-inline-start: 24px; width: 54px; }
  .standing-role-card h3 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .standing-feature__media img,
  .standing-role-card__media img,
  .standing-role-card__arrow { transition: none; }
  .standing-role-card:hover .standing-role-card__media img,
  .standing-role-card:focus-visible .standing-role-card__media img { transform: none; }
}

*/

/* ══ Institutional presence — canonical equal-card system ════════════════ */
.standing-showcase,
.js .standing-showcase {
  --standing-accent: #9d2343;
  --standing-card: #fbf7f2;
  height: auto;
  padding: clamp(12px, 1.35vw, 26px);
  background: #f7f2ec;
  color: #151311;
  scroll-margin-top: 96px;
}

.standing-showcase__shell {
  width: min(100%, 2180px);
  margin-inline: auto;
}

.standing-showcase__header {
  padding-inline: clamp(8px, 1.8vw, 34px);
  margin-block: clamp(10px, 1vw, 18px) clamp(18px, 1.4vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  direction: rtl;
  text-align: right;
}

.standing-showcase__title {
  max-inline-size: clamp(390px, 27vw, 500px);
  margin: 0;
  font-size: clamp(44px, 3.2vw, 58px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.04em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .standing-showcase { padding: 12px; }
  .standing-showcase__title {
    max-inline-size: 100%;
    font-size: clamp(36px, 10vw, 44px);
    white-space: nowrap;
  }
}

/* ══ Homepage coherence · canonical UX/UI contract ══════════════
   This final layer deliberately owns the values shared by every chapter.
   Section-specific composition stays intact; typography, navigation offsets,
   focus treatment and reveal motion now come from one system. */
:root {
  --type-chapter-title: var(--type-section-display);
  --type-section-title: var(--type-section-compact);
  --type-feature-title: clamp(30px, 2.65vw, 50px);
  --anchor-offset: clamp(82px, 6.25vw, 112px);
  --motion-reveal: .64s;
  --motion-reveal-distance: 18px;
  --focus-ring-width: 3px;
}

.chapter,
#programs {
  scroll-margin-block-start: var(--anchor-offset);
}

/* RETIRED 2026-09-02 - the two per-section chapter/section title tiers that
   used to sit here (.partners__intro h2 / .writing__head h2 /
   .books-section__head h2 / .closing__invitation h2, and
   .standing-showcase__title / .career__intro h2) are replaced by
   the CANONICAL CHAPTER HEADING SYSTEM near the end of this file. Section
   heading type is chosen once, there, and nowhere else. */

/* Make reveal motion perceptible without hiding content during quick scans. */
.js [data-reveal] {
  transform: translateY(var(--motion-reveal-distance));
  transition-duration: var(--motion-reveal);
  transition-timing-function: var(--ease-expressive);
}

/* One visible focus contract and a 44px minimum pointer target for controls. */
:where(a, button, input):focus-visible {
  outline-width: var(--focus-ring-width);
  outline-style: solid;
  outline-offset: 4px;
}

.hero__action {
  min-block-size: var(--control-height);
}

@media (max-width: 768px) {
  :root {
    --type-section-display: clamp(40px, 10.5vw, 48px);
    --type-section-compact: clamp(36px, 9.4vw, 42px);
    --type-feature-title: clamp(34px, 9vw, 42px);
    --anchor-offset: 78px;
    --motion-reveal-distance: 12px;
  }

  .standing-showcase__title { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══ Institutional cards · reference-aligned content geometry ═══
   All three copy panels use the same proportional anchors. This mirrors the
   supplied reference and prevents title length from shifting later content. */

/* ══ Homepage grammar · titles and surfaces ══════════════════════
   The homepage now has three title levels only:
   1. the identity title in the hero;
   2. one chapter title pattern for every major section;
   3. one compact section title for features inside a chapter.

   Surfaces follow content purpose rather than individual component taste:
   editorial/proof chapters use one warm paper, immersive chapters use one
   ink surface, and the audio player alone receives the burgundy accent.

   The typeface for levels 2 and 3 is NOT chosen here. Both read
   --font-section-title / --weight-section-title from the final typography
   contract at the bottom of this file; see the "Title-face lock" there, which
   also carries the section-title slant. */
:root {
  --surface-editorial: #f3eee7;
  --surface-card: #faf7f1;
  --surface-immersive: #100d0c;
  --surface-audio: #3b0d1f;
  --section-title-size: clamp(38px, 3.3vw, 62px);
}

/* Title contract: hierarchy is deterministic. Titles retain their tier size;
   section measures and authored breaks—not runtime shrinking—control wrapping. */
main :where(h1, h2, h3):not(.sr-only),
.closing :where(h2, h3):not(.sr-only) {
  text-wrap: balance;
}

.surface--light,
.surface--light.engagement,
.surface--light .engagement,
.surface--light .programs,
.standing-showcase.surface--light,
.partners.surface--light,
.writing.surface--light,
.books-section.surface--light,
.work.surface--light {
  background: var(--surface-editorial);
  color: var(--ink);
}

.surface--dark,
.agenda.surface--dark,
.closing.surface--dark {
  background: var(--surface-immersive);
  color: var(--paper-hi);
}

/* Chapter/section heading contract: a heading is label + title + an OPTIONAL
   summary, and nothing else. Heading containers, labels, titles and summaries
   render NO decorative rule -- no rule span, no ::before/::after bar, no border
   on .chapter-heading, .chapter-label, .chapter-title, .chapter-summary,
   .section-label or .section-title, and no per-section variant of them.
   Separation comes from the type scale and the two canonical gap tokens
   (--chapter-label-title-gap, --chapter-title-summary-gap) alone.
   (Section-internal dividers -- card rules, nav indicators, media overlays --
   are out of scope and unaffected.)
   The values below are the generic fallback for a .chapter-heading outside the
   eight homepage chapters; the CANONICAL CHAPTER HEADING SYSTEM near the end of
   this file is the authority for the eight. */
.chapter-heading {
  width: min(100%, var(--chapter-heading-width));
  margin-left: auto;
  margin-right: 0;
  direction: rtl;
  text-align: right;
}

.chapter-label,
.section-label {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--burgundy);
  font-size: var(--chapter-label-size);
  font-weight: var(--weight-label);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: right;
}

.chapter-title {
  width: auto;
  max-width: 14ch;
  margin: 0;
  color: var(--ink);
  /* Title face and weight are NOT set per section: both come from the single
     --font-section-title / --weight-section-title pair in the final
     typography contract below. Change the token, change every section title. */
  font-family: var(--font-section-title);
  font-size: var(--chapter-title-size);
  font-weight: var(--weight-section-title);
  line-height: var(--leading-display);
  letter-spacing: 0;
  text-align: right;
  text-wrap: balance;
}

.chapter-summary {
  color: var(--on-paper-soft);
  font-size: var(--chapter-summary-size);
  line-height: var(--leading-body);
  text-align: right;
}

.surface--dark .chapter-label,
.surface--dark .section-label { color: var(--rose); }

.surface--dark .chapter-title,
.surface--dark .section-title { color: var(--paper-hi); }

.surface--dark .chapter-summary { color: rgba(250, 247, 241, .66); }

/* Chapter-header layouts all consume the same type and spacing tokens. */
.standing-showcase__header.chapter-heading {
  display: block;
  padding-inline: max(
    clamp(8px, 1.8vw, 34px),
    calc(var(--gutter) - clamp(12px, 1.35vw, 26px))
  );
  padding-block: clamp(22px, 2.2vw, 38px) clamp(28px, 2.7vw, 48px);
}

.writing__intro.chapter-heading { width: 100%; }

.books-section__head {
  justify-items: stretch;
  text-align: right;
}

.books-section__head > .chapter-heading,
.books-section__note {
  width: min(100%, var(--chapter-heading-width));
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.books-section__note {
  align-items: flex-start;
  justify-items: start;
}


@media (max-width: 768px) {
  :root {
    --section-title-size: clamp(34px, 9vw, 40px);
  }
}

/* All editorial and program cards share one stable title tier. */

@media (max-width: 899px) {
  :root { --card-title-size: 24px; }
}


/* ══ Final typography contract · 2026-09-01 ════════════════════
   Titles remain complete and visible. Authored <br> elements are the only
   forced breaks, so no title is clamped, ellipsized, or runtime-resized.
   Every visible label/title pair consumes the same spacing token.

   TITLE FACE IS GLOBAL, NOT PER SECTION. --font-section-title,
   --weight-section-title and --section-title-slant are the only place the
   section-heading typeface, weight and slant are chosen. Every visible
   homepage section h2 (standing-showcase, career, partners, ESG, writing,
   books, video, work, programs, contact) resolves all three from these
   tokens, so switching the editorial treatment is a one-token edit and no
   section may declare its own. The whole page, titles included, is Tajawal;
   section titles differ only by the synthetic reverse slant. Body, UI, cards,
   labels, navigation and buttons stay upright via --display. */
:root {
  /* Tajawal, the project display face: section titles share the same family as
     the rest of the system and are set apart by slant, not by a second face. */
  --font-section-title: var(--display);
  /* The Tajawal display weight (600), same as every other display element. */
  --weight-section-title: var(--weight-display);
  /* Synthetic reverse slant for section titles. Negative because Arabic runs
     right-to-left, so the leading edge leans away from the reading direction.
     Tajawal ships no italic face, so font-synthesis: style renders it. */
  --section-title-slant: -8deg;
  --section-title-reduction: 6px;
  --section-title-size: calc(clamp(38px, 3.3vw, 62px) - var(--section-title-reduction));
  --card-title-size: clamp(26px, 2vw, 34px);
  --compact-video-title-size: clamp(16px, 1.1vw, 20px);
  /* COMPONENT label gap only - hero kicker, card / episode / film meta lines.
     Chapter headings do NOT read this: they use --chapter-label-title-gap from
     the CANONICAL CHAPTER HEADING SYSTEM near the end of this file. */
  --component-label-title-gap: clamp(12px, 1vw, 16px);
}

.hero__name,
.chapter-title,
.section-title,
.journal-story h3,
.publication-shelf h3,
.program-dossier__body h3 {
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
}

/* A heading with one authored break is exactly two visible, untruncated lines. */
:is(h1, h2, h3, h4):has(> br) { white-space: nowrap !important; }

/* COMPONENT label/title pairs only. .chapter-label / .section-label were
   removed from both selector lists on 2026-09-02: forcing chapter heading
   spacing with !important is exactly the override path the CANONICAL CHAPTER
   HEADING SYSTEM replaces, and no rule in that block uses !important. */
.journal-story__meta,
.publication-shelf__eyebrow,
.hero__kicker {
  margin-block-end: 0 !important;
}

/* The hero inserts a rule between its label and title; its total optical gap
   still resolves to the same shared token. */
.hero__kicker { margin-block-start: 0; }
.hero__kicker-rule { margin-block: calc(var(--component-label-title-gap) - 2px) 0; }
.hero__name { margin-block: 0; }

@media (min-width: 900px) and (max-width: 1199px) {
  :root { --card-title-size: 24px; }

  .hero__name { font-size: clamp(44px, 5vw, 54px); }
}

@media (min-width: 640px) and (max-width: 768px) {
  :root {
    --section-title-size: calc(clamp(34px, 9vw, 40px) - var(--section-title-reduction));
  }
}

@media (max-width: 639px) {
  :root {
    --section-title-size: calc(clamp(34px, 9vw, 40px) - var(--section-title-reduction));
    --card-title-size: 24px;
  }
}

@media (max-width: 360px) {
  :root {
    --card-title-size: 22px;
    --compact-video-title-size: 15px;
  }

  .hero__name { font-size: 42px; }
}


/* One functional surface for the whole player: a dark burgundy-tinted inset
   field with a single hairline edge and a thin top refraction. No glass,
   no glow, no second card. */

/* The SVG UA default is fill: black, and fill inherits. Neutralising it on the
   root means no descendant can ever paint as a filled silhouette by omission;
   the one element that must be filled (the progress tint) re-declares its own
   paint below. The paths also carry fill="none" as a presentation attribute so
   they stay strokes even before this sheet applies. */

/* preserveAspectRatio="none" stretches the 800x120 canvas to the console
   width, so every stroke opts out of that scaling and stays hairline-true. */

/* The only filled node, and it paints solely inside the progress clip group. */

/* Motion is transform/opacity only, and only while the episode is actually
   loading or playing. */

/* Slim, precise seek control under the wave, with a 44px pointer target.
   The webkit and gecko track pseudo-elements are declared as separate rules
   on purpose: grouping them invalidates the whole selector list in both
   engines, which is why the earlier grouped declarations never painted. */


/* Restrained active state: a burgundy wash plus one edge marker. */

/* ═══════════════════════════════════════════════════════════════════════
   FINAL ARCHITECTURE · compact homepage system · 2026-09-02
   ───────────────────────────────────────────────────────────────────────
   One coherent closing layer for the live markup. Every section below is
   authored against a 1280x720 desktop target and a total main-content budget
   of roughly 9.5 perceived viewports plus a compact footer.

   Contract kept from the layers above, never re-litigated here:
     · Tajawal everywhere (--display / --font-section-title are the same face).
     · Section titles keep the global synthetic reverse slant; only the SIZE
       tokens are re-scaled below, never the family, weight or slant.
     · Component titles (episode / article / card h3) stay upright.
     · One accent (burgundy #8a1538 / rose), warm paper, off-black. Nothing else.
     · No line clamps, no ellipsis, no truncation.
     · Motion is transform/opacity wherever the component does not need layout
       sizing (career expansion and the work tab panels are the two exceptions,
       and both are behaviour the markup/JS already depends on).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --edge-light: rgba(82, 58, 45, .13);
  --edge-light-soft: rgba(82, 58, 45, .08);
  --edge-dark: rgba(250, 247, 241, .13);
  --edge-dark-soft: rgba(250, 247, 241, .07);
  --shadow-tint-light: 0 10px 26px rgba(68, 48, 38, .06);
  --radius-panel: clamp(12px, 1.1vw, 18px);
  --radius-tile: clamp(10px, .9vw, 14px);
  --stack-xs: clamp(6px, .5vw, 9px);
  --stack-sm: clamp(10px, .85vw, 14px);
  --stack-md: clamp(16px, 1.4vw, 24px);
  --stack-lg: clamp(26px, 2.4vw, 40px);
  --band-pad: clamp(40px, 5.2vh, 72px);

  /* -- Separator tokens -------------------------------------------------
     A SEPARATOR divides repeated siblings (agenda rows, story rows, episode
     rows, programme rows) or marks a footer subgroup. It is NOT the same
     thing as the --edge-* tokens above: an edge draws the outline of a card,
     input, media frame or inset panel and belongs to that component. Never
     conflate the two, and never author a raw rgba() hairline for a separator.
     Chapters are separated by surface change and vertical space only - a
     top-level chapter never carries a separator. Full policy:
     docs/20_DESIGN_SYSTEM_MAINTENANCE.md section 4.1 Separator policy. */
  --separator-size: 1px;
  --separator-on-light: rgba(82, 58, 45, .14);
  --separator-on-dark: rgba(250, 247, 241, .11);
  --separator-accent: var(--burgundy);
}

/* ── Shared shell, surface rhythm and focus ─────────────────────────────
   Light / dark alternation across the page: hero(dark) standing(light)
   agenda(dark) thinking(light) knowledge(light) media(dark)
   career(light) work(light) footer(dark). The two light runs are separated
   by their own edge hairlines rather than by another surface value. */
.standing.chapter,
.writing.chapter,
.books-section.chapter,
.work.chapter {
  scroll-margin-block-start: var(--anchor-offset);
}

/* Chapter boundaries carry NO separator line (separator policy, rule 1).
   Consecutive paper chapters are told apart by their shared vertical band
   padding alone; the hairline that used to sit on Books and Collaboration was
   a randomised rule on two chapters out of ten and has been removed. */
.books-section.surface--light,
.work.surface--light { border-block-start: 0; border-block-end: 0; }

/* One focus treatment for every interactive control on the page. */
.presence-card__link:focus-visible,
.work__tab:focus-visible,
.work__program-link:focus-visible,
.journal-story:focus-visible,
.video-lightbox :is(a, button):focus-visible,
.career-slide:focus-visible {
  outline-width: var(--focus-ring-width);
  outline-style: solid;
  outline-offset: 3px;
}

.presence-card__link:focus-visible,
.work__tab:focus-visible,
.work__program-link:focus-visible,
.journal-story:focus-visible,
.career-slide:focus-visible { outline-color: var(--focus-ring-light); }

.video-lightbox :is(a, button):focus-visible { outline-color: var(--focus-ring-dark); }

/* ── Compact desktop type scale ─────────────────────────────────────────
   The page has to read as nine chapters inside ten viewports, so the shared
   title tokens step down at desktop. Family / weight / slant are untouched:
   only these size tokens move, and every section title still resolves through
   the global title-face lock. */
@media (min-width: 900px) {
  :root {
    --section-title-size: clamp(28px, 2.5vw, 38px);
    --card-title-size: clamp(18px, 1.5vw, 24px);
    --component-label-title-gap: clamp(8px, .7vw, 12px);
    --anchor-offset: clamp(72px, 5.4vw, 96px);
  }
}

/* ═══ 1 · HERO ══════════════════════════════════════════════════════════
   Normalised from 145svh (1044px at a 720 viewport) to exactly one viewport.
   The composition — full-bleed portrait, right-hand copy axis, kicker rule,
   action link — is untouched.

   main.js drives the parallax from (hero.offsetHeight - innerHeight); with a
   one-viewport hero that span collapses, so the script's progress value moves
   in a single step as the hero leaves. The transitions below turn that step
   into a continuous exit without touching main.js: a CSS transition applies to
   inline-style changes exactly as it does to class changes. */
.js .hero { height: 100svh; }
.hero__stage,
.js .hero__stage { height: 100svh; }

.hero__img,
.hero__copy { transition: transform .62s var(--ease-expressive); }

.hero__sub { transition: opacity .48s var(--ease-expressive); }

/* ═══ 2 · STANDING · institutional presence ═════════════════════════════
   One viewport including the heading. Four cards, deliberately unequal:
   Hawkama holds half the field across both rows, Estithmar is the secondary,
   Dlala and ESG are the compact pair. Twelve columns, two rows. */
.standing.standing-showcase,
.js .standing.standing-showcase {
  min-height: 100svh;
  padding: 0;
  display: grid;
  align-content: center;
  background: var(--surface-editorial);
  color: var(--ink);
}

.standing-showcase .standing-showcase__shell {
  width: 100%;
  max-width: none;
  padding: var(--band-pad) var(--gutter);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--stack-lg);
}

/* Institutional presence · CONSOLIDATED 2026-09-02.
   The unscoped `.presence-*` layer that used to sit here declared the same
   composition a second time, one specificity step below the `#standing`
   rules further down, so every value had to be maintained twice and the two
   copies had already drifted. There is now exactly one authority for this
   component: the `#standing · institutional presence` block below. Nothing
   is redeclared here. */

/* ═══ 3 · AGENDA · point of view ════════════════════════════════════════
   A dark asymmetric split: the quotation dominates, the three territories are
   open rows separated by hairlines. No cards, no boxes. */
.agenda.chapter { background: var(--surface-immersive); }

.agenda .thesis {
  min-height: 80svh;
  padding: var(--band-pad) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(36px, 4.6vw, 88px);
  border-block: 0;
  background: transparent;
}

.agenda .thesis__quote { min-width: 0; margin: 0; }

.agenda .thesis__quote blockquote {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(22px, 1.98vw, 32px);
  font-weight: 300;
  line-height: 1.44;
  letter-spacing: -.02em;
  color: var(--paper-hi);
  text-wrap: pretty;
}

.agenda .thesis__quote figcaption { margin-block-start: var(--stack-lg); }
.agenda .thesis__name { font-size: clamp(14px, 1vw, 17px); }
.agenda .thesis__role { font-size: clamp(12px, .84vw, 14px); }

.agenda .territories {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-block-start: var(--separator-size) solid var(--separator-on-dark);
}

.agenda .territories > li,
.agenda .territories > li:first-child {
  padding: clamp(14px, 1.5vw, 22px) 0;
  border-inline-start: 0;
  border-block-end: var(--separator-size) solid var(--separator-on-dark);
  transform: none;
  text-align: start;
}

.agenda .territories > li:last-child { border-block-end: 0; }

.agenda .territories h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 26px);
  font-weight: var(--weight-subheading);
  font-style: normal;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--paper-hi);
}

.agenda .territories p {
  margin-block-start: var(--stack-xs);
  max-width: 46ch;
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.7;
  color: rgba(244, 239, 232, .62);
}

/* ═══════════════════════════════════════════════════════════════════════
   Homepage compact IA · opening chapters · 2026-09-02
   ───────────────────────────────────────────────────────────────────────
   FINAL LAYER. Scope is exactly the three live opening structures: #top,
   #standing (.presence-grid / .presence-card) and #agenda (thesis +
   territories). Nothing else on the page is touched. This block is last in
   the file, so it settles every legacy rule above it without !important.
   (A fourth structure, #esg-2026, was in scope until 5 Sep 2026; the
   chapter and every rule this layer aimed at it are gone.)

   Contract, unchanged from the layers above:
     · Tajawal only. Warm paper + off-black + ONE burgundy accent.
       No purple, no neon, no glow, no pure black, no gradient on text.
     · Section h2 chapter titles keep the global synthetic reverse slant
       (--section-title-slant); labels, card titles, body and UI stay upright.
     · A heading is label + title and nothing else: every decorative rule /
       red bar pseudo-element inside these four sections is switched off.
     · Two visible lines maximum on a heading, never a clamp or an ellipsis.
     · Motion is transform + opacity only, and all of it stops under
       prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* The chapter-heading grammar for the opening four (label size, label-to-title
   gap, title measure, no-truncation guards) was removed from here on
   2026-09-02: it is now declared exactly once, in the CANONICAL CHAPTER
   HEADING SYSTEM near the end of this file. Only the decorative-rule kills
   below remain scoped to these sections. */

/* Kill the legacy red title rules: no bar, no span, no border on any
   heading container, label or title inside these sections. */
#top :is(.hero__kicker, .hero__kicker-rule, .hero__eyebrow)::before, #top :is(.hero__kicker, .hero__kicker-rule, .hero__eyebrow)::after, #standing :is(.chapter-heading, .chapter-label, .chapter-title,
              .standing-showcase__header, .standing-showcase__eyebrow,
              .standing-showcase__title)::before, #standing :is(.chapter-heading, .chapter-label, .chapter-title,
              .standing-showcase__header, .standing-showcase__eyebrow,
              .standing-showcase__title)::after, #agenda :is(.thesis, .territories, .territories h3)::before, #agenda :is(.thesis, .territories h3)::after {
  content: none;
  display: none;
}

#standing :is(.chapter-heading, .chapter-label, .chapter-title,
              .standing-showcase__header, .standing-showcase__title) {
  border: 0;
  background-image: none;
}

/* ═══ #top · identity ═══════════════════════════════════════════════════
   One viewport, not the legacy 145svh (1044px at a 720 line). min-height
   holds the floor; the stage no longer grows past it when the copy fits. */
#top.hero,
.js #top.hero {
  min-height: 100svh;
  height: auto;
}

#top .hero__stage,
.js #top .hero__stage {
  min-height: 100svh;
  height: 100svh;
  max-height: 100svh;
}

#top .hero__img,
#top .hero__copy { transition: transform .62s var(--ease-expressive); }
#top .hero__sub { transition: opacity .48s var(--ease-expressive); }

/* ═══ #standing · institutional presence ════════════════════════════════
   One viewport including the heading, and the grid fits its content rather
   than stretching it. Twelve columns, two rows, deliberately unequal:
   Hawkama holds roughly half the field across both rows, Estithmar is the
   large secondary, Dlala and ESG are the compact bottom pair. All four stay
   visible at 1280x720. */
#standing.standing-showcase,
.js #standing.standing-showcase {
  min-height: 100svh;
  height: auto;
  padding: 0;
  display: grid;
  align-content: center;
  background: var(--surface-editorial);
  color: var(--ink);
}

#standing .standing-showcase__shell {
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: var(--band-pad) var(--gutter);
  display: grid;
  grid-template-rows: max-content minmax(0, auto);
  align-content: center;
  gap: clamp(18px, 2vw, 32px);
}

/* Compact heading: the smaller half of the section, not a banner. Its width,
   type and internal rhythm come from the CANONICAL CHAPTER HEADING SYSTEM. */
#standing .standing-showcase__header.chapter-heading { padding: 0; }

/* -- The field: three unequal columns, four cards, one viewport ---------
   41 / 34 / 25. Hawkama holds the reading edge across both rows, Estithmar
   and Dlala share the middle column, and the ESG conference is a slim full
   height accent on the far side. No equal-card row anywhere, no card that
   is mostly empty, and nothing hidden behind an interaction.

   The field is SIZED, not stretched: an explicit clamped height is what
   keeps every card's internal composition honest instead of inflating one
   dead band inside the tallest card. */
#standing .presence-grid {
  min-height: 0;
  height: clamp(420px, 62svh, 560px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 41fr) minmax(0, 34fr) minmax(0, 25fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, .9vw, 16px);
  direction: rtl;
}

#standing .presence-card {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#standing .presence-card::before,
#standing .presence-card::after { content: none; }

#standing .presence-card--hawkama   { grid-column: 1; grid-row: 1 / 3; }
#standing .presence-card--estithmar { grid-column: 2; grid-row: 1; }
#standing .presence-card--dlala     { grid-column: 2; grid-row: 2; }
#standing .presence-card--esg       { grid-column: 3; grid-row: 1 / 3; }

/* -- The card: three zones, so slack is composed rather than dumped ------
   mark / identity / foot. The identity block is centred in the middle row,
   which is the only elastic one, so a tall card distributes its spare
   height above and below the name instead of opening one void between the
   description and the link. */
#standing .presence-card__link {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: clamp(15px, 1.45vw, 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1vw, 18px);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--paper-warm);
  color: var(--ink);
  text-decoration: none;
  /* One thin inner edge plus a tinted diffusion: no hard drop shadow. */
  box-shadow:
    inset 0 0 0 1px var(--edge-light-soft),
    0 8px 20px rgba(68, 48, 38, .05);
  transition:
    transform .4s var(--ease-expressive),
    opacity .4s var(--ease-expressive);
}

/* Hierarchy by scale and surface, not by colour noise. */
#standing .presence-card--lead .presence-card__link {
  padding: clamp(22px, 2.2vw, 40px);
  background: var(--surface-card);
  box-shadow:
    inset 0 0 0 1px var(--edge-light),
    0 14px 34px rgba(68, 48, 38, .07);
}

#standing .presence-card--estithmar .presence-card__link {
  padding: clamp(16px, 1.6vw, 28px);
}

/* The conference alone carries the burgundy accent. */
#standing .presence-card--esg .presence-card__link {
  background: var(--burgundy);
  color: var(--paper-hi);
  box-shadow:
    inset 0 0 0 1px rgba(250, 247, 241, .18),
    0 10px 26px rgba(91, 14, 43, .16);
}

/* -- Zone 1 · the official mark, contained, never cropped or stretched --- */
#standing .presence-card__logo {
  grid-row: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

#standing .presence-card__logo img {
  max-width: min(100%, 168px);
  height: clamp(22px, 2vw, 30px);
  object-position: right center;
  transition: opacity .4s var(--ease-expressive);
}

#standing .presence-card--lead .presence-card__logo img {
  max-width: min(100%, 250px);
  height: clamp(38px, 3.4vw, 56px);
}

#standing .presence-card--estithmar .presence-card__logo img {
  max-width: min(100%, 210px);
  height: clamp(24px, 2.2vw, 34px);
}

#standing .presence-card--esg .presence-card__logo img {
  max-width: min(100%, 92px);
  height: clamp(28px, 2.4vw, 40px);
}

/* -- Zone 2 · organisation and role, vertically centred ----------------- */
#standing .presence-card__identity {
  grid-row: 2;
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(5px, .5vw, 9px);
}

#standing .presence-card__org {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(16px, 1.34vw, 22px);
  font-weight: var(--weight-subheading);
  font-style: normal;
  line-height: 1.26;
  letter-spacing: 0;
  color: inherit;
  /* Two lines maximum by measure, never by clamp or ellipsis. */
  max-inline-size: 16ch;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  text-wrap: balance;
}

#standing .presence-card--lead .presence-card__org {
  max-inline-size: 13ch;
  font-size: clamp(26px, 2.3vw, 38px);
  line-height: 1.16;
  letter-spacing: -.01em;
}

#standing .presence-card__role {
  display: block;
  margin: 0;
  font-size: clamp(13px, .9vw, 15px);
  font-weight: var(--weight-label);
  color: var(--burgundy);
}

#standing .presence-card--lead .presence-card__role { font-size: clamp(15px, 1.15vw, 20px); }
#standing .presence-card--esg .presence-card__role { color: var(--rose-pale); }

/* -- Zone 3 · one factual line and one link, on a shared baseline ------- */
#standing .presence-card__foot {
  grid-row: 3;
  display: grid;
  align-content: end;
  gap: clamp(8px, .8vw, 14px);
  padding-block-start: clamp(10px, 1vw, 16px);
  border-block-start: 1px solid var(--edge-light-soft);
}

#standing .presence-card--esg .presence-card__foot {
  border-block-start-color: rgba(250, 247, 241, .2);
}

#standing .presence-card__descriptor {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 34ch;
  font-size: clamp(12px, .8vw, 13px);
  color: var(--on-paper-mute);
}

#standing .presence-card--lead .presence-card__descriptor {
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.7;
}

#standing .presence-card--esg .presence-card__descriptor { color: rgba(250, 247, 241, .78); }

/* -- Zone 3b · the ESG card's lifecycle row · one line, fixed box -------
   The featured-event slot lives INSIDE the fourth card (5 Sep 2026), so
   the countdown has to read as one more line of that card, not as a
   widget dropped into it: four small tabular figures on one open row, no
   panel, no border box, no second surface and no extra card height.

   The row RESERVES its height, so the swap between the digit grid
   (upcoming), the live label and the post-event label happens inside a
   fixed box: the action line below it never moves, the card's geometry
   never changes, and the chapter keeps all four cards in one desktop
   viewport exactly as before. This is the ONLY place the lifecycle row is
   styled; there is no later override anywhere in this file. */
#standing .presence-card__countdown {
  min-height: clamp(34px, 3.2vw, 44px);
  display: grid;
  align-content: center;
}

/* The authored sentence is the no-JS fallback, and it is also the live and
   the post-event state. The digits replace it only once main.js has real
   values for them (`.is-ready`), so nothing here can ever show a frozen
   00:00:00. */
#standing .presence-card__countdown-status {
  display: block;
  margin: 0;
  font-size: clamp(12px, .8vw, 13px);
  font-weight: var(--weight-label);
  line-height: 1.45;
  color: var(--burgundy);
}

#standing .presence-card__countdown-units { display: none; }
#standing .presence-card__countdown.is-ready .presence-card__countdown-status { display: none; }

#standing .presence-card__countdown.is-ready .presence-card__countdown-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

#standing .presence-card__countdown-units > span {
  min-width: 0;
  padding-inline: clamp(4px, .45vw, 8px);
  display: grid;
  justify-items: start;
  gap: 1px;
}

#standing .presence-card__countdown-units > span:first-child { padding-inline-start: 0; }
#standing .presence-card__countdown-units > span + span {
  border-inline-start: 1px solid var(--edge-light-soft);
}

/* Tabular figures at a fixed advance: the seconds column may not widen the
   row as it counts, and nothing beside it may move. */
#standing .presence-card__countdown-units strong {
  min-width: 2ch;
  font-family: var(--display);
  font-size: clamp(15px, 1.12vw, 20px);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--burgundy);
}

#standing .presence-card__countdown-units > span > span {
  font-size: clamp(9px, .62vw, 11px);
  line-height: 1.3;
  color: var(--on-paper-soft);
}

/* Phase. main.js sets data-state plus .is-upcoming / .is-live / .is-past on
   the card. Colour only: no size, no box, no motion, so no state can move
   the layout. */
#standing .presence-card--esg[data-state='live'] .presence-card__countdown-status {
  font-weight: var(--weight-action);
  color: var(--burgundy);
}

#standing .presence-card--esg[data-state='past'] .presence-card__countdown-status {
  color: var(--on-paper-soft);
}

#standing .presence-card__action {
  min-height: 24px;
  display: inline-flex;
  gap: 8px;
  font-size: clamp(12px, .8vw, 13px);
  font-weight: var(--weight-action);
  color: var(--burgundy);
}

#standing .presence-card--lead .presence-card__action {
  min-height: 32px;
  font-size: clamp(13px, .88vw, 15px);
}

#standing .presence-card--esg .presence-card__action { color: var(--paper-hi); }

#standing .presence-card__action svg {
  flex: 0 0 auto;
  width: clamp(15px, 1.1vw, 19px);
  height: auto;
  transition: transform .4s var(--ease-expressive);
}

/* Hover and focus move transform and opacity only: no colour flip, no glow. */
#standing .presence-card__link:hover,
#standing .presence-card__link:focus-visible { transform: translateY(-3px); }
#standing .presence-card__link:hover .presence-card__action svg,
#standing .presence-card__link:focus-visible .presence-card__action svg { transform: translateX(-5px); }
#standing .presence-card__link:hover .presence-card__logo img { opacity: .88; }
#standing .presence-card__link:active { transform: translateY(-1px); }

/* -- Tablet: a 2x2 grid of equals, per the responsive contract ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  #standing .presence-grid {
    height: auto;
    min-height: clamp(420px, 56svh, 540px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  #standing .presence-card--hawkama   { grid-column: 1; grid-row: 1; }
  #standing .presence-card--estithmar { grid-column: 2; grid-row: 1; }
  #standing .presence-card--dlala     { grid-column: 1; grid-row: 2; }
  #standing .presence-card--esg       { grid-column: 2; grid-row: 2; }

  /* At 2x2 the lead is no longer twice the height of its neighbours, so its
     display size steps down to the shared tier rather than overflowing. */
  #standing .presence-card--lead .presence-card__link { padding: clamp(16px, 2.4vw, 24px); }
  #standing .presence-card--lead .presence-card__org { max-inline-size: 16ch; font-size: clamp(19px, 2.6vw, 24px); }
  #standing .presence-card--lead .presence-card__role { font-size: clamp(13px, 1.6vw, 15px); }
  #standing .presence-card--lead .presence-card__descriptor { font-size: clamp(13px, 1.5vw, 14px); }
  #standing .presence-card--lead .presence-card__logo img { height: clamp(28px, 3.4vw, 36px); }
}

/* ═══ #agenda · point of view ═══════════════════════════════════════════
   Asymmetric dark split: the quotation dominates, the three territories are
   open rows separated by hairlines. No cards, no boxes, no third surface. */
#agenda.chapter {
  min-height: 80svh;
  background: var(--surface-immersive);
  color: var(--paper-hi);
}

#agenda .thesis {
  min-height: 80svh;
  margin: 0;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(36px, 4.6vw, 88px);
  background: transparent;
}

#agenda .thesis__quote {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
}

#agenda .thesis__quote blockquote {
  margin: 0;
  max-width: 24ch;
  font-family: var(--display);
  font-size: clamp(24px, 2.25vw, 38px);
  font-weight: 300;
  font-style: normal;
  line-height: 1.42;
  letter-spacing: -.02em;
  color: var(--paper-hi);
  text-align: center;
  text-wrap: pretty;
}

#agenda .thesis__quote figcaption {
  margin-block-start: var(--stack-lg);
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  text-align: right;
}
#agenda .thesis__name { font-size: clamp(14px, 1vw, 17px); text-align: right; }
#agenda .thesis__role { font-size: clamp(12px, .84vw, 14px); color: rgba(244, 239, 232, .68); text-align: right; }

#agenda .territories {
  min-width: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: var(--separator-size) solid var(--separator-on-dark);
  background: transparent;
}

#agenda .territories > li,
#agenda .territories > li:first-child {
  padding: clamp(14px, 1.5vw, 22px) 0;
  border-inline-start: 0;
  border-block-end: var(--separator-size) solid var(--separator-on-dark);
  transform: none;
  text-align: right;
}

#agenda .territories > li:last-child { border-block-end: 0; }

#agenda .territories h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 26px);
  font-weight: var(--weight-subheading);
  font-style: normal;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--paper-hi);
  text-align: right;
}

#agenda .territories p {
  margin: 0;
  margin-block-start: var(--stack-xs);
  max-width: 46ch;
  font-size: clamp(13px, .92vw, 16px);
  color: rgba(244, 239, 232, .64);
  text-align: right;
}

/* RETIRED 5 Sep 2026 - the #esg-2026 component block stood here.
   The standalone featured-event chapter it styled was removed from
   index.html when the event was consolidated into the ESG card inside
   #standing; every rule, local custom property and media-query branch it
   owned went with it. The card's own compact lifecycle row is declared
   once, in the #standing block above, beside the three zones it sits in. */

/* ═══ Handheld · one column, natural height ═════════════════════════════ */
@media (max-width: 767px) {
  #top.hero,
  .js #top.hero,
  #standing.standing-showcase,
  .js #standing.standing-showcase,
  #agenda.chapter,
  #agenda .thesis {
    min-height: 0;
    height: auto;
    max-height: none;
    display: block;
  }

  #top .hero__stage,
  .js #top .hero__stage {
    position: relative;
    inset-block-start: auto;
    min-height: 100svh;
    height: auto;
    max-height: none;
  }

  #standing .standing-showcase__shell {
    display: block;
    padding: clamp(40px, 11vw, 64px) var(--gutter);
  }

  /* Four cards stack in source order, each whole. No one-viewport
     requirement is forced onto a handheld. */
  #standing .presence-grid {
    margin-block-start: clamp(22px, 6vw, 32px);
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 12px;
  }

  #standing .presence-card--hawkama,
  #standing .presence-card--estithmar,
  #standing .presence-card--dlala,
  #standing .presence-card--esg {
    grid-column: 1;
    grid-row: auto;
  }

  #standing .presence-card__link,
  #standing .presence-card--lead .presence-card__link,
  #standing .presence-card--estithmar .presence-card__link {
    min-height: 0;
    height: auto;
    padding: clamp(18px, 5.4vw, 26px);
    grid-template-rows: auto auto auto;
    gap: clamp(12px, 3.4vw, 18px);
  }

  #standing .presence-card__logo img,
  #standing .presence-card--lead .presence-card__logo img,
  #standing .presence-card--estithmar .presence-card__logo img,
  #standing .presence-card--esg .presence-card__logo img {
    max-width: min(100%, 190px);
    height: 34px;
  }

  #standing .presence-card__org,
  #standing .presence-card--lead .presence-card__org,
  #standing .presence-card--estithmar .presence-card__org {
    max-inline-size: none;
    font-size: 20px;
  }

  #standing .presence-card__role,
  #standing .presence-card--lead .presence-card__role { font-size: 14px; }

  #standing .presence-card__descriptor,
  #standing .presence-card--lead .presence-card__descriptor {
    max-width: none;
    font-size: 14px;
  }

  /* The lifecycle row takes the handheld tier too: one step up on the
     status line and the digits, so the card reads at arm's length. It is
     not a control, so it takes no 44px floor - the card's own link is the
     only target here. */
  #standing .presence-card__countdown { min-height: 46px; }
  #standing .presence-card__countdown-status { font-size: 13px; }
  #standing .presence-card__countdown-units strong { font-size: 21px; }
  #standing .presence-card__countdown-units > span > span { font-size: 11px; }

  /* Every control clears the 44px touch minimum. */
  #standing .presence-card__action,
  #standing .presence-card--lead .presence-card__action {
    min-height: 44px;
    font-size: 14px;
  }

  #top .hero__action { min-height: 44px; }

  #agenda .thesis {
    padding: clamp(44px, 12vw, 68px) var(--gutter);
    display: block;
  }

  #agenda .thesis__quote blockquote {
    max-width: none;
  }

  #agenda .territories { margin-block-start: clamp(28px, 8vw, 40px); }
  #agenda .territories > li,
  #agenda .territories > li:first-child { padding: clamp(18px, 5vw, 26px) 0; }
  #agenda .territories h3 { font-size: clamp(18px, 5vw, 22px); }
  #agenda .territories p { max-width: none; }

  /* Natural one column: content and the mark lead, a compact abstract band
     follows. Padding, corner radius, mark scale, meta stack, countdown
     rhythm and CTA margin all live here. */

  /* Nothing in the opening four may push the line box sideways. */
  #top,
  #standing,
  #agenda { overflow-x: hidden; }

  #top *,
  #standing *,
  #agenda * { max-width: 100%; }
}

/* ═══ Reduced motion ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #top :is(.hero__img, .hero__copy, .hero__sub), #standing :is(.presence-card, .presence-card__link, .presence-card__logo img, .presence-card__action svg), #agenda :is(.thesis__quote, .territories > li) {
    transition: none;
    animation: none;
  }

  #standing .presence-card__link:hover,
  #standing .presence-card__link:focus-visible,
  #standing .presence-card__link:active { transform: none; }

  #standing .presence-card__link:hover .presence-card__action svg,
  #standing .presence-card__link:focus-visible .presence-card__action svg { transform: none; }

  /* Scroll reveals resolve to their final state immediately. */
  #top [data-reveal],
  #standing [data-reveal],
  #agenda [data-reveal],
  .js #standing [data-reveal],
  .js #agenda [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── 1 · Writing · #thinking ── target 1.1-1.3svh at desktop ───────────── */

/* Stepped down from clamp(40px, 5svh, 72px) / clamp(44px, 5.6svh, 80px). At
   the tall desktop sizes the chapter is pinned to one screen and this changes
   nothing; on a 700-768px viewport it is part of what keeps the chapter inside
   its screen now that the spread carries four things instead of two. */
#thinking.writing {
  padding-block: clamp(32px, 4.1svh, 66px) clamp(34px, 4.5svh, 74px);
  overflow: clip;
}

/* Compact header: the chapter title steps down and the aside becomes a short
   standfirst plus one small continuation link. */

#thinking .writing__aside p {
  max-width: 42ch;
  font-size: clamp(14px, .92vw, 17px);
  line-height: 1.66;
}

/* A small continuation, not a second call to action. */
#thinking .writing__aside a,
#thinking .writing__archive-link {
  border-block-end: 1px solid rgba(138, 21, 56, .35);
}

/* The spread: one dominant lead at about 57% spanning all three rows, three
   supporting stories stacked beside it. Rows use min-content as their floor so
   a long Arabic title grows the row instead of being clipped. */

/* The spread is TWO LANES, one per column, and each lane is an ordinary
   column stack: feature then the «قرار» module, three supporting rows then
   the owned-blog continuation. It was three rows of auto-placed cells when
   the column held one feature and three rows; the lanes are what let it
   carry four things in the same height, because the feature used to be
   vertically centred in a full-height column with dead air above and below
   it and that air is now the X module. */

/* The lead image fills the tall cell instead of holding a fixed ratio; the
   crop is centred, so the photograph is never stretched. */

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage compact IA - thinking - 2026-09-02
   ───────────────────────────────────────────────────────────────────────────
   FINAL MARKER. Last block in the file, so it settles every rule above it
   without !important. Scope is exactly the live #thinking chapter.

   Live-markup note: the editorial grid in this document is .journal__spread;
   .journal-grid is carried alongside it so either naming resolves to the same
   composition. The continuation link is .writing__aside a in the live markup;
   .writing__archive-link is carried alongside it for the same reason.

   Contract:
     - 1.1-1.3 viewport heights at desktop, compact header.
     - Warm paper, Tajawal, off-black ink, ONE burgundy accent. No purple, no
       glow, no gradient on text.
     - No line-clamp, no ellipsis, no truncation. Titles are sized and measured
       so they resolve within two lines rather than being cut.
     - Asymmetric spread: one dominant lead at 56 percent spanning all three
       rows, three smaller supporting stories stacked beside it, all four
       visible at 1280x720. Never four equal cards.
     - Images are the authentic assets, cover-cropped and centred, never
       stretched off their intrinsic ratio.
     - Every control clears 44px and carries a visible focus ring.
     - Motion is transform + opacity only, and all of it stops under
       prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- The chapter, one and a bit viewports ------------------------------- */
#thinking.writing,
.js #thinking.writing {
  min-height: 110svh;
  padding-block: clamp(36px, 4.4svh, 64px) clamp(40px, 5svh, 72px);
}

/* -- Compact header ----------------------------------------------------
   Label, title, a short standfirst and one small continuation. No decorative
   rule, no red bar, no second call to action. */

/* Label, title and the standfirst under it are the chapter heading; their
   size, measure and vertical rhythm come from the CANONICAL CHAPTER HEADING
   SYSTEM near the end of this file. The 24ch title measure that used to be
   pinned here is now the shared --chapter-title-measure token. */

#thinking .writing__aside {
  display: grid;
  justify-items: start;
  gap: clamp(10px, 1.4svh, 18px);
  padding-block-end: 0;
}

/* A small continuation, not a second CTA block: a text link on one hairline,
   never a filled or outlined button. */
#thinking .writing__aside a,
#thinking .writing__archive-link {
  width: fit-content;
  min-height: 44px;
  padding-inline: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  border-block-end: 1px solid rgba(138, 21, 56, .38);
  border-radius: 0;
  color: var(--on-paper-soft);
  font-family: var(--display);
  font-size: clamp(13px, .84vw, 15px);
  font-weight: var(--weight-label);
  transition: color .3s var(--ease-expressive), border-color .3s var(--ease-expressive);
}

#thinking .writing__aside a .journal__link-arrow,
#thinking .writing__archive-link .journal__link-arrow {
  width: 20px;
  height: 20px;
}

#thinking .writing__aside a:hover,
#thinking .writing__aside a:focus-visible,
#thinking .writing__archive-link:hover,
#thinking .writing__archive-link:focus-visible {
  color: var(--burgundy);
  border-block-end-color: var(--burgundy);
}

/* -- The spread, asymmetric editorial composition ----------------------
   Two columns, 56 / 44. The lead owns the first column across all three rows;
   the three supports are compact horizontal entries stacked in the second.
   Rows floor at min-content so a long Arabic title grows its row instead of
   being cut. */

/* -- Lead, the dominant story ------------------------------------------- */

/* The tall cell is filled by a centred cover crop, so the authentic asset
   keeps its own ratio and is never stretched. */

/* 22ch is the measure at which the full lead title sets in exactly two lines
   from 768px up. The wrap threshold measures at 17.1ch, so the previous 17ch
   fell about 1.5px short and forced a third line at every desktop and tablet
   width. 22ch clears the threshold with headroom and still fits the 56fr
   column at 768px (286px of the 374px available). The shared title tier and
   every other section title size are untouched. */

/* -- Supports, three smaller entries, all visible at once ---------------- */
/* The three supports are rows in the support LANE now, not cells auto-placed
   into the spread's second column, so they carry no grid-column / grid-row of
   their own: their order is their source order. */

/* Hairline seams between the supports, and none above the first. */

/* The three supporting entries are title / date / source rows with no
   artwork, so the media column is not reserved for them: an entry without a
   figure takes the whole measure instead of leaving an empty cell.
   A support row is therefore TWO columns: the whole measure for its text, and
   one arrow beside it. The arrow used to sit on a row of its own under the
   title, carrying the words "اقرأ المقال" that the title already said - three
   rows of vertical space, in a lane that now also carries the owned-blog
   continuation. */

/* Sized and measured to resolve within two lines. No clamp, no ellipsis.
   The measure is the LANE, not a character count: `max-width: 26ch` was
   sized for a support column that also reserved a third of its width for
   artwork, and against the longest of the three verified titles - 48
   characters - it forced three and four lines at 1100 and 1366. The row is
   now text plus one arrow, so the title takes the lane and resolves in two
   lines at every width from 768 up. */

/* The supporting excerpts are a tall-viewport affordance: on a short viewport
   they are withheld whole rather than cut, so no entry is ever truncated. */

/* -- Controls, 44px minimum, one burgundy accent ------------------------- */

/* The arrow beside the row, not under it: a full 44x44 target that costs the
   lane no vertical space at all. */

/* -- Focus, always visible, never suppressed -----------------------------
   The «قرار» call to action and the two owned-blog links are ordinary links in
   this chapter, so they take the chapter's ring rather than the browser's
   default. Every interactive element in #thinking is named here. */
#thinking .decision__cta:focus-visible,
#thinking .owned-blog__list a:focus-visible,
#thinking .journal-story:focus-visible,
#thinking .writing__aside a:focus-visible,
#thinking .writing__archive-link:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 4px;
  border-radius: 6px;
}

/* -- Handheld, one column, natural height, lead then the three supports -- */
@media (max-width: 767px) {
  #thinking.writing,
  .js #thinking.writing {
    min-height: 0;
    height: auto;
    max-height: none;
    padding-block: clamp(40px, 11vw, 64px);
  }

  #thinking .writing__aside {
    margin-block-start: clamp(16px, 4.6vw, 24px);
    gap: 14px;
  }

  /* Source order already reads lead, support, support, support. */

  /* No artwork column to reserve: the three supports are text plus one arrow
     at every width, so the handheld row keeps the same two-track shape it has
     on desktop and only its rhythm changes. */

  #thinking .writing__aside a,
  #thinking .writing__archive-link { min-height: 44px; }

  /* Nothing in the chapter may push the line box sideways. */
  #thinking { overflow-x: hidden; }
  #thinking * { max-width: 100%; }
}

/* -- Reduced motion, nonessential transforms off ------------------------- */
@media (prefers-reduced-motion: reduce) {

  #thinking .journal-story:hover,
  #thinking .journal-story:focus-visible,
  #thinking .journal-story:active,
  #thinking .journal-story:hover .journal-story__media img,
  #thinking .journal-story:focus-visible .journal-story__media img,
  #thinking .journal-story:hover .journal__link-arrow,
  #thinking .journal-story:focus-visible .journal__link-arrow,
  #thinking .writing__aside a:hover .journal__link-arrow,
  #thinking .writing__aside a:focus-visible .journal__link-arrow,
  #thinking .writing__archive-link:hover .journal__link-arrow,
  #thinking .writing__archive-link:focus-visible .journal__link-arrow { transform: none; }

  /* Scroll reveals resolve to their final state immediately. */
  #thinking [data-reveal],
  .js #thinking [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage compact IA · books · 2026-09-02, replated 2026-09-04
   ───────────────────────────────────────────────────────────────────────────
   Scoped strictly to #knowledge as it exists in the live markup:
   section.books-section > .books-section__inner.shell > .books-section__head
   + figure.books-plate > img.books-plate__image.

   WHAT THIS BLOCK OWNS, and all it owns: the chapter's own vertical rhythm,
   the compact head, the single library link, and the geometry of the supplied
   plate.

   RETIRED HERE on 2026-09-04, with the shelf they described: the pocket model
   (unit 258x345, cover 180x243 at y=35, lip 210x90 at y=203, lift 75), the
   per-pocket scale steps (--su / --step-near / --step-far), the glass lip, the
   shelf line, the drafting grid, the cover lift, the two-line captions, the
   featured summary and the two stepper controls. None of it has markup to
   select any more.

   THE PLATE. `assets/books-notext.png` is 1448x1086 with an alpha channel; the
   intrinsic ratio is declared on the element and honoured here, so the design
   is never stretched, letterboxed or cropped. It is sized by TWO caps at once
   — the measure it is given, and a viewport-relative height — with width and
   height left auto, which is the one arrangement where a replaced element
   resolves both constraints against its own aspect ratio instead of
   distorting. The height cap is what keeps the chapter inside its 0.8-1
   viewport budget on a short desktop window; the width cap is what keeps it
   inside the page gutter on a handheld. Neither ever applies a crop.

   ENLARGED on 2026-09-04. The plate read small for the chapter it is: the
   alpha content of the PNG spans the full width of the box but only 61% of
   its height (23.4% empty above the shelf, 15.5% below), so roughly two
   fifths of every pixel the plate was given was transparent. Two levers, both
   in this rule, both of which keep the ratio, the whole design and the
   centring:

     · the HEIGHT CAP is raised at each step, which is the binding cap from
       768px up. Each step is set to the largest value that still leaves the
       whole chapter inside one viewport at the reference sizes (1440x900 and
       1920x1080 both land at 0.99).
     · a half-gutter BLEED, which is the binding cap below 768px, where the
       height cap is off and the measure alone decides. The plate — and only
       the plate; the head and the library link keep the chapter's edge — is
       allowed half of `--page-gutter` back on each side, so a handheld still
       gets a real margin (12px at 390px wide) and the figure can never be
       wider than the viewport. Above 768px the bleed is slack on desktop,
       where height binds first, and lifts the measure-bound tablet.

   The one place this costs: on a SHORT desktop window (720px tall) the
   chapter now runs ~1.06 viewport rather than ~1.01. The 720px note above is
   preserved as the intent it always was; it was already marginally over.

   Tokens only: Tajawal, warm paper, off-black ink, one burgundy accent.
   One CTA in the chapter (the library link).
   ═══════════════════════════════════════════════════════════════════════════ */

#knowledge.books-section {
  /* the plate must clear a 720px desktop viewport under the fixed navigation,
     so the chapter opens tighter than the generic chapter rhythm */
  padding-block: clamp(30px, 3.6svh, 84px) clamp(48px, 6svh, 92px);
  overflow-x: clip;
}

/* -- 1 · Compact header ------------------------------------------------- */

#knowledge .books-section__head {
  padding-block-end: 0;
  margin-block-end: clamp(8px, 1.2svh, 26px);
  gap: clamp(18px, 3vw, 56px);
}

/* Label, title and the sentence under them are the chapter heading; every
   value for the three comes from the CANONICAL CHAPTER HEADING SYSTEM near the
   end of this file. */

#knowledge .books-section__note {
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.2svh, 14px);
  max-width: 34em;
}

/* The single call to action of the chapter. */
#knowledge .books-section__note .story-link {
  padding-inline: 2px;
  font-family: var(--display);
  font-size: clamp(14px, .92vw, 16px);
  font-weight: var(--weight-action);
  color: var(--burgundy);
  text-decoration: none;
  border-block-end: 1px solid rgba(138, 21, 56, .32);
  transition: border-color var(--motion-fast) var(--ease-expressive);
}

#knowledge .books-section__note .story-link:hover,
#knowledge .books-section__note .story-link:focus-visible {
  border-block-end-color: var(--burgundy);
}

#knowledge .books-section__note .story-link:focus-visible {
  outline: 2px solid var(--burgundy);
  border-radius: 4px;
}

/* -- 2 · The supplied plate --------------------------------------------- */

.books-plate {
  /* the supplied plate's own pixels. Both caps below are floored against
     these, so the plate is never shown LARGER than the file it comes from —
     an upscale would soften a design that is already pixel-exact */
  --books-plate-intrinsic-inline: 1448px;
  --books-plate-intrinsic-block: 1086px;
  /* the height budget of the chapter, expressed once */
  --books-plate-height: clamp(300px, 58svh, 620px);
  /* half the chapter gutter, given back to the plate alone on both sides;
     the figure is therefore 100vw - var(--page-gutter) at its widest, which
     is inside the viewport by a whole gutter and can never overflow */
  --books-plate-bleed: calc(var(--page-gutter) / 2);
  margin: 0;
  margin-block-start: clamp(10px, 2svh, 30px);
  margin-inline: calc(-1 * var(--books-plate-bleed));
  display: flex;
  justify-content: center;
  /* the plate has a transparent background and is the whole composition:
     no frame, no card, no surface of its own */
  background: none;
  border: 0;
}

.books-plate__image {
  display: block;
  /* BOTH auto: the two caps below are then resolved against the intrinsic
     1448x1086 ratio rather than against each other, so the design is shown
     whole at every width and is never squashed or trimmed */
  inline-size: auto;
  block-size: auto;
  max-inline-size: min(100%, var(--books-plate-intrinsic-inline));
  max-block-size: min(var(--books-plate-height), var(--books-plate-intrinsic-block));
  /* belt and braces against any inherited replaced-element rule */
  aspect-ratio: 1448 / 1086;
  object-fit: contain;
}

/* -- 3 · Scale steps · the plate grows with the canvas, never past it ---- */

@media (min-width: 1200px) {
  /* Desktop gets the complete supplied plate at native scale. The inline
     measure remains the guard at 1200–1599px, while 1600px+ reaches the full
     1448px source width. */
  .books-plate { --books-plate-height: var(--books-plate-intrinsic-block); }
}

@media (min-width: 1600px) {
  /* Large canvases have enough room to render the supplied plate at its
     native 1448 × 1086 pixel size instead of downsampling it by viewport
     height. The inline cap still prevents overflow at narrower desktops. */
  .books-plate { --books-plate-height: var(--books-plate-intrinsic-block); }
}

/* -- 3a · The intrinsic step · 1:1 pixels where the canvas truly has room --
   The two caps above are proportional: they always leave the plate SMALLER
   than the 1448x1086 file, so on a genuinely large canvas the browser is
   downsampling a design that is already the right size. This step lifts the
   height cap to the plate's own height, at which point both caps land exactly
   on the intrinsic box and the image resolves to 1448x1086 — one image pixel
   per CSS pixel, still uncropped, unstretched and centred.

   THE GATE is deliberately narrow and covers BOTH axes, because "enough room"
   has to mean enough room on each:

     · min-width 1600px — the figure's measure is `100vw - var(--page-gutter)`
       (the base rule's half-gutter bleed gives back one gutter of the two the
       chapter takes). Across everything this step can see that measure is
       narrowest at exactly 1600px, where --page-gutter is still on its 4vw
       ramp: 1600 - 64 = 1536px, so the 1448px cap binds with 88px of slack
       and only widens from there. `max-inline-size: min(100%, ...)` keeps the
       100% term in force regardless, so HORIZONTAL OVERFLOW STAYS IMPOSSIBLE
       at every width — this step can only ever make the plate narrower than
       the measure it was already given, never wider.
     · min-height 1400px — the plate has to fit the canvas it is drawn on.
       Below 1400px tall it does not: at 1920x1080 the plate alone would be
       1086px against a 1080px viewport, which is not "enough room" by any
       reading, so that canvas keeps its 66svh cap and the proportional steps
       above stay in charge. At the gate the chapter measures 1.05 viewport
       (1600x1400) easing to 1.03 (2560x1440) — the plate is 1086px and the
       chapter's own chrome around it, its padding and the compact head, is a
       little over 400px. That is the same order of overrun the short-window
       note below already accepts, and it is the deliberate price of showing
       the supplied design at its own size.

   Anything the gate rejects falls through to the steps above unchanged. */
@media (min-width: 1600px) and (min-height: 1400px) {
  .books-plate { --books-plate-height: var(--books-plate-intrinsic-block); }
}

/* -- 4 · max-width 767px · auto height, the plate takes the measure ------ */

@media (max-width: 767px) {
  #knowledge.books-section {
    padding-block: clamp(40px, 7vw, 64px) clamp(44px, 8vw, 72px);
    overflow-x: hidden;
  }

  #knowledge .books-section__head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-block-end: 20px;
  }

  #knowledge .books-section__note { max-width: none; }

  #knowledge .books-section__note .story-link { min-height: 44px; }

  /* nothing in the chapter may push the line box sideways */
  #knowledge .books-section__inner { max-width: 100%; }

  /* the measure, not the viewport, is the binding cap here: the height cap is
     lifted so the plate is as large as the column allows, and the column is
     the chapter measure plus the half-gutter bleed inherited from the base
     rule (nothing below overrides `margin-inline`) */
  .books-plate {
    /* the height cap is retired to the plate's own height, which at these
       widths is unreachable — a 390px canvas resolves the plate at ~275px
       tall — so the measure alone decides, exactly as `none` did before it,
       while `max-block-size` keeps a real length for the `min()` above */
    --books-plate-height: var(--books-plate-intrinsic-block);
    margin-block-start: clamp(8px, 3vw, 18px);
  }

  .books-plate__image { inline-size: 100%; }
}

/* -- 5 · Reduced motion · the chapter reveals without transform ---------- */

@media (prefers-reduced-motion: reduce) {
  #knowledge .books-section__note .story-link {
    transition: none;
    animation: none;
  }

  #knowledge [data-reveal],
  .js #knowledge [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── 1 · The chapter field · heading, then the two components ─────────── */


/* The hit-area floor lives here, on the rule that actually governs this
   anchor, so it holds even if the general floor block below is edited or
   dropped. The label is one short word, so it grows on the block axis only
   and keeps its type scale. */

/* The artwork is her own portrait, cropped as a small plate beside the
   opening lines. No invented cover art anywhere in this component. */


/* The credit is carried by the visible title beside it, so the plate stays a
   photograph rather than a second caption block. */

/* One functional surface for the player: a dark burgundy-tinted inset field
   with a single hairline edge. No glass, no glow, no second card. */

/* The native audio element is the no-JS fallback; the branded transport
   replaces it only once the script is running. */

/* At most two rows: open lines with quiet separators, never an archive. */


/* ── 3 · Video · one feature, at most two secondary films ─────────────── */

/* Sized and measured to resolve within two lines. No nowrap, no clamp, no
   ellipsis: the lead title is allowed to wrap inside its 60% column. */

/* Two secondary films side by side, poster over caption. Never a grid of
   six equal cards. */

/* ── 4 · Focus and touch targets across the whole chapter ─────────────── */
.video-lightbox__close { min-width: 44px; min-height: 44px; }

/* ── 5 · Tablet · the two components stack, both stay whole ───────────── */


/* ── 7 · Reduced motion ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   Homepage compact IA - career collaboration footer - 2026-09-02
   ───────────────────────────────────────────────────────────────────────
   FINAL LAYER. Scope is exactly the three live closing structures:
   #career (.career__scene / .career-slide / .career__credentials),
   #work (.work__paths / .work-path) and the #contact footer
   (.closing__*). Nothing else on the page is touched, and nothing outside
   this stylesheet is edited: every rule below settles the legacy cascade on
   source order alone, without !important.

   Budget at 1440x900:
     - #career  ~1 viewport      (SUPERSEDED: see the final Career layer)
     - #work    ~0.85 viewports
     - #contact ~0.5 viewports

   Contract kept from the layers above, never re-litigated here: Tajawal
   everywhere, warm paper / off-black, one burgundy accent, no purple, no
   glow, no text gradients, no rule beneath a section title, no truncation.
   ═══════════════════════════════════════════════════════════════════════ */

/* -- 0 - Shared guards ---------------------------------------------- */

/* The collaboration chapter no longer hides anything, but the guard is kept
   so any future `hidden` attribute in this run still wins over a layout
   display value. */
#work [hidden] { display: none !important; }

/* Nothing in these three chapters may push the page line box sideways. */
#career,
#work,
#contact { overflow-x: clip; }

#career *,
#work *,
#contact * { max-width: 100%; }

/* Every control in the closing run meets the 44px target and shows a ring. */
#work .work-path__programs a,
#contact .closing__cta,
#contact .closing__links a {
  min-height: 44px;
  outline-offset: 3px;
}

#work :is(a, button):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-light);
}

#contact :is(a, button):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-dark, var(--rose));
}

/* The label-to-title spacing for this run used to be forced here with
   !important. Removed 2026-09-02: it is one shared token,
   --chapter-label-title-gap, applied once in the CANONICAL CHAPTER HEADING
   SYSTEM near the end of this file. No heading rule in that block is
   !important, and none of these three chapters may re-declare the gap. */

/* ═══ 1 - CAREER - executive states ═════════════════════════════════
   The chapter is rebuilt as ordinary flow: a heading, one horizontal state
   field, and the credentials strip. The legacy composition pinned every
   child at a percentage of a 1680x940 canvas; those absolute offsets cannot
   survive a taller scene without the title band colliding with the
   photograph, so the whole field is re-laid as a flex row of grid columns.
   Vertical alignment is then a property of the grid template rather than of
   a hand-tuned pixel per card: the year row and the logo row are shared
   tracks, so every year and every mark sits on one horizontal by
   construction, at rest and expanded. The six states, the detail area and
   the per-breakpoint arrangement are settled in the final Career layer at
   the end of this file; nothing here assumes a state count. */

/* Any decorative scenery is removed. Since 2026-09-03 the scene keeps NO
   background raster at all: the marble floor plate that used to close the
   composition is now a CSS-only vertical wash (see the Career floor wash at
   the end of this file), so a bare `> img` reset is correct again. */
#career .career__scene > img,
#career .career__room,
#career .career__aside,
#career .career__decor { display: none; }

#career .career__scene::before,
#career .career__scene::after { content: none; background-image: none; }

@media (min-width: 900px) {
  /* SUPERSEDED at the end of this file: the final Career layer sets the
     scene to `min-height: 0` in every arrangement, because the chapter is
     ordinary normal flow. This 165svh floor is the pre-six-state value and
     is kept only so the block below still has a defined starting height. */
  #career .career__scene {
    position: relative;
    aspect-ratio: auto;
    min-height: 165svh;
    display: block;
    background:
      radial-gradient(70% 56% at 18% -8%, rgba(255, 251, 242, .55) 0%, rgba(255, 251, 242, 0) 68%),
      radial-gradient(56% 44% at 62% 0%, rgba(255, 250, 240, .3) 0%, rgba(255, 250, 240, 0) 72%),
      var(--surface-editorial);
  }

  #career .career__inner {
    position: static;
    inset: auto;
    min-height: 165svh;
    padding: var(--band-pad) var(--gutter) clamp(26px, 3.4vh, 46px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.6vh, 40px);
  }

  #career .career__intro {
    position: static;
    inset: auto;
    width: min(100%, 820px);
    flex: 0 0 auto;
  }

  /* The milestone field takes every remaining pixel of the chapter, which is
     what makes the photographs read as a panorama instead of a strip. */
  #career .career__milestones {
    position: static;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    direction: ltr;
  }

  /* Every card is one column of shared tracks. The leading tracks are fixed,
     so the diamond, the year, the logo and the title each sit on a single
     horizontal across every card; the photo takes the rest. Expansion changes
     flex-grow only, so it can never move a row off that line. The final
     Career layer restates this template with the detail track added. */
  #career .career-slide {
    position: relative;
    flex: 1 1 0;
    display: grid;
    grid-template-rows:
      clamp(18px, 2vh, 26px)
      clamp(26px, 3vh, 34px)
      clamp(64px, 7.4vh, 86px)
      clamp(58px, 7vh, 78px)
      minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    text-align: center;
    transition: flex-grow 560ms var(--ease-expressive);
  }

  /* Off the legacy absolute grid and back into the shared tracks. */
  #career .career-slide > .career-slide__marker,
  #career .career-slide > time,
  #career .career-slide > .career-slide__logo,
  #career .career-slide > h3,
  #career .career-slide > .career-slide__photo {
    position: relative;
    inset: auto;
    margin: 0;
    transform: none;
    z-index: 2;
  }

  #career .career-slide > .career-slide__marker {
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: var(--burgundy);
    opacity: .45;
    transition: opacity .4s var(--ease-expressive);
  }

  #career .career-slide > time {
    align-self: center;
    font-size: clamp(15px, 1.05vw, 19px);
    letter-spacing: .06em;
    color: var(--burgundy);
  }

  /* Logos keep their authentic artwork and aspect: a per-card cap on HEIGHT
     only, with width auto, so no wordmark is stretched and every mark still
     centres on one line inside the shared logo track. */
  #career .career-slide > .career-slide__logo {
    align-self: center;
    width: auto;
    height: auto;
    max-height: var(--logo-cap, 48px);
    max-width: min(100%, 200px);
    object-fit: contain;
    object-position: center center;
  }

  /* Keyed to the STATE, not to a position, so the caps cannot drift if the
     record ever gains or loses a state. Only the states that hold an official
     mark declare one. */
  #career .career-slide[data-career-state="institutional-foundation"] { --logo-cap: clamp(52px, 5.4vh, 66px); }
  #career .career-slide[data-career-state="ooredoo"] { --logo-cap: clamp(22px, 2.4vh, 28px); }
  #career .career-slide[data-career-state="sovereign"] { --logo-cap: clamp(44px, 4.6vh, 56px); }

  #career .career-slide > h3 {
    align-self: center;
    width: min(100%, 30ch);
    max-width: min(100%, 30ch);
    padding-inline: clamp(8px, .8vw, 16px);
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--on-paper-soft);
    text-wrap: balance;
    transition: color .4s var(--ease-expressive);
  }

  /* The photograph is a grid cell, not an absolute overlay, so an expanding
     card widens its own column and the neighbours reflow beside it - nothing
     is ever drawn over a sibling. */
  #career .career-slide > .career-slide__photo {
    justify-self: stretch;
    height: 100%;
    overflow: hidden;
    background: transparent;
  }

  /* Subject only. The runtime sources are background-extracted cutouts, so the
     image is CONTAINED - never cropped - and stands on the bottom edge of its
     cell. No mask of any kind: there is no sky rectangle left to dissolve, and
     a gradient here would only fade the building it used to protect. */
  #career .career-slide__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    transform: scale(.98);
    transform-origin: center bottom;
    transition:
      transform 560ms var(--ease-expressive),
      object-position 560ms var(--ease-expressive);
  }

  /* Hairlines run the full height of the field and reflow with the tracks. */
  #career .career-slide + .career-slide::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 1px;
    z-index: 3;
    background: var(--edge-light-soft);
  }

  /* -- Expanded state ------------------------------------------------
     :hover and :focus-visible are ONE state with one set of numbers, so
     pointer and keyboard land on an identical composition. There is no
     third, script-set selection: no `.is-active` exists anywhere in this
     chapter, so nothing is ever expanded at rest. Expansion is flex-grow on
     the card, which pushes and narrows the siblings inside the same field
     width - a reflow, never an overlap. */
  #career .career__milestones > .career-slide:hover,
  #career .career__milestones > .career-slide:focus-visible { flex-grow: 1.9; }

  #career .career__milestones > .career-slide:hover > .career-slide__marker,
  #career .career__milestones > .career-slide:focus-visible > .career-slide__marker { opacity: 1; }

  #career .career__milestones > .career-slide:hover > h3,
  #career .career__milestones > .career-slide:focus-visible > h3 { color: var(--ink); }

  #career .career__milestones > .career-slide:hover .career-slide__photo img,
  #career .career__milestones > .career-slide:focus-visible .career-slide__photo img {
    transform: scale(1);
    object-position: center bottom;
  }

  /* The credentials appear exactly once on the page, as a compact strip. */
  #career .career__rail {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
  }

  #career .career__credentials {
    height: auto;
    padding: clamp(10px, 1.2vh, 16px) clamp(20px, 2vw, 34px);
    align-items: center;
    justify-content: space-between;
    border-radius: 999px;
    background: var(--surface-card);
    box-shadow: inset 0 0 0 1px var(--edge-light);
    backdrop-filter: none;
  }

  #career .career__credentials strong { font-size: clamp(13px, .9vw, 15px); }
  #career .career__credentials li > span { font-size: clamp(11px, .74vw, 13px); }
  /* The strip's own title is NOT sized here. It was, twice - once on the
     <li>, which never held the visible words because the metadata rule one
     line up is more specific than a bare `.career__credentials-head`, and
     once as an `inherit` on the span that only existed to undo that. Both
     were width-scoped to this band, so the heading rendered at a different
     tier below 900px. It is now set once, unscoped, in the final #career
     layer - search `career__credentials-head` there. Nothing in this band
     touches it, so there is no size to keep in sync with that rule. */
}

/* 900-1100: the same composition, one step tighter. The final Career layer
   replaces this band outright with a compact normal-flow arrangement, because
   six columns are not readable at this width. */
@media (min-width: 900px) and (max-width: 1100px) {
  #career .career__scene,
  #career .career__inner { min-height: 152svh; }
  #career .career-slide > h3 { font-size: 14px; line-height: 1.45; }
  #career .career__milestones > .career-slide:hover,
  #career .career__milestones > .career-slide:focus-visible { flex-grow: 1.6; }
}

/* -- Career at handheld width: static, source order, no pin, no overlap -- */
@media (max-width: 767px) {
  #career .career__scene {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    background: var(--surface-editorial);
  }

  #career .career__inner,
  #career .career__intro,
  #career .career__milestones,
  #career .career-slide,
  #career .career-slide > *,
  #career .career__rail {
    position: static;
    inset: auto;
    height: auto;
    transform: none;
  }

  #career .career__milestones {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* No expansion, no reflow, no sticky scene: every card reads at its own
     authored size in document order. */
  #career .career-slide,
  #career .career-slide:hover,
  #career .career-slide:focus-visible { flex: none; }

  #career .career-slide + .career-slide::before { content: none; }

  /* Handheld cards show the whole subject at rest: no scale step, no mask. */
  #career .career-slide__photo img {
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
    object-position: center bottom;
  }

}

/* ═══ 2 - COLLABORATION - three paths, all visible ══════════════════════
   The tabbed version of this chapter kept two of the three ways to work
   with her behind a control, which is exactly the wrong thing to hide on
   the page whose job is to open a conversation. There is no tablist, no
   panel and no hidden state left: the three paths are one open row, and a
   single call to action closes the chapter under them. */

#work .work__inner {
  padding-block: var(--band-pad);
  grid-template-rows: auto minmax(0, auto) auto;
  gap: clamp(22px, 3.4vh, 44px);
}

#work .work__paths {
  gap: 0;
  border-block-start: var(--separator-size) solid var(--separator-on-light);
}

#work .work-path {
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 2.4vh, 34px) clamp(16px, 1.8vw, 32px);
  display: grid;
  align-content: start;
  gap: clamp(8px, 1vh, 14px);
}

#work .work-path:first-child { padding-inline-start: 0; }
#work .work-path:last-child { padding-inline-end: 0; }
/* The collaboration cards are separated by the grid gap, not by vertical
   rules. Keep this at the original selector specificity so the legacy layer
   cannot redraw a line beside the programmes card. */
#work .work-path + .work-path { border-inline-start: 0; }

/* The typographic object: a quiet ordinal, not an icon and not a badge. */
#work .work-path__figure {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 30px);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: rgba(138, 21, 56, .34);
}

#work .work-path__title {
  margin: 0;
  max-inline-size: 20ch;
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 25px);
  font-weight: var(--weight-subheading);
  font-style: normal;
  line-height: 1.28;
  color: var(--ink);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  text-wrap: balance;
}

#work .work-path__note {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(13px, .92vw, 16px);
  color: var(--on-paper-soft);
}

/* The two real programmes are the interaction inside their own path: open
   rows with an external arrow, never a product card and never a price. */
#work .work-path__programs {
  margin: clamp(4px, .6vh, 8px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

#work .work-path__programs li + li { border-block-start: var(--separator-size) solid var(--separator-on-light); }

#work .work-path__programs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: var(--burgundy);
}

#work .work-path__program-title {
  font-size: clamp(13px, .92vw, 15px);
  font-weight: var(--weight-action);
  line-height: 1.4;
}

#work .work-path__program-arrow { flex: 0 0 auto; opacity: .7; }

/* The chapter no longer closes on its own call to action. It used to repeat
   the same `ابدأ محادثة` mailto that Contact already owns, which split the one
   decision this page asks for across two places. The `.work__close` /
   `.work__cta` / `.work__cta-arrow` rules that styled it are removed with the
   markup; Contact's `.closing__cta` is now the page's single final action. */

@media (min-width: 900px) {
  /* Below one viewport, including the heading. */
  #work .work__inner { min-height: 82svh; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  #work .work-path { padding-inline: clamp(12px, 1.6vw, 22px); }
  #work .work-path__title { font-size: clamp(16px, 2vw, 20px); }
  #work .work-path__note { font-size: 14px; }
}

@media (max-width: 767px) {

  /* One column: three open rows separated by hairlines, nothing hidden. */
  #work .work__paths {
    grid-template-columns: minmax(0, 1fr);
  }

  #work .work-path,
  #work .work-path:first-child,
  #work .work-path:last-child {
    padding-block: clamp(20px, 5.4vw, 28px);
  }

  #work .work-path + .work-path {
    border-inline-start: 0;
    border-block-start: var(--separator-size) solid var(--separator-on-light);
  }
}

/* ═══ 3 - CONTACT - compact and complete ════════════════════════════════
   Roughly half a viewport on desktop, with every element the footer shipped
   with still present: invitation, call to action, identity, both link groups
   and the legal base. */

#contact .shell {
  padding-block: clamp(24px, 3.2vh, 40px) clamp(8px, 1.2vh, 16px);
  display: grid;
  align-content: center;
  gap: clamp(14px, 1.7vh, 24px);
}

/* Separator policy, rule 1 + the redundant-pair correction: the invitation
   band's bottom hairline and the footer band's top hairline drew two parallel
   full-width lines a few pixels apart. Both are zeroed; the spacing they sat
   in is unchanged. */
#contact .closing__invitation {
  padding-block: 0;
  border-block-end: 0;
}

#contact .closing__invitation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  align-items: end;
  gap: clamp(24px, 3vw, 56px);
}

/* .closing__invitation-action IS the chapter heading here: it carries the
   label, the title and the sentence under it, and all three take their type,
   measures and vertical rhythm from the CANONICAL CHAPTER HEADING SYSTEM near
   the end of this file. Only the grid that holds it is declared in this run. */
#contact .closing__invitation-action { display: grid; }

#contact .closing__top {
  padding-block: clamp(14px, 2vh, 26px) 0;
  border-block-start: 0;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 60px);
}

#contact .closing__mark { height: clamp(38px, 3vw, 54px); }

#contact .closing__territories {
  margin-block-start: clamp(8px, 1vh, 13px);
  font-size: clamp(12px, .82vw, 14px);
}

#contact .closing__navs { gap: clamp(24px, 2.6vw, 48px); }

/* Separator policy, whitespace-first: the hairline that used to run above the
   two footer link groups is REMOVED, not recoloured and not re-drawn anywhere
   else. What separates a group from the identity block above it is the space
   the group sits in, so the padding that used to sit under the rule keeps the
   distance and takes the rule's own 1px with it. */

/* The legal row closes the page on WHITESPACE ALONE. Its former top hairline
   is removed; the distance it used to mark is carried entirely by the row's own
   top margin, set further down in the CONTACT · THE LEGAL BASE block. */
#contact .closing__base {
  padding-block: clamp(10px, 1.3vh, 16px) clamp(8px, 1.1vh, 14px);
  font-size: clamp(11px, .78vw, 13px);
}

@media (min-width: 900px) {
  #contact .shell { min-height: 50svh; }
}

/* The two-column footer survives to 900px; only below it does the stack pay
   for itself, so 1024 keeps the compact half-viewport rhythm. */
@media (min-width: 768px) and (max-width: 899px) {
  #contact .closing__invitation-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #contact .closing__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #contact .closing__navs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  /* The handheld `#contact .shell` rule that used to open this block is GONE,
     not overridden: all three of its declarations (`min-height`, `padding-block`
     and `gap`) were dead. `min-height: 50svh` is only ever set from 900px up, and
     the RESPONSIVE BUDGET layer later in this file re-declares the padding and
     the gap at equal specificity, so source order won every time. The one
     authority for the handheld shell is now the FLOATING-NAV CLEARANCE block at
     the end of this file. */
  #contact .closing__invitation-grid,
  #contact .closing__top { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 4.6vw, 24px); }
  #contact .closing__navs { grid-template-columns: 1fr 1fr; gap: clamp(14px, 4vw, 22px); }
}

/* ═══ 4 - Reduced motion ════════════════════════════════════════════════
   Every transform and transition in this layer is decorative: the expanded
   milestone still expands (that is layout, and it carries the state), it
   simply arrives without an animated step, and no state information is lost. */

@media (prefers-reduced-motion: reduce) {
  #career .career-slide,
  #career .career-slide__photo img,
  #career .career-slide > .career-slide__marker,
  #career .career-slide > h3,
  #contact .closing__cta,
  #contact .closing__links a {
    transition: none;
    animation: none;
  }

  #career .career-slide__photo img,
  #career .career__milestones > .career-slide:hover .career-slide__photo img,
  #career .career__milestones > .career-slide:focus-visible .career-slide__photo img { transform: none; }

  #career [data-reveal],
  #work [data-reveal],
  #contact [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Career · the three-band composition · 2026-09-02
   ───────────────────────────────────────────────────────────────────────
   TYPE AND BAND LAYER for #career - NOT the last word on the chapter.

   Three bands, all resolved inside one screen:

     1 · opening      label, title, one standfirst that frames the sequence
     2 · states       the verified record as one photographic panorama
     3 · credentials  the compact academic strip, shown exactly once

   SUPERSEDED GEOMETRY, deliberately kept rather than deleted: the sizes in
   this block were computed for an ordinary-flow chapter of about 1355px
   (~1.51 viewports) at 1440x900. The FINAL CAREER LAYER at the end of this
   file replaces that arrangement outright - the desktop chapter is a single
   normal-flow composition about ONE viewport tall, and the 900-1099 band
   leaves the horizontal field for a two-column normal flow. What survives
   from here is the type scale and the per-state logo caps; every geometry
   value below is overridden there, on source order alone, with no
   !important.

   Unchanged from the layer above and not re-litigated here: :hover and
   :focus-visible are ONE state at ONE flex-grow, so pointer and keyboard
   land on an identical composition; expansion is flex reflow inside a fixed
   field width, so an expanding card pushes and narrows its neighbours and
   never draws over one; the year and logo rows are fixed tracks, so every
   year and every mark stays on one horizontal; the dissolve is a mask on the
   IMG, so it travels with the photograph. Nothing is truncated, clamped or
   clipped in any arrangement.
   ═══════════════════════════════════════════════════════════════════════ */

/* RETIRED 2026-09-03 - the standfirst that used to sit under this title was
   removed from the markup, not restyled: it restated the six-states /
   seven-records count the field below already carries. The opening band is
   now the eyebrow and the title alone, and #career declares no
   .chapter-summary at all. Its absence is asserted by
   scripts/audit-project.mjs; do not reintroduce a summary paragraph here. */

@media (min-width: 1100px) {
  /* Ordinary flow: the chapter is as tall as its three bands, not as tall
     as a multiple of the viewport, so there is no band of empty scroll
     anywhere in it. */
  #career .career__scene { min-height: 0; }

  #career .career__inner {
    min-height: 0;
    padding: clamp(46px, 6.4vh, 76px) var(--gutter) clamp(30px, 3.6vh, 50px);
    gap: clamp(24px, 3.4vh, 40px);
  }

  #career .career__intro { width: min(100%, 940px); }

  /* The milestone field is the chapter's height dial. This single value is
     what makes Career the extended narrative and every other chapter a
     single screen. */
  #career .career__milestones {
    flex: 0 0 auto;
    height: clamp(660px, 101svh, 920px);
  }

  /* The four fixed tracks scale with the taller field; the photo keeps the
     remainder, so it grows with the card rather than being cropped. */
  #career .career-slide {
    grid-template-rows:
      18px
      clamp(26px, 2.9vh, 32px)
      clamp(52px, 6vh, 66px)
      clamp(54px, 6.4vh, 70px)
      minmax(0, 1fr);
  }

  #career .career-slide > time { font-size: clamp(16px, 1.05vw, 19px); }

  /* Height caps only, width auto: the official artwork keeps its aspect and
     every mark still centres on the shared logo line. */
  #career .career-slide[data-career-state="institutional-foundation"] { --logo-cap: clamp(46px, 5.2vh, 58px); }
  #career .career-slide[data-career-state="ooredoo"] { --logo-cap: clamp(22px, 2.4vh, 28px); }
  #career .career-slide[data-career-state="sovereign"] { --logo-cap: clamp(38px, 4.2vh, 48px); }

  #career .career-slide > h3 {
    width: min(100%, 32ch);
    max-width: min(100%, 32ch);
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.45;
  }

  #career .career__credentials { padding: clamp(11px, 1.3vh, 16px) clamp(20px, 2vw, 34px); }
}

/* 900-1099: same three bands, one step tighter. The final Career layer
   converts this band to a compact two-column normal-flow arrangement. */
@media (min-width: 900px) and (max-width: 1099px) {
  #career .career__scene,
  #career .career__inner { min-height: 0; }

  #career .career__inner {
    padding: clamp(36px, 5vh, 56px) var(--gutter) clamp(24px, 3vh, 36px);
    gap: clamp(18px, 2.4vh, 30px);
  }

  #career .career__milestones {
    flex: 0 0 auto;
    height: clamp(540px, 82svh, 720px);
  }

  #career .career-slide {
    grid-template-rows:
      14px
      clamp(22px, 2.4vh, 26px)
      clamp(42px, 5vh, 50px)
      clamp(48px, 5.8vh, 60px)
      minmax(0, 1fr);
  }
}

/* 768-899 is the stacked translation from styles.css: compact each of the
   six states so the tablet chapter is a readable list, not six full-bleed
   plates. */
@media (min-width: 768px) and (max-width: 899px) {
  #career .career__inner { padding-block: clamp(36px, 5vw, 56px) clamp(32px, 4.5vw, 48px); }
  #career .career__intro { margin-block-end: clamp(24px, 3.4vw, 34px); }
  #career .career-slide { padding-block: clamp(20px, 2.6vw, 28px); }
  #career .career-slide__logo { max-height: 34px; }
  #career .career-slide h3 { margin-block-start: clamp(10px, 1.4vw, 14px); }

  #career .career-slide__photo {
    aspect-ratio: auto;
    height: clamp(200px, 26vw, 240px);
    margin-block-start: clamp(12px, 1.6vw, 18px);
  }

  #career .career__rail { margin-block-start: clamp(24px, 3.4vw, 34px); }
}

/* Handheld: every state in source order, each compact and whole. The 4/3
   plate is the single biggest cost at 390px, so the photo becomes a fixed band
   and the surrounding rhythm is halved. No desktop pinning is carried down. */
@media (max-width: 767px) {
  #career .career__inner { padding-block: clamp(32px, 8vw, 44px) clamp(28px, 7vw, 40px); }
  #career .career__intro { margin-block-end: clamp(20px, 5vw, 28px); }

  #career .career-slide { padding-block: clamp(16px, 4vw, 22px); }
  #career .career-slide__logo { max-height: 34px; }

  #career .career-slide h3 {
    margin-block-start: clamp(10px, 2.6vw, 14px);
    font-size: clamp(16px, 4.1vw, 18px);
    line-height: 1.5;
  }

  #career .career-slide__photo {
    aspect-ratio: auto;
    height: clamp(170px, 46vw, 200px);
    margin-block-start: clamp(12px, 3vw, 16px);
  }

  #career .career__rail { margin-block-start: clamp(24px, 6vw, 32px); }
  #career .career__credentials { padding: clamp(16px, 3.6vw, 22px); }
  #career .career__credentials li { padding-block: clamp(10px, 2.2vw, 13px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Correction pass · 2026-09-02 · FINAL AUTHORITY
   ───────────────────────────────────────────────────────────────────────
   Last layer in the last stylesheet. Scope is four corrections measured in
   the browser; nothing else on the page is re-litigated here, and every
   rule settles on source order alone, without !important. (#esg-2026's own
   correction that used to sit here was folded into that chapter's own
   block, which was retired with the chapter on 5 Sep 2026.)

     1 · #career    SUPERSEDED by the final Career layer: the chapter is an
                    ordinary normal-flow section about one viewport tall whose
                    only interaction is hover. Nothing here pins it any more.
     2 · #work      three differentiated editorial lanes across the full
                    content width, one central call to action.
     3 · #standing  the same four-card hierarchy, tighter vertical pacing.
     4 · targets    every interactive control is at least 44x44 CSS pixels,
                    grown by padding and min-size, never turned into a pill.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 2 · CAREER · one screen, hover only ══════════════════════════════
   The chapter is an ORDINARY NORMAL-FLOW SECTION about one viewport tall.
   Nothing is pinned or sticky, there is no extended scene and no travel to
   spend: scrolling over Career moves the page and does nothing else. The
   composition sizes itself against one screen so the whole chapter - opening
   band, six-state field, credentials strip - resolves without the reader
   having to scroll inside it.

   Hover is the ONE interaction, with `:focus-visible` as its keyboard
   equivalent. Expansion is flex-grow inside a fixed field width, so the
   hovered state pushes and narrows its neighbours and never overlaps one,
   and pointer exit restores six equal columns.

   Gated on `.js` AND a fine pointer AND `prefers-reduced-motion:
   no-preference` AND the desktop width, so without JS, on a coarse pointer,
   under reduced motion, or below 1100px the chapter falls back to the
   ordinary-flow composition above, in normal source order with every state's
   record already visible. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  .js #career .career__inner {
    position: static;
    inset: auto;
    /* Pre-scroll rhythm, restored: the band is no longer the compressed top
       of a pinned scene competing with 0.95 of travel, so the opening, the
       state field and the credentials strip are paced as three bands of one
       composition again. */
    padding: clamp(38px, 5vh, 64px) var(--gutter) clamp(24px, 3vh, 40px);
    gap: clamp(18px, 2.4vh, 30px);
    /* The two warm opening washes only. The composition's base is closed by
       the CSS floor wash at the end of this file, which is one gradient on
       one element rather than a raster repeated per arrangement. */
    background:
      radial-gradient(70% 56% at 18% -8%, rgba(255, 251, 242, .55) 0%, rgba(255, 251, 242, 0) 68%),
      radial-gradient(56% 44% at 62% 0%, rgba(255, 250, 240, .3) 0%, rgba(255, 250, 240, 0) 72%),
      var(--surface-editorial);
  }

  /* The opening band pays for itself in two or three lines, so the
     photographic field keeps the majority of the screen. */
  .js #career .career__intro { width: min(100%, 900px); }

  /* The field is now the remainder of one screen rather than a fixed tall
     band: the photo row is minmax(0, 1fr), so it absorbs exactly what the
     opening and the credentials leave. */
  .js #career .career__milestones {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  .js #career .career-slide {
    grid-template-rows:
      14px
      clamp(22px, 2.4vh, 28px)
      clamp(38px, 4.4vh, 52px)
      clamp(44px, 5.2vh, 62px)
      minmax(0, 1fr);
  }

  .js #career .career-slide > time { font-size: clamp(15px, 1vw, 18px); }
  .js #career .career-slide[data-career-state="institutional-foundation"] { --logo-cap: clamp(40px, 4.4vh, 52px); }
  .js #career .career-slide[data-career-state="sovereign"] { --logo-cap: clamp(34px, 3.8vh, 44px); }

  .js #career .career-slide > h3 {
    font-size: clamp(14px, .95vw, 16px);
    line-height: 1.45;
  }
}

/* ═══ 3 · COLLABORATION · three editorial lanes ═════════════════════════
   The three paths were correct but composed as a narrow list against the
   reading edge, leaving most of the chapter empty. They become three lanes
   of deliberately unequal width running the full content measure, separated
   by the same hairlines, with the ordinals kept as quiet typographic objects
   - no card surface, no border box, no badge. The two verified programme
   links stay inside their own lane and settle on its bottom rule. One call
   to action closes the chapter, centred under all three. */
@media (min-width: 900px) {
  #work .work__inner {
    min-height: 80svh;
    gap: clamp(22px, 2.9vh, 40px);
  }

  /* The lanes are sized to the tallest lane's real content, so the field is
     composed rather than padded out with a dead band under the shorter two. */
  #work .work__paths {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.18fr) minmax(0, .94fr);
    align-items: stretch;
    min-height: clamp(260px, 34svh, 360px);
    border-block-end: var(--separator-size) solid var(--separator-on-light);
  }

  #work .work-path {
    padding-block: clamp(22px, 2.8vh, 38px) clamp(20px, 2.6vh, 34px);
    padding-inline: clamp(20px, 2.2vw, 42px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 1.2vh, 16px);
  }

  #work .work-path:first-child { padding-inline-start: 0; }
  #work .work-path:last-child { padding-inline-end: 0; }

  #work .work-path__figure {
    font-size: clamp(24px, 2.2vw, 38px);
    color: rgba(138, 21, 56, .3);
  }

  #work .work-path__title {
    max-inline-size: 17ch;
    font-size: clamp(19px, 1.6vw, 27px);
  }

  /* The first lane leads: it is the widest promise of the three. */
  #work .work-path--advisory .work-path__title { font-size: clamp(20px, 1.75vw, 29px); }

  #work .work-path__note {
    max-width: none;
    font-size: clamp(14px, .96vw, 17px);
    line-height: 1.75;
  }

  #work .work-path__programs {
    width: 100%;
    margin-block: auto 0;
    padding-block-start: clamp(8px, 1.1vh, 14px);
    border-block-start: var(--separator-size) solid var(--separator-on-light);
  }

  #work .work-path__program-title { font-size: clamp(14px, .96vw, 16px); }
}

/* ═══ 4 · PRESENCE · same hierarchy, tighter pacing ═════════════════════
   The asymmetric four-card field, its simultaneous visibility and the
   absence of any pin or carousel are unchanged. Only the opening silence is
   spent: the band starts higher on the screen and the chapter resolves in
   about five sixths of a viewport instead of a full one. No synthetic
   organisation render is reintroduced - the authentic marks stay the only
   imagery in the chapter. */
@media (min-width: 900px) {
  #standing.standing-showcase,
  .js #standing.standing-showcase { min-height: 84svh; }

  #standing .standing-showcase__shell {
    padding-block: clamp(26px, 3.2vh, 44px);
    gap: clamp(13px, 1.5vw, 22px);
  }

  #standing .presence-grid { height: clamp(400px, 58svh, 540px); }
}

/* ═══ 5 · TARGETS · 44x44 minimum, everywhere ═══════════════════════════
   Measured undersized controls, grown on the axis they were short on:
   padding and min-size only, so an editorial text link stays a text link
   and never becomes an oversized pill. */

/* The two verified programme rows: block padding, no surface. */
#work .work-path__programs a {
  padding-block: clamp(11px, 1.2vh, 14px);
}

/* Short navigation labels are narrower than they are tall. */
.nav__links a { min-width: 44px; }

@media (min-width: 900px) {
  .hero__action { min-height: 44px; }
}


@media (max-width: 767px) {
  /* Handheld floor: nothing operable is under 44x44 at any tested width. */
  #work .work-path__programs a,
  #contact .closing__links a,
  #contact .closing__cta,
  .nav__links a,
  .nav .nav__contact,
  .hero__action { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL REFINEMENT · below the frozen hero · 2026-09-02
   ───────────────────────────────────────────────────────────────────────
   A refinement pass, not a redesign. The ten-section order, every
   composition, every count and every destination above are accepted and
   unchanged. This layer is last in the file, so it settles the cascade on
   source order alone, with no !important anywhere.

   HERO / NAV FREEZE. Nothing in this block may match #top, .hero*, .nav*,
   .navbar*, or redeclare :root or the generic .chapter-title /
   .chapter-label. Every selector below is scoped through one of the nine
   refined section ids: #standing #agenda #thinking #knowledge
   #media #work #contact. (#career is refined in main.js only: its one real
   defect was the pointer-hover override outliving a scroll; its geometry,
   height and assets are untouched.)

   What this layer changes, and nothing else:
     1 · readable floors for small secondary text, and contrast raised where
         a low alpha made a 10-11px line weak rather than quiet;
     2 · one coherent elevation / radius / logo-scale family in #standing;
     3 · a typography-led feature in #thinking, replacing the removed figure;
     4 · RETIRED 5 Sep 2026 with the #esg-2026 chapter (it read: hierarchy
         in #esg-2026 so title, date and countdown lead the mark);
     5 · focus visibility, kept or strengthened, never removed.

   Height budget is a ceiling, not a target: nothing here may make a section
   taller than it was. Where a line grows, a gap or a decorative scale gives
   the space back inside the same section.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · #standing · institutional presence ════════════════════════════
   Four cards, still simultaneous, still asymmetric: Hawkama across both
   rows, Estithmar and Dlala in the middle column, ESG the full-height
   accent. Count, content, destinations and arrangement are untouched. */

/* -- One elevation family. The three tiers were three unrelated shadows;
      they are now the same geometry at three weights, on one radius. This
      part is width-independent: it changes no box size. ---------------- */
#standing .presence-card__link {
  border-radius: var(--radius-panel);
  box-shadow:
    inset 0 0 0 1px var(--edge-light-soft),
    0 10px 26px rgba(68, 48, 38, .055);
}

#standing .presence-card--lead .presence-card__link {
  box-shadow:
    inset 0 0 0 1px var(--edge-light),
    0 14px 34px rgba(68, 48, 38, .075);
}

#standing .presence-card--esg .presence-card__link {
  box-shadow:
    inset 0 0 0 1px rgba(250, 247, 241, .2),
    0 14px 34px rgba(91, 14, 43, .16);
}

/* -- Contrast, at every width. The muted ink was the quietest text in the
      chapter and it carried the one factual line on each card. ---------- */
#standing .presence-card__descriptor { color: var(--on-paper-soft); }
#standing .presence-card--lead .presence-card__descriptor { color: var(--on-paper-soft); }
#standing .presence-card--esg .presence-card__descriptor { color: rgba(250, 247, 241, .86); }

/* -- Focus stays strong on all four, including the burgundy card, where a
      burgundy ring alone would sit against a burgundy field. ----------- */
#standing .presence-card__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-light);
  outline-offset: 3px;
}

#standing .presence-card--esg .presence-card__link:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--paper-hi),
    0 14px 34px rgba(91, 14, 43, .16);
}

/* -- Everything that changes a BOX is desktop and tablet only. Below 768
      the chapter is an authored one-column stack with its own padding, its
      own 34px logo tier and its own 44px control floor, all declared
      earlier in this file; an unscoped rule here would silently undercut
      all three (it did: it dropped the action target to 28px). --------- */
@media (min-width: 768px) {
  /* Two padding tiers, not three. */
  #standing .presence-card__link,
  #standing .presence-card--estithmar .presence-card__link {
    padding: clamp(17px, 1.6vw, 26px);
  }

  #standing .presence-card--lead .presence-card__link { padding: clamp(22px, 2.2vw, 38px); }

  /* Logo scale by MARK SHAPE, not by card size. A wide wordmark and a square
     mark set to the same height do not read as the same size, which is why
     the four marks looked arbitrary. Wide wordmarks sit lower, square marks
     a little taller, and the row reserves one height so all four identity
     blocks start on the same line. */
  #standing .presence-card__logo { min-height: clamp(30px, 2.6vw, 38px); }
  #standing .presence-card--lead .presence-card__logo { min-height: clamp(38px, 3.4vw, 56px); }

  #standing .presence-card--estithmar .presence-card__logo img {
    max-width: min(100%, 200px);
    height: clamp(22px, 1.9vw, 28px);
  }

  #standing .presence-card--dlala .presence-card__logo img { height: clamp(32px, 2.7vw, 42px); }

  #standing .presence-card--esg .presence-card__logo img {
    max-width: min(100%, 92px);
    height: clamp(32px, 2.7vw, 42px);
  }

  /* Readable floors: the secondary descriptor and the official-site action
     both sat at 12px, one whole step below the lead card. They take one step
     down instead of two. */
  #standing .presence-card__descriptor {
    font-size: clamp(13px, .86vw, 14px);
    line-height: 1.55;
  }

  #standing .presence-card--lead .presence-card__descriptor {
    font-size: clamp(14px, .95vw, 16px);
    line-height: 1.62;
  }

  #standing .presence-card__action {
    min-height: 28px;
    font-size: clamp(13px, .86vw, 14px);
  }

  #standing .presence-card--lead .presence-card__action {
    min-height: 32px;
    font-size: clamp(14px, .92vw, 15px);
  }
}

/* ═══ 2 · #agenda · point of view ═══════════════════════════════════════
   Quote-led composition and every word preserved. Attribution, role and
   theme descriptions were the weakest text on the dark surface; the gap
   between the quotation and the three themes closes slightly so the split
   reads as one deliberate statement rather than two sparse halves. */
#agenda .thesis__name { font-size: clamp(15px, 1.04vw, 18px); }

#agenda .thesis__role {
  font-size: clamp(13px, .9vw, 15px);
  color: rgba(248, 244, 238, .78);
}

#agenda .territories p {
  margin-block-start: clamp(5px, .5vw, 8px);
  color: rgba(248, 244, 238, .76);
}

@media (min-width: 900px) {
  #agenda .thesis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #agenda .thesis__quote blockquote { max-width: 26ch; }

  #agenda .territories p {
    font-size: clamp(14px, .96vw, 16px);
    line-height: 1.62;
  }

  #agenda .thesis { gap: clamp(28px, 3.2vw, 64px); }
  #agenda .thesis__quote figcaption { margin-block-start: clamp(18px, 1.8vw, 30px); }

  #agenda .territories > li,
  #agenda .territories > li:first-child { padding: clamp(12px, 1.3vw, 19px) 0; }
}

/* ═══ 4 · #thinking · ideas and writing ═════════════════════════════════
   The feature no longer carries a picture. The artwork it had was a generic
   editorial composition standing for nothing first-party, which is exactly
   what made this chapter read as a social-media card rather than a piece of
   writing. It is now typography-led: a rule, a source, a topic, a large
   title, a summary and one action, on the reading edge of the spread, with
   a vertical seam separating it from the three supporting entries.

   Composition is unchanged: one feature, three supports, one continuation.
   Selections, titles, summaries and destinations are unchanged. */

/* -- The chapter closes up. Its height was set when the feature carried a
      tall picture; with the picture gone the same 110svh reads as a hole
      under the spread rather than as space around it. The chapter and the
      spread both step down, which SHORTENS the page. --------------------- */
@media (min-width: 768px) {
  #thinking.writing,
  .js #thinking.writing { min-height: 100svh; }
}

/* -- The seam belongs to the LANE, not to the feature ------------------
   One hairline runs the whole height of the reading-edge column, beside the
   feature AND the «قرار» module below it, so the two read as one lane of the
   spread rather than as a bordered card with an orphan under it. */

/* -- The feature: one typographic block, vertically centred in the space
      the «قرار» module leaves it ------------------------------------- */

/* -- The support lane: three rows, then the owned-blog continuation ----
   No gap of its own: the rows keep their authored `padding-block` and the
   established hairline separator policy, so the rhythm inside the lane is
   exactly the rhythm the three supports already had. */

/* The restrained accent: one short burgundy rule on the reading edge. It is
   decorative, carries no meaning and is drawn in CSS, so the markup stays a
   plain link to an article. */

/* Publication, then date, then topic: the folio line of the entry. All three
   are first-party values read off the article's own page, so the line is a
   citation rather than a label. */

/* Publication, date, byline, topic - four facts of one citation on one line.
   The byline is IN the folio line rather than on a row of its own under the
   title: it is the same kind of fact as the other three, and a separate row
   cost the chapter about 24px it does not have to spend. */

/* One hairline divider ahead of each folio item after the first. */

/* With no picture the title is the picture. 20ch is the measure at which
   the full 40-character Arabic title still sets in exactly two lines at
   every desktop and tablet width; nothing is clamped or cut. */

/* 56ch, up from 42ch. The summary of the August feature is 137 characters
   and a 42ch measure set it in four lines; 56ch sets it in three at every
   width from 1100 up, inside the same column, with no truncation. */

/* -- Supports stay compact, and become legible rather than faint -------- */

/* The measure is the LANE, not a character count - see the note on the same
   selector further up. The longest of the three verified titles is 48
   characters, and a 28ch cap forced it onto three and four lines at 1100 and
   1366; taking the cap off resolves all three in at most two lines at every
   width from 768 up, with no clamp, ellipsis or truncation anywhere. */

/* -- «قرار» · the compact X module ------------------------------------
   It lives inside the feature lane, in the space the vertically centred
   feature used to leave empty, and it is TEXT and nothing else: a label,
   the series title, the milestone sentence, two entries quoted as
   published, and one link to the profile. There is no embed, no widget, no
   avatar, no timestamp, no follower count and no imitation of a social
   interface anywhere in it, and the only destination is the profile - x.com
   exposes no stable per-post permalink to this project, so no entry is a
   link. Open surface and one hairline, never a card. */
#thinking .decision {
  margin-block-start: clamp(10px, 1.5svh, 22px);
  padding-block-start: clamp(9px, 1.4svh, 17px);
  border-block-start: 1px solid var(--line-paper);
}

/* The milestone is a stated number with its month, never a live counter. */

/* -- «من المدونة» · the owned-blog continuation ------------------------
   Two verified articles on her own site, as two compact links. It is a
   continuation, not a third list: no excerpt, no artwork, no date and no
   new route - the chapter's one archive link stays in the head above. */

/* -- Handheld: no seam, no side padding, the lanes simply stack --------
   Source order is what a phone gets, and it is already the reading order:
   feature → «قرار» → the three supports → the owned-blog continuation. */
@media (max-width: 767px) {

  /* Full touch targets on the two compact link lists. */

  /* The two modules stack under their lane on a phone, so they take a
     handheld rhythm rather than the lane's svh-driven one. */
  #thinking .decision { margin-block-start: clamp(16px, 4.4vw, 22px); }
  #thinking .decision,
  #thinking .owned-blog { padding-block-start: clamp(12px, 3.4vw, 16px); }
}

/* -- Handheld: the same chapter, set as a compact editorial column ------
   CORRECTION 2026-09-03. The handheld stack was ~230px taller than the
   chapter it replaced, which the brief does not allow: the «قرار» module had
   to come out of existing space, not out of new page height.

   Nothing below hides, clamps, truncates, ellipsizes, defers, reorders or
   hover-gates any part of the chapter. Every element the desktop composition
   carries is still real HTML text, in source order, at a readable size, with
   its own visible focus ring and its own 44px target where it is a control.
   What changes is the RHYTHM and, in two places, the COMPOSITION:

     · the chapter's four modules each re-applied a spacing scale authored for
       a two-lane spread that stops existing the moment the lanes stack, so a
       phone paid the same generous rhythm four times over;
     · two label rows - «من X» and «من المدونة» - stood alone above content
       narrow enough to sit beside them, so they now pair with it;
     · the feature's «اقرأ المقال» is a SPAN inside the card link, not a
       control of its own. Its 44px floor bought no touch target (the anchor
       is the target, and it is the full height of the feature) and cost 20px
       of chapter height on every phone.

   Scope is <=767px only. The approved desktop composition is untouched, and
   the three real controls in this chapter - the archive link, the «قرار»
   profile link and the two blog links - all keep min-height: 44px. */
@media (max-width: 767px) {

  /* 1 · The chapter head ------------------------------------------------
     The two canonical heading gaps - label→title and title→summary - are NOT
     touched here. CORRECTION 2026-09-03: this rule used to tighten them to
     5px/6px for this one chapter, which put «أفكار» out of step with every
     other mobile section head. Section label/title/summary rhythm is owned
     once by the canonical chapter-heading tokens (9px / 12px at handheld);
     a chapter does not get its own values. The head still stops reserving a
     padded floor above the spread: the spread carries its own top margin. */
  #thinking {
    /* The shared COMPONENT label gap, which the design system applies with
       `!important` to every `.journal-story__meta + h3` in the chapter. It is
       tuned here through the token rather than out-specified, so the four
       story titles keep reading it from one place. */
    --component-label-title-gap: 5px;
  }

  #thinking .writing__aside { margin-block-start: 8px; }

  /* 2 · The feature -----------------------------------------------------
     Folio line, title, summary and action keep every word, every size and
     every line; only the air between them takes a handheld rhythm. */

  /* The feature's title carries a little more air than a support row's. */

  /* Not a control: see the note above. The anchor around it is the target. */

  /* 3 · «قرار» ----------------------------------------------------------
     The kicker and the series title are a label and its subject, both short
     («من X» ~30px, «قرار مع د. بثينة» ~112px at 360). They pair on one row
     instead of stacking. Milestone, both entries and the profile link keep
     the full measure underneath. */
  #thinking .decision {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    margin-block-start: 12px;
    padding-block-start: 10px;
  }

  /* A grid item is blockified, so the link is pinned back to its own width
     rather than stretched across the module. */

  /* 4 · The three supports ----------------------------------------------
     Same two-track row, same measure, same 44x44 arrow: a tighter row
     rhythm, and the folio line bound to the title it belongs to. */


  /* 5 · «من المدونة» -----------------------------------------------------
     The label sits beside its two links rather than on a row above them. The
     links keep a 233px measure at 360 - two comfortable lines for both
     verified titles - and their full 44px targets. */

  /* Centred against the first 44px link row, not against its cap height. */
}

/* ═══ 5 · #knowledge · books ════════════════════════════════════════════
   The chapter is the heading lockup, the library link and one supplied
   plate. Only the link gets a type floor here. */
#knowledge .books-section__head { margin-block-end: clamp(6px, 1svh, 22px); }

#knowledge .books-section__note .story-link { font-size: clamp(14px, .96vw, 16px); }

#knowledge .books-section__note .story-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-light);
  outline-offset: 4px;
  border-radius: 8px;
}


/* The player readout is metadata the reader checks mid-listen; 11px was the
   smallest live text in the chapter. */


/* ═══ 7 · #career ═══════════════════════════════════════════════════════
   Career is NOT settled in this pass and nothing here is its last word: the
   six-state geometry - the one-viewport normal-flow composition, the
   six-column field, the detail area and the 900-1099 reflow - is declared in
   the FINAL CAREER LAYER at the end of this file, which overrides this pass
   wherever the two disagree. The authentic assets, the single credentials
   strip and the marble floor are carried through unchanged.

   ═══ 8 · #work · collaboration ═════════════════════════════════════════
   Three paths and both programme links unchanged. The duplicate closing
   call to action is gone from the markup and its rules are deleted above;
   Contact owns the page's one final action. */
#work .work__inner { grid-template-rows: auto minmax(0, auto); }

@media (min-width: 900px) {
  #work .work__inner { min-height: 70svh; }
}

#work .work-path__note {
  font-size: clamp(14px, .96vw, 16px);
  line-height: 1.65;
}

#work .work-path__program-title { font-size: clamp(14px, .96vw, 16px); }

/* The ordinal is a quiet typographic object; at .34 alpha it had become a
   smudge rather than a mark. */
#work .work-path__figure {
  color: rgba(138, 21, 56, .46);
}

#work .work-path__programs a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══ 9 · #contact ══════════════════════════════════════════════════════
   Exactly one primary call to action, and only verified channels. No second
   action is added, and the footer does not grow. */

/* The contact group carries FOUR routes since X joined LinkedIn as a public
   profile, and a fourth stacked row would have made the footer 44px taller.
   It pairs instead: email / WhatsApp, then LinkedIn / X. Two rows either way,
   so the footer is the same height with four routes as it was with three,
   and every link keeps its own 44px target. */

/* The handle names the destination before it is opened. It is quieter than
   the label, never wraps away from it, and is not a counter of any kind. */

#contact .closing__territories {
  font-size: clamp(12.5px, .86vw, 14px);
  color: rgba(244, 239, 232, .74);
}

#contact .closing__base {
  padding-block: clamp(8px, 1.05vh, 13px) clamp(6px, .9vh, 11px);
  font-size: clamp(12px, .82vw, 13px);
  color: rgba(244, 239, 232, .66);
}

#contact :is(a, button):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Career · six states, seven records · FINAL CAREER LAYER · 2 Sep 2026
   ───────────────────────────────────────────────────────────────────────
   Last word on #career, and the only place in this stylesheet that knows
   how many states there are. Everything above it predates the six-state
   record and was sized for a shorter one; nothing above is deleted, because the
   type scale, the marble floor, the alpha-mask dissolve, the credentials
   pill and the focus treatment are all still correct - this layer settles
   the geometry those rules were sized for.

   THE INTERACTION CONTRACT, and it is the whole of it: Career is an
   ORDINARY NORMAL-FLOW SECTION and HOVER IS ITS ONLY INTERACTION. There is
   no sticky or pinned scene, no extended scene height, no scroll-progress
   rail, no weighted stage ladder, no scroll listener and no observer -
   `main.js` does not touch this chapter at all. Scrolling over Career moves
   the page and changes nothing else. At rest the six states are EQUAL: no
   state is authored active and none is ever selected automatically.
   `:focus-visible` is hover's keyboard equivalent and carries an identical
   composition; nothing persists on click or on touch.

   TWO arrangements, and only two:

     A · NORMAL FLOW - the default at every width, and the ONLY arrangement
         without JavaScript, on a coarse pointer, under
         `prefers-reduced-motion: reduce`, and below 1100px. Every state is
         an ordinary block in source order with its whole detail visible:
         roles, dates, the overlap notes, the Qatariat scope and projects,
         the four board destinations. Nothing grows, nothing can overlap a
         neighbour, and no interaction is required to read any fact.

     B · THE HOVER ACCORDION - the desktop enhancement, gated on `.js` AND
         `(min-width: 1100px)` AND `(hover: hover)` AND `(pointer: fine)` AND
         `(prefers-reduced-motion: no-preference)`. Six columns of shared
         horizontal tracks inside one normal-flow composition; the hovered
         state expands by flex-grow, pushes its neighbours without overlap
         and opens its detail area in place. Pointer exit returns all six to
         equal width.

   Why the 900-1099 band changed arrangement: six columns at that width give
   each resting state about 150px, which is not a readable measure for a
   state heading, let alone for role lines. The band therefore leaves the
   horizontal field entirely and becomes a two-column normal-flow grid in
   source order, which keeps the chronology and the design family without
   squeezing anything.

   Chapter height: about ONE viewport. The scene is auto-height and the
   composition inside it takes `min-height: 100svh`, so the whole chapter
   resolves in a screen with no travel to spend and no blank band after the
   last thing there is to see.

   Not re-litigated here, and unchanged: Tajawal throughout, warm paper /
   off-black, the single burgundy accent, no glow, no text gradient, no rule
   under a section title, and NO truncation, `line-clamp` or clipped text
   anywhere in the chapter.
   ═══════════════════════════════════════════════════════════════════════ */

/* RETIRED 2026-09-04 - `--career-photo-mask`. The dissolve token and both of
   the rules that consumed it are deleted, not merely overridden: the runtime
   photographs are background-extracted cutouts (and the sixth is silhouette-
   clipped), so no Career image needs an alpha ramp over it, and any surviving
   declaration would have faded a building instead of a sky. The token is gone
   so a stale `mask-image: var(--career-photo-mask)` cannot resolve anywhere. */

/* ── 0 · Shared, every width ─────────────────────────────────────────── */

/* RETIRED 2026-09-03 - the taxonomy line that used to close this opening band
   repeated each state's `journeyAr` verbatim, so it named the six states a
   second time above the six states. Markup and rules are both gone; the data
   stays canonical in content.js for the state records that do render. */

/* State 06 closes on a word, not a year, so it carries a period SPAN where
   the dated states carry a <time>. Both read as the same object. */
#career .career-slide__period {
  display: block;
  margin-block-end: clamp(12px, 1.25vw, 20px);
  font-size: clamp(16px, 1.15vw, 20px);
  letter-spacing: .06em;
  color: var(--burgundy);
}

/* -- The detail area -------------------------------------------------
   The full professional record of one state: its roles with their own
   dates, the overlap note where two posts run at once, the verified
   Qatariat scope and its two knowledge projects, and the four board
   destinations. It is plain, ordinary text in an ordinary list - readable
   to assistive technology in every mode, never truncated, never clamped. */
#career .career-slide__detail {
  width: 100%;
  margin-block-start: clamp(10px, 1.4vw, 16px);
  /* The desktop field runs `direction: ltr` so the six columns sit left to
     right in a fixed physical order; the detail is running Arabic prose and
     must reset to RTL for its own content. */
  direction: rtl;
  text-align: start;
  font-size: clamp(13px, .92vw, 15px);
  line-height: 1.55;
  color: var(--on-paper-soft);
}

#career .career-slide__detail > * + * { margin-block-start: clamp(8px, 1vh, 12px); }

/* Two posts held at the same time, not one replaced by the other. It is a
   sentence, not a badge, so a screen reader announces it with the roles it
   qualifies rather than as a decorative flourish. */
#career .career-slide__overlap {
  margin: 0;
  font-size: .88em;
  letter-spacing: .03em;
  color: var(--burgundy);
}

#career .career-slide__roles,
#career .career-slide__scope,
#career .career-slide__projects,
#career .career-slide__destinations {
  list-style: none;
  margin: 0;
  padding: 0;
}

#career .career-slide__roles { display: grid; gap: clamp(6px, .8vh, 10px); }

#career .career-slide__role-title {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

#career .career-slide__role-org { color: var(--on-paper-mute); }

/* The separator belongs to the ORGANISATION, not to the date: the date span
   is `dir="ltr"`, so a `::before` inside it would be reordered to the far
   side of the number instead of sitting between the two facts. */
#career .career-slide__role-org:not(:last-child)::after {
  content: '·';
  margin-inline: .45em;
  color: var(--line-paper);
}

#career .career-slide__role-period {
  color: var(--burgundy);
  letter-spacing: .05em;
}

/* -- One tenure, two phases ------------------------------------------
   State 02 is ONE Ooredoo state, not two: the organisation and the
   nine-year period are the role line, and the two posts below it are its
   PHASES. They are an ordinary ordered list of plain text under the role
   they belong to, so "one employer, two posts, in this order" is carried by
   the markup itself and needs no spatial reading - a screen reader gets the
   same progression in the panorama, in the two-column grid and on a phone.
   Each phase is one line: period first, then the post. */
#career .career-slide__phases {
  list-style: none;
  display: grid;
  gap: clamp(3px, .4vh, 6px);
  margin: clamp(4px, .55vh, 7px) 0 0;
  padding: 0;
}

#career .career-slide__phase {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .55em;
  padding-inline-start: 13px;
}

#career .career-slide__phase::before {
  content: '';
  position: absolute;
  inset-inline-start: 1px;
  inset-block-start: .56em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--burgundy);
  opacity: .45;
}

#career .career-slide__phase-period {
  flex: none;
  color: var(--burgundy);
  letter-spacing: .05em;
}

#career .career-slide__phase-title { color: var(--ink); }

/* The three verified activity areas, as one quiet line. No memberships, no
   awards, no catalogue of projects - S20 records these three and no more. */
#career .career-slide__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--on-paper-mute);
}

#career .career-slide__scope li + li::before {
  content: '·';
  margin-inline: .5em;
  color: var(--line-paper);
}

#career .career-slide__projects { display: grid; gap: clamp(3px, .4vh, 6px); }

#career .career-slide__project {
  display: flex;
  align-items: baseline;
  gap: .6em;
}

#career .career-slide__project-period {
  margin-inline-start: auto;
  color: var(--burgundy);
  letter-spacing: .05em;
}

/* The four current destinations: compact lines, no card, no context
   paragraph and no link. Current Institutional Presence still owns all of
   that higher up the page and none of it is repeated here. */
#career .career-slide__destinations { display: grid; gap: clamp(4px, .5vh, 7px); }

#career .career-slide__destinations li {
  position: relative;
  padding-inline-start: 15px;
}

#career .career-slide__destinations li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .58em;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--burgundy);
  opacity: .5;
}

/* -- The two identity treatments in the mark row ---------------------
   Every state carries its organisation in the SAME row: states 01-04 an
   official mark, state 05 its name set as type because no Qatariat mark
   exists in this project, state 06 the four official destination marks.
   Nothing here sits over a photograph - the media cell below is an ordinary
   image in all six columns, and a mark laid on a building would read as a
   claim that the building belongs to that organisation. */
/* State 05 is a LOCKUP, not bare type: an original conceptual emblem made for
   this site sits on the reading edge of the Arabic wordmark, so the row reads
   as one mark like the five real ones beside it. The outer element is the
   horizontal lockup; the stacked name and caption move into the copy wrapper,
   which keeps the 1px stack gap the type used to own. */
#career .career-slide__identity {
  display: flex;
  /* Arabic reading order: with the mark first in the DOM, RTL flow puts the
     emblem on the right of the wordmark at every arrangement. */
  direction: rtl;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .45vw, 7px);
  margin: 0;
  max-width: 100%;
  text-align: center;
}

#career .career-slide__identity-copy {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
}

/* Contained and uncropped like the other marks, and never allowed to grow the
   fixed mark track: the emblem is capped below the track height so the year,
   heading and media rows stay exactly where they are. */
#career .career-slide__identity-mark {
  flex: none;
  width: auto;
  height: auto;
  max-height: clamp(32px, 2.4vw, 34px);
  max-width: 34px;
  object-fit: contain;
}

#career .career-slide__identity-name {
  font-family: var(--display);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--burgundy);
}

/* The full legal name is also carried in plain text by the role line in the
   detail, so this caption is a repeat for the eye, never the only place a
   reader can find it. Sized to fit alongside wider mark without truncation. */
#career .career-slide__identity-caption {
  max-width: 100%;
  font-size: clamp(9px, .65vw, 11px);
  line-height: 1.35;
  letter-spacing: .03em;
  white-space: normal;
  color: var(--on-paper-mute);
}

/* Contained and uncropped, never `cover`: these are official marks, not
   photographs, and each one keeps its own artwork and aspect. They wrap, so
   the narrowest resting column resolves them on two lines inside the same
   fixed mark track rather than overflowing it. */
#career .career-slide__destination-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px clamp(6px, .7vw, 10px);
  margin: 0;
  max-width: 100%;
}

#career .career-slide__destination-marks img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(11px, 1.25vh, 15px);
  object-fit: contain;
  object-position: center center;
  filter: none;
  opacity: .92;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
}

/* ── A · NORMAL FLOW at 900px and up ─────────────────────────────────
   No pin, no expansion, no horizontal field: the states are blocks in a
   grid, in source order, each complete. This is what a reader gets without
   JavaScript, under reduced motion, and at every width from 900 to 1099. */
@media (min-width: 900px) {
  #career .career__scene,
  #career .career__inner {
    min-height: 0;
    height: auto;
  }

  #career .career__states {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px) clamp(24px, 2.8vw, 44px);
    /* back to document direction: reading right to left IS the chronology */
    direction: rtl;
    flex: 0 0 auto;
    height: auto;
    align-items: start;
  }

  #career .career-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    grid-template-rows: none;
    height: auto;
    flex: none;
    min-width: 0;
    padding-inline: 0;
    transition: none;
  }

  /* The hairlines belong to the horizontal panorama; separate blocks in a
     grid have gutters instead. */
  #career .career-slide + .career-slide::before { content: none; }

  #career .career-slide > .career-slide__marker {
    align-self: flex-start;
    opacity: 1;
  }

  #career .career-slide > time,
  #career .career-slide > .career-slide__period {
    align-self: flex-start;
    margin-block: clamp(8px, .9vw, 12px) clamp(6px, .7vw, 10px);
    font-size: clamp(15px, 1.05vw, 18px);
  }

  #career .career-slide > .career-slide__logo {
    align-self: flex-start;
    max-height: clamp(28px, 3vw, 40px);
    max-width: min(100%, 190px);
    margin-block-end: clamp(8px, 1vw, 12px);
    object-position: right center;
  }

  /* The two identity treatments stand in the mark's place, so they take the
     mark's alignment: reading edge, not centred, in the static readable
     arrangement. The caption may use two lines here - nothing is on a fixed
     track in normal flow. */
  #career .career-slide > .career-slide__identity,
  #career .career-slide > .career-slide__destination-marks {
    align-self: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
    margin-block-end: clamp(8px, 1vw, 12px);
  }

  #career .career-slide > .career-slide__identity {
    align-items: center;
    text-align: start;
  }

  #career .career-slide > .career-slide__identity-copy,
  #career .career-slide__identity-copy { align-items: flex-start; }

  #career .career-slide__identity-caption {
    white-space: normal;
    overflow: visible;
    font-size: clamp(10px, .8vw, 12px);
  }

  #career .career-slide__destination-marks img { max-height: clamp(15px, 1.7vw, 22px); }

  /* Full measure, reading edge, no centring: these are headings on blocks,
     not captions under columns. */
  #career .career-slide > h3 {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    align-self: flex-start;
    text-align: start;
    text-wrap: pretty;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.45;
    color: var(--ink);
  }

  /* All six state fields are photographs on one shared block, so they sit on
     one line across the grid. */
  #career .career-slide > .career-slide__photo {
    align-self: stretch;
    width: 100%;
    height: clamp(150px, 16vw, 210px);
    margin-block-start: clamp(14px, 1.6vw, 20px);
  }

  /* A standalone block shows its whole subject, at rest and on hover alike. */
  #career .career-slide__photo img {
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
    object-position: center bottom;
  }

  /* Hover is not a size change here: nothing grows, so nothing can push or
     overlap a neighbour in this arrangement. */
  #career .career__states > .career-slide:hover .career-slide__photo img,
  #career .career__states > .career-slide:focus-visible .career-slide__photo img {
    transform: none;
    object-position: center bottom;
  }
}

/* Three columns once the measure can carry them. Row-major and RTL, so the
   chronology still reads 01 02 03 / 04 05 06. */
@media (min-width: 1280px) {
  #career .career__states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── The stacked bands: the detail area joins the card ───────────────
   styles.css lays each card out below 900px as a wrapped flex row with an
   authored `order` per child. The detail area, the state-06 period and the
   two identity treatments are new children, so they need their own place in
   that order or they would default to `order: 0` and jump ahead of the
   marker. The identity treatments take the mark's own `order: 3`, because
   that is the slot they stand in for. */
@media (max-width: 899px) {
  #career .career-slide__period { order: 2; margin-block-end: 0; }
  #career .career-slide__identity,
  #career .career-slide__destination-marks {
    order: 3;
    align-items: flex-start;
    justify-content: flex-start;
    margin-block-end: clamp(8px, 1vw, 12px);
  }
  #career .career-slide__identity {
    align-items: center;
    text-align: start;
  }
  #career .career-slide__identity-copy { align-items: flex-start; }
  #career .career-slide__destination-marks img { max-height: clamp(16px, 2.4vw, 24px); }
  #career .career-slide__detail {
    order: 5;
    flex: 1 1 100%;
    margin-block-start: clamp(14px, 3vw, 20px);
  }
  #career .career-slide__photo { order: 6; }
}

/* ── B · THE HOVER ACCORDION ─────────────────────────────────────────
   Desktop only, fine-pointer only, JavaScript only, motion-permitting only.
   Everything in this block is an enhancement over arrangement A above and
   every rule carries `.js`, so losing the class - or any one of the media
   conditions - restores A whole.

   NORMAL FLOW. The scene is exactly as tall as the composition inside it,
   which is about one viewport: no sticky, no extended scene, no travel, and
   therefore no blank scroll after the last thing the reader can see. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js #career .career__scene {
    min-height: 0;
    height: auto;
  }

  /* One screen, and only as a FLOOR: the composition is sized to resolve
     inside a viewport, and if a short laptop or a long translation needs a
     few pixels more it takes them rather than clipping a fact. */
  .js #career .career__inner {
    min-height: 100svh;
    height: auto;
  }

  /* Back to the horizontal field: six flex columns in one fixed width. */
  .js #career .career__states {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    direction: ltr;
    align-items: stretch;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  /* Six shared tracks. The first four and the detail track are FIXED, so the
     diamond, the period, the mark, the heading and the top of the detail
     each sit on one horizontal across all six states; the media cell takes
     whatever is left. Expansion changes flex-grow only, so it can never move
     a row off its line. */
  .js #career .career-slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      14px
      /* The year track has to hold the year LINE BOX, and that line box is
         sized in vw, not vh: `time` is clamp(15px, 1vw, 18px) at line-height
         1.7, so it is 25.5px wide-screen-independent at 1280 and 30.6px once
         the type reaches its 18px ceiling. A vh track cannot follow that, so
         this one is driven by the same axis as the type it carries and is
         floored at 30px, which clears the 25.5px line at 1280x720 and leaves
         the shared 5px+ gap to the mark row below. */
      clamp(30px, 1.9vw, 36px)
      /* The mark track must be TALLER than the tallest mark, because the mark
         is centred in it: the Qatar University cap is clamp(40px, 4.4vh,
         52px), so this track runs on a steeper 5vh with a 42px floor and a
         56px ceiling and stays above the cap at every height. */
      clamp(42px, 5vh, 56px)
      /* Two lines of heading at the NARROWEST resting column: 35px at
         1280x720, 35.2px at 1366x768, 41.2px at 1600x900, 44.8px at
         1920x1080. Same 4.8vh ramp as before with the floor brought down to
         36px, which is the tightest fit that still clears the 720px case. */
      clamp(36px, 4.8vh, 56px)
      /* The detail track has to hold the TALLEST record - state 01's two
         concurrent posts - at the EXPANDED column width, on a 700px-tall
         laptop as well as on a 900px screen. Measured in the browser at the
         hovered width: 93.7px at 1100x700, 94.2px at 1366x768, 100.2px at
         1440x900, 112.8px at 1920x1080. The track carries each of those with
         headroom and no more: it is reserved at rest so that opening a state
         never moves the photograph row, and every reserved pixel beyond the
         tallest record is dead air in five columns out of six. The floor is
         96px rather than 104px so that the four tracks above can take the
         pixels they need without the pre-media block growing by more than
         6px in total and without the photograph row paying for it twice. */
      clamp(96px, 12vh, 122px)
      minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    text-align: center;
    height: auto;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0;
    transition: flex-grow 560ms var(--ease-expressive);
  }

  /* Explicit rows, never auto-placement: states 05 and 06 hold no official
     mark and state 05 holds no period, so an auto-placed grid would slide
     their heading and media cell up into the tracks above and break the one
     horizontal the whole composition is built on. */
  .js #career .career-slide > .career-slide__marker { grid-row: 1; }
  .js #career .career-slide > time,
  .js #career .career-slide > .career-slide__period { grid-row: 2; }
  .js #career .career-slide > .career-slide__logo,
  .js #career .career-slide > .career-slide__identity,
  .js #career .career-slide > .career-slide__destination-marks { grid-row: 3; }
  .js #career .career-slide > h3 { grid-row: 4; }
  .js #career .career-slide > .career-slide__detail { grid-row: 5; }
  .js #career .career-slide > .career-slide__photo { grid-row: 6; }

  /* BOTH year treatments, in ONE rule and with the SAME reset. `time` and
     `.career-slide__period` sit in the same track and read as the same line,
     so they cannot be reset separately: arrangement A above gives both of
     them `align-self: flex-start` and a `margin-block` of up to 11.52px /
     8.96px, and resetting only the period left `time` carrying that margin
     into a fixed track, which pushed the year down until it overlapped the
     mark row below it by 17px at 1280x720. Everything arrangement A sets is
     undone here for both, and the shared `flex-start` puts the two on the
     same horizontal at the top of the track. */
  .js #career .career-slide > time,
  .js #career .career-slide > .career-slide__period {
    position: relative;
    inset: auto;
    align-self: flex-start;
    margin: 0;
    transform: none;
    z-index: 2;
    font-size: clamp(15px, 1vw, 18px);
  }

  /* Centred in the mark track, stated rather than inherited: arrangement A
     top-aligns the logo, and a top-aligned 40px logo in this track sits hard
     against the year above it. The three mark treatments share one rule for
     alignment so no state can drift off the row. */
  .js #career .career-slide > .career-slide__logo {
    align-self: center;
    max-height: var(--logo-cap, 44px);
    max-width: min(100%, 170px);
    margin: 0;
    object-position: center center;
  }

  /* Back to the compact centred treatment: in the panorama the mark row is a
     FIXED track shared by all six columns, so the caption stays on one line
     and the four destination marks stay small enough to resolve inside the
     track at the narrowest resting column. */
  .js #career .career-slide > .career-slide__identity,
  .js #career .career-slide > .career-slide__destination-marks {
    align-self: center;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-inline: clamp(4px, .45vw, 9px);
  }

  .js #career .career-slide > .career-slide__identity {
    align-items: center;
    text-align: center;
  }

  .js #career .career-slide__identity-copy { align-items: center; }

  .js #career .career-slide__identity-mark { max-height: clamp(32px, 2.4vw, 34px); }

  .js #career .career-slide__identity-caption {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(8.5px, .62vw, 11px);
  }

  .js #career .career-slide__destination-marks img { max-height: clamp(11px, 1.25vh, 15px); }

  /* Two lines at most, at every width from 1100 up, and complete: no clamp,
     no ellipsis, no hidden overflow. The measure is the card, so the heading
     is sized to fit the narrowest resting column rather than the widest. */
  .js #career .career-slide > h3 {
    align-self: center;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(5px, .5vw, 11px);
    text-align: center;
    text-wrap: balance;
    font-size: clamp(12.5px, .92vw, 16px);
    line-height: 1.4;
    color: var(--on-paper-soft);
  }

  /* The detail track is fixed, so a state whose record is taller than the
     track at a RESTING column width cannot inflate the shared rows. Only the
     active state is painted, and the active state is the widest column, so
     the only measure that is ever read is the one the track is sized for. */
  .js #career .career-slide > .career-slide__detail {
    position: relative;
    inset: auto;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding-inline: clamp(10px, 1.1vw, 22px);
    padding-block-start: clamp(2px, .5vh, 7px);
    z-index: 3;
    font-size: clamp(11.5px, .84vw, 13.5px);
    line-height: 1.5;
    /* Kept in the DOM and in the accessibility tree at ALL times - this is
       opacity, not `display` or `visibility`, so a screen reader still reads
       every state's full record in source order exactly as the no-JS
       fallback renders it. Only the painting is selection-dependent. */
    opacity: 0;
    transform: translateY(7px);
    transition:
      opacity 380ms var(--ease-expressive),
      transform 480ms var(--ease-expressive);
    pointer-events: none;
  }

  .js #career .career__states > .career-slide:hover > .career-slide__detail,
  .js #career .career__states > .career-slide:focus-visible > .career-slide__detail {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* The media cell is a grid cell, not an overlay: an expanding state widens
     its own column and its neighbours reflow beside it. Nothing is ever
     drawn over a sibling. */
  .js #career .career-slide > .career-slide__photo {
    position: relative;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin-block-start: 0;
    overflow: hidden;
    background: transparent;
  }

  /* OUT OF FLOW, and this is load-bearing: the media row is `minmax(0, 1fr)`
     inside an auto-height grid, so an in-flow photograph resolves that row to
     its OWN aspect height - a 1160x1300 source in a 394px expanded column
     wants 442px where the composition allots 287px. In flow, hovering a state
     therefore grew the row, the card, the field and the whole section by
     ~155px and pushed the credentials strip off the screen. Taking the image
     out of flow bounds the row by the composition instead of by the source's
     aspect, so hover changes WIDTH and never height, and the section is the
     same height hovered as at rest. */
  .js #career .career-slide__photo img {
    position: absolute;
    inset: 0;
  }

  /* NO MASK in the accordion either. The six columns are cutouts standing on a
     shared ground line, not six crops of one panorama, so there is no seam
     between them to dissolve - only buildings a fade would have eaten. The
     image is contained (never cropped) and bottom-anchored; scale is the only
     hover step and it never exceeds 1, so no roof can leave the frame. */
  .js #career .career-slide__photo img {
    -webkit-mask-image: none;
    mask-image: none;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
    transform: scale(.98);
    transform-origin: center bottom;
  }

  .js #career .career-slide + .career-slide::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 1px;
    z-index: 4;
    background: var(--edge-light-soft);
  }

  /* -- The one expanded composition ----------------------------------
     `:hover` and `:focus-visible` are ONE state with one set of numbers, so
     pointer and keyboard land on an identical composition. They are also the
     ONLY two selectors that reach it: there is no `.is-active`, no script,
     no scroll progress and no click or touch persistence anywhere in this
     chapter, so at rest all six states are equal and the expanded state
     lasts exactly as long as the pointer or the focus does.

     Nothing gates these rules. The retired hover-suppression class existed
     only because a scroll ladder and native hover could otherwise paint two
     different states at once; with the ladder gone there is one input and
     nothing to arbitrate.

     Expansion is flex-grow inside a fixed field width: the hovered state
     pushes and narrows its five siblings and never draws over one. Leaving
     the field drops the grow value, so the six columns return to equal. */
  .js #career .career__states > .career-slide:hover,
  .js #career .career__states > .career-slide:focus-visible { flex-grow: 2.2; }

  .js #career .career__states > .career-slide:hover > .career-slide__marker,
  .js #career .career__states > .career-slide:focus-visible > .career-slide__marker { opacity: 1; }

  .js #career .career__states > .career-slide:hover > h3,
  .js #career .career__states > .career-slide:focus-visible > h3 {
    color: var(--ink);
    font-weight: 500;
  }

  .js #career .career__states > .career-slide:hover .career-slide__photo img,
  .js #career .career__states > .career-slide:focus-visible .career-slide__photo img {
    transform: scale(1);
    object-position: center bottom;
  }

  /* The mark row is not the media cell: the destination marks sit above the
     photograph, so they never take its lift or its scale - only the quiet
     opacity step that says the column is the active one. */
  .js #career .career__states > .career-slide:hover .career-slide__destination-marks img,
  .js #career .career__states > .career-slide:focus-visible .career-slide__destination-marks img {
    transform: none;
    opacity: 1;
  }

  /* 1100-1279: the same six columns, one type step down, because a resting
     column is at its narrowest here and the headings must still resolve
     complete in two lines. */
  @media (max-width: 1279px) {
    .js #career .career__states > .career-slide:hover,
    .js #career .career__states > .career-slide:focus-visible { flex-grow: 1.95; }

    .js #career .career-slide > h3 {
      padding-inline: 4px;
      font-size: 12.5px;
      line-height: 1.38;
    }

    .js #career .career-slide > .career-slide__detail {
      padding-inline: 9px;
      font-size: 11.5px;
    }
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────
   The hover accordion above never applies here, so the chapter is already
   arrangement A. This only makes sure the detail area carries no animation
   of its own if it is ever reached in this mode. */
@media (prefers-reduced-motion: reduce) {
  #career .career-slide__detail {
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
}

/* ─ (removed) Premium desktop: career qualifications overlap ───────────
   CONSOLIDATED AWAY on 2026-09-04, not re-tuned. A first version of this rule
   lived here and set `margin-block-start: calc(-1 * clamp(145px, 20vh, 189px))`
   with `z-index: 5`, plus a 115-145px credentials height and a 14-22px
   padding-block. Every one of those declarations was already dead: the later
   "Desktop Career rail overlap" layer (search that string) matches the same
   two selectors at the same specificity in the same media conditions and, being
   authored after it, resets `margin: 0`, `z-index: 8`, `height: clamp(76px,
   8.5vh, 84px)` and `padding-block: clamp(8px, 1vh, 13px)`. The comment that
   stood here therefore described a negative margin and a stacking order the
   page has not used since that layer was written.
   The block's ONE surviving declaration was `padding-inline: clamp(20px, 2vw,
   34px)`, which is the identical value the base `#career .career__credentials`
   rule already sets in its `padding` shorthand - so removing this block leaves
   the computed padding at 9px 28.8px at 1440, unchanged.
   The overlap itself is unchanged and still deliberate; it is produced by the
   translate in the later layer, which is the single authority for it. */


/* ═══ #standing · the shared media layer inside the four-card field ═════
   One media layer sits behind the existing logo / identity / foot stack on
   every card; the card link is already positioned, clipped and rounded, so
   the layer only has to fill it. What that layer CONTAINS differs by card,
   and the split is declared in the markup, not guessed here:

     · `.presence-card__media--cutout` — Estithmar and Dlala. A true-alpha WebP
       cutout of the building, decorative, `alt=""`, inside an `aria-hidden`
       wrapper. It does NOT use the shared veil below and does NOT use the
       shared `cover` framing: its image field, right-anchor and `contain`
       fit are all authored in the authoritative `#standing` block at the end
       of this file, which overrides the `img` box and drops the `::after`
       veil entirely — there is no fade of any kind on these two cards.
     · plain `.presence-card__media` — Hawkama and ESG. Still empty, still
       painted by the project-authored CSS composition at the end of this
       file. Untouched by the 4 Sep 2026 cutout pass.

   Legibility on the PAINTED cards is bought with soft directional warm-paper
   gradients, not with a flat wash and not with a burgundy tint: the veil is
   near opaque on the physical right, where the RTL logo, name, role,
   descriptor and official-site link live, and it opens up towards the
   physical left. The two cutout cards reach legibility a different way —
   the building sits on the card's own PHYSICAL LEFT at full opacity and the
   content columns move to the PHYSICAL RIGHT instead, so nothing ever needs to
   fade for the type to stay readable. Nothing here changes a grid track, a
   card height or the section height budget. */

#standing .presence-card__link {
  /* Veil colour = the card's own surface, so the painted layer dissolves
     into the paper instead of sitting on a foreign panel. */
  --presence-veil: 245, 239, 231;
  --presence-media-pos: 50% 50%;
}

#standing .presence-card--lead .presence-card__link { --presence-veil: 250, 247, 241; }

/* Per-card framing. `--presence-media-pos` places the focal point of the
   painted CSS composition at the end of this file. The two cutout cards no
   longer read this property at all — a `contain`-fit, right-anchored WebP has
   no crop to place — so only Hawkama keeps a tuned value here; Estithmar and
   Dlala fall back to the shared 50% 50% default harmlessly, since it is
   unused on those two cards. */
#standing .presence-card--hawkama   .presence-card__link { --presence-media-pos: 72% 78%; }

#standing .presence-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

#standing .presence-card__media:not(.presence-card__media--cutout) img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--presence-media-pos);
  transform: scale(1);
  transform-origin: 30% 70%;
  transition: transform .5s var(--ease-expressive);
}

#standing .presence-card__media:not(.presence-card__media--cutout)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left,
      rgba(var(--presence-veil), .97) 0%,
      rgba(var(--presence-veil), .93) 26%,
      rgba(var(--presence-veil), .62) 56%,
      rgba(var(--presence-veil), .16) 100%),
    linear-gradient(to bottom,
      rgba(var(--presence-veil), .82) 0%,
      rgba(var(--presence-veil), .34) 40%,
      rgba(var(--presence-veil), 0) 74%);
}

/* One shared rule lifts every existing content zone above the media. No
   copy, measure or order changes. */
#standing .presence-card__logo,
#standing .presence-card__identity,
#standing .presence-card__foot {
  position: relative;
  z-index: 1;
}

/* Hover / focus on the PAINTED cards only: the existing card lift and arrow
   travel are untouched everywhere, and the composition adds one very small
   transform-only step here. The cutout cards get their own identical-in-kind
   hover step in the authoritative block at the end of this file. */
#standing .presence-card__link:hover .presence-card__media:not(.presence-card__media--cutout) img,
#standing .presence-card__link:focus-visible .presence-card__media:not(.presence-card__media--cutout) img { transform: scale(1.03); }

/* Tablet 2x2 and handheld stack: the cards are wider than they are tall, so
   the veil turns to run mostly upward, keeping the lower band of each photo
   open while every line of text stays on a settled field. Heights, padding
   and type are inherited from the bands above; nothing here resizes a box. */
@media (max-width: 1023px) {
  #standing .presence-card__media::after {
    background:
      linear-gradient(to left,
        rgba(var(--presence-veil), .95) 0%,
        rgba(var(--presence-veil), .87) 32%,
        rgba(var(--presence-veil), .5) 66%,
        rgba(var(--presence-veil), .14) 100%),
      linear-gradient(to bottom,
        rgba(var(--presence-veil), .88) 0%,
        rgba(var(--presence-veil), .44) 48%,
        rgba(var(--presence-veil), .08) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #standing .presence-card__media img,
  #standing .presence-card__link:hover .presence-card__media img,
  #standing .presence-card__link:focus-visible .presence-card__media img {
    transform: none;
    transition: none;
  }
}
/* ═══ CONTACT - the invitation form ═════════════════════════════════════
   The site is static. This form is an honest handoff to the visitor's own
   mail application, not a submission: `main.js` prepares a mailto: for the
   one verified address and says so in the helper line under the button. The
   layer is scoped to `#contact` and authored last, so it settles the closing
   cascade on specificity and source order alone - there is no `!important`
   in it, and nothing outside #contact is addressed.

   Desktop is an intentional split inside the existing invitation grid: the
   title and its supporting sentence keep the physical right, the form takes
   the physical left. The chapter stays inside one 1280x720 viewport. */

#contact .closing__invitation-grid {
  align-items: start;
}

#contact .closing__invitation-action {
  gap: clamp(10px, 1.1vh, 16px);
  align-content: start;
  /* Separator policy: the line above the Contact title is decorative, so the
     older .closing__invitation-action border is cancelled here. As of
     2026-09-03 the policy is whitespace-first throughout this chapter and NO
     ornamental full-width divider survives in it: the two .closing__group
     hairlines and the .closing__base legal hairline are removed at their own
     rules above, not overridden here. The contact form's panel edge and the
     input boundaries are component outlines, not separators, and they stay. */
  border-block-start: 0;
}

/* One restrained translucent panel with a 1px inner edge. No outer glow, no
   card shadow: the closing surface stays the darkest plane on the page. */
#contact .contact-form {
  display: grid;
  gap: clamp(10px, 1.2vh, 16px);
  padding: clamp(16px, 1.6vw, 24px);
  border-radius: var(--radius-action);
  background: rgba(250, 247, 241, .035);
  box-shadow: inset 0 0 0 1px var(--edge-dark-soft);
}

/* Two fields share the first desktop row; the message always spans. */
#contact .contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 1vw, 16px);
}

#contact .contact-form__field {
  display: grid;
  gap: clamp(10px, 1vh, 12px);
  align-content: start;
  min-width: 0;
}

#contact .contact-form__label {
  font-size: clamp(12px, .88vw, 14px);
  line-height: 1.3;
  font-weight: var(--weight-subheading, 600);
  color: var(--paper-hi);
}

#contact .contact-form__control {
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding: 12px 14px;
  border: 1px solid var(--edge-dark-soft);
  border-radius: 8px;
  background: rgba(11, 9, 8, .34);
  color: var(--paper-hi);
  font: inherit;
  font-size: clamp(14px, .96vw, 16px);
  line-height: 1.6;
  transition: border-color var(--motion-fast) var(--ease-expressive),
              background-color var(--motion-fast) var(--ease-expressive);
}

#contact .contact-form__control::placeholder {
  color: rgba(244, 239, 232, .42);
  opacity: 1;
}

/* The address is typed and read left to right even inside the RTL column. */
#contact .contact-form__control--ltr {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

#contact .contact-form__area {
  min-block-size: 108px;
  resize: vertical;
}

#contact .contact-form__control:hover { border-color: rgba(250, 247, 241, .18); }

#contact .contact-form__control:focus-visible {
  outline: 2px solid var(--focus-ring-dark);
  outline-offset: 2px;
  border-color: var(--rose);
  background: rgba(11, 9, 8, .5);
}

/* Nothing reads as wrong before the visitor has had a turn. `:user-invalid`
   carries that on its own where it is supported; the attempted class is the
   same rule for engines that do not have it yet, and it is only set once a
   submit has actually been refused. */
#contact .contact-form.is-attempted .contact-form__control:invalid {
  border-color: var(--crimson);
}

/* Authored as its own rule on purpose: a selector list is all-or-nothing, so
   pairing this with the line above would drop the fallback too on any engine
   that does not know `:user-invalid`. */
#contact .contact-form__control:user-invalid {
  border-color: var(--crimson);
}

/* The submit and nothing else. The wrap and the row gap that used to sit here
   existed only to seat the mail-application helper line beside the button;
   that line was deleted on 2026-09-03, so the row is a single control kept at
   the reading edge and must not be given a second child. */
#contact .contact-form__foot {
  display: flex;
  align-items: center;
  margin-block-start: 2px;
}

#contact .contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-block-size: var(--control-height);
  min-inline-size: clamp(170px, 12vw, 220px);
  padding-inline: clamp(20px, 1.8vw, 30px);
  border: 0;
  border-radius: var(--radius-action);
  background: var(--burgundy);
  box-shadow: var(--shadow-action);
  color: var(--paper-hi);
  font: inherit;
  font-size: clamp(14px, .96vw, 17px);
  font-weight: var(--weight-subheading, 600);
  transition: transform var(--motion-fast) var(--ease-expressive),
              box-shadow var(--motion-fast) var(--ease-expressive);
}

#contact .contact-form__arrow { flex: none; }

/* Tactile only: the treatment moves, it never recolours into a second brand. */
#contact .contact-form__submit:hover,
#contact .contact-form__submit:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-action-hover);
}

#contact .contact-form__submit:active { transform: translateY(1px) scale(.99); }

#contact .contact-form__status {
  margin: 0;
  min-block-size: 1.5em;
  font-size: clamp(12px, .84vw, 14px);
  line-height: 1.5;
  color: var(--rose-pale);
}

@media (max-width: 899px) {
  #contact .contact-form__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  #contact .contact-form { padding: clamp(14px, 4.4vw, 20px); }

  /* iOS zooms any control below 16px on focus, which would break the layout
     the rest of this file guarantees down to 320px. */
  #contact .contact-form__control {
    font-size: 16px;
    min-block-size: 52px;
  }

  #contact .contact-form__area { min-block-size: 116px; }

  #contact .contact-form__submit {
    inline-size: 100%;
    min-block-size: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact .contact-form__control,
  #contact .contact-form__submit,
  #contact .contact-form__submit:hover,
  #contact .contact-form__submit:focus-visible,
  #contact .contact-form__submit:active {
    transition: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION INTRO SYSTEM · variants, not one mechanical header · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   REPLACES the CANONICAL CHAPTER HEADING SYSTEM of 2026-09-02. That block
   imposed ONE composition on all eight chapters - a 780px title column pinned
   to the reading edge, the rest of the width left empty, and (in Writing) an
   action floating in that empty half over a full-width rule. It was rejected
   on sight: presentation-slide geometry, a weak eyebrow, a low-contrast
   sentence, and far too much vertical space spent before any content began.
   Do not reintroduce it, and do not append a block after this one to
   "correct" it: if an intro is wrong, the fix belongs here.

   WHAT AN INTRO IS. The markup contract is unchanged and is asserted by
   scripts/audit-project.mjs: one wrapper carrying .chapter-heading, with
   these DIRECT children in order -

     1 · .chapter-label     (always)
     2 · .chapter-title     (always)
     3 · .chapter-summary   (only where a sentence already exists)

   WHAT AN INTRO VARIANT IS. The wrapper also carries .section-intro plus
   exactly one variant, chosen for what the chapter actually needs:

     --compact     a short two- or three-line lockup above a field that is
                   itself the content. Capped measure, reading-edge aligned,
                   160-220px of block size. #standing, #knowledge.
     --integrated  the intro is a ROW OF THE CHAPTER'S OWN GRID and takes its
                   width from that grid column, never from a cap of its own.
                   #thinking, #media, #work.
     --dark        a colour contract for ink surfaces. Composes with the two
                   above; on its own it is the closing-header state. #contact,
                   and #media alongside --integrated.
     --none        the heading is OWNED by a component that places it - the
                   event ticket, the career opening band. The system supplies
                   type and rhythm and takes no geometry decision at all.

   Rules for anyone editing this file after today:
     · Change a size or a gap by editing a token below. Never by adding a
       per-section font-size, label/title/summary margin, or heading width.
     · Nothing in this block uses !important.
     · A variant is a DECISION, not a default. Do not give every chapter the
       same one, and never give a visual chapter a detached intro.
     · Sections keep their own horizontal placement, grid column and distance
       from the rest of their component.
     · Spacing is adjacent-sibling margin, never `gap`, so a section that
       omits the summary gets no space for it.
     · No intro carries a rule, bar, border, background or full-width divider.

   The block is scoped through the eight section ids so it settles the legacy
   cascade on specificity and source order alone; it is authored after every
   section layer and before the final #media composition layer, which by its
   own contract never touches an intro.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Desktop, >=900px. The title tier is the one the brief asks for -
     44-68px - and it is affordable because the intros no longer spend
     100-200px of empty canvas before the content starts. At 1440 these
     resolve to eyebrow 14px, title 48.96px, summary 17.28px. */
  --chapter-label-size: clamp(14px, .95vw, 16px);
  --chapter-title-size: clamp(38px, 3.4vw, 62px);
  --chapter-summary-size: clamp(17px, 1.2vw, 19px);
  --chapter-label-title-gap: clamp(10px, .85vw, 14px);
  --chapter-title-summary-gap: clamp(13px, 1.1vw, 18px);
  /* Measures, in ch. Tajawal's `0` is about .55em wide, so 24ch at 49px is
     about 646px - inside the 680-760px ceiling with headroom for the slant. */
  --chapter-title-measure: 24ch;
  --chapter-summary-measure: min(58ch, 600px);
  /* Arabic titles at this size need more leading than a Latin display face:
     1.2 keeps two lines apart without opening a gap between them. */
  --chapter-title-leading: 1.2;
  --chapter-summary-leading: 1.75;
}

/* Desktop >=900px only: the compact variant's own outer cap. Below 900 the
   intro takes the reading column and needs no cap at all. */
@media (min-width: 900px) {
  :root { --chapter-compact-width: min(100%, 760px); }
}

/* Tablet. The intro takes the full reading column, so the measures relax and
   the title steps down one tier rather than tracking the desktop ramp. */
@media (max-width: 899px) {
  :root {
    --chapter-label-size: 14px;
    --chapter-title-size: clamp(30px, 4vw, 38px);
    --chapter-summary-size: 17px;
    --chapter-label-title-gap: 10px;
    --chapter-title-summary-gap: 14px;
    --chapter-title-measure: 22ch;
    --chapter-summary-measure: 58ch;
    --chapter-compact-width: 100%;
  }
}

/* Handheld. #contact-title carries an authored <br> and is unbreakable by
   contract, so the ceiling here is set by the widest of its two lines at
   320px, not by taste. (#career-title was in that pair until 2026-09-03,
   when its <br> was removed with the rest of the old career intro; it now
   wraps on the measure like every other title.) */
@media (max-width: 767px) {
  :root {
    --chapter-label-size: 14px;
    --chapter-title-size: clamp(24px, 6.2vw, 30px);
    --chapter-summary-size: 16px;
    --chapter-label-title-gap: 9px;
    --chapter-title-summary-gap: 12px;
    --chapter-title-measure: none;
    --chapter-summary-measure: none;
    --chapter-compact-width: 100%;
  }
}

/* ── The wrapper ─────────────────────────────────────────────────────────
   row-gap is zeroed because three of these wrappers are grid containers in
   their own right (#contact's invitation action among them); the vertical
   rhythm is carried by the two adjacent-sibling margins below, so an intro
   with no summary cannot inherit a phantom row. */
:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact) .chapter-heading {
  /* No width cap and no auto margin in the BASE any more: those two
     declarations were the whole defect - every chapter got the same 780px
     column against the reading edge whether its content wanted one or not.
     Width is now a variant decision. */
  inline-size: auto;
  max-inline-size: 100%;
  /* An intro contributes no block margin and no block padding of its own:
     its distance from the rest of the chapter is the section's own padding
     or grid gap, which each section still owns. */
  margin-block: 0;
  padding-block: 0;
  row-gap: 0;
  direction: rtl;
  text-align: right;

  /* One surface contract for the trio, overridden per surface below. */
  --chapter-label-color: var(--burgundy);
  --chapter-title-color: var(--ink);
  /* Raised from --on-paper-soft: the sentence was the weakest line in every
     chapter and reads as a real second tier at this value. */
  --chapter-summary-color: #4a443f;
}

/* ── Variant · compact ───────────────────────────────────────────────────
   A short lockup above a field that is itself the content. The cap is what
   holds the title to two lines; the reading-edge pin is PHYSICAL, not
   logical, because the document is dir="rtl" and `margin-left: auto` is what
   puts the block against the right edge. */
:is(#standing, #knowledge) .chapter-heading.section-intro--compact {
  inline-size: var(--chapter-compact-width, 100%);
  margin-left: auto;
  margin-right: 0;
}

/* ── Variant · integrated ────────────────────────────────────────────────
   Zero geometry of its own. The chapter's grid decides the column, and the
   intro fills it; the title measure alone keeps the line length editorial. */
:is(#thinking, #media, #work) .chapter-heading.section-intro--integrated {
  inline-size: 100%;
  margin-inline: 0;
}


:is(#media, #contact) .chapter-heading.section-intro--dark {
  --chapter-label-color: var(--rose);
  --chapter-title-color: var(--paper-hi);
  --chapter-summary-color: rgba(248, 244, 238, .86);
}

/* ── Variant · none ──────────────────────────────────────────────────────
   The component owns the placement. Stated explicitly so a reader of this
   file can tell "deliberately owned" from "forgotten". */
:is(#career) .chapter-heading.section-intro--none {
  inline-size: 100%;
  margin-inline: 0;
}

/* ── 1 · The label ───────────────────────────────────────────────────────
   14-16px medium burgundy. The 12px version it replaces read as a caption
   rather than as the chapter's own kicker. */
:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > .chapter-label {
  display: block;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  color: var(--chapter-label-color);
  font-family: var(--display);
  font-size: var(--chapter-label-size);
  font-weight: var(--weight-label);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: right;
}

/* ── 2 · The title ───────────────────────────────────────────────────────
   Tajawal and the global synthetic reverse slant are kept: family, weight and
   slant all resolve from the same --font-section-title / --weight-section-title
   / --section-title-slant tokens the rest of the page uses. Nothing here can
   clamp, ellipsise or clip a title; the authored <br> in #contact-title is now
   the only forced break on the page, and the shared `:has(> br)` nowrap rule
   above keeps each of its lines whole. #career-title deliberately carries no
   <br>: that rule would pin its 37 characters to one unbreakable line. */
:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > .chapter-title {
  inline-size: auto;
  max-inline-size: var(--chapter-title-measure);
  margin: 0;
  color: var(--chapter-title-color);
  font-family: var(--font-section-title);
  font-size: var(--chapter-title-size);
  font-weight: var(--weight-section-title);
  font-style: oblique var(--section-title-slant);
  font-synthesis: style;
  line-height: var(--chapter-title-leading);
  letter-spacing: -.01em;
  text-align: right;
  text-wrap: balance;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
}

/* ── 3 · The summary ─────────────────────────────────────────────────────
   Five of the eight chapters carry one. Standing, Media and Work do not, and
   none is invented for them. 17-19px at 1.75, one contrast tier above the
   value it replaced. */
:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > .chapter-summary {
  margin: 0;
  max-inline-size: var(--chapter-summary-measure);
  color: var(--chapter-summary-color);
  font-family: var(--display);
  font-size: var(--chapter-summary-size);
  font-weight: var(--weight-body);
  line-height: var(--chapter-summary-leading);
  text-align: right;
  text-wrap: pretty;
}

/* ── 4 · The only two vertical gaps in the system ─────────────────────────
   Adjacent-sibling, so each gap exists exactly when both of its elements do. */
:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > .chapter-label + .chapter-title {
  margin-block-start: var(--chapter-label-title-gap);
}

:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > .chapter-title + .chapter-summary {
  margin-block-start: var(--chapter-title-summary-gap);
}

/* ── 5 · No decoration ───────────────────────────────────────────────────
   Separator policy: an intro carries no rule, bar, border or background
   image, and no chapter may draw a full-width divider under one. Separation
   is type scale and the two gaps above. */
:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > :is(.chapter-label, .chapter-title, .chapter-summary)::before,
:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > :is(.chapter-label, .chapter-title, .chapter-summary)::after {
  content: none;
  display: none;
}

:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading > :is(.chapter-label, .chapter-title, .chapter-summary) {
  border: 0;
  background-image: none;
}

:is(#standing, #thinking, #knowledge, #media, #career, #work, #contact)
  .chapter-heading {
  border: 0;
  background-image: none;
}


/* 60fr sits in RTL column 1 (physical right) and carries the gallery; 40fr is
   column 2 (physical left) and carries the console. `stretch` is what makes
   the two panels start and finish on the same two lines. */
/* Height budget: at 1280x720 the whole chapter resolves inside about one
   viewport, so the desk never turns into a scrolling archive. */


/* The stage IS the panel now: one surface, one hairline burgundy inner edge,
   no outer shadow of any kind. The old top hairline rule goes with it. */

/* Four bands inside the one panel: the editorial split, the player, the
   divider label, then the episode rows. */
/* `space-between` rather than `start`: the desk's height is set by whichever
   column is taller, so the console usually has a few pixels of slack. Spread
   over the three band gaps it keeps the top and bottom padding balanced
   instead of pooling the remainder under the last row. */

/* Band 1 · the editorial split. Column 1 is physical right, so the copy sits
   beside a portrait that is physically on the left, as in the reference. */

/* The reference's headline is a deliberate two-line lockup, not a caption.
   The measure is capped in `ch` so the default title breaks after the first
   two words at 1280 and 1440 instead of running as one flat line; nothing is
   clamped, truncated or ellipsised, so the shorter alternate title simply
   settles on one full line after an episode switch. */

/* The portrait is a real plate now, not a thumbnail: 42-46% of the panel's
   inner width. `overflow: visible` is deliberate - it lets the microphone
   badge break the corner - so the image carries its own rounding. */

/* The portrait is a real studio shot on a pale seamless, and against this
   near-black panel that background reads as a cut-out. One restrained
   burgundy vignette settles it into the desk, as in the reference. The clear
   zone is centred on her face and shoulders, so nothing lands on the face,
   the hijab, the hands or the clothing; the badge sits at z-index 2 above. */

/* Physical `top`/`left` on purpose: this badge belongs on the portrait's
   top-left corner in both directions, and the logical pair would flip it to
   the right in this RTL document. */

/* Band 2 · the player, full width of the panel and inset into it. */

/* Play control on the physical right (RTL column 1), waveform and seek on the
   left, times above the waveform - the reference's transport, at the
   reference's height rather than the taller first pass. */

/* The retired standalone page parked this control 3px low and drew a wide
   halo ring around it. Both are cleared here so the reference's plain
   burgundy disc is what hover actually scales. */

/* The seek input keeps its full 44px hit area and is pulled up over the dead
   space under the wave, so the transport reads as one 115-125px band - the
   reference's proportion - without shrinking a touch target. The input is
   later in the DOM than the aria-hidden wave, so it stays on top. */

/* Band 3 · the visible divider label. The rule is one short burgundy stroke
   that fades away from the words, on their physical left. */

/* Band 4 · both rows stay inside the same panel, separated by quiet lines. */

/* The reference's transport list is one horizontal line per episode, not a
   stacked card: signal disc on the PHYSICAL LEFT, full title in the middle,
   duration on the PHYSICAL RIGHT. The document is dir="rtl", so grid column 1
   is the physical right (duration) and column 3 the physical left (disc). */

/* The meta line runs `ltr` (it mixes an Arabic theme with a clock value), so
   `flex-end` is what puts the duration back on the physical right. */

/* The category and its bullet are the reference's one omission from the
   compact list. They stay in the DOM, in the accessibility tree and in the
   source record - only their visual repeat is removed. */

/* The reference sets each title against the signal disc, leaving the slack in
   the middle track ahead of the duration. The disc is on the physical left and
   the document is `rtl`, so `end` is the logical value that pulls the title to
   that physical left edge. Never truncated: the title wraps only if a genuinely
   narrow viewport leaves it no room. */


/* ── R3 · Video gallery · one lead frame over two equal supports ──────── */


/* One frame language for all three: same dark border, same radius family,
   the same restrained tinted depth. The lead is simply bigger. */

/* The reference's desk is materially shorter than three stacked 16:9 frames.
   The films are cropped to the reference's ratios rather than the section
   being stretched, which is what brings the whole desk back to ~525px at
   1280x720 with both columns still top and bottom aligned. */

/* Subject-safe crops: each still already burns in its own programme graphic,
   so the framing is biased to keep the speaker and that lower-third whole
   whenever the frame ratio departs from the source's 720x404. */

/* Scale only, and never a stretch: the filter is restated identically on
   hover so the only animated property here is `transform`. */

/* The caption is the film's own record, and it belongs in the page rather
   than baked into a bitmap. The meta line and the <h3> were already in the
   document but were clipped to a 1px box; they are now the VISIBLE caption,
   at every viewport, reading below the frame they belong to.

   It is a quiet editorial stack, not a card: no plate, no border, no radius,
   no background and no box of its own - a small label over the title,
   hanging off the bottom edge of its own frame.

   Nothing in this layer truncates. There is no line-clamp, no ellipsis, no
   masked overflow, no nowrap and no fixed caption height anywhere below; the
   two-line ceiling is a consequence of the measure and the type size set
   here, so a longer title would take a third line rather than disappear. */

/* The label-to-title interval is the shared component token, tightened for
   this chapter only: a caption under a picture is a two-line lockup, not a
   card head. */

/* Measures, not clamps. 24ch and 22ch were the caps from the period when
   this copy was screen-reader-only, and at the live caption sizes they would
   force the lead title onto two lines and each support title onto two or
   three. Each title is instead given enough line to resolve inside two -
   usually one - at every width the desk is built for. */

/* From 1024 up the chapter is height-locked to its 96svh band, so the room
   the captions now take is given back out of the frames' own crop rather
   than out of the chapter. 2.48:1 and 1.98:1 are the ratios at which three
   frames plus three captions still resolve inside the locked band at
   1920x1080 and 1440x900.

   The crop stays subject-safe: every still puts its speaker in the upper
   left and its burned-in programme graphic across the middle band, and the
   object-position values above keep both inside the window. Below 1024 the
   chapter is free-height and the frames keep their fuller ratios. */


/* ── R6 · Reduced motion · every media transform and the waveform stop ── */


/* Play and pause share one grid cell inside the button, so the swap
   during playback is a visibility change and never a reflow. */

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW-HERO REFINEMENT LAYER · 2026-09-03 · LAST BLOCK IN THIS FILE
   ───────────────────────────────────────────────────────────────────────────
   One layer, authored last, so every rule in it settles the cascade on source
   order alone. There is no `!important` anywhere below.

   HERO / NAV FREEZE. Nothing in this block may match #top, .hero*, .nav*,
   .navbar*, or redeclare a :root value. The layout, radius, border, shadow
   and spacing tokens are declared on `main > section:not(#top)` and
   `footer.closing`, which is a scope the hero and the floating navigation are
   both outside of, so none of them can reach either.

   WHAT THIS LAYER OWNS
     0 · the below-hero foundation: page measure, gutter, 8px spacing rhythm,
         the radius family, one border tone and two restrained shadows;
     1 · #standing  · one card family: padding, baseline, marks, contrast;
     2 · #agenda    · compressed about 18%, themes pulled up to the quote;
     4 · #thinking  · the integrated twelve-column editorial composition, the
                      feature's authentic visual anchor and the «قرار» module
                      whose `100` is its graphic object;
     5 · #knowledge · a compact intro over the unchanged shelf;
     6 · #media     · the heading joins the desk, and one nesting layer, one
                      double border and about a fifth of the chrome come off;
     7 · #career    · typography and intro placement ONLY. No state, asset,
                      geometry, height or interaction is touched;
     8 · #work      · the integrated composition: a compact title rail and
                      three visual panels, all three open at once;
     9 · #contact   · field, label, target and mark refinements.

   HEIGHT BUDGET IS A CEILING. Nothing here may make a chapter taller than it
   was at the 2026-09-03 baseline. Where a line grows, a gap gives the space
   back inside the same chapter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · BELOW-HERO FOUNDATION ════════════════════════════════════════════
   The token surface for everything under the hero. Declared on the sections
   themselves rather than on :root, which is what keeps the frozen hero and
   the floating navigation out of reach of every value in it. */
main > section:not(#top),
footer.closing {
  /* -- Page canvas and gutter -------------------------------------------
     There is NO page max. The below-hero canvas is the viewport, and the
     only horizontal decision the system takes is the logical edge gutter.
     A `--page-max` cap lived here until 2026-09-03: at 1920 it froze every
     chapter into a 1664px centred box starting at x=128, which is a fixed
     canvas wearing responsive units. See the FLUID CANVAS block at the end
     of this file for the reasoning and for the reading measures that make
     full width safe. */
  --page-gutter: clamp(24px, 4vw, 72px);

  /* -- The shared below-hero fluid grid ----------------------------------
     Twelve columns and one responsive gap, exposed as tokens so the
     chapters that already think in twelve columns (#thinking, #work) and
     any that later want to can share ONE rhythm across the full canvas.
     They are tokens, not a mandate: no component is folded into this shape
     by declaring them, and the asymmetric compositions (#agenda's
     max-content quote, #media's 40/60 desk, #knowledge's shelf) keep their
     own track lists. */
  --grid-columns: 12;
  --grid-gap: clamp(20px, 2.2vw, 42px);
  --grid-track: repeat(var(--grid-columns), minmax(0, 1fr));

  /* -- Spacing, all derived from 8px ------------------------------------- */
  --space-xl: 128px;
  --space-lg: 96px;
  --space-md: 72px;
  --gap-lg: 48px;
  --gap-md: 32px;
  --gap-sm: 20px;

  /* -- Radius family. Three tiers, no random values. The legacy
        --radius-* tokens are re-pointed at them here rather than hunted
        through 13,000 lines, so every already-approved component adopts the
        system at once and no component keeps a 29-42px SaaS corner. ------ */
  --radius-primary: 18px;
  --radius-secondary: 13px;
  --radius-control: 10px;
  --radius-media: var(--radius-primary);
  --radius-media-small: var(--radius-secondary);
  --radius-feature: var(--radius-primary);
  --radius-panel: var(--radius-primary);
  --radius-tile: var(--radius-secondary);

  /* -- One border tone per surface, and one burgundy active tone --------- */
  --edge: rgba(82, 58, 45, .16);
  --edge-on-dark: rgba(250, 247, 241, .14);
  --edge-active: var(--burgundy);
  --edge-light: var(--edge);
  --edge-light-soft: rgba(82, 58, 45, .1);
  --separator-on-light: rgba(82, 58, 45, .15);
  --separator-on-dark: rgba(250, 247, 241, .12);

  /* -- Two shadows, used where elevation means something ----------------- */
  --elev-1: 0 12px 32px rgba(20, 16, 14, .07);
  --elev-2: 0 18px 48px rgba(20, 16, 14, .1);
  --shadow-tint-light: var(--elev-1);
}

/* The fluid canvas. Career is deliberately absent: its scene, floor plate
   and six-state field are frozen geometry, and re-gutting it would move
   them. Every other below-hero wrapper is the FULL container width with the
   logical edge gutter as its only inset, so the chapters share one vertical
   edge down the page and that edge is the page's own. */
#standing .standing-showcase__shell,
#agenda .thesis,
#thinking .journal,
#knowledge .books-section__inner,
#work .work__inner,
#contact .shell {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: var(--page-gutter);
}

/* ═══ 1 · #standing · one card family ══════════════════════════════════════
   Four cards, still simultaneous, still asymmetric, still on their authentic
   marks. Count, content, destinations and arrangement are untouched: only the
   padding, the mark scale, the small-text contrast, the radius and the
   elevation move, so the four read as one family. */
#standing .presence-grid { gap: 22px; }

#standing .presence-card__link {
  padding: clamp(20px, 2vw, 30px);
  border-radius: var(--radius-primary);
  box-shadow:
    inset 0 0 0 1px var(--edge-light-soft),
    var(--elev-1);
}

#standing .presence-card--lead .presence-card__link {
  box-shadow:
    inset 0 0 0 1px var(--edge),
    var(--elev-2);
}

/* One mark height for all four, so the logos sit on a shared optical line
   instead of four unrelated scales. */
#standing .presence-card__logo img {
  height: clamp(28px, 2.35vw, 34px);
  width: auto;
  object-fit: contain;
  object-position: left center;
}

#standing .presence-card__role {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.45;
}

/* The descriptor was the weakest line in the chapter at 14px / #514b46. */
#standing .presence-card__descriptor {
  font-size: clamp(14px, .98vw, 15px);
  line-height: 1.6;
  color: #4a443f;
}

/* The four actions share one baseline band and one 44px target. */
#standing .presence-card__action {
  min-height: 44px;
  align-items: center;
  font-size: clamp(14px, .98vw, 15px);
}

/* ═══ 2 · #agenda · point of view, compressed ══════════════════════════════
   The dark direction, the quote's dominance and the three open theme rows are
   unchanged: no card, no box, no new interaction. 80svh becomes 66svh - about
   an 18% cut - the column gap closes so the themes sit beside the quote
   rather than across a gulf from it, and the two quietest lines in the
   chapter (the role under the attribution, and the theme copy) come up a
   contrast tier each. */
#agenda.chapter { min-height: 66svh; }

#agenda .thesis {
  min-height: 66svh;
  padding-block: clamp(34px, 4.4vh, 60px);
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .98fr);
  gap: clamp(30px, 3.1vw, 56px);
}

#agenda .thesis__quote blockquote { line-height: 1.36; }

#agenda .thesis__quote figcaption { margin-block-start: clamp(16px, 1.7vw, 26px); }

#agenda .thesis__role { color: rgba(244, 239, 232, .82); }

#agenda .territories > li,
#agenda .territories > li:first-child { padding-block: clamp(12px, 1.35vw, 18px); }

#agenda .territories p {
  line-height: 1.66;
  color: rgba(244, 239, 232, .8);
}

/* ═══ 4 · #thinking · one integrated editorial composition ═════════════════
   The detached title canvas, the archive action floating in its empty half
   and the full-width rule beneath it are gone from the markup. What is left
   is ONE twelve-column grid whose first row is the intro, so the chapter
   opens on content.

   Rows, in source and reading order:
     1 · intro          · title group on the reading 8 columns, archive
                          action on 3 columns at the far side, settling on
                          the intro's own bottom edge
     2 · spread         · feature across 7 columns, «قرار» across 5 - the
                          full twelve columns, closing the eighth-column gap
                          the 7 + 4 split used to leave dead
     3 · supports       · the three current articles as three equal columns
     4 · owned blog     · one compact continuation row

   2026-09-04: the feature's own media/copy split was widened so the portrait
   reads as 55-65% of the module rather than 38%, the excerpt and the «قرار»
   milestone sentence moved to `sr-only` (real text, no longer printed for
   sighted readers), and the intro dropped its descriptive paragraph
   entirely - the eyebrow and title are the whole of row 1 now.

   2026-09-04 (visual-scale pass): the chapter was measuring 635px at
   1440x900 with a 252px feature image - too compressed for near-viewport
   editorial presence. Desktop (>=1100px) now carries a svh-based min-height
   so the chapter reads at roughly 760-780px at 1440x900 and 880-915px at
   1920x1080; `align-content: center` above means any slack that min-height
   adds is split above/below the grid rather than opening a gap under the
   masthead. Tablet and handheld reset this back to natural content height.

   Ceiling: the chapter targets ~760-780px at 1440x900 (previously ~784px). */
#thinking.writing,
.js #thinking.writing {
  padding-block: clamp(30px, 3.6svh, 52px) clamp(32px, 4svh, 58px);
  display: grid;
  align-content: center;
}

/* Desktop-only floor: below 1100px the tablet/handheld blocks fold the grid
   to one column and this min-height would just force blank space around
   already-tall stacked content, so it is scoped clear of both. */
@media (min-width: 1100px) {
  #thinking.writing,
  .js #thinking.writing {
    min-height: clamp(740px, 85svh, 915px);
  }
}

/* -- Row 1 · the intro --------------------------------------------------- */

#thinking .writing__intro { grid-column: 1 / span 8; }

/* Columns 10-12 is the PHYSICAL LEFT in this RTL document, and `align-items:
   end` is what lands the action on the intro's bottom edge rather than in the
   middle of an empty field. It is a text link on one hairline, never a
   button, and its underline is only as wide as its own words. */
#thinking .writing__aside {
  grid-column: 10 / span 3;
  justify-self: start;
  align-self: end;
  display: block;
  margin: 0;
  padding: 0;
}

#thinking .writing__aside a {
  inline-size: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(14px, .98vw, 16px);
  color: var(--on-paper-soft);
  border-block-end: 1px solid rgba(138, 21, 56, .4);
}

/* -- Row 2 · the spread -------------------------------------------------- */

/* -- The feature: authentic portrait beside real HTML copy --------------- */

/* Grid column 1 is the physical right, so the copy holds the reading edge and
   the picture sits beside it. Both are placed explicitly, so the source order
   (media, then copy) stays free to be the stacking order on a phone. The
   62/38 split gives the portrait ~62% of the module - inside the 55-65% band
   the feature is meant to hold. */

/* The crop is the art direction, and it is the only thing done to the
   photograph: no filter, no duotone, no text over it, nothing baked in. */

/* The 62fr media column leaves the copy column narrow by design, so the
   title's font-size is held back from the display-scale it could otherwise
   reach: at this measure a larger clamp wraps a full title past two lines.
   max-width is a ceiling for ultra-wide viewports only - the grid column
   itself is the binding constraint at ordinary desktop widths. */

/* -- «قرار» · the module whose `100` is the graphic object ---------------
   Still text and nothing else: no embed, no widget, no avatar, no timestamp,
   no follower count, no imitation of a social interface, and one destination.
   The `100` is a DATED MILESTONE set as type - it never counts, and the
   sentence under it carries the month that fixes it in time. */
#thinking .decision {
  grid-column: 8 / span 5;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding-block-start: 0;
  padding-inline-start: clamp(20px, 2vw, 34px);
  border-block-start: 0;
  border-inline-start: 1px solid var(--edge);
}

/* One current decision reads prominently; the previous one is a smaller
   secondary line beneath it - a franchise's latest instalment and its
   predecessor, not a flat two-item list. */

/* -- Row 3 · the three supports, as a scannable index ------------------- */

/* One hairline between repeated siblings - the separator policy's own case -
   and none above or below the group, so the chapter grows no divider. */

/* -- Row 4 · the owned-blog continuation, on one compact row ------------- */

/* Was 28px: the two owned-blog links were the only controls on the page
   under the 44px floor. */

/* -- Tablet · the composition folds to one reading column ---------------- */
@media (max-width: 1099px) and (min-width: 768px) {
  #thinking .writing__intro { grid-column: 1 / span 9; }
  #thinking .writing__aside { grid-column: 1 / -1; justify-self: start; margin-block-start: 10px; }

  #thinking .decision {
    grid-column: 1 / -1;
    margin-block-start: clamp(16px, 2.4svh, 26px);
    padding-inline-start: 0;
    padding-block-start: clamp(12px, 1.8svh, 20px);
    border-inline-start: 0;
    border-block-start: 1px solid var(--edge);
  }
}

/* -- Handheld · one column, source order, natural height ----------------- */
@media (max-width: 767px) {
  #thinking.writing,
  .js #thinking.writing {
    display: block;
    padding-block: clamp(40px, 11vw, 60px);
  }

  #thinking .writing__aside { margin-block-start: clamp(14px, 4.4vw, 22px); }

  #thinking .decision {
    padding-inline-start: 0;
    padding-block-start: 12px;
    border-inline-start: 0;
    border-block-start: 1px solid var(--edge);
  }
}

/* ═══ 5 · #knowledge · a compact intro over the supplied plate ════════════
   The plate itself is untouched. Only the head above it is refined: the
   intro and the library link share one baseline row, so the ~232px of head
   becomes about 165px and the plate starts that much higher. The chapter
   does not grow. */
#knowledge .books-section__head {
  padding-block: 0;
  margin-block-end: clamp(10px, 1.5svh, 24px);
  gap: clamp(20px, 3vw, 52px);
}

#knowledge .books-section__note {
  display: flex;
  align-items: flex-end;
  padding-block: 0;
  margin-block: 0;
}

#knowledge .books-section__note .story-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(14px, .98vw, 16px);
}



/* One nesting layer removed: the transport already reads as a band through
   its own spacing, so the ring around it was decoration around decoration. */

/* The film frames drew a 1px border AND a 1px inset ring. One of them is
   enough, and the radius family replaces the 20-29px corners. */

/* Titles are real HTML outside the thumbnails, and they are given a clear
   two-tier hierarchy; the metadata line clears the 13px floor. */

/* ═══ 7 · #career · typography and intro placement only ════════════════════
   NOT a rebuild. The six states, the seven records, the two parallel early
   posts, the one Ooredoo tenure with its two phases, the QIA overlap line,
   Qatariat, the typographic JRE state, the governance destination lines, the
   scene, the marble floor plate, the assets, the credentials strip, the
   chapter's 900px height and its hover / :focus-visible-only interaction are
   all exactly as they were. Two defects are corrected:

     · the opening band left most of its width empty, because the intro was
       the rejected 780px column pinned to the reading edge. The band is now
       sized and paced by the CAREER OPENING BAND layer at the end of this
       file, which is the authority for it;
     · the state titles set at 13.2px / 400 in a muted grey and the
       credential years at 11px - both under the readable floor for small
       Arabic. They come up to the floor and no further, so the six states
       keep their heights. */
/* The two-column intro lockup was TRIED AND REVERTED, and after 2026-09-03
   there is nothing left to put in a second column: the standfirst that would
   have filled it is gone and the band is a two-element stack. The intro is a
   plain stacked block, which is what --none means - the component owns the
   placement and the system takes no geometry decision. Do not reintroduce a
   two-column version, and do not re-add a paragraph to justify one. */

/* The state titles set at 13.2px / 400 in a muted grey - under the readable
   floor for small Arabic. The floor is reached on WEIGHT and CONTRAST, which
   cost no height, and on the smallest size step that clears 14px, so the
   fixed state track cannot gain a third line. Matches the specificity of
   the .js #career .career-slide > h3 rule that was winning. */
#career .career-slide h3,
.js #career .career-slide > h3 {
  font-size: clamp(14px, .98vw, 16px);
  font-weight: var(--weight-subheading);
  line-height: 1.32;
  color: var(--ink);
}

#career .career__credential strong { font-size: clamp(13px, .92vw, 14px); }
#career .career__credential-org { font-size: 13px; }
#career .career__credential-year { font-size: 13px; color: #4a443f; }

/* The strip's title - the only place the words "المؤهلات الأكاديمية" appear - is the head
   of the qualification list and was rendering as the smallest label in the
   chapter it introduces. What the reader actually saw was never the <li>:
   the words live in a <span>, and `#career .career__credentials li > span`
   (1,1,2) outranks any rule written on the head class alone, so the visible
   ramp was clamp(11px, .74vw, 13px) at >=900px and clamp(14px, .8vw, 15px)
   below it. The requested step up is 1.4x of what was VISIBLE, i.e. 1.4x the
   11-13px ramp: floor 11 -> 15.4, slope .74 -> 1.036, ceiling 13 -> 18.2.

   It is set here, once, outside every media query, on both the <li> and its
   <span>, so the heading resolves to exactly clamp(15.4px, 1.036vw, 18.2px)
   at 360, 390, 430, 768, 834, 1366, 1440 and 1920 alike - one tier, not a
   width-dependent one. The span selector is (1,2,2) and the li selector is
   (1,2,1), so both win on specificity alone and nothing here depends on
   source order or !important. The icon is sized in vw, not em, so the li's
   size does not move it, and the four credential rows keep the org/year
   sizes set immediately above - this rule reaches only the head <li>. */
#career .career__credentials li.career__credentials-head,
#career .career__credentials li.career__credentials-head > span {
  font-size: clamp(15.4px, 1.036vw, 18.2px);
  font-weight: 700;
}

/* ═══ 8 · #work · the integrated composition, three visual panels ══════════
   The detached header, the full-width rules above and below the path row and
   the three plain text columns between them are gone. The chapter is now ONE
   twelve-column composition: a compact title rail on the reading three
   columns, and three visual panels across the remaining nine. All three
   paths are open at the same time - there is no tab, no hidden panel, no pin
   and no long interaction - and Contact still owns the page's one decisive
   call to action, so nothing here is a button.

   Ceiling: the chapter must not exceed its 630px baseline at 1440x900. */
#work .work__inner {
  padding-block: clamp(34px, 4.4vh, 60px);
  display: grid;
  grid-template-rows: minmax(0, auto);
  align-content: center;
  gap: 0;
}

@media (min-width: 900px) {
  #work .work__inner { min-height: 66svh; }
}

#work .work__composition {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-md);
  row-gap: clamp(20px, 2.6vh, 34px);
  align-items: start;
}

/* Columns 1-3 is the PHYSICAL RIGHT in this RTL document. */
#work .work__head {
  grid-column: 1 / span 3;
  align-self: start;
  padding-block-start: clamp(4px, .8vh, 12px);
}

#work .work__paths {
  grid-column: 4 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(18px, 1.9vw, 28px);
  row-gap: 0;
  align-items: stretch;
  /* The two full-width rules this row used to draw are removed, not moved:
     a chapter never carries a separator. */
  border-block: 0;
}

#work .work-path,
#work .work-path:first-child,
#work .work-path:last-child {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-inline: 0;
  border-block: 0;
}

/* -- The visual object. One geometry for all three, so a drawn diagram, a
      publication cover and a media still read as one family. -------------- */
#work .work-path__visual {
  display: block;
  position: relative;
  inline-size: 100%;
  block-size: clamp(132px, 16.5svh, 168px);
  margin-block-end: clamp(14px, 1.7vh, 22px);
  border-radius: var(--radius-secondary);
  border: 1px solid var(--edge);
  background: var(--paper-warm);
  /* The diagram is drawn to the panel's own box with `slice`, so nothing it
     draws may reach the page's line box. */
  overflow: hidden;
}

#work .work-path__visual img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* The programme cover is a PUBLICATION, so it is framed as one: contained on
   its own tinted field rather than bled to the edges like a photograph. */
#work .work-path__visual--cover {
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.1vh, 15px);
  background:
    linear-gradient(168deg, rgba(138, 21, 56, .07), rgba(138, 21, 56, .015) 60%),
    var(--paper-warm);
}

#work .work-path__visual--cover img {
  inline-size: auto;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: var(--elev-1);
}

#work .work-path__visual--still img { object-position: center 22%; }

/* -- The drawn advisory diagram. No stock photograph exists for advisory
      work in this project and none may be invented, so this state is carried
      by a designed abstraction in the page's own tokens: a decision spine
      running from one origin to three mandate nodes, over the framework
      grid. Every stroke is `currentColor`, so it is one accent and never a
      second palette. --------------------------------------------------- */
#work .work-path__visual--diagram {
  display: grid;
  place-items: stretch;
  color: var(--burgundy);
  background:
    linear-gradient(158deg, rgba(138, 21, 56, .06), rgba(138, 21, 56, .012) 62%),
    var(--paper-warm);
}

#work .work-diagram {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

#work .work-diagram__grid { opacity: .17; }
#work .work-diagram__spine { opacity: .5; }
#work .work-diagram__nodes { opacity: .72; }
#work .work-diagram__origin { fill: currentColor; opacity: .9; }
#work .work-diagram__joint { fill: currentColor; opacity: .55; }

/* -- Panel copy ---------------------------------------------------------- */
#work .work-path__figure {
  justify-self: start;
  align-self: start;
  font-size: clamp(20px, 1.5vw, 26px);
  line-height: 1;
  letter-spacing: .03em;
  color: rgba(138, 21, 56, .55);
}

#work .work-path__title {
  margin-block-start: clamp(8px, 1vh, 13px);
  max-inline-size: 18ch;
  font-size: clamp(19px, 1.5vw, 26px);
  line-height: 1.26;
}

#work .work-path__note {
  margin-block-start: clamp(6px, .9vh, 11px);
  max-width: 32ch;
  font-size: clamp(14px, .98vw, 16px);
  line-height: 1.7;
  color: #4a443f;
}

/* One quiet text link per path, pinned to the bottom of its panel so the
   three actions share a baseline. Never a button, and never a second copy of
   the page's final call to action. */
#work .work-path__link {
  inline-size: fit-content;
  min-height: 44px;
  margin-block-start: auto;
  padding-block-start: clamp(8px, 1.1vh, 14px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(14px, .98vw, 16px);
  font-weight: var(--weight-label);
  color: var(--burgundy);
}

/* The two VERIFIED programme routes are this panel's links. They settle on
   the same bottom baseline as the other two paths' single links. */
#work .work-path__programs {
  inline-size: 100%;
  margin-block: auto 0;
  padding-block-start: clamp(4px, .7vh, 9px);
  border-block-start: 0;
}

#work .work-path__programs li + li {
  border-block-start: 1px solid var(--edge);
}

#work .work-path__programs a {
  min-height: 44px;
  padding-block: clamp(8px, 1vh, 12px);
}

#work .work-path__program-title { font-size: clamp(14px, .98vw, 16px); }

/* -- Desktop · the three panels are equal and they STAY equal. This chapter
      does not react to the pointer: the column reweight that used to run on
      `:has(.work-path:is(:hover, :focus-within))` is removed, not disabled,
      along with the primary link's gap expansion and the programme rows'
      translate. Nothing here is to be replaced with another hover treatment.
      The equal thirds come from `#work .work__paths` above
      (`repeat(3, minmax(0, 1fr))`), which resolves to the same widths this
      block used to restate, so the block itself is gone rather than left
      standing as a redundant reset. ------------------------------------ */

/* -- Tablet · the rail moves above the panels, 2 + 1 ---------------------- */
@media (min-width: 768px) and (max-width: 1099px) {
  #work .work__composition { row-gap: clamp(18px, 2.4vh, 28px); }
  #work .work__head { grid-column: 1 / -1; }
  #work .work__paths {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(22px, 3vh, 34px);
  }
  #work .work-path__visual { block-size: clamp(140px, 19vw, 190px); }
}

/* -- Handheld · one column, nothing hidden ------------------------------- */
@media (max-width: 767px) {
  #work .work__inner { min-height: 0; padding-block: clamp(40px, 11vw, 58px); }

  #work .work__composition,
  #work .work__paths {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  #work .work__paths { row-gap: clamp(28px, 8vw, 40px); }

  #work .work-path,
  #work .work-path:first-child,
  #work .work-path:last-child {
    padding-inline: 0;
    padding-block: 0;
    border-block-start: 0;
  }

  #work .work-path__visual { block-size: clamp(150px, 46vw, 210px); }
  #work .work-path__note { max-width: none; }
  #work .work-path__title { max-inline-size: none; }
}

/* ═══ 9 · #contact · the one closing action ════════════════════════════════
   One decisive final call to action, the dark closing direction, and only the
   verified routes: email, WhatsApp, LinkedIn, X, Hawkama and ESG Qatar 2026.
   Nothing is added and nothing is duplicated. The refinements are the field
   geometry, the label and input contrast, the mark hierarchy and the
   handle's LTR isolation, which the markup already carries. */
#contact .contact-form {
  border-radius: var(--radius-control);
  gap: clamp(12px, 1.4vh, 18px);
  box-shadow: inset 0 0 0 1px var(--edge-on-dark);
}

#contact .contact-form__label {
  font-size: 14px;
  color: rgba(250, 247, 241, .92);
}

#contact .contact-form__control {
  min-block-size: 50px;
  border-radius: var(--radius-control);
  font-size: 16px;
}

#contact .contact-form__area { min-block-size: 104px; }

#contact .contact-form__submit {
  min-block-size: 50px;
  border-radius: var(--radius-control);
  font-size: clamp(15px, 1vw, 17px);
}
/* The handle is quieter than the title it follows, and it must not fuse with
   it. In this RTL line the icon/title unit sits to the RIGHT of the handle,
   and the single markup space between the two collapses to 0px at the
   bidi-isolate boundary, so the pair touched edge to edge and read as one
   word ("@buthainaalansa2X").

   Both margins below resolve against the handle's OWN direction, because the
   handle carries `.ltr` (`unicode-bidi: isolate; direction: ltr`): for this
   element inline-START is its left edge, which faces the `↗` arrow, and
   inline-END is its right edge, which faces the icon/title unit. The .4em
   start margin inherited from the base layer is therefore the arrow gap and
   is left exactly as it is; the 8px end margin added here is the separation
   the title unit needed, and it matches the 8px the same unit already sets
   between the mark and the title. */

/* The three social routes name themselves twice: once in the visible title
   and once in the official brand mark set beside it. The mark is decorative
   (`aria-hidden`) so the link keeps exactly the accessible name it already
   had, and it is drawn in `currentColor` so it inherits the route's rest,
   hover and focus colour with nothing - no disc, pill, border or glow -
   drawn behind it.

   One rule pair serves all three: `.closing__route-id` is the icon+title
   unit and `.closing__brand` is the mark. The unit is a centred inline-flex
   box that never wraps, so a mark can never be orphaned from its title, and
   the mark never shrinks. In this RTL document the mark is the first child,
   which puts it on the reading edge - the right of the title - for the
   Arabic label and for both LTR-isolated English ones alike. */

/* Optical sizing, not a second size step: the shared box is 17px and the two
   corrections below are the smallest that make the three marks read as one
   size beside the same title. LinkedIn is a SOLID square that fills its box
   corner to corner, so at an equal measure it outweighs the WhatsApp circle
   beside it and comes down 1px. The X wordmark's ink is only 90% of its box
   tall (the glyph is drawn 1.15-22.85 in a 24 viewBox), so it goes up half a
   pixel to land on the same apparent height. Nothing else changes: both keep
   the shared 8px gap, the shared `currentColor` fill and the shared box. */

#contact .closing__territories {
  font-size: clamp(13.5px, .94vw, 15px);
  color: rgba(244, 239, 232, .82);
}

#contact .closing__base {
  font-size: 13px;
  color: rgba(244, 239, 232, .74);
}

/* ═══ 10 · SHARED · targets, focus and reduced motion below the hero ═══════
   Every interactive control under the hero clears 44px and shows a ring, and
   nothing added by this layer moves under `prefers-reduced-motion`. */
#thinking :is(.writing__aside a, .journal-story, .decision__cta, .owned-blog__list a):focus-visible,
#work :is(.work-path__link, .work-path__programs a):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The featured episode is the verified 2023 one; its age is STATED here
   rather than implied. The separator is decorative, so the label reads
   "بودكاست من الأرشيف" to a screen reader without a stray middot. */

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW-HERO REFINEMENT · MEASURED CORRECTIONS · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   Five defects found by measuring the layer above in the browser, corrected
   here rather than by editing it, so the reasoning for each stays readable.
   Same scope and same freeze: nothing below matches the hero or the nav.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- 1 · #thinking · the feature's decorative bar --------------------------
   A 58x2px burgundy rule drawn by .journal-story__copy::before. In the old
   stacked feature it sat under the picture; in the composition it floats at
   the top of the copy column, attached to nothing. It is exactly the kind of
   decorative separator the separator policy forbids, so it is removed. */

/* -- 2 · #thinking · the feature picture sized its own row -----------------
   `block-size: 100%` on a grid item in an `auto` row resolves against an
   indefinite height, so the wrapper fell back to the image's INTRINSIC
   height: 278px of column width against a 900x1350 portrait is 417px, and
   that number - not the copy beside it - was setting the whole spread row.

   Taking the image out of flow makes the wrapper's content height zero, so
   the row is set by the copy and the min-block-size floor, and `object-fit:
   cover` art-directs the crop into whatever height that turns out to be.

   2026-09-04: 252px measured too small for the brief's near-viewport
   editorial presence. Raised to a 310-380px band (was 28svh capped at
   252px) so the portrait reads at roughly 315px at 1440x900 and 378px at
   1920x1080, balanced by the larger «قرار» 100 figure nearby. */

/* On a phone the feature stacks, so the picture is an ordinary block again
   with an authored ratio rather than an absolutely positioned fill. */

/* -- 3 · #knowledge · the intro and the library link share one row ---------
   The head was a ONE-column grid, so the link stacked under the title block
   and the 138px intro became a 249px head with a 43px gap in the middle of
   it. Two columns, bottom-aligned: the link belongs to the intro row. */
/* A `1fr auto` track list pushed the library link onto the far gutter with
   400px of nothing between it and the intro - the floating action the
   compact variant exists to prevent. `auto auto`, packed to the reading
   edge, puts the link directly beside the intro it belongs to. */
#knowledge .books-section__head {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  justify-content: start;
  align-items: end;
  column-gap: clamp(28px, 3.4vw, 64px);
  margin-block-end: clamp(16px, 2.2svh, 34px);
}

#knowledge .books-section__note {
  grid-column: 2;
  grid-row: 1;
}

/* -- 5 · #contact · the form grew by 29px against its own budget ----------
   Control height went 48 to 50 and the label came up to 14px, both wanted.
   The space is given back inside the same chapter - tighter form padding,
   one row gap and a shorter message box - rather than by shrinking a
   control back under the 46-52px floor. */
#contact .shell {
  padding-block: clamp(22px, 2.8vh, 34px) clamp(8px, 1.1vh, 15px);
  gap: clamp(12px, 1.5vh, 18px);
}

#contact .contact-form {
  padding: clamp(14px, 1.4vw, 20px);
  gap: clamp(10px, 1.15vh, 14px);
}

#contact .contact-form__area { min-block-size: 92px; }

#contact .contact-form__field { gap: clamp(7px, .8vh, 9px); }

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW-HERO REFINEMENT · MEASURED CORRECTIONS · ROUND 2 · 2026-09-03
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- #agenda · the dead field between the quote and the themes ------------
   The quote column was a 1.22fr track holding a 24ch blockquote, so it was
   about 600px wide around 430px of type and the three themes sat 310px away
   from the sentence they support. A `max-content` track sizes the column to
   the quotation itself, which is the whole point of the asymmetry: the
   themes move up beside the quote and the black field between them closes
   without the quotation losing an inch of its dominance. */
@media (min-width: 900px) {
  #agenda .thesis {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: clamp(32px, 3.4vw, 64px);
  }

  /* The rows keep their reading measure against the wider track, so the
     hairlines carry the structure and the type is never stretched thin. */
  #agenda .territories > li { padding-inline-start: clamp(0px, 8vw, 150px); }
}

/* Attribution legibility: the role line sat at 12.1px, under the 13px
   metadata floor, against a dark surface. */
#agenda .thesis__role { font-size: clamp(13px, .92vw, 15px); }

/* -- #knowledge · the library link on the intro's own baseline -------------
   The note column carried a 24px column gap it has nothing to space, so the
   link floated a line above the sentence it sits beside. */
#knowledge .books-section__note {
  gap: 0;
  padding-block-end: clamp(2px, .4vh, 6px);
}

/* -- #contact · the last 2px of the chapter's budget ----------------------
   The closing legal row keeps its 13px type and gives the space back from
   its own padding, so the footer lands on its baseline height rather than
   2px over it. */
#contact .closing__base { padding-block: clamp(8px, 1.05vh, 13px) clamp(6px, .85vh, 11px); }

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW-HERO REFINEMENT · RESPONSIVE BUDGET · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   The desktop page is 456px SHORTER than its baseline, but two chapters
   gained real pictures where they had none, and on a narrow screen a picture
   costs its full height rather than a share of a row. This block spends that
   back where it can be spent without deleting anything: crop ratios, band
   heights and the width at which a three-column index stops being three
   columns. Nothing here hides content, and no control drops under 44px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- #thinking · the supporting index across the tablet band is 2 + 1.
      Three equal columns were the earlier answer and they were measured
      against a full-width stack, which is 140px taller because the wrap
      happens in sequence rather than in parallel. What they were never
      measured against is this: at 768 a third of the measure leaves each
      title about 156px of line, and the AI-governance headline - the
      longest of the three at ~349px unwrapped - breaks over THREE lines
      while its own kicker breaks over two.

      So the band is re-authored rather than re-typed. The two short titles
      keep a shared row; the long one takes the whole measure on the row
      below, where it resolves in one line at 768 and one at 1099. Nothing
      shrinks: the 15px title and the 12.5px kicker set below are the sizes
      this band already used, and there are still exactly three items.

      The row it costs is paid for out of the group's own padding: one row
      of three-line titles and one row of two-line kickers is taller than
      two rows of single-line copy, so the vertical rhythm steps down one
      notch inside this band and the group lands within a few px of the
      height it had. */
@media (min-width: 768px) and (max-width: 1099px) {

  /* Authored placement, not auto-flow. The 900-1199 rule
     `.journal-story--tertiary { grid-column: 1 / -1 }` was written for
     .journal__spread and also matches the two tertiary supports; left to
     itself it drops BOTH of them onto full-width rows and leaves half of
     row one empty. Naming all three positions here settles that inside the
     band without touching the spread's own rule. */

  /* The separator policy is unchanged in kind, only in axis: the pair on
     row one keeps the vertical hairline between them, and the item below
     is divided from them by the horizontal one instead - the same swap the
     sub-768 layer already makes when the group stacks. */
}

@media (max-width: 767px) {
  /* 3:2 rather than 4:3: the same crop, about 60px less of it. */

  /* The head stacks below 768 - two auto tracks do not fit a 342px line -
     but it stacks TIGHT: the link's own 44px target is the row height, and
     the row gap is 4px rather than a full stack step. */
  #knowledge .books-section__head {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    row-gap: 4px;
    margin-block-end: clamp(10px, 3vw, 18px);
  }

  #knowledge .books-section__note { grid-column: 1; grid-row: 2; }

  /* The desktop card padding tier is generous for a 390px card. */
  #standing .presence-card__link { padding: clamp(16px, 4.4vw, 20px); }

  /* The visual band keeps its role as the panel's anchor at a height a
     handheld reader can scroll past. */
  #work .work-path__visual { block-size: clamp(118px, 34vw, 158px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW-HERO FLUID CANVAS · 2026-09-03 · full-width grid, held measures
   ───────────────────────────────────────────────────────────────────────────
   THE DEFECT. Measured at 1920x1080: eight of the nine below-hero wrappers
   resolved to 1664px at x=128 with 72px of their own padding, so content
   began at x=200 and ended at x=1720 - a centred fixed canvas, not a fluid
   one. Only #career was already right: a 100% wrapper with responsive
   gutters. (A ninth wrapper, the #esg-2026 event chapter, was the worst
   case at 1424px; that chapter was removed on 5 Sep 2026.)

   THE CORRECTION, in two moves, both made above this block:
     · `--page-max: 1520px` is gone from the below-hero token surface;
     · the shared wrapper rule is `inline-size: 100%; max-inline-size: none;
       margin-inline: 0; padding-inline: var(--page-gutter)`.
   This block finishes the job: it puts a reading measure on every line of
   type that a 1776px canvas would otherwise stretch.

   FULL WIDTH IS A CANVAS DECISION, NOT A TYPE DECISION. Every measure below
   is authored in `ch`, so it tracks the type ramp rather than the viewport,
   and none of them can bind before the width at which the line would become
   unreadable. Below 1440 the canvas was already the viewport, so nothing
   here changes what those breakpoints render.

   SAME FREEZE AS THE LAYER ABOVE. Nothing in this block matches #top,
   .hero*, .nav* or .navbar*, none of it redeclares a :root value, and none
   of it touches #career - whose scene, floor plate, six states, credentials
   strip and 100%-wrapper geometry are already correct and stay bit-for-bit
   as they are. No section-specific grid or asymmetry is flattened: this
   widens the canvas the compositions are drawn on, it does not redraw them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- 3 · Reading measures · full width is a CANVAS decision ----------------
   Measured across the below-hero chapters at 1776px of usable grid, no line
   of body copy exceeds about 63ch, because the compositions place their type
   in tracks rather than across the page. The measures below make that
   explicit rather than incidental: each is set at or just above the width
   the role already resolves to, so NONE of them binds on today's content and
   none moves a chapter's height - they are the ceiling that keeps a longer
   sentence, or a wider display, from turning a track into an 1800px line.

   Headings, summaries and quotes are already contracted elsewhere:
   .chapter-title at 24ch, .chapter-summary at min(58ch, 600px),
   #agenda's quote at 26ch and its theme copy at 46ch, #thinking's feature at
   15ch/40ch, #work's paths at 18ch/32ch. Those are untouched. */
#agenda .territories h3 { max-inline-size: min(100%, 30ch); }

#contact .closing__territories { max-inline-size: min(100%, 64ch); }


/* ═══════════════════════════════════════════════════════════════════════════
   #standing · ONE CARD FAMILY, FOUR PHOTOGRAPHS, NO INTERNAL RULE · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   TWO DEFECTS, both inside the institutional-presence field and nowhere else.

   1. THE FOURTH CARD WAS A DIFFERENT OBJECT. Hawkama, Estithmar and Dlala are
      warm-paper cards carrying an integrated photograph behind a directional
      veil. ESG Qatar 2026 was a solid burgundy panel with no photograph, so a
      field that is meant to read as four peer roles read as three cards plus a
      promotional tile. The burgundy accent is not lost: it is still the colour
      of every role line and every official-site action in the chapter. Here
      it stops being a whole surface. (It also owned the standalone event
      chapter further down the page until 5 Sep 2026, when that chapter was
      removed and its lifecycle moved onto this card.)

      The photograph is the organiser's OWN archival image of a previous
      edition's audience hall (docs/16 §S21). It is documentary, not a render,
      and it is not captioned or dated in this card, so nothing implies it
      depicts the 2026 conference; the card's own text carries the edition and
      the date as words. The synthetic forum render stays out of the runtime.

   2. THE HAIRLINE INSIDE EVERY CARD. Each card drew a rule between its
      identity block and its foot. On a card that already has an outer edge, an
      elevation and a photographic field, that second line is a box inside a
      box: it cuts the composition in half and it is the only place in the
      chapter where a border is used to separate content from content rather
      than to bound a surface. The separation is now spatial - the foot keeps a
      smaller optical step above it and the shared grid gap does the rest. The
      OUTER edge and the elevation of all four cards are untouched.

   Nothing here changes a grid track, a card height, a padding tier, a type
   size, a destination or the reading order. The chapter keeps all four cards
   in one desktop viewport, its 2x2 tablet band and its one-column handheld
   stack exactly as authored above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- 1 · the ESG card joins the paper family ---------------------------- */

/* Surface, ink and elevation are the shared secondary-card tier: the same
   values `#standing .presence-card__link` resolves to in the layers above,
   restated at the ESG card's own specificity so the burgundy overrides are
   answered rather than left to fight. */
#standing .presence-card--esg .presence-card__link {
  background: var(--paper-warm);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--edge-light-soft),
    var(--elev-1);
  /* The veil is the card's own surface, as on its three peers, so the
     photograph dissolves into the paper instead of sitting on a panel. */
  --presence-veil: 245, 239, 231;
  /* A tall, narrow crop: the frame is cropped horizontally to the seated
     delegates, and the open lower-left of the veil lands on them rather than
     on the empty chairs at the edge of the hall or the screen above. */
  --presence-media-pos: 61% 58%;
}

/* The two accented lines return to the chapter's accent colour, and the one
   factual line returns to the chapter's body ink. Left as the burgundy-field
   values they were pale rose and near-white on paper. */
#standing .presence-card--esg .presence-card__role { color: var(--burgundy); }
#standing .presence-card--esg .presence-card__action { color: var(--burgundy); }
#standing .presence-card--esg .presence-card__descriptor { color: #4a443f; }

/* Focus: the burgundy ring is legible on paper, so the ESG card takes the
   same ring as its three peers. Its inset paper-hi ring existed only because
   a burgundy outline was invisible on a burgundy field; keeping it now would
   draw a second, brighter frame the other three cards do not have. */
#standing .presence-card--esg .presence-card__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-light);
  outline-offset: 3px;
  box-shadow:
    inset 0 0 0 1px var(--edge-light-soft),
    var(--elev-1);
}

/* -- 2 · no rule inside any card --------------------------------------- */

/* One declaration removes the hairline on all four; the second keeps the foot
   from closing up against the identity block now that nothing is drawn
   between them. The step is smaller than the padding the border needed,
   because a border needs clearance and a gap does not. */
#standing .presence-card__foot {
  border-block-start: 0;
  padding-block-start: clamp(6px, .6vw, 10px);
}

/* The ESG card's own border-colour override has nothing left to colour. */
#standing .presence-card--esg .presence-card__foot { border-block-start: 0; }


/* ════════════════════════════════════════════════════════════════════════════
   CAREER OPENING BAND · eyebrow + title, nothing else · 2026-09-03
   ────────────────────────────────────────────────────────────────────────────
   THE DEFECT. The opening of #career spent 254.89px at 1440 on four things
   before a single career fact appeared: an eyebrow, a two-line title held to
   one long unbreakable line by an authored <br>, a standfirst restating the
   six-states / seven-records count the field below already carries, and a
   taxonomy line repeating every state's `journeyAr` word for word. Two of the
   four were deletions, not restylings, and they are gone from the markup.

   WHAT THIS LAYER DOES. It sizes and paces the two elements that remain, on
   the desktop widths where the premium hover field exists (>=1100px). It is
   authored last so it settles the older #career bands on source order alone,
   with no !important anywhere.

   SCOPE, and nothing beyond it. This layer matches `.career__intro` and
   `.career__heading` only. The six states, the seven records, the state text,
   dates, logos, photographs, `.career__states`, `.career-slide*`,
   `.career__rail`, `.career__credentials`, the fixed state tracks, the hover /
   :focus-visible expansion, the masks, the marble floor and the normal-flow
   no-scroll contract are all untouched.

   HOW THE VALUES WERE CHOSEN.
     · Sizes and gaps are set as the SECTION INTRO SYSTEM's own tokens on the
       heading element, never as a per-section font-size or margin, so the
       system stays the single authority for what a title is.
     · The ramp starts at 48px, which is the tier the shared scale already
       resolves to at 1440, and it is allowed to grow to 76px on wide canvases
       instead of stopping at the shared 62px cap. Leading is 1.17: enough for
       Arabic ascenders on two lines, tight enough that the pair reads as one
       lockup.
     · Every token here is inside `min-width: 1100px`. Below that the shared
       responsive tiers (38-62px at 900-1099, 30-38px on tablet, 24-30px on
       handheld) are what render, exactly as they do in the other seven
       chapters.
     · The distance from the title to the state field is authored as
       `calc(56px - <the inner gap>)`, so the two together resolve to 56px at
       every viewport height instead of drifting with `vh`. The inner `gap`
       itself is NOT enlarged: it still carries the field-to-credentials
       relationship at the value that band already had.
     · No rule, bar, divider or accent line. The intro is type and two gaps,
       which is the whole separator policy of the intro system.
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {
  /* 820px sits inside the 760-860 band and is narrow enough that the exact
     title breaks at two lines on every desktop step of the ramp. `margin-left`
     is PHYSICAL on purpose: the document is dir="rtl" and the auto margin on
     the physical left is what pins the band to the reading edge, matching the
     idiom the compact variant already uses. */
  #career .career__intro {
    width: min(100%, 820px);
    margin-left: auto;
    margin-right: 0;
    margin-block-end: calc(56px - clamp(24px, 3.4vh, 40px));
  }

  /* Tokens, not declarations: the intro system reads these off the heading.
     The label/title gap is NOT among them any more. It used to be set here to
     clamp(20px, 1.6vw, 28px), which rendered 23px at 1440 and 28px at 1920
     against the shared 12.24px / 14px - the one chapter on the page whose
     eyebrow-to-title distance was roughly double every other chapter's. The
     gap is a SECTION INTRO SYSTEM token by contract ("never a per-section
     label gap"), so career now inherits it like the other seven chapters. */
  #career .career__heading {
    --chapter-title-size: clamp(48px, 3.33vw, 76px);
    --chapter-title-leading: 1.17;
  }
}

/* The premium field's own band carries a smaller inner `gap`, so the intro
   margin that completes the 56px is computed against that value instead. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js #career .career__intro {
    width: min(100%, 820px);
    margin-block-end: calc(56px - clamp(18px, 2.4vh, 30px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAREER · THE FLOOR IS A GRADIENT, NOT A RASTER · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   The marble plate that used to close the chapter - `assets/career/floor.webp`,
   carried as a decorative `<img class="career__bg-floor">` in arrangement A and
   as a background-image layer on the composition in the hover accordion - is
   gone from both. The file itself was deleted in the 3 Sep 2026 cleanup pass
   as unreferenced; nothing in the markup or in either stylesheet may
   reference it again.

   What replaces it is ONE vertical wash on `.career__inner`, the element that
   sizes the three bands, so the same floor is painted in every arrangement
   instead of being restated per breakpoint. Its own height is a viewport ramp
   rather than a percentage of the composition, because the composition is one
   screen tall at desktop and several screens tall stacked - a percentage would
   drag the warmth up over two whole states on a handset. The layer's first stop
   is fully transparent, so where the wash BEGINS there is nothing to see and no
   upper edge exists: the only edge it can ever show is the bottom of the section
   itself. Above the photograph row the composition reads as the paper it already
   was; the warmth arrives under the images and carries through the credentials
   strip, which is exactly where the raster used to sit.

   The colour is the raster's own: the retired plate measures rgb(228, 213, 199)
   across its body and rgb(221, 203, 188) at its top edge, so the ramp lands on
   the same warm limestone rather than introducing a second stone. No saturated
   yellow, no blue or grey cast, no accent, and no stop steep enough to read as
   a line - the alpha climbs 0 -> .30 -> .64 -> .88 -> 1 over the band, which is
   under one alpha step per 40px at every viewport in the ramp.

   Six-state geometry, component height, hover behaviour and the credentials
   content are all untouched: this rule sets background layers and nothing else. */
#career .career__inner,
.js #career .career__inner {
  background:
    linear-gradient(
      to bottom,
      rgba(232, 220, 205, 0) 0%,
      rgba(232, 220, 205, .30) 46%,
      rgba(230, 216, 200, .64) 72%,
      rgba(228, 213, 199, .88) 89%,
      rgba(226, 211, 196, 1) 100%
    ) center bottom / 100% clamp(230px, 32svh, 400px) no-repeat,
    radial-gradient(70% 56% at 18% -8%, rgba(255, 251, 242, .55) 0%, rgba(255, 251, 242, 0) 68%),
    radial-gradient(56% 44% at 62% 0%, rgba(255, 250, 240, .3) 0%, rgba(255, 250, 240, 0) 72%),
    var(--surface-editorial);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT · THE LEGAL BASE · CREDIT AND BREATHING SPACE · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   Two changes, both to the last row of the page.

   1 · The design credit. `Designed by: www.motassem.com.` is a third item on
       the same flex row that already carries the Arabic copyright and the
       year, so it takes the row's own size, colour and baseline rather than a
       treatment of its own. The domain is a real external link on the project's
       standard convention - new tab, `rel="noopener noreferrer"`, and the same
       screen-reader note every other outbound link in this footer carries. It
       is set LTR and isolated so the Latin domain cannot reorder the Arabic
       line around it, and it is the row's last flex item, so on a handset it
       wraps to a line of its own instead of colliding or overflowing.

   2 · The space above it. The prefooter and the legal row were separated by
       10-16px of padding, which read as a caption under the navigation rather
       than as the end of the page. The distance is bought with WHITESPACE only:
       a top margin on the row. No divider and no decorative line is added, and
       as of 2026-09-03 the row's own former top hairline is removed with it, so
       the page ends on space rather than on a rule. */
#contact .closing__base {
  margin-block-start: clamp(26px, 4.4vh, 52px);
  column-gap: clamp(16px, 1.6vw, 28px);
  row-gap: clamp(6px, .8vh, 10px);
}

/* The copyright and its year are one unit, not two flex items: `.closing__rights`
   holds them on a tight inner gap of their own, so the row's wide column-gap
   spaces the credit away from them and never comes between them. In this RTL
   row the group is the first item, so it keeps the physical right; the year
   trails it on the same baseline. The group wraps as a whole and is allowed to
   break internally only as a last resort on a very narrow handset, so the line
   can never overflow its gutter. */
#contact .closing__rights {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .55em;
  row-gap: 2px;
  max-width: 100%;
}

/* Quieter than the copyright it sits beside, and never the loudest thing in
   the row: this is a credit, not a call to action. */
#contact .closing__credit {
  color: rgba(244, 239, 232, .56);
  font-size: .94em;
  letter-spacing: .01em;
}

#contact .closing__credit-link {
  color: rgba(244, 239, 232, .78);
  text-decoration: underline;
  text-decoration-color: rgba(244, 239, 232, .28);
  text-underline-offset: 3px;
  transition: color var(--motion-standard) var(--ease-expressive),
              text-decoration-color var(--motion-standard) var(--ease-expressive);
}

#contact .closing__credit-link:hover,
#contact .closing__credit-link:focus-visible {
  color: var(--rose);
  text-decoration-color: var(--rose);
}

/* The row is `space-between`, so at one line the credit sits at the physical
   end of the line and the copyright keeps the reading edge. Once it wraps it
   becomes its own full-width line and takes the reading edge with it. */
@media (max-width: 767px) {
  #contact .closing__base { margin-block-start: clamp(22px, 6vw, 34px); }
  #contact .closing__credit { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #contact .closing__credit-link { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #agenda · CENTRED QUOTE OVER ONE PRINCIPLES BAND · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   FINAL LAYER for this chapter: read this block as the whole layout, not as a
   patch on the one before it. It replaces the side-by-side composition - a
   quotation panel at the reading edge with three principle cards beside it -
   and every rule that composition needed has been deleted rather than
   overridden.

   TWO ROWS ON ONE AXIS. The quotation is the dominant first row: an editorial
   measure capped at 780px, CENTRED in the chapter's full canvas by auto inline
   margins, so the composition is symmetrical about the section's own centre
   line. The three principles are the second row, one band spanning the shared
   content width beneath it.

   The Arabic is RIGHT-ALIGNED throughout. The block is centred, never the
   glyphs: every sentence still starts on the reading edge of its own column.

   NO CARDS. The quotation panel and the three principle cards are gone - no
   fill, no radius, no inset edge, no shadow anywhere in the chapter. The three
   principles read as ONE related band, and the only thing dividing them is the
   separator token: two 1px verticals between the three columns from tablet up,
   the same two turned horizontal when the band stacks on a handset. There is
   never a line above the first principle or below the last, because a
   separator divides siblings - it does not outline the band.

   The chapter is content-driven. Nothing here pins a viewport height, so the
   section is exactly the quotation plus the band plus the band padding, and no
   empty dark canvas is left over.

   Held fixed, and asserted by scripts/audit-project.mjs: there is NO section
   title, subtitle, taxonomy or explanatory heading - the chapter's only label
   is the section's `aria-label` - and every word of the quotation, the
   attribution, the role and the three principle headings and descriptions is
   unchanged, as are the reveal order and the reveal delays.

   Everything below uses the established dark-surface, separator, spacing, type
   and motion tokens. No new colour, no blur, no gradient, no `!important`. */

/* ── The field · two rows, no viewport pin ────────────────────────────── */
#agenda.chapter { min-height: 0; }

#agenda .thesis {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 3.8vw, 62px);
  padding: var(--band-pad) var(--gutter);
  border-block: 0;
}

/* ── Row 1 · the quotation, centred as a block ────────────────────────── */
/* `margin-inline: auto` is the centring. The measure caps at an editorial
   780px so a wide display cannot stretch the sentence into one thin line, and
   collapses to the content width on anything narrower than that. */
#agenda .thesis__quote {
  inline-size: min(100%, 780px);
  margin-inline: auto;
}

/* Dominant type: with the panel gone this carries the row on its own, so it
   takes back the size the boxed composition had cost it. */
#agenda .thesis__quote blockquote {
  max-width: 100%;
  font-size: clamp(22px, 2.05vw, 34px);
  line-height: 1.4;
}

/* The two marks hang OUTSIDE the measure, so the first and last lines of the
   quotation start and end on the same vertical as every line between them. */
#agenda .thesis__quote blockquote::before,
#agenda .thesis__quote blockquote::after {
  margin-inline: 0;
  font-size: 1.15em;
  opacity: .9;
}

#agenda .thesis__quote blockquote::before { margin-inline-end: -.06em; }
#agenda .thesis__quote blockquote::after { margin-inline-start: -.04em; }

/* ONE SIGNATURE LINE: name, a visible pipe, then the complete role, on a
   single centred inline row under the quotation. This replaces the earlier
   arrangement - a decorative accent rule above a two-line name/role stack -
   which read as three stacked fragments rather than as one signature. The
   accent rule is deleted from the markup, so its spacing is removed here
   with it; the two `.thesis__rule` declarations in the base and mid layers
   are left alone, because nothing renders that element any more.

   `nowrap` is the CONTRACT of this row: the signature is one line and is
   never broken, clamped, ellipsised or shortened. Fitting it on a handset is
   paid for by the type FLOOR below, never by hiding a word. The row is
   centred as a GROUP - the block is centred, the glyphs of each half still
   read on their own RTL edge, which is the same rule the rest of the chapter
   follows. */
#agenda .thesis__quote figcaption {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(6px, .7vw, 10px);
  margin-block-start: clamp(18px, 1.9vw, 30px);
}

/* ONE readable baseline for both halves: the same size and the same
   line-height, so the pipe sits between two equals instead of between a
   title and a caption. The distinction that remains is TONAL only - the role
   sits one step back in the paper ramp - which keeps the name dominant
   without a second type size on the line.

   The ceiling (17px) is the old name size; the floor (12.5px) is what keeps
   the complete line inside a 360px viewport. `nowrap` on each half stops a
   half from breaking internally even if the row itself were ever squeezed. */
#agenda .thesis__name,
#agenda .thesis__role,
#agenda .thesis__sep {
  margin-block: 0;
  font-size: clamp(12.5px, 1.02vw, 17px);
  line-height: 1.5;
  white-space: nowrap;
  text-align: center;
}

#agenda .thesis__name { color: var(--paper-hi); }
#agenda .thesis__role { color: rgba(244, 239, 232, .78); }

/* Presentational separator - `aria-hidden` in the markup, so it is a visible
   divider and not a spoken word. It never shrinks and never wraps. */
#agenda .thesis__sep {
  flex: 0 0 auto;
  color: rgba(244, 239, 232, .42);
}

/* ── Row 2 · the principles band ──────────────────────────────────────── */
/* The band spans the row and draws no outline of its own: the hairline the
   list carries in the base layer is dropped here, because the only lines in
   this chapter are the two BETWEEN the principles. The grid gap is zero, so
   the items' own padding is the whole space between them, which is what lets
   a separator sit on the exact midpoint of that space. */
#agenda .territories {
  margin: 0;
  gap: 0;
  border: 0;
}

/* The `:first-child` arm is not decoration: the base layer targets it at a
   higher specificity than the plain child, so both have to be reset together
   or its hairline survives. The items carry no surface at all. */
#agenda .territories > li,
#agenda .territories > li:first-child {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Two lines at most and never truncated: the heading takes one step down for
   the column measure and keeps `pretty` wrapping. No clamp, no ellipsis, no
   hidden overflow anywhere in this block. */
#agenda .territories h3 {
  max-inline-size: 100%;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.34;
  text-wrap: pretty;
}

#agenda .territories p {
  max-width: 100%;
  margin-block-start: clamp(8px, .8vw, 12px);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
}

/* ── Tablet and up · three equal columns, two vertical separators ─────── */
@media (min-width: 768px) {
  #agenda .territories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    /* The heading row and the description row are SHARED tracks, so all three
       titles sit on one baseline AND all three descriptions do, whether a
       title takes one line or two. The second track is `1fr`, so the slack
       that equal item heights create lands at the foot of the column rather
       than inside the text. Engines without subgrid fall back to each item's
       own auto rows, which still leaves the heading baseline shared. */
    grid-template-rows: auto 1fr;
  }

  /* Identical inline padding on all three, so the three reading measures stay
     equal and each separator lands exactly halfway between the two blocks of
     type it divides. */
  #agenda .territories > li,
  #agenda .territories > li:first-child {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: clamp(8px, .8vw, 12px);
    padding: 0 clamp(18px, 2vw, 34px);
  }

  /* The row gap above IS the title-to-description spacing once the rows are
     shared, so the paragraph must not add a second one. */
  #agenda .territories > li > p { margin-block-start: 0; }

  /* THE SEPARATORS. `li + li` matches the second and third principle and
     nothing else, so there are exactly two of them and neither can land on the
     outside of the band. They run the item's full height because the items
     stretch to the tallest of the three. */
  #agenda .territories > li + li {
    border-inline-start: var(--separator-size) solid var(--separator-on-dark);
  }
}

/* ── Tablet · the same two rows on a narrower canvas ──────────────────── */
@media (min-width: 768px) and (max-width: 899px) {
  #agenda .thesis {
    gap: clamp(28px, 3.4vw, 46px);
    padding-block: clamp(44px, 6vw, 72px);
  }

  #agenda .thesis__quote blockquote { font-size: clamp(24px, 3.1vw, 30px); }

  #agenda .territories > li,
  #agenda .territories > li:first-child { padding: 0 clamp(14px, 1.9vw, 20px); }

  #agenda .territories h3 { font-size: clamp(16px, 2.1vw, 19px); }
  #agenda .territories p { font-size: clamp(13px, 1.6vw, 15px); }
}

/* ── Handheld · the band stacks and the two lines turn horizontal ─────── */
@media (max-width: 767px) {
  #agenda .thesis { gap: clamp(28px, 7vw, 38px); }

  #agenda .territories { grid-template-columns: minmax(0, 1fr); }

  #agenda .territories > li,
  #agenda .territories > li:first-child { padding: clamp(18px, 4.6vw, 24px) 0; }

  /* Same two separators, same token, rotated with the stack. */
  #agenda .territories > li + li {
    border-block-start: var(--separator-size) solid var(--separator-on-dark);
  }

  /* The band's outer edges stay open: dropping the first item's top padding
     and the last item's bottom padding keeps the chapter compact and moves
     neither line off the midpoint between the items it divides. */
  #agenda .territories > li:first-child { padding-block-start: 0; }
  #agenda .territories > li:last-child { padding-block-end: 0; }

  #agenda .thesis__quote blockquote { font-size: clamp(21px, 5.6vw, 28px); }
  #agenda .territories h3 { font-size: clamp(17px, 4.6vw, 20px); }
  #agenda .territories p { font-size: 15px; }

  /* The signature stays ONE line on a handset. The type takes a controlled
     step down with the viewport and the gap tightens with it; measured at
     360px the complete line is well inside the content width, so no word is
     ever cut, faded or hidden to buy the fit. */
  #agenda .thesis__quote figcaption {
    gap: clamp(5px, 1.6vw, 9px);
    margin-block-start: clamp(16px, 4vw, 24px);
  }

  #agenda .thesis__name,
  #agenda .thesis__role,
  #agenda .thesis__sep { font-size: clamp(12.5px, 3.6vw, 15px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT · FLOATING-NAV CLEARANCE ON A HANDSET · 2026-09-03
   ───────────────────────────────────────────────────────────────────────────
   The navigation is a FIXED floating pill. On a handset it occupies the top
   64px of every viewport, and #contact opens with the page's one closing
   header - an eyebrow and a two-line title - so that header is the block most
   exposed to it. Until now the only thing holding the two apart was the
   ANCHOR OFFSET: 78px of `scroll-margin`, which exists solely at the instant a
   `#contact` link is followed. Nothing in the section's own box reserved the
   space, so on any arrival that does not go through that anchor - a restored
   scroll position, a back-navigation, an engine that ignores `scroll-margin`,
   or a capture of the section as an element - the eyebrow and the first line of
   the title sat under the pill.

   The clearance is now REAL LAYOUT inside the chapter. `--contact-nav-clearance`
   is the pill's measured occupied height plus a deliberate gap, it is spent as
   the shell's own top padding, and it therefore holds at every scroll position
   where the section's top edge is at or below the viewport top, on every arrival
   path, with or without JavaScript.

   The anchor offset is REDUCED to 16px in the same breath so the two are not
   paid twice: the header used to land 101.6px below the viewport top and now
   lands at ~98px, which is ~34px of clear air under the pill instead of ~37px
   of clear air that only existed on one arrival path. The section pays ~56px of
   real height for that, which is ~5% of its handheld height - the top of the
   chapter reads as a measured band above a header, not as an empty canvas.

   Nothing else in the chapter moves: the eyebrow, the authored two-line title,
   the summary and the form keep their own sizes, gaps and order, the title is
   never clamped or truncated, and no divider is introduced anywhere. */
@media (max-width: 767px) {
  #contact {
    --contact-nav-clearance: clamp(76px, 21vw, 88px);
    scroll-margin-block-start: 16px;
  }

  /* The one authority for the handheld shell box - see the deleted rule in the
     handheld block of the CONTACT - compact and complete layer above. */
  #contact .shell {
    padding-block: var(--contact-nav-clearance) clamp(10px, 2.6vw, 14px);
    gap: clamp(12px, 3.2vw, 16px);
  }

  /* The intro recomposes INSIDE that band rather than growing with it: the
     eyebrow keeps its full line, the authored <br> keeps the title at exactly
     two lines, and the summary follows on one consistent step. The steps are
     authored here so the header reads as one block under the clearance instead
     of three items inheriting three different desktop gaps. */
  #contact .closing__invitation-action { gap: 0; }
  #contact .closing__eyebrow { margin-block-end: clamp(8px, 2.2vw, 11px); }
  #contact-title { margin-block-end: clamp(10px, 2.8vw, 14px); }

  /* The four-route PAIRING is a desktop economy and must not survive to a
     handset. There the contact group's track is only ~163px wide, while the X
     route - label plus `@buthainaalansa2` plus the shared arrow - needs ~98px
     against a 74px column, so its handle spilled out of its own box and printed
     over the label beside it. Measured at 390px: box 74px, content 98px; at
     360px: box 66px, content 91px. Desktop and tablet are unaffected and keep
     the pairing (834px: 119px box, 119px content).

     One column per route at handheld: every label sizes to its own content, the
     email route stops wrapping its arrow onto a third line, and each link keeps
     its own 44px target. Nothing is hidden, shortened or dropped. */
}


/* ════════════════════════════════════════════════════════════════════════════
   #standing · PRESENCE CARD BACKGROUNDS · the authoritative layer
   · 2026-09-03 CSS abstraction, amended 2026-09-04 for two true-alpha cutouts
   ────────────────────────────────────────────────────────────────────────────
   THIS IS THE ONE PLACE the four presence-card backgrounds are settled. There
   are now TWO kinds, and the modifier in the markup decides which a card gets:

     · `.presence-card__media--cutout` — ESTITHMAR and DLALA only. Carries a
       true-alpha WebP cutout of the building. Gets the right-anchored, contain
       fit and zero-fade rules authored at the bottom of this block, and NOT
       the painted composition.
     · plain `.presence-card__media` — HAWKAMA and ESG. Unchanged from the
       3 Sep 2026 pass: still an empty element, still painted by the CSS
       composition below, still making no documentary claim.

   The `:not()` on the composition rules is the whole of that separation. There
   is no later override layer for these cards; anything that needs to change
   about a presence background changes here.

   ── The 3 Sep 2026 record, still in force for Hawkama and ESG ──────────────
   WHAT CHANGED, AND WHY. The four presence cards used to carry a photographic
   `.presence-card__media` layer behind the warm-paper veil. All four images
   were withdrawn from the deployable preview, and — since none was referenced
   by anything else either — all four were deleted outright in the 3 Sep 2026
   cleanup pass:

     · `institutional-presence-hero-v2.webp`, `estithmar-architecture-v2.webp`
       and `dlala-architecture-v2.webp` were the three synthetic renders banned
       by docs/16 §S18. That ban was the standing rule and the render was the
       known open item; the item is closed here in the direction the ban points.
     · `assets/esg/official-2025-audience-hall.webp` was authentic archival
       photography (§S28), but its publication permission and credit
       requirement were still unconfirmed, so it could not ship in an external
       preview either.

   WHAT REPLACED THEM. Nothing raster. Each media layer became an EMPTY,
   aria-hidden element painted by the composition rules below: a pair of soft
   radial fields in the chapter's own paper and burgundy tokens, a single wide
   arc, and a fine 45° hairline ruling. The result is unmistakably a graphic —
   it has no horizon, no vertical massing, no perspective and no subject — so it
   cannot be read as a building, a boardroom, a conference hall or a skyline,
   and it makes no documentary claim. **That is still exactly what Hawkama and
   ESG carry.** The four withdrawn files above are still withdrawn, and none of
   them is what the 4 Sep 2026 amendment added.

   WHAT IS UNTOUCHED, deliberately and completely. The four-card grid tracks and
   spans, every card box, height, padding tier, border radius and elevation, the
   official marks, the organisation names, roles, descriptors, destinations,
   reading order, the focus ring, the card lift, and the 2x2 tablet band and
   one-column handheld stack. The legibility veil (`.presence-card__media::after`)
   keeps its exact authored geometry at every breakpoint ON THE PAINTED CARDS,
   because the card's text contract must not change when its field does. On the
   two cutout cards there is no veil at all any more — legibility is bought by
   moving the content columns to the physical right instead of dissolving the
   building, so the pseudo-element is dropped for them entirely by the `:not()`
   guards above. `--presence-veil` and `--presence-media-pos` keep their names
   and their per-card values for the painted cards only.

   The hover step is preserved in kind: the painted layer keeps its 1.03 scale,
   and the two cutout images get an identical-in-kind 1.03 scale of their own,
   both cancelled by the reduced-motion block below.
   ════════════════════════════════════════════════════════════════════════════ */

/* The composition itself. `::before` is a layer authored INSIDE the existing
   media element, so it sits under the veil (`::after`) and under the content
   stack (`z-index: 1`) without any change to either.

   `:not(.presence-card__media--cutout)` is what keeps it off Estithmar and
   Dlala: a painted field behind a cutout would be invisible at best and a
   colour cast at worst, and the cutout cards buy their legibility from moving
   the content aside instead. Hawkama and ESG match the `:not()` and are
   unaffected. */
#standing .presence-card__media:not(.presence-card__media--cutout)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* 1 · a fine 45° hairline ruling — the graphic signature of the field, and
       the element that makes the layer unreadable as a photograph. */
    repeating-linear-gradient(45deg,
      rgba(138, 21, 56, .055) 0 1px,
      rgba(138, 21, 56, 0) 1px 9px),
    /* 2 · one wide arc, drawn as a ring and not as a filled shape: the inside
       is fully transparent, so what reads is a single curve crossing the card
       rather than a mass sitting on it. */
    radial-gradient(122% 90% at var(--presence-media-pos),
      rgba(138, 21, 56, 0) 0 36.4%,
      rgba(138, 21, 56, .075) 37.6% 38.4%,
      rgba(138, 21, 56, 0) 39.6% 100%),
    /* 3 · the warm field the ruling and the arc sit in. */
    radial-gradient(150% 120% at var(--presence-media-pos),
      rgba(222, 181, 138, .3) 0%,
      rgba(222, 181, 138, .12) 46%,
      rgba(245, 239, 231, 0) 78%),
    linear-gradient(to bottom left,
      rgba(var(--presence-veil), 1) 0%,
      rgba(var(--presence-veil), .55) 100%);
  transform: scale(1);
  transform-origin: 30% 70%;
  transition: transform .5s var(--ease-expressive);
}

/* The same single hover/focus step the composition has always had. */
#standing .presence-card__link:hover .presence-card__media:not(.presence-card__media--cutout)::before,
#standing .presence-card__link:focus-visible .presence-card__media:not(.presence-card__media--cutout)::before {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  #standing .presence-card__media::before,
  #standing .presence-card__link:hover .presence-card__media::before,
  #standing .presence-card__link:focus-visible .presence-card__media::before {
    transform: none;
    transition: none;
  }
}

/* ── The two CUTOUT cards · Estithmar and Dlala · amended 2026-09-04 ───────
   TRUE-ALPHA WebP cutouts, background-extracted from the owner-supplied
   masters (docs/16 §S33) using OpenAI ImageGen and then alpha-hardened: only
   the sky/backdrop was removed, the building pixels themselves are untouched.
   Both are DECORATIVE (`alt=""` inside an `aria-hidden` wrapper), and every
   factual claim in the card is still made by its text and its official mark.

   Art direction, inside the card geometry that already existed: the building
   owns a dedicated field on the PHYSICAL LEFT — not a logical inline
   position, since this chapter is RTL and the field must not silently flip —
   at `object-fit: contain`, roughly 30–55% of the card wide depending on
   viewport. The mark / identity / foot content columns move to the PHYSICAL
   RIGHT by reserving that same field width as `padding-left` on the card
   link, so the two never collide; the text itself keeps its existing
   right-aligned start within that narrower column, unchanged.

   NO FADE, PERIOD. There is no veil, no gradient, no opacity mask, no clip
   fade, no blend mode and no CSS filter on either cutout — `opacity: 1` and
   `filter: none` are asserted below, not assumed. The WebP's own alpha channel
   is the only transparency in the picture; the building itself is never
   softened, tinted or cropped into invisibility the way the earlier
   left-field photo dissolve did.

   `--presence-cutout-field` is the one number the image width and the
   content's reserved padding are both cut from, so they can never disagree.
   It reads `clamp(30%, calc(100% - 186px), 55%)`: 55% is the reference
   proportion and governs every card wider than ~414px, while the `- 186px`
   term is the measured content block (the ~164–173px role line plus its
   padding) and takes over on the narrower tablet and handheld cards, where a
   flat 55% would crowd the type. This is the same self-scaling shape the
   retired `--presence-photo-field` used, so no extra breakpoint override is
   needed here either. */
#standing .presence-card--estithmar .presence-card__link,
#standing .presence-card--dlala .presence-card__link {
  --presence-cutout-field: clamp(30%, calc(100% - 186px), 55%);
  /* Physical left padding reserves the cutout's own field so the content
     columns land on the physical right and never sit under the building. */
  padding-left: calc(var(--presence-cutout-field) + clamp(14px, 1.6vw, 22px));
}

#standing .presence-card__media--cutout {
  /* Clips the field, and with it the 1.03 hover step, to its own right edge.
     Without this the zoom would push the image a few pixels past the field
     and print a hard vertical edge on hover. The left corners stay rounded:
     this only intersects the inherited radius, it does not replace it. */
  clip-path: inset(0 calc(100% - var(--presence-cutout-field)) 0 0);
}

/* The image field itself. `left` is physical on purpose. No `object-fit:
   cover`, no crop: the building must render whole, so this is `contain`. */
#standing .presence-card__media--cutout img {
  position: absolute;
  inset-block: 0;
  left: 0;
  right: auto;
  width: var(--presence-cutout-field);
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: bottom left;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1);
  transition: transform .5s var(--ease-expressive);
}

/* The identical-in-kind hover/focus step the painted layer and the earlier
   photo both carried, transform-only and clipped inside the field above. */
#standing .presence-card__link:hover .presence-card__media--cutout img,
#standing .presence-card__link:focus-visible .presence-card__media--cutout img {
  transform: scale(1.03);
}

/* Desktop Career rail overlap: reserve flow space below while translate rail + gap into .career__states */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js #career .career__rail {
    position: relative;
    inset: auto;
    z-index: 8;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    margin: 0;
    /* -100% lifts the rail by its own height so it overlaps the states
       panorama; the +15px lowers the whole bar - border, background and all
       five cells together - by 15px inside that same overlap. Only the
       translate offset changes: height, padding and flow space are untouched,
       and tablet/handheld never reach this band. */
    transform: translateY(calc(-100% + 15px));
  }
  .js #career .career__credentials {
    height: clamp(76px, 8.5vh, 84px);
    padding-block: clamp(8px, 1vh, 13px);
  }
  .js #career .career__credentials > li {
    padding-block: 0;
  }
}

/* ═══ TASK A · Career credentials equal distribution ══════════════════════
   Desktop rule (min-width 900px) for equal-width qualification cells. */
@media (min-width: 900px) {
  #career .career__credentials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: stretch;
    gap: 1px;
  }

  #career .career__credentials > * {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(16px, 2vh, 24px) clamp(12px, 1.5vw, 20px);
  }

  #career .career__credentials-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  #career .career__credentials-head svg {
    width: 24px;
    height: 24px;
    flex: none;
  }

  #career .career__credential {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #career .career__credential strong {
    order: -1;
  }
}

/* ═══ TASK B · Footer navigation layout ═══════════════════════════════════
   Desktop: brand at right, four info columns, four icon links.
   Tablet: 2×2 grid. Mobile: one column. */
#contact .closing__top {
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vh, 64px);
  padding-block-start: clamp(96px, 12vh, 150px);
}

#contact .closing__identity {
  margin-block-end: 0;
}

#contact .closing__icons {
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
  align-items: center;
}

#contact .closing__icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(244, 239, 232, .24);
  color: rgba(244, 239, 232, .76);
  transition: all .3s ease;
}

#contact .closing__icons a:hover,
#contact .closing__icons a:focus-visible {
  color: #fff;
  border-color: rgba(244, 239, 232, .5);
  background: rgba(244, 239, 232, .08);
}

#contact .closing__icons a:focus-visible {
  outline: 2px solid rgba(244, 239, 232, .4);
  outline-offset: 2px;
}

#contact .closing__icon {
  width: 20px;
  height: 20px;
  color: currentColor;
}

#contact .closing__navs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(24px, 3vh, 36px);
  border-block: 1px solid rgba(244, 239, 232, .1);
}

#contact .closing__nav-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#contact .closing__nav-title {
  font-size: clamp(13px, .9vw, 15px);
  font-weight: 600;
  color: rgba(244, 239, 232, .88);
  margin: 0;
}

#contact .closing__nav-subtitle {
  font-size: clamp(12px, .85vw, 14px);
  color: rgba(244, 239, 232, .68);
  margin: 0;
  line-height: 1.5;
  max-width: 26ch;
}

#contact .closing__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#contact .closing__nav-list li {
  font-size: clamp(13px, .92vw, 15px);
}

#contact .closing__nav-list a {
  color: rgba(244, 239, 232, .76);
  text-decoration: none;
  transition: color .3s ease;
}

#contact .closing__nav-list a:hover,
#contact .closing__nav-list a:focus-visible {
  color: #fff;
}

#contact .closing__nav-list a:focus-visible {
  outline: 2px solid rgba(244, 239, 232, .4);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 768px) and (max-width: 1099px) {
  #contact .closing__navs {
    gap: clamp(20px, 2.5vw, 32px);
  }
}

@media (max-width: 767px) {
  #contact .closing__top {
    padding-block-start: clamp(72px, 10vh, 120px);
  }

  #contact .closing__icons {
    order: 2;
    margin-block-start: clamp(16px, 3vw, 24px);
  }

  #contact .closing__icons a {
    width: 40px;
    height: 40px;
  }

  #contact .closing__navs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 5vw, 28px);
    border-block: none;
    padding-block: clamp(20px, 5vw, 28px);
  }

  #contact .closing__nav-column {
    padding-block: clamp(12px, 3vw, 16px);
    border-block: 1px solid rgba(244, 239, 232, .1);
  }

  #contact .closing__nav-column:first-of-type {
    border-block-start: none;
  }
}

/* Final measured Career cell and footer band correction */
@media (min-width: 900px) {
  #career .career__credentials {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
  }
  #career .career__credentials > li {
    width: auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #career .career__credentials > .career__credentials-head {
    flex-direction: row;
    justify-content: center;
  }
}

#contact .closing__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "identity" "navs";
  direction: rtl;
  align-items: start;
  gap: clamp(36px, 8vw, 52px);
  padding-block-start: clamp(72px, 10vh, 104px);
  border: 0;
}
#contact .closing__identity {
  grid-area: identity;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  min-width: 0;
}
#contact .closing__icons {
  order: initial;
  direction: rtl;
  flex-direction: row;
  justify-content: flex-start;
  margin-block-start: clamp(16px, 3vw, 24px);
  gap: 12px;
}
#contact .closing__navs {
  grid-area: navs;
  direction: rtl;
  display: grid;
  /* Phone: the four link groups read as a 2 x 2 grid rather than one long
     stack, so the footer's link block loses roughly a quarter of its height
     without moving a group, renaming a label or changing a destination. The
     `direction: rtl` above fills the first row right-then-left, so the
     authored order still reads naturally. Both wider breakpoints below
     restate this property, so tablet and desktop are untouched. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 6vw, 34px) clamp(18px, 5vw, 28px);
  padding: 0;
  border: 0;
}
#contact .closing__nav-column,
#contact .closing__nav-column:first-of-type {
  padding: 0;
  border: 0;
}

/* Phone tap targets. Two columns narrow each group, so every footer link
   carries a full 44px target here, and the plain focus-area items take the
   same height so all four groups keep one rhythm. The list's 8px gap is
   folded into that height instead of being added to it. Type, colour and
   focus treatment are untouched, and nothing here applies from 768px up. */
@media (max-width: 767px) {
  #contact .closing__nav-list {
    gap: 0;
  }
  #contact .closing__nav-list li {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* inline-block, never a flex container: `ESG قطر 2026` mixes an inline
     <span> with a text node, and flexifying the anchor would drop the space
     between them. The 11px block padding lifts the 22.1px line box to a 44px
     target without touching font size, weight or line height. */
  #contact .closing__nav-list a {
    display: inline-block;
    padding-block: 11px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  #contact .closing__top {
    gap: clamp(44px, 6vw, 60px);
    padding-block-start: clamp(80px, 10vh, 112px);
  }
  #contact .closing__navs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 4vw, 52px) clamp(28px, 4vw, 48px);
  }
}

@media (min-width: 1100px) {
  #contact .closing__top {
    direction: ltr;
    grid-template-columns: minmax(0, 3.7fr) minmax(260px, 1.3fr);
    grid-template-areas: "navs identity";
    gap: clamp(44px, 5vw, 88px);
    padding-block-start: clamp(96px, 12vh, 150px);
  }
  #contact .closing__identity {
    grid-area: identity;
    direction: rtl;
  }
  #contact .closing__navs {
    grid-area: navs;
    direction: rtl;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  #contact .closing__nav-column {
    padding-inline: clamp(18px, 1.8vw, 32px);
  }
  #contact .closing__nav-column:first-child {
    padding-inline-start: 0;
  }
  #contact .closing__nav-column:last-child {
    padding-inline-end: 0;
  }
  #contact .closing__nav-column + .closing__nav-column {
    border-inline-start: 1px solid rgba(244, 239, 232, .12);
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   FINAL AUTHORITY · #thinking · writing-editorial composition
   Scoped strictly to #thinking and its `.writing-editorial__*` children.
   Supersedes any earlier #thinking / .journal* rules above by source
   order; nothing outside this block is touched.

   THE ARTICLE ROW IS THREE PEER PANELS, NOT A FEATURE PLUS TWO OPTIONS.
   `.writing-editorial__peers` is one row; `.writing-editorial__peer` are
   three stable, equal columns that never move, never swap content and never
   change href. `is-active` is a single-active-state accordion: it promotes
   ONE panel, in its own column, from the quiet lockup to the full card, and
   the other two stay quiet. Everything below is written so that promotion
   cannot relocate, overlap or push a neighbour.

   Base styles first (which are also the stacked <=1199px treatment), then
   desktop (min-width: 1200px) physical placement matching the supplied
   reference geometry.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────── */
/* Every declaration in this chapter is authored for BOTH `#thinking.writing`
   and `.js #thinking.writing`. Three earlier blocks (the 110svh chapter, the
   85svh desktop floor and the compact 3.6svh/4svh padding pass) are written
   against `.js #thinking.writing` — a (1,2,0) selector that outranks a bare
   `#thinking.writing` (1,1,0) no matter how late this block sits in source
   order. Matching the selector pair is what makes THIS block the final
   authority instead of a suggestion. */
#thinking.writing,
.js #thinking.writing {
  /* THE STATE MOVE'S OWN MOTION TOKENS, scoped to this chapter so nothing
     else on the page inherits them. `--writing-ease-settle` is a pure
     deceleration curve — it leaves at full speed and arrives asymptotically,
     which is what stops the promotion from reading as a snap; the global
     `--ease-expressive` has a slight lead-in that is right for reveals and
     wrong for a state that must feel already-underway the instant the pointer
     lands. The surface takes the longer number because it travels the whole
     card; the fields settle sooner so the reading order lands before the
     background has finished arriving. */
  --writing-ease-settle: cubic-bezier(.22, 1, .36, 1);
  --writing-surface-duration: 560ms;
  --writing-content-duration: 420ms;

  background: var(--surface-editorial);
  color: var(--ink);
  overflow: clip;
  min-height: 0;
  height: auto;
  max-height: none;
  padding-block: clamp(48px, 4.8vw, 88px) clamp(40px, 3.4vw, 56px);
}

/* `#thinking.writing` is `display: grid`, so this shell is a grid item. The
   `margin-inline: auto` below suppresses the default `stretch` self-alignment
   and hands the item fit-content sizing; with the desktop composition placed
   absolutely, nothing in flow contributes an intrinsic width and the item
   collapses to its own `.shell` gutters (2 x 75px at 1440px). `inline-size:
   100%` restores the fill explicitly; `box-sizing: border-box` keeps the
   gutters inside the 1440px cap instead of adding 150px to it. */
.writing-editorial.shell {
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  max-width: 1440px;
  margin-inline: auto;
  direction: ltr;
}

.writing-editorial.shell :is(
  .writing-editorial__masthead,
  .writing-editorial__portrait,
  .writing-editorial__peers,
  .writing-editorial__peer,
  .writing-editorial__x-rail
) {
  direction: rtl;
  text-align: right;
}

.writing-editorial__portrait,
.writing-editorial__portrait img,
.writing-editorial__peers,
.writing-editorial__x-rail {
  display: block;
  margin: 0;
}

.writing-editorial__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.writing-editorial__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.writing-editorial__meta > :not(:last-child) {
  position: relative;
  padding-inline-end: 12px;
}

/* The reference separates source from date with a thin upright rule, not a
   bullet: 1px wide, the cap height of the 13px meta line, at low opacity.
   In the quiet state the source is `display: none`, so this pseudo-element
   is not painted at all and the date is left alone — no orphaned divider. */
.writing-editorial__meta > :not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  border-radius: 0;
  background: currentColor;
  opacity: .35;
}

/* ── The peer row · structure and single active state ─────────────────
   Three stable panels. The ONLY thing that changes between states is which
   panel carries `is-active`; the columns, their order and their contents are
   fixed by the markup. The rules here are also the stacked treatment used
   below 1200px, so nothing depends on the desktop block existing. */
#thinking .writing-editorial__peers {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#thinking .writing-editorial__peer {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  cursor: pointer;
}

/* THE CARD SURFACE IS A PSEUDO-ELEMENT, so promoting a panel animates with
   opacity and transform alone: no background, shadow, colour or geometry is
   ever transitioned. `z-index: -1` keeps it behind the panel's own text — an
   absolutely positioned ::before would otherwise paint OVER the in-flow copy
   — and it stays inside the row's stacking context, so it can never fall
   behind the portrait. */
#thinking .writing-editorial__peer::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 16px;
  background: var(--surface-editorial);
  box-shadow: 0 18px 40px rgba(20, 16, 14, .1);
  opacity: 0;
  transform-origin: bottom center;
  transform: translateY(6px) scaleY(.64);
  transition:
    opacity var(--writing-surface-duration) var(--writing-ease-settle),
    transform var(--writing-surface-duration) var(--writing-ease-settle);
  pointer-events: none;
}

#thinking .writing-editorial__peer.is-active::before {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

/* ── State choreography · transform and opacity ONLY ──────────────────
   Promotion is a class move, so everything that genuinely differs between
   the two states — padding, text-align, font-size, and the three fields the
   quiet state hides — resolves in a single frame. That is deliberate: those
   are the properties that cost layout, and animating them is what makes a
   card judder. What IS animated is the pair that costs nothing: each field
   fades and rises the last few pixels into the position it has already been
   given, on both sides of the move, so the incoming card arrives and the
   outgoing one settles rather than cutting.

   `is-entering` / `is-leaving` are ONE-FRAME classes. main.js adds one,
   forces a single style flush, and removes it inside the same synchronous
   turn (see `choreograph`): the flush records the fields at their offset
   with transitions suppressed, and the removal is what runs them back to
   rest. Nothing survives the call — no class, no timer, no timeout id — so a
   rapid crossing cannot strand a panel mid-state; it simply re-arms the same
   two transitions from wherever they had reached. */
#thinking .writing-editorial__peer > * {
  transition:
    opacity var(--writing-content-duration) var(--writing-ease-settle),
    transform var(--writing-content-duration) var(--writing-ease-settle);
}

/* The settle reads in the card's own order — meta, title, summary, CTA — with
   the badge arriving with the body rather than ahead of it. The delays live on
   the RESTING state because the transition that actually plays is the one the
   class REMOVAL runs, and that reads its timing from the resting rule. */
#thinking .writing-editorial__peer .writing-editorial__meta { transition-delay: 0ms; }
#thinking .writing-editorial__peer .writing-editorial__title { transition-delay: 35ms; }
#thinking .writing-editorial__peer .writing-editorial__summary { transition-delay: 65ms; }
#thinking .writing-editorial__peer .writing-editorial__badge { transition-delay: 85ms; }
#thinking .writing-editorial__peer .writing-editorial__cta { transition-delay: 105ms; }

/* The offsets themselves. `transition: none` is the whole point of the pair:
   the fields must LAND at the offset instantly and animate only on the way
   back, otherwise a fast re-crossing would animate them outward too. */
#thinking .writing-editorial__peer.is-entering > *,
#thinking .writing-editorial__peer.is-leaving > * {
  transition: none;
}

#thinking .writing-editorial__peer.is-entering > * {
  opacity: 0;
  transform: translateY(8px);
}

/* The outgoing panel is already back in its quiet lockup by the time this is
   read. Starting that new lockup from the same short, transparent offset as
   the incoming card hides the synchronous type reflow and lets both states
   settle on one continuous visual path. */
#thinking .writing-editorial__peer.is-leaving > * {
  opacity: 0;
  transform: translateY(8px);
}

/* REDUCED MOTION IS SYNCHRONOUS, not merely faster: no transition, no delay,
   and no offset to recover from. main.js also skips `choreograph` entirely
   under the same query, so the classes below are a belt-and-braces floor
   rather than the mechanism. The selectors repeat the resting ones because
   the per-field delay rules above are (1,2,0) — a `> *` override would lose
   to them on specificity, not on source order. */
@media (prefers-reduced-motion: reduce) {
  #thinking .writing-editorial__peer::before,
  #thinking .writing-editorial__peer > *,
  #thinking .writing-editorial__peer :is(
    .writing-editorial__meta,
    .writing-editorial__title,
    .writing-editorial__summary,
    .writing-editorial__badge,
    .writing-editorial__cta
  ) {
    transition: none;
    transition-delay: 0s;
  }

  #thinking .writing-editorial__peer.is-entering > *,
  #thinking .writing-editorial__peer.is-leaving > * {
    opacity: 1;
    transform: none;
  }
}

/* The quiet subset the reference draws: date, title, CTA. Source, summary and
   badge belong to the card only. They are authored in EVERY panel — the quiet
   state hides them, it does not delete them, so promotion needs no content
   write and no field is ever moved between panels. */
#thinking .writing-editorial__peer:not(.is-active) .writing-editorial__source,
#thinking .writing-editorial__peer:not(.is-active) .writing-editorial__summary,
#thinking .writing-editorial__peer:not(.is-active) .writing-editorial__badge {
  display: none;
}

#thinking .writing-editorial__peer:not(.is-active) [data-writing-date] {
  color: var(--burgundy);
}

#thinking .writing-editorial__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ONLY the numeral is enlarged. The span wraps «100» and nothing else, so the
   +25px and the extra weight cannot reach «قرار مع د. بثينة»: the rest of the
   heading keeps the h3's own size and 700. `line-height: 1` stops the taller
   glyph from growing the heading's line box, and the colour is inherited so
   the whole line stays on the burgundy copy scale. */
.writing-editorial__x-count {
  font-size: calc(1em + 25px);
  font-weight: 800;
  line-height: 1;
  color: inherit;
}

#thinking .journal__link-arrow {
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-expressive);
}

#thinking a:hover .journal__link-arrow,
#thinking a:focus-visible .journal__link-arrow {
  transform: translateX(-5px);
}

#thinking :is(.writing-editorial__cta, .writing-editorial__x-cta) {
  color: var(--burgundy);
}

#thinking a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

#thinking a:focus-visible {
  outline-width: var(--focus-ring-width);
  outline-style: solid;
  outline-color: var(--focus-ring-light);
  outline-offset: 3px;
}

/* ── Stacked (<=1199px) · one active card over quiet peers ────────────
   Below the desktop row the three peers stack in DOM order. The active panel
   is a full-width card; the quiet peers are compact rows under it, divided by
   a hairline. No horizontal overflow is possible: every panel is a normal
   block-level flex column at 100% of the stack. */
@media (max-width: 1199px) {
  #thinking .writing-editorial__peer {
    padding: 16px 20px 16px 24px;
    text-align: right;
  }

  #thinking .writing-editorial__peer.is-active {
    padding: 26px 28px 24px 34px;
  }

  #thinking .writing-editorial__peer:not(.is-active) + .writing-editorial__peer:not(.is-active) {
    border-block-start: 1px solid rgba(138, 21, 56, .18);
  }

  /* Compact horizontal tab at the card's upper physical left; it is in flow
     here, so it never covers text. */
  #thinking .writing-editorial__badge {
    position: static;
    transform: none;
    inline-size: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--burgundy);
    color: var(--paper-hi);
    margin-inline-start: 0;
    margin-block-end: 12px;
    font-size: 11px;
    line-height: 1.3;
  }

  #thinking .writing-editorial__peer .writing-editorial__meta {
    padding-inline-start: 0;
    font-size: 13px;
    flex-wrap: wrap;
  }

  #thinking [data-writing-source] {
    color: var(--burgundy);
    font-weight: 700;
  }

  #thinking .writing-editorial__peer.is-active [data-writing-date] {
    color: var(--on-paper-mute);
  }

  /* Sized to fit, not clipped: the longest record («حوكمة الذكاء الاصطناعي
     ومستقبل الاقتصادات الخليجية», 50 characters) sets in two lines at this size
     across the whole band. No clamp and no ellipsis — a title is never cut. */
  #thinking .writing-editorial__peer.is-active .writing-editorial__title {
    font-size: clamp(19px, 2.4vw, 24px);
    line-height: 1.3;
    font-weight: 700;
    margin-block: 14px 0;
  }

  #thinking .writing-editorial__peer:not(.is-active) .writing-editorial__title {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.4;
    font-weight: 500;
    margin-block: 8px 0;
  }

  /* The stacked card has no fixed height, so the two-line guard the 277px
     desktop card needs is simply wrong here: the summary runs its full
     length and nothing is ever cut. */
  #thinking .writing-editorial__summary {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    font-size: 15px;
    line-height: 1.65;
    margin-block: 10px 0;
  }

  #thinking .writing-editorial__cta {
    font-size: 14.5px;
    min-height: 44px;
    margin-block-start: 4px;
    align-self: flex-end;
  }
}

/* ── Desktop (>=1200px) · physical placement ─────────────────────────── */
@media (min-width: 1200px) {
  /* ~80px/40px at 1672x941 and ~69px/40px at 1440x900: the top step tracks
     the canvas width (4.8vw) rather than the viewport height, because the two
     reference frames differ in BOTH axes and no single svh coefficient can
     hit 80 at 941 and 70 at 900 at once. */
  #thinking.writing,
  .js #thinking.writing {
    min-height: 0;
    height: auto;
    max-height: none;
    padding-block: clamp(56px, 4.8vw, 88px) 40px;
  }

  /* The page gutter is an OUTER gutter here, not shell padding: the absolutely
     placed composition resolves its percentages against the shell's padding
     box, so a gutter carried as padding would inset the box the composition is
     measured from and push every child inward. Width = viewport minus two
     gutters, centred, padding zeroed — x = 87.1 at 1672. */
  .writing-editorial.shell {
    box-sizing: border-box;
    inline-size: calc(100% - 2 * var(--gutter));
    max-width: 1720px;
    padding-inline: 0;
    margin-inline: auto;
    height: clamp(760px, calc(100svh - 110px), 820px);
    min-height: 760px;
  }

  /* Portrait */
  .writing-editorial__portrait {
    position: absolute;
    left: 16%;
    top: 0;
    width: 49%;
    height: clamp(520px, 62vh, 590px);
    border-radius: 16px;
    overflow: hidden;
  }

  /* The frame widened with the gutter correction (706px -> 734px), so the crop
     window opened to the physical left; 59% pulls the subject back to the
     framing of the supplied portrait reference. */
  .writing-editorial__portrait img {
    object-position: 72% 50%;
  }

  /* Intro */
  .writing-editorial__masthead {
    position: absolute;
    right: 0;
    top: 12px;
    width: 30%;
  }

  .writing__eyebrow {
    color: var(--burgundy);
  }

  /* The authored <br> fixes the break at «أفكار في / الاقتصاد والحوكمة», so the
     ceiling is the second line inside a 30% column (449px at 1672): 52px keeps
     its 17 characters on one line with margin, where 68px could not. No clamp,
     no ellipsis — the title is never cut. */
  #thinking .writing-editorial__masthead .chapter-title {
    max-width: 100%;
    font-size: clamp(38px, 3.1vw, 52px);
    line-height: 1.17;
  }

  .writing-editorial__masthead .chapter-summary {
    max-width: 36ch;
    font-size: 18px;
    line-height: 1.9;
  }

  .writing__aside {
    margin-block-start: clamp(18px, 2vh, 28px);
  }

  .writing__aside a {
    min-height: 44px;
    font-size: 15px;
    color: var(--burgundy);
    border-block-end: 1px solid rgba(138, 21, 56, .4);
  }

  /* X rail */
  .writing-editorial__x-rail {
    position: absolute;
    left: 0;
    top: 200px;
    width: 13.4%;
    padding-top: 28px;
    border-block-start: 1px solid rgba(138, 21, 56, .22);
    background: none;
    box-shadow: none;
  }

  /* The rail is the one block the reference sets to the physical LEFT: rule,
     mark, title, copy and CTA all begin at the same left edge. `direction`
     stays `rtl` so the Arabic shapes, orders and punctuates correctly — only
     the alignment of the finished lines flips. The base rule that sets
     `text-align: right` is `.writing-editorial.shell :is(…)` at (0,3,0), so
     the id is needed here to outrank it. */
  #thinking .writing-editorial__x-rail {
    text-align: left;
  }

  /* The X mark is the ONLY thing in this rail that is not burgundy: the
     logo is a wordmark and reads as the page's own ink, matching the X
     brand. Everything under it stays on the burgundy copy scale. */
  #thinking .writing-editorial__x-mark {
    width: 32px;
    height: 32px;
    color: var(--ink);
  }

  /* The reference leaves a wider breath between the mark and the heading than
     the 10px this had; +8px lands it. Size, weight and colour are unchanged —
     700 and burgundy, with only `.writing-editorial__x-count` carrying the
     +25px and the 800. */
  #thinking .writing-editorial__x-title {
    font-size: 18px;
    line-height: 1.3;
    margin-block-start: 18px;
    color: var(--burgundy);
    font-weight: 700;
  }

  .writing-editorial__x-copy {
    font-size: 15px;
    color: var(--on-paper-soft);
    margin-block-start: 6px;
  }

  .writing-editorial__x-cta {
    font-size: 15px;
    margin-block-start: 10px;
  }

  /* ── The peer row ──────────────────────────────────────────────────
     Reference geometry at 1672x941: the row spans x=192 → x=1585 and its
     bottom band sits at y≈868. `left: 7%` of a 1498px shell that starts at
     87.1 resolves to 191.9; `right: 0` resolves to 1585. Height is the
     reference card's own 277px, so the row's top edge IS the active card's
     top edge (y≈591) and its bottom edge IS the shared baseline.

     THREE EQUAL COLUMNS, fixed for every state. Promotion changes no track,
     no order and no width, so a panel can never relocate to the left, never
     overlap a neighbour and never push one. `direction: ltr` is PLACEMENT
     ONLY — it maps DOM order (education, green-gold, ai-governance) onto the
     physical columns left, middle, right exactly as the reference draws
     them, while each panel below re-enters `rtl` for its own Arabic. */
  #thinking .writing-editorial__peers {
    position: absolute;
    left: 7%;
    right: 0;
    top: calc(clamp(520px, 62vh, 590px) - 76px);
    height: 277px;
    z-index: 3;
    direction: ltr;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  /* A quiet panel is bottom-aligned and only as tall as its lockup, so the
     row's upper band stays inert: crossing it neither activates nor
     deactivates anything. The active panel stretches to the row's full 277px,
     which is how it "extends upward" — within its own column, never out of
     it. */
  #thinking .writing-editorial__peer {
    direction: rtl;
    align-self: end;
    min-block-size: 164px;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0 34px 28px;
  }

  /* THE QUIET LOCKUP SITS ON THE ROW'S OWN BOTTOM EDGE, which is the shared
     reference baseline. The 28px above is the CARD's inner bottom padding —
     the active panel needs it because its CTA is inside a painted surface;
     a quiet panel has no surface, so inheriting it lifted the CTA ~28px above
     the reference and left the three lockups out of register.

     Only the bottom is touched, and only in the quiet state. `padding-block-
     start` is already 0 and the panel is bottom-aligned at a fixed 164px, so
     the content box's TOP edge is identical either way: the date and the
     two-line title do not move by a pixel. The CTA is the one field pushed to
     the box's bottom by `margin-block-start: auto`, so it is the only thing
     this releases. */
  #thinking .writing-editorial__peer:not(.is-active) {
    padding-block-end: 0;
  }

  /* THE CARD IS 434 OF THE COLUMN'S 464, ANCHORED TO ITS PHYSICAL LEFT —
     x=192→626 for the left column, exactly the reference. 6.5% of the column
     is the gap left at the physical right; the SAME 6.5% is added to the
     active panel's padding-right, so the text column inside the card is
     361px, its right text edge is 35px in from the card edge and its CTA is
     38px in from the card's left edge. One number, two rules, no drift. */
  #thinking .writing-editorial__peer::before {
    inset: 0 6.5% 0 0;
  }

  #thinking .writing-editorial__peer.is-active {
    align-self: stretch;
    block-size: 100%;
    min-block-size: 0;
    align-items: stretch;
    text-align: right;
    padding: 35px calc(6.5% + 35px) 28px 38px;
  }

  /* The one restrained rule, exactly as the reference: drawn only BETWEEN two
     adjacent quiet panels, never against the card. With the left panel active
     that is a single rule at the middle/right boundary. */
  #thinking .writing-editorial__peer:not(.is-active) + .writing-editorial__peer:not(.is-active) {
    border-left: 1px solid rgba(138, 21, 56, .18);
  }

  /* PHYSICAL left, and it hangs outside the card exactly as the reference
     does. `inset-inline-start` resolved to the RIGHT here, because the panel
     is `direction: rtl`; `left`/`right: auto` is the only pair that is
     direction-proof. The hang is what buys the clearance, so the
     right-aligned Arabic column keeps its full width and no content needs
     to be inset.

     The reference hangs it 34px outside a 192px card edge, tops it 44px
     below the card's own top rather than centring it on the card, runs it
     111px tall with an 8px radius, and sets the label ABOVE the star —
     `column-reverse` gets that order from the authored star-then-label
     markup without touching the HTML. */
  #thinking .writing-editorial__peer.is-active .writing-editorial__badge {
    position: absolute;
    left: -34px;
    right: auto;
    top: 44px;
    transform: none;
    width: 66px;
    min-height: 111px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 14px;
    padding-inline: 0;
    margin: 0;
    border-radius: 8px;
    background: var(--burgundy);
    color: var(--paper-hi);
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
  }

  /* With the badge hung outside the card on the physical left, the meta starts
     flush at the card's right text edge, as the reference shows. */
  #thinking .writing-editorial__peer.is-active .writing-editorial__meta {
    font-size: 13px;
    line-height: 1.4;
    padding-inline-start: 0;
    margin: 0;
    flex: none;
  }

  #thinking .writing-editorial__peer:not(.is-active) .writing-editorial__meta {
    justify-content: center;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    flex: none;
  }

  #thinking [data-writing-source] {
    color: var(--burgundy);
    font-weight: 700;
  }

  #thinking .writing-editorial__peer.is-active [data-writing-date] {
    color: var(--on-paper-mute);
  }

  /* NO line-clamp, NO ellipsis: an article title is never truncated, in either
     state. The ceiling is set so the LONGEST record — «حوكمة الذكاء الاصطناعي
     ومستقبل الاقتصادات الخليجية», 50 characters — still sets in TWO full lines
     inside the card's 361px text column at 1672, and the vw term keeps that
     true down to 1200 where the same column is only 238px. 1.34 is the
     tightest leading that still reads as editorial. The 20px top margin is the
     reference's deliberate meta→title step; it is a margin rather than a gap
     so the rest of the column keeps its own uneven, authored rhythm. */
  #thinking .writing-editorial__peer.is-active .writing-editorial__title {
    font-size: clamp(20px, 1.44vw, 24px);
    line-height: 1.34;
    font-weight: 700;
    margin-block: 20px 0;
    flex: none;
  }

  /* Two visual lines is the budget the 277px card can pay once the meta, the
     two-line title and the 44px CTA row have taken theirs. All three summaries
     set in two lines at this measure, so the clamp is a guard, not a cut. */
  #thinking .writing-editorial__peer.is-active .writing-editorial__summary {
    font-size: 15.5px;
    line-height: 1.65;
    margin-block: 12px 0;
    flex: none;
  }

  /* The reference parks the CTA in the card's bottom PHYSICAL-LEFT corner:
     `margin-block-start: auto` takes the bottom, `align-self: flex-end` takes
     the left (the card's cross-axis start is the right, since it is rtl). */
  #thinking .writing-editorial__peer.is-active .writing-editorial__cta {
    font-size: 16px;
    margin-block-start: auto;
    align-self: flex-end;
    flex: none;
  }

  /* The quiet lockup: date, title and CTA on one centred vertical axis, with
     the CTA pushed to the shared bottom baseline. Medium 500 at a clear step
     under the active title's 700, so the hierarchy survives every activation.
     Same no-clamp contract: complete titles, never ellipsized. */
  #thinking .writing-editorial__peer:not(.is-active) .writing-editorial__title {
    display: block;
    max-width: 100%;
    font-size: clamp(16px, 1.14vw, 19px);
    line-height: 1.5;
    margin-block: 14px 0;
    text-align: center;
    font-weight: 500;
  }

  #thinking .writing-editorial__peer:not(.is-active) .writing-editorial__cta {
    font-size: 14px;
    margin-block-start: auto;
    align-self: center;
  }

  /* A two-line lockup only reads as deliberate when the break is deliberate
     too. These caps are keyed to `data-article-id` — which is now PERMANENT
     per column, so a cap describes one article forever — and they apply to
     the QUIET state only; the card sets its own measure.

     `green-gold` («الذهب الأخضر.. الثروة التي لا تنضب») would otherwise set as
     one long line plus an orphan; 17ch breaks it after the ellipsis into two
     balanced lines. `education` fits its measure on ONE line, which would
     leave its lockup a row short of its neighbours; 20ch splits it evenly.
     `ai-governance` fills two lines on its own at 1672 but collapses onto one
     in the wider 1920 column, so 24ch pins the reference's own break after
     «الاصطناعي» at every width. Every cap is a break hint — the text is
     complete in all three cases, and none of them is ever clipped. */
  #thinking .writing-editorial__peer:not(.is-active)[data-article-id='green-gold'] .writing-editorial__title {
    max-inline-size: 17ch;
    margin-inline: auto;
  }

  #thinking .writing-editorial__peer:not(.is-active)[data-article-id='education'] .writing-editorial__title {
    max-inline-size: 20ch;
    margin-inline: auto;
  }

  #thinking .writing-editorial__peer:not(.is-active)[data-article-id='ai-governance'] .writing-editorial__title {
    max-inline-size: 24ch;
    margin-inline: auto;
  }
}

/* ── Tablet (900px–1199px) · grid placement ──────────────────────────── */
@media (min-width: 900px) and (max-width: 1199px) {
  .writing-editorial.shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px 24px;
    height: auto;
    min-height: 0;
  }

  .writing-editorial__masthead,
  .writing-editorial__portrait,
  .writing-editorial__peers,
  .writing-editorial__x-rail {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 0;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
  }

  /* Intro — physical right half, top */
  .writing-editorial__masthead {
    grid-column: 6 / 13;
    grid-row: 1;
  }

  .writing-editorial__masthead .chapter-title {
    font-size: clamp(40px, 4.6vw, 54px);
    line-height: 1.18;
  }

  .writing-editorial__masthead .chapter-summary {
    max-width: 40ch;
    font-size: 16.5px;
    line-height: 1.8;
  }

  /* X rail — narrow physical left */
  .writing-editorial__x-rail {
    grid-column: 1 / 5;
    grid-row: 2;
    padding-top: 24px;
    border-block-start: 1px solid rgba(138, 21, 56, .22);
  }

  /* Portrait — dominant columns below/alongside intro */
  .writing-editorial__portrait {
    grid-column: 5 / 13;
    grid-row: 2;
    aspect-ratio: 16 / 10;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
  }

  .writing-editorial__portrait img {
    object-position: 58% 50%;
  }

  /* The peer stack overlaps the portrait bottom by <=44px, exactly as the
     desktop card does. Three side-by-side columns will not carry these Arabic
     titles in two lines at this width, so the row becomes the stack — the
     same single active state, read top to bottom. */
  #thinking .writing-editorial__peers {
    grid-column: 1 / 13;
    grid-row: 3;
    margin-block-start: -44px;
    position: relative;
    z-index: 3;
  }
}

/* ── Mobile (<=899px) · stacked flow ──────────────────────────────────── */
@media (max-width: 899px) {
  /* Paired selector for the same reason as the base block: the earlier
     compact-padding pass is authored against `.js #thinking.writing`, which
     outranks a bare `#thinking.writing` regardless of source order. */
  #thinking.writing,
  .js #thinking.writing {
    padding-block: clamp(56px, 12vw, 80px);
    padding-inline: var(--gutter);
  }

  /* The section above owns the gutter, so the shell must not add a second
     one — `.shell`'s own `padding-inline` would double-inset every child. */
  .writing-editorial.shell {
    direction: rtl;
    padding-inline: 0;
  }

  .writing-editorial.shell,
  .writing-editorial__masthead,
  .writing-editorial__portrait,
  .writing-editorial__peers,
  .writing-editorial__x-rail {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
  }

  .writing-editorial.shell {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 6vw, 34px);
  }

  .writing-editorial__masthead {
    order: 1;
  }

  .writing-editorial__portrait {
    order: 2;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
  }

  .writing-editorial__portrait img {
    object-position: 58% 50%;
  }

  #thinking .writing-editorial__peers {
    order: 3;
    position: relative;
    z-index: 3;
  }

  /* NO line-clamp and no `overflow: hidden`: a chapter title is never cut.
     The authored <br> already fixes the break, so the job of the size is to
     keep the longer of the two lines («الاقتصاد والحوكمة») on one line inside
     the gutter-to-gutter column — 8.6vw does that from 899px down to 600px,
     where a 10vw setting overflowed the second line onto a third. */
  .writing-editorial__masthead .chapter-title {
    max-width: 100%;
    font-size: clamp(34px, 8.6vw, 54px);
    line-height: 1.18;
  }

  .writing-editorial__masthead .chapter-summary {
    max-width: 100%;
    font-size: clamp(16px, 4vw, 18px);
    line-height: 1.8;
  }

  .writing__aside {
    margin-block-start: clamp(16px, 4vw, 22px);
  }

  .writing__aside a {
    min-height: 44px;
    font-size: 15px;
    color: var(--burgundy);
    border-block-end: 1px solid rgba(138, 21, 56, .4);
  }

  #thinking .writing-editorial__peer {
    padding: 14px 16px 14px 20px;
  }

  #thinking .writing-editorial__peer.is-active {
    padding: 24px 22px 22px 28px;
  }

  /* X rail — last, full width, top border, no box */
  .writing-editorial__x-rail {
    order: 5;
    padding-top: 22px;
    border-block-start: 1px solid rgba(138, 21, 56, .22);
    background: none;
    box-shadow: none;
  }

  .writing-editorial__x-mark {
    width: 28px;
    height: 28px;
  }

  .writing-editorial__x-title {
    font-size: 17px;
    line-height: 1.3;
    margin-block-start: 10px;
  }

  .writing-editorial__x-copy {
    font-size: 15px;
    color: var(--on-paper-soft);
    margin-block-start: 6px;
  }

  .writing-editorial__x-cta {
    font-size: 15px;
    min-height: 44px;
    margin-block-start: 10px;
  }
}

@media (max-width: 480px) {
  #thinking.writing,
  .js #thinking.writing {
    padding-block: clamp(48px, 11vw, 64px);
  }

  .writing-editorial.shell {
    gap: clamp(20px, 5.5vw, 28px);
  }

  .writing-editorial__masthead .chapter-title {
    font-size: clamp(34px, 9.5vw, 44px);
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Activation still happens — it just lands as a synchronous repaint. The
     card surface keeps its opacity switch (that is the state, not the motion)
     and loses every transition and offset. */
  #thinking.writing .writing-editorial__peer::before,
  #thinking.writing .writing-editorial__peer .writing-editorial__badge,
  #thinking.writing .journal__link-arrow,
  #thinking.writing a {
    transition: none;
  }

  #thinking.writing .writing-editorial__peer::before,
  #thinking.writing .writing-editorial__peer .writing-editorial__badge {
    transform: none;
  }

  #thinking.writing a:hover .journal__link-arrow,
  #thinking.writing a:focus-visible .journal__link-arrow {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINAL COMPOSITION LAYER · #media · حوارات ورؤى · 2026-09-04
   ───────────────────────────────────────────────────────────────────────────
   THIS IS THE ONLY BLOCK IN THIS FILE THAT STYLES #media. Every earlier
   podcast rule, every `.media-section` / `.media-podcast` / `.media-video`
   wrapper rule, every `.video-film` / `.video-gallery` rule and every earlier
   `#media …` patch layer was DELETED on 2026-09-04, not overridden — so what
   is written here is the whole truth about this chapter and there is nothing
   above it to reconcile against. The only #media selectors outside this block
   are the eight-chapter `:is(#standing, …, #media, …) .chapter-heading` rules
   of the CANONICAL CHAPTER HEADING SYSTEM, which own the eyebrow / title /
   summary type and which this block deliberately does not restyle.

   WHAT THE COMPOSITION IS
   One dark, near-viewport chapter built on a single two-column grid declared
   on `.video-chapter__inner`. The document is dir="rtl", so GRID COLUMN 1 IS
   THE PHYSICAL RIGHT. `.video-desk` is `display: contents`, so the heading,
   the four cards and the archive pill are all direct participants in that one
   grid rather than nested in a second layout context:

     col 1 (physical right)   row 1  .video-chapter__head
                              row 2  .video-card--featured   (~56% of canvas)
     col 2 (physical left)    rows 1-2  .video-support
     both columns             row 3  .video-archive

   `.video-support` stretches across both rows and lays its three frames out
   with `align-content: space-between`: the wider frame at the top, the two
   equal frames at the bottom. That is what BOTTOM-ALIGNS the support pair with
   the featured frame — no magic numbers, no absolute positioning. Its
   `padding-block-start` is what drops its top edge from the eyebrow down to
   roughly the title's line, as in the reference board.

   FRAME ASPECT. The featured frame is 16:9 at every width. The three support
   frames are 16:9 too, EXCEPT from 1280px up, where they take the reference
   board's taller crops: 10/7 for the wide one, 1.04/1 (near-square) for the
   pair. That silhouette is the whole reason the left column reads as a
   composed cluster rather than a stack of thumbnails, so it is worth the one
   cost it carries — all four stills are authentic 16:9 broadcast frames with
   the subject on the physical LEFT and a burned-in Arabic lower-third on the
   right, and a taller crop eats into that caption from the right. Each
   support still therefore gets its own `object-position`, keyed by video id
   below, chosen so the SUBJECT survives the crop; the burned-in caption is
   the thing allowed to lose its tail, because the overlay `.video-card__title`
   already prints that same label as real text. Below 1280 the crop would have
   to be far more aggressive for far less compositional gain, so tablet and
   handheld keep the safe, uncropped 16:9 frames.

   OVERLAY SIDE. Card copy sits on the PHYSICAL RIGHT of each frame
   (`justify-items: start` in RTL). The reference puts the featured copy on the
   left because its subject is on the right; ours is the mirror of that same
   rule — in all four of our stills the subject and the channel bug are on the
   physical left, so the physical right is both the empty side and the correct
   RTL reading edge.

   MOTION. Transform and opacity only, one easing token
   (`cubic-bezier(.16, 1, .3, 1)`), image scale capped at 1.025, and nothing
   that moves layout. There is no autoplay, no looping animation and no glow.
   The `prefers-reduced-motion` block at the end of this layer removes every
   transform and every transition.

   HONESTY. `.video-card__rule` on the featured frame is a static decorative
   hairline, NOT playback state; it is aria-hidden and nothing ever animates
   it. The duration chips print the real `lengthSeconds` recorded in
   content.js. Each card is a real youtube.com watch link that works with
   JavaScript off; main.js only upgrades the click to the youtube-nocookie
   dialog, which is a sibling of this section and is styled by name elsewhere
   in this file.
   ═══════════════════════════════════════════════════════════════════════════ */

#media.video-chapter {
  /* One local token set. Nothing below reaches for a magic number twice. */
  --video-ease: cubic-bezier(.16, 1, .3, 1);
  --video-motion: .42s;
  --video-radius: clamp(14px, 1.05vw, 18px);
  --video-gap: clamp(14px, 1.35vw, 22px);
  --video-border: rgba(250, 247, 241, .13);
  --video-border-lit: rgba(250, 247, 241, .3);
  --video-frame-shadow:
    0 28px 62px -34px rgba(4, 3, 3, .95),
    0 12px 34px -26px rgba(91, 14, 43, .8);
  --video-frame-shadow-lit:
    0 32px 70px -32px rgba(4, 3, 3, .98),
    0 14px 38px -22px rgba(138, 21, 56, .9);
  /* Where the bottom scrim stops being opaque. The featured frame carries
     three lines of copy, so its scrim reaches higher than a support's. */
  --video-scrim-reach: 56%;
  --video-play-size: clamp(44px, 3.4vw, 56px);
  --video-copy-inset: clamp(12px, 1.15vw, 20px);
  /* The archive pill's two dimensions, kept as tokens because the laptop step
     below has to put both back to their pre-desktop values in one place. */
  --video-cta-pad-inline: clamp(24px, 3.1vw, 56px);
  --video-cta-height: 55px;
  --video-pad-block: clamp(46px, 6.2svh, 92px);

  position: relative;
  display: grid;
  align-content: center;
  /* Near-viewport, capped. At 1440x900 this resolves to a 900px chapter and
     at 1672x941 to a 940px one — one perceived screen, never a long scroll. */
  min-block-size: min(100svh, 940px);
  /* HUNG 23px ABOVE CENTRE, not centred. The reference board leaves the deeper
     margin under the archive pill — 60px of air above the eyebrow against
     ~83px below the pill at 1672x941 — and even centring puts the eyebrow
     ~11px low. A heavier block-end padding shifts the whole lockup up by half
     the difference, so the eyebrow lands on the reference's line while the
     pill still resolves to y≈802. Doing it this way rather than with
     `align-content: start` keeps the offset PROPORTIONAL: at 1440x900, where
     the composition is shorter, it reads 86/109 instead of 58/137. */
  padding-block: var(--video-pad-block) calc(var(--video-pad-block) + 23px);
  /* CANVAS. Neutral charcoal everywhere the reference board is neutral — the
     top band and the whole physical-left edge — with the warmth arriving only
     under the featured frame, low and to the physical right. Percentages are
     PHYSICAL (background-position ignores `dir`), so `at 70% 100%` is the
     bottom-right of the box, i.e. under the featured card, not the support
     column. Both blooms are wider than the box and fade to transparent at
     their own 100% stop, so the falloff runs the full width of the chapter
     and there is no spotlight edge to see. */
  --video-canvas: #0e0b0d;
  --video-bloom: 118, 74, 86;
  background:
    /* 1 · The halo behind the featured frame. Reaches the chapter's mid-right
       and dies well before the top band. */
    radial-gradient(52% 62% at 74% 66%, rgba(var(--video-bloom), .055), transparent),
    /* 2 · The broad floor wash: lower-right through lower-centre, gone by the
       physical-left quarter. This is the layer the reference actually shows. */
    radial-gradient(60% 88% at 70% 100%, rgba(var(--video-bloom), .15), transparent),
    var(--video-canvas);
  color: var(--paper-hi);
}

/* ── The one grid ──────────────────────────────────────────────────────── */
#media .video-chapter__inner {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 41fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(20px, 2.4vw, 42px);
  row-gap: clamp(16px, 2.1svh, 30px);
  align-items: start;
}

/* The gallery wrapper is a DOM hook for main.js (`[data-video-gallery]`), not
   a layout box: its children belong to the grid above. */
#media .video-desk { display: contents; }

#media .video-chapter__head { grid-column: 1; grid-row: 1; }
#media .video-card--featured { grid-column: 1; grid-row: 2; }
#media .video-support { grid-column: 2; grid-row: 1 / 3; }
#media .video-archive { grid-column: 1 / -1; grid-row: 3; }

/* ── 1 · The heading lockup ────────────────────────────────────────────── */
/* Type, colour and the two vertical gaps come from the canonical heading
   system. All this adds is the eyebrow's rule-and-star row and one measure. */
#media .video-chapter__head { --chapter-summary-measure: min(100%, 54ch); }

#media .video-chapter__head > .chapter-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, .8vw, 14px);
}

#media .video-eyebrow__text { flex: none; }

/* A hairline, not a divider: it belongs to the eyebrow row and never spans the
   chapter. It fades away from the word, so the word stays the emphasis. */
#media .video-eyebrow__rule {
  flex: none;
  inline-size: clamp(30px, 3.2vw, 58px);
  block-size: 1px;
  background: linear-gradient(to left, var(--burgundy), rgba(138, 21, 56, .12));
}

#media .video-eyebrow__star {
  flex: none;
  inline-size: clamp(9px, .78vw, 12px);
  block-size: auto;
  fill: var(--rose);
}

/* ── 2 · The support cluster ───────────────────────────────────────────── */
#media .video-support {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--video-gap);
  /* The wider frame is pushed to the top and the pair to the bottom, which is
     what makes the pair's bottom edge meet the featured frame's. */
  align-content: space-between;
  /* THE ONE TUNED NUMBER IN THIS LAYER. It drops the cluster's top edge from
     the eyebrow down to about the title's line, and — because the cluster's
     height is fixed by the grid and `space-between` spends whatever is left
     between the two rows — it is also what sets the gap between the wider
     frame and the pair. Raising it tightens that gap; at the value below the
     wide frame's top lands ~140px into the chapter at 1672x941 (reference:
     135) and the leftover gap resolves to ~31px, which is what keeps the left
     column reading as one cluster rather than two strays. The 84px ceiling is
     not cosmetic: the cluster's height is fixed by the grid, so past that the
     padding would eat the `space-between` slack and shove the pair PAST the
     featured frame's bottom edge. At 1920x1080 it leaves 27px of slack, at
     1672x941 it leaves 36px, and the pair stays bottom-aligned at both. */
  padding-block-start: clamp(56px, 8.1svh, 78px);
}

#media .video-card--wide {
  grid-column: 1 / -1;
  /* Two thirds of the support column, so the frame's outside edge sits well
     inside the pair beneath it — the reference's stepped silhouette. */
  inline-size: 66.5%;
  /* RTL: `start` is the PHYSICAL RIGHT, so the wider frame is flush with the
     featured column and the empty canvas falls on the outside edge. */
  justify-self: start;
}

/* The two support crops. See FRAME ASPECT in the header: these are the only
   frames in the chapter that are not 16:9, and only from 1280px up — the
   laptop step puts both back. */
#media .video-card--wide .video-card__frame { aspect-ratio: 10 / 7; }

#media .video-support .video-card:not(.video-card--wide) .video-card__frame {
  aspect-ratio: 1.04 / 1;
}

/* Taller frame, same scrim JOB: cover the copy band, nothing more. The reach
   is a percentage of block-size, so it has to come down as the frame grows or
   it would climb over the subject instead of sitting under the title. These
   values hold the scrim to the same ~95-130px foot it has on a 16:9 frame. */
#media .video-card--wide { --video-scrim-reach: 45%; }
#media .video-support .video-card:not(.video-card--wide) { --video-scrim-reach: 34%; }

/* SUBJECT-SAFE CROPS. A 16:9 still inside a 10/7 frame keeps 80% of its width;
   inside a 1.04/1 frame it keeps 59%. `object-position` decides which 80% and
   which 59%, and it is keyed to the video id so the crop can never drift onto
   the wrong still. In all three she sits left of centre, so the window is
   pulled toward the physical left; nothing is faded, blurred or masked. */
#media [data-video-id="6xAxZxpPqfw"] .video-card__still { object-position: 19% center; }
#media [data-video-id="Y0tyJnytKSs"] .video-card__still { object-position: 13% center; }
/* The one still with the subject already near the middle of the frame. */
#media [data-video-id="UB3pvCX-DuI"] .video-card__still { object-position: 55% center; }

/* ── 3 · The frame component, shared by all four cards ─────────────────── */
#media .video-card { position: relative; min-inline-size: 0; }

#media .video-card__link {
  display: block;
  min-block-size: 44px;
  border-radius: var(--video-radius);
  color: inherit;
  text-decoration: none;
}

#media .video-card__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--video-radius);
  border: 1px solid var(--video-border);
  background: #14100f;
  box-shadow: var(--video-frame-shadow);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--video-motion) var(--video-ease),
    box-shadow var(--video-motion) var(--video-ease);
}

#media .video-card__still {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  transition: transform var(--video-motion) var(--video-ease);
}

/* Darkens ONLY the band the copy sits in; the subject's face is above it and
   stays untouched. It has to be this opaque at the foot: three of the four
   stills are broadcast frames with a white burned-in lower-third, and the
   overlay title has to win against that, not compete with it. */
#media .video-card__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(4, 2, 2, .93) 0%,
    rgba(5, 3, 3, .84) calc(var(--video-scrim-reach) * .34),
    rgba(8, 5, 6, .54) calc(var(--video-scrim-reach) * .62),
    rgba(10, 6, 8, .18) var(--video-scrim-reach),
    transparent calc(var(--video-scrim-reach) + 16%));
}

/* RTL: `inset-inline-start` is the PHYSICAL RIGHT — the upper-right corner of
   the reference board. */
#media .video-card__duration {
  position: absolute;
  inset-block-start: clamp(8px, .75vw, 13px);
  inset-inline-start: clamp(8px, .75vw, 13px);
  padding: 3px clamp(7px, .6vw, 10px);
  border-radius: 7px;
  background: rgba(8, 5, 5, .74);
  color: rgba(250, 247, 241, .94);
  font-family: var(--display);
  font-size: clamp(11px, .78vw, 13px);
  font-weight: var(--weight-label);
  line-height: 1.5;
  letter-spacing: .02em;
}

/* Centred with auto margins on all four insets, so `transform` stays free for
   the hover state and nothing has to be un-translated. */
#media .video-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--video-play-size);
  block-size: var(--video-play-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 241, .34);
  background: rgba(244, 238, 232, .86);
  color: var(--ink-deep);
  /* The ring is what keeps the disc readable when the frame's centre happens
     to be a white burned-in caption box. */
  box-shadow:
    0 0 0 1px rgba(6, 4, 4, .34),
    0 12px 30px -12px rgba(4, 3, 3, .92);
  transition:
    transform var(--video-motion) var(--video-ease),
    background-color var(--video-motion) var(--video-ease),
    border-color var(--video-motion) var(--video-ease);
}

#media .video-card__play .play-glyph {
  inline-size: 42%;
  block-size: auto;
  fill: currentColor;
  /* The glyph's ink sits right of its own box centre; this re-centres it
     optically inside the disc. */
  translate: -3.5% 0;
}

#media .video-card__copy {
  position: absolute;
  inset-inline: var(--video-copy-inset);
  inset-block-end: calc(var(--video-copy-inset) * .85);
  display: grid;
  /* RTL: the copy stacks against the PHYSICAL RIGHT, opposite the subject. */
  justify-items: start;
  gap: clamp(5px, .5vw, 9px);
  text-align: start;
  pointer-events: none;
}

#media .video-card__title {
  margin: 0;
  color: var(--paper-hi);
  /* Three of the four stills carry a burned-in white lower-third. The scrim
     is deliberately not opaque enough to erase the photograph, so the title
     carries its own contrast instead of the frame losing its subject. */
  text-shadow: 0 1px 3px rgba(3, 2, 2, .92), 0 2px 18px rgba(3, 2, 2, .78);
  font-family: var(--display);
  font-size: var(--compact-video-title-size);
  font-weight: var(--weight-label);
  line-height: 1.42;
  letter-spacing: -.005em;
  text-wrap: balance;
  /* No clamp, no ellipsis: a title that needs two lines gets two lines. */
  max-inline-size: 26ch;
}

#media .video-card__meta {
  color: var(--rose);
  text-shadow: 0 1px 3px rgba(3, 2, 2, .9);
  font-family: var(--display);
  font-size: clamp(11px, .74vw, 13px);
  font-weight: var(--weight-label);
  line-height: 1.4;
}

/* ── 4 · What only the featured frame adds ─────────────────────────────── */
#media .video-card--featured {
  --video-scrim-reach: 62%;
  --video-play-size: clamp(58px, 5vw, 76px);
  --video-copy-inset: clamp(16px, 1.7vw, 30px);
}

#media .video-card--featured .video-card__title {
  font-size: clamp(20px, 1.62vw, 28px);
  line-height: 1.34;
  /* Wide enough that the recorded title keeps to ONE line from 1280 up, as on
     the reference board. It still wraps rather than truncates if it must. */
  max-inline-size: min(100%, 36ch);
}

#media .video-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(4px, .38vw, 7px) clamp(10px, .82vw, 14px);
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 241, .17);
  background: var(--burgundy);
  color: var(--paper-hi);
  font-family: var(--display);
  font-size: clamp(11px, .76vw, 13px);
  font-weight: var(--weight-label);
  line-height: 1.5;
}

#media .video-card__pill-star {
  inline-size: clamp(8px, .62vw, 10px);
  block-size: auto;
  fill: var(--rose-pale);
}

#media .video-card__timeline {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  inline-size: 100%;
  margin-block-start: clamp(2px, .3vw, 5px);
}

#media .video-card__time {
  flex: none;
  color: rgba(250, 247, 241, .74);
  text-shadow: 0 1px 3px rgba(3, 2, 2, .9);
  font-family: var(--display);
  font-size: clamp(12px, .82vw, 14px);
  font-weight: var(--weight-label);
  letter-spacing: .03em;
}

/* DECORATION, not playback state. It is static, aria-hidden and never
   animated; the burgundy segment is a fixed proportion of the rule. */
#media .video-card__rule {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to left,
    var(--burgundy) 0 26%,
    rgba(250, 247, 241, .22) 26% 100%);
}

/* ── 5 · Hover and focus ───────────────────────────────────────────────── */
/* One state for pointer and keyboard. Transform and colour only — nothing
   here changes a size, a margin or a position, so no neighbour ever moves. */
@media (hover: hover) and (pointer: fine) {
  #media .video-card__link:hover .video-card__still {
    transform: scale(1.025);
  }

  #media .video-card__link:hover .video-card__frame {
    border-color: var(--video-border-lit);
    box-shadow: var(--video-frame-shadow-lit);
  }

  #media .video-card__link:hover .video-card__play {
    transform: scale(1.06);
    background: var(--paper-hi);
    border-color: rgba(250, 247, 241, .5);
  }
}

#media .video-card__link:focus-visible .video-card__still { transform: scale(1.025); }

#media .video-card__link:focus-visible .video-card__frame {
  border-color: var(--video-border-lit);
  box-shadow: var(--video-frame-shadow-lit);
}

#media .video-card__link:focus-visible .video-card__play {
  transform: scale(1.06);
  background: var(--paper-hi);
  border-color: rgba(250, 247, 241, .5);
}

#media :is(a, button):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-dark);
  outline-offset: 4px;
  border-radius: var(--video-radius);
}

/* ── 6 · The archive pill ──────────────────────────────────────────────── */
#media .video-archive {
  margin: 0;
  display: flex;
  justify-content: center;
  /* The support pair and the featured frame now bottom out ~26px higher than
     they used to, and this is what keeps the pill on the reference's line
     (y≈802 at 1672x941) instead of following them up. */
  padding-block-start: clamp(20px, 4.1svh, 52px);
}

#media .video-archive__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.1vw, 20px);
  min-block-size: var(--video-cta-height);
  padding: 12px var(--video-cta-pad-inline);
  border-radius: 11px;
  border: 1px solid rgba(250, 247, 241, .16);
  background: var(--burgundy);
  color: var(--paper-hi);
  font-family: var(--display);
  font-size: clamp(14px, .98vw, 17px);
  font-weight: var(--weight-label);
  line-height: 1.5;
  text-decoration: none;
  box-shadow: 0 20px 44px -26px rgba(91, 14, 43, .95);
  transition:
    background-color var(--video-motion) var(--video-ease),
    border-color var(--video-motion) var(--video-ease),
    transform var(--video-motion) var(--video-ease);
}

#media .video-archive__arrow {
  flex: none;
  inline-size: clamp(19px, 1.4vw, 24px);
  block-size: auto;
  color: rgba(250, 247, 241, .88);
  transition: transform var(--video-motion) var(--video-ease);
}

@media (hover: hover) and (pointer: fine) {
  #media .video-archive__link:hover {
    background: var(--burgundy-deep);
    border-color: rgba(250, 247, 241, .3);
  }

  /* Physical left, following the arrow head. 3px, so nothing reflows. */
  #media .video-archive__link:hover .video-archive__arrow { transform: translateX(-3px); }
}

#media .video-archive__link:focus-visible {
  background: var(--burgundy-deep);
  border-color: rgba(250, 247, 241, .3);
}

/* ── 7 · Laptop · the same desk, tighter, and back to safe 16:9 ────────── */
/* Everything the reference silhouette needs — the tall crops, the top-hung
   composition, the wider pill — is desktop-only and is undone here, in one
   place, rather than being re-declared per breakpoint further down. */
@media (max-width: 1279px) {
  #media.video-chapter {
    min-block-size: min(100svh, 900px);
    /* Square again: the off-centre hang exists to match a desktop board. */
    padding-block: var(--video-pad-block);
    --video-cta-pad-inline: clamp(20px, 1.9vw, 34px);
    --video-cta-height: 48px;
  }

  #media .video-support { padding-block-start: clamp(72px, 11svh, 112px); }
  #media .video-card--wide { inline-size: 100%; }
  #media .video-archive { padding-block-start: clamp(8px, 1.4svh, 22px); }

  /* No support frame is cropped below 1280: the burned-in lower-thirds stay
     whole and the stills stay as they were shot. */
  #media .video-card--wide .video-card__frame,
  #media .video-support .video-card:not(.video-card--wide) .video-card__frame {
    aspect-ratio: 16 / 9;
  }

  #media .video-card--wide,
  #media .video-support .video-card:not(.video-card--wide) {
    --video-scrim-reach: 56%;
  }
}

/* ── 8 · Tablet · featured first, then a two-column support grid ───────── */
@media (max-width: 1099px) {
  #media.video-chapter {
    min-block-size: 0;
    padding-block: clamp(44px, 7vw, 76px);
  }

  #media .video-chapter__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    row-gap: clamp(20px, 3.4vw, 34px);
  }

  #media .video-chapter__head { grid-column: 1; grid-row: 1; }
  #media .video-card--featured { grid-column: 1; grid-row: 2; }
  #media .video-support { grid-column: 1; grid-row: 3; }
  #media .video-archive { grid-column: 1; grid-row: 4; }

  #media .video-support {
    align-content: start;
    padding-block-start: 0;
  }

  /* The wider frame spans the pair beneath it but stays visibly narrower than
     the featured frame, so the three-tier hierarchy of the desktop
     composition — 100% / 78% / 50% — survives the collapse to one column. */
  #media .video-card--wide {
    inline-size: 78%;
    justify-self: start;
  }

  #media .video-card--featured .video-card__title { font-size: clamp(20px, 2.9vw, 27px); }
}

/* ── 9 · Handheld · one column, header, featured, three supports, CTA ──── */
@media (max-width: 767px) {
  #media.video-chapter {
    padding-block: clamp(40px, 9vw, 64px);
    overflow-x: clip;
  }

  #media .video-chapter__inner { row-gap: clamp(18px, 4.6vw, 28px); }

  #media .video-support {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 3.6vw, 20px);
  }

  /* One column means one width: the tablet step-down is dropped here so the
     three support frames read as one stack, not as a ragged edge. */
  #media .video-card--wide {
    inline-size: 100%;
    justify-self: stretch;
  }

  #media .video-card__title { max-inline-size: none; }
  #media .video-card--featured {
    /* A 16:9 frame is short at this width, so the disc comes down to leave the
       pill, the title and the rule their own air. */
    --video-play-size: clamp(46px, 12.5vw, 56px);
  }
  #media .video-card--featured .video-card__title {
    font-size: clamp(19px, 5.1vw, 24px);
    max-inline-size: none;
  }

  /* Every tap target clears 44px on its own, not by relying on the frame. */
  #media .video-archive { padding-block-start: clamp(6px, 2vw, 14px); }
  #media .video-archive__link {
    min-block-size: 52px;
    inline-size: min(100%, 420px);
  }
}

@media (max-width: 400px) {
  #media .video-card { --video-copy-inset: 11px; }
  #media .video-card--featured { --video-copy-inset: 13px; }
  #media .video-card__title { font-size: clamp(14px, 4.1vw, 16px); }
}

/* ── 10 · Reduced motion · no transform, no transition, anywhere ───────── */
@media (prefers-reduced-motion: reduce) {
  #media :is(
    .video-card__still,
    .video-card__frame,
    .video-card__play,
    .video-archive__link,
    .video-archive__arrow
  ) {
    transition: none;
    transform: none;
  }

  #media .video-card__link:hover .video-card__still,
  #media .video-card__link:focus-visible .video-card__still,
  #media .video-card__link:hover .video-card__play,
  #media .video-card__link:focus-visible .video-card__play,
  #media .video-archive__link:hover .video-archive__arrow {
    transform: none;
  }

  #media [data-reveal],
  .js #media [data-reveal] {
    transform: none;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Career · SUBJECT-ONLY PHOTOGRAPHY · 2026-09-04 · FINAL AUTHORITY
   ───────────────────────────────────────────────────────────────────────
   Written last so it settles every earlier Career band on source order as
   well as on specificity. Two facts, and only two:

     1 · NO FADE MASK ANYWHERE. `--career-photo-mask` is deleted and both
         rules that consumed it are rewritten above. This block re-states
         `mask-image: none` on the image at the two selector strengths that
         could otherwise be reached by a legacy layer, so a stale gradient
         cannot come back and eat a roofline. Nothing is ever painted OVER a
         subject either: `.career-slide__photo::before` stays `content: none`
         and any integration wash would have to live on the wrapper, below
         the image's own stacking level.

     2 · FIVE ALPHA CUTOUTS + ONE SILHOUETTE CLIP. Five runtime photographs
         are background-extracted derivatives on a transparent 1160x1300
         canvas, bottom-centre anchored, so `object-fit: contain` alone
         yields a building and nothing else. The sixth - Qatar National
         Library - keeps its authentic opaque pixels and is clipped instead,
         by a polygon traced from the building's own outer silhouette. A
         clip has hard edges by definition: it removes sky and open plaza
         and it fades nothing.
   ═══════════════════════════════════════════════════════════════════════ */

#career .career-slide .career-slide__photo img,
#career .career__states > .career-slide:hover .career-slide__photo img,
#career .career__states > .career-slide:focus-visible .career-slide__photo img,
.js #career .career__states > .career-slide:hover .career-slide__photo img,
.js #career .career__states > .career-slide:focus-visible .career-slide__photo img {
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
}

/* -- Qatar National Library · the silhouette clip -----------------------
   The image editor could not produce a genuine alpha channel for this one
   asset, and inventing architecture is not an option, so the real photograph
   is kept and its outline is described in CSS.

   The polygon is traced from the source itself (1160x1300): a per-column scan
   of the sky plate puts the cantilever edge at 0% -> 52.1%, the roof knee at
   20.3% -> 36.9%, the apex at 89.2% -> 34.9% and the right frame edge at
   40.5%; the podium/step base runs 78.5% on the left to 75.5% on the right.
   Each vertex is offset ~0.4% outboard of the measurement so the clip can
   never shave a building pixel - the residual sliver is sky-coloured paper on
   paper and is under 1px at every rendered size.

   Registration is the whole problem, and it is solved by making the ELEMENT
   BOX equal the painted image box: `width/height: auto` with `max-width/
   max-height: 100%` gives a replaced element exact contain sizing, so a
   percentage polygon maps 1:1 onto source coordinates at every column width -
   at rest, expanded, and at every breakpoint. The image stays OUT OF FLOW, so
   the media row is still bounded by the composition and hover still changes
   width only.

   `translate` (not `transform`) drops the whole thing by 22% of its own
   height, which is exactly the open-plaza band the clip removes, so this
   building stands on the same ground line as the five cutouts beside it. The
   hover scale therefore pivots on the building's own base, not the frame's. */
#career .career-slide[data-career-state="qatariat"] .career-slide__photo img {
  position: absolute;
  inset: auto auto 0 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  translate: -50% 22%;
  transform-origin: center 78%;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
  clip-path: polygon(
    0% 51.7%,
    20.2% 36.5%,
    89.2% 34.5%,
    100% 40.2%,
    100% 76.2%,
    60% 77.6%,
    30% 78.6%,
    0% 79.0%
  );
}

/* In the desktop accordion the credentials rail is pulled up over the bottom
   ~55px of the media band, so that band - not the cell edge - is the ground
   line the reader actually sees. The library is a LOW building: shifting it a
   further 22% down would bury half of it behind the rail for no gain, and its
   own base already falls just below the rail's top edge. So the shift is only
   for the arrangements where the rail sits BELOW the field and the cell edge
   really is the ground. Same clip, same registration, one number. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js #career .career-slide[data-career-state="qatariat"] .career-slide__photo img {
    translate: -50% 0;
  }
}

/* -- The credentials head, centred as ONE group -------------------------
   The head cell is a flex ROW: a cap icon and the strip's title on one line.
   `.career__credentials li > span` gives every credential span a 5px top
   margin - correct for the four stacked qualification cells, wrong here,
   where a row's `align-items: center` turns that margin into a 2.5px
   downward offset of the TITLE ALONE. The icon stayed on the container's
   midline and the words sat below it, which is exactly the misalignment the
   eye picks up. Zeroing the margin on this one span puts icon and title on a
   single optical line whose group bounding box centres on the container's
   midpoint. Nothing else moves: the cell keeps its height, the strip keeps
   its compact height and its overlap, and the five cells keep equal widths. */
#career .career__credentials li.career__credentials-head > span {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Optical, not mathematical: the cap glyph's drawn ink runs y 2.25-18.25 in a
   0 0 24 24 box, so its INK centre sits 1.75/24 = 7.3% above the box centre
   that flexbox aligns on. Nudging the box down by exactly that fraction puts
   the icon's ink on the title's ink line. A percentage, so it holds at every
   clamped icon size; no height is added and the row is untouched. */
#career .career__credentials-head .career__credentials-icon {
  transform: translateY(7.3%);
}

/* Mobile Career ledger: all six chapters remain visible in normal flow. The
   desktop flex/hover composition is intentionally untouched above 900px. */
@media (max-width: 899px) {
  #career .career__scene,
  #career .career__inner {
    height: auto;
    min-height: 0;
  }

  #career .career__states,
  #career .career__milestones {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    direction: rtl;
  }

  #career .career-slide {
    --career-ledger-rail: clamp(78px, 22vw, 108px);
    display: grid;
    grid-template-columns: var(--career-ledger-rail) minmax(0, 1fr);
    column-gap: clamp(12px, 3.5vw, 20px);
    row-gap: clamp(7px, 2vw, 11px);
    align-items: start;
    align-content: start;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: none;
    padding: clamp(16px, 4.5vw, 25px) 0;
    border-inline: 0;
    border-block-start: 1px solid var(--line-paper);
    text-align: start;
    transition: none;
  }

  #career .career-slide:first-child { border-block-start: 0; }
  #career .career-slide:hover,
  #career .career-slide:focus-visible { flex-grow: 0; transform: none; }

  #career .career-slide > .career-slide__marker {
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: 8px;
    height: 8px;
    margin: 2px 0 0 auto;
    opacity: 1;
    transform: rotate(45deg);
    background: var(--burgundy);
  }

  #career .career-slide > time,
  #career .career-slide > .career-slide__period {
    grid-column: 1;
    grid-row: 2;
    position: static;
    align-self: start;
    margin: 0;
    color: var(--burgundy);
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.35;
    white-space: nowrap;
  }

  #career .career-slide > .career-slide__logo,
  #career .career-slide > .career-slide__identity,
  #career .career-slide > .career-slide__destination-marks {
    grid-column: 1;
    grid-row: 3;
    position: static;
    align-self: start;
    justify-self: start;
    max-width: 100%;
    margin: 0;
  }

  #career .career-slide > .career-slide__logo {
    width: auto;
    max-height: 36px;
    object-fit: contain;
    object-position: right center;
  }

  #career .career-slide__identity {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  #career .career-slide__identity-mark { width: 34px; height: 34px; flex: none; }
  #career .career-slide__identity-copy { display: grid; gap: 1px; line-height: 1.2; }
  #career .career-slide__identity-name { font-size: 14px; font-weight: 700; }
  #career .career-slide__identity-caption { font-size: 10px; color: var(--ink-muted); }

  #career .career-slide__destination-marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
  }
  #career .career-slide__destination-marks img { width: auto; max-width: 40px; max-height: 22px; object-fit: contain; }

  #career .career-slide > h3,
  .js #career .career-slide > h3 {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: static;
    align-self: end;
    max-width: 100%;
    margin: 0;
    font-size: clamp(17px, 4.8vw, 23px);
    line-height: 1.3;
    text-wrap: balance;
  }

  #career .career-slide > .career-slide__detail {
    grid-column: 2;
    grid-row: 3;
    position: static;
    min-width: 0;
    margin: 0;
    font-size: clamp(12px, 3.35vw, 14px);
    line-height: 1.55;
  }

  #career .career-slide__detail p,
  #career .career-slide__detail ul { margin-block: 0; }
  #career .career-slide__roles,
  #career .career-slide__scope,
  #career .career-slide__projects,
  #career .career-slide__phases,
  #career .career-slide__destinations { display: grid; gap: 5px; }
  #career .career-slide__role { display: grid; gap: 2px; }
  #career .career-slide__role-title,
  #career .career-slide__phase-title { font-weight: 700; }
  #career .career-slide__overlap { color: var(--burgundy); font-size: .9em; }

  #career .career-slide > .career-slide__photo {
    grid-column: 1 / -1;
    grid-row: 4;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(106px, 28vw, 145px);
    min-height: 0;
    margin: clamp(8px, 2.5vw, 14px) 0 0;
    overflow: hidden;
    border-radius: clamp(12px, 3.5vw, 18px);
    background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(239,230,220,.3));
  }
  #career .career-slide__photo::before { content: none; }
  #career .career-slide__photo img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    opacity: 1;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #career .career__rail {
    position: static;
    inset: auto;
    margin-block-start: clamp(20px, 5vw, 30px);
  }
  #career .career__credentials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    min-height: 0;
    gap: 0;
  }
  #career .career__credentials > .career__credentials-head {
    grid-column: 1 / -1;
    min-height: 48px;
    justify-content: center;
  }
  #career .career__credentials > .career__credential {
    min-width: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 8px;
  }
  #career .career__credentials > .career__credential:nth-child(even) { border-inline-start: 1px solid var(--line-paper); }
  #career .career__credentials > .career__credential:nth-last-child(-n + 2) { border-block-start: 1px solid var(--line-paper); }
}

/* Mobile hero art direction · heromobile-ref.png
   The supplied portrait remains the only raster. This layer reproduces the
   reference composition with live HTML type and controls: left text-safe
   column, warm dark scrim, compact burgundy CTA and a quiet scroll cue. */
@media (max-width: 899px) {
  #top.hero,
  .js #top.hero {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }

  #top .hero__stage,
  .js #top .hero__stage {
    position: relative;
    inset: auto;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }

  #top .hero__img,
  #top .hero__img picture,
  #top .hero__img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  #top .hero__img img {
    object-fit: cover;
    object-position: left top;
  }

  #top .hero__stage::after {
    z-index: 1;
    inset: 0;
    height: auto;
    opacity: 1;
    background:
      linear-gradient(90deg, rgba(12, 7, 5, .72) 0%, rgba(20, 11, 8, .38) 46%, rgba(10, 6, 5, .08) 100%),
      linear-gradient(0deg, rgba(7, 4, 4, .82) 0%, rgba(10, 6, 5, .16) 38%, rgba(10, 6, 5, .12) 100%);
  }

  #top .hero__copy {
    inset: clamp(116px, 14.2vh, 196px) auto auto clamp(22px, 7vw, 60px);
    z-index: 2;
    width: min(86%, 620px);
    max-width: calc(100% - clamp(44px, 14vw, 120px));
    padding: 0;
    transform: none !important;
    direction: rtl;
    text-align: left;
  }

  #top .hero__kicker {
    margin: 0;
    color: #f0cf9d;
    font-size: clamp(16px, 4.6vw, 25px);
    font-weight: 400;
    line-height: 1.35;
  }

  #top .hero__kicker-rule {
    width: clamp(64px, 20vw, 124px);
    height: 3px;
    margin-block: clamp(12px, 3.4vw, 20px) clamp(8px, 2vw, 14px);
    /* The copy block stays `direction: rtl` for its Arabic, so a narrow block
       box would settle on the inline start - the physical RIGHT - and the
       crimson rule would leave the left text-safe column the reference builds
       the composition on. An auto inline-start margin pulls it physically
       left, under the kicker, without touching the copy's direction. */
    margin-inline: auto 0;
    background: #d33367;
  }

  #top .hero__name {
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 9vw, 68px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.06em;
    white-space: normal;
  }

  #top .hero__sub {
    margin-block-start: clamp(16px, 4.4vw, 28px);
    gap: clamp(22px, 6vw, 34px);
    /* Column flex in an RTL copy block: the cross axis runs right-to-left, so
       `flex-start` is the physical RIGHT and pushed the taxonomy and the CTA
       across the frame onto the portrait's face at 390px and 834px. The
       cross END is the physical left safe column the reference uses. Direction
       is deliberately NOT flipped here - the eyebrow's dotted Arabic taxonomy
       and the CTA's label + left arrow keep their own RTL reading order. */
    align-items: flex-end;
  }

  #top .hero__eyebrow {
    max-width: 100%;
    color: #edc993;
    font-size: clamp(14px, 3.9vw, 21px);
    line-height: 1.55;
    white-space: nowrap;
  }

  #top .hero__dot { color: #d33367; }

  #top .hero__action {
    /* `.hero__action` states its own `align-self: flex-start`, which outranks
       the container's alignment, so the CTA has to be pulled to the same
       physical left edge as the taxonomy explicitly. */
    align-self: flex-end;
    min-height: 44px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 76, 126, .8);
    border-radius: 999px;
    background: linear-gradient(135deg, #b41048 0%, #710d31 100%);
    box-shadow: 0 12px 28px rgba(82, 4, 30, .3);
    color: #fff;
    font-size: clamp(13px, 3.6vw, 19px);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  #top .hero__action:hover,
  #top .hero__action:focus-visible {
    border-color: rgba(255, 131, 163, .95);
    background: linear-gradient(135deg, #c01854 0%, #85113b 100%);
    box-shadow: 0 14px 34px rgba(82, 4, 30, .42);
  }

  #top.hero::before {
    content: 'اسحب للأسفل';
    position: absolute;
    inset: auto 0 clamp(82px, 10vh, 112px);
    z-index: 3;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    pointer-events: none;
  }

  #top.hero::after {
    content: '';
    position: absolute;
    inset: auto auto clamp(28px, 5vh, 52px) 50%;
    z-index: 3;
    width: 1px;
    height: clamp(38px, 7vh, 58px);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 calc(clamp(38px, 7vh, 58px) - 1px) 0 -0.5px rgba(255, 255, 255, .9);
    pointer-events: none;
  }
}

@media (max-width: 389px) {
  #top .hero__copy { inset-inline-start: 18px; max-width: calc(100% - 36px); }
  #top .hero__name { font-size: clamp(39px, 10.8vw, 46px); }
  #top .hero__eyebrow { font-size: 13px; }
  #top .hero__action { font-size: 14px; padding-inline: 14px; }
}

/* Navigation state contract · desktop expands, mobile menu stays tap-only. */
@media (min-width: 900px) {
  .navbar__inner,
  .navbar.is-stuck .navbar__inner {
    height: 63px;
    min-height: 63px;
  }

  .navbar:not(.is-expanded) .navbar__inner {
    width: 63px;
    height: 63px;
    min-height: 63px;
    padding-inline: 0;
    border-radius: 50%;
  }

  .navbar.is-expanded .navbar__inner {
    border-radius: 999px;
  }
}

@media (max-width: 899px) {
  .navbar,
  .navbar.is-stuck {
    padding: 8px 12px 0;
  }

  .navbar__inner,
  .navbar:not(.is-expanded) .navbar__inner,
  .navbar.is-expanded .navbar__inner {
    width: 100%;
    height: 54px;
    min-height: 54px;
    padding-inline: 10px;
    grid-template-columns: 44px minmax(0, 1fr) 46px;
    gap: 6px;
    border-radius: 15px;
  }

  .navbar:not(.is-expanded) .navbar__brand,
  .navbar.is-expanded .navbar__brand {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* Inside the hero, only the two controls float over the photograph. */
  .navbar:not(.is-past-hero) .navbar__inner {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .navbar:not(.is-past-hero) .navbar__logo-light { display: block; }
  .navbar:not(.is-past-hero) .navbar__logo-dark { display: none; }
  .navbar:not(.is-past-hero) .navbar__menu-toggle { color: rgba(255, 255, 255, .94); }

  /* Once the hero is behind the visitor, the same controls receive the
     contextual light/dark masthead surface. */
  .navbar.is-past-hero .navbar__inner {
    background: rgba(11, 9, 8, .91);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px) saturate(120%);
  }

  .navbar.is-past-hero.on-light .navbar__inner {
    background: linear-gradient(180deg, rgba(255, 252, 247, .70) 0%, rgba(242, 237, 229, .58) 100%);
    backdrop-filter: blur(22px) saturate(158%);
    -webkit-backdrop-filter: blur(22px) saturate(158%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .6),
      inset 0 0 0 1px rgba(255, 255, 255, .36),
      0 10px 26px -18px rgba(82, 58, 45, .2);
  }

  /* Neither scroll nor desktop expansion may open the mobile menu. */
  .navbar:not(.is-expanded) .nav,
  .navbar.is-expanded .nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
  }

  .navbar.is-menu-open .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

@media (max-width: 639px) {
  .navbar,
  .navbar.is-stuck { padding-inline: 8px; }

  .navbar__inner,
  .navbar:not(.is-expanded) .navbar__inner,
  .navbar.is-expanded .navbar__inner {
    padding-inline: 7px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 4px;
  }
}

/* Below 768px the handheld reset drops every card child out of positioning
   (`#career .career-slide > *  { position: static }`), which would leave the
   library's absolutely-placed image resolving its box against the page rather
   than against its own cell. The cell is given back its positioning for this
   one state, so the clip stays registered on the photograph at handheld width
   exactly as it is on desktop. Nothing else about the handheld card changes. */
@media (max-width: 767px) {
  #career .career-slide[data-career-state="qatariat"] > .career-slide__photo {
    position: relative;
  }
}

/* ══ Contact → footer boundary · ONE quiet dark rule ══════════════════════
   The contact band (.closing__invitation) and the footer identity band
   (.closing__top) are siblings inside the closing chapter's single .shell,
   so a border declared on .closing__top inherits the shell's measure and its
   responsive gutters for free: no extra markup, no viewport-wide bleed, and
   nothing to keep in sync when the gutters change.

   Earlier layers deliberately zero every border at this boundary - the base
   `.closing__invitation` block-end hairline is cancelled by
   `#contact .closing__invitation { border-block-end: 0 }`, and
   `#contact .closing__top { border: 0 }` clears the footer band - so this
   rule is declared last in the file and matched on #contact to land after
   both at equal specificity.

   Drawn ONLY on the footer band's block-start, never also on the
   invitation's block-end, so the boundary cannot render twice.

   Colour is --ink-deep (#0b0908), the darkest ink token, one step under the
   closing surface (--surface-immersive, #100d0c): a shadow hairline rather
   than an ornament, and not pure black. Border only - no padding, margin,
   grid or flow property is touched, so every existing contact and footer
   measurement survives unchanged at all breakpoints. */
#contact .closing__top {
  border-block-start: 1px solid var(--ink-deep);
}

/* ══ Section intro actions · one position, one arrow language ═════════════
   The writing archive and books library are equivalent continuation links.
   Both now live immediately below their section summary, aligned to the
   Arabic reading edge, with the same spacing, type, underline and drawn
   arrow. This final layer also retires the books header's former side-column
   placement without changing either chapter's title lockup. */
:root {
  --section-summary-action-gap: clamp(16px, 2vh, 24px);
}

#thinking .writing-editorial__masthead,
#knowledge .books-section__head {
  display: block;
}

#thinking .section-intro-action,
#knowledge .section-intro-action {
  inline-size: fit-content;
  margin-block-start: var(--section-summary-action-gap);
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#thinking .section-intro-action__link,
#knowledge .section-intro-action__link {
  inline-size: fit-content;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: var(--weight-action);
  color: var(--burgundy);
  border-block-end: 1px solid rgba(138, 21, 56, .4);
}

#knowledge .books-section__note.section-intro-action {
  grid-column: auto;
  grid-row: auto;
  align-items: center;
  padding: 0;
  gap: 0;
}

#thinking .section-intro-action__link .journal__link-arrow,
#knowledge .section-intro-action__link .journal__link-arrow {
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-expressive);
}

#thinking .section-intro-action__link:hover .journal__link-arrow,
#thinking .section-intro-action__link:focus-visible .journal__link-arrow,
#knowledge .section-intro-action__link:hover .journal__link-arrow,
#knowledge .section-intro-action__link:focus-visible .journal__link-arrow {
  transform: translateX(-5px);
}

@media (prefers-reduced-motion: reduce) {
  #thinking .section-intro-action__link .journal__link-arrow,
  #thinking .section-intro-action__link:hover .journal__link-arrow,
  #thinking .section-intro-action__link:focus-visible .journal__link-arrow,
  #knowledge .section-intro-action__link .journal__link-arrow,
  #knowledge .section-intro-action__link:hover .journal__link-arrow,
  #knowledge .section-intro-action__link:focus-visible .journal__link-arrow {
    transition: none;
    transform: none;
  }
}

/* ══ Primary action contract · the navigation contact pill is canonical ══
   Icon-only controls and editorial text links keep their own affordances.
   Every filled, labelled primary action shares the navigation contact
   button's pill silhouette, burgundy gradient, edge and elevation. Existing
   component widths and responsive placement remain untouched. */
:root {
  --primary-action-radius: var(--radius-pill);
  --primary-action-fill: linear-gradient(135deg, var(--chair-burgundy) 0%, var(--chair-burgundy-deep) 100%);
}

#top .hero__action,
#media .video-archive__link,
#contact .contact-form__submit {
  border: 0;
  border-radius: var(--primary-action-radius);
  background: var(--primary-action-fill);
  box-shadow: var(--shadow-action);
  color: var(--paper-hi);
}

#top .hero__action:hover,
#top .hero__action:focus-visible,
#media .video-archive__link:hover,
#media .video-archive__link:focus-visible,
#contact .contact-form__submit:hover,
#contact .contact-form__submit:focus-visible {
  background: var(--primary-action-fill);
  box-shadow: var(--shadow-action-hover);
  color: var(--paper-hi);
}

/* ══ Mobile qualifications · one title row, four equal credentials ═══════
   Five narrow columns forced the enlarged heading into the first credential
   at 390px. On handhelds the title becomes a centred full-width row and the
   four qualifications share two equal columns. The strip stays in normal
   flow below the six Career states and no photograph is covered. */
@media (max-width: 767px) {
  #career .career__credentials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    padding: clamp(14px, 3.6vw, 20px);
    border-radius: clamp(18px, 5vw, 24px);
  }

  #career .career__credentials > li,
  #career .career__credentials > li:first-child,
  #career .career__credentials > li:last-child {
    min-width: 0;
    padding: clamp(12px, 3.2vw, 16px) clamp(8px, 2.6vw, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0;
  }

  #career .career__credentials > .career__credentials-head {
    grid-column: 1 / -1;
    min-height: 48px;
    flex-direction: row;
    gap: 10px;
    border-block-end: 1px solid var(--line-paper);
  }

  #career .career__credentials > .career__credential:nth-child(even) {
    border-inline-start: 1px solid var(--line-paper);
  }

  #career .career__credentials > .career__credential:nth-last-child(-n + 2) {
    border-block-start: 1px solid var(--line-paper);
  }
}