@font-face {
  font-family: "Alliance No.2";
  src: url("fonts/AllianceNo2-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Alliance No.2";
  src: url("fonts/AllianceNo2-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --black: #000;
  --white: #f5f5f3;
  --ink: #141414;
  --red: #e10600;

  --frame: clamp(8px, 1vw, 22px);
  --gutter: clamp(24px, 4.4vw, 110px);

  --expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cine: cubic-bezier(0.76, 0, 0.24, 1);
  /* physical spring curves (k=100 c=14 / k=80 c=18), ~1.1s settle */
  --spring: linear(0, 0.0298, 0.0963, 0.1863, 0.289, 0.3959, 0.501, 0.5998, 0.6895, 0.7684, 0.836, 0.8921, 0.9375, 0.9731, 0.9999, 1.0191, 1.0321, 1.0399, 1.0436, 1.0443, 1.0427, 1.0395, 1.0354, 1.0308, 1.0261, 1.0215, 1.0171, 1.0132, 1.0098, 1.0069, 1.0045, 1.0025, 1.001, 0.9999, 0.999, 0.9985, 0.9982, 0.9981, 0.998, 0.9981, 0.9983, 0.9985, 0.9987, 0.9989, 0.9991, 0.9993, 0.9994, 0.9996, 1);
  --spring-soft: linear(0, 0.0232, 0.0733, 0.1394, 0.2135, 0.2957, 0.3713, 0.4433, 0.5104, 0.5761, 0.6313, 0.6806, 0.7244, 0.7629, 0.7989, 0.828, 0.8532, 0.875, 0.8949, 0.9108, 0.9244, 0.9361, 0.9466, 0.9549, 0.962, 0.968, 0.973, 0.9776, 0.9812, 0.9842, 0.9867, 0.989, 0.9908, 0.9923, 0.9935, 0.9947, 0.9955, 0.9963, 0.9969, 0.9974, 0.9978, 0.9982, 0.9985, 0.9987, 0.999, 0.9991, 0.9993, 0.9994, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Alliance No.2", "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--red); color: #fff; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.page { padding: var(--frame); }

/* ---------- Hero (framed on the white page) ---------- */

.hero {
  position: relative;
  height: calc(100vh - var(--frame) * 2);
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  color: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img,
.hero__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__bg img {
  object-fit: cover;
  object-position: 62% 50%;
  transform: scale(1.03);
  transition:
    transform 3.2s var(--expo-out),
    filter 2.6s var(--expo-out),
    opacity 2.2s var(--expo-out);
}

.is-loading .hero__bg img {
  transform: scale(1.12);
  filter: blur(18px) brightness(0.3);
  opacity: 0;
}

.hero__gl { opacity: 0; }

/* RTL mirrors the whole composition, photo included, so text stays on the
   same side of the moon/figure as in the original design */
[dir="rtl"] .hero__bg img { transform: scale(-1.03, 1.03); }
[dir="rtl"] .is-loading .hero__bg img { transform: scale(-1.12, 1.12); }

/* once WebGL is running, the canvas replaces the <img> */
.has-gl .hero__gl { opacity: 1; }
.has-gl .hero__bg img { visibility: hidden; }

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(0, 0, 0, 0.5), transparent 55%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent 18%);
}

[dir="rtl"] .hero__vignette {
  background:
    radial-gradient(120% 80% at 100% 100%, rgba(0, 0, 0, 0.5), transparent 55%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent 18%);
}

/* ---------- Top bar ---------- */

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(24px, 6.4vh, 80px) var(--gutter) 0;
  z-index: 20;
  pointer-events: none;
}

.topbar > * { pointer-events: auto; }

.logo {
  direction: ltr; /* the wordmark is Latin in every language */
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(22px, 1.55vw, 34px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--white);
  will-change: transform;
}

.logo__cursor {
  display: inline-block;
  width: 0.42em;
  height: 0.1em;
  margin-inline-start: 0.12em;
  background: var(--red);
  transform: translateY(0.06em);
  animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

/* Burger: three lines, the last one shorter — springs into an X */
.burger {
  --line: #4a4a4a;
  position: relative;
  width: 56px;
  height: 48px;
  margin: -12px -8px 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.burger__lines {
  position: absolute;
  left: 8px;
  top: 12px;
  width: 40px;
  height: 26px;
  will-change: transform;
}

.burger__lines span {
  position: absolute;
  inset-inline-start: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  transition:
    width 1.1s var(--spring),
    transform 1.1s var(--spring),
    top 1.1s var(--spring),
    opacity 0.6s var(--expo-out),
    background-color 0.8s var(--expo-out);
}

.burger__lines span:nth-child(1) { top: 3px;  width: 100%; }
.burger__lines span:nth-child(2) { top: 12px; width: 100%; }
.burger__lines span:nth-child(3) { top: 21px; width: 46%; }

.burger:hover .burger__lines span:nth-child(1) { width: 64%; }
.burger:hover .burger__lines span:nth-child(3) { width: 82%; }

.burger:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }

.menu-open .burger { --line: var(--white); }
.menu-open .burger__lines span:nth-child(1) { top: 12px; width: 100%; transform: rotate(45deg); }
.menu-open .burger__lines span:nth-child(2) { opacity: 0; width: 0; }
.menu-open .burger__lines span:nth-child(3) { top: 12px; width: 100%; transform: rotate(-45deg); }

/* ---------- Roles: two at a time, looping (cycle + hover physics in main.js) ---------- */

.roles {
  position: absolute;
  inset-inline-end: var(--gutter);
  top: clamp(130px, 18.5vh, 260px);
  display: grid;
  justify-items: end;
  row-gap: 0.12em;
  text-align: end;
  font-size: clamp(22px, 2vw, 44px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  will-change: transform;
}

/* every pair shares the same two rows; each row is a mask */
.roles li {
  grid-column: 1;
  overflow: hidden;
  /* room inside the mask for the hover shift (left) and red dash (right) */
  padding-block: 0.12em;
  padding-inline: 1.2em 1.3em;
  margin-block: -0.12em;
  margin-inline: -1.2em -1.3em;
  pointer-events: none;
}
.roles li:nth-child(odd)  { grid-row: 1; }
.roles li:nth-child(even) { grid-row: 2; }
.roles li.is-in { pointer-events: auto; }

.role {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  will-change: transform, translate, opacity, filter;
  /* waiting below the mask; no transition so it can reset instantly */
  translate: 0 165%;
  filter: blur(10px);
}

.is-in .role {
  translate: 0 0;
  filter: blur(0);
  transition:
    translate 1.5s var(--spring-soft),
    filter 1.2s var(--expo-out);
  transition-delay: calc(var(--pair-i, 0) * 140ms);
}

.is-out .role {
  translate: 0 -165%;
  filter: blur(8px);
  transition:
    translate 1.1s var(--cine),
    filter 1.1s var(--cine);
  transition-delay: calc(var(--pair-i, 0) * 90ms);
}

.role::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -0.9em;
  width: 0.5em;
  height: 2px;
  background: var(--red);
  transform-origin: right;
  transform: scaleX(var(--dash, 0));
}

[dir="rtl"] .role::after { transform-origin: left; }

/* ---------- Manifesto ---------- */

.manifesto {
  position: absolute;
  inset-inline-start: var(--gutter);
  bottom: clamp(56px, 10.5vh, 140px);
  max-width: 72vw;
  font-size: clamp(14px, 1.05vw, 22px);
  line-height: 1.3;
  color: var(--white);
  will-change: transform;
}

.manifesto p + p { margin-top: 1.3em; }

.manifesto .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.manifesto .line > span {
  display: block;
  transform-origin: left top;
  transition:
    transform 2s var(--expo-out),
    opacity 2s var(--expo-out);
  transition-delay: calc(1.8s + var(--i, 0) * 200ms);
}

.is-loading .manifesto .line > span {
  transform: translateY(110%) rotate(1.5deg);
  opacity: 0;
}

.logo__text, .logo__cursor, .burger__lines {
  transition: opacity 1.8s var(--expo-out) 0.9s, translate 1.8s var(--expo-out) 0.9s;
}
.is-loading .logo__text,
.is-loading .logo__cursor { opacity: 0; translate: 0 14px; }
.is-loading .burger__lines { opacity: 0; }

/* ---------- Menu overlay ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  clip-path: circle(0% at var(--ox, 95%) var(--oy, 8%));
  transition: clip-path 1.3s var(--cine);
  pointer-events: none;
}

.menu-open .menu {
  clip-path: circle(150% at var(--ox, 95%) var(--oy, 8%));
  pointer-events: auto;
}

.menu ul { display: grid; gap: 0.1em; }

.menu a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.18em;
  font-size: clamp(44px, 7vw, 120px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.6s var(--expo-out),
    transform 0.6s var(--expo-out),
    color 0.6s var(--expo-out);
}

.menu sup {
  font-size: 0.16em;
  letter-spacing: 0.05em;
  color: var(--red);
  margin-top: 1.1em;
}

.menu-open .menu a {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.4s var(--expo-out),
    transform 1.4s var(--spring-soft),
    color 0.6s var(--expo-out);
  transition-delay: calc(0.45s + var(--i, 0) * 90ms), calc(0.45s + var(--i, 0) * 90ms), 0s;
}

.menu ul:hover a { color: #4d4d4d; }
.menu ul a:hover { color: var(--white); }

/* language switcher */
.lang {
  position: absolute;
  inset-inline-start: var(--gutter);
  bottom: clamp(32px, 7vh, 80px);
  display: flex;
  gap: 1.4em;
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.4s var(--expo-out);
}

.menu-open .lang {
  opacity: 1;
  transition: opacity 1.2s var(--expo-out) 0.8s;
}

.lang button {
  position: relative;
  padding: 0.4em 0;
  font: inherit;
  letter-spacing: inherit;
  color: #6b6b6b;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.5s var(--expo-out);
}

.lang button:hover,
.lang button[aria-pressed="true"] { color: var(--white); }

.lang button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 1s var(--spring);
}

.lang button[aria-pressed="true"]::after { transform: scaleX(1); }

/* ---------- Arabic typography ---------- */

/* Arabic letters join, so tracking must stay at zero; the script also needs
   more vertical room than Latin */
:root[lang="ar"] .roles,
:root[lang="ar"] .manifesto,
:root[lang="ar"] .menu a { letter-spacing: 0; }
:root[lang="ar"] .roles { line-height: 1.45; }
:root[lang="ar"] .manifesto { line-height: 1.75; }
:root[lang="ar"] .menu a { font-weight: 400; line-height: 1.35; }

/* ---------- About ---------- */

.about {
  --card: #e7e6eb;
  --navy: #1d2142;
  --body: #5f6272;
  --line: #a6a7b4;
  --accent: #ec3325;
  padding: clamp(16px, 3.6vw, 72px) clamp(0px, 2.8vw, 54px);
}

.about__card {
  background: var(--card);
  border-radius: clamp(20px, 2.2vw, 40px);
  padding: clamp(32px, 5.5vw, 108px) clamp(22px, 5.5vw, 108px) clamp(36px, 5.6vw, 110px);
}

.about__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "spark ."
    "title lede";
  column-gap: clamp(32px, 8vw, 180px);
  align-items: start;
}

.spark {
  grid-area: spark;
  width: clamp(64px, 5.2vw, 100px);
  height: auto;
  margin-bottom: clamp(28px, 3.4vw, 60px);
  overflow: visible;
  fill: #ff494c;
}

.spark path { transform-box: view-box; }
.spark__spine { transform-origin: 79.5px 60px; }
.spark__wing  { transform-origin: 79.5px 60px; }

.about__title {
  grid-area: title;
  font-size: clamp(36px, 3.9vw, 80px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.about__lede {
  grid-area: lede;
  max-width: 40em;
  padding-top: 0.6em;
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.68;
  letter-spacing: 0.005em;
  color: var(--body);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.2vw, 24px);
  margin-top: clamp(48px, 5.2vw, 100px);
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(240px, 18vw, 340px);
  padding: clamp(22px, 2vw, 38px) clamp(22px, 1.6vw, 30px) clamp(24px, 1.9vw, 36px);
  border: 1.5px solid var(--line);
  border-radius: clamp(20px, 1.6vw, 30px);
}

.stat__label {
  font-size: clamp(15px, 1.1vw, 21px);
  font-weight: 400;
  color: #0e0e12;
  padding-inline: 0.45em;
}

.stat__value {
  margin-top: 0.08em;
  font-size: clamp(72px, 7.6vw, 150px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0b0b0b;
  padding-inline: 0.04em;
}

.stat--accent .stat__value { color: var(--accent); letter-spacing: -0.04em; }

.stat__desc {
  margin-top: auto;
  padding-top: 1.4em;
  max-width: 19em;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1.55;
  color: var(--body);
}

/* ---------- Latest work: the centrepiece ---------- */

.work {
  --radius: clamp(20px, 2.2vw, 36px);
  --body: #9a9ba8;
  /* same outer rhythm as the about card above it */
  padding: 0 clamp(0px, 2.8vw, 54px) clamp(16px, 3.6vw, 72px);
}

.work__band {
  position: relative;
  background: #09090b;
  color: #fff;
  border-radius: clamp(20px, 2.2vw, 40px);
  padding: clamp(40px, 6vw, 120px) clamp(22px, 4.2vw, 84px) clamp(28px, 4.2vw, 84px);
  overflow: hidden;
}

/* a faint cold light from the top corner so the black isn't flat */
.work__band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(120, 130, 160, 0.16), transparent 60%),
    radial-gradient(60% 40% at 0% 100%, rgba(255, 73, 76, 0.06), transparent 60%);
  pointer-events: none;
}

.work__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(24px, 6vw, 120px);
}

.work__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 0.85vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 1.4em;
}

.work__eyebrow::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(255, 73, 76, 0.8);
}

.work__title {
  font-size: clamp(60px, 9.4vw, 196px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #fff;
  margin-inline-start: -0.04em;
}

.work__lede {
  max-width: 24em;
  margin-bottom: 0.35em;
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.6;
  color: var(--body);
}

/* ---- the spectrum line ---- */

.spectrum {
  --spectrum: linear-gradient(to right, #8a7e7e, #a09899, #b0a7a6, #ad9d99, #938986, #9a8a86, #a69692, #c7bbb8, #bcb9bb, #b5b1b2, #999090, #948a84, #4c4a4b, #6a6260, #636161, #5e5b5b, #797676, #979392, #605957, #555254, #4e4b4b, #48403f, #363131, #2b2929, #010304, #333433, #757371, #82807e, #7a7069, #a2958a, #8b8078, #363331, #1f1b17, #272420, #1e1815, #2c201a);
  position: relative;
  height: 5px;
  margin-top: clamp(32px, 4vw, 80px);
  border-radius: 5px;
  transform-origin: 0 50%;
}

[dir="rtl"] .spectrum { transform-origin: 100% 50%; }

.spectrum__bar,
.spectrum__glow,
.spectrum__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.spectrum__bar { background: var(--spectrum); }

/* the same gradient, blurred, underneath: this is the shine */
.spectrum__glow {
  background: var(--spectrum);
  filter: blur(16px) saturate(1.6) brightness(1.2);
  transform: scaleY(3.5);
}

/* a slow highlight travelling along the line */
.spectrum__sheen {
  overflow: hidden;
}

.spectrum__sheen::after {
  content: "";
  position: absolute;
  inset: -2px 0;
  width: 18%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: sheen 7s cubic-bezier(0.45, 0, 0.2, 1) 1.5s infinite;
}

@keyframes sheen {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(680%); }
}

[dir="rtl"] .spectrum__sheen::after { animation-direction: reverse; }

.spectrum[data-reveal] { transition: transform 2.2s var(--expo-out), opacity 1s var(--expo-out); }
.spectrum[data-reveal]:not(.is-visible) { transform: scaleX(0); filter: none; }

/* ---- the cards: one tall feature, two stacked beside it ---- */

.posts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 28px);
  margin-top: clamp(32px, 4vw, 80px);
}

.post { grid-column: span 5; }
.post--feature { grid-column: span 7; grid-row: span 2; }

.post--feature .post__link { height: 100%; aspect-ratio: auto; }
/* wider side crops keep the feature card close to square, so its photo keeps the crowd either side */
.post:not(.post--feature) .post__link { aspect-ratio: 3 / 2; }
.post--feature .post__title { font-size: clamp(20px, 1.9vw, 38px); max-width: 18em; }
.post--feature .post__panel { inset-inline: 3.6%; bottom: 4%; }

.post[data-reveal] { transition-delay: calc(var(--i, 0) * 130ms); }

.post__link {
  position: relative;
  display: block;
  aspect-ratio: 1088 / 923;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: #1a1a1e;
  color: #fff;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.post__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* the photo itself never moves; hover only dims it slightly */
  transition: filter 1s var(--expo-out);
}

/* Glass panel: hidden at rest. Stage 1 = title, stage 2 (after a short dwell) = button. */
.post__panel {
  --pr: calc(var(--radius) * 0.72);
  position: absolute;
  inset-inline: 4.6%;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.5vw, 30px) clamp(18px, 1.7vw, 34px);
  border-radius: var(--pr);
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.34), rgba(40, 40, 46, 0.5));
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: translateY(26%) scale(0.97);
  clip-path: inset(55% 0 0 0 round var(--pr));
  transition:
    opacity 0.5s var(--expo-out),
    transform 0.7s var(--expo-out),
    clip-path 0.7s var(--expo-out);
}

.post__index {
  display: block;
  margin-bottom: 0.9em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(11px, 0.75vw, 13px);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.6s var(--expo-out);
}

.post__link:hover .post__index,
.post__link:focus-visible .post__index { opacity: 1; transition-delay: 0.2s; }

.post__title {
  display: block;
  max-width: 24em;
  font-size: clamp(16px, 1.32vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 0.4s var(--expo-out), transform 0.5s var(--expo-out), filter 0.4s var(--expo-out);
}

/* the button row grows the panel upward when it opens */
.post__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--expo-out);
}

/* clips the button while the row grows, so the button itself is never squashed */
.post__more-inner {
  display: block;
  min-height: 0;
  overflow: hidden;
}

.post__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0;
  padding: 0 1.1em;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 2.6;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.35s var(--expo-out),
    transform 0.5s var(--expo-out),
    margin-top 0.6s var(--expo-out);
}

.post__btn svg {
  width: 1.6em;
  height: 0.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  overflow: visible;
  transition: transform 0.9s var(--spring);
}

[dir="rtl"] .post__btn svg { scale: -1 1; }

/* ---- stage 1: hover (or focus) brings in the panel and title ---- */
@media (hover: hover) {
  .post__link:hover .post__img { filter: brightness(0.94); }

  .post__link:hover .post__panel {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0 round var(--pr));
    transition:
      opacity 0.7s var(--expo-out),
      transform 1.2s var(--spring-soft),
      clip-path 1s var(--expo-out);
  }

  .post__link:hover .post__title {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity 1s var(--expo-out) 0.12s, transform 1.2s var(--spring-soft) 0.12s, filter 0.9s var(--expo-out) 0.12s;
  }

  /* ---- stage 2: after a short dwell the panel expands and the button springs in ---- */
  .post__link:hover .post__more {
    grid-template-rows: 1fr;
    transition: grid-template-rows 1s var(--spring-soft) 0.55s;
  }

  .post__link:hover .post__btn {
    margin-top: clamp(14px, 1.2vw, 22px);
    opacity: 1;
    transform: none;
    transition:
      opacity 0.8s var(--expo-out) 0.7s,
      transform 1.1s var(--spring) 0.7s,
      margin-top 1s var(--spring-soft) 0.55s;
  }

  .post__btn:hover svg { transform: translateX(5px); }
  [dir="rtl"] .post__btn:hover svg { transform: translateX(-5px); }
}

/* keyboard users get the full panel straight away */
.post__link:focus-visible .post__panel { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--pr)); }
.post__link:focus-visible .post__title { opacity: 1; transform: none; filter: none; }
.post__link:focus-visible .post__more { grid-template-rows: 1fr; }
.post__link:focus-visible .post__btn { margin-top: clamp(14px, 1.2vw, 22px); opacity: 1; transform: none; }
.post__link:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }

/* touch screens can't hover: show the title layer by default */
@media (hover: none) {
  .post__panel { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--pr)); }
  .post__title { opacity: 1; transform: none; filter: none; }
}

:root[lang="ar"] .work__eyebrow { letter-spacing: 0; font-family: inherit; }
:root[lang="ar"] .work__title,
:root[lang="ar"] .post__title { letter-spacing: 0; line-height: 1.45; }
:root[lang="ar"] .work__lede { line-height: 1.9; }

@media (max-width: 1100px) {
  .post, .post--feature { grid-column: span 12; grid-row: auto; }
  .post--feature .post__link { aspect-ratio: 16 / 10; height: auto; }
  .post:not(.post--feature) { grid-column: span 6; }
  .post:not(.post--feature) .post__link { aspect-ratio: 1088 / 923; }
}

@media (max-width: 768px) {
  .work { padding-inline: 0; }
  .work__band { padding-inline: 16px; }
  .work__head { flex-direction: column; align-items: flex-start; }
  .post, .post:not(.post--feature) { grid-column: span 12; }
  .post--feature .post__link { aspect-ratio: 1088 / 923; }
}

/* ---------- Scroll reveals ---------- */

[data-reveal] {
  transition:
    opacity 1.6s var(--expo-out),
    transform 1.6s var(--spring-soft),
    filter 1.6s var(--expo-out);
  transition-delay: var(--delay, 0s);
}

[data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
}

/* the headline reveals word by word instead of as a block */
.about__title[data-reveal]:not(.is-visible) { opacity: 1; transform: none; filter: none; }

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.word > span {
  display: inline-block;
  transition: transform 1.4s var(--spring-soft), opacity 1.2s var(--expo-out);
  transition-delay: calc(var(--delay, 0s) + var(--w, 0) * 55ms);
}

.about__title:not(.is-visible) .word > span {
  transform: translateY(105%) rotate(4deg);
  opacity: 0;
}

/* cards rise in one after another */
.stat[data-reveal] { transition-delay: calc(var(--i, 0) * 120ms); }
.stat[data-reveal]:not(.is-visible) { transform: translateY(70px); }

/* spark: spine grows, then the wings unfold from the centre */
.spark[data-reveal]:not(.is-visible) { transform: none; filter: none; }
.spark path { transition: transform 1.6s var(--spring); }
.spark__wing { transition-delay: 0.25s; }
.spark:not(.is-visible) .spark__spine { transform: scaleY(0); }
.spark:not(.is-visible) .spark__wing { transform: scaleX(0); }

.spark.is-visible .spark__wing {
  animation: wing-breathe 5s ease-in-out 2.2s infinite;
}

@keyframes wing-breathe {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.86); }
}

:root[lang="ar"] .about__title { letter-spacing: 0; line-height: 1.35; }
:root[lang="ar"] .about__lede { letter-spacing: 0; line-height: 1.9; }

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

@media (max-width: 768px) {
  .about { padding-inline: 0; }
  .about__intro {
    grid-template-columns: 1fr;
    grid-template-areas: "spark" "title" "lede";
    row-gap: 20px;
  }
  .stats { grid-template-columns: 1fr; }
  .stat { min-height: 0; }
  .stat__desc { padding-top: 1em; }
}

/* ---------- Spring cursor (fine pointers only, enabled from JS) ---------- */

.cursor { display: none; }

.has-cursor, .has-cursor * { cursor: none !important; }

.has-cursor .cursor {
  display: block;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor__dot,
.cursor__ring {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
}

.cursor__ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

/* ---------- Small screens (placeholder until the phone background arrives) ---------- */

@media (max-width: 768px) {
  .hero { height: calc(100svh - var(--frame) * 2); }
  .hero__bg img { object-position: 70% 50%; }

  .roles {
    top: auto;
    bottom: 42vh;
    font-size: 22px;
  }

  .manifesto {
    max-width: none;
    inset-inline-end: var(--gutter);
    bottom: 40px;
    font-size: 14px;
  }

  .hero__vignette {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 45%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 18%);
  }
}

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