/* IBM Plex, self-hosted. SIL Open Font License 1.1.
   See tools/make_fonts.py for why these are not loaded from Google. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/assets/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); }

/* JPA Consultancy
   Palette sampled from the logo master, not chosen:
   #0178B0 blue, #6D6E70 grey, #0A0A0A field, #F5F5F3 paper.
   Type: IBM Plex. Engineering-drawn, gridded, and the only family here with a
   genuine Arabic companion cut alongside the Latin, which is what makes the
   third locale possible rather than a fallback. */

:root {
  --ink: #0a0a0a;
  --ink-2: #141416;
  --ink-3: #1e1e21;
  --paper: #f5f5f3;
  --paper-2: #e6e6e1;
  --paper-3: #d3d3cc;
  --blue: #0178b0;
  --blue-lift: #3ba3d8;
  --grey: #6d6e70;
  --grey-lift: #a9abae;
  --grey-dim: #7c7e81;

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --step--1: clamp(0.79rem, 0.77rem + 0.1vw, 0.85rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.44rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.5vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.7rem + 3vw, 4.6rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --bay: clamp(4rem, 9vw, 7.5rem);
  --wrap: 1180px;
}

[lang="ar"] {
  --sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --cond: "IBM Plex Sans Arabic", "IBM Plex Sans Condensed", system-ui, sans-serif;
  /* There is no Arabic cut of Plex Mono. Keeping Mono first means Latin digits,
     dates and reference numbers still get the monospaced treatment, while the
     browser falls back per glyph to Plex Sans Arabic for the Arabic itself.
     Replacing the stack outright would lose the mono digits; omitting Arabic
     entirely leaves it on a system font with broken spacing. */
  --mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
}
[lang="ar"] .hero__role,
[lang="ar"] .doc__year,
[lang="ar"] .viewer__close,
[lang="ar"] .langs a { letter-spacing: 0; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--grey-lift);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--paper); line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: inherit; }

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

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

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--gutter);
  z-index: 100;
  background: var(--blue);
  color: #fff;
  padding: 0.7rem 1.1rem;
  font-size: var(--step--1);
  text-decoration: none;
}
.skip:focus { inset-block-start: 0.6rem; }

/* ---------- eyebrow / shared rhythm ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-lift);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}
[lang="ar"] .eyebrow { letter-spacing: 0; }

.bay { padding-block: var(--bay); }

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--ink-3);
}
.masthead__in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 62px;
}
.masthead__logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.masthead__logo img { width: 30px; height: 30px; }
.masthead__logo span {
  font-family: var(--cond);
  font-weight: 600;
  letter-spacing: 0.09em;
  font-size: var(--step--1);
  color: var(--paper);
  text-transform: uppercase;
}
.masthead nav { margin-inline-start: auto; display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); }
.masthead nav a {
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--grey-lift);
  padding-block: 0.4rem;
  transition: color 0.2s;
  white-space: nowrap;
}
.masthead nav a:hover { color: var(--paper); }
@media (max-width: 860px) { .masthead nav { display: none; } }

.langs { display: flex; gap: 0.35rem; margin-inline-start: auto; }
@media (min-width: 861px) { .langs { margin-inline-start: 0; } }
.langs a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--grey);
  border: 1px solid var(--ink-3);
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}
.langs a:hover { color: var(--paper); border-color: var(--grey); }
.langs a[aria-current="true"] { color: var(--ink); background: var(--blue-lift); border-color: var(--blue-lift); }

/* ---------- hero ---------- */

.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) 0; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  width: 90vw;
  height: 90vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(1, 120, 176, 0.16), transparent 62%);
  transform: translateX(-50%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__name {
  font-family: var(--cond);
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-block: 0.4rem 0.6rem;
}
[lang="ar"] .hero__name { letter-spacing: 0; }
.hero__role {
  font-family: var(--mono);
  font-size: var(--step-0);
  color: var(--blue-lift);
  letter-spacing: 0.02em;
}
.hero__thesis {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--paper);
  max-width: 34ch;
  margin-block-start: clamp(1.5rem, 3vw, 2.2rem);
  border-inline-start: 2px solid var(--blue);
  padding-inline-start: 1.15rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 2rem; }
.hero__portrait {
  position: relative;
  max-width: 420px;
  margin-inline-start: auto;
}
.hero__portrait img {
  width: 100%;
  height: auto;
  filter: grayscale(0.22) contrast(1.05);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
}
@media (max-width: 780px) {
  /* name and thesis come first; the portrait must not eat the first screen */
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__portrait { max-width: 240px; margin-inline: 0; }
  .hero__thesis { max-width: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: transparent; color: var(--blue-lift); }
.btn--ghost { background: transparent; border-color: var(--ink-3); color: var(--grey-lift); }
.btn--ghost:hover { border-color: var(--grey); color: var(--paper); background: transparent; }
[lang="ar"] .btn { letter-spacing: 0; }

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block-start: 1px solid var(--ink-3);
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
}
.stats div { padding-block: 1.6rem; padding-inline-end: 1rem; }
.stats div + div { border-inline-start: 1px solid var(--ink-3); padding-inline-start: 1rem; }
.stats b {
  display: block;
  font-family: var(--cond);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--paper);
  line-height: 1;
}
.stats span {
  display: block;
  font-size: var(--step--1);
  color: var(--grey);
  margin-block-start: 0.4rem;
}
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .stats div:nth-child(n + 3) { border-block-start: 1px solid var(--ink-3); }
}

/* ---------- the record: the page turns to paper ---------- */

.record {
  background: var(--paper);
  color: #3a3a38;
  position: relative;
}
.record h2, .record h3 { color: var(--ink); }
.record .eyebrow { color: var(--blue); }
.record__head { max-width: 62ch; }
.record__title { font-family: var(--cond); font-size: var(--step-3); font-weight: 600; }
.record__lede { margin-block-start: 1.1rem; font-size: var(--step-1); line-height: 1.5; color: #4a4a47; }
.record__note {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--grey);
  margin-block-start: 1.2rem;
}

.spine { margin-block-start: clamp(2.5rem, 5vw, 4rem); border-block-start: 1px solid var(--paper-3); }

.doc {
  display: grid;
  grid-template-columns: 5.5rem 1fr 10.5rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block-end: 1px solid var(--paper-3);
  background: none;
  border-inline: 0;
  border-block-start: 0;
  inline-size: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.doc:hover { background: var(--paper-2); }
.doc__year {
  font-family: var(--mono);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--blue);
  letter-spacing: 0.01em;
}
.doc__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--grey);
  letter-spacing: 0.14em;
  margin-block-end: 0.3rem;
}
.doc__issuer {
  display: block;
  font-family: var(--cond);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  /* issuer and place are Latin proper nouns and a directional arrow; isolate
     them so they read correctly inside the Arabic RTL column */
  unicode-bidi: isolate;
}
.doc__place {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--grey);
  margin-block-start: 0.35rem;
  unicode-bidi: isolate;
}
.doc__desc {
  display: block;
  margin-block-start: 0.75rem;
  max-width: 58ch;
  font-size: var(--step-0);
  line-height: 1.55;
}
.doc__thumb {
  border: 1px solid var(--paper-3);
  background: #fff;
  padding: 4px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.doc:hover .doc__thumb { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13); }
.doc__thumb img { width: 100%; height: auto; }
@media (max-width: 720px) {
  .doc { grid-template-columns: 4.25rem 1fr; }
  .doc__thumb { display: none; }
}

/* document viewer */

dialog.viewer {
  border: 0;
  padding: 0;
  max-width: min(920px, 94vw);
  max-height: 92vh;
  width: 100%;
  background: var(--paper);
  color: #3a3a38;
  overflow: auto;
}
dialog.viewer::backdrop { background: rgba(4, 4, 5, 0.86); }
.viewer__bar {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 3vw, 1.75rem);
  background: var(--paper);
  border-block-end: 1px solid var(--paper-3);
}
.viewer__meta { font-family: var(--mono); font-size: var(--step--1); color: var(--grey); }
.viewer__meta b { color: var(--ink); font-weight: 500; }
.viewer__close {
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: none;
  border: 1px solid var(--paper-3);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
}
.viewer__close:hover { background: var(--paper-2); }
.viewer__body { padding: clamp(1rem, 3vw, 1.75rem); }
.viewer__body p { max-width: 62ch; margin-block-end: 1.1rem; }
.viewer__body img { width: 100%; border: 1px solid var(--paper-3); background: #fff; }

/* ---------- work ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); margin-block-start: clamp(2rem, 4vw, 3rem); }
.card { background: var(--ink); padding: clamp(1.4rem, 2.5vw, 2rem); }
.card h3 { font-family: var(--cond); font-size: var(--step-1); font-weight: 600; margin-block-end: 0.75rem; }
.card p { font-size: var(--step-0); }

/* ---------- method ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-block-start: clamp(2rem, 4vw, 3rem); counter-reset: step; }
.step { border-block-start: 2px solid var(--ink-3); padding-block-start: 1rem; counter-increment: step; }
.step:first-child { border-block-start-color: var(--blue); }
.step h3 { font-family: var(--cond); font-size: var(--step-1); font-weight: 600; margin-block-end: 0.5rem; }
.step h3::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--blue-lift);
  letter-spacing: 0.14em;
  margin-block-end: 0.5rem;
  font-weight: 400;
}
.step p { font-size: var(--step--1); line-height: 1.55; }

/* ---------- clients ---------- */

.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-block-start: clamp(2rem, 4vw, 3rem); }
.roster h3 {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue-lift);
  margin-block-end: 1rem;
}
[lang="ar"] .roster h3 { letter-spacing: 0; }
.roster ul { list-style: none; margin: 0; padding: 0; }
.roster li {
  font-family: var(--cond);
  font-size: var(--step-0);
  color: var(--paper);
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--ink-3);
}

/* ---------- press ---------- */

.press { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); margin-block-start: clamp(2rem, 4vw, 3rem); }
.press > * { background: var(--ink); padding: clamp(1.2rem, 2.2vw, 1.75rem); text-decoration: none; display: block; }
.press a:hover { background: var(--ink-2); }
.press b { display: block; font-family: var(--cond); font-size: var(--step-1); font-weight: 600; color: var(--paper); }
.press span { display: block; font-size: var(--step--1); color: var(--grey); margin-block-start: 0.4rem; }
.press a b::after { content: " ↗"; color: var(--blue-lift); font-size: 0.8em; }
[dir="rtl"] .press a b::after { content: " ↖"; }

/* ---------- contact ---------- */

.contact { background: var(--ink-2); border-block-start: 1px solid var(--ink-3); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 720px) { .contact__grid { grid-template-columns: 1fr; } }
.contact__title { font-family: var(--cond); font-size: var(--step-3); font-weight: 600; }
.contact__lede { margin-block-start: 1rem; font-size: var(--step-1); color: var(--paper); max-width: 34ch; }
.contact__cta { margin-block-start: 2rem; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.5rem; margin: 0; font-size: var(--step-0); }
.dl dt {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-block-start: 0.15rem;
}
[lang="ar"] .dl dt { letter-spacing: 0; }
.dl dd { margin: 0; color: var(--paper); }
.dl a { text-decoration: none; border-block-end: 1px solid var(--grey); padding-block-end: 1px; }
.dl a:hover { border-block-end-color: var(--blue-lift); color: var(--blue-lift); }

/* ---------- footer ---------- */

.foot {
  border-block-start: 1px solid var(--ink-3);
  padding-block: 2rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--grey);
}
.foot__in { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }

/* ---------- 404 ---------- */

.oops { min-height: 68vh; display: grid; place-content: center; text-align: center; gap: 1.2rem; }
.oops h1 { font-family: var(--cond); font-size: var(--step-3); font-weight: 600; }
.oops .btn { justify-self: center; }

/* ---------- hero lockup ---------- */

.hero__lockup {
  width: clamp(200px, 22vw, 260px);
  height: auto;
  margin-block-end: clamp(1rem, 2vw, 1.5rem);
}

/* ---------- floating actions ---------- */

.floaters {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.floater {
  --size: 52px;
  inline-size: var(--size);
  block-size: var(--size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  background: var(--ink-2);
  color: var(--blue-lift);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.floater svg { inline-size: 24px; block-size: 24px; }
.floater:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-2px);
}

/* the back-to-top control is not useful until there is something to go back
   to, so it is hidden and removed from the tab order until scrolled */
.floater--top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.floaters[data-scrolled="true"] .floater--top {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* label appears on hover on pointer devices only; the aria-label carries it
   everywhere else */
@media (hover: hover) and (min-width: 861px) {
  .floater::after {
    content: attr(data-tip);
    position: absolute;
    inset-inline-end: calc(100% + 0.6rem);
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    color: var(--paper);
    padding: 0.4rem 0.7rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .floater { position: relative; }
  .floater:hover::after, .floater:focus-visible::after { opacity: 1; }
}
[lang="ar"] .floater::after { letter-spacing: 0; }

@media (max-width: 480px) {
  .floater { --size: 46px; }
  .floater svg { inline-size: 21px; block-size: 21px; }
}

/* ---------- footer, credit ---------- */

.foot__right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  align-items: baseline;
  text-align: end;
}
.foot__by a {
  color: var(--grey-lift);
  text-decoration: none;
  border-block-end: 1px solid var(--ink-3);
}
.foot__by a:hover { color: var(--blue-lift); border-block-end-color: var(--blue-lift); }
@media (max-width: 620px) {
  .foot__in { flex-direction: column; align-items: flex-start; }
  .foot__right { text-align: start; }
}

/* Latin strings that must keep their own internal order inside RTL text.
   A street address beginning with a house number is the classic failure: the
   digit is a weak bidi type, so "7 rue du Grand Veneur" reorders to
   "rue du Grand Veneur 7" in an Arabic paragraph. */
.ltr { direction: ltr; unicode-bidi: isolate; }