/* ==========================================================================
   CHANTÉE PROPOSAL — Arabic-first RTL layer
   Mirrors direction-dependent placement only. No design, colour or scale
   decisions are changed here.
   ========================================================================== */

html, body { direction: rtl; }

/* Latin-only runs that must not be re-ordered by the bidi algorithm.
   Block-level .ltr elements still start on the right, like their RTL siblings. */
.ltr { direction: ltr; unicode-bidi: isolate; text-align: right; }
.ltr-block { direction: ltr; unicode-bidi: isolate; display: block; text-align: right; }

/* …except where the surrounding block is centred by design */
.center .ltr, .bigidea .ltr, .board-end .ltr, .cup-card .ltr,
.phone-screen .ltr, .closing-tag.ltr, .secret-order .ltr,
.marquee-track.ltr, .watermark.ltr { text-align: center; }

/* .ar is the document default now — stop it forcing an opposite alignment */
.ar { text-align: right; }
.quote.ar, .exp-title .ar { text-align: right; }
.bigidea-ar, .beat-line { text-align: center; }

/* ---------- Fixed chrome ---------- */
.dots { left: auto; right: 1.4rem; }
.dots a::after { left: auto; right: 20px; transform: translateY(-50%) translateX(6px); }
.dots a:hover::after { transform: translateY(-50%) translateX(0); }

.fs-toggle { left: auto; right: 1.5rem; }
.fs-panel  { left: auto; right: 1.5rem; }
.fs-opt    { text-align: right; }

/* ---------- Hero ---------- */
.scroll-hint { right: auto; left: 2.2rem; }
.bg-cup-1 { right: auto; left: 3%; }
.bg-cup-2 { right: auto; left: 29%; }
.bg-cup-3 { right: auto; left: 1%; }
.ring-1   { right: auto; left: 6%; }
.ring-2   { left: auto;  right: 7%; }
.beam     { right: auto; left: 15%; transform: rotate(25deg); }

/* ---------- Directional glyphs ---------- */

.shift-col.to .shift-list li::before { content: "←"; }

.loop-node { padding: 1.5rem 1.6rem 1.5rem 1.3rem; }
.loop-node::before { left: auto; right: 0; }
.loop-node::after  { right: auto; left: -.85rem; content: "←"; }

.kpi li { padding-left: 0; padding-right: .95rem; }
.kpi li::before { content: "‹"; margin-right: 0; margin-left: .45rem; }
.pillar li::before { margin-right: 0; margin-left: .5rem; }
.shift-list li::before { transform: none; }

/* ---------- Borders that follow reading order ---------- */
.j-node { border-left: none; border-right: 1px solid rgba(247,243,235,.1); }
.j-node:nth-child(4n+1) { border-right: none; }

.measure-note {
  border-left: none; padding-left: 0;
  border-right: 2px solid rgba(196,139,87,.4); padding-right: 1.1rem;
}

/* ---------- Small alignment corrections ---------- */
.loop-node i { right: auto; left: 1.2rem; }
.exp-no { padding-top: .35rem; }

/* ==========================================================================
   ARABIC TYPE METRICS
   The Latin scale assumed tight leading and negative tracking. Arabic is a
   cursive script: tracking breaks the joins, and the tall ascenders/marks
   need real leading. Latin runs keep the original treatment via .ltr.
   ========================================================================== */
h1, h2, h3, h4 { letter-spacing: normal; line-height: 1.35; }
h2.title       { font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.42; }
.c-tag         { font-size: clamp(1.9rem, 3.5vw, 3.2rem); line-height: 1.45; }
.closing-line  { font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.38; }
.sub, .card h4, .exp-title h4, .pillar h4, .shift-col h4,
.tl-body h4, .j-node h4, .formula-step h4, .cup-card h4 { line-height: 1.4; }

h1.ltr, h2.ltr, h3.ltr, h4.ltr,
.c-tag.ltr, .bigidea-en, .closing-tag.ltr {
  letter-spacing: -.03em; line-height: 1.05;
}
h2.title.ltr { line-height: 1.04; }

/* Tracked micro-labels: drop the tracking on Arabic, keep it on Latin */
.idx, .meta, .verb, .tag, .mini-tag, .topbar-role, .hero-eyebrow,
.hero-stat span, .tl-phase span, .frame b, .j-node b, .formula-step b,
.deliver-col b, .card-num, .exp-row dt, .phone-sub, .footer-note,
.fs-panel h5, .secret-order span, .scroll-hint { letter-spacing: normal; }

.idx .ltr, .meta .ltr, .verb.ltr, .tag.ltr, .mini-tag.ltr, .topbar-name.ltr,
.card-num.ltr, .exp-row dt.ltr, .frame b.ltr, .j-node b.ltr,
.formula-step b.ltr, .deliver-col b.ltr, .phone-sub.ltr,
.cup-card .meta.ltr, .secret-order span.ltr, .hero-eyebrow .ltr { letter-spacing: .16em; }

/* Arabic needs a little more leading than the Latin scale assumed */
.lead  { line-height: 2.05; }
.small { line-height: 1.95; }
.card p, .pillar li, .loop-node span, .j-node p,
.formula-step p, .cup-card p, .tsb-item p, .exp-row dd,
.tl-body p, .shift-list li, .deliver-col li, .kpi li { line-height: 1.95; }
.beat-line { line-height: 1.75; }
.quote { line-height: 1.65; }
.quote.ltr { line-height: 1.4; }

@media (max-width: 768px) {
  .j-node { border-right: none; }
}

/* The fixed typeface button sits bottom-start; give the hero stats room on phones */
@media (max-width: 768px) {
  #hero { padding-bottom: 6.5rem; }
}