/* mebarez.com
   Design: "dramatic" (awesome-design-skills) under taste-skill rules, 3D and motion per web-3d-motion.
   - Dark only: the stage-light concept needs a dark room. Light tokens are kept under [data-theme="light"]
     for a future toggle, but nothing sets that attribute today.
   - One accent (rose). One corner radius (--radius, 8px) for every surface, button and tag; the only exception is the round video play control.
   - Type: Outfit 400/900 + JetBrains Mono for dates and labels + Instrument Serif italic for accent words. Self-hosted.
   - Logical properties (inline/block) so the Arabic version can reuse this file with dir="rtl".
   z-index scale: canvases -1/1 (inside their section), band 3, HUD 9, header 10, grain 20, skip link 30,
   language chooser 40, curtain 50, cursor 60 (above the chooser and the curtain, so it never vanishes). */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* Instrument Serif (OFL), italic only: the accent words (<em>) in titles and the manifesto, like an editorial
   magazine mixing a serif into a bold grotesk. Arabic has no italic, so :lang(ar) em stays in the Arabic face. */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* dark (brand) */
  --bg: #09090b;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --text: #fafafa;
  --text-2: #d4d4d8;
  --muted: #a1a1aa;
  --line: #27272a;
  --line-strong: #3f3f46;
  --accent: #f43f5e;
  --accent-text: #fb7185;
  --btn: #be123c;
  --btn-hover: #9f1239;
  --on-btn: #fafafa;
  --spot: rgb(244 63 94 / 0.16);
  --spot-soft: rgb(244 63 94 / 0.08);
  --grain-opacity: 0.05;
  --slot-stripe: rgb(255 255 255 / 0.035);

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 8px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --section-pad: clamp(72px, 10vw, 136px);
}

/* Not used today (site is dark only); kept so a theme toggle can switch with data-theme="light". */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa;
  --surface: #f1f1f3;
  --surface-2: #e9e9ec;
  --text: #09090b;
  --text-2: #3f3f46;
  --muted: #52525b;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --accent: #e11d48;
  --accent-text: #be123c;
  --spot: rgb(225 29 72 / 0.10);
  --spot-soft: rgb(225 29 72 / 0.05);
  --grain-opacity: 0.03;
  --slot-stripe: rgb(0 0 0 / 0.035);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(16px, 0.3vw + 15px, 18px);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Film grain: fixed, pointer-events none, never on a scrolling element. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  margin: 0;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
figure { margin: 0; }
img { display: block; max-inline-size: 100%; block-size: auto; }
a { color: inherit; text-underline-offset: 0.2em; }

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

.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.muted { color: var(--muted); }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  flex: none;
  inline-size: 1.15em;
  block-size: 1.15em;
  fill: currentColor;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -100px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 12px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-sm { min-block-size: 40px; padding: 8px 16px; font-size: 0.9375rem; }
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface); border-color: var(--muted); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: rgb(9 9 11 / 0.82);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  block-size: var(--header-h);
}

.wordmark {
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 28px; list-style: none; }
.site-nav a {
  position: relative;
  padding-block: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: var(--text); }
.site-nav a[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Sound effects on/off (assets/sound.js shows it). Speaker or crossed-out speaker, from aria-pressed. */
.sound-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.sound-toggle[hidden] { display: none; }
.sound-toggle:hover { color: var(--text); border-color: var(--muted); background: var(--surface); }
.sound-toggle .icon { inline-size: 20px; block-size: 20px; }
.sound-toggle[aria-pressed="true"] .i-off,
.sound-toggle[aria-pressed="false"] .i-on { display: none; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .header-inner > .btn { margin-inline-start: auto; }
  .sound-toggle { margin-inline-start: auto; }
  .sound-toggle:not([hidden]) + .btn { margin-inline-start: 0; }
}
@media (max-width: 480px) {
  .header-inner { gap: 10px; }
}
/* Small phones: name, sound button and "WhatsApp me" on one line without side scroll. */
@media (max-width: 400px) {
  .header-inner { gap: 8px; }
  .wordmark { font-size: 1rem; }
  .sound-toggle { inline-size: 36px; block-size: 36px; }
  .header-inner > .btn-sm { gap: 6px; padding-inline: 12px; }
}
@media (max-width: 350px) {
  .header-inner > .btn-sm .icon { display: none; }
}
/* Phones: wordmark, language switch and "WhatsApp me" share one row without side scroll (the sound button, useless on
   touch, steps out; the Arabic label is longer, so its icon goes too). */
@media (max-width: 440px) {
  .header-inner { gap: 8px; }
  .wordmark { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
  .header-inner > .btn-sm { gap: 6px; padding-inline: 12px; }
  .lang-switch { min-inline-size: 36px; padding-inline: 8px; }
  .sound-toggle { display: none !important; }
  .header-inner > .btn { margin-inline-start: auto; }
  :root:lang(ar) .header-inner > .btn-sm .icon { display: none; }
}

/* ---------- Hero ----------
   ON AIR (docs/redesign-on-air.md): the name huge across the stage, Shihab standing in front of it in the key light,
   a TV-style lower third on one side and the pitch on the other. Stacking inside .hero (isolated):
   name 0, WebGL stage lights + rim-lit portrait 1 (.hero-stage, assets/3d/hero-lights.js), portrait img 1, copy 2. */

.hero {
  position: relative;
  isolation: isolate;
  /* The portrait's light and the giant name reach past the edges; never let them widen the page */
  overflow: clip;
}
.hero::before {
  /* stage spotlight pooled behind him */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 58% at 50% 46%, var(--spot), transparent 72%),
    radial-gradient(60% 30% at 50% 100%, rgb(244 63 94 / 0.07), transparent 70%);
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-inner {
  --portrait-h: min(66svh, 44vw, 760px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* The name's row grows rather than letting a taller name (Arabic) run into the caption row. */
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  column-gap: clamp(20px, 3vw, 48px);
  min-block-size: calc(100svh - var(--header-h));
  max-inline-size: 1680px;
  margin-inline: auto;
  padding: clamp(16px, 2.5vh, 32px) var(--gutter) clamp(20px, 4vh, 44px);
}

.hero-role {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* The red tally dot of a camera that is recording (also in the HUD). */
.rec-dot {
  flex: none;
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(244 63 94 / 0.8);
}

/* The name: two lines across the whole stage, first line to the start edge, second to the end edge. */
.hero-name {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 0;
  display: grid;
  margin-block: clamp(4px, 1vh, 12px) 0;
  font-size: clamp(4.25rem, 16.2vw, 18.5rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  /* Letters fade toward the floor so the figure in front reads first */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, rgb(0 0 0 / 0.42) 100%);
  mask-image: linear-gradient(to bottom, #000 0 52%, rgb(0 0 0 / 0.42) 100%);
  /* The fade mask covers this box only: room past the first and last letters so their edges are not cut. */
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}
.name-line { display: block; }
/* Arabic letters are wider and need taller lines (dots and descenders): a smaller size, normal spacing. */
/* Arabic: the two words of the name side by side at the same height, close together, and Shihab in the middle between
   them (his request): شهاب on the right of his head, مبارز on the left. The row sits at his head's height. */
:root:lang(ar) .hero-name {
  --name-gap: clamp(150px, 16vw, 290px);
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: var(--name-gap);
  margin-block-start: max(0px, calc(100svh - var(--header-h) - 0.86 * var(--portrait-h) - 8rem));
  font-family: "Aref Ruqaa", "Readex Pro", var(--font);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 11rem);
  line-height: 1.02;
}
:root:lang(ar) .hero-name .word { padding-block: 0.08em 0.36em; margin-block: -0.08em -0.36em; padding-inline: 0.3em; margin-inline: -0.3em; }
/* Ruqaa's swashes reach well past the letters (the tail of the zay, the sweep of the sheen): more room for the mask. */
:root:lang(ar) .hero-name { padding-inline: 0.3em; margin-inline: -0.3em; }
@media (max-width: 1023px) {
  /* Tablets and phones: the same row, smaller, and his head comes up between the two words. */
  :root:lang(ar) .hero-name { --name-gap: 30vw; margin-block-start: 18px; font-size: clamp(2.75rem, 13vw, 7rem); }
  :root:lang(ar) .hero-portrait { margin-block-start: calc(-0.95 * clamp(2.75rem, 13vw, 7rem) - 7vw); }
}
.name-first { justify-self: start; }
.name-last { justify-self: end; margin-block-start: -0.02em; }

/* Kinetic name: each letter rises out of a mask, then a band of light passes across the name once.
   The mask only clips top and bottom (the rise); sideways the letters are free, so the last letter of each word is
   never cut. Older browsers without overflow: clip keep the hidden mask with a little side padding. */
.hero-name .word {
  display: inline-block;
  overflow: hidden;
  padding-block: 0.04em 0.1em;
  margin-block: -0.04em -0.1em;
  padding-inline: 0.04em 0.1em;
  margin-inline: -0.04em -0.1em;
  vertical-align: top;
}
@supports (overflow: clip) {
  .hero-name .word { overflow: visible; overflow-y: clip; }
}
.hero-name .ch { display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-name .ch {
    color: transparent;
    background: linear-gradient(100deg, var(--text) 0 42%, #ffe4e6 48%, var(--accent-text) 50%, #ffe4e6 52%, var(--text) 58% 100%);
    background-size: 320% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* Portrait: stands in front of the name, on the bottom edge of the stage. */
.hero-portrait {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: center;
  position: relative;
  z-index: 1;
  block-size: var(--portrait-h);
  aspect-ratio: 1023 / 1197;
  margin-block-end: calc(-1 * clamp(20px, 4vh, 44px));
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.hero-portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Cut-out portrait: no frame, he stands on the stage in the key light, with a soft rose rim and a grounding shadow.
   The empty slot keeps its frame. */
.hero-portrait.is-cutout:not(.is-empty) { overflow: visible; border-radius: 0; background: none; }
.hero-portrait.is-cutout img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 0 26px rgb(244 63 94 / 0.22)) drop-shadow(0 26px 28px rgb(0 0 0 / 0.55));
  transition: opacity 0.9s var(--ease);
}
/* Waist-up photo (Omani dress): it fades out at the bottom, so a soft glow sits behind his head and shoulders instead
   of a floor light, where the key light lands. */
.hero-portrait.is-cutout:not(.is-empty)::before {
  content: "";
  position: absolute;
  inset: 2% 6% 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03) 60%, transparent);
  pointer-events: none;
}
/* The hero's light ends softly above the band instead of on a hard line. */
.hero-stage .stage-canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, #000 90%, transparent);
}
/* Lights up on the host: with 3D, the stage (name and figure, not the copy) waits in a dimmed room; the veil lifts as
   hero-lights.js switches the lamps on (.has-stage). The keyframe is the safety net if the scene never starts. */
@media (prefers-reduced-motion: no-preference) {
  .webgl .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgb(9 9 11 / 0.62);
    animation: veil-off 0.6s var(--ease) 2.6s both;
  }
  .webgl .hero.has-stage::after { animation: none; opacity: 0; transition: opacity 1.1s var(--ease) 0.3s; }
}
@keyframes veil-off { to { opacity: 0; } }
/* WebGL draws the portrait (with a rim light that follows the cursor) once it is ready; the img keeps the box. */
.hero.has-3d-portrait .hero-portrait img { opacity: 0; }

/* Lower third: a TV caption under the host. Rose bar, the title, the five services. */
.lower-third {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  position: relative;
  z-index: 2;
  max-inline-size: 30rem;
  padding-inline-start: clamp(14px, 1.4vw, 20px);
  border-inline-start: 3px solid var(--accent);
}
.hero-position {
  font-size: clamp(1.75rem, 1.9vw + 0.9rem, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.hero-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 16px;
  list-style: none;
}
.hero-subs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 34px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(9 9 11 / 0.55);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text-2);
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hero-subs a:hover { border-color: var(--accent); color: var(--text); background: rgb(42 11 20); background: color-mix(in srgb, var(--btn) 18%, var(--bg)); }

.hero-pitch {
  grid-column: 3;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: end;
  max-inline-size: 26rem;
  text-align: end;
}
.hero-lead {
  max-inline-size: 22ch;
  color: var(--text-2);
  font-size: clamp(1.125rem, 0.9vw + 0.8rem, 1.5rem);
  line-height: 1.3;
  text-shadow: 0 1px 24px rgb(9 9 11 / 0.7);
}
.hero-lead .hl { position: relative; color: var(--text); white-space: nowrap; }
.hero-lead .hl::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.02em;
  block-size: 0.09em;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left;
}
[dir="rtl"] .hero-lead .hl::after { transform-origin: right; }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-block-start: 22px;
}

/* Tablets and phones: name on top (big), the portrait in front of its second line, then the caption and the pitch. */
@media (max-width: 1023px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-block-size: 0;
    padding-block-end: clamp(40px, 7vw, 64px);
  }
  .hero-role, .hero-name, .hero-portrait, .lower-third, .hero-pitch { grid-column: 1; grid-row: auto; }
  .hero-name { font-size: clamp(3.5rem, 18.6vw, 13rem); margin-block-start: 18px; }
  .hero-portrait {
    block-size: auto;
    inline-size: min(78vw, 420px);
    margin-block: calc(-0.42 * clamp(3.5rem, 18.6vw, 13rem)) 0;
  }
  .lower-third { margin-block-start: 8px; max-inline-size: none; }
  .hero-pitch { justify-self: stretch; justify-items: start; max-inline-size: none; margin-block-start: 28px; text-align: start; }
  .actions { justify-content: flex-start; }
}

/* ---------- Empty media slots (until the files are added) ---------- */

[data-media].is-empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--slot-stripe) 14px 15px),
    var(--surface);
}
[data-media].is-empty::after {
  content: attr(data-media);
  max-inline-size: 85%;
  padding: 6px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: center;
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section-pad) calc(var(--section-pad) * 1.08); }

.mask-line {
  display: block;
  overflow: hidden;
  padding-block-end: 0.12em;
  margin-block-end: -0.12em;
}
.mask-line > span { display: inline-block; }

.section-title {
  margin-block-end: clamp(32px, 4.5vw, 64px);
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing: -0.04em;
}

.section-note {
  margin-block: calc(clamp(32px, 4.5vw, 64px) * -0.55) clamp(32px, 4.5vw, 56px);
  color: var(--muted);
  font-size: 1rem;
}

/* What I do: the LED stage (assets/3d/led-stage.js, web-3d-motion). Without WebGL: a plain two-column list.
   With WebGL: a sticky stage (a ring of curved screens with Shihab's photos) beside tall steps; the step in focus is
   bright and its screen turns to the front. On wide screens the stage bleeds to the edge of the window. */

.story-section { overflow-x: clip; }
.story-steps { list-style: none; }
.story-stage { display: none; }

.step-body { display: grid; gap: 10px; }
.step-n {
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.step h3 { font-size: clamp(1.75rem, 3.2vw + 0.5rem, 3.25rem); letter-spacing: -0.035em; }
.step p { color: var(--text-2); font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem); }
.step-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-block-start: 6px;
  list-style: none;
}
.step-brands li {
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.4;
}

html:not(.webgl) .story-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(32px, 5vw, 72px);
}
html:not(.webgl) .step { padding-block-start: 24px; border-block-start: 1px solid var(--line); }
/* The 3D stage did not start in time (site.js adds .story-flat): the plain list, as without WebGL. */
.webgl .story-flat .story { display: block; }
.webgl .story-flat .story-stage { display: none; }
.webgl .story-flat .story-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 72px); }
.webgl .story-flat .step { display: block; min-block-size: 0; padding-block: 24px 0; border-block-start: 1px solid var(--line); opacity: 1; }
@media (max-width: 860px) { .webgl .story-flat .story-steps { grid-template-columns: 1fr; } .webgl .story-flat .step-body { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }

.webgl .story {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(24px, 3vw, 48px);
}
.webgl .story-stage {
  display: block;
  position: sticky;
  inset-block-start: var(--header-h);
  block-size: calc(100svh - var(--header-h));
  margin-inline-start: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--wrap)) / 2)));
}
.webgl .step {
  display: flex;
  align-items: center;
  min-block-size: 78vh;
}
.webgl .step:first-child { min-block-size: 62vh; align-items: flex-start; padding-block-start: 10vh; }
.webgl .step:last-child { min-block-size: 70vh; }
/* Steps not in focus are dimmed, but stay readable: 0.58 keeps their text above the 4.5:1 contrast minimum (WCAG AA). */
.webgl .has-stage .step :is(h3, p, .step-brands) { transition: opacity 0.6s var(--ease); }
.webgl .has-stage .step:not(.is-active) :is(h3, p, .step-brands) { opacity: 0.6; }
/* The last step is a full screen tall, so the stage stays pinned (not half scrolled away) while step 5 is centred. */
.webgl .has-stage .step:last-child { min-block-size: 100svh; }
/* The stage's light fades out toward the text column and at the top and bottom instead of ending in a hard edge. */
.webgl .story-stage .stage-canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent), linear-gradient(to left, transparent, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent), linear-gradient(to left, transparent, #000 14%);
  mask-composite: intersect;
}
[dir="rtl"].webgl .story-stage .stage-canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent), linear-gradient(to right, transparent, #000 14%);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent), linear-gradient(to right, transparent, #000 14%);
}
.webgl .has-stage .step.is-active .step-n { color: var(--accent); }

@media (max-width: 860px) {
  html:not(.webgl) .story-steps { grid-template-columns: 1fr; }
  .webgl .story { grid-template-columns: 1fr; gap: 0; }
  /* The stage stays on top like a monitor; the steps slide up under it and are read in the space below. */
  .webgl .story-stage {
    block-size: 46svh;
    inset-block-start: var(--header-h);
    z-index: 2;
    margin-inline: calc(-1 * var(--gutter));
    background: linear-gradient(to bottom, var(--bg) 0 94%, transparent);
  }
  .webgl .story-steps { position: relative; z-index: 1; }
  .webgl .step,
  .webgl .step:first-child,
  .webgl .step:last-child { min-block-size: 70vh; align-items: flex-end; padding-block: 0 5vh; }
  .webgl .has-stage .step:last-child { min-block-size: 70vh; }
  .webgl .story-stage .stage-canvas,
  [dir="rtl"].webgl .story-stage .stage-canvas {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }
  .webgl .step-body {
    padding: 20px;
    border-radius: var(--radius);
    background: rgb(9 9 11 / 0.74);
    background: color-mix(in srgb, var(--bg) 74%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Canvases (shared by the hero and the story) */
.stage-canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.stage-canvas.is-ready { opacity: 1; }

/* Accent words: one word or phrase per title (and in the manifesto) in Instrument Serif italic, rose.
   Arabic has no italic, so there it keeps the Arabic face and only takes the colour. */
.section-title em,
.contact-title em,
.hero-position em,
.about-lead em {
  padding-inline-end: 0.06em;
  color: var(--accent-text);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.contact-title em { font-size: 1.12em; line-height: 0.9; }
.hero-position em { font-size: 1.12em; }
:root:lang(ar) .section-title em,
:root:lang(ar) .contact-title em,
:root:lang(ar) .hero-position em,
:root:lang(ar) .about-lead em { padding: 0; font-family: inherit; font-size: inherit; font-style: normal; font-weight: inherit; }

/* About: the manifesto, big, its words light up one by one as it scrolls past (assets/motion.js sets --lit 0..1 on
   each .w; without it every word is lit). The body sits offset to the end edge. */
.about-lead {
  max-inline-size: 22ch;
  font-size: clamp(2rem, 4.7vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.about-lead .w { opacity: calc(0.18 + 0.82 * var(--lit, 1)); transition: opacity 0.2s linear; }
:root:lang(ar) .about-lead { line-height: 1.32; }
/* Teleprompter: with smooth scrolling (motion allowed) on wider screens the manifesto holds in place while its words
   light up across about two screens of scrolling. Without it the paragraph simply scrolls, fully lit. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) and (min-height: 620px) {
  .lenis .prompter { block-size: 190svh; }
  .lenis .prompter .about-lead { position: sticky; inset-block-start: calc(var(--header-h) + 12svh); }
}
.about-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  max-inline-size: 760px;
  margin-block-start: clamp(32px, 4vw, 56px);
  margin-inline-start: auto;
  color: var(--text-2);
}
@media (max-width: 767px) {
  .about-body { grid-template-columns: 1fr; margin-inline-start: 0; }
}

/* Brands */

.logo-groups { display: grid; gap: 8px; }
/* A soft light follows the cursor across the wall (site.js sets --sx/--sy on fine pointers). */
.logo-groups[data-spotlight] {
  border-radius: var(--radius);
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, -40%), var(--spot-soft), transparent 70%);
}

/* A studio monitor wall: every brand on its own small screen, each group captioned; the screens power on one after
   another when the group arrives (site.js gives each tile its --n). */
.logo-group {
  display: grid;
  gap: 10px;
  padding-block: 14px;
}
.logo-group h3 {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
}

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 8px;
  list-style: none;
}
.logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 10px;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.logos li:hover {
  background-color: rgb(42 14 22);
  background-color: color-mix(in srgb, var(--btn) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.35);
}
.logos li.has-logo img {
  inline-size: auto;
  max-inline-size: 62%;
  max-block-size: 30px;
  object-fit: contain;
  opacity: 0.78;
  transition: opacity 0.2s var(--ease);
}
.logos li.has-logo:hover img { opacity: 1; }
.logos li.is-compact img { max-block-size: 46px; }

@media (max-width: 767px) {
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Selected work: a case study with results, then one featured piece and two stacked */

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  margin-block-end: clamp(72px, 9vw, 120px);
}
.case-media {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}
.video.case-video { aspect-ratio: 9 / 16; container-type: inline-size; }

/* The post's numbers over the cover, laid out like a Reel: account at the bottom, counts down the side.
   Sizes follow the cover's width (cqi), so it reads the same at 300px on desktop and 180px on phones.
   Each cqi line has a px line before it for browsers without container units (Safari before 16). */
.post-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--text);
  font-weight: 900;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.55);
  background: linear-gradient(to top, rgb(9 9 11 / 0.7), rgb(9 9 11 / 0) 30%);
}
.video.is-empty .post-overlay { display: none; }
.post-account {
  position: absolute;
  inset-inline: 16px 60px;
  inset-inline: 6cqi 22cqi;
  inset-block-end: 16px;
  inset-block-end: 6cqi;
  display: flex;
  align-items: center;
  gap: 8px;
  gap: 3cqi;
  font-size: 14px;
  font-size: clamp(11px, 5.2cqi, 15px);
  letter-spacing: -0.01em;
}
.post-account img {
  flex: none;
  inline-size: 30px;
  inline-size: clamp(24px, 11cqi, 34px);
  block-size: 30px;
  block-size: clamp(24px, 11cqi, 34px);
  padding: 4px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  background: var(--bg);
  object-fit: contain;
}
.post-stats {
  position: absolute;
  inset-inline-end: 11px;
  inset-inline-end: 4cqi;
  inset-block-end: 36px;
  inset-block-end: 13cqi;
  display: grid;
  gap: 14px;
  gap: 5cqi;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-size: clamp(11px, 4.6cqi, 14px);
  text-align: center;
}
.post-stats li { display: grid; justify-items: center; gap: 3px; gap: 1cqi; }
.post-stats .icon {
  inline-size: 26px;
  inline-size: clamp(20px, 10cqi, 30px);
  block-size: 26px;
  block-size: clamp(20px, 10cqi, 30px);
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.5));
}
.post-stats li:first-child .icon { color: var(--accent); }
.case-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-block-end: 14%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.case-photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.case-body h3 { margin-block: 8px 10px; font-size: clamp(1.75rem, 2.6vw + 0.5rem, 2.75rem); letter-spacing: -0.03em; }
.case-story { max-inline-size: 52ch; color: var(--text-2); }
.case-story + .case-story { margin-block-start: 10px; }

/* Stat tiles (dataviz skill): sentence-case label, compact value in text ink, proportional figures. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-block: 28px;
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
}
.stat dd {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.75rem, 2.2vw + 0.75rem, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.stat dt { color: var(--muted); font-size: 0.875rem; line-height: 1.35; }

@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; }
}

/* Two vertical Shorts either side of the widescreen film. The columns are in the videos' proportions
   (9:16 is 9 wide per 16 high, 16:9 is 28.44 wide per 16 high), so all three end at the same height. */
.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 28.44fr) minmax(0, 9fr);
  gap: 48px 24px;
  align-items: start;
}
/* The film comes first in the page (tab order), and sits between the two Shorts on wide screens. */
.work-grid > .work-film { grid-column: 2; grid-row: 1; }
.work-grid > .work-short:nth-child(2) { grid-column: 1; grid-row: 1; }
.work-grid > .work-short:nth-child(3) { grid-column: 3; grid-row: 1; }
.work .video { margin-block-end: 20px; }
.work-short .video { aspect-ratio: 9 / 16; }

.work-brand { color: var(--accent-text); font-size: 0.9375rem; }
.work h3 { margin-block: 6px 8px; font-size: 1.375rem; letter-spacing: -0.02em; }
.work-film h3 { font-size: clamp(1.5rem, 1.6vw + 0.5rem, 2rem); }
.work-short h3 { font-size: 1.125rem; }
.work-role { color: var(--muted); }

/* Tablets and phones: the film on top, full width; the two Shorts side by side below it. */
@media (max-width: 1024px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .work-grid > .work-film,
  .work-grid > .work-short:nth-child(2),
  .work-grid > .work-short:nth-child(3) { grid-column: auto; grid-row: auto; }
  .work-grid > .work-film { grid-column: 1 / -1; }
  .work-short .video { max-inline-size: 320px; }
}

/* Video facade: a cover + play button that swaps in the YouTube/Vimeo iframe on click */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.video > img,
.video iframe,
.video-play {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
.video > img,
.video-play img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.work:hover .video img { transform: scale(1.03); }

/* Tilt toward the cursor with a moving highlight (fine pointers only, set by site.js). */
.video[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
/* Glare only on filled media: empty slots use ::after for their label. */
.video[data-tilt]:not(.is-empty)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--glare, 0);
  background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.16), transparent 60%);
  transition: opacity 0.4s var(--ease);
}
.video[data-tilt]:has(iframe) { transform: none; }
.video[data-tilt]:has(iframe)::after { display: none; }
.video-play { padding: 0; background: none; color: #fafafa; cursor: pointer; }
.play-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  inline-size: 68px;
  block-size: 68px;
  margin: auto;
  border-radius: 50%;
  background: rgb(9 9 11 / 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.play-icon .icon { inline-size: 26px; block-size: 26px; margin-inline-start: 3px; }
.video-play:hover .play-icon { background: var(--btn); transform: scale(1.06); }
.video-play:active .play-icon { transform: scale(0.98); }

/* Stage & press: one wide stage photo (COMEX 2024), then three items of different widths */

.stage-photo {
  position: relative;
  aspect-ratio: 1440 / 719;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.stage-photo img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 38% 50%;   /* keeps him and the podium in frame when phones crop to 4:3 */
}
.stage-photo figcaption,
.event figcaption {
  position: absolute;
  inset-inline-end: clamp(10px, 2vw, 24px);
  inset-block-end: clamp(10px, 2vw, 24px);
  max-inline-size: calc(100% - 20px);
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgb(9 9 11 / 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.4vw + 0.55rem, 0.8125rem);
}
.stage-photo.is-empty figcaption,
.event.is-empty figcaption { display: none; }

.stage-items {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 40px 48px;
  margin-block-start: clamp(40px, 5vw, 64px);
}
.stage-item h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.stage-item p:not(.stage-role) { margin-block-start: 10px; color: var(--text-2); }
.stage-role {
  margin-block-start: 6px;
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.years { margin-block-start: 16px; }
.years div {
  display: flex;
  gap: 16px;
  padding-block: 6px;
}
.years dt { font-family: var(--mono); font-size: 0.875rem; padding-block-start: 2px; }
.years dd { color: var(--text-2); }

/* The whole clipping at its own shape (a phone photo of page 5); click opens it full size to read. */
.clipping {
  position: relative;
  aspect-ratio: 1256 / 569;
  margin-block-end: 20px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.clipping a { display: block; block-size: 100%; cursor: zoom-in; }
.clipping img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Newsprint white, dimmed a touch so it doesn't glare on the dark page */
  filter: brightness(0.9);
  transition: filter 0.3s var(--ease), transform 0.5s var(--ease);
}
.clipping a:hover img, .clipping a:focus-visible img { filter: brightness(1); }
@media (prefers-reduced-motion: no-preference) {
  .clipping a:hover img, .clipping a:focus-visible img { transform: scale(1.02); }
}
/* Keyboard focus: the containers clip their children, so the ring is drawn on the container itself. */
.video:has(> .video-play:focus-visible),
.clipping:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.video-play:focus-visible,
.clipping a:focus-visible { outline: none; }
.video-play:focus-visible .play-icon { background: var(--btn); transform: scale(1.06); }

.stage-also { display: grid; gap: 32px; align-content: start; }

/* At events: a mosaic of different sizes. Desktop: Vodafone large on the left with MG and Oman Arab Bank
   stacked beside it, then the TAS award (portrait) and the Al Hassan team (wide). Each tile crops its photo. */
.events-title { margin-block: clamp(56px, 7vw, 96px) 20px; font-size: 1.5rem; letter-spacing: -0.02em; }
.events {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.event {
  position: relative;
  min-block-size: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.event img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  scale: 1.12;
  transition: scale 0.8s var(--ease);
}
.event-vodafone { grid-column: 1 / span 7; grid-row: span 2; }
.event-mg,
.event-oab { grid-column: 8 / span 5; aspect-ratio: 3 / 2; }
.event-tas { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.event-alhassan { grid-column: 5 / span 8; }
/* Event captions sit top-start, away from the viewfinder's segment label (bottom-end). */
.event figcaption { inset-block: clamp(10px, 2vw, 24px) auto; inset-inline: clamp(10px, 2vw, 24px) auto; }
.event-mg img { object-position: 50% 75%; }
.event-oab img { object-position: 50% 62%; }
.event-tas img { object-position: 50% 60%; }
.event-alhassan img { object-position: 50% 56%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .event:hover img { scale: 1.16; }
}

@media (max-width: 860px) {
  .stage-photo { aspect-ratio: 4 / 3; }
  .stage-items { grid-template-columns: 1fr; }
  .events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .event-vodafone { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1 / 1; }
  .event-mg,
  .event-oab { grid-column: 1 / -1; }
  .event-tas,
  .event-alhassan { grid-column: auto; aspect-ratio: 3 / 4; }
}

/* Experience: current role featured, previous roles in a 2x2 grid, early years condensed */

.role-current {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius);
  background: radial-gradient(80% 120% at 100% 0%, var(--spot), transparent 60%), var(--surface);
}
.role-current[data-spotlight] {
  background:
    radial-gradient(420px circle at var(--sx, 85%) var(--sy, 0%), var(--spot), transparent 70%),
    var(--surface);
}
.role-current h3 { margin-block-start: 12px; font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem); }
.role-current ul { max-inline-size: 62ch; }

.role-when {
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
}
.role h3 { margin-block-start: 8px; font-size: 1.375rem; letter-spacing: -0.02em; }
.role-org { margin-block-start: 4px; color: var(--muted); }
.role ul {
  display: grid;
  gap: 6px;
  margin-block-start: 14px;
  padding-inline-start: 1.1em;
  color: var(--text-2);
}
.role li::marker { color: var(--accent); }

/* Previous roles as a broadcast rundown: the time slot in its own column, a rose tally bar on the row you point at. */
.roles {
  display: grid;
  margin-block: clamp(48px, 6vw, 72px);
  border-block-end: 1px solid var(--line);
}
.roles .role {
  position: relative;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 40px);
  padding-block: 26px;
  border-block-start: 1px solid var(--line);
}
.roles .role > .role-when { grid-row: 1 / span 3; padding-block-start: 6px; }
.roles .role > :not(.role-when) { grid-column: 2; }
.roles .role > h3 { margin-block-start: 0; }
.roles .role::before {
  content: "";
  position: absolute;
  inset-block: 26px;
  inset-inline-start: calc(-1 * clamp(10px, 1.5vw, 18px));
  inline-size: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}
.roles .role:hover::before { transform: none; }

.roles-early {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(32px, 5vw, 72px);
  padding-block-start: 32px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
}
.roles-early h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-block-end: 12px;
  color: var(--text);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.roles-early ul { display: grid; gap: 6px; list-style: none; }

@media (max-width: 767px) {
  .roles-early { grid-template-columns: 1fr; }
  .roles .role { grid-template-columns: 1fr; }
  .roles .role > .role-when { grid-row: auto; padding-block-start: 0; }
  .roles .role > :not(.role-when) { grid-column: 1; }
  .roles .role > h3 { margin-block-start: 8px; }
}

/* Education: two qualifications side by side, certifications as tags */

.edu {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px clamp(32px, 5vw, 72px);
}
.edu h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.edu-main p:not(.role-org) { margin-block-start: 12px; max-inline-size: 56ch; color: var(--text-2); }

.certs { grid-column: 1 / -1; }
.certs h3 { margin-block-end: 16px; font-size: 1.125rem; }
.certs ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.certs li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.certs li span { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }

@media (max-width: 767px) {
  .edu { grid-template-columns: 1fr; }
}

/* Work with me */

.contact {
  position: relative;
  isolation: isolate;
  /* The closing shot: a full screen with the studio sign. */
  display: grid;
  align-content: center;
  min-block-size: calc(100svh - var(--header-h));
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--sx, 15%) var(--sy, 30%), var(--spot), transparent 70%);
  transition: background-position 0.2s;
}

.contact-title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.contact-lead {
  margin-block: 20px clamp(40px, 5vw, 64px);
  color: var(--text-2);
  font-size: clamp(1.125rem, 1vw + 0.8rem, 1.5rem);
}

.contact-links { list-style: none; border-block-end: 1px solid var(--line); }
.contact-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px 20px;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-block-start: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.4vw + 0.8rem, 1.875rem);
  text-decoration: none;
}
.contact-label { font-weight: 900; letter-spacing: -0.02em; }
.contact-value { color: var(--muted); font-size: 0.6em; overflow-wrap: anywhere; }
.contact-primary .contact-label,
.contact-primary > .icon:first-child { color: var(--accent-text); }
.contact-arrow { color: var(--muted); transition: transform 0.25s var(--ease), color 0.2s var(--ease); }
.contact-link:hover .contact-arrow { color: var(--accent); transform: translate(4px, -4px); }
[dir="rtl"] .contact-arrow { transform: scaleX(-1); }
[dir="rtl"] .contact-link:hover .contact-arrow { transform: scaleX(-1) translate(4px, -4px); }
.contact-link:hover .contact-label { color: var(--accent-text); }

@media (max-width: 640px) {
  .contact-link { grid-template-columns: auto minmax(0, 1fr) auto; }
  .contact-value { grid-column: 2; grid-row: 2; }
  .contact-arrow { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- ON AIR layer: tape bands, studio sign, camera viewfinder, cursor, smooth scroll ---------- */

/* Two crossing tape bands with the services, like stage tape, running opposite ways. Without motion.js they loop with
   CSS; motion.js adds .is-driven and moves the tracks itself (faster and skewed while you scroll). */
.band {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  block-size: clamp(150px, 17vw, 270px);
  margin-block: clamp(-36px, -2.5vw, -12px) clamp(-24px, -1.5vw, -8px);
  overflow: clip;
  pointer-events: none;
}
.band-row {
  position: absolute;
  inset-inline: -6%;
  display: flex;
  overflow: hidden;
  padding-block: clamp(10px, 1.1vw, 18px);
}
.band-a {
  z-index: 1;
  background: var(--accent);
  color: #0b0b0d;
  transform: rotate(-3deg);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}
.band-b {
  background: var(--bg);
  border-block: 1px solid var(--line-strong);
  color: var(--text-2);
  transform: rotate(2.2deg);
}
.band-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(16px, 1.8vw, 30px);
  padding-inline-end: clamp(16px, 1.8vw, 30px);
  font-size: clamp(1.375rem, 3.3vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}
.band-b .band-track span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-2);
}
.band-sep {
  flex: none;
  inline-size: 0.3em;
  block-size: 0.3em;
  border-radius: 50%;
  background: currentColor;
}
.band-b .band-sep { background: var(--accent); }
:root:lang(ar) .band-track { font-size: clamp(1.25rem, 2.9vw, 2.875rem); line-height: 1.35; }
@media (prefers-reduced-motion: no-preference) {
  .band-track { animation: band-loop 42s linear infinite; }
  .band-b .band-track { animation-direction: reverse; animation-duration: 50s; }
  .band.is-driven .band-track { animation: none; }
}
@keyframes band-loop { to { transform: translateX(-50%); } }
[dir="rtl"] .band-track { animation-name: band-loop-rtl; }
@keyframes band-loop-rtl { to { transform: translateX(50%); } }

/* Studio "on air" sign in Work with me: unlit glass until the section arrives, then the tube flickers on.
   It glows brighter while a contact link is hovered. Lit from the start without the reveal script. */
.on-air { margin-block-end: clamp(20px, 3vw, 36px); }
.on-air-tube {
  display: inline-block;
  padding: 0.16em 0.42em 0.12em;
  border: clamp(2px, 0.3vw, 4px) solid var(--accent);
  border-radius: var(--radius);
  color: #fff1f2;
  font-size: clamp(2.75rem, 10.5vw, 9.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 0.06em var(--accent), 0 0 0.2em var(--accent), 0 0 0.5em rgb(244 63 94 / 0.55);
  box-shadow: 0 0 0.25em rgb(244 63 94 / 0.45), inset 0 0 0.18em rgb(244 63 94 / 0.35);
  transition: box-shadow 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
:root:lang(ar) .on-air-tube { letter-spacing: normal; }
.reveal-ready .on-air[data-reveal] { opacity: 1; transform: none; }
.reveal-ready .on-air:not(.is-in) .on-air-tube {
  border-color: rgb(244 63 94 / 0.3);
  color: rgb(244 63 94 / 0.38);
  text-shadow: none;
  box-shadow: none;
}
.contact:has(.contact-links a:hover, .contact-links a:focus-visible) .on-air-tube {
  text-shadow: 0 0 0.08em var(--accent), 0 0 0.28em var(--accent), 0 0 0.7em rgb(244 63 94 / 0.8);
  box-shadow: 0 0 0.4em rgb(244 63 94 / 0.65), inset 0 0 0.24em rgb(244 63 94 / 0.5);
}

/* Camera viewfinder over the page: corner marks, REC with a running timecode, the segment on air.
   Decorative only (aria-hidden, no pointer events), desktop sizes only. motion.js updates the numbers. */
.hud {
  position: fixed;
  inset: calc(var(--header-h) + 14px) 16px 16px;
  z-index: 9;
  display: none;
  pointer-events: none;
  color: rgb(250 250 250 / 0.72);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 1100px) and (min-height: 620px) { .js .hud { display: block; } }
@media (max-width: 1499px) {
  .hud-rec,
  .hud-seg { writing-mode: vertical-rl; padding: 6px 4px; }
  .hud .hud-rec { inset: auto auto 24px 0; transform: rotate(180deg); }
  .hud .hud-seg { inset: auto 0 24px auto; }
}
/* With the viewfinder on, the hero's bottom row clears its REC and segment labels. */
@media (min-width: 1100px) and (min-height: 620px) { .hero-inner { padding-block-end: 62px; } .hero-portrait { margin-block-end: -62px; } }
.hud-c {
  position: absolute;
  inline-size: 16px;
  block-size: 16px;
  border: 0 solid rgb(250 250 250 / 0.42);
}
.hud-c.tl { inset-block-start: 0; inset-inline-start: 0; border-block-start-width: 1.5px; border-inline-start-width: 1.5px; }
.hud-c.tr { inset-block-start: 0; inset-inline-end: 0; border-block-start-width: 1.5px; border-inline-end-width: 1.5px; }
.hud-c.bl { inset-block-end: 0; inset-inline-start: 0; border-block-end-width: 1.5px; border-inline-start-width: 1.5px; }
.hud-c.br { inset-block-end: 0; inset-inline-end: 0; border-block-end-width: 1.5px; border-inline-end-width: 1.5px; }
.hud-rec,
.hud-seg {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgb(9 9 11 / 0.45);
}
.hud-rec,
.hud-seg { transition: opacity 0.3s var(--ease), translate 0.3s var(--ease); }
.hud.is-docked .hud-rec,
.hud.is-docked .hud-seg { opacity: 0; translate: 0 8px; }
.hud-rec { inset-block-end: 2px; inset-inline-start: 24px; }
.hud-seg { inset-block-end: 2px; inset-inline-end: 24px; }
.hud-tc { color: rgb(250 250 250 / 0.9); font-variant-numeric: tabular-nums; }
.hud [data-seg-n] { color: var(--accent-text); }
:root:lang(ar) .hud { letter-spacing: normal; }
html.lang-open .hud { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rec-dot { animation: rec-blink 1.6s steps(1, end) infinite; }
}
@keyframes rec-blink { 50% { opacity: 0.2; } }

/* ---------- The rundown (assets/rundown.js) ----------
   Where the visitor is on the page and what is left, as a TV rundown. Built by rundown.js from main > section (nothing
   without JS); decorative (aria-hidden, rows out of the tab order). z 9 like the HUD, under the header.
   Desktop (the viewfinder's sizes): .rundown on the inline-end edge, inside the viewfinder, vertically centred under
   the header. The board leans back in 3D (rotateX + rotateY, the far side toward the content) and swings flat to
   face the viewer on hover, when the rows of the full rundown slide in. On the rail: one tick per section, the
   filled part and passed ticks rose, the playhead (.rundown-head, the only glow) carrying the drum (.rundown-reel, a
   small cylinder of faces turned around X). Above the rail, upright (outside the board), the countdown and the segment
   count (the hero's pitch and buttons sit at the bottom of that edge on laptops, so the clock goes on top). Narrower desktops: the drum keeps
   only the number while the page rests (.is-quiet, set by rundown.js), so its titles never sit over text being read.
   Phones and tablets: .rundown-line under the header and .rundown-pill at the bottom while scrolling. */
.rundown { display: none; }
.rundown-line { display: block; }
.rundown-pill { display: flex; }
@media (min-width: 1100px) and (min-height: 620px) {
  .rundown { display: block; }
  .rundown-line,
  .rundown-pill { display: none; }
  /* The drum says which segment is on air: the viewfinder's own label steps aside (REC and the corners stay). */
  .has-rundown .hud-seg { display: none; }
}
html.lang-open .rundown,
html.lang-open .rundown-line,
html.lang-open .rundown-pill { display: none; }

.rundown {
  --rd-edge: 12px;   /* the track's distance from the viewfinder's inline-end edge */
  --rd-dir: 1;       /* physical direction toward the inline end, for translate */
  position: fixed;
  inset-block-start: calc(27vh + var(--header-h) / 2);
  inset-inline-end: 16px;
  z-index: 9;
  inline-size: 300px;
  block-size: 46vh;
  pointer-events: none;
  /* The eye sits level with the playhead (rundown.js moves --rd-py with it), so the drum it carries never slants. */
  perspective: 900px;
  perspective-origin: calc(100% - var(--rd-edge)) var(--rd-py, 50%);
}
:root[dir="rtl"] .rundown { --rd-dir: -1; perspective-origin: var(--rd-edge) var(--rd-py, 50%); }
/* 8px to 38px from the window edge: clear of overlay scrollbars at the very edge, and of the page's content, which
   never comes closer than 40px on these sizes (the hero's buttons reach that far on short laptop screens). */
.rundown-hit {
  position: absolute;
  inset-block: -76px -14px;
  inset-inline-end: -8px;
  inline-size: 30px;
  pointer-events: auto;
}
.rundown-board {
  position: absolute;
  inset: 0;
  transform-origin: calc(100% - var(--rd-edge)) 50%;
  transform: rotateX(8deg) rotateY(calc(var(--rd-dir) * -22deg));
  transition: transform 0.8s var(--ease) 0.2s;
}
:root[dir="rtl"] .rundown-board { transform-origin: var(--rd-edge) 50%; }
.rundown:hover .rundown-board { transform: none; transition-delay: 0.05s; }
.rundown-plate {
  position: absolute;
  inset-block: -100px -84px;
  inset-inline-end: -16px;
  inline-size: 360px;
  background: linear-gradient(to left, rgb(9 9 11 / 0.94) 0 32%, rgb(9 9 11 / 0.66) 64%, rgb(9 9 11 / 0));
  /* Feathered at the top and bottom too: no edge across the content behind it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease) 0.2s;
}
:root[dir="rtl"] .rundown-plate { background: linear-gradient(to right, rgb(9 9 11 / 0.94) 0 32%, rgb(9 9 11 / 0.66) 64%, rgb(9 9 11 / 0)); }
/* While open, the plate takes the pointer too, so moving between rows keeps the rundown open. */
.rundown:hover .rundown-plate { opacity: 1; pointer-events: auto; transition-delay: 0s; }

.rundown-rail { position: absolute; inset: 0; }
.rundown-track,
.rundown-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--rd-edge);
  inline-size: 1px;
}
.rundown-track { background: rgb(250 250 250 / 0.24); }
.rundown-fill {
  inline-size: 2px;
  margin-inline-end: -0.5px;
  background: var(--accent);
  transform-origin: 50% 0;
  transform: scaleY(0);
}
.rundown-end,
.rundown-tick {
  position: absolute;
  inset-inline-end: calc(var(--rd-edge) - 3px);
  inline-size: 7px;
  block-size: 1px;
  background: rgb(250 250 250 / 0.4);
}
.rundown-end { inset-block-end: 0; }
.rundown-tick {
  inset-block-start: calc(var(--at, 0) * 100%);
  inline-size: 11px;
  transition: background-color 0.3s var(--ease), inline-size 0.4s var(--ease);
}
.rundown-tick.is-past,
.rundown-tick.is-now { background: var(--accent); }
.rundown-tick.is-now { inline-size: 18px; }

/* The playhead: a camera's tally light riding the rail, with a short lead to the drum it carries. */
.rundown-carriage {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  will-change: transform;
}
.rundown-carriage::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(var(--rd-edge) + 7px);
  inline-size: 9px;
  block-size: 1px;
  background: rgb(244 63 94 / 0.6);
  transition: opacity 0.3s var(--ease);
}
.rundown:hover .rundown-carriage::before { opacity: 0; }
.rundown-head {
  position: absolute;
  inset-block-start: -4.5px;
  inset-inline-end: calc(var(--rd-edge) - 4px);
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe4e6 0 22%, var(--accent) 62%);
  box-shadow: 0 0 0 3px rgb(244 63 94 / 0.16), 0 0 14px 2px rgb(244 63 94 / 0.7);
}

/* The drum (also in the pill). rundown.js sets --rd-h (face height), --rd-step (360deg / sections), --rd-r (radius) on
   .rundown-drum, --i on each face and --turn on the reel. The reel sits back by its radius so the front face is at
   its true size. */
.rundown-drum { display: block; perspective: 260px; }
.rundown-reel {
  display: grid;
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--rd-r))) rotateX(var(--turn, 0deg));
}
.rundown-face {
  grid-area: 1 / 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  block-size: var(--rd-h);
  white-space: nowrap;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(calc(var(--i) * var(--rd-step) * -1)) translateZ(var(--rd-r));
  opacity: 0;
}
.is-ready .rundown-reel { transition: transform 0.6s var(--ease); }
.is-ready .rundown-face { transition: opacity 0.45s var(--ease); }
.rundown-face.is-now { opacity: 1; }
.rundown-title {
  color: rgb(250 250 250 / 0.94);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.rundown-n,
.rundown-left,
.rundown-count,
.rundown-pill-n {
  font-family: var(--mono);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rundown-n { color: var(--accent-text); font-size: 11.5px; letter-spacing: 0.04em; }

.rundown-drum-desk {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(var(--rd-edge) + 16px);
  translate: 0 -50%;
  transition: opacity 0.3s var(--ease);
}
/* Title and number each on a dark backing, like the viewfinder's labels: on laptops the drum passes over the page's
   text while it scrolls, and stays readable there. The title's backing fades with it (.is-quiet), the number's stays. */
.rundown-drum-desk .rundown-face { gap: 2px; }
.rundown-drum-desk .rundown-title,
.rundown-drum-desk .rundown-n {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-inline: 7px;
  border-radius: var(--radius);
  background: rgb(9 9 11 / 0.72);
}
.rundown-drum-desk .rundown-face.is-near { opacity: 0.36; }
.rundown-drum-desk .rundown-title { transition: opacity 0.45s var(--ease); }
.rundown:hover .rundown-drum-desk { opacity: 0; }
/* Up to 1559px the content column reaches the rail's side: while the page rests the drum shows the number only. */
@media (max-width: 1559px) {
  .rundown.is-quiet .rundown-drum-desk .rundown-title,
  .rundown.is-quiet .rundown-drum-desk .rundown-face.is-near { opacity: 0; }
}

/* The broadcast clock: estimated reading time left, then the segment on air out of all of them. */
.rundown-clock {
  position: absolute;
  inset-block-end: calc(100% + 14px);
  inset-inline-end: calc(var(--rd-edge) - 11px);
  display: grid;
  justify-items: end;
  gap: 6px;
  margin: 0;
  padding: 5px 7px;
  border-radius: var(--radius);
  background: rgb(9 9 11 / 0.72);   /* readable where it sits over the page's text (laptops) */
}
.rundown-left { color: rgb(250 250 250 / 0.92); font-size: 14px; letter-spacing: 0.04em; }
.rundown-count { color: rgb(250 250 250 / 0.42); font-size: 11px; letter-spacing: 0.1em; }
.rundown-count b,
.rundown-pill-n b { color: var(--accent-text); font-weight: 400; }

/* The open rundown: a row per section beside its tick (pushed apart where sections are short). */
.rundown-row {
  position: absolute;
  inset-block-start: var(--y, 0px);
  inset-inline-end: calc(var(--rd-edge) - 6px);
  display: flex;
  align-items: center;
  gap: 9px;
  block-size: 22px;
  padding-inline: 10px 30px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: calc(var(--rd-dir) * 10px) -50%;
  transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), background-color 0.2s var(--ease), visibility 0s linear 0.25s;
}
.rundown:hover .rundown-row {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 -50%;
  transition: opacity 0.4s var(--ease) calc(0.1s + var(--k) * 0.035s), translate 0.5s var(--ease) calc(0.1s + var(--k) * 0.035s), background-color 0.2s var(--ease), visibility 0s;
}
.rundown-row .rundown-title { color: rgb(250 250 250 / 0.8); transition: color 0.2s var(--ease); }
.rundown-row .rundown-n { color: rgb(250 250 250 / 0.42); transition: color 0.2s var(--ease); }
.rundown-row.is-past .rundown-title { color: rgb(250 250 250 / 0.46); }
.rundown-row.is-now .rundown-title,
.rundown-row:hover .rundown-title { color: var(--text); }
.rundown-row.is-now .rundown-n,
.rundown-row:hover .rundown-n { color: var(--accent-text); }
.rundown-row:hover { background-color: rgb(250 250 250 / 0.06); }

/* Phones and tablets: the progress line right under the header, with a mark at each section. */
.rundown-line {
  position: fixed;
  inset-block-start: calc(var(--header-h) + 1px);
  inset-inline: 0;
  z-index: 9;
  block-size: 3px;
  background: rgb(250 250 250 / 0.07);
  pointer-events: none;
}
.rundown-line-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
:root[dir="rtl"] .rundown-line-fill { transform-origin: 100% 50%; }
.rundown-line-tick {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--at, 0) * 100%);
  inline-size: 2px;
  block-size: 6px;
  margin-inline-start: -1px;
  background: rgb(250 250 250 / 0.45);
}
.rundown-line-tick.is-past { background: var(--accent); }

/* "Now playing": the segment, its title and the time left, while the page scrolls (rundown.js adds .is-live). It
   waits while the hero's buttons are on screen (.is-blocked). Centred with left + translate, the same in RTL. */
.rundown-pill {
  position: fixed;
  inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 9;
  align-items: center;
  gap: 10px;
  max-inline-size: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(9 9 11 / 0.84);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
}
.rundown-pill.is-ready { transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s; }
.rundown-pill.is-live:not(.is-blocked) { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.rundown-dot { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
.rundown-pill-n { color: rgb(250 250 250 / 0.42); font-size: 11px; letter-spacing: 0.06em; }
.rundown-drum-pill { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; perspective: 200px; }
.rundown-drum-pill .rundown-face { justify-self: start; }
.rundown-drum-pill .rundown-title { font-size: 13px; font-weight: 500; }
.rundown-pill .rundown-left { margin-inline-start: 4px; font-size: 12px; }
/* The smallest phones: the longest title (Arabic "Stage, events & press") still fits without being cut. */
@media (max-width: 360px) {
  .rundown-pill { gap: 7px; padding-inline: 10px; }
  .rundown-dot { display: none; }
  .rundown-drum-pill .rundown-title { font-size: 12px; }
  .rundown-pill .rundown-left { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Still shown and updated; the drum and the board switch at once, the pill shows and hides without fading. */
  .rundown *,
  .rundown-line *,
  .rundown-pill,
  .rundown-pill * { transition: none !important; }
}
@media print {
  .rundown,
  .rundown-line,
  .rundown-pill { display: none !important; }
}

/* Custom cursor (assets/cursor.js, fine pointers only, never under reduced motion): a dot that tracks exactly and a
   ring that follows; the ring grows over links and becomes a rose disc with a label over media ("Play", "Read").
   cursor.js moves the ring and label with the translate property every frame; their states use scale, which CSS
   eases, so the two never fight. No blend modes: difference would turn the white ring teal over the rose buttons
   (one accent), so a faint dark edge keeps it readable over white type instead. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;   /* physical: the pointer's clientX/clientY are measured from the top left in both directions */
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cursor.is-visible { opacity: 1; }
.cursor-dot,
.cursor-ring,
.cursor-label {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.cursor-dot {
  inline-size: 6px;
  block-size: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgb(0 0 0 / 0.45);
  transition: opacity 0.2s var(--ease);
}
.cursor-ring {
  inline-size: 40px;
  block-size: 40px;
  margin: -20px 0 0 -20px;
  border: 1.5px solid rgb(255 255 255 / 0.8);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), inset 0 0 0 1px rgb(0 0 0 / 0.4);
  scale: calc(var(--grow, 1) * var(--press, 1));
  transition: scale 0.5s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cursor-ring::after {
  content: "";
  position: absolute;
  inset: -1.5px;   /* over the border, so the disc is a full 40px */
  border-radius: 50%;
  background: var(--accent);
  transform: scale(var(--fill, 0));
  transition: transform 0.4s var(--ease);
}
/* Dark type on the rose disc, like the rose tape band (white on --accent is too faint at 11px). */
.cursor-label {
  transform: translate(-50%, -50%);
  padding-inline-start: 0.1em;   /* balances the letter-spacing after the last letter, so the word sits centred */
  color: #0b0b0d;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.cursor.is-link .cursor-ring { --grow: 1.6; background-color: rgb(255 255 255 / 0.06); }
.cursor.has-label .cursor-ring { --grow: var(--fit, 2.1); border-color: transparent; box-shadow: none; }
.cursor.has-label .cursor-ring::after { --fill: 1; }
.cursor.has-label .cursor-label { opacity: 1; transition-delay: 0.08s; }
.cursor.has-label .cursor-dot { opacity: 0; }
.cursor.is-down .cursor-ring { --press: 0.78; transition-duration: 0.15s; }
:root:lang(ar) .cursor-label { padding-inline-start: 0; letter-spacing: normal; font-family: var(--font); font-size: 12px; }
html.has-cursor,
html.has-cursor * { cursor: none !important; }
html.has-cursor iframe { cursor: auto !important; }
html.has-cursor .video-play:hover .play-icon { opacity: 0; }
html.has-cursor .video-play:focus-visible .play-icon { opacity: 1; }

/* Smooth scrolling (Lenis, assets/motion.js). Its recommended rules: native smooth scrolling off while it runs. */
html.lenis,
html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 28px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.site-footer a { display: inline-block; padding-block: 5px; text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Privacy & terms page */
.legal-back { margin-inline-start: auto; }
.legal .wrap > * { max-inline-size: 68ch; }
.legal-updated { margin-block-start: 12px; color: var(--muted); font-family: var(--mono); font-size: 0.8125rem; }
.legal section { margin-block-start: clamp(36px, 5vw, 56px); }
.legal h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.legal p, .legal ul { margin-block-start: 12px; color: var(--text-2); }
.legal ul { display: grid; gap: 12px; padding-inline-start: 1.1em; }
.legal strong { color: var(--text); font-weight: 400; }
.legal a { color: var(--text); text-decoration-color: var(--accent); }

/* ---------- Language: Arabic page (ar.html), header switch and first-visit chooser (assets/lang.js) ---------- */
/* Readex Pro (OFL), Arabic letters only; Latin text on the Arabic page stays in Outfit. Letter-spacing breaks joined
   Arabic letters, so it is off there, and Arabic gets more line height for its taller letters. */
@font-face { font-family: "Readex Pro"; src: url("fonts/readex-pro-arabic.woff2") format("woff2"); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
/* Aref Ruqaa (OFL), bold, Arabic letters only: Shihab's name in the Arabic hero, set like a calligraphic signature. */
@font-face { font-family: "Aref Ruqaa"; src: url("fonts/aref-ruqaa-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
:root:lang(ar) { --font: "Readex Pro", "Outfit", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; }
/* JetBrains Mono has no Arabic, and the browser's monospace fallback draws Arabic letters unjoined and spaced out:
   Readex Pro (Arabic range only) comes first in the mono stack, so digits and Latin stay in the mono face. */
:root:lang(ar) { --mono: "Readex Pro", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }
:root:lang(ar) body * { letter-spacing: normal !important; }
:root:lang(ar) h1, :root:lang(ar) h2, :root:lang(ar) h3 { line-height: 1.3; }
:root:lang(ar) .mask-line, :root:lang(ar) .hero-name .word { padding-block: 0.12em 0.3em; margin-block: -0.12em -0.3em; }
.lang-choice[lang="ar"], .lang-switch[lang="ar"] { font-family: "Readex Pro", var(--font); letter-spacing: normal; }
.services-note { margin-block: calc(-1 * clamp(16px, 2.5vw, 40px)) clamp(24px, 3vw, 40px); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 36px;
  min-inline-size: 44px;
  padding-inline: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch:hover { border-color: var(--accent); color: var(--text); }
@media (max-width: 400px) { .lang-switch { min-inline-size: 36px; padding-inline: 8px; } }
/* The smallest phones: the language switch takes the sound button's place (hover ticks don't happen on touch anyway). */
@media (max-width: 360px) { .sound-toggle { display: none !important; } }

/* First-visit chooser: two halves, the one under the pointer grows and lights up; the choice fills the screen,
   then the curtain lifts. Built by lang.js only for people (not search engines), never shown twice. */
html.lang-open { overflow: hidden; }
.lang-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  color: var(--text);
}
.lang-intro-mark { padding: 20px var(--gutter); font-weight: 900; font-size: 1.125rem; }
.lang-choices { display: flex; min-block-size: 0; }
.lang-choice {
  position: relative;
  flex: 1 1 0;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 24px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: flex-grow 0.8s var(--ease), opacity 0.5s var(--ease);
}
.lang-choice + .lang-choice { border-inline-start: 1px solid var(--line); }
.lang-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(55% 60% at var(--mx, 50%) var(--my, 45%), var(--spot), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.lang-choice:hover::before, .lang-choice:focus-visible::before { opacity: 1; }
.lang-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.lang-word { display: block; font-size: clamp(3rem, 10vw, 8.5rem); font-weight: 900; line-height: 1.15; }
.lang-choice[lang="en"] .lang-word { letter-spacing: -0.045em; }
.lang-choice[lang="ar"] .lang-word { font-weight: 700; }
.lang-hint { color: var(--muted); font-size: 0.9375rem; }
.lang-choice[lang="en"] .lang-hint { font-family: var(--mono); font-size: 0.8125rem; }
@media (hover: hover) {
  .lang-choices:hover .lang-choice:not(:hover) { opacity: 0.4; }
  .lang-choice:hover { flex-grow: 1.7; }
}
.lang-choice.is-chosen { flex-grow: 12; opacity: 1 !important; }
@media (max-width: 700px) {
  .lang-choices { flex-direction: column; }
  .lang-choice + .lang-choice { border-inline-start: 0; border-block-start: 1px solid var(--line); }
}
@media (prefers-reduced-motion: no-preference) {
  .lang-intro .lang-word { animation: lang-rise 1s var(--ease) both; }
  .lang-intro .lang-choice + .lang-choice .lang-word { animation-delay: 0.12s; }
  .lang-intro .lang-hint { animation: enter 0.8s var(--ease) 0.5s both; }
  .lang-intro.is-leaving { animation: lang-lift 0.75s var(--ease) 0.35s forwards; }
  .lang-wipe { position: fixed; inset: 0; z-index: 50; background: var(--bg); animation: lang-cover 0.5s var(--ease) both; }
  html.lang-arrive body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--bg);
    pointer-events: none;
    animation: lang-lift 0.8s var(--ease) 0.1s forwards;
  }
}
@keyframes lang-rise { from { transform: translateY(60%); opacity: 0; } }
@keyframes lang-lift { to { clip-path: inset(0 0 100% 0); } }
@keyframes lang-cover { from { clip-path: inset(100% 0 0 0); } }

/* ---------- Motion ----------
   Hero: letters rise, then a light sweep and the underline under "seen" (the eye goes name, value line, buttons).
   Sections: titles rise out of a mask, content rises in once as it enters the viewport (IntersectionObserver).
   The stage photo zooms in as it enters and the picture drifts inside it (CSS scroll timelines, where supported).
   All of it is off under prefers-reduced-motion, and nothing is hidden unless site.js is running. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-enter] {
    animation: enter 0.9s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms + 420ms);
  }
  .js .hero-portrait[data-enter] { animation-name: enter-portrait; animation-duration: 1.4s; animation-delay: 200ms; }

  .hero-name .ch {
    animation: rise 1s var(--ease) both, sweep 0.55s ease-in-out both;
    animation-delay: calc(var(--c) * 34ms + 120ms), calc(var(--c) * 55ms + 1300ms);
  }
  .hero-lead .hl::after { animation: underline 0.8s var(--ease) both; animation-delay: 1.6s; }

  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

  /* Post overlay: the counts rise in one by one after the case appears, then the heart beats once. */
  .reveal-ready .post-account,
  .reveal-ready .post-stats li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: 0.7s;
  }
  .reveal-ready .post-stats li:nth-child(1) { transition-delay: 0.9s; }
  .reveal-ready .post-stats li:nth-child(2) { transition-delay: 1.02s; }
  .reveal-ready .post-stats li:nth-child(3) { transition-delay: 1.14s; }
  .reveal-ready .case.is-in .post-account,
  .reveal-ready .case.is-in .post-stats li { opacity: 1; transform: none; }
  .reveal-ready .case.is-in .post-stats li:first-child .icon { animation: like 0.7s var(--ease) 1.6s both; }

  .reveal-ready .section-title[data-reveal],
  .reveal-ready .contact-title[data-reveal] { opacity: 1; transform: none; }
  .reveal-ready .section-title[data-reveal] .mask-line > span,
  .reveal-ready .contact-title[data-reveal] .mask-line > span {
    transform: translateY(105%);
    transition: transform 1.1s var(--ease);
  }
  .reveal-ready .section-title[data-reveal].is-in .mask-line > span,
  .reveal-ready .contact-title[data-reveal].is-in .mask-line > span { transform: none; }

  /* Stage photo: a stage curtain (two dark velvet halves) parts as it arrives and the stage lights come up on the
     photo. The curtains are pseudo-elements: clipping the figure itself would hide it from the IntersectionObserver
     that reveals it. */
  .reveal-ready .stage-photo[data-reveal="curtain"] { opacity: 1; transform: none; }
  .reveal-ready .stage-photo[data-reveal="curtain"]:not(.is-empty)::before,
  .reveal-ready .stage-photo[data-reveal="curtain"]:not(.is-empty)::after {
    content: "";
    position: absolute;
    inset-block: 0;
    z-index: 2;
    inline-size: 50.5%;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.55)),
      repeating-linear-gradient(90deg, #17050a 0 14px, #2a0912 26px, #17050a 40px);
    transition: transform 1.7s var(--ease) 0.15s;
  }
  .reveal-ready .stage-photo[data-reveal="curtain"]:not(.is-empty)::before { left: 0; box-shadow: inset -24px 0 40px rgb(0 0 0 / 0.6); }
  .reveal-ready .stage-photo[data-reveal="curtain"]:not(.is-empty)::after { right: 0; box-shadow: inset 24px 0 40px rgb(0 0 0 / 0.6); }
  .reveal-ready .stage-photo[data-reveal="curtain"].is-in::before { transform: translateX(-101%); }
  .reveal-ready .stage-photo[data-reveal="curtain"].is-in::after { transform: translateX(101%); }
  .reveal-ready .stage-photo[data-reveal="curtain"] img { filter: brightness(0.35); transition: filter 1.8s var(--ease) 0.5s; }
  .reveal-ready .stage-photo[data-reveal="curtain"].is-in img { filter: none; }
  /* Event photos: each photo wipes open inside its tile (up or down, alternating) as the mosaic arrives; the
     caption follows. The tile itself is not clipped, so the reveal observer still sees it. */
  .reveal-ready .event[data-reveal="wipe"] { opacity: 1; transform: none; }
  .reveal-ready .event[data-reveal="wipe"] img {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.2s var(--ease) calc(var(--i, 0) * 90ms), scale 0.8s var(--ease);
  }
  .reveal-ready .event[data-reveal="wipe"]:nth-child(even) img { clip-path: inset(0 0 100% 0); }
  .reveal-ready .event[data-reveal="wipe"].is-in img { clip-path: inset(0 0 0 0); }
  .reveal-ready .event[data-reveal="wipe"] figcaption { opacity: 0; transition: opacity 0.6s var(--ease) calc(1.1s + var(--i, 0) * 90ms); }
  .reveal-ready .event[data-reveal="wipe"].is-in figcaption { opacity: 1; }
  /* The monitor wall powers on, screen after screen, when its group arrives. */
  .reveal-ready .logo-group:not(.is-in) .logos img { opacity: 0; }
  .reveal-ready .logo-group.is-in .logos img { animation: power-on 0.5s steps(1, end) both; animation-delay: calc(var(--n, 0) * 22ms + 0.2s); }
  /* The studio sign flickers on when it arrives. */
  .reveal-ready .on-air.is-in .on-air-tube { animation: neon-on 1.2s steps(1, end) both 0.2s; }

  @supports (animation-timeline: view()) {
    .stage-photo img {
      animation: drift linear both;
      animation-timeline: view();
    }
    /* Photos move a little slower than the page, like layers at different depths. */
    .event img {
      animation: parallax linear both;
      animation-timeline: view();
    }
  }
}

@keyframes enter {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes enter-portrait {
  from { transform: scale(1.05); filter: brightness(0.2); }
}
@keyframes rise {
  from { transform: translateY(110%); }
}
@keyframes sweep {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@keyframes underline {
  from { transform: scaleX(0); }
}
@keyframes parallax {
  from { translate: 0 -5%; }
  to { translate: 0 5%; }
}
@keyframes power-on {
  0% { opacity: 0; }
  10% { opacity: 1; filter: brightness(2.2); }
  18% { opacity: 0.25; }
  30%, 100% { opacity: 0.78; }
}
@keyframes neon-on {
  0%, 9%, 15%, 31% { opacity: 1; }
  6%, 12%, 26% { opacity: 0.25; }
  100% { opacity: 1; }
}
@keyframes drift {
  from { transform: translateY(-3%) scale(1.07); }
  to { transform: translateY(3%) scale(1.07); }
}
@keyframes like {
  40% { transform: scale(1.32); }
  70% { transform: scale(0.94); }
}

@media print {
  [data-reveal],
  [data-enter],
  .post-account,
  .post-stats li { opacity: 1 !important; transform: none !important; animation: none !important; }
  body::after,
  .site-header,
  .hud,
  .band,
  .cursor,
  .hero-stage,
  .story-stage { display: none; }
  [data-reveal] img { clip-path: none !important; filter: none !important; }
  .stage-photo::before,
  .stage-photo::after { display: none !important; }
}