/* ═══════════════════════════════════════════════════════════════════════════
   LOCKUP GEOMETRY · shared by the page and the export harness.
   Everything derives from --h, the mark's height.
   ═══════════════════════════════════════════════════════════════════════════ */
.lk{
  --h: 84px;
  --ratio-r:  2.6725;   /* 187.5  / 70.16 · width including the ® */
  --ratio-nr: 2.4181;   /* 169.65 / 70.16 · width without it */
  --align:    2.4181;   /* the alignment span, B-left to P-right */
  --gap-below: 0.16;    /* x h · solved in script, to the text's TOP INK */
  --gap-side:  0.26;    /* x h · solved in script, from the LETTERFORM edges */
  --gap-stack: 0.10;    /* x h · between two Arabic lines */
  --en-track:  0.02;    /* em · the designed Latin tracking, never fitted */

  display: flex;
  /* The page around this is right to left, but the lockup's geometry is fixed
     and must not mirror with it: the kerf sits on the B's shoulder in every
     language, and each variant sets its own direction below. */
  direction: ltr;
  --mark-c: #FFFFFF;
  --gold-c: #D6B37F;
}

.lk svg.mark{
  height: var(--h);
  width: calc(var(--h) * var(--ratio-nr));
  display: block; flex: none; overflow: visible;
}
.lk.has-r svg.mark{ width: calc(var(--h) * var(--ratio-r)); }

.lk .txt{ display: flex; flex-direction: column;
          gap: calc(var(--h) * var(--gap-stack)); }
.lk .line{ display: block; white-space: nowrap; line-height: 1;
           color: var(--mark-c); }
.lk .en{ font-family: Manrope, system-ui, sans-serif; font-weight: 400;
         letter-spacing: calc(var(--en-track) * 1em); }
/* THE AMPERSAND IS INTER. The icon's own & is an Inter glyph, so setting the
   wordmark entirely in Manrope puts two unlike ampersands in one lockup. */
.lk .amp{ font-family: Inter, Manrope, sans-serif; font-weight: 400; }
/* THE KAF. Thmanyah carries an alternate kaf under salt, which the house form
   calls for. The reh never joins forward, so the kaf in وشركاؤه sits in its
   INITIAL form, and salt is the feature that reaches it. */
.lk .ar{ font-family: "Thmanyah Display", Manrope, sans-serif; font-weight: 700;
         letter-spacing: 0; direction: rtl;
         font-feature-settings: "salt" 1; }

/* ── ALIGNMENT FOLLOWS THE SCRIPT, never the side ──────────────────────────
   Latin is flush left and Arabic flush right wherever each one sits, so a
   variant reads the way its language does. */
.lk .txt.hfit{ align-items: flex-start; }
.lk .txt.hfit:has(.ar){ align-items: flex-end; }
.lk .line.en{ align-self: flex-start; }
.lk .line.ar{ align-self: flex-end; }

/* BELOW · text starts at the B's left edge and fills the span */
.lk-below{ flex-direction: column; align-items: flex-start;
           gap: calc(var(--h) * var(--gap-below)); }
.lk-below .txt{ width: calc(var(--h) * var(--align));
                gap: calc(var(--h) * var(--gap-stack)); }
.lk-below .line{ align-self: flex-start; }

/* BESIDE · the floor and the gap are solved in script; CSS only sets which
   side the text falls on and that the boxes bottom-align to begin with. */
/* The CSS gap is the BASE, refined in script against the letterform edges.
   Leaving it to script alone means any failure in the solver collapses the
   text onto the mark rather than merely being a little off. */
.lk-beside{ align-items: flex-end; gap: calc(var(--h) * var(--gap-side)); }
/* the side names the position of the TEXT, and the script is carried
   separately, so the four variants are (en|ar) x (left|right) */
.lk-beside.side-right{ flex-direction: row; }
.lk-beside.side-left { flex-direction: row-reverse; }

/* FULL HORIZONTAL · each name reads outward, so neither reads into the mark */
.lk-fullh{ flex-direction: row; align-items: flex-end;
           gap: calc(var(--h) * var(--gap-side)); }
.lk-fullh .ar-side{ align-items: flex-end; }